# 최코치 코칭 시스템 보고서 디자인 시스템

## 0. Research Log

- Embedded references: Layer B 후보는 Notion, Mintlify, Wired였다. 운영 문서의 따뜻한 종이 질감과 낮은 시각 소음이 가장 잘 맞아 `Notion`을 선택했고, Layer A는 절제된 위계와 기능 우선 원칙의 `minimalist-skill`을 선택했다.
- Lazyweb: Charma 목표 대시보드, Apple Manuals/Specs/Downloads, BetterMe My Plan 화면을 직접 확인했다. Charma에서 상태·소유자 중심 행 구조, Apple에서 넓은 여백과 단일 검색/탐색 축, BetterMe에서 날짜 중심 순차 과업과 큰 터치 대상을 추출했다.
- UI/UX DB: `FAQ/Documentation Landing`과 `Minimalism & Swiss Style` 권고를 확인했다. 검색 대신 목차, 문제 해결 경로, 반응형 375/768/1280, 44px 터치 대상, 명시적 포커스 상태를 채택했다.
- Imagen: 이 결과물은 사진·일러스트가 의미를 더하지 않는 로컬 운영 문서이므로 생성 이미지를 넣지 않는다. 장식 대신 정보 구조와 실제 검증 수치를 시각 언어로 사용한다.

## 1. Brief and Personas

### Brief

구현된 개인·고객 영양 코칭 시스템의 구조, 안전 경계, 실제 사용법, 수정법, 장애 대응을 한 파일에서 이해하고 실행할 수 있는 한국어 HTML 운영 보고서를 만든다. 이 문서는 홍보 페이지가 아니라 코치의 운영 바인더다.

### Primary persona

- 단독 운영자: Telegram과 터미널을 사용하지만 시스템 내부 구현을 매일 기억하고 싶지는 않다.
- 핵심 과업: 고객 등록, 12주 계획 검토, 기능 활성화, 체크인 완료 확인, AI 초안 검토, 고객 전달, 장애 확인.
- 상황적 제약: 모바일에서 빠르게 훑고, 필요할 때 데스크톱에서 명령을 복사한다.

### Secondary persona

- 미래의 유지보수자: 개인정보를 노출하지 않고 저장소, 스케줄, 서비스 상태를 점검해야 한다.

### Accessibility constraints

- 본문은 모바일에서도 16px 이상, 줄 높이 1.65 이상을 유지한다.
- 모든 링크·버튼·요약 컨트롤은 키보드로 접근 가능하고 44px 이상의 터치 영역을 가진다.
- 색만으로 상태를 구분하지 않고 텍스트 레이블을 함께 쓴다.
- `prefers-reduced-motion`에서 스크롤·전환 애니메이션을 제거한다.
- 200% 확대와 375px 폭에서 가로 스크롤이 없어야 한다.

## 2. Visual Direction

- Atmosphere: 따뜻한 종이 위에 정리된 코치의 운영 바인더. 차분하고 정확하며 과장하지 않는다.
- Material: 순백색 본문, 웜 아이보리 배경, 잉크색 본문, 얇은 웜그레이 경계선.
- Signature motif: 각 섹션 왼쪽의 작은 번호와 ‘현재 상태 / 다음 행동’ 쌍. 장식용 그래픽은 사용하지 않는다.
- Depth: borders-only. 그림자, 글래스 효과, 그라데이션을 사용하지 않는다.
- Density: 데스크톱은 좌측 목차와 본문 2열, 모바일은 본문 우선 단일 열.

## 3. Tokens

### Color

- `--paper: #fffdf8` — 페이지 바탕
- `--surface: #ffffff` — 본문·카드
- `--surface-warm: #f6f3ed` — 구획·코드 배경
- `--ink: #24211e` — 주 텍스트
- `--ink-muted: #625d57` — 보조 텍스트
- `--line: #ded9d1` — 경계선
- `--line-strong: #aaa39a` — 강조 경계
- `--accent: #176b4d` — 링크·완료·핵심 행동
- `--accent-soft: #e9f4ef` — 완료 배경
- `--attention: #8a4b10` — 주의 텍스트
- `--attention-soft: #fbf0e2` — 주의 배경
- `--danger: #9c2f2f` — 오류·금지
- `--danger-soft: #fbeaea` — 오류 배경
- `--focus: #1261a0` — 키보드 포커스

### Typography

- Sans: `Pretendard Variable`, `Pretendard`, `Apple SD Gothic Neo`, `Noto Sans KR`, system-ui, sans-serif.
- Serif display: `Iowan Old Style`, `Noto Serif KR`, `AppleMyungjo`, serif.
- Mono: `SFMono-Regular`, `Consolas`, `Liberation Mono`, monospace.
- Display: clamp(36px, 6vw, 68px), 700, 1.08, -0.035em.
- H2: clamp(28px, 4vw, 40px), 700, 1.2, -0.025em.
- H3: 22px, 700, 1.35, -0.015em.
- Body: 16px, 400, 1.7.
- Small: 14px, 500, 1.55.
- Label: 12px, 700, 1.4, 0.08em uppercase.

### Spacing and sizing

- Base unit: 4px.
- Space scale: 4, 8, 12, 16, 24, 32, 48, 64, 96px.
- Content width: 1120px; reading column: 760px; sidebar: 240px.
- Radii: 4px controls, 8px cards, 999px status pill only.
- Touch target: minimum 44px.
- Z index: base 0, sticky 20, skip link 100.

## 4. Layout Grammar

- Hero: outcome, current activation state, three proof metrics, then a direct ‘처음 사용하기’ anchor.
- Document shell: sticky left table of contents at 1024px and above; main reading column on the right.
- Section order follows operator decisions: understand → onboard → run daily → review → modify → recover → verify.
- Data-heavy comparison uses responsive tables with semantic headers; on narrow screens rows may scroll only inside their own labeled wrapper.
- Architecture is rendered as nested bordered regions, not free-floating cards.

## 5. Reusable Primitives and States

### Status strip

- Anatomy: label, value, evidence caption.
- States: complete (green), attention (amber), blocked/error (red), neutral.
- Color always accompanies an explicit Korean state word.

### Callout

- Anatomy: short title plus one or two explanatory paragraphs.
- States: information, attention, privacy, limitation.
- Left border and tonal fill only; no icon dependency.

### Step row

- Anatomy: numbered marker, action title, explanation, optional command/result.
- States: default, current, complete.
- Mobile: number remains left, body wraps; no horizontal connector.

### Command block

- Anatomy: visible label, `pre > code`, copy button, optional expected result.
- States: idle, copied, copy failed.
- Button label changes textually and returns after two seconds.

### Evidence table

- Anatomy: caption, header cells, body rows, text status.
- States: pass, known unrelated failure, not run.
- Numbers use tabular figures.

### Disclosure

- Native `details/summary`; summary has 44px target and visible focus.
- States: closed/open; `펼치기`/`접기` 텍스트를 항상 표시하고 내용은 JavaScript 없이도 사용할 수 있다.

### Navigation link

- States: default, hover/active underline, focus ring, current section via `aria-current` when enhanced by JavaScript.
- 모바일의 긴 문서 끝에는 본문을 가리지 않는 44px `목차로 돌아가기` 링크를 일반 문서 흐름으로 제공한다.

### Architecture lane

- Anatomy: lane label, participants, storage, model access, output destination.
- States: personal, customer intake, owner review. Each state uses text heading, not color alone.

## 6. Interaction and Motion

- Native anchor navigation with smooth scrolling only when reduced motion is not requested.
- Copy buttons provide immediate text feedback and an `aria-live` announcement.
- Clipboard API가 제한된 `file://` 환경에서는 선택형 textarea 폴백을 사용한다.
- Current-section navigation updates on intersection; failure leaves ordinary anchors fully usable.
- Motion duration: 160ms for color/border changes only. No scale animations, parallax, or scroll reveal.
- Print mode removes navigation and controls while preserving commands and all expanded operational content.

## 7. Responsive Behavior

- 375px: one column, 20px side padding, full-width 44px controls, tables have labeled overflow containers, hero metrics stack.
- 768px: 32px side padding, two-column metric and lane grids where readable.
- 1024px+: 240px sticky navigation plus flexible 760px reading column.
- 1280px+: maximum 1120px centered shell; line length remains constrained.
- Long paths and commands use `overflow-wrap:anywhere` or contained horizontal scrolling; the page itself never overflows.

## 8. Content, Accessibility, and Accepted Debt

- Voice: 존댓말, 구체적인 동사, 실제 결과부터 제시. ‘완벽’, ‘자동으로 다 된다’ 같은 과장은 쓰지 않는다.
- Security: 실제 Telegram ID·토큰·고객 정보는 보고서에 싣지 않는다. 모든 명령 예시는 자리표시자를 사용한다.
- Medical boundary: 진단·치료를 하지 않으며 이상 신호는 의료 전문가 확인으로 전환한다.
- Cognitive support: 각 운영 과업은 ‘언제 / 무엇을 / 성공하면 무엇이 보이는지’ 세 문장 이내로 설명한다.
- Accepted debt: 로컬 단일 HTML이므로 실시간 고객 상태를 조회하지 않는다. 보고서의 검증 수치는 생성 시점 스냅샷이며, 라이브 상태 확인 명령을 별도로 제공한다.
- Accepted debt: 외부 웹폰트와 이미지가 없어 네트워크 없이 열리지만, 운영체제에 따라 서체 모양이 조금 다를 수 있다.