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

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

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

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

---

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

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

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

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

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

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

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

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

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

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

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

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

### 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. 이미지는 원본과 배포 크롭을 함께 검토한다

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

| 기록 항목 | 확인 질문 |
|---|---|
| 주피사체 | 이 화면에서 반드시 남아야 하는 사람·제품·공간·행동은 무엇인가 |
| 시선 방향 | 인물·물체·선이 카피나 다음 행동으로 시선을 보내는가 |
| 사라지는 맥락 | 크롭 뒤에 장소·관계·사용 장면의 뜻이 사라지지 않는가 |
| 데스크톱 초점 | 넓은 비율에서도 핵심이 안전 영역에 남는가 |
| 모바일 초점 | 좁은 비율에서 핵심이 폴드 아래·텍스트 뒤로 밀리지 않는가 |
| `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점식 임의 순위가 품질을 증명한다 |
| 표현성 | 이 브랜드·과업·자산에서만 나올 이유와 과장·혼동 문제를 캡처로 적는다 | 낯선 효과 하나가 고유성을 증명한다 |
| 완성도 | 반복 규칙과 예외 처리가 끝까지 유지된 강점·문제를 캡처로 적는다 | 자동 심미 점수가 품질을 증명한다 |

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

## 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`를 함께 따른다.