# DESIGN.md 후보 C: 기록

> 상태: **후보안(draft)**. 루트 `DESIGN.md`로 확정되기 전까지 구현에 쓰지 않는다.
> 형식: omd Core v2의 일곱 영역 순서를 따른 손글씨 초안. 확정 후 `omd:init`으로 컴파일한다.
> 출처 표기: 값은 모두 `agent-proposed-greenfield-decision`. GOV.UK(누구나 읽히는 공공 정보 문법, 분명한 포커스)와 MUJI(색 하나, 여백이 재료)의 태도만 참고했다. 값·서체·로고는 옮기지 않았다.

---

## 1. Experience

### 컨셉
10주년 프로젝트의 핵심은 **흩어진 10년을 한곳에 정리하는 일**이다. C안은 교회를 기록 보관함처럼 다룬다. 서늘한 흰 바탕, 먹빛 글자, 청색 잉크 하나, 표와 연도가 정돈된 목록. 사진 자리는 연도별 **밀착 인화지(contact sheet)** 칸으로 두어, 사진이 들어올수록 페이지가 채워지는 구조다. 첫 화면에서부터 "2017년부터 2027년까지"라는 실제 시간 축을 보여 준다. 감정 대신 **정확함**으로 신뢰를 준다.

### 1순위 사용자와 과업
| 페르소나 | 과업 | 이 안이 돕는 방식 |
|---|---|---|
| 일반 교인 | 연도 필터로 옛 수련회 앨범 찾기 | 연도 축이 전체 정보 구조의 뼈대 |
| 행정 담당자 | 주보 게시·회의록 | 표·목록 중심 컴포넌트가 관리 화면과 그대로 이어짐 |
| 새 방문자 | 예배 시간·오시는 길 | 공공 안내판처럼 분명한 표와 주소 |
| 시니어 교인 | 큰 글씨 열람 | 본문 18px, 높은 대비(16:1), 장식 없는 화면 |

### 원칙
1. 시간이 구조다. 연도·날짜가 있는 곳에서만 숫자를 크게 쓴다.
2. 선은 정보를 나눌 때만. 표·목록 구분선 외의 장식선은 없다.
3. 청색은 누를 수 있는 것. 그 외에는 먹과 회색뿐.

---

## 2. Foundations

### 색 토큰
| 역할 | 토큰 | 라이트 | 다크 | 용도 |
|---|---|---|---|---|
| 배경 | `bg` | `#F6F7F5` | `#121417` | 페이지 바탕(서늘한 흰색) |
| 표면 | `surface` | `#FFFFFF` | `#1B1E22` | 표·인화지 칸 |
| 전경 | `fg` | `#17191C` | `#ECEEF0` | 먹빛 글자 |
| 보조 전경 | `muted` | `#545B64` | `#A3AAB3` | 메타·캡션 |
| 주색 | `primary` (청색 잉크) | `#1F4D7A` | `#8FB6DE` | 버튼·링크·현재 연도 |
| 주색 위 글자 | `onPrimary` | `#FFFFFF` | `#0E1A26` | |
| 보조 | `secondary` (선) | `#D9DCE0` | `#2E333A` | 표·목록 구분선, 인화지 칸 테두리 |
| 강조 | `accent` (색인 표) | `#A9501C` | `#E8A070` | 앱의 "새 글"·10주년 기념 페이지 표시. **화면당 한 곳, 랜딩 첫 화면에는 쓰지 않음**(restraint R7) |
| 경고 | `warning` | `#865700` | `#E6B656` | "확인 중" |
| 오류 | `error` | `#B3261E` | `#F2928A` | 폼 오류 |

대비(실측 계산): fg/bg 16.4:1, muted/bg 6.4:1, primary/bg 8.1:1, onPrimary/primary 8.8:1, accent/bg 5.1:1, warning/bg 5.8:1. 다크: fg/bg 15.9:1, primary/bg 8.7:1.

### 간격 (8px 기반, 표 리듬에 맞춤)
`4 / 8 / 16 / 24 / 32 / 40 / 56 / 80 / 120` (px, `space-1`~`space-9`)
- 표 행 높이 56 = `space-7`. 섹션 사이 `space-8~9`.

### Radius
`radius-0 0`(표·목록) · `radius-1 2`(인화지 칸) · `radius-2 6`(버튼·입력) · `radius-3 10`(앱 시트)
- 작고 일정하게. 크게 둥근 모서리는 쓰지 않는다.

### 그림자
- 기본 없음. 높이는 선과 표면 색 차이로 낸다.
- `shadow-1`: `0 1px 2px rgba(23,25,28,0.08)` (떠 있는 인화지 칸 hover)
- `shadow-2`: `0 16px 40px rgba(23,25,28,0.14)` (앱 시트·다이얼로그)

---

## 3. Typography & Assets

### 서체 (무료 웹폰트)
- **IBM Plex Sans KR** (Google Fonts, SIL OFL): 제목·본문 한 가족. 400/500/600/700. 획이 곧고 숫자가 분명해 연도·시간 표에 맞는다.
- 대체: `"IBM Plex Sans KR", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif`
- 한 가족만 쓴다. 고정폭(mono) 라벨 없음.

### 스케일 (7단계)
| 단계 | 토큰 | px / 행간 | 굵기 | 용도 |
|---|---|---|---|---|
| 1 | `caption` | 16 / 1.5 | 400 | 캡션·메타 |
| 2 | `body` | 18 / 1.75 | 400 | 본문(최소) |
| 3 | `lead` | 21 / 1.6 | 400 | 리드 |
| 4 | `h4` | 22 / 1.45 | 600 | 목록 제목 |
| 5 | `h3` | 28 / 1.35 | 600 | 섹션 제목 |
| 6 | `h2` | 40 / 1.2 | 700 | 큰 제목 |
| 7 | `display` | 88 / 1.1 (모바일 56) | 700, 자간 −0.02em | 첫 화면 환영 문구(짧게, 한 줄) |

- 연도·시간·날짜: `font-variant-numeric: tabular-nums`.
- 본문 단 최대 36em. 대문자·자간 벌린 라벨 없음.

### 사진과 그림
- 사진 자리 = **밀착 인화지**: 연도 칸(2017~2027) 3열 격자. 빈 칸은 `secondary` 색 면 + 연도 캡션, 안쪽은 비워 둔다(가짜 사진 금지). 2027 칸(아직 오지 않은 해)만 2px `fg` 점선 테두리. 테두리를 칸마다 두르지 않는다(omd:restraint R8).
- 사진이 들어오면 칸에 4:3으로 채우고 캡션(행사명·날짜)을 아래 붙인다.
- 연도 격자는 실제 순서(연혁)이므로 숫자 사용이 정당하다.

---

## 4. Components & States

### 버튼
| 종류 | 모양 | 상태 |
|---|---|---|
| 주 버튼 | `primary` 바탕, `onPrimary` 글자, 600 18px, 높이 56, 좌우 28, `radius-2` | hover `#173D62` · active `#112F4C` · focus: 3px `fg` 외곽선 + 2px 바탕 간격 · disabled `secondary` 바탕 + `muted` 글자 |
| 보조 버튼 | `surface` 바탕, 1px `fg` 테두리, `fg` 글자 | hover: `bg` 바탕 |

### 목록(바로가기)
- 카드 대신 **색인 목록**: 행마다 제목(h4) + 설명(muted) + 오른쪽 끝 갈 곳 이름(예: "교회 앱"). 행 사이 1px `secondary` 선, 행 높이 최소 72. 행 전체가 링크, hover 때 바탕 `surface`.
- 화살표 기호는 붙이지 않는다.

### 표
- 머리행: 600 16px `muted`, 아래 1px `fg` 선. 본문 18px, 행 사이 1px `secondary`. 숫자 열 tabular-nums, 왼쪽 정렬.
- 미확정 값: `warning` 글자 "확인 중".

### 링크
- `primary` 글자 + 밑줄 1px(offset 0.18em). hover 2px. 방문 후에도 같은 색.

### 상태
- 빈 상태: "2019년에 올라온 사진이 아직 없습니다." + "사진 올리기"(권한 있는 사람에게만).
- 로딩: 칸 모양 회색 면, 고정.
- 오류: `error` 글자 한 줄 + 복구 동작.

---

## 5. Layout & Platforms

- 컨테이너 최대 1120px, 12열 격자(간격 24). 첫 화면: 제목·문장·버튼이 왼쪽 6열, 오른쪽 6열에 연도 인화지 격자(초점). 모바일은 글 → 격자(3열).
- 모든 글은 왼쪽 정렬. 가운데 정렬 제목 없음.
- 브레이크포인트 600 / 960 / 1280. 터치 타깃 48 이상(기본 56).

### 모션
- 사용자 행동에만: hover 바탕 120ms `linear`, 시트 200ms `cubic-bezier(0.2,0,0,1)`.
- 진입 연출 없음. `prefers-reduced-motion: reduce`에서 전환 0ms.

---

## 6. Content & Locales

- 한국어 전용. 공공 안내문처럼 짧고 사실적인 문장. 형용사 최소.
- 날짜는 `2027년 3월 7일` 형식, 시간은 `오전 11시`. 확인되지 않은 사실은 "확인 중".

### Do & Don't
| Do | Don't |
|---|---|
| 연도·날짜는 크게, 정렬된 숫자로 | 연도와 관계없는 통계 숫자 타일 |
| 선은 표·목록 구분에만 | 장식 격자 배경, 신문식 빽빽한 다단 |
| 청색 한 가지 = 누를 수 있는 것 | 청색 그라데이션, 보라-파랑 조합 |
| 빈 인화지 칸에 연도 캡션 | 가짜 사진·흐린 스톡 이미지 |
| 고딕 한 가족 | 고정폭 서체 라벨, 영문 대문자 라벨 |

---

## 7. Governance

### 접근성
- 본문 18px 이상, 본문 대비 16:1. 모든 쌍 AA 이상.
- 포커스: 3px `fg` 외곽선 + 2px 바탕 간격(어떤 바탕에서도 보인다).
- 표 `<th scope>`, 연도 격자는 `<ol>`로 순서를 의미적으로 표현.

### Flutter 매핑 메모
```dart
// ColorScheme.light
primary: Color(0xFF1F4D7A), onPrimary: Color(0xFFFFFFFF),
secondary: Color(0xFF545B64), onSecondary: Color(0xFFFFFFFF),
tertiary: Color(0xFFA9501C), onTertiary: Color(0xFFFFFFFF),   // accent(10주년 표시)
error: Color(0xFFB3261E), onError: Color(0xFFFFFFFF),
surface: Color(0xFFF6F7F5), onSurface: Color(0xFF17191C),
surfaceContainerLowest: Color(0xFFFFFFFF),
onSurfaceVariant: Color(0xFF545B64), outline: Color(0xFF17191C), outlineVariant: Color(0xFFD9DCE0),
// ColorScheme.dark
primary: 0xFF8FB6DE, onPrimary: 0xFF0E1A26, tertiary: 0xFFE8A070, error: 0xFFF2928A,
surface: 0xFF121417, onSurface: 0xFFECEEF0, surfaceContainerLowest: 0xFF1B1E22, outlineVariant: 0xFF2E333A
```
- Material 3 기본 의미(primary = 행동, outlineVariant = 구분선)와 거의 그대로 맞물려 덮어쓰기가 가장 적다.
- 경고색: `ThemeExtension<ChurchColors>(warning: 0xFF865700 / dark 0xFFE6B656)`.
- TextTheme(IBM Plex Sans KR 한 가족): `displayLarge` 88/1.1 w700 letterSpacing −1.76(모바일 56) · `headlineLarge` 40/1.2 w700 · `headlineMedium` 28/1.35 w600 · `titleLarge` 22/1.45 w600 · `bodyLarge` 21/1.6 · `bodyMedium` 18/1.75 · `bodySmall` 16/1.5 · `labelLarge` 18 w600. 숫자 위젯에 `FontFeature.tabularFigures()`.
- Shape: `FilledButton` `RoundedRectangleBorder(6)`, `minimumSize: Size(0, 56)`. `DataTable` 기본 구분선을 `outlineVariant`로. `ListTile` 목록 + `Divider`가 바로가기 목록과 같은 문법.

### 리스크
- 절제가 지나치면 "관공서 같다", "차갑다"는 반응이 나올 수 있다. 작은 공동체의 다정함은 사진과 글이 들어와야 생긴다. 사진 자산이 늦어지면 가장 휑해 보이는 안.
- 얇은 선과 작은 radius는 신문형 레이아웃 기본값과 가깝다. 다단 빽빽함을 금지하고 본문 단을 넓게 두어 거리를 둔다.
- 새 방문자 대상 첫인상의 따뜻함은 세 안 중 가장 약하다.