Yun Chan 88c11682b1 feat(skill): route fixes, delivery report, composition diversity, platform refresh

- route table: extension route for products with an existing visual
  language, feedback row, derived state tokens stay local
- completion: blocking 0 plus reported unverified; hard-gate surface is
  the touched scope; delivery report starts with what and how to open
- design.md created at step 0 with a skeleton, fingerprint line and
  change log; product-surface rubric reading; direction delegation
  states the chosen card and reason
- layout: hero families, nav forms, footer forms; art-direction page
  convergence 6 axes; genre sections; image treatments; placeholder
  conventions; multi-screen order; Tailwind theme mapping
- platform: scroll-driven examples, anchor positioning, canvas OT,
  three/R3F pins, shadcn style prefixes, Safari 26 notes, subgrid
- design-gate: four result states, exit codes, cwd module resolution,
  --url/--out-dir/--strict, oklch contrast, dead selector word match
- Korean font budget split from the Latin baseline

2026-10-06 16:55:38 +09:00

20 KiB

Raw Permalink Blame History

style atlas — 시각 언어 카드

사용자가 스타일 이름을 직접 말했을 때("Y2K 느낌", "아르데코로", "네오브루탈") 여는 어휘 사전이다. 프리셋은 과업용 기본값이고(presets/README.md), 이 카드는 사용자가 명시한 시각 언어의 본질과 클리셰를 구분하는 도구다. 카드 하나만 쓰면 그 카드가 프리셋 자리를 대신하는 "새로 정의"가 되고, 둘 이상이거나 프리셋과 섞으면 remix.md의 절차를 따른다.

과업 분류(무엇을 하는 화면인가)는 style-playbook.md, 계보와 원전의 확인 범위는 visual-design-lineage.md를 따른다. 카드의 정의는 이 스킬의 실무 요약이며 운동사의 정본이 아니다. 시대·작가를 인용하려면 lineage의 기록 형식으로 출처를 남긴다.

이 문서를 읽는 법

상황	읽을 곳
사용자가 말한 스타일 이름을 찾는다	카드 읽는 법 + 해당 카드 하나
그리드·정렬·기하 계열(스위스·바우하우스·아르데코·도면·아카이브)	§1
재질·깊이 계열(글래스·뉴모피즘·스큐어모피즘·Y2K·클레이)	§2
과잉·저항 계열(브루탈·네오브루탈·맥시멀·멤피스·레트로 프린트·사이버펑크·베이퍼웨이브)	§3
손·자연 계열(오가닉·스칸디나비안)	§4
매체 계열(게임 UI·키네틱 타이포)	§5
한국·일본 로컬 그래픽 관례	§6
브리프가 한지·단청 같은 전통 물성을 요청했다	§7

카드 전체를 읽지 않는다. 해당 카드만 읽고, 둘 이상이면 remix.md로 간다.

카드 읽는 법

핵심: 바꾸면 그 스타일로 읽히지 않는 성질. remix.md의 9축 분해에서 C(정체성 핵심)가 된다.
클리셰: 그 스타일을 흉내 낼 때 먼저 손이 가는 표면 장치. 핵심이 아닌 클리셰는 스타일당 0~1개만 쓴다.
위험: 접근성·성능에서 먼저 깨지는 지점. 하드 게이트는 어떤 스타일 핵심보다 우선한다.
맥락: 이 언어가 과업을 돕는 경우. 맥락 밖이라도 사용자가 요청하면 쓴다 — 그때는 위험 칸의 검증을 먼저 한다.
한글 서체는 presets/README.md의 후보 풀에서 고른다. 아래 서체 예는 성격 지시일 뿐 고정값이 아니다.

1. 구조·질서 계열

스위스/인터내셔널

핵심: 모듈 그리드 위의 비대칭 배치, 플러시 레프트·래그드 라이트, 극단적 스케일 대비(타입이 곧 이미지), 객관적 사진·도표, 원색 1~2와 무채, 장식 0.
클리셰: 빨간 원 하나, Helvetica 대형 소문자, 모든 것을 왼쪽 위에 몰기.
위험: 극단 스케일 표제가 390px에서 넘침 — clamp()와 줄 수 계약. 원색 면 위 작은 글자 대비.
맥락: 문화 기관·전시·제품 사양 진입 화면. swiss-minimal 프리셋은 이 전통의 정렬 질서만 쓴 B2B 변형이다.
한글: 플러시 레프트에서 어절 단위 줄바꿈(word-break: keep-all)이 래그드 모양을 결정한다. 모듈 높이는 한글 행간 기준으로 다시 잰다.

바우하우스

핵심: 원·사각·삼각의 기하 원형, 빨강·노랑·파랑 원색 + 흑, 기능적 산세, 구성주의적 사선·블록, 재료의 정직성(형태=기능의 도식).
클리셰: 세 도형을 배경 장식으로 흩뿌리기, Bauhaus 모양 서체로 본문 쓰기.
위험: 원색 면끼리 인접하면 색각 이상에서 구분이 무너짐 — 형태·위치로 이중 부호화.
맥락: 교육·디자인 학교·가구·건축. 도형이 정보 구조(카테고리·단계)를 부호화할 때 강하다.
한글: 기하 고딕(SUIT·Paperlogy 계열)이 맞지만 원형 ㅇ이 지나치게 큰 서체는 본문에서 리듬이 깨진다.

아르데코

핵심: 수직·방사 대칭, 계단형 기하, 중앙축 구도, 금속(금·황동) + 흑·에메랄드·심청, 고대비 디도 또는 지오메트릭 산세, 장식 보더가 구조를 정의.
클리셰: 금색 그라디언트 텍스트, 부채꼴 배경 패턴 전면, Gatsby 레터링.
위험: 금속 그라디언트 위 텍스트 대비가 위치마다 달라짐 — 가장 밝은 지점에서 실측. 가는 헤어라인 장식은 저해상도에서 소실.
맥락: 호텔·바·극장·주얼리·이벤트. 장식을 구분선·숫자 체계·프레임 같은 구조 장치로 번역할 때 미니멀과도 섞인다.
한글: 고대비 부리 표제(Hahmlet·Song Myung)는 자간을 좁히지 말고, 라틴 디도와 획 대비를 맞춘다.

블루프린트·기술도면

핵심: 도면 격자, 치수선·인출선·주석, 단색 선화(청사진 청 또는 흑선), 모노 수치, 축척 표기.
클리셰: 파란 배경 + 흰 격자를 장식으로만 깔기.
위험: 얇은 선 1px이 고밀도 화면에서 소실, 청 배경 위 흰 작은 글자 대비.
맥락: 하드웨어·건축·제조·항공. 도면이 실제 제품 구조를 설명할 때만 설득한다.

데이터 밀도 라이트(금융 신문·시간표형)

핵심: 밝은 면 위 고밀도 표·숫자, tabular 수치, 얇은 행 구분, 색은 상승·하락 같은 기능 역할만.
클리셰: 신문 마스트헤드 흉내, 장식용 세로 룰.
위험: 행 높이가 좁아 터치 타깃 부족 — 모바일에서 행 전체를 타깃으로.
맥락: 시세·운행표·카탈로그·스포츠 기록. 다크가 정당화되지 않는 데이터 화면의 대안.

아카이브·인덱스

핵심: 목록이 곧 레이아웃, 메타데이터 표(연도·매체·태그), 썸네일 호버 프리뷰, 필터·정렬, 장식 최소.
클리셰: 전부 소문자 모노, 의미 없는 번호 매기기.
위험: 호버 전용 프리뷰는 터치·키보드에서 사라짐 — 포커스와 탭에도 같은 정보.
맥락: 작업량이 많은 포트폴리오·컬렉션·기관 아카이브.

2. 표면·재질 계열

글래스모피즘

핵심: 다층 반투명 면, 면 뒤 배경의 색·형태 자체가 설계 대상, 1px 하이라이트 림, 깊이 순서 = 정보 위계. 배경 없이는 성립하지 않는다.
클리셰: 단색 배경 위 흐린 카드, 모든 카드에 같은 블러.
위험: 합성 배경에 따라 대비가 변함 — 가장 나쁜 지점에서 실측. prefers-reduced-transparency 대체, 저사양 성능. 구현은 svg-glass.md.
맥락: OS 네이티브 감각, 사진·영상 위 컨트롤, 공간 UI.

뉴모피즘

핵심: 배경과 같은 색의 요소, 이중 그림자(밝은 좌상·어두운 우하)로 돌출·압입, 촉각적 눌림 모션.
클리셰: 모든 요소를 돌출시켜 위계가 사라짐.
위험: 정체성 자체가 저대비다. 컨트롤 경계 3:1(WCAG 1.4.11)을 그림자만으로는 거의 못 넘는다 — 상태·포커스는 색·아이콘·외곽선으로 보강하고, 본문 텍스트는 일반 대비를 지킨다. 보강이 정체성을 지우면 사용자에게 트레이드오프를 알린다.
맥락: 하드웨어 리모컨·오디오 기기처럼 물리 컨트롤을 흉내 내는 소수 화면. 정보 밀도 화면에는 맞지 않는다.

스큐어모피즘

핵심: 실물 재질·조명·그림자의 모사, 컨트롤이 실물의 조작 방식을 따름(다이얼·토글·종이 넘김).
클리셰: 가죽 스티치, 나무결 배경.
위험: 이미지 자산 무게, 확대 시 래스터 흐림, 실물 은유가 실제 조작과 어긋나는 오인.
맥락: 악기·카메라·공예 도구처럼 실물 조작 감각이 제품의 약속일 때.

Y2K

핵심: 크롬·젤리·버블의 광택 재질, 실버·아쿠아·핫핑크·라임, 블롭·캡슐 형태, 와이드 산세 또는 픽셀 서체, 기술 낙관의 미래 도상.
클리셰: 홀로그램 무지개 배경 + 반짝이 + 픽셀 서체 + 렌즈 플레어를 동시에 — 클리셰 누적.
위험: 크롬 텍스트의 대비가 위치마다 달라 본문 불가. 반짝임 모션은 감소 모션에서 정지. 그라디언트 밴딩.
맥락: 패션·음악·Z세대 소비재·게임 굿즈. 광택은 오브젝트(제품·로고·주 CTA)에 몰고 UI 면은 평면으로 두면 정보 화면과도 섞인다. 금속·젤리 구현은 svg-filters.md.
한글: 와이드 산세 대신 넓게 설계된 한글 디스플레이(Orbit·Gasoek One)를 쓰고, 자간을 억지로 벌려 폭을 흉내 내지 않는다.

클레이·소프트 3D

핵심: 둥근 볼륨, 부드러운 확산광, 무광 파스텔 재질, 장난감 같은 비례.
클리셰: 둥근 3D 사람 일러스트를 모든 섹션에 반복.
위험: 3D 렌더 자산 무게, 파스텔 위 흰 글자 대비.
맥락: 핀테크 입문·교육·키즈. 3D가 개념(돈·단계)을 사물로 설명할 때.

3. 저항·과잉 계열

브루탈리즘

핵심: 원시 HTML 기본값의 노출(시스템 폰트·기본 링크색·테두리), 장식 거부, 구조를 숨기지 않음, 비례보다 사실성, 의도적 비세련.
클리셰: 아무 이유 없는 거대 대문자, 일부러 깨진 레이아웃.
위험: "기본값 노출"이 포커스·대비 기본값까지 제거하면 실패 — 브라우저 기본 포커스는 오히려 유지한다.
맥락: 아티스트·독립 출판·개발자 개인 사이트·정보 공개.

네오브루탈리즘

핵심: 2~~4px 검정 외곽선, 블러 0의 하드 오프셋 그림자, 고채도 평면 면색 3~~5개, radius 0 또는 큰 값, 둔탁한 그로테스크, 버튼이 그림자 쪽으로 눌리는 물리적 모션.
클리셰: 모든 카드를 기울이기, 스티커 남발.
위험: 고채도 면 위 검정 글자는 대개 대비가 충분하지만 흰 글자는 자주 실패. 색 다수는 의미 역할과 분리해 상태색과 혼동되지 않게.
맥락: 크리에이터 도구·스타트업·커뮤니티·커머스 일부. 색이 많아도 실패가 아니다 — 판정은 presets/anti-grid.md의 "과잉과 무질서를 가르는 기준"으로.

키치/맥시멀리즘

핵심: 층위 수를 늘리되 읽기 경로 하나는 고정, 패턴·색·서체 다수의 질서 있는 과잉, 반복 모티프로 통일, 밀도가 곧 풍요의 메시지.
클리셰: 무작위 스티커·이모지 콜라주.
위험: 포커스 표시가 배경 패턴에 묻힘 — 두꺼운 이중 링. 텍스트 뒤 패턴은 대비 판정에서 가장 나쁜 픽셀 기준.
맥락: 축제·식음·패션·팬덤. 판정 기준은 장치 개수가 아니라 읽기 경로·반복 모티프·효과 off 메시지.

멤피스

핵심: 원색과 파스텔의 충돌, 스퀴글·도트·지그재그 패턴, 기울어진 기하 조각, 장난스러운 평면 그림자, 의도된 불협.
클리셰: 같은 스퀴글을 모든 여백에 채우기.
위험: 패턴 위 텍스트, 움직이는 기하 조각의 감소 모션 대응.
맥락: 교육·키즈·디자인 이벤트·음료. 패턴을 섹션 구분·카테고리 부호처럼 구조에 쓰면 정보 화면에도 들어간다.

레트로 프린트(리소·진·그런지·시대 인쇄)

핵심: 시대 지정이 먼저다(50s 광고·70s 포스터·90s 진). 한정 팔레트(별색 2~3), 판 어긋남·망점·잉크 번짐, 그 시대 서체와 레이아웃 관례. 그런지는 복사기 열화·콜라주·손 조판.
클리셰: 시대 구분 없는 "빈티지" 세피아 + 그레인.
위험: 강한 그레인·노이즈 위 본문 대비 — 본문 면은 질감을 걷어낸다. 리소·듀오톤·그레인 구현은 svg-filters.md. 강한 그레인은 이 계열에서는 정당한 선택이다.
맥락: 음반·독립 출판·식음·로컬 브랜드·문화 행사.

사이버펑크

핵심: 저조도 다크 + 네온 2색(마젠타·시안 계열), 고밀도 HUD 정보 층, 글리치·스캔라인, 사선 프레임, 도시·기계 도상.
클리셰: 분위기용 일본어·한자 사인 — 의미 검증 없는 문자 장식은 문화 클리셰 규칙에 걸린다.
위험: 글리치·깜빡임은 초당 3회 이하(광과민), 감소 모션에서 정지. 네온 글로우 텍스트의 번짐으로 작은 글자 판독 저하.
맥락: 게임·음악·보안·e스포츠. "네온 온 다크"가 반복 후보인 것은 브랜드와 무관하게 쓰일 때이며, 사용자가 이 장르를 요청하면 그대로 쓴다.

베이퍼웨이브

핵심: 80~90s 소비 문화 도상의 아이러니한 재조합, 파스텔 핑크·청록 그라디언트, 고전 조각·초기 3D·OS 창 모티프.
클리셰: 그리스 흉상 + 야자수 + 일몰 그라디언트 세트.
위험: 그라디언트 위 대비, 저해상도 자산 확대.
맥락: 음악·밈·팬 커뮤니티. 아이러니가 브랜드 목소리일 때만.

4. 손·자연 계열

오가닉/핸드메이드

핵심: 손글씨·브러시 디스플레이, 불규칙 radius와 흔들린 선(SVG 경로), 종이·천 질감, 자연광 사진, 비정형 그리드.
클리셰: 의미 없는 블롭 배경, 모든 모서리 흔들기.
위험: 손글씨 서체로 본문 조판, 불규칙 형태가 포커스·클릭 영역을 흐림.
맥락: 공예·식음·웰니스·로컬 상점. 손맛은 표제·일러스트·경계선에 두고 본문·폼은 안정 서체.
한글: 손글씨 계열은 표제 몇 글자에만. 본문은 Gowun Dodum처럼 손맛이 남은 본문용 고딕.

스칸디나비안

핵심: 밝은 중성 면, 자연 소재 사진, 낮은 채도의 한두 색, 기능적 산세, 넉넉한 여백과 소박한 형태.
클리셰: 베이지 + 식물 사진 + 얇은 산세 — 웜 페이퍼 하우스 룩과 거의 같다(presets/README.md 수렴 클러스터).
맥락: 가구·생활재·주거. 실제 제품의 소재 색에서 팔레트를 뽑을 때만 차이가 난다.

5. 매체 계열

게임 UI

핵심: 다이제틱 UI·HUD 층위, 상태 게이지·인벤토리 슬롯 그리드, 피드백 즉시성(사운드·흔들림), 픽셀 또는 스타일라이즈드 서체, 컨트롤러 포커스 내비게이션.
클리셰: 픽셀 서체를 본문까지, 모든 버튼에 흔들림.
위험: 흔들림·번쩍임의 감소 모션 대응, 사운드 자동재생 금지(사용자 조작 후), 포커스 이동이 시각 순서와 일치.
맥락: 게임 랜딩·이벤트·게이미피케이션 교육. 슬롯 그리드는 수집·진행 상태 정보 구조로 정보 화면에도 쓸 수 있다.

키네틱 타이포

핵심: 글자 자체가 움직임의 주체 — 변형·분해·리듬 반복, 가변 폰트 축 애니메이션.
클리셰: 모든 표제에 글자 단위 등장 모션.
위험: 움직이는 글자는 읽을 수 없다 — 메시지는 정지 상태에서 완결, 감소 모션에서 정지, 스크린리더에는 한 번만.
맥락: 캠페인·음악·전시의 진입 장면 하나.

6. 로컬 그래픽 관례

로컬 관례는 장식이 아니라 정보 습관이다. 국내화는 문양을 붙이는 일이 아니라 단위·정보 순서·검색 축을 맞추는 일이라는 원칙(trustworthy-showcases.md §2)은 그대로다. 아래 카드는 사용자가 그 시각 언어를 원할 때 쓰는 어휘다.

한국 상업 웹 관례

핵심: 높은 정보 밀도와 혜택·조건의 전면 노출, 굵은 고딕 표제와 강한 색면 띠, 탭·필터·쿠폰 같은 즉시 행동 요소, 친근한 1인칭 플레이풀 한글 디스플레이(둥근 굵은 고딕).
클리셰: 배민체류 서체 하나로 "한국적"을 처리하기.
위험: 밀도 높은 배너 텍스트의 대비와 줄바꿈, 이미지에 구운 텍스트(접근성·번역 불가).
맥락: 커머스·식음·플랫폼 이벤트·공공 캠페인.

한국 출판·문화 그래픽

핵심: 부리/민부리 대비를 위계로 쓰는 조판, 넓은 여백과 작은 본문, 한자·라틴 혼식의 절제, 세로쓰기는 실제 문장일 때만.
위험: 세로쓰기(writing-mode: vertical-rl)는 스크린리더·선택·줄바꿈을 실측한다.
맥락: 출판사·미술관·문학·공연.

일본 상업 웹 관례

핵심: 고밀도 정보 배치와 여백(間)의 공존, 가나·한자 혼식 조판, 세로쓰기와 약물(윤문) 체계, 작은 아이콘·배지의 촘촘한 정렬.
클리셰: 분위기용 일본어 문구, 의미 없는 세로 한자.
위험: 일본어 문자를 한국어 화면에 장식으로 쓰면 로케일·문화 클리셰 규칙에 걸린다 — 목표 시장이 일본이거나 실제 일본어 콘텐츠일 때만.
맥락: 일본 시장 대상, 또는 사용자가 그 정보 밀도 문법을 명시적으로 원할 때.

7. 문화 물성 번역 절차

분위기용 한자·세로쓰기·낙관·붓글씨·먹·종이결은 로케일·브리프와 무관하게 쓰면 클리셰다. 그러나 브리프가 한지·단청·보자기·옻칠·청자 같은 물성을 요청하거나 브랜드가 그 공정에 기반하면 아래 절차로 번역한다. 금지는 "브리프와 무관한 장식"에 대한 것이지 요청된 물성에 대한 것이 아니다.

원천을 특정한다. "전통"이 아니라 어느 유물·공방·장인·기관의 어떤 물성인가. 출처(소장 기관·제작자·자료 URL)를 design.md에 남긴다. 특정할 수 없으면 사용자에게 묻는다.
문양·도상을 복제하지 않고 구조를 추출한다. 물성마다 네 가지를 관찰해 적는다.
- 구조: 한지의 섬유 방향성과 겹침, 보자기의 조각 이음 격자, 단청의 반복 단위
- 비례·면적: 단청의 보색 대비가 차지하는 면적 규칙, 보자기 조각의 크기 분포
- 색 관계: 단청의 휘(暈) 그라데이션 단계, 청자의 유약 두께에 따른 명도 변화, 생지색과 먹의 거리
- 제작 공정: 뜨기·바르기·이어 붙이기·덧칠 같은 순서와 시간
추출한 것을 UI 축으로 옮긴다. 구조 → 그리드·구분선 리듬, 비례 → 색 면적 예산, 색 관계 → 톤 단계 토큰, 공정 → 모션 순서나 정보 공개 순서. 예: 한지 = 반투명 레이어와 비등방 섬유 노이즈(svg-filters.md 종이 질감), 번짐은 이미지 경계에만. 보자기 = 서로 다른 크기의 카드 이음 격자.
문자 사용을 검증한다. 한자·세로쓰기를 쓰면 실제 의미 있는 텍스트인지, 번역과 읽기 순서가 맞는지 확인한다. 의미를 확인할 수 없는 문자는 쓰지 않는다.
반사실 점검. 물성을 빼도 이 브리프의 정보 구조가 성립하는지, 물성이 같은 업종의 다른 브랜드에도 똑같이 붙을 수 있는 장식인지 본다. 후자면 물성의 특정성(1단계)을 더 좁힌다.
하드 게이트. 반투명 질감 위 대비는 합성 상태에서 실측하고, prefers-reduced-transparency에서 불투명 면으로 대체해도 정보가 같아야 한다.

일본·중국 등 다른 문화권의 물성도 같은 절차를 쓴다. 목표 시장이 다른 문화권의 물성은 3단계에서 구현 기법 하나만 가져온다(reference-method.md의 R3 원칙).

20 KiB Raw Permalink Blame History