release: v0.11.0

packages/skill/references/style-playbook.md

@@ -0,0 +1,56 @@
+# style playbook — 과업에 맞는 시각 언어
+
+스타일은 성격 테스트가 아니라 과업·콘텐츠·운영 조건의 출발점이다. 아래 항목을 고른 뒤에도 [design foundations](design-foundations.md)의 접근성·성능·과업 검증을 통과해야 한다. 수치나 금지 목록을 복사하지 말고, 실제 렌더에서 결정의 이유를 확인한다.
+
+| 계열 | 목표·정보 구조 | 타입·색·이미지 | 모션 | 적합 조건 | 실패 | 검증 |
+|---|---|---|---|---|---|---|
+| 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, 좁은 폭의 우선순위/대체 경로 |
+
+## 계열별 빠른 선택 예와 오용
+
+### 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, 단위·기간 라벨, 기능색, 안정된 행 높이로 반복 과업의 속도를 돕는다.
+- **오용**: ‘깔끔함’을 이유로 필터·오류·데이터 출처·단위를 감추거나 색만으로 상태를 전달하지 않는다.
+
+## 사례와 트렌드의 사용법
+
+수상 사례는 완성된 화면을 베끼는 재료가 아니라 제약·구도·사용자 경로를 분해할 표본이다. Awwwards의 40/30/20/10은 그 심사 시스템의 배점일 뿐 효과 크기가 아니다 [AWWWARDS]. Webby와 CSSDA 사례도 심사/제작사 기록으로만 사용한다 [WEBBY, CSSDA-UNSEEN, AREA17, DROPBOX]. iF trend report는 가설 목록이며 웹 제품의 성과 증거가 아니다 [IFD-TREND].
+
+사례를 채택하기 전에는 다음 다섯 가지를 한 줄씩 기록한다: `원래 대상과 과업`, `가져올 구조 또는 재질`, `현재 브리프에 맞는 이유`, `접근성·성능 비용`, `동일 조건 렌더 검증`. 이 기록이 없으면 사례는 장식 참조로만 남긴다.