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.
This commit is contained in:
Yun Chan 2026-09-24 13:26:03 +09:00
parent 79e79c120b
commit 6805fb2be7
37 changed files with 5688 additions and 128 deletions

View file

@ -10,6 +10,7 @@
| 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](svg-filters.md) 유리 절), 시스템 폰트의 옵티컬 사이징을 존중하는 타이포 | 스프링 기반 전환, 인터럽트 가능성, 제스처에 반응하는 촉감([interaction-feel.md](interaction-feel.md)) | 브리프가 "iOS 느낌"·"네이티브 앱 감각"을 명시했을 때만. 그 자체가 목표 시장이 아니면 열지 않는다 | 특정 미학을 기본값으로 삼아 모든 프로젝트에 유리·스프링을 얹음; 저사양·Firefox에서 무너짐 | 필터 off·CPU throttling 4×, Firefox·저사양 기기에서 폴백이 성립하는지, reduced motion·reduced transparency |
## 계열별 빠른 선택 예와 오용
@ -49,6 +50,15 @@
- **밀도·타입**: tabular figure, 단위·기간 라벨, 기능색, 안정된 행 높이로 반복 과업의 속도를 돕는다.
- **오용**: ‘깔끔함’을 이유로 필터·오류·데이터 출처·단위를 감추거나 색만으로 상태를 전달하지 않는다.
### Platform-native (Apple풍) — 조건부
언제: 브리프가 "iOS 느낌"·"네이티브 앱처럼"을 명시했거나 PWA가 OS 네이티브 앱 옆에 나란히 설치되는 과업일 때만 연다. 이 계열은 정보 구조를 새로 정하지 않는다 — 위 여섯 계열 중 과업에 맞는 것으로 뼈대를 고르고, 이 행은 그 위에 표면 마감만 얹는다.
- **구도**: 전환은 하드 컷이 아니라 스프링 기반으로 하고, 진행 중인 애니메이션을 중간에 잡아도(interrupt) 속도가 끊기지 않게 한다. 제스처(드래그·스와이프)에 실시간으로 반응하는 표면을 우선 검토한다. 상세 물리·수치는 [interaction-feel.md](interaction-feel.md)를 따른다.
- **재질**: 유리·머티리얼 위계는 [svg-filters.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].