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

8 KiB

Raw Blame History

visual-design-lineage — 시각 디자인 원전의 적용 경계

확인일: 2026-09-12. 이 문서는 원전 전체를 읽었다는 주장이 아니다. 링크에서 확인 가능한 기관 해설·공식 소개·공개 본문·서지의 범위만 적고, 아래의 실무 번역은 모두 이 스킬의 적용 제안이다.

언제 읽는가

1단계에서 레퍼런스의 색·재질·그리드·타입 관찰을 언어로 설명할 때
2단계에서 스타일 이름 대신 시각적 목적과 검증 방법을 정할 때
5단계에서 대비·읽기성·위계의 자동 검사와 시각 평가를 구분할 때

브랜드 자산·design.md·접근성 기준보다 우선하지 않는다. 바우하우스는 단일 스타일이 아니며, 이 문서는 황금비·Swiss sans·라틴 연구를 한글 화면에 자동 적용하지 않는다.

스타일 카드와의 관계

이 문서는 관점과 원전의 확인 범위를 다룬다. 사용자가 스타일 이름("바우하우스", "스위스", "아르데코")을 말했을 때 조작 가능한 정의 — 핵심·클리셰·위험·맥락 — 는 style-atlas.md에 있고, 두 스타일을 섞는 절차는 remix.md에 있다. 둘의 연결 규칙:

카드의 정의를 결정 근거로 쓸 때 계보를 인용하려면 이 문서의 기록 형식(아래)으로 출처와 확인 범위를 붙인다. 카드는 이 스킬의 실무 요약이며 원전 인용이 아니다.
예: 바우하우스 카드의 "기하 원형·원색"은 교육 맥락(Itten·Albers·Kandinsky 행)의 한 갈래일 뿐이다. 바우하우스를 단일 양식처럼 쓰지 않는다. 스위스 카드의 모듈 그리드·극단 스케일 대비는 MULLER-BROCKMANN·Ruder·Hofmann 행의 확인 범위 안에서만 인용한다.
인용 복붙 금지. "Hofmann의 ○○를 참고해…", "Albers를 참고해…" 같은 문장을 프로젝트마다 같은 표로 반복하면 근거가 브리프가 아니라 템플릿에서 나온 것이다(실측: 쇼케이스 design.md 21개 중 13개에 같은 3행 표). 행마다 이 브리프의 실제 재료(사진·문장·수치)에 대한 관찰을 적고, 관찰이 없으면 계보 인용 자체를 생략한다.

관점·확인 범위·실무 질문·한계·출처

관점	링크에서 확인한 범위	이 스킬의 적용 제안과 질문	한계·출처
Itten	재료·질감·색을 다루는 교육 맥락	재료의 질감·명암·색을 관찰하고, 브리프에 필요할 때만 표면 실험으로 번역해 작은/큰 화면의 위계와 읽기를 비교한다	효과나 선호의 보편 법칙이 아니다. Getty 기관 해설
Albers, Interaction of Color (1963)	색이 주변 맥락에서 다르게 지각되는 교육 실험	같은 텍스트·버튼을 실제 surface·상태·이미지 위에서 비교한다	알버스의 지각 실험은 WCAG 대비 판정이 아니다. Albers Foundation 해설
Kandinsky	바우하우스의 분석적 드로잉과 교육 맥락	도형·색을 쓸 때 장식 이름이 아니라 정보 역할·시선 흐름·실제 렌더를 기록한다	색-도형 대응은 당시 이론이며 과학적 보편 법칙이 아니다. Bauhaus Kooperation 기관 해설
Tschichold, The New Typography (1928)	비대칭, sans-serif, 사진을 둘러싼 역사적 맥락	비대칭·사진·sans를 채택하면 과업·언어·이미지 근거와 작은 폭 읽기성을 함께 검증한다	현재 제품의 전환·접근성 규칙이 아니다. Yale 출판사 연구 해설
Ruder, Typography (1967)	공식 소개는 구조·그리드·가독성, 타입의 리듬·비례를 다룬다고 설명한다	그리드·타입의 관계를 살필 독서 경로로 쓰고, 구조·가독성·리듬·비례의 선택을 같은 콘텐츠·viewport에서 비교한다	소개 범위 밖의 본문 규칙을 인용하지 않는다. Niggli 공식 소개
Hofmann, Graphic Design Manual (1965)	공식 소개는 point·line·plane, contrast·rhythm·composition을 다룬다고 설명한다	점·선·면과 대비·리듬·구도의 대안을 스케치한 뒤 같은 콘텐츠로 렌더 비교한다	소개 범위 밖의 본문 규칙을 인용하지 않는다. Typotheque 공식 소개
Warde, “The Crystal Goblet” (1930)	공개 강연 본문	정보 전달이 우선인 표면은 읽기·탐색·오류 복구를 먼저, 표현적 표면은 그 목적과 비용을 별도 기록한다	투명성이 모든 화면의 미학적 의무는 아니다. 공개 본문 PDF
Arnheim, Art and Visual Perception	공식 소개는 시각 재료가 심리적으로 조직되는 방식을 설명한다	균형·긴장·형태를 관찰 언어로 사용하고, 화면의 묶음·구도 판단은 실제 렌더에서 한다	책 본문이나 실험 결과를 여기서 인용하지 않는다. UC Press 소개
Dondis, A Primer of Visual Literacy (1973)	공식 소개는 시각 문해를 위한 교육적 체계를 제시한다	대비·리듬·구도를 설명할 어휘로 사용하고, 학습 효과나 보편 수치는 주장하지 않는다	원문을 정독하거나 성과를 검증했다는 뜻이 아니다. MIT Press 소개
Bertin, Semiology of Graphics (1967)	서지 소개	데이터 표현은 질문·비교·라벨·대체 접근을 먼저 정한다	웹 차트의 자동 처방이나 원문 인용이 아니다. Esri Press 서지

기존 출처 원장과 연결

다음 서지는 중복 행을 만들지 않고 evidence-ledger.md의 기존 ID를 따른다: MULLER-BROCKMANN, BRINGHURST, LUPTON. 모두 서지 확인 범위이며, 판본·페이지를 확보하기 전에는 본문 규칙으로 인용하지 않는다.

상충 관점 적용 예시

질감 대 투명성: Itten의 재료 관찰은 브랜드의 표면 선택에 쓸 수 있고, Warde의 투명성은 정보 전달 표면에 쓸 수 있다. 제품 비교 표에는 읽기·탐색을 우선하고, 캠페인 히어로에는 질감을 채택할 수 있다. 둘 다 모션 off, 대비, 좁은 폭의 위계로 검증한다.
색 맥락 대 접근성: Albers식 비교는 버튼이 배경·사진·상태에 따라 달라 보인다는 관찰이다. 적용 전후에는 실제 합성 배경에서 WCAG를 별도로 계산한다. 지각 실험으로 대비 실패를 정당화하지 않는다.
표현적 조판 대 정보 표면: Tschichold·Hofmann의 비대칭이나 강한 타입은 브랜드 진입점에 맞을 수 있다. Warde의 관점은 양식 금지가 아니라 표·폼·오류 화면에서 메시지와 조작을 가리지 말라는 질문이다. 같은 콘텐츠·viewport·상태·자산의 전후 렌더로 판단한다.
그리드 대 예외: Müller-Brockmann의 그리드는 정렬선의 이유를 설명하는 출발점이다. 이미지 크롭·증거 패널·한글 줄바꿈이 더 중요한 경우에는 예외를 design.md에 기록하고, 읽기 폭·묶음·접근성에 미치는 결과를 확인한다.

기록 형식: 출처 또는 기존 ID → 확인 범위 → 이 스킬의 적용 제안 → 프로젝트 관찰 → 결정 → 같은 viewport/state/assets의 검증. 수상·취향·시각적 호감만으로 사용자 성과의 인과를 주장하지 않는다.

8 KiB Raw Blame History