feat: strengthen design skill and refresh all showcases

packages/skill/references/art-direction.md

@@ -55,6 +55,14 @@
 색만 바꾼 안은 별도 구조안이 아니다. 사진 위 텍스트는 대비만 보지 말고, 피사체·캡션·행동이 같은 의미를 말하는지 확인한다.
 수치·상태·가격·주소처럼 수정 가능하고 사실 검증이 필요한 정보는 이미지 안에 굽지 않는다.
 
+### 3-1. 구도·타입·색 결정표
+
+| 결정 축·관점 | 실제 재료와 렌더 확인 | 기록 한 행 예시 |
+|---|---|---|
+| 구도 — [Arnheim·Hofmann](visual-design-lineage.md) | 큰 면·정렬·군집이 주정보를 어떻게 지지하는지 실제 콘텐츠, 좁은 폭, 회색조 경계에서 본다. 이유 없는 비대칭이나 여백을 자동으로 선호하지 않는다. | 관찰: 제목과 증거가 경쟁함 → 원리 후보: 면적·군집 → 작은 대안: 증거를 제목 아래로 이동 → 채택: 좁은 폭과 회색조에서도 순서가 유지됨 / 기각: 증거 맥락이 사라짐 → 역할 토큰: `surface.evidence` |
+| 타입 — [Warde·Ruder](visual-design-lineage.md), [Wallace](visual-perception-research.md) | display의 표현과 본문의 읽기 역할을 나누고, 실제 한글·숫자·긴 라벨을 proof 한다. 서체 비교 때 크기·폭·행간 차이는 고정하거나 기록한다. 같은 CSS px가 같은 광학 크기는 아니며 원인이 불명확하면 속도 효과를 주장하지 않는다. | 관찰: 긴 한국어 상태가 버튼을 밀어냄 → 원리 후보: 폭·행간·계층 → 작은 대안: 본문 폭과 보조 계층 조정 → 채택: 실제 상태에서 줄바꿈과 조작이 유지됨 / 기각: 숫자 열 비교가 흐려짐 → 역할 토큰: `type.status` |
+| 색 — [Albers](visual-design-lineage.md) | 같은 전경색을 배경·면적·상태 조합에 놓고 역할 구분과 실제 대비를 함께 확인한다. 채도나 색 수를 일률적으로 정하지 않는다. | 관찰: 비활성 상태가 사진 위에서 활성과 섞임 → 원리 후보: 맥락색·상태 역할 → 작은 대안: 상태 surface와 전경 조합 변경 → 채택: 실제 합성에서 구분·대비가 유지됨 / 기각: 경고 역할과 충돌함 → 역할 토큰: `color.state.disabled` |
+
 ## 4. 이미지는 원본과 배포 크롭을 함께 검토한다
 
 이미지의 품질은 원본 파일만으로 판정하지 않는다. 원본, 데스크톱 배포 크롭, 모바일 배포 크롭을 나란히 놓고 슬롯별로 아래를 기록한다.
@@ -95,10 +103,14 @@ proof sheet는 멋의 순위를 매기는 카드가 아니라, 이 프로젝트
 
 리듬을 바꾸는 이유는 새 배경색이나 카드 모양이 아니라 독자의 질문과 과업이 바뀌었기 때문이다.
 
-## 7. 실제 화면에서 한 번에 하나씩 비평한다
+## 7. 실제 화면에서 비평한다
 
 소스 코드나 모형을 보고 완성도를 선언하지 않는다. 같은 viewport, 상태, 카피, 자산에서 전후 렌더를 비교한다.
 
+실험적으로 원인을 추적할 때만 한 번에 한 원인 가설을 바꾼다. 전체 리디자인은 여러 변경을 함께 묶을 수 있지만, 그 결과만으로 각 변경의 인과를 분리할 수는 없다.
+
+원인추적 경로일 때만 아래 순서로 진행한다.
+
 1. **관찰**: 무엇이 먼저 읽히는지, 어디에서 시선·행동·관계가 끊기는지 적는다.
 2. **원인 후보**: 구도, 카피 길이, 크롭, 위계, 상태 밀도 중 가능한 원인을 좁힌다.
 3. **한 가지 수정**: 한 번에는 한 원인 가설만 바꾼다.
@@ -106,14 +118,15 @@ proof sheet는 멋의 순위를 매기는 카드가 아니라, 이 프로젝트
 
 비평은 아래 세 관점에서 따로 적는다.
 
-| 관점 | 확인 질문 | 주장하지 말 것 |
+| 관점 | 강점·문제와 스크린샷 근거 | 주장하지 말 것 |
 |---|---|---|
-| 독창성 | 이 브랜드·과업·자산에서만 나올 이유가 보이는가 | 낯선 효과 하나가 고유성을 증명한다 |
-| 완성도 | 정렬, 타입, 크롭, 여백, 상태가 같은 규칙으로 끝까지 유지되는가 | 자동 심미 점수가 품질을 증명한다 |
-| 과업 | 사용자가 다음 정보와 행동을 예측·완료·복구할 수 있는가 | 시각 점수만으로 성공률이나 전환 인과를 증명한다 |
+| 질서 | 정렬·타입·크롭·여백·상태가 주정보를 지지한 강점과 끊긴 문제를 같은 조건의 캡처에 표시한다 | 100점식 임의 순위가 품질을 증명한다 |
+| 표현성 | 이 브랜드·과업·자산에서만 나올 이유와 과장·혼동 문제를 캡처로 적는다 | 낯선 효과 하나가 고유성을 증명한다 |
+| 완성도 | 반복 규칙과 예외 처리가 끝까지 유지된 강점·문제를 캡처로 적는다 | 자동 심미 점수가 품질을 증명한다 |
 
 완료 판정은 세 갈래로 분리한다: 사용성·접근성 규범, 프로젝트의 기능·성능 계약, 시각 평가.
 한 갈래의 통과가 다른 갈래의 통과를 대신하지 않는다.
+대표 실제 과업 시나리오로 회귀를 확인한다. 참여자 측정이 없으면 사용자 속도·이해도·전환은 미측정이며, 시각 판정으로 이를 주장하지 않는다.
 
 ## 8. 같은 규칙도 화면에 따라 다르게 쓴다