feat: strengthen design skill and refresh all showcases

packages/skill/references/visual-design-lineage.md

@@ -0,0 +1,39 @@
+# visual-design-lineage — 시각 디자인 원전의 적용 경계
+
+확인일: 2026-09-12. 이 문서는 원전 전체를 읽었다는 주장이 아니다. 링크에서 확인 가능한 기관 해설·공식 소개·공개 본문·서지의 범위만 적고, 아래의 실무 번역은 모두 **이 스킬의 적용 제안**이다.
+
+## 언제 읽는가
+
+- 1단계에서 레퍼런스의 색·재질·그리드·타입 관찰을 언어로 설명할 때
+- 2단계에서 스타일 이름 대신 시각적 목적과 검증 방법을 정할 때
+- 5단계에서 대비·읽기성·위계의 자동 검사와 시각 평가를 구분할 때
+
+브랜드 자산·`design.md`·접근성 기준보다 우선하지 않는다. 바우하우스는 단일 스타일이 아니며, 이 문서는 황금비·Swiss sans·라틴 연구를 한글 화면에 자동 적용하지 않는다.
+
+## 관점·확인 범위·실무 질문·한계·출처
+
+| 관점 | 링크에서 확인한 범위 | 이 스킬의 적용 제안과 질문 | 한계·출처 |
+|---|---|---|---|
+| Itten | 재료·질감·색을 다루는 교육 맥락 | 재료의 질감·명암·색을 관찰하고, 브리프에 필요할 때만 표면 실험으로 번역해 작은/큰 화면의 위계와 읽기를 비교한다 | 효과나 선호의 보편 법칙이 아니다. [Getty 기관 해설](https://www.getty.edu/research/exhibitions_events/exhibitions/bauhaus/new_artist/matter_materials/itten/) |
+| Albers, *Interaction of Color* (1963) | 색이 주변 맥락에서 다르게 지각되는 교육 실험 | 같은 텍스트·버튼을 실제 surface·상태·이미지 위에서 비교한다 | 알버스의 지각 실험은 WCAG 대비 판정이 아니다. [Albers Foundation 해설](https://www.albersfoundation.org/alberses/teaching/interaction-of-color) |
+| Kandinsky | 바우하우스의 분석적 드로잉과 교육 맥락 | 도형·색을 쓸 때 장식 이름이 아니라 정보 역할·시선 흐름·실제 렌더를 기록한다 | 색-도형 대응은 당시 이론이며 과학적 보편 법칙이 아니다. [Bauhaus Kooperation 기관 해설](https://bauhauskooperation.de/wissen/das-bauhaus/lehre/unterricht/unterricht-wassily-kandinsky) |
+| Tschichold, *The New Typography* (1928) | 비대칭, sans-serif, 사진을 둘러싼 역사적 맥락 | 비대칭·사진·sans를 채택하면 과업·언어·이미지 근거와 작은 폭 읽기성을 함께 검증한다 | 현재 제품의 전환·접근성 규칙이 아니다. [Yale 출판사 연구 해설](https://yalebooks.yale.edu/2019/04/15/the-avant-garde-and-the-new-typography/) |
+| Ruder, *Typography* (1967) | 공식 소개는 구조·그리드·가독성, 타입의 리듬·비례를 다룬다고 설명한다 | 그리드·타입의 관계를 살필 독서 경로로 쓰고, 구조·가독성·리듬·비례의 선택을 같은 콘텐츠·viewport에서 비교한다 | 소개 범위 밖의 본문 규칙을 인용하지 않는다. [Niggli 공식 소개](https://niggli.ch/en/products/typographie) |
+| Hofmann, *Graphic Design Manual* (1965) | 공식 소개는 point·line·plane, contrast·rhythm·composition을 다룬다고 설명한다 | 점·선·면과 대비·리듬·구도의 대안을 스케치한 뒤 같은 콘텐츠로 렌더 비교한다 | 소개 범위 밖의 본문 규칙을 인용하지 않는다. [Typotheque 공식 소개](https://www.typotheque.com/books/graphic-design-manual) |
+| Warde, “The Crystal Goblet” (1930) | 공개 강연 본문 | 정보 전달이 우선인 표면은 읽기·탐색·오류 복구를 먼저, 표현적 표면은 그 목적과 비용을 별도 기록한다 | 투명성이 모든 화면의 미학적 의무는 아니다. [공개 본문 PDF](https://openlab.citytech.cuny.edu/langecomd3504fa2020-monday/files/2018/10/Warde_CrystalGoblet.pdf) |
+| Arnheim, *Art and Visual Perception* | 공식 소개는 시각 재료가 심리적으로 조직되는 방식을 설명한다 | 균형·긴장·형태를 관찰 언어로 사용하고, 화면의 묶음·구도 판단은 실제 렌더에서 한다 | 책 본문이나 실험 결과를 여기서 인용하지 않는다. [UC Press 소개](https://www.ucpress.edu/books/art-and-visual-perception-second-edition/epub-pdf) |
+| Dondis, *A Primer of Visual Literacy* (1973) | 공식 소개는 시각 문해를 위한 교육적 체계를 제시한다 | 대비·리듬·구도를 설명할 어휘로 사용하고, 학습 효과나 보편 수치는 주장하지 않는다 | 원문을 정독하거나 성과를 검증했다는 뜻이 아니다. [MIT Press 소개](https://mitpress.mit.edu/9780262540292/a-primer-of-visual-literacy/) |
+| Bertin, *Semiology of Graphics* (1967) | 서지 소개 | 데이터 표현은 질문·비교·라벨·대체 접근을 먼저 정한다 | 웹 차트의 자동 처방이나 원문 인용이 아니다. [Esri Press 서지](https://www.esri.com/en-us/esri-press/browse/semiology-of-graphics-diagrams-networks-maps) |
+
+## 기존 출처 원장과 연결
+
+다음 서지는 중복 행을 만들지 않고 [evidence-ledger.md](evidence-ledger.md)의 기존 ID를 따른다: `MULLER-BROCKMANN`, `BRINGHURST`, `LUPTON`. 모두 서지 확인 범위이며, 판본·페이지를 확보하기 전에는 본문 규칙으로 인용하지 않는다.
+
+## 상충 관점 적용 예시
+
+1. **질감 대 투명성**: Itten의 재료 관찰은 브랜드의 표면 선택에 쓸 수 있고, Warde의 투명성은 정보 전달 표면에 쓸 수 있다. 제품 비교 표에는 읽기·탐색을 우선하고, 캠페인 히어로에는 질감을 채택할 수 있다. 둘 다 모션 off, 대비, 좁은 폭의 위계로 검증한다.
+2. **색 맥락 대 접근성**: Albers식 비교는 버튼이 배경·사진·상태에 따라 달라 보인다는 관찰이다. 적용 전후에는 실제 합성 배경에서 WCAG를 별도로 계산한다. 지각 실험으로 대비 실패를 정당화하지 않는다.
+3. **표현적 조판 대 정보 표면**: Tschichold·Hofmann의 비대칭이나 강한 타입은 브랜드 진입점에 맞을 수 있다. Warde의 관점은 양식 금지가 아니라 표·폼·오류 화면에서 메시지와 조작을 가리지 말라는 질문이다. 같은 콘텐츠·viewport·상태·자산의 전후 렌더로 판단한다.
+4. **그리드 대 예외**: Müller-Brockmann의 그리드는 정렬선의 이유를 설명하는 출발점이다. 이미지 크롭·증거 패널·한글 줄바꿈이 더 중요한 경우에는 예외를 `design.md`에 기록하고, 읽기 폭·묶음·접근성에 미치는 결과를 확인한다.
+
+기록 형식: `출처 또는 기존 ID → 확인 범위 → 이 스킬의 적용 제안 → 프로젝트 관찰 → 결정 → 같은 viewport/state/assets의 검증`. 수상·취향·시각적 호감만으로 사용자 성과의 인과를 주장하지 않는다.