# 디자인 후보 3안 (DESIGN.md 후보)

루트 `DESIGN.md`를 정하기 전에 비교하려고 만든 후보입니다. 세 안 모두 같은 랜딩 내용(첫 화면, 바로가기 4개, 예배 안내 표, 오시는 길, 푸터)을 각자의 토큰으로 구현했습니다. 예배 시간은 "확인 중"이고, 사진은 아직 없어서 사진 자리로 두었습니다.

| 파일 | 내용 |
|---|---|
| `index.html` | 3안을 나란히 비교하는 갤러리(iframe, 팔레트 칩, 새 창 링크) |
| `A-jubo/` | A안 주보: `DESIGN.md`, `preview.html` |
| `B-madang/` | B안 마당: `DESIGN.md`, `preview.html` |
| `C-girok/` | C안 기록: `DESIGN.md`, `preview.html` |

로컬에서 보는 방법: `index.html`을 브라우저로 엽니다. 브라우저가 파일 iframe을 막으면 이 폴더에서 `python -m http.server 8770`을 실행하고 `http://localhost:8770/`을 엽니다. 운영체제를 다크 모드로 바꾸면 각 안의 다크 토큰이 적용됩니다.

## 1. 3안 비교

| | A안 주보 | B안 마당 | C안 기록 |
|---|---|---|---|
| 컨셉 | 매주 받는 종이 주보. 재생지 바탕, 소나무색 잉크 하나, 명조 본문, 예배 순서 지시선, 10주년 인장 | 볕 드는 마당. 흰 바탕, 금잔화 노랑 버튼 하나, 둥근 고운돋움 제목, 큰 둥근 바로가기 | 기록 보관함. 서늘한 흰 바탕, 청색 잉크 하나, 표와 색인 목록, 연도별 밀착 인화지 |
| 팔레트(라이트) | 배경 `#F2F3EE` 전경 `#1F2622` 주색 `#2C5A4A` 선 `#C5CBC3` 강조 `#A23B2A` | 배경 `#FFFFFF` 전경 `#1E2430` 주색 `#F2B11B` 면 `#FFF5DB` 강조 `#2F69A8` | 배경 `#F6F7F5` 전경 `#17191C` 주색 `#1F4D7A` 선 `#D9DCE0` 강조 `#A9501C` |
| 팔레트(다크) | `#161A18` / `#E9ECE6` / `#86BFA9` | `#171A20` / `#F1F2F5` / `#F5C24C` | `#121417` / `#ECEEF0` / `#8FB6DE` |
| 서체 | Noto Serif KR(제목·본문) + Pretendard(버튼·표 머리) | Gowun Dodum(제목) + Pretendard(본문) | IBM Plex Sans KR 한 가족 |
| 본문 / 첫 화면 제목 | 18px/1.8 명조 · 80px | 18px/1.7 · 80px | 18px/1.75 · 88px |
| 본문 대비 | 13.9:1 | 15.6:1 | 16.4:1 |
| 어울리는 페르소나 | 시니어 교인, 일반 교인(주보) | 새 방문자, 학생 | 일반 교인(앨범 찾기), 행정 담당자 |
| Flutter 이식 | 쉬움. 명조 서체 파일 용량과 안드로이드 렌더링 확인 필요 | 어려움. 노랑을 글자로 못 써서 Material의 primary 글자색을 여러 곳 덮어써야 함 | 가장 쉬움. Material 3 의미 체계와 거의 그대로 맞음 |
| 리스크 | 종이+세리프는 흔한 기본값과 가깝다(녹회색 종이·소나무색으로 거리 둠). 학생에게 어른스럽다 | 둥글고 밝은 조합은 규칙을 놓치면 가장 빨리 평범한 앱 키트나 아동용으로 흐른다 | 사진이 늦게 들어오면 가장 휑하고 차가워 보인다. 새 방문자 첫인상의 따뜻함이 가장 약하다 |

## 2. 추천: A안 주보

1. 1순위가 교인 내부 사용이고 시니어 가독성이 중요하다. 명조 18px, 행간 1.8, 본문 대비 AAA(13.9:1)인 A안이 "늘 보던 주보"처럼 가장 편하게 읽힌다.
2. 주보 게시(G3)는 매주 반복되는 핵심 기능이다. 지시선 목록, 지면, 인장 같은 주보 문법을 앱의 주보, 소식, 예배 순서 화면에 그대로 다시 쓸 수 있다.
3. 사진이 없어도 완성돼 보인다. 재단선이 그어진 사진 자리와 10주년 인장이 빈자리를 채워서, 사진이 늦어져도 C안처럼 휑해지지 않는다.

보완할 점: 앱의 촘촘한 화면(설정, 표, 메신저)에서는 본문을 Pretendard로 바꾸는 예외를 확정 단계에서 정합니다. C안의 연도별 인화지 격자는 A안 토큰으로 "10년의 기록" 화면에 빌려 올 만합니다.

## 3. 선택 후 다음 단계

1. **루트 DESIGN.md 확정.** 고른 안의 `DESIGN.md`를 기준으로 `omd:init`을 실행해 Core v2 패키지(`DESIGN.md` + `.omd/system/*`)로 컴파일합니다. 담임목사와 박정민(화면)이 확인합니다.
2. **랜딩 다시 만들기.** `landing/index.html`에 토큰을 적용합니다. 웹폰트를 쓰려면 `landing/_headers` CSP에 `style-src https://fonts.googleapis.com https://cdn.jsdelivr.net`와 `font-src https://fonts.gstatic.com https://cdn.jsdelivr.net`를 추가하거나, 폰트 파일을 `landing/`에 직접 두어야 합니다(지금 CSP는 `default-src 'none'`). 인장 같은 SVG 이미지는 `img-src data:`가 필요합니다.
3. **Flutter 테마 만들기.** 각 `DESIGN.md` 7장의 "Flutter 매핑 메모"대로 `ThemeData`(ColorScheme, TextTheme, `ThemeExtension<ChurchColors>`의 경고색)를 만들고, 서체 파일은 `app/assets/fonts/`에 둡니다.

## 4. 자체 검수

### 4.1 omd:restraint (실측)

`omd-restraint/scripts/audit.mjs`를 1440×900과 390×844에서 실행한 결과입니다(헤드리스 Chromium, 2026-10-25). 첫 측정에서 세 안 모두 FAIL이 있었고, 2라운드 수정 뒤 아래와 같습니다.

| 규칙 | 등급 | A안 | B안 | C안 |
|---|---|---|---|---|
| R1 초점 하나(1등 ≥ 2등의 2배) | M | PASS 3.75 / 3.63 | PASS 6.13 / 4.31 | PASS |
| R2 첫 화면 조각 ≤ 5 | C | PASS 5 / 5 | PASS 4 / 4 | PASS 4 / 3 |
| R3 첫 화면 서체 크기 ≤ 4, 페이지 ≤ 6 | C/H | PASS 4, 6 | PASS 4, 6 | PASS 4, 6 |
| R3 제목 : 본문 ≥ 4 (폰 ≥ 2.5) | M/H | PASS 4.4 / 2.7 | PASS 4.4 / 2.9 | PASS 5.5 / 3.5 |
| R4 제목 ≤ 2줄, 리드 ≤ 2줄, 첫 화면 단어 ≤ 60 | C/H | PASS 1줄, 2줄, 32 | PASS 1줄, 2줄, 30 | PASS 1줄, 2줄, 44 |
| R5 첫 화면 CTA ≤ 2 | C | PASS 2 | PASS 2 | PASS 2 |
| R6 첫 화면 숫자 ≤ 3 | H | PASS 0 | PASS 0 | **FAIL 12 / 9 (예외 처리)** |
| R7 액센트 색 ≤ 1 | C | PASS 0 | PASS 1 | PASS 1 |
| R8 테두리 요소 ≤ 3, 장식 격자 0 | H/C | PASS 2 | PASS 1 | PASS 3 |
| R9 eyebrow, 작은 대문자 라벨 0 | C | PASS | PASS | PASS |
| R10 같은 사실 반복 | H | PASS | PASS | PASS |
| R11 첫 화면 빈 면적 ≥ 65%, 빈 띠 ≥ 0.25vh | H/C | PASS 90%, 0.27 | PASS 92%, 0.32 | PASS 84%, 0.34 |
| R12 얇은 화면 ≤ 1 | C | PASS 0 | PASS 0 | PASS 0 |
| R13 길이 ≤ 6화면 (폰 ≤ 9) | H | PASS 2.7 / 3.2 | PASS 3.0 / 3.3 | PASS 2.9 / 3.6 |

C안 R6 예외 사유: 숫자는 2017~2027 연도 칸 이름이며, 실제 순서(연혁)라서 연도 없이는 정보가 사라진다. 이 격자가 C안의 대표 요소다. 등급 H라 사유를 적고 남겼다.

수정 기록(R15: 삭제와 확대가 추가보다 많아야 함)

| 대상 | 규칙 | 조치 | 그 자리에서 커진 것 |
|---|---|---|---|
| 제목 "어서 오세요, 주의나라교회입니다" | R3 비율, R4 | "어서 오세요"로 줄임(교회 이름은 머리 글자와 리드에 있음) | 제목 52~64px에서 80~88px로, 한 줄 |
| 리드 두 문장 | R4 리드 3줄(폰) | 한 문장으로 줄임. "2027년 10주년"은 바로가기 "10년의 기록" 설명으로 옮김 | 리드가 폰에서 2줄 |
| 첫 화면에 보이던 바로가기 목록 | R2, R5 | 첫 화면 아래로 내림 | 첫 화면의 빈 띠(호흡) |
| A안 인장 속 SVG 글자 | R3, R6 | 인장을 로고 이미지(`img`, 라이트·다크 2벌)로 바꿈 | 없음(같은 모양 유지) |
| C안 인화지 칸 11개의 테두리 | R8 16개 | 테두리를 없애고 색 면으로. 2027 칸만 점선 | 격자가 4열에서 3열로 커져 첫 화면의 초점이 됨 |
| C안 2027 칸의 강조색 | R7 액센트 2개 | 강조색 제거(점선으로 "아직 오지 않은 해" 표시) | 없음 |
| C안 표와 목록 | R12 얇은 화면 2개 | 흰 지면(`surface`) 위에 올림 | 2~3화면의 채움 |
| 폰의 전체 폭 버튼 | R1 폰 | 내용 폭 버튼으로 | 폰 첫 화면에서 제목이 초점 |

### 4.2 omd:slop-audit (정적 검사 + 렌더 확인)

1440·390px 전체 화면 캡처(라이트, 데스크톱 다크)와 코드를 함께 봤습니다. 가로 스크롤은 세 안 모두 없습니다(scrollWidth = 뷰포트).

| 규칙 ID | 항목 | A안 | B안 | C안 | 수정 여부 |
|---|---|---|---|---|---|
| LAYOUT-01 | 모든 섹션이 가운데 제목, 짧은 글, CTA | PASS | PASS | PASS | 모두 왼쪽 정렬 |
| LAYOUT-02 | 독립 개체가 아닌 것까지 같은 카드 반복 | PASS(지시선 목록) | PASS(바로가기 4개만 타일, 실제 갈 곳 단위) | PASS(색인 목록) | 없음 |
| LAYOUT-03 | 카드 안 카드 | PASS | PASS | PASS | 없음 |
| LAYOUT-04 | 순서가 아닌 01/02/03 표식 | PASS | PASS | PASS(연도는 실제 순서) | 없음 |
| VISUAL-02 | 제목마다 둥근 아이콘 타일 | PASS(아이콘 없음) | PASS | PASS | 없음 |
| VISUAL-03 | 모든 컨테이너에 같은 큰 radius | PASS(0/4/8) | PASS(8/16/28/pill 위계) | PASS(2/6) | 없음 |
| VISUAL-04 | 테두리 + 넓은 그림자 + glow 중첩 | PASS | PASS | PASS | 없음 |
| VISUAL-05 | 보라-파랑 그라데이션, blur orb, 그라데이션 글자 | PASS | PASS | PASS | 없음 |
| VISUAL-06 | 장식이 실제 콘텐츠를 대신함 | PASS(사진 자리라고 캡션으로 밝힘) | PASS(캡션) | PASS(캡션) | 없음 |
| TYPE-01 | 제목과 본문 크기 차이 부족 | PASS | PASS | PASS | 제목 확대(4.1 표) |
| TYPE-02 | 섹션마다 eyebrow, 전체 대문자 라벨 | PASS | PASS | PASS | 없음 |
| TYPE-03 | 한국어 줄바꿈 | PASS | PASS | PASS | `word-break: keep-all` 추가(A안 폰에서 "6 / 층"이 끊기던 것 수정) |
| COLOR-01/02 | 의미 없는 색, 강조·상태 구분 없음 | PASS | PASS(노랑은 버튼 바탕만, 해 모양은 옅은 색으로 바꿈) | PASS | B안 해 모양을 주색에서 옅은 색으로 |
| COMP-02 | 같은 CTA 반복 | PASS | PASS | PASS | 첫 화면 "이번 주 주보"와 바로가기가 겹치지 않게 구성 |
| MOTION-01/02 | 모든 요소 등장 연출, reduced-motion 누락 | PASS(hover 전환만, reduced-motion 0ms) | PASS | PASS | 없음 |
| COPY-01 | 근거 없는 찬사 | PASS | PASS | PASS | 없음 |
| EVIDENCE-01 | 원문에 없는 사실 추가 | PASS | PASS | PASS | 표의 "6층 예배실"을 "6층"으로(예배실 명칭 미확인) |
| STATE-01 | 빈·로딩·오류 상태 | FYI | FYI | FYI | 정적 시안이라 미리보기에는 없음. 각 DESIGN.md 4장에 규칙만 정의 |
| 브리프 | 어두운 영상 히어로, 영문 메뉴, 단어 하나 강조 제목, 화살표 붙은 링크, 가운뎃점 메타 | PASS | PASS | PASS | 없음 |
| QUALITY | 포커스 표시, 터치 타깃 48+, 본문 18px+, 대비 AA | PASS | PASS | PASS | 없음 |

### 4.3 HTML 파싱

Python `html.parser`로 4개 HTML(`index.html`, 세 `preview.html`)을 파싱해 태그 짝 오류와 닫히지 않은 요소를 확인했습니다. 4개 모두 오류가 없습니다.

### 4.4 남은 한계

- 웹폰트 로드를 포함해 렌더 확인은 했지만, 실제 시니어 교인에게 보여 주는 사용성 확인은 아직 하지 않았습니다.
- 대비 수치는 토큰 쌍을 계산한 값입니다. 실제 사진이 들어오면 사진 위 글자는 다시 확인해야 합니다.
- 각 DESIGN.md는 Core v2 일곱 영역 순서를 따른 손글씨 초안이며, 컴파일된 Core v2 패키지는 아닙니다.