프론트엔드 디자인
제너릭한 'AI 쓰레기' 미학을 피하고, 독창적이고 프로덕션에 바로 투입 가능한 프론트엔드 인터페이스를 만듭니다. 미적 디테일과 창의적인 선택에 탁월한 주의를 기울인 실제 작동하는 코드.
디자인 사고 (코딩 전)
대담한 미적 방향을 선택하세요:
- 목적: 이 인터페이스는 어떤 문제를 해결하나요? 누가 사용하나요?
- 톤: 극단을 선택하세요 — 잔혹할 정도로 미니멀, 맥시멀리스트 혼돈, 레트로 퓨처리즘, 유기적/자연적, 고급스러움/세련됨, 장난기 가득/장난감 같음, 에디토리얼/잡지 스타일, 브루탈리스트/로우, 아르데코/기하학적, 소프트/파스텔, 산업적/실용적
- 제약 조건: 기술적 요구 사항 (프레임워크, 성능, 접근성)
- 차별화: 이 디자인을 잊을 수 없게 만드는 것은 무엇인가요? 누군가가 기억하는 한 가지는 무엇인가요?
명확한 개념적 방향을 선택하고 정밀하게 실행하세요. 대담한 맥시멀리즘과 세련된 미니멀리즘 모두 통합니다. 핵심은 강도가 아니라 의도입니다.
프론트엔드 미학 핵심 요소
타이포그래피
아름답고 독특하며 흥미로운 폰트를 선택하세요. Arial, Inter, Roboto, 시스템 폰트와 같은 제너릭 폰트는 피하세요. 독특한 디스플레이 폰트와 세련된 본문 폰트를 짝지으세요. 예상치 못하고 개성 있는 선택이 좋습니다.
색상 및 테마
일관된 미학에 집중하세요. 일관성을 위해 CSS 변수를 사용하세요. 대담한 주색과 선명한 강조색이 균일하게 분산된 팔레트보다 뛰어납니다.
모션
효과 및 마이크로 인터랙션을 위한 애니메이션. HTML은 CSS 전용, React는 Motion 라이브러리. 임팩트가 큰 순간: 흩어진 마이크로 인터랙션보다 단계적으로 드러나는 잘 짜여진 페이지 로드 한 번이 더 큰 즐거움을 줍니다. 스크롤 트리거와 놀라움을 주는 호버 상태.
공간 구성
예상치 못한 레이아웃. 비대칭. 겹침. 대각선 흐름. 그리드를 깨는 요소. 넉넉한 여백 또는 통제된 밀도.
배경 및 시각적 디테일
단색보다는 분위기와 깊이. 그래디언트 메시, 노이즈 텍스처, 기하학적 패턴, 레이어드 투명도, 드라마틱한 그림자, 장식용 테두리, 커스텀 커서, 그레인 오버레이.
절대 사용하지 말 것
- 남용된 폰트 패밀리 (Inter, Roboto, Arial, 시스템 폰트)
- 진부한 색상 구성 (흰색 배경에 보라색 그래디언트)
- 예측 가능한 레이아웃 및 컴포넌트 패턴
- 맥락별 특성이 결여된 판에 박힌 디자인
창의적으로 해석하세요. 어떤 디자인도 똑같아서는 안 됩니다. 라이트/다크 테마, 다른 폰트, 다른 미학을 번갈아 사용하세요. 세대를 거쳐 일반적인 선택으로 수렴하지 마세요.
구현 복잡성을 미학적 비전에 맞추세요. 맥시멀리스트 디자인은 정교한 코드가 필요합니다. 미니멀리스트 디자인은 절제, 정밀함, 그리고 간격, 타이포그래피, 미묘한 디테일에 대한 세심한 주의가 필요합니다.
Kevin의 디자인 컨텍스트
UI 작업을 시작하기 전에 wiki/design/design-system.md에서 현재 디자인 토큰을 읽으세요.
참조: wiki/design/aesthetic-systems.md (아트 디렉션 원형).
관련 스킬
web-design-guidelines— Vercel 웹 인터페이스 가이드라인 준수vercel-react-best-practices— React 성능 최적화frontend-design-taste— Kevin의 개인 아트 디렉션 스킬modern-web-design— 디자인 트렌드 및 구현 패턴