| name | frontend-design |
| description | 높은 디자인 품질의 개성 있는 프로덕션급 프론트엔드 인터페이스를 만듭니다. 사용자가 웹 컴포넌트, 페이지, 애플리케이션을 만들고자 하며 시각 방향이 코드 품질만큼 중요할 때 사용합니다. |
| origin | ECC |
Frontend Design
이 스킬은 단순히 "동작하게 만들기"가 아니라 "디자인된 것처럼 보이게 만들기"가 목표일 때 사용합니다.
제품 페이지, 대시보드, 앱 셸, 컴포넌트, 시각 시스템처럼 일반적인 AI UI가 아니라 분명한 관점을 가져야 하는 작업에 적합합니다.
사용 시점
- 랜딩 페이지, 대시보드, 앱 표면을 처음부터 만들 때
- 밋밋한 인터페이스를 의도 있고 기억에 남는 형태로 끌어올릴 때
- 제품 개념을 구체적 시각 방향으로 번역할 때
- 타이포그래피, 구성, 모션이 중요한 프론트엔드를 구현할 때
핵심 원칙
방향을 고르고 끝까지 밀어붙입니다.
안전한 평균 UI는 강하고 일관된 미학보다 보통 못합니다.
디자인 워크플로
1. 먼저 인터페이스를 프레이밍
코딩 전에 다음을 확정합니다.
- purpose
- audience
- emotional tone
- visual direction
- 사용자가 기억해야 할 한 가지
가능한 방향 예시:
- brutally minimal
- editorial
- industrial
- luxury
- playful
- geometric
- retro-futurist
- soft and organic
- maximalist
방향을 가볍게 섞지 않습니다. 하나를 고르고 깔끔하게 실행합니다.
2. 시각 시스템 구축
다음을 정의합니다.
- type hierarchy
- color variables
- spacing rhythm
- layout logic
- motion rules
- surface / border / shadow treatment
CSS 변수나 프로젝트 토큰 시스템을 사용해 인터페이스가 커져도 일관되게 유지합니다.
3. 의도적으로 구성
다음을 선호합니다.
- 계층을 날카롭게 만드는 비대칭
- 깊이를 만드는 겹침
- 초점을 분명히 하는 강한 여백
- 제품이 밀도를 실제로 필요로 할 때만 높은 밀도
명백히 맞는 경우가 아니라면 대칭 카드 그리드로 습관적으로 돌아가지 않습니다.
4. 모션에 의미 부여
애니메이션은 다음에 사용합니다.
- 계층 드러내기
- 정보 단계화
- 사용자 행동 강화
- 기억에 남는 순간 1~2개 만들기
일반적인 마이크로 인터랙션을 사방에 흩뿌리지 않습니다.
강한 기본값
Typography
- 개성 있는 폰트 선택
- 필요하면 개성 있는 디스플레이체와 읽기 쉬운 본문체를 조합
- 디자인 주도 페이지에서 일반적인 기본 폰트 회피
Color
- 분명한 팔레트에 커밋
- 하나의 지배적 필드와 선택적 강조가 대체로 더 강함
- 제품이 정말 요구하지 않으면 전형적인 보라 그라디언트 회피
Background
분위기를 씁니다.
- gradients
- meshes
- textures
- subtle noise
- patterns
- layered transparency
플랫하고 빈 배경이 정답인 경우는 드뭅니다.
Layout
- 구성이 이득을 볼 때 그리드를 깹니다
- 대각선, 오프셋, 그룹핑을 의도적으로 사용합니다
- 비전형적 레이아웃이어도 읽기 흐름은 명확해야 합니다
안티패턴
다음으로 습관적으로 돌아가지 않습니다.
- 서로 바꿔 끼울 수 있는 SaaS 히어로 섹션
- 계층 없는 일반 카드 더미
- 체계 없는 랜덤 포인트 컬러
- 임시 텍스트 같은 타이포그래피
- 넣기 쉬워서 넣은 모션
실행 규칙
- 기존 제품 안에서 작업할 때는 설계 시스템을 보존합니다
- 시각 아이디어에 맞는 기술 복잡도를 유지합니다
- 접근성과 반응형은 유지합니다
- 데스크톱과 모바일 모두 의도적으로 느껴져야 합니다
품질 게이트
전달 전에:
- 인터페이스에 분명한 시각 관점이 있다
- 타이포그래피와 간격이 의도적으로 느껴진다
- 색과 모션이 제품을 돕지 장식만 하지 않는다
- 결과가 일반적인 AI UI처럼 읽히지 않는다
- 구현이 단지 보기 흥미로운 수준이 아니라 프로덕션급이다
