release: v0.11.0

packages/skill/references/art-direction.md

@@ -0,0 +1,149 @@
+# art direction — 화면에서 판단할 수 있게 방향을 정하는 법
+
+2단계에서 방향을 고르고, 3단계 토큰과 4단계 구현 전에 읽는다. 아트디렉션은 스타일 이름이나 색 견본을 고르는 일이 아니라, 실제 카피·자산·과업을 어떤 화면 질서로 보일지 결정하는 일이다.
+이 문서는 원전을 그대로 옮긴 규칙도, 특정 효과의 실험적 성과 주장도 아니다. 아래 출처와 프로젝트 렌더를 바탕으로 합성한 작업 절차다.
+
+| 이 문서를 여는 때 | 여기서 얻는 결정 | 답이 부족할 때 필요한 추가 근거 |
+|---|---|---|
+| 첫 화면의 정보 순서·이미지 역할·섹션 리듬이 아직 불명확할 때 | 방문자 질문, 주장, 증거, 다음 행동과 그것의 화면 비중 | 실제 사용자 과업, 콘텐츠 소유자 확인, 브랜드 자산·권리·사실성, 지원 기기·상태별 렌더 |
+| 같은 스타일 안에서 구도·크롭·타입·밀도를 정해야 할 때 | 초점, 정렬선, 여백 역할, 원본·배포 크롭, proof sheet의 채택 근거 | 원본 자산, 실제 카피·수치·상태, 이미지 설명·접근성 요구, 배포 비율과 실제 viewport |
+| 한 선택의 품질이나 과업 적합성을 판정할 때 | 동일 조건에서 비교할 관찰·원인 후보·한 가지 수정 | 프로젝트 계약, 사용성·접근성 규범, 기능·성능 측정, 필요하면 해당 분야의 1차 출처 또는 현장 검증 |
+
+출처가 현재 질문을 직접 지지하지 않으면 이 문서의 예시를 규칙으로 확대하지 않는다. 필요한 과업·자산·규범의 1차 근거를 새로 확인하고, 그 범위와 한계를 프로젝트 기록에 남긴다.
+
+---
+
+## 1. 대안을 언제 비교할지 먼저 정한다
+
+큰 불확실성이 있는 디자인 결정에서만 구조가 다른 대안을 작게 비교한다. 예를 들어 첫 화면이 공간의 분위기를 먼저 보여야 하는지, 예약 가능한 시간과 위치를 먼저 보여야 하는지처럼 정보 순서가 바뀌는 결정이다.
+이때의 대안은 색·서체·사진만 바꾼 변형이 아니라, 질문에 답하는 순서와 화면 골격이 달라야 한다.
+
+| 상황 | 할 일 | 하지 않을 일 |
+|---|---|---|
+| 브랜드·과업·정보 우선순위가 아직 불확실함 | 서로 다른 구조를 가진 소수 안을 같은 콘텐츠로 비교 | 시안 수를 의무화하거나 장식만 바꾼 안을 세기 |
+| 브랜드 방향과 핵심 구조가 확정됨 | 기존 방향 안에서 카피·크롭·밀도 후보를 고름 | 확정된 정체성을 매 화면마다 다시 경쟁시킴 |
+| 국소 컴포넌트나 상태를 다듬음 | 그 화면의 과업과 상태를 기준으로 후보를 비교 | 전체 랜딩의 AIDA나 히어로 구도를 복사 |
+
+결정마다 `무엇이 불확실한가 / 구조 차이는 무엇인가 / 같은 조건은 무엇인가 / 채택 이유는 무엇인가`를 `design.md`에 남긴다. 대안 탐색은 좁은 문제를 확인하는 절차이며, 더 많은 안이 더 좋은 결과를 보장하지 않는다.
+
+## 2. 콘텐츠 편집표로 화면의 일을 정한다
+
+레이아웃 전에 각 화면 또는 섹션이 답해야 할 질문을 적는다. 마케팅 서사에 유용한 순서가 있어도 기능 화면·운영 화면에 AIDA를 강요하지 않는다.
+
+| 방문자 질문 | 핵심 주장 | 실증 콘텐츠 | 행동 또는 다음 정보 | 화면 비중 |
+|---|---|---|---|---|
+| 여기는 무엇이며 나에게 왜 중요한가 | 한 문장 가치 | 실제 결과, 공간, 사례, 수치의 출처 | 더 보기, 예약, 시작 | 첫 화면에서 가장 크게 |
+| 이 주장을 믿을 근거가 있는가 | 구체적 차이 | 과정, 비교, 고객 맥락, 검증 가능한 정보 | 세부 근거로 이동 | 주장 다음에 충분히 |
+| 지금 무엇을 해야 하는가 | 다음 행동의 비용과 결과 | 가격, 일정, 준비물, 현재 상태 | 실행, 저장, 문의 | 행동 직전에 읽히게 |
+| 일이 진행 중인 운영 화면인가 | 지금의 상태와 예외 | 목록, 필터, 경고, 최근 변경 | 처리, 검토, 복구 | 빈도·위험도에 비례 |
+
+행마다 실제 문장, 실제 데이터, 실제 자산을 붙인다. 주장이 있는데 실증 콘텐츠가 없으면 장식으로 덮지 말고 주장 범위를 줄이거나 근거를 확보한다.
+행동이 없으면 CTA를 억지로 추가하지 말고 다음에 필요한 정보를 우선한다.
+
+## 3. 실제 재료로 구도 축을 고른다
+
+빈 로렘입숨과 회색 상자로 구도를 확정하지 않는다. 실제 한글·영문 카피, 제목 길이, 숫자, 사진·도표·상태를 넣고 아래 축 중 필요한 것을 고른다.
+
+| 구도 축 | 질문 | 렌더에서 확인할 것 |
+|---|---|---|
+| 초점 | 처음 시선이 닿아야 하는 것은 무엇인가 | 제목·행동·증거 중 하나가 경쟁 없이 먼저 읽히는가 |
+| 정렬선 | 무엇이 같은 관계로 묶이는가 | 제목, 수치, 표, 행동의 시작선이 의미를 드러내는가 |
+| 큰 면과 작은 정보 | 무엇이 면적을 가져야 하는가 | 큰 사진·제목이 보조 정보의 읽기를 막지 않는가 |
+| 여백의 역할 | 비어 있는 면이 무엇을 돕는가 | 분리, 대기, 방향, 강조 중 이유 없이 빈 곳은 없는가 |
+| 이미지와 텍스트 관계 | 둘은 같은 주장인가 다른 역할인가 | 텍스트가 사진 속 사실을 과장하거나 반복하지 않는가 |
+
+색만 바꾼 안은 별도 구조안이 아니다. 사진 위 텍스트는 대비만 보지 말고, 피사체·캡션·행동이 같은 의미를 말하는지 확인한다.
+수치·상태·가격·주소처럼 수정 가능하고 사실 검증이 필요한 정보는 이미지 안에 굽지 않는다.
+
+## 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. **동일 조건 비교**: 같은 폭·상태·콘텐츠에서 전후를 보고 유지·되돌림·다음 수정을 결정한다.
+
+비평은 아래 세 관점에서 따로 적는다.
+
+| 관점 | 확인 질문 | 주장하지 말 것 |
+|---|---|---|
+| 독창성 | 이 브랜드·과업·자산에서만 나올 이유가 보이는가 | 낯선 효과 하나가 고유성을 증명한다 |
+| 완성도 | 정렬, 타입, 크롭, 여백, 상태가 같은 규칙으로 끝까지 유지되는가 | 자동 심미 점수가 품질을 증명한다 |
+| 과업 | 사용자가 다음 정보와 행동을 예측·완료·복구할 수 있는가 | 시각 점수만으로 성공률이나 전환 인과를 증명한다 |
+
+완료 판정은 세 갈래로 분리한다: 사용성·접근성 규범, 프로젝트의 기능·성능 계약, 시각 평가.
+한 갈래의 통과가 다른 갈래의 통과를 대신하지 않는다.
+
+## 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`를 함께 따른다.