# DESIGN.md 후보 B: 마당

> 상태: **후보안(draft)**. 루트 `DESIGN.md`로 확정되기 전까지 구현에 쓰지 않는다.
> 형식: omd Core v2의 일곱 영역 순서를 따른 손글씨 초안. 확정 후 `omd:init`으로 컴파일한다.
> 출처 표기: 값은 모두 `agent-proposed-greenfield-decision`. Karrot(당근)의 "공동체 내용이 주인공, 크롬은 가볍게" 태도만 참고했고 색·서체 값은 옮기지 않았다(당근 주황과 겹치지 않도록 금잔화 노랑을 택함).

---

## 1. Experience

### 컨셉
6층 예배실 문을 열면 햇볕이 드는 **마당** 같은 곳. 흰 바탕에 금잔화 노랑 한 가지, 손으로 쓴 듯 둥근 고운돋움 제목, 넉넉한 둥근 모서리. 30명이 서로 이름을 아는 공동체의 다정함을 보여 주되, 유치하지 않게 크기와 여백으로 정돈한다. 새 방문자에게 "편하게 오셔도 된다"는 첫인상을, 학생에게는 딱딱하지 않은 앱을, 시니어에게는 큼직한 버튼을 준다.

### 1순위 사용자와 과업
| 페르소나 | 과업 | 이 안이 돕는 방식 |
|---|---|---|
| 새 방문자 | 처음 오셨나요 → 예배 시간·오시는 길 | 첫 화면 노란 버튼 하나가 확실한 입구 |
| 학생 | 소식·앨범·기도 | 둥근 서체와 밝은 면이 앱을 가볍게 만든다 |
| 시니어 교인 | 큰 버튼으로 주보 열기 | 바로가기 4개를 높이 88px 큰 타일로 |
| 일반 교인 | 소식·기도 확인 | 노랑은 "지금 할 일" 하나에만 써서 앱에서도 길잡이 |

### 원칙
1. 노랑은 "다음에 누를 것" 하나. 장식에 쓰지 않는다.
2. 둥근 것은 사람 쪽(버튼, 사진 자리), 곧은 것은 정보 쪽(표, 주소).
3. 크게, 적게. 한 화면에 할 일은 한두 개.

---

## 2. Foundations

### 색 토큰
| 역할 | 토큰 | 라이트 | 다크 | 용도 |
|---|---|---|---|---|
| 배경 | `bg` | `#FFFFFF` | `#171A20` | 페이지 바탕 |
| 표면 | `surface` | `#FFF5DB` | `#232733` | 바로가기·사진 자리·띠 바탕(볕 든 면) |
| 전경 | `fg` | `#1E2430` | `#F1F2F5` | 본문·제목 |
| 보조 전경 | `muted` | `#4B5363` | `#B3B9C5` | 설명·캡션 |
| 주색 | `primary` (금잔화) | `#F2B11B` | `#F5C24C` | 주 버튼 **바탕 전용**. 글자색으로 쓰지 않는다 |
| 주색 위 글자 | `onPrimary` | `#1E2430` | `#1E2430` | 주 버튼 글자 |
| 보조 | `secondary` (선·옅은 면) | `#E6DCC4` | `#363C4A` | 구분선, 보조 버튼 테두리 |
| 강조 | `accent` (하늘) | `#2F69A8` | `#8EBBEA` | 링크 글자, 포커스 링 |
| 경고 | `warning` | `#A8480A` | `#F5A262` | "확인 중" 표기 |
| 오류 | `error` | `#B8322A` | `#F28B82` | 폼 오류 |

대비(실측 계산): fg/bg 15.6:1, muted/bg 7.7:1, onPrimary/primary 8.2:1, accent/bg 5.7:1, warning/bg 5.8:1, fg/surface 14.3:1. 다크: fg/bg 15.6:1, primary/bg 10.5:1, accent/bg 8.7:1.
- 주의: 금잔화 `#F2B11B`는 흰 바탕 대비 1.9:1이라 **글자·아이콘·얇은 선으로 쓰면 안 된다.** 버튼 바탕으로만 쓰고, 버튼 식별은 진한 글자(8.2:1)가 맡는다.

### 간격 (4px 기반)
`4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96` (px, `space-1`~`space-9`)
- 묶음 안 `space-3~4`, 섹션 사이 `space-8~9`.

### Radius
`radius-1 8`(입력·표 바깥) · `radius-2 16`(바로가기 타일) · `radius-3 28`(사진 자리·큰 면) · `radius-pill 999`(버튼)
- 중첩 규칙: 안쪽 radius = 바깥 radius − 안쪽 여백. 카드 안 카드는 금지.

### 그림자
- `shadow-0`: 없음(기본, 면은 색으로 구분)
- `shadow-1`: `0 2px 0 #E6DCC4` (바로가기 타일의 바닥, 눌리는 느낌)
- `shadow-2`: `0 12px 32px rgba(30,36,48,0.12)` (앱 시트·다이얼로그만)

---

## 3. Typography & Assets

### 서체 (무료 웹폰트)
- **Gowun Dodum 고운돋움** (Google Fonts, SIL OFL): 제목 전용(400 한 굵기). 붓으로 쓴 듯 끝이 둥근 고딕.
- **Pretendard** (jsdelivr, SIL OFL): 본문·버튼·표. 400/600/700.
- 대체: `"Gowun Dodum", "Pretendard", sans-serif` / `"Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif`

### 스케일 (7단계)
| 단계 | 토큰 | px / 행간 | 서체·굵기 | 용도 |
|---|---|---|---|---|
| 1 | `caption` | 16 / 1.5 | Pretendard 400 | 캡션 |
| 2 | `body` | 18 / 1.7 | Pretendard 400 | 본문(최소) |
| 3 | `lead` | 20 / 1.65 | Pretendard 400 | 리드 |
| 4 | `h4` | 23 / 1.45 | Pretendard 700 | 타일 제목·소제목 |
| 5 | `h3` | 28 / 1.4 | Gowun Dodum 400 | 섹션 제목 |
| 6 | `h2` | 36 / 1.3 | Gowun Dodum 400 | 큰 제목 |
| 7 | `display` | 80 / 1.2 (모바일 52) | Gowun Dodum 400 | 첫 화면 환영 문구(짧게, 한 줄) |

- 고운돋움은 한 굵기뿐이므로 위계는 **크기**로 낸다. 제목을 가짜 굵게(faux bold) 만들지 않는다.
- 본문 단 최대 32em. 자간 기본값, 대문자 라벨 없음.

### 사진과 그림
- 사진 자리: `surface` 노란 면 위 `radius-3`의 둥근 창. 안에 아치형 창틀(네 칸), 창턱, 옅은 해(`#FDE7A8`, 주색 아님)를 CSS로만 그리고, "사진 자리: 함께 모인 사진(동의 후)" 캡션. 사람 모양 일러스트는 그리지 않는다.
- 실제 사진이 들어오면 같은 둥근 창 틀에 넣고 캡션·날짜를 단다.

---

## 4. Components & States

### 버튼
| 종류 | 모양 | 상태 |
|---|---|---|
| 주 버튼 | `primary` 바탕, `onPrimary` 글자, Pretendard 700 18px, 높이 56, 좌우 32, `radius-pill` | hover: `#E3A30F` · active: `#D19300` + 1px 내려앉음 · focus: 3px `accent` 링, 3px 간격 · disabled: `secondary` 바탕 + `muted` 글자 |
| 보조 버튼 | `bg` 바탕, 2px `fg` 테두리, `fg` 글자, pill | hover: `surface` 바탕 |

- 화면당 노란 버튼 1개. 화살표·이모지 붙이지 않는다.

### 바로가기 타일
- `surface` 바탕, `radius-2`, 높이 최소 88, `shadow-1`. 제목(h4) + 한 줄 설명(body muted). **아이콘 타일 없음** — 글자가 크고 분명하면 아이콘이 필요 없다.
- 2열(모바일 1열). hover: 바탕 `#FFEDBE`, focus: `accent` 링.

### 카드
- 독립된 대상(행사, 기도제목 하나)만 카드. 설명 문단은 카드에 넣지 않는다.

### 표
- 바깥 `radius-1`, 1px `secondary` 테두리, 머리행 `surface` 바탕 Pretendard 700. 행 높이 56. 세로선 없음.
- 미확정 값: `warning` 글자 "확인 중".

### 링크
- `accent` 글자 + 밑줄 1px, offset 0.2em. hover 2px.

### 상태
- 빈 상태: 고운돋움 한 줄 + 노란 버튼("첫 기도제목 올리기").
- 로딩: `surface` 둥근 막대, 고정(깜빡임 없음).
- 오류: `error` 글자 한 줄 + 다시 시도 버튼.

---

## 5. Layout & Platforms

- 컨테이너 최대 1120px. 첫 화면은 왼쪽 글(제목·문장·버튼) + 오른쪽 둥근 창(사진 자리). 모바일은 글 → 창 순서.
- 섹션 구분은 선이 아니라 **면**: 흰 바탕 섹션과 `surface` 띠를 번갈아 하나만 쓴다(오시는 길 띠).
- 브레이크포인트 600 / 960. 터치 타깃 56 이상.

### 모션
- 사용자 행동에만: 버튼 누름 120ms(`transform: translateY(1px)`), 타일 hover 배경 150ms `ease-out`, 시트 240ms `cubic-bezier(0.2,0,0,1)`.
- 페이지 진입 연출 없음. `prefers-reduced-motion: reduce`에서 전환 0ms.

---

## 6. Content & Locales

- 한국어 전용. 말투는 존댓말이되 조금 더 부드럽게("~해요"는 쓰지 않고 "~합니다/~하세요"를 유지하되 문장을 짧게).
- 확인되지 않은 사실은 "확인 중". 숫자 마커는 실제 순서에만.

### Do & Don't
| Do | Don't |
|---|---|
| 노랑은 주 버튼 바탕 하나 | 노랑 글자·노랑 아이콘·노랑 그라데이션 |
| 위계는 크기로(고운돋움 한 굵기) | 고운돋움 가짜 굵게, 고운돋움으로 본문 |
| 글자만으로 분명한 큰 타일 | 둥근 아이콘 타일 카드 반복, 이모지 아이콘 |
| 면 색으로 섹션 구분 | 보라-파랑 그라데이션, 반짝이 배경 |
| 사진 자리에 캡션 | 사람 일러스트·스톡 사진으로 공동체 흉내 |

---

## 7. Governance

### 접근성
- 본문 18px 이상, 모든 글자 쌍 AA 이상. 노랑은 글자로 쓰지 않음(1.9:1).
- 포커스 링 3px `accent`(라이트 5.7:1 / 다크 8.7:1), 즉시 표시.
- 터치 타깃 56. 200% 확대에서 가로 스크롤 없음.

### Flutter 매핑 메모
```dart
// ColorScheme.light
primary: Color(0xFFF2B11B), onPrimary: Color(0xFF1E2430),
secondary: Color(0xFF2F69A8), onSecondary: Color(0xFFFFFFFF), // accent(링크·포커스)
tertiary: Color(0xFF2F69A8),
error: Color(0xFFB8322A), onError: Color(0xFFFFFFFF),
surface: Color(0xFFFFFFFF), onSurface: Color(0xFF1E2430),
surfaceContainer: Color(0xFFFFF5DB),          // 볕 든 면(타일·띠)
onSurfaceVariant: Color(0xFF4B5363), outline: Color(0xFFE6DCC4),
// ColorScheme.dark
primary: 0xFFF5C24C, onPrimary: 0xFF1E2430, secondary: 0xFF8EBBEA, onSecondary: 0xFF0F1A28,
error: 0xFFF28B82, surface: 0xFF171A20, onSurface: 0xFFF1F2F5, surfaceContainer: 0xFF232733, outline: 0xFF363C4A
```
- 주의: Material 3는 `primary`를 글자색(TextButton, 선택된 탭 아이콘 등)에도 쓴다. 이 안에서 노랑은 글자에 쓸 수 없으므로 `TextButtonTheme`·`NavigationBarTheme`의 글자·아이콘 색을 `onSurface`/`secondary`로 덮어써야 한다. **이 덮어쓰기 부담이 B안의 가장 큰 구현 비용**이다.
- 경고색: `ThemeExtension<ChurchColors>(warning: 0xFFA8480A / dark 0xFFF5A262)`.
- TextTheme: `displayLarge` 80/1.2 Gowun Dodum(모바일 52) · `headlineLarge` 36/1.3 Gowun Dodum · `headlineMedium` 28/1.4 Gowun Dodum · `titleLarge` 23/1.45 Pretendard 700 · `bodyLarge` 20/1.65 · `bodyMedium` 18/1.7 · `bodySmall` 16/1.5 · `labelLarge` 18 Pretendard 700.
- Shape: `FilledButton` `StadiumBorder()`, `minimumSize: Size(0, 56)`. Card `RoundedRectangleBorder(16)`, `elevation: 0`.

### 리스크
- 둥글고 밝은 조합은 쉽게 "SaaS 앱 키트"나 아동용으로 흐른다. 아이콘 타일·카드 반복·그라데이션을 금지해 막았지만, 구현자가 규칙을 놓치면 가장 빨리 평범해지는 안이다.
- 노랑을 글자로 못 쓰는 제약이 Flutter Material 기본값과 부딪혀 테마 덮어쓰기가 많다.
- 고운돋움은 한 굵기뿐이라 앱의 촘촘한 화면(표·설정)에서 제목 위계가 약하다. 앱 내부 제목은 Pretendard 700으로 바꾸는 예외가 필요할 수 있다.