designpaca/packages/skill/references/art-direction.md

# art direction — 화면에서 판단할 수 있게 방향을 정하는 법

2단계에서 방향을 고르고, 3단계 토큰과 4단계 구현 전에 읽는다. 아트디렉션은 스타일 이름이나 색 견본을 고르는 일이 아니라, 실제 카피·자산·과업을 어떤 화면 질서로 보일지 결정하는 일이다.
이 문서는 원전을 그대로 옮긴 규칙도, 특정 효과의 실험적 성과 주장도 아니다. 아래 출처와 프로젝트 렌더를 바탕으로 합성한 작업 절차다.

## 이 문서를 읽는 법

| 상황 | 읽을 곳 |
|---|---|
| 구조가 다른 대안을 비교할지 정한다 | §1 |
| 섹션마다 답할 질문·주장·증거를 정한다 | §2 |
| 구도·타입·색 결정을 `design.md`에 기록한다 | §3, §3-1 |
| 다른 클라이언트·이전 결과물과 혼동되지 않는지 확인한다(2단계 직후, 5단계) | §3-2 — 반사실은 A, 구성 수렴 5축(히어로)은 B-1, 페이지 수렴 6축은 B-2 |
| 이미지 크롭을 정한다 | §4 |
| 서체·타입 계층을 proof sheet로 정한다 | §5 |
| 긴 스크롤의 리듬을 편집한다 | §6 |
| 실제 화면에서 비평한다 | §7, 축별 채점은 [critique.md](critique.md) §2-1 |

| 이 문서를 여는 때 | 여기서 얻는 결정 | 답이 부족할 때 필요한 추가 근거 |
|---|---|---|
| 첫 화면의 정보 순서·이미지 역할·섹션 리듬이 아직 불명확할 때 | 방문자 질문, 주장, 증거, 다음 행동과 그것의 화면 비중 | 실제 사용자 과업, 콘텐츠 소유자 확인, 브랜드 자산·권리·사실성, 지원 기기·상태별 렌더 |
| 같은 스타일 안에서 구도·크롭·타입·밀도를 정해야 할 때 | 초점, 정렬선, 여백 역할, 원본·배포 크롭, proof sheet의 채택 근거 | 원본 자산, 실제 카피·수치·상태, 이미지 설명·접근성 요구, 배포 비율과 실제 viewport |
| 한 선택의 품질이나 과업 적합성을 판정할 때 | 동일 조건에서 비교할 관찰·원인 후보·한 가지 수정 | 프로젝트 계약, 사용성·접근성 규범, 기능·성능 측정, 필요하면 해당 분야의 1차 출처 또는 현장 검증 |

출처가 현재 질문을 직접 지지하지 않으면 이 문서의 예시를 규칙으로 확대하지 않는다. 필요한 과업·자산·규범의 1차 근거를 새로 확인하고, 그 범위와 한계를 프로젝트 기록에 남긴다.

---

## 1. 대안을 언제 비교할지 먼저 정한다

큰 불확실성이 있는 디자인 결정에서만 구조가 다른 대안을 작게 비교한다. 예를 들어 첫 화면이 공간의 분위기를 먼저 보여야 하는지, 예약 가능한 시간과 위치를 먼저 보여야 하는지처럼 정보 순서가 바뀌는 결정이다.
이때의 대안은 색·서체·사진만 바꾼 변형이 아니라, 질문에 답하는 순서와 화면 골격이 달라야 한다.

| 상황 | 할 일 | 하지 않을 일 |
|---|---|---|
| 브랜드·과업·정보 우선순위가 아직 불확실함 | 서로 다른 구조를 가진 소수 안을 같은 콘텐츠로 비교 | 시안 수를 의무화하거나 장식만 바꾼 안을 세기 |
| 브랜드 방향과 핵심 구조가 확정됨 | 기존 방향 안에서 카피·크롭·밀도 후보를 고름 | 확정된 정체성을 매 화면마다 다시 경쟁시킴 |
| 국소 컴포넌트나 상태를 다듬음 | 그 화면의 과업과 상태를 기준으로 후보를 비교 | 전체 랜딩의 AIDA나 히어로 구도를 복사 |

이 표는 에이전트 내부의 비교 절차다. 사용자에게 방향을 보여 주고 고르게 하는 방향 체크포인트는 별개이며, 그 형식과 피드백 처리는 [feedback-loop.md](feedback-loop.md)를 따른다. 사용자에게 내는 방향 카드도 위와 같은 기준으로, 색·서체만 다른 안이 아니라 구조가 다른 안이어야 한다.

결정마다 `무엇이 불확실한가 / 구조 차이는 무엇인가 / 같은 조건은 무엇인가 / 채택 이유는 무엇인가`를 `design.md`에 남긴다. 대안 탐색은 좁은 문제를 확인하는 절차이며, 더 많은 안이 더 좋은 결과를 보장하지 않는다.

## 2. 콘텐츠 편집표로 화면의 일을 정한다

레이아웃 전에 각 화면 또는 섹션이 답해야 할 질문을 적는다. 마케팅 서사에 유용한 순서가 있어도 기능 화면·운영 화면에 AIDA를 강요하지 않는다.

| 방문자 질문 | 핵심 주장 | 실증 콘텐츠 | 행동 또는 다음 정보 | 화면 비중 |
|---|---|---|---|---|
| 여기는 무엇이며 나에게 왜 중요한가 | 한 문장 가치 | 실제 결과, 공간, 사례, 수치의 출처 | 더 보기, 예약, 시작 | 첫 화면에서 가장 크게 |
| 이 주장을 믿을 근거가 있는가 | 구체적 차이 | 과정, 비교, 고객 맥락, 검증 가능한 정보 | 세부 근거로 이동 | 주장 다음에 충분히 |
| 지금 무엇을 해야 하는가 | 다음 행동의 비용과 결과 | 가격, 일정, 준비물, 현재 상태 | 실행, 저장, 문의 | 행동 직전에 읽히게 |
| 일이 진행 중인 운영 화면인가 | 지금의 상태와 예외 | 목록, 필터, 경고, 최근 변경 | 처리, 검토, 복구 | 빈도·위험도에 비례 |

행마다 실제 문장, 실제 데이터, 실제 자산을 붙인다. 주장이 있는데 실증 콘텐츠가 없으면 장식으로 덮지 말고 주장 범위를 줄이거나 근거를 확보한다.
행동이 없으면 CTA를 억지로 추가하지 말고 다음에 필요한 정보를 우선한다.

## 3. 실제 재료로 구도 축을 고른다

빈 로렘입숨과 회색 상자로 구도를 확정하지 않는다. 실제 한글·영문 카피, 제목 길이, 숫자, 사진·도표·상태를 넣고 아래 축 중 필요한 것을 고른다.

| 구도 축 | 질문 | 렌더에서 확인할 것 |
|---|---|---|
| 초점 | 처음 시선이 닿아야 하는 것은 무엇인가 | 제목·행동·증거 중 하나가 경쟁 없이 먼저 읽히는가 |
| 정렬선 | 무엇이 같은 관계로 묶이는가 | 제목, 수치, 표, 행동의 시작선이 의미를 드러내는가 |
| 큰 면과 작은 정보 | 무엇이 면적을 가져야 하는가 | 큰 사진·제목이 보조 정보의 읽기를 막지 않는가 |
| 여백의 역할 | 비어 있는 면이 무엇을 돕는가 | 분리, 대기, 방향, 강조 중 이유 없이 빈 곳은 없는가 |
| 이미지와 텍스트 관계 | 둘은 같은 주장인가 다른 역할인가 | 텍스트가 사진 속 사실을 과장하거나 반복하지 않는가 |

색만 바꾼 안은 별도 구조안이 아니다. 사진 위 텍스트는 대비만 보지 말고, 피사체·캡션·행동이 같은 의미를 말하는지 확인한다.
수치·상태·가격·주소처럼 수정 가능하고 사실 검증이 필요한 정보는 이미지 안에 굽지 않는다.

### 3-1. 구도·타입·색 결정표

표의 "관점" 열에 적힌 이름(Arnheim·Hofmann·Warde·Ruder·Albers 등)은 **관찰할 때 쓸 렌즈**다. 결정의 근거가 아니다. `design.md`에 이 표를 옮길 때 지킨다.

- **근거 칸에는 이 브리프의 재료만 쓴다.** 실제 사진 파일 이름, 화면 문장, 수치, 상태 이름, 사용자가 인터뷰에서 한 말, 1단계 레퍼런스에서 잰 값 가운데 최소 하나가 행마다 들어가야 한다.
- **인명·사조 이름만으로 된 근거는 무효다.** "Hofmann의 대비를 참고해 구도를 잡았다", "Ruder처럼 그리드를 썼다", "Albers를 참고해 색을 정했다"는 관찰이 아니다. 어느 프로젝트에도 똑같이 쓸 수 있는 문장이다. 이런 행은 비어 있는 것으로 본다.
- **복사 검사.** 작성한 행에서 프로젝트 고유명사·수치·파일 이름을 지운다. 남은 문장이 다른 프로젝트의 `design.md`에 그대로 들어갈 수 있으면 그 행을 다시 쓴다. 같은 저장소의 다른 `design.md`와 문장이 같은 행이 있으면 그것도 다시 쓴다.
- **렌즈를 썼다면 무엇을 봤는지 쓴다.** 예: "Albers의 맥락색 관점으로 보니, 같은 `#C24B2A`가 크림 배경에서는 따뜻하고 흑청색 사진 위에서는 탁해졌다 → 사진 위 CTA에만 명도를 6% 올림". 인명은 생략해도 되지만 관찰은 생략하면 안 된다.

| 결정 축·관점 | 실제 재료와 렌더 확인 | 기록 한 행 예시 |
|---|---|---|
| 구도 — [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` |

위 예시 행도 템플릿이 아니다. 예시의 관찰 문장("제목과 증거가 경쟁함")을 그대로 옮기지 말고, 이 프로젝트의 렌더에서 실제로 본 것을 쓴다.

### 3-2. 반사실·수렴 점검 — 같은 결과가 다른 클라이언트에게도 맞으면 실패다

2단계에서 방향을 정한 직후 한 번, 5단계에서 실제 렌더로 한 번 돈다. 5단계 결과는 [critique.md](critique.md) §2-1 루브릭의 R8과 Direction D1·D2의 근거가 된다.

**A. 반사실 점검 (한 프로젝트 안)**

1. **고유 요소 목록을 만든다.** 첫 화면(1440·390)에서 이 브리프에서만 나올 수 있는 요소를 적는다. 후보는 실제 제품·장소·사람의 사진, 브리프에만 있는 사실·수치가 들어간 헤드라인, 브랜드 자산(로고·고유 색·서체), 이 업종의 과업에서 나온 구조(예: 예약 가능한 시간이 첫 화면에 있음)다. 각 요소에 근거가 되는 브리프 문장이나 자산 파일을 붙인다.
2. **같은 업종 치환.** 브랜드 이름·로고를 같은 업종의 경쟁사로 바꿔 첫 화면을 읽는다. 헤드라인·주 시각물·구도가 **셋 다** 그대로 성립하면 실패다.
3. **다른 업종 치환.** 사진과 카피를 다른 업종의 재료로 바꾸는 상상을 한다(예: 꽃집 → 세무사무소). 레이아웃·서체 페어·색 3개·구도 실루엣이 **바꿀 필요 없이** 그대로 맞으면 실패다. 그 업종에 맞게 구조를 바꿔야 할 이유가 하나도 떠오르지 않는다는 뜻이기 때문이다.
4. **고유 요소 수를 센다.** 1의 목록에서 2·3의 치환을 견디지 못하는(=다른 클라이언트에게 옮기면 어색해지는) 요소가 첫 화면에 둘 이상 있어야 통과다. 하나 이하면 실패다.

**B. 수렴 점검 (프로젝트 사이)**

같은 저장소·같은 세션에서 만든 다른 산출물(`design.md`, 히어로 캡처)이 있으면 돈다. 없으면 "비교 대상 없음"이라고 적는다.

표가 둘이다. B-1은 히어로 한 화면 안을, B-2는 페이지 전체의 구성을 본다. 둘은 따로 세고 따로 판정한다. 토큰 값(서체·배경 명도·강조 hue·radius)의 수렴은 [presets/README.md](presets/README.md)의 4축 점검이 본다.

**B-1. 구성 수렴 5축(히어로)**

1. 히어로 첫 화면 캡처를 회색조 썸네일로 나란히 놓는다.
2. 아래 다섯 축을 각각 같음/다름으로 표시한다.

| 수렴 축 | "같음"의 기준 |
|---|---|
| 구도 | 구도 패밀리([layout.md](layout.md) §2-b)가 같다. 분할이면 좌우만 바꾼 것도 같음이다(예: 왼쪽 글·오른쪽 세로 사진, 약 5:7) |
| 표제 서체 | 같은 패밀리 또는 같은 분류의 같은 계열 |
| eyebrow 문법 | 같은 위치·대소문자·자간·구분 기호(예: 자간 넓힌 "가상 ○○ · ○○ 예시") |
| CTA 형태 | 같은 모양·채움 방식·개수 조합(예: 단색 버튼 1 + 외곽선 텍스트 링크 1) |
| 캡션 문법 | 같은 위치·크기·구두점 방식 |

3. 셋 이상이 "같음"이면 실패다. 2단계로 돌아가 같은 축 가운데 최소 두 축을 브리프 근거로 바꾼다.

**B-2. 페이지 수렴 6축**

B-1만으로는 히어로 밖이 보이지 않는다. 쇼케이스 19종 계측(2026-10-06)에서 상단 바 내비 19/19, 한 줄 고지 띠 푸터 14/19, 두 줄 표제 18/19, 3:4·4:3 직사각 크롭 + 아래 캡션이 대부분이었는데 B-1은 한 건도 잡지 못했다. 2단계에서는 방향 카드에 적은 계획으로, 5단계에서는 전체 페이지 캡처(1440·390)와 섹션 목록으로 본다.

| 페이지 축 | "같음"의 기준 | 선택지가 있는 곳 |
|---|---|---|
| 섹션 흐름 | 히어로를 포함해 앞에서부터 블록 종류 넷이 같은 순서다(예: 히어로 → 글+사진 → 색을 바꾼 띠의 표 → 문의) | [layout.md](layout.md) §2 토폴로지 표, [genre-conventions.md](genre-conventions.md) |
| 히어로 글 묶음 | 라벨 유무·표제 줄 수·리드 형태·행동 형태의 조합이 같다(예: 라벨 + 두 줄 표제 + 리드 문단 + 버튼 하나) | layout §2-b |
| 내비 형태 | 형태와 고정 방식이 같다(예: 상단 고정 바, 브랜드 왼쪽·앵커 오른쪽) | layout §2-c |
| 푸터 형태 | 형태와 담는 것이 같다(예: 고지 한 줄 띠) | layout §2-d |
| 이미지 비율·처리 | 주로 쓴 비율 둘과 처리·캡션 위치가 같다(예: 3:4·4:3 직사각 크롭 + 아래 캡션). 둘 다 이미지가 없는 것도 같음이다 | [images.md](images.md) §2 처리 표 |
| 모션 문법 | 등장 방식과 트리거가 같다(예: 스크롤하면 아래에서 떠오른다). 둘 다 "상태 변화에만 반응"인 것도 같음이다 | [motion.md](motion.md) |

**여섯 축 가운데 넷 이상이 "같음"이면 실패다.** 2단계로 돌아가 같은 축 가운데 최소 둘을 브리프 근거로 바꾼다. B-1의 "다섯 가운데 셋 이상"과 따로 판정하고, 둘 중 하나만 걸려도 수렴 실패다.

- 비교 대상은 서로 다른 프로젝트·브리프의 산출물이다. 한 사이트 안의 여러 화면이 내비·푸터를 같이 쓰는 것은 공통 셸이므로 세지 않는다(layout §4-m).
- 셋 이상을 비교할 때 어느 한 축이 전부 같은 값이면, 쌍마다의 판정을 통과했더라도 그 축을 바꾸거나 같아야 하는 이유를 적는다([presets/README.md](presets/README.md) 5번).

**C. 기록과 실패 처리**

`design.md`에 고유 요소 목록, 두 치환의 결과, B-1·B-2 두 표를 남긴다. 2단계에서 실패하면 방향을 다시 고른다. 5단계에서 실패하면 Direction finding(critique §4 D1·D2)이며, 국소 수정이 아니라 2단계로 되돌아간다. 사용자가 이 결과를 보고 방향을 수용하면 그 사실을 기록하고 닫는다(critique §4 해제 조건).

## 4. 이미지는 원본과 배포 크롭을 함께 검토한다

이미지의 품질은 원본 파일만으로 판정하지 않는다. 원본, 데스크톱 배포 크롭, 모바일 배포 크롭을 나란히 놓고 슬롯별로 아래를 기록한다.

| 기록 항목 | 확인 질문 |
|---|---|
| 주피사체 | 이 화면에서 반드시 남아야 하는 사람·제품·공간·행동은 무엇인가 |
| 시선 방향 | 인물·물체·선이 카피나 다음 행동으로 시선을 보내는가 |
| 사라지는 맥락 | 크롭 뒤에 장소·관계·사용 장면의 뜻이 사라지지 않는가 |
| 데스크톱 초점 | 넓은 비율에서도 핵심이 안전 영역에 남는가 |
| 모바일 초점 | 좁은 비율에서 핵심이 폴드 아래·텍스트 뒤로 밀리지 않는가 |
| `object-position` | 같은 원본을 쓸 때 각 비율에서 의도한 초점 좌표가 명시됐는가 |

한 장의 원본을 모든 슬롯에 억지로 쓰지 않는다. 반대로 비교를 위해 여러 이미지를 인위적으로 생성할 필요도 없다. 필요한 슬롯에 실제로 다른 구도가 필요할 때만 별도 자산을 고른다.
이미지 조달·진실 라벨·대체 텍스트의 세부는 [images.md](images.md)와 `trustworthy-showcases.md`를 따른다.

## 5. 타입은 proof sheet에서 결정한다

폰트 이름, 문자 견본, 한 줄 영문만으로 위계를 확정하지 않는다. 새 서체·타입 계층을 고르거나 변경이 줄바꿈·밀도·상태 인지에 영향을 줄 때만, 같은 폭과 크기에서 실제 콘텐츠를 넣은 proof sheet를 만든다.

- 프로젝트에서 쓰는 언어의 본문과 긴 제목
- 표시하는 가격·날짜·비율·음수·증감 같은 숫자
- 실제로 쓰는 선택됨, 오류, 비활성, 처리 중 같은 상태 텍스트
- 변경 범위에 있는 버튼 라벨, 표 머리글, 카드 보조 정보

그 뒤 줄바꿈, 숫자 폭, 밀도, 상태의 구분, 확대 상태에서의 읽기를 비교한다. 서체 선택·로딩·폴백 메트릭·라이선스와 한글 조판의 정본은 [typography.md](typography.md)다.
proof sheet는 멋의 순위를 매기는 카드가 아니라, 이 프로젝트의 실제 글자가 어떤 구도를 요구하는지 확인하는 증거다.

## 6. 전체 스크롤의 리듬을 편집한다

반복은 나쁜 것이 아니다. 같은 데이터·행동·비교 규칙을 읽게 하는 반복은 보존한다. 문제는 역할이 다른 섹션이 같은 제목·카드·장식만 반복해서 스크롤이 정보를 더하지 않을 때다.

1. 각 섹션의 의미 단위와 다음 행동을 목록화한다.
2. 같은 의미 단위는 같은 리듬을 유지한다.
3. 정보 관계가 달라지면 필요한 순서·밀도·배치를 조정한다.
4. 장식만 변주해 다른 섹션처럼 보이게 하지 않는다.
5. 긴 페이지는 폴드마다 무엇이 새로 이해되거나 진행되는지 실제 스크롤에서 확인한다.

리듬을 바꾸는 이유는 새 배경색이나 카드 모양이 아니라 독자의 질문과 과업이 바뀌었기 때문이다.

## 7. 실제 화면에서 비평한다

소스 코드나 모형을 보고 완성도를 선언하지 않는다. 같은 viewport, 상태, 카피, 자산에서 전후 렌더를 비교한다.

실험적으로 원인을 추적할 때만 한 번에 한 원인 가설을 바꾼다. 전체 리디자인은 여러 변경을 함께 묶을 수 있지만, 그 결과만으로 각 변경의 인과를 분리할 수는 없다.

원인추적 경로일 때만 아래 순서로 진행한다.

1. **관찰**: 무엇이 먼저 읽히는지, 어디에서 시선·행동·관계가 끊기는지 적는다.
2. **원인 후보**: 구도, 카피 길이, 크롭, 위계, 상태 밀도 중 가능한 원인을 좁힌다.
3. **한 가지 수정**: 한 번에는 한 원인 가설만 바꾼다.
4. **동일 조건 비교**: 같은 폭·상태·콘텐츠에서 전후를 보고 유지·되돌림·다음 수정을 결정한다.

비평은 아래 세 관점에서 따로 적는다.

| 관점 | 강점·문제와 스크린샷 근거 | 주장하지 말 것 |
|---|---|---|
| 질서 | 정렬·타입·크롭·여백·상태가 주정보를 지지한 강점과 끊긴 문제를 같은 조건의 캡처에 표시한다 | 100점식 임의 순위가 품질을 증명한다 |
| 표현성 | 이 브랜드·과업·자산에서만 나올 이유와 과장·혼동 문제를 캡처로 적는다 | 낯선 효과 하나가 고유성을 증명한다 |
| 완성도 | 반복 규칙과 예외 처리가 끝까지 유지된 강점·문제를 캡처로 적는다 | 자동 심미 점수가 품질을 증명한다 |

세 관점의 판정을 축별로 쪼개 채점할 때는 [critique.md](critique.md) §2-1 시각 비평 루브릭과 §2-2 스크린샷 절차를 쓴다. 질서는 R2·R3·R5·R9, 표현성은 R1·R6·R7·R8, 완성도는 R4·R9·R10에 대응한다. 루브릭은 100점식 순위가 아니라 근거가 붙은 최저선이다.

완료 판정은 세 갈래로 분리한다: 사용성·접근성 규범, 프로젝트의 기능·성능 계약, 시각 평가.
한 갈래의 통과가 다른 갈래의 통과를 대신하지 않는다.
대표 실제 과업 시나리오로 회귀를 확인한다. 참여자 측정이 없으면 사용자 속도·이해도·전환은 미측정이며, 시각 판정으로 이를 주장하지 않는다.

## 8. 같은 규칙도 화면에 따라 다르게 쓴다

### 공간 포트폴리오

방문자 질문은 “이 장소의 분위기와 작업 범위가 내 프로젝트에 맞는가”다.
첫 화면은 실제 공간의 주피사체와 짧은 주장으로 관계를 만들고, 다음 섹션은 재료·과정·완성 공간의 증거로 이어진다.
카피가 길지 않다면 큰 이미지 면과 넓은 여백이 장소의 규모·빛·질감을 읽게 할 수 있다.
모바일 크롭에서 창, 사람의 행동, 재료 중 무엇이 사라지면 장소의 뜻이 바뀌는지 기록한다.
문의 행동은 검증 가능한 범위·일정 정보 다음에 둔다.

### 밀집 운영 화면

방문자 질문은 “지금 무엇이 막혔고 어떤 항목부터 처리해야 하는가”다.
첫 화면은 분위기 사진보다 상태, 위험, 우선순위, 가능한 행동을 먼저 둔다.
같은 종류의 행·필터·수치는 반복 구조를 유지해야 비교가 빠르며, 여백은 장식보다 군집과 오류 복구를 돕는다.
큰 영문 타이틀이나 풀블리드 이미지를 공간 포트폴리오처럼 복사하면 상태 정보와 행동이 밀릴 수 있다.
타입 proof sheet에는 긴 한국어 상태, 숫자 열, 비활성·오류 라벨을 넣어 밀도에서 실제로 비교한다.

두 화면 모두 실제 콘텐츠, 구도 축, 원본과 크롭, 동일 조건 비평을 쓴다.
다만 질문과 실증 콘텐츠가 다르므로 면적·정렬선·리듬·행동 순서를 같게 만들 이유는 없다.

## 근거와 적용 경계

| ID | 출처와 역할 | 이 문서에서의 사용 한계 |
|---|---|---|
| DC-DIAMOND | [Design Council, Double Diamond](https://www.designcouncil.org.uk/resources/the-double-diamond/) · practice | 불확실한 문제에서 소규모 대안 탐색과 검증의 절차 참고이며, 시안 수나 성과의 근거가 아니다 |
| VA-MOFFAT | [V&A, Curtis Moffat: Working Methods](https://www.vam.ac.uk/articles/curtis-moffat-working-methods) · case · 2025-09-24 | contact print와 crop을 한 작업 사례로 참고하며, 모든 프로젝트의 이미지 절차로 일반화하지 않는다 |
| CH-DESCRIPTION | [Cooper Hewitt image description guidelines](https://www.cooperhewitt.org/cooper-hewitt-guidelines-for-image-description/) · practice | 중요한 정보부터, 공간 관계를 따라 설명하는 방식을 참고한다. alt 단어 수를 고정하지 않는다 |
| LUPTON-POSTERS | [How Posters Work](https://www.cooperhewitt.org/publications/how-posters-work/) · bibliography | 책의 소개·서지 확인만 한다. 원문을 읽었거나 개념을 인용했다는 주장이 아니다 |
| GOV-IMAGES | [GOV.UK Design System: images](https://design-system.service.gov.uk/styles/images/) · practice | 정부 서비스 범위에서 과업 정보·맥락·alt를 다루는 지침이다. 감성 사진 금지를 상업 브랜드에 일반화하지 않는다 |

출처의 상세 기록 형식과 사용성·접근성·성능 검증은 [evidence-ledger.md](evidence-ledger.md), [design-foundations.md](design-foundations.md), 프로젝트의 `design.md`를 함께 따른다.