frontend-design

Files (1)

• SKILL.md

SKILL.md (first lines)

# 프론트엔드 디자인 (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 히어로 섹션
- 위계 없는 일반적인 카드 더미

From kypo42/everything-claude-code-kr, MIT.

More from kypo42/everything-claude-code-kr