frontend-design

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처럼 읽히지 않는다
• 구현이 단지 보기 흥미로운 수준이 아니라 프로덕션급이다