# DESIGN.md 후보 A: 주보

> 상태: **후보안(draft)**. 루트 `DESIGN.md`로 확정되기 전까지 구현에 쓰지 않는다.
> 형식: omd Core v2의 일곱 영역(Experience, Foundations, Typography & Assets, Components & States, Layout & Platforms, Content & Locales, Governance) 순서를 따른 손글씨 초안. 컴파일된 Core v2 패키지(`.omd/system/*`)는 확정 후 `omd:init`으로 만든다.
> 출처 표기: 이 문서의 값은 모두 `agent-proposed-greenfield-decision`이다. 레퍼런스(MUJI, GOV.UK)는 톤 참고만 했고 값을 옮기지 않았다.

---

## 1. Experience

### 컨셉
매주 예배당 입구에서 받아 드는 **종이 주보**를 화면으로 옮긴다. 재생지처럼 살짝 녹색 기운이 도는 종이 바탕에, 소나무색 잉크 하나로 찍은 명조 활자. 장식은 주보에 실제로 있는 것만 쓴다: 예배 순서의 점선 지시선, 접는 선, 교회 인장. 시니어 교인이 "늘 보던 주보"처럼 읽을 수 있고, 새 방문자는 이 교회가 차분하고 단정하다는 인상을 받는다. 화려함보다 **읽힘**이 먼저다.

### 1순위 사용자와 과업
| 페르소나 | 과업 | 이 안이 돕는 방식 |
|---|---|---|
| 시니어 교인(65세+) | 큰 글씨 주보·설교 열람 | 명조 본문 18px, 행간 1.8, 지면 같은 단 폭(최대 34em) |
| 일반 교인 | 이번 주 주보·소식 확인 | 주보 지면 문법(순서·지시선)을 앱 목록에 재사용 |
| 새 방문자 | 예배 시간·오시는 길 | 첫 화면 버튼 2개와 주보식 바로가기 목록 |
| 학생 | 소식·앨범 | 이 안의 약점. 차분함이 다소 어른스럽게 읽힐 수 있다 |

### 원칙
1. 종이 위 잉크 하나. 색은 소나무 녹색 한 가지로 행동과 제목을 표시한다.
2. 장식은 주보에 실제로 있는 것만 쓴다(지시선, 접는 선, 인장). 그 밖의 무늬·그라데이션은 쓰지 않는다.
3. 본문은 명조, 조작은 고딕. 읽는 글과 누르는 것을 서체로 구분한다.

---

## 2. Foundations

### 색 토큰
| 역할 | 토큰 | 라이트 | 다크 | 용도 |
|---|---|---|---|---|
| 배경 | `bg` | `#F2F3EE` | `#161A18` | 페이지 바탕(재생지) |
| 표면 | `surface` | `#FBFBF8` | `#1F2421` | 표·카드·입력 바탕 |
| 전경 | `fg` | `#1F2622` | `#E9ECE6` | 본문·제목 잉크 |
| 보조 전경 | `muted` | `#4F5852` | `#A9B1AA` | 캡션·메타 |
| 주색 | `primary` | `#2C5A4A` | `#86BFA9` | 주 버튼, 제목 잉크, 링크 |
| 주색 위 글자 | `onPrimary` | `#FFFFFF` | `#10201A` | 주 버튼 글자 |
| 보조 | `secondary` (선) | `#C5CBC3` | `#3A423D` | 접는 선·표 선·지시선 |
| 강조 | `accent` (인주) | `#A23B2A` | `#E39482` | 10주년 인장·"새 글" 표시. **화면당 한 곳** |
| 경고 | `warning` | `#8A5300` | `#E2B35A` | "확인 중" 등 미확정 정보 표시 |
| 오류 | `error` | `#A3302A` | `#F08A7E` | 폼 오류 |
| 포커스 | `focus` | `#2C5A4A` 3px + 바탕 2px 간격 | `#86BFA9` | 키보드 포커스 |

대비(WCAG 2.x, 실측 계산): fg/bg 13.9:1, muted/bg 6.6:1, primary/bg 7.1:1, onPrimary/primary 7.9:1, accent/bg 5.9:1, warning/bg 5.7:1. 다크: fg/bg 14.7:1, primary/bg 8.4:1. 전부 AA(4.5:1) 이상, 본문 쌍은 AAA(7:1) 이상.

### 간격 (4px 기반)
`space-1 4` · `space-2 8` · `space-3 12` · `space-4 16` · `space-5 24` · `space-6 32` · `space-7 48` · `space-8 72` · `space-9 112` (px)
- 같은 묶음 안 간격은 `space-3~4`, 섹션 사이는 `space-8` 이상. 묶음 안과 사이의 차이를 3배 이상 둔다.

### Radius
`radius-0 0`(표·지면) · `radius-1 4`(버튼·입력) · `radius-2 8`(사진 자리·시트) · 원형(인장만)

### 그림자
종이는 뜨지 않는다. 그림자는 두 단계만.
- `shadow-0`: 없음(기본)
- `shadow-1`: `0 1px 0 #C5CBC3` (지면 아래 접힌 종이 끝, 표면 카드)
- `shadow-2`: `0 8px 24px rgba(31,38,34,0.10)` (앱의 바텀시트·다이얼로그 전용)

---

## 3. Typography & Assets

### 서체 (무료 웹폰트)
- **Noto Serif KR** (Google Fonts, SIL OFL): 제목·본문. 400/600/700.
- **Pretendard** (jsdelivr, SIL OFL): 버튼·표 머리·내비·라벨 등 조작 요소. 500/700.
- 대체: `"Noto Serif KR", "Nanum Myeongjo", serif` / `"Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif`

### 스케일 (7단계, 1.25 비율 근사)
| 단계 | 토큰 | px / 행간 | 서체·굵기 | 용도 |
|---|---|---|---|---|
| 1 | `caption` | 16 / 1.6 | Pretendard 500 | 캡션, 표 보조 |
| 2 | `body` | 18 / 1.8 | Noto Serif KR 400 | 본문(최소값) |
| 3 | `lead` | 21 / 1.75 | Noto Serif KR 400 | 리드 문장 |
| 4 | `h4` | 24 / 1.5 | Noto Serif KR 600 | 소제목 |
| 5 | `h3` | 30 / 1.4 | Noto Serif KR 600 | 섹션 제목 |
| 6 | `h2` | 38 / 1.3 | Noto Serif KR 700 | 큰 제목 |
| 7 | `display` | 80 / 1.2 (모바일 48) | Noto Serif KR 700 | 첫 화면 환영 문구(짧게, 한 줄) |

- 본문 단 폭 최대 34em(명조이므로 고딕보다 약간 넓고 행간을 더 준다).
- 자간은 기본값. 제목만 `-0.01em`. 대문자 라벨·자간 벌림 없음.
- 숫자(시간·날짜)는 `font-variant-numeric: tabular-nums`.

### 사진과 그림
- 사진 자산이 없으므로 **사진 자리**는 종이 위에 그은 엷은 십자 재단선과 "사진 자리: 예배 후 성도 사진(동의 후)" 캡션으로 둔다. 가짜 인물 그림은 그리지 않는다.
- 사진이 들어오면 모서리 `radius-2`, 아래에 명조 캡션과 날짜(벤치마크 5.5 "캡션 없는 사진 금지").
- 10주년 인장: 원 안의 "10" 숫자와 "주의나라교회 2017–2027" 원형 글자. 강조색 `accent`. 페이지에 한 번. 인장은 로고 자산이므로 `<img>`(SVG, 라이트·다크 2벌)로 넣는다.

---

## 4. Components & States

### 버튼
| 종류 | 모양 | 상태 |
|---|---|---|
| 주 버튼 | `primary` 바탕, `onPrimary` 글자, Pretendard 700 18px, 높이 56, 좌우 28, `radius-1` | hover: 바탕 8% 어둡게(`#244B3E`) · active: `#1D3E33` · focus: 3px `focus` 링 · disabled: `secondary` 바탕 + `muted` 글자 |
| 보조 버튼 | 투명 바탕, 2px `primary` 테두리, `primary` 글자 | hover: `surface` 바탕 |
| 글자 버튼 | 밑줄 링크와 같음 | |

- 한 화면의 주 버튼은 1개. 첫 화면만 주 1 + 보조 1.
- 글자에 화살표(→)를 붙이지 않는다.

### 카드
- 카드 대신 **지면**을 쓴다: `surface` 바탕 + `shadow-1`(아래 한 줄) + `radius-0`. 카드 안 카드 금지.
- 목록은 카드 반복 대신 **지시선 행**(제목 ……… 설명)으로 표현한다. 주보 예배 순서의 문법.

### 표
- 머리행: Pretendard 700 16px, `fg`, 아래 2px `fg` 선. 세로선 없음.
- 본문행: Noto Serif KR 18px, 행 높이 최소 56, 행 사이 1px `secondary` 선.
- 미확정 값은 `warning` 글자로 "확인 중".

### 링크
- `primary` 글자 + 1px 밑줄(`text-underline-offset: 0.2em`). hover 때 밑줄 2px. 방문한 링크도 같은 색(교인 앱에서 혼란 방지).

### 상태
- 빈 상태: 명조 한 문장 + 할 일 버튼 하나("아직 올라온 주보가 없습니다. 지난 주보 보기").
- 로딩: 지면 모양 회색 막대(`secondary` 40%), 깜빡임 없이 고정.
- 오류: `error` 글자 + 무엇이 잘못됐고 어떻게 하는지 한 줄.

---

## 5. Layout & Platforms

- 컨테이너 최대 1080px, 본문 단 최대 34em. 왼쪽 정렬이 기본, 첫 화면 제목만 왼쪽 정렬 유지(가운데 정렬 아님).
- 페이지는 **접힌 주보**처럼 두 면: 넓은 화면에서 왼쪽 면(글)과 오른쪽 면(사진 자리)을 1px `secondary` 접는 선으로 나눈다. 모바일에서는 한 면으로 접힌다.
- 브레이크포인트: 600 / 900 / 1200.
- 터치 타깃 최소 48×48(시니어 고려, 기본 56).
- 정적 랜딩: 인라인 CSS 한 파일. Flutter 웹·앱: 아래 매핑으로 같은 토큰.

### 모션
- 거의 없다. 사용자 행동에 대한 반응만: 버튼 hover 배경 120ms `ease-out`, 시트 열림 220ms `cubic-bezier(0.2,0,0,1)`.
- 페이지 진입 애니메이션 없음. `prefers-reduced-motion: reduce`에서는 모든 전환 0ms.
- `transform`·`opacity`·`background-color`만 전환한다.

---

## 6. Content & Locales

- 한국어만(다국어 비목표). 메뉴·버튼 모두 한글: "교회 소개", "예배 시간", "오시는 길", "10년의 기록", "교회 앱 열기".
- 존댓말 "~합니다/~하세요". 감탄사·과장 없음. 확인되지 않은 사실은 "확인 중".
- 숫자 마커(01/02)는 실제 순서(예배 순서, 연혁)에만.

### Do & Don't
| Do | Don't |
|---|---|
| 주보 문법(지시선, 접는 선, 인장)을 장식으로 쓴다 | 크림색+테라코타 조합, 붓글씨 흉내 이미지 |
| 본문 명조 18px 이상, 행간 1.8 | 명조를 버튼·표 머리 같은 조작 요소에 쓰기 |
| 소나무색 한 가지로 행동 표시 | 제목 단어 하나만 다른 색/기울임으로 강조 |
| 사진마다 캡션과 날짜 | 어두운 영상 히어로, 캡션 없는 사진 격자 |
| 인장은 페이지당 한 번 | 인주색을 버튼·링크에 쓰기 |

---

## 7. Governance

### 접근성
- 본문 18px 이상, 대비 AA 이상(본문 쌍 AAA). 색만으로 상태를 전하지 않는다("확인 중" 글자 병기).
- 포커스 링 3px, 즉시 표시. 키보드로 모든 버튼·링크 도달.
- 브라우저 글자 크기 200% 확대에서 가로 스크롤 없음(rem 기반).
- 표는 `<th scope>` 사용.

### Flutter 매핑 메모
```dart
// ColorScheme.light
primary: Color(0xFF2C5A4A), onPrimary: Color(0xFFFFFFFF),
secondary: Color(0xFF4F5852), onSecondary: Color(0xFFFFFFFF), // muted 잉크를 보조 액션에
tertiary: Color(0xFFA23B2A), onTertiary: Color(0xFFFFFFFF),   // accent(인장·새 글)
error: Color(0xFFA3302A), onError: Color(0xFFFFFFFF),
surface: Color(0xFFF2F3EE), onSurface: Color(0xFF1F2622),     // bg
surfaceContainerLowest: Color(0xFFFBFBF8),                     // surface(지면)
onSurfaceVariant: Color(0xFF4F5852), outline: Color(0xFFC5CBC3), outlineVariant: Color(0xFFC5CBC3),
// ColorScheme.dark
primary: 0xFF86BFA9, onPrimary: 0xFF10201A, tertiary: 0xFFE39482, error: 0xFFF08A7E,
surface: 0xFF161A18, onSurface: 0xFFE9ECE6, surfaceContainerLowest: 0xFF1F2421, outline: 0xFF3A423D
```
- 경고색은 ColorScheme에 슬롯이 없으므로 `ThemeExtension<ChurchColors>(warning: 0xFF8A5300 / dark 0xFFE2B35A)`.
- TextTheme: `displayLarge` 80/1.2 serif 700(모바일 48) · `headlineLarge` 38/1.3 · `headlineMedium` 30/1.4 · `titleLarge` 24/1.5 · `bodyLarge` 21/1.75(lead) · `bodyMedium` 18/1.8(기본 본문, Material 기본 14를 덮어쓴다) · `bodySmall`·`labelMedium` 16/1.6 Pretendard · `labelLarge` 18 Pretendard 700(버튼). Flutter `height`는 행간 배수 그대로(예: 1.8).
- 서체: `google_fonts` 패키지 대신 `assets/fonts/`에 Noto Serif KR·Pretendard를 넣어 오프라인 앱에서도 동일하게.
- Radius: `FilledButton` `RoundedRectangleBorder(4)`, `minimumSize: Size(0, 56)`. Card `elevation: 0`, `shape: RoundedRectangleBorder(0)`, 아래 테두리만 `outline`.

### 리스크
- 크림 바탕+명조는 생성형 디자인의 흔한 기본값과 가깝다. 바탕을 녹회색 재생지로, 강조를 테라코타 대신 소나무색으로 바꿔 거리를 두었지만, 실제 사진이 들어오기 전에는 "정갈하지만 흔한" 인상이 남을 수 있다.
- 명조 본문은 작은 화면·저해상도 안드로이드에서 획이 가늘어 보일 수 있다. 앱 본문을 Pretendard로 바꾸는 선택지를 열어 둔다.
- 학생 페르소나에게 다소 어른스럽다.