| 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처럼 읽히지 않음
- 구현이 단순히 시각적으로 흥미로운 수준을 넘어 프로덕션 급임
