designpaca/packages/skill/references/style-playbook.md

style playbook — 과업 분류와 시각 언어

스타일 결정에는 서로 다른 두 축이 있다. 둘을 섞으면 "에이전시 사이트니까 anti-grid" 같은 지름길이 생기고, 사용자가 말한 시각 언어("아르데코", "Y2K")가 가장 가까운 과업 계열로 깎인다.

축	묻는 것	어디서 고르나
과업 분류	이 화면이 무엇을 하게 하는가 — 읽기·비교·몰입·전환·학습	아래 계열 표
시각 언어(스타일)	어떤 계보의 형태·색·재질·타입으로 말하는가	presets/(과업용 기본값) · style-atlas.md(사용자가 이름을 말한 스타일)

순서: 과업 계열을 먼저 정해 정보 구조·밀도·모션 상한을 잠그고, 그 위에 시각 언어를 고른다. 같은 과업도 여러 시각 언어로 말할 수 있다 — Dense 과업을 dark-instrument로도, 데이터 밀도 라이트로도 풀 수 있다. 시각 언어가 둘 이상이면 remix.md로 지배 하나와 보조 축을 나눈다.

과업 계열은 성격 테스트가 아니라 과업·콘텐츠·운영 조건의 출발점이다. 아래 항목을 고른 뒤에도 design foundations의 접근성·성능·과업 검증을 통과해야 한다. 수치나 금지 목록을 복사하지 말고, 실제 렌더에서 결정의 이유를 확인한다. 계보 원전의 확인 범위는 visual-design-lineage.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, 좁은 폭의 우선순위/대체 경로
Platform-native (Apple풍)	PWA·모바일 웹앱이 OS 네이티브 앱과 나란히 놓일 때 플랫폼 소속감을 만든다. 정보 구조는 위 계열 중 과업에 맞는 것을 그대로 쓰고, 이 행은 표면 마감만 더한다	유동 인터페이스 물리(인터럽트 가능한 스프링, 제스처 인식), 머티리얼 위계(svg-glass.md §3), 시스템 폰트의 옵티컬 사이징을 존중하는 타이포	스프링 기반 전환, 인터럽트 가능성, 제스처에 반응하는 촉감(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의 개성과 본문의 읽기 역할을 분리하며, 강조색·질감·변형은 하나의 중심 아이디어에만 쓴다.
• 오용: 중심 개념 없이 회전·세로쓰기·대문자·왜곡을 쌓아 포커스 순서와 메시지를 잃지 않는다. 장치 수가 많은 것 자체는 실패가 아니다 — 맥시멀·네오브루탈 요청은 읽기 경로 고정·반복 모티프·효과 off 메시지로 판정한다(presets/anti-grid.md).

Luxury

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

Playful

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

Immersive

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

Dense

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

Platform-native (Apple풍) — 조건부

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

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

시각 언어 고르기

과업 계열이 정해진 뒤 시각 언어 후보를 넓게 연다. 아래는 출발 후보일 뿐이며, 사용자가 스타일 이름을 말했으면 그 카드가 우선한다. 후보를 고른 뒤 프리셋이면 그 파일 하나, 카드면 style-atlas.md의 해당 카드, 둘 이상이면 remix.md를 읽는다.

과업 계열	프리셋 후보	style-atlas 카드 후보
Swiss / editorial	editorial · swiss-minimal	스위스/인터내셔널 · 아카이브·인덱스 · 한국 출판·문화 그래픽 · 레트로 프린트
Expressive	anti-grid	브루탈리즘 · 네오브루탈리즘 · 키치/맥시멀 · 멤피스 · 바우하우스 · 키네틱 타이포
Luxury	editorial · quiet-commerce	아르데코 · 스칸디나비안(수렴 주의) · 스큐어모피즘(재질 한정)
Playful	quiet-commerce(전환)	멤피스 · 클레이·소프트 3D · Y2K · 한국 상업 웹 관례 · 게임 UI
Immersive	—	게임 UI · 사이버펑크 · 베이퍼웨이브 · 글래스모피즘
Dense	dark-instrument · swiss-minimal	데이터 밀도 라이트 · 블루프린트·기술도면
Platform-native	—	글래스모피즘 · 뉴모피즘(소수 화면)

같은 과업에 늘 같은 후보를 고르면 결과가 수렴한다. 직전 산출물과 같은 후보라면 표의 다른 칸을 한 번 proof로 비교한 뒤 정한다.

사례와 트렌드의 사용법

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

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