frontend-design

name	frontend-design
description	디자인 품질이 높은 독특하고 프로덕션 급의 프론트엔드 인터페이스를 제작합니다. 사용자가 웹 컴포넌트, 페이지 또는 애플리케이션 구축을 요청하고 시각적 방향이 코드 품질만큼 중요할 때 사용하세요.
origin	ECC

프론트엔드 디자인 (Frontend Design)

단순히 "작동하게 만드는 것"이 아니라 "디자인된 것처럼 보이게 만드는 것"이 과제일 때 이 스킬을 사용하세요.

이 스킬은 일반적인 AI 느낌의 UI가 아닌 명확한 관점이 필요한 제품 페이지, 대시보드, 앱 쉘, 컴포넌트 또는 시각적 시스템을 위한 것입니다.

사용 시점

• 랜딩 페이지, 대시보드 또는 앱 표면을 처음부터 구축할 때
• 밋밋한 인터페이스를 의도적이고 기억에 남는 것으로 업그레이드할 때
• 제품 개념을 구체적인 시각적 방향으로 변환할 때
• 타이포그래피, 구성 및 모션이 중요한 프론트엔드를 구현할 때

핵심 원칙

방향을 정하고 그것을 고수하세요.

안전하고 평범한 UI는 대담한 선택이 가미된 강력하고 일관된 미학보다 대개 좋지 않습니다.

디자인 워크플로우

1. 인터페이스 프레임 잡기

코딩하기 전에 다음을 결정하세요:

• 목적
• 대상 독자
• 감성적 톤
• 시각적 방향
• 사용자가 기억해야 할 한 가지

가능한 방향:

• 브루탈리스트 미니멀 (Brutally minimal)
• 에디토리얼 (Editorial)
• 인더스트리얼 (Industrial)
• 럭셔리 (Luxury)
• 플레이풀 (Playful)
• 기하학적 (Geometric)
• 레트로 퓨처리즘 (Retro-futurist)
• 부드럽고 유기적인 (Soft and organic)
• 맥시멀리즘 (Maximalist)

방향을 무분별하게 섞지 마세요. 하나를 선택하고 깔끔하게 실행하세요.

2. 시각적 시스템 구축

다음을 정의하세요:

• 타이포그래피 위계
• 컬러 변수
• 간격 리듬 (Spacing rhythm)
• 레이아웃 논리
• 모션 규칙
• 표면 / 테두리 / 그림자 처리

인터페이스가 확장되어도 일관성을 유지할 수 있도록 CSS 변수나 프로젝트의 토큰 시스템을 사용하세요.

3. 의도를 담은 구성

다음을 선호하세요:

• 위계를 날카롭게 할 때 비대칭 사용
• 깊이감을 만들 때 겹침(overlap) 사용
• 집중도를 명확히 할 때 강력한 여백 사용
• 제품에 이득이 될 때만 조밀한 레이아웃 사용

명확하게 적합한 경우가 아니면 기본 대칭 카드 그리드를 피하세요.

4. 의미 있는 모션

애니메이션을 사용하여 다음을 수행하세요:

• 위계 노출
• 정보 단계별 제시
• 사용자 행동 강화
• 한두 개의 기억에 남는 순간 생성

일반적인 마이크로 인터랙션을 모든 곳에 흩뿌리지 마세요. 잘 연출된 하나의 로드 시퀀스가 스무 개의 무작위 호버 효과보다 대개 더 강력합니다.

강력한 기본값 (Strong Defaults)

타이포그래피

• 캐릭터가 있는 폰트 선택
• 적절한 경우 독특한 디스플레이 서체와 가독성 좋은 본문 서체를 조합
• 디자인 중심 페이지에서 일반적인 기본 폰트 피하기

컬러

• 명확한 팔레트를 고수하세요
• 균등하게 배분된 무지개 팔레트보다 하나의 지배적인 필드와 선택적인 강조색이 대개 더 잘 작동합니다
• 제품에서 진정으로 요구하는 경우가 아니라면 진부한 '흰색 배경의 보라색 그라데이션'을 피하세요

배경

분위기를 활용하세요:

• 그라데이션
• 메쉬 (Meshes)
• 텍스처
• 미세한 노이즈
• 패턴
• 레이어드 투명도

단순히 비어 있는 평면 배경은 제품 중심 페이지에서 최선의 답인 경우가 드뭅니다.

레이아웃

• 구성에 도움이 될 때 그리드를 깨세요
• 대각선, 오프셋 및 그룹화를 의도적으로 사용하세요
• 레이아웃이 독특하더라도 읽기 흐름은 명확하게 유지하세요

안티 패턴 (Anti-Patterns)

다음을 기본으로 하지 마세요:

• 흔한 SaaS 히어로 섹션
• 위계 없는 일반적인 카드 더미
• 시스템 없는 무작위 강조색
• 플레이스홀더 느낌의 타이포그래피
• 애니메이션 추가가 쉽다는 이유만으로 존재하는 모션

실행 규칙

• 기존 제품 내부에서 작업할 때는 확립된 디자인 시스템을 보존하세요
• 시각적 아이디어에 기술적 복잡성을 맞추세요
• 접근성과 반응형을 온전히 유지하세요
• 프론트엔드는 데스크톱과 모바일 모두에서 의도된 것처럼 느껴져야 합니다

품질 검사 (Quality Gate)

전달하기 전 확인 사항:

• 인터페이스에 명확한 시각적 관점이 있음
• 타이포그래피와 여백이 의도적으로 느껴짐
• 컬러와 모션이 무작위 장식이 아닌 제품을 지원함
• 결과물이 일반적인 AI UI처럼 읽히지 않음
• 구현이 단순히 시각적으로 흥미로운 수준을 넘어 프로덕션 급임