Yun Chan 6805fb2be7 feat(skill): absorb external design skills, restore interview gate, add review route

- Restore the step-0 interview as a mechanical gate the skill explicitly
  depends on; add harness.md (per-harness question tools, limits,
  fallbacks) and brief-interview.md (slots, question cards, rounds).
- Add 10 reference docs absorbed from external design skills
  (accessibility, interaction-feel, elevation, color, icons, product-copy,
  component-systems, critique, change-review, print-email) and extend
  existing references.
- Add a review-only route and two hard-gate clauses (truncated content
  reachability, three-flashes limit).
- design-gate: split tap targets into WCAG 2.5.8 and 44px contract layers,
  run axe-core when available, and fix false positives found on a real
  site (decorative alt="", stacked wordmark line count, url-only pages).
- lint-skill: fail if the interview gate section or its links disappear.
- Ship agents/openai.yaml and THIRD_PARTY_NOTICES.md.

2026-09-24 13:26:03 +09:00

9.7 KiB

Raw Blame History

style playbook — 과업에 맞는 시각 언어

스타일은 성격 테스트가 아니라 과업·콘텐츠·운영 조건의 출발점이다. 아래 항목을 고른 뒤에도 design foundations의 접근성·성능·과업 검증을 통과해야 한다. 수치나 금지 목록을 복사하지 말고, 실제 렌더에서 결정의 이유를 확인한다.

계열	목표·정보 구조	타입·색·이미지	모션	적합 조건	실패	검증
Swiss / editorial	복잡한 정보 또는 긴 읽기를 정돈한다. Swiss는 명확한 grid·비교, editorial은 본문·캡션·wide media의 읽기 리듬을 쓴다	Swiss는 산세·제한된 역할색·도표/제품 증거. Editorial은 읽기 가능한 세리프 또는 산세·선택적 종이감·고품질 사진	상태 피드백 우선, 읽기 흐름을 빼앗지 않음	문서·B2B·문화·포트폴리오처럼 구조 또는 콘텐츠가 설득할 때	빈 여백으로 정보·근거를 숨김; editorial에서 라틴 전용 폰트가 한글을 망침	320px·200% 확대에서 measure·caption·표가 읽히고, 회색조에서 위계가 보이는지
Expressive	기억할 장면 하나를 만들되 내용의 읽기 순서를 유지한다. 비대칭·겹침·강한 타입은 한 개의 중심 개념에 복무한다	개성 강한 display와 안정 본문을 구분; 높은 대비 색·질감은 근거 있는 한정 영역에	reduced motion에서 같은 의미를 정지 상태로 전달	캠페인·문화·에이전시처럼 독자적 인상이 과업일 때	장치를 여러 개 겹쳐 메시지·포커스·대비를 잃음	효과 off, keyboard, 390px에서 메시지·행동이 먼저 남는지
Luxury	희소성·재료·제작 맥락을 느리게 보여 준다. 선택지는 적고 증거는 깊다	절제된 팔레트, 정교한 type, 원본 수준 사진·재질; 장식보다 크롭과 상세에 투자	느린 전환도 사용자가 기다리는 흐름에서만	고관여 제품·공간·문화재처럼 신뢰와 감상이 함께 필요할 때	베이지·세리프·그레인을 고급의 자동 신호처럼 반복; 가짜 희소성/후기	이미지 출처·해상도·alt, 가격/조건의 명확성, 모션 off에서의 설득
Playful	탐색과 학습의 긴장을 낮춘다. 핵심 행동은 여전히 예측 가능해야 한다	밝은 색은 의미 역할을 분리하고, 일러스트/캐릭터는 과업 단서를 보강	작은 보상·피드백은 가능하나 중지 가능성과 오류 회복을 제공	교육·커뮤니티·가벼운 소비 경험에서 놀이가 목표를 돕는 경우	재미가 상태·가격·위험 신호를 가림	처음 방문자가 다음 행동·오류 복구를 설명할 수 있는지, reduced motion
Immersive	공간·시간·감각적 몰입을 우선하되 대체 경로를 제공한다. 하나의 장면에서 깊이를 만든다	큰 원본 미디어, 제한된 overlay text, 읽을 수 있는 대비와 대체 콘텐츠	WebGL/스크롤 연출은 progressive enhancement; pause·fallback 필수	전시·게임·영화·브랜드 스토리처럼 경험 자체가 가치일 때	로딩·멀미·배터리 비용을 감추고, 마우스/고성능 기기만 지원	저사양/느린 망/키보드/reduced motion에서 동일 핵심 정보와 행동 가능 여부
Dense	빈번한 비교·감시·편집을 빠르게 한다. 요약→필터→상세의 정보 계층을 명시한다	가독성 높은 본문·tabular 수치·기능색·표/차트의 명확한 라벨	값 변화는 위치 이동보다 상태 표식; 빠른 피드백	운영 도구·분석·거래처럼 반복 과업과 숙련 사용자가 있을 때	미니멀이라는 이유로 필터·단위·오류 맥락을 숨김; 색만으로 상태 전달	대표 과업 시간, 200% 확대, keyboard, 좁은 폭의 우선순위/대체 경로
Platform-native (Apple풍)	PWA·모바일 웹앱이 OS 네이티브 앱과 나란히 놓일 때 플랫폼 소속감을 만든다. 정보 구조는 위 계열 중 과업에 맞는 것을 그대로 쓰고, 이 행은 표면 마감만 더한다	유동 인터페이스 물리(인터럽트 가능한 스프링, 제스처 인식), 머티리얼 위계(svg-filters.md 유리 절), 시스템 폰트의 옵티컬 사이징을 존중하는 타이포	스프링 기반 전환, 인터럽트 가능성, 제스처에 반응하는 촉감(interaction-feel.md)	브리프가 "iOS 느낌"·"네이티브 앱 감각"을 명시했을 때만. 그 자체가 목표 시장이 아니면 열지 않는다	특정 미학을 기본값으로 삼아 모든 프로젝트에 유리·스프링을 얹음; 저사양·Firefox에서 무너짐	필터 off·CPU throttling 4×, Firefox·저사양 기기에서 폴백이 성립하는지, reduced motion·reduced transparency

계열별 빠른 선택 예와 오용

Swiss / editorial

구도: Swiss는 같은 시작선의 명세·비교 레일을, editorial은 본문 폭·wide 이미지·여백 주석의 리듬을 선택한다.
밀도·타입: Swiss는 짧은 산세 본문과 촘촘한 비교를, editorial은 세리프 또는 산세 중 언어별 읽기 테스트를 통과한 본문과 캡션 계층을 쓴다.
오용: Swiss의 빈 공간으로 필수 사양을 숨기거나, editorial의 종이색·그레인을 콘텐츠 근거 없이 고급 신호로 반복하지 않는다.

Expressive

구도: 한 장면만 비대칭·중첩·대형 타입으로 만들고, 이후 정보는 안정된 grid로 회수한다.
밀도·타입: display의 개성과 본문의 읽기 역할을 분리하며, 강조색·질감·변형은 하나의 중심 아이디어에만 쓴다.
오용: 회전·세로쓰기·대문자·왜곡을 함께 쌓아 포커스 순서와 메시지를 잃지 않는다.

Luxury

구도: 여백 속 하나의 제품/재료 detail과 근거·조건이 이어지는 느린 순서를 쓴다.
밀도·타입: 큰 원본 사진은 크롭 품질을 우선하고, 가격·제작 방식·규격은 작은 글자로 숨기지 않는다.
오용: 베이지, 세리프, grain을 자동 고급 장치로 쓰거나 검증되지 않은 희소성·후기를 만들지 않는다.

Playful

구도: 다음 행동과 진행 상태를 고정하고, 그 주변에서 색·캐릭터·보상 피드백을 쓴다.
밀도·타입: 행동에는 명확한 라벨과 충분한 hitbox를 두며, 일러스트는 과업 단서를 설명할 때만 쓴다.
오용: 게임 같은 보상이 오류·가격·동의·파괴적 행동의 위험 신호를 가리지 않게 한다.

Immersive

구도: 한 장면의 미디어와 짧은 overlay를 중심으로 두고, 동일 내용을 읽을 수 있는 문서 흐름을 제공한다.
밀도·타입: 크고 원본 품질의 미디어를 쓸 때 contrast·caption·대체 텍스트를 표면의 일부로 설계한다.
오용: WebGL·스크롤 연출을 핵심 정보의 유일한 전달 경로나 고성능 기기 전용 상호작용으로 만들지 않는다.

Dense

구도: 요약→필터→상세와 비교 가능한 표·차트를 같은 정보 모델로 연결한다.
밀도·타입: tabular figure, 단위·기간 라벨, 기능색, 안정된 행 높이로 반복 과업의 속도를 돕는다.
오용: ‘깔끔함’을 이유로 필터·오류·데이터 출처·단위를 감추거나 색만으로 상태를 전달하지 않는다.

Platform-native (Apple풍) — 조건부

언제: 브리프가 "iOS 느낌"·"네이티브 앱처럼"을 명시했거나 PWA가 OS 네이티브 앱 옆에 나란히 설치되는 과업일 때만 연다. 이 계열은 정보 구조를 새로 정하지 않는다 — 위 여섯 계열 중 과업에 맞는 것으로 뼈대를 고르고, 이 행은 그 위에 표면 마감만 얹는다.

구도: 전환은 하드 컷이 아니라 스프링 기반으로 하고, 진행 중인 애니메이션을 중간에 잡아도(interrupt) 속도가 끊기지 않게 한다. 제스처(드래그·스와이프)에 실시간으로 반응하는 표면을 우선 검토한다. 상세 물리·수치는 interaction-feel.md를 따른다.
재질: 유리·머티리얼 위계는 svg-filters.md의 "머티리얼 위계와 가독성" 절을 그대로 따른다 — swiss-minimal은 이 계열과 함께 쓰지 않는다.
타입: 커스텀 서체보다 플랫폼 시스템 폰트를 기본으로 검토한다. 이미 옵티컬 사이징과 트래킹 테이블이 튜닝돼 있다. 오버라이드는 근거가 있을 때만 한다[SKILL-APPLE-DESIGN].
오용: 이 표면 마감을 모든 프로젝트의 기본값처럼 반복하지 않는다. 유리·스프링·머티리얼이 저사양 기기와 Firefox에서 무너지지 않는지 §7(svg-filters.md)의 폴백 규칙으로 확인한다 — "예뻐서"가 채택 이유가 되지 않는다.

사례와 트렌드의 사용법

수상 사례는 완성된 화면을 베끼는 재료가 아니라 제약·구도·사용자 경로를 분해할 표본이다. Awwwards의 40/30/20/10은 그 심사 시스템의 배점일 뿐 효과 크기가 아니다 [AWWWARDS]. Webby와 CSSDA 사례도 심사/제작사 기록으로만 사용한다 [WEBBY, CSSDA-UNSEEN, AREA17, DROPBOX]. iF trend report는 가설 목록이며 웹 제품의 성과 증거가 아니다 [IFD-TREND].

사례를 채택하기 전에는 다음 다섯 가지를 한 줄씩 기록한다: 원래 대상과 과업, 가져올 구조 또는 재질, 현재 브리프에 맞는 이유, 접근성·성능 비용, 동일 조건 렌더 검증. 이 기록이 없으면 사례는 장식 참조로만 남긴다.

9.7 KiB Raw Blame History Unescape Escape