frontend-design

Frontend Design

프론트엔드 UI를 사람이 의도적으로 다듬은 수준으로 설계·구현·리뷰한다. "AI 디폴트"(뻔한 카드 나열, 평균적 간격, 기본 shadow)를 거부하고 의도·토큰·상태·접근성을 모두 통제한다.

작업 절차

1. Intent — 대상 사용자 · 핵심 과업 · 톤을 1~2줄로 명시. 참조 사례 3개를 머릿속으로 비교.
2. Tokens — 색·타이포·스페이싱·라운드·그림자·모션 토큰. reference/semantic 2계층 분리.
3. Components — 프리미티브 단위로 해부. 상태 매트릭스(default/hover/focus-visible/active/disabled/loading/empty/error).
4. Compose — 페이지·뷰를 컴포넌트 조합으로. 반응형 breakpoint 명시.
5. Micro-interaction — 전환 150~250ms, ease-out/spring. prefers-reduced-motion 대응.
6. A11y pass — WCAG AA 4.5:1 (가능하면 APCA Lc ≥ 60), 키보드 포커스, ARIA, 터치 타깃 44×44.
7. Review — frontend-ux-reviewer 에이전트가 있으면 감사 요청.

핵심 원칙 (압축 요약)

• AI 디폴트 거부: 모든 선택에 "왜" 를 답할 수 없으면 바꾼다.
• Raw 리터럴 금지: 컴포넌트 코드에 hex·rgb·임의 px 값 직접 금지. semantic 토큰만.
• 타입 스케일 1.125 or 1.25: 랜덤 크기 금지. 본문 16px+, 줄 길이 45~75자, line-height 1.5±0.1.
• 4/8px grid: 모든 간격은 그리드 값. "눈대중" 금지.
• 상태 커버리지: 프리미티브마다 최소 6개 상태 + 빈/에러/스켈레톤.
• 아이콘 한 세트: Lucide / Phosphor / Radix / Heroicons 중 하나만.
• 피드백 즉각성: 100ms 이내 첫 반응, 1s 이상 작업은 스켈레톤/progress.
• 파괴적 동작 방어: 삭제·결제·로그아웃은 확인 단계 + 계급 낮은 위치.

색상 원칙 (내장 · 외부 의존 없음)

이 스킬은 다음 색상 규칙을 자체 내장한다. 추가 스킬 설치 없이 이 섹션만으로 팔레트·대비·토큰 설계가 가능하다.

토큰 2계층 (필수)

• Reference tokens: 원시 색 — 팔레트 정의·변환·진단에만 사용.
  • 예: ref.brand.500 = oklch(0.62 0.18 254)
• Semantic tokens: 역할에 매핑 — 컴포넌트는 오직 semantic 만 참조.
  • 예: semantic.surface.default = ref.neutral.50, semantic.text.muted = ref.neutral.600, semantic.state.danger = ref.red.600
• 컴포넌트 파일에 raw hex/rgb 리터럴 금지. 테마·다크 모드 전환이 불가능해진다.

색 공간 선택

• OKLCH 우선: 명도(L) 조작이 균일 — hover/active 상태를 oklch(from var(--ref) calc(l - 0.08) c h) 로 유도 가능.
• HSL 피하기: 같은 명도(L) 값이라도 hue 에 따라 실제 밝기 차이가 커 무작위 결과 생성.
• hex: 최종 출력·디자인 토큰 export 에만.

대비 기준

• WCAG AA: 본문 4.5:1, 큰 텍스트(18.66px 이상 또는 14pt bold) 3:1, UI 컴포넌트/그래픽 객체 3:1. 최소 기준.
• APCA (권장): Lc ≥ 60 (본문), Lc ≥ 45 (큰 텍스트), Lc ≥ 30 (비필수 UI). 지각적으로 더 정확.
• 다크 모드에서 흰 배경용 색을 그대로 쓰지 말 것. 명도 축을 뒤집은 별도 semantic 매핑.