designpaca/apps/site/public/work/hyang-incense/design.md

# design.md — 향연 (hyang-incense)

## 진행 상태

- 0 현행 감사 완료 (2026-10-06) · 1 레퍼런스 R1·R3 실측, R2 부분 · 2 카드 3장, A 선택(위임) · 3 토큰 확정 · 4 구현 완료 · 5 감사 통과 · 6 이 문서.
- 다음 작업은 "검증" 절의 미검증 목록부터 본다.

## 브리프

```
무엇을:  삼청동 자연 침향 전문점 "향연"의 한 장짜리 소개 페이지 리디자인 (쇼케이스, 가상 브랜드)
누구에게: 침향을 사려는 손님. 기록(입고 연도·산지·수지 함량)과 가격을 읽고 시향 방문 시간을 확인한다
제약:    정적 HTML/CSS, JS 없음 · 기존 사실·수치·이미지 2장 유지 · 기본 언어 ko-KR(기존 로컬라이제이션)
         · 배정값(outputs/rework-2026-10-06/plan.md hyang-incense 행)이 브리프 제약
```

확정 슬롯(기존 파일 + 배정표, 사용자 위임): 목표 행동 하나 = 시향 방문 안내 읽기. 톤 = 조용하고 사실적. 화면 1개(index.html).

## 미확정

- 가격·수지 함량·연도는 기존 쇼케이스의 예시값이다(실제 값 아님). 푸터 고지 한 줄이 범위를 소유한다.
- 매장 주소·전화는 기존 페이지에도 없어 싣지 않았다(지어내지 않는다).

## 레퍼런스

| 슬롯 | 출처 | 실측(2026-10-06, Playwright 1440×900) | 가져온 것 |
|---|---|---|---|
| R1 구조 | APFR 제품 페이지 https://www.apothekefragrance.com/products/incense-sticks/ | body 배경 rgb(238,228,212) 단색. 제품 누끼 507×507이 x=467, y=152 중앙. 제목은 좌상단 작게, 행동 "Shop Now →" 하나가 우상단(y=162). 설명 문단은 제품 아래 y≈740, 폭 500 | 제품 단독 히어로의 실제 비례: 제품 가운데, 글은 작게 가장자리, 행동 하나 우상단 |
| R1' 격자 | APFR https://www.apothekefragrance.com/products/ | 누끼 256×256 타일, 이름 16px 아래 | 누끼 + 단색 배경 처리의 실제 사례 |
| R2 톤 | hibi https://hibi-jp.com/ | 배경 rgb(220,221,221) 무채 밝음, `<nav>` 없음(로고 + 스토어 버튼 + 텍스트 링크 행), 본문 Noto Serif KR | 내비 없는 브랜드 바(브랜드 + 행동) |
| R3 디테일 | svg-filters.md R5(잉크) + motion-parallax.md §9 | feTurbulence→feDisplacementMap→blur, 최상단 요소는 `scroll(root block)` | 연기 재질과 스크롤 구동 마스크 |
| 미검증 | 큰 워드마크 한 줄 푸터의 실제 사례 — studiofreight.com·lusion.co·oimu-seoul.com을 열었으나 해당 형태가 아니었다. soohyang.com은 도메인 판매 페이지 | layout.md §2-d 표를 근거로 썼다 |

## 방향

**지문**: 제품 단독(돌 받침 위 향 한 자루 누끼, 단색 배경, 연기가 위로) · Gowun Batang / Noto Sans KR · 바탕 #e6e1ea 회보라 · 강조 #b62752(LCh 10.7°) · radius 2px · 흐름 제품 → 절편 누끼 + 글 → 기록 표 + 가격 목록 → 시향 안내 → 워드마크 푸터 · 내비 없음(브랜드 + 행동 링크 하나) · 푸터 큰 워드마크 한 줄 + 고지 · 이미지 CSS 누끼 2장(multiply + 타원 마스크), 캡션 아래 가운데 · 모션 scroll-driven 연기 마스크 이동 1곳, 감소 모션은 정지.

**컨셉**: 침향을 찾는 손님이 돌 받침에 꽂힌 향 한 자루와 연기를 보고, 입고 연도·수지 함량 기록을 읽은 뒤 시향 시간을 확인한다.

**프리셋**: quiet-commerce 지배(사양이 설득하는 B2C) + 재질 축만 svg-filters 잉크 레시피(연기). 유리·그레인은 쓰지 않는다.

**표현 리스크**: 연기 SVG 필터(feTurbulence+feDisplacementMap) — 제품이 "타고 있는 향"임을 보이는 과업 근거. 검증: 필터 끈 캡처(`final-filter-off-hero.png`)에서도 S자 선으로 성립, 글자에는 필터를 걸지 않음.

**카드(배정 제약 안, 위임으로 A 선택)**

```
A. 돌 위의 한 자루                 B. 포스터 한 장                     C. 절편이 먼저
+------------------------+       +------------------------+       +------------------------+
| 향연        시향 방문 → |       | 향연  사실 셋     시향 → |       | 향연        시향 방문 → |
|        (연기)          |       |              (연기)     |       |  [침향 절편 누끼 전폭]   |
|      [향+돌 누끼]       |       |            [향+돌 누끼]  |       |                        |
| 자연 침향    사실 셋     |       | 자  연  침  향 (전폭 하단)|       | 자연 침향 절편  180,000원|
+------------------------+       +------------------------+       +------------------------+
| 절편 누끼 + 글           |       | 기록 표(먼저)            |       | 가격·기록(합침)          |
| 기록 표 + 가격 목록       |       | 절편 누끼 + 글           |       | 절편 설명                |
| 시향 안내                |       | 가격 목록 · 시향 안내     |       | 시향 안내(향로 + 연기)    |
| [향연 워드마크]           |       | [향연 워드마크]           |       | [향연 워드마크]           |
+------------------------+       +------------------------+       +------------------------+
```

| 항목 | A. 돌 위의 한 자루 | B. 포스터 한 장 | C. 절편이 먼저 |
|---|---|---|---|
| 한 줄 컨셉 | 손님이 타는 향 한 자루를 보고 기록을 읽은 뒤 시향 시간을 확인한다 | 손님이 전폭 표제가 받치는 제품 포스터를 보고 기록 표부터 읽는다 | 손님이 실제 판매 상품(절편)의 생김새와 가격을 먼저 보고 시향에서 향로를 본다 |
| 타입 페어 | Gowun Batang 144px / Noto Sans KR 17px(8.5배) | Gowun Batang 전폭 자간 벌림 / Noto Sans KR | Gowun Batang 96px / Noto Sans KR |
| 색 | #e6e1ea / #2a2530 / #b62752(링크·행동·숙성 중) | 같음, 표제 뒤 #ddd7e2 띠 | 같음 |
| 모션 | 연기 마스크 스크롤 이동 | 같음 | 시향 섹션에서만 연기 |
| 레퍼런스 | R1 APFR(제품 중앙·행동 우상단·설명 아래), R2 hibi | R1 APFR | R1' APFR 격자 |
| 히어로 첫 문장 | "자연 침향" + 사실 셋(삼청동 2001년부터 / 기록을 적어 팝니다 / 시향 요일·횟수) | "자연 침향" + 사실 셋을 위로 | "자연 침향 절편" + "2001년 입고, 수지 64.2%, 10g, 180,000원" |
| 포기하는 것 | 첫 화면에 가격이 없다 | 전폭 표제는 390에서 세 줄이 되어 "한 줄 큰 낱말" 배정을 깬다 | 배정된 "향·향로"와 연기 모션이 첫 화면에서 빠진다 |

**고른 이유(위임)**: A — 배정이 "향·향로 누끼 + scroll-driven 연기"이고 R1 APFR이 제품 중앙·행동 우상단·설명 아래 구조를 실측으로 보여 줬다. B는 390에서 한 줄 표제 배정을 깨고, C는 연기·향로를 첫 화면에서 잃는다.

**반사실 점검**: 고유 요소 — 돌 받침 위 향 사진 자체, "삼청동, 2001년부터", 연기. 같은 업종 치환(다른 침향 가게): h1 "자연 침향"은 살아남지만 사진·사실 셋·연기 출발점이 바뀌어야 한다. 다른 업종(세무사무소): 제품 단독 히어로·연기·기록 표가 전부 쓸모없다 → 통과. 페이지 수렴 6축 대조(05 계측 군집): 섹션 흐름·글 묶음(라벨 없음·한 줄·사실 목록·버튼 없음)·내비(없음)·푸터(워드마크)·이미지(누끼)·모션(스크롤 마스크) 전부 다름.

**보존 자산**: 상호 향연, 사실·수치 전부(2001·2012·2024, 64.2/51.8/47.3%, 가격 3종, 시향 시간·인원), 이미지 2장, 앵커 id `wood`·`aging`·`collection`·`visit`·`main`, 스킵 링크, 가상 고지 1회.

## 토큰과 예산

값은 `styles/tokens.css`. 역할: 바탕 회보라 2단계(표 패널만 raised), 먹 2단계, 불씨 1 + 짙은 불씨(hover·작은 글자). 강조 hue는 similarity.mjs의 CIELAB LCh 기준 10.7°(sRGB HSL로는 338°) — 배정표의 각도가 그 도구 기준이라 맞췄다. radius 2px는 표 패널 한 곳.

폰트: Gowun Batang은 표제·워드마크·연도·상품명·가격의 59자만 `text=`로 싣는다(11KB). 글자를 바꾸면 outputs/rework-2026-10-06/hyang-incense.md "폰트 서브셋" 절의 스크립트로 `text=` 목록을 다시 만든다. Noto Sans KR 400 한 웨이트(123KB, 13슬라이스). 웨이트는 패밀리당 하나 — 굵기 대신 색·크기로 구분한다.

| 예산(tokens §5) | 기본 | 실측(1440, 2026-10-06) |
|---|---|---|
| JS | 150KB | 0 |
| 첫 화면 전송량 | 1MB | ≈165KB(CSS 14 + 폰트 134 + smoke.webp 14.5) |
| 폰트 | 100KB(데모 200KB) | **134KB — 기본 초과, 데모 범위 안.** 한글 고딕 한 웨이트가 123KB라 100KB 아래로는 본문 서체를 시스템 고딕으로 바꿔야 한다 |
| LCP | 2.5초 | 로컬 416ms, LCP 요소 h1 |
| 애니메이션 속성 | transform·opacity 우선 | `mask-position`(main-thread) 1곳, 요소 400×450px, 스크롤 0~40vh 구간만. 필터는 정적 |

## 이펙트와 폴백

- 연기: SVG 필터 2개(wisp: turbulence 0.005/0.011 → displacement 46 → blur 1.3 / haze: 0.006/0.012 → 70 → blur 11), 정적. 스크롤 구동은 CSS `mask-position`을 `scroll(root block)` 타임라인으로 30%→100%. `@supports` 가드 안에 초기 상태. 미지원(Firefox)·감소 모션: 55%에서 정지. 필터 미지원: S자 선 + 띠(캡처 `final-filter-off-hero.png`).
- 누끼: 원본이 사진이라 CSS로 대체 — 히어로는 `background-size 281.25%`로 돌·향 부분만 확대 크롭 + `mix-blend-mode: multiply` + `saturate(.55) brightness(1.13)` + 타원 마스크(실측 잔차: 크림 배경이 바탕 대비 1~4/255). 절편은 같은 처리, 타원 45%×46%. 블렌드는 마스크를 가진 상자에 건다(마스크가 격리 그룹을 만들어 img에 걸면 블렌드가 죽는다 — 실측).
- 전부 끄면: 사진 2장이 크림 배경 직사각형으로 보이고 연기는 선이 된다. 글·표·목록·행동은 그대로다.

## 하지 않기로 한 것

- 상단 바·sticky·backdrop-filter(한 장, 섹션 4, 행동 하나 — layout §2-c "내비 없음").
- 스크롤 리빌·스태거(배정에 없음). `.reveal` 잔재 11곳 삭제.
- 가운뎃점 메타 문자열, 영문 라벨, 표제 위 라벨, 히어로 버튼(행동은 브랜드 바의 링크 하나).
- 로컬 MaruBuri woff2 2개(900KB)·fonts.css·LICENSE.html — 배정 서체가 바뀌어 죽은 자산.
- 새 이미지 생성(brief). 연기는 사진이 아니라 SVG 재질로 만들었다.
- 가격을 히어로에 두는 것(카드 C) — 배정 "향·향로"와 충돌.

## 검증

검증 줄: html-validate 0 errors · stylelint 0 · no-hanja PASS 3파일 · showcase-audit PASS 6/6(320·390·768·1440·1920·2560) · design-gate 충족 13 / 미검증 0 / 실패 0(꺼짐 3: static·visual·webkit) · similarity 최대 쌍 0.50(font-foundry), 2026-10-06.

자동 검사와 별도 시각 평가(critique §2-1, 약한 축부터). 캡처는 세션 스크래치 `hyang/shots/` (`final-1440-first.png`, `final-390-first.png`, `final-*-full.png`, `final-*-gray-first.png`, `final-*-rm-*`, `final-*-nofx-*`, `final-filter-off-hero.png`, `final-smoke-reveal.png`, `final-320/768/1920/2560-*`).

| 축 | 점수 | 근거 | 다음 행동 |
|---|---|---|---|
| R3 묶음·정렬 | 1 | 1440 시작선 x=140(워드마크·h1·섹션), 916(사실 목록·시향 dl) 둘 + 가운데 정렬(제품·절편 캡션). 캡션의 가운데 정렬이 네 번째 선 후보 | 캡션을 왼쪽 선에 붙일지 검토 |
| R7 카피 목소리 | 1 | h1 "자연 침향"만으로는 경쟁사 치환이 성립한다. 사실 셋·표·방문 안내가 치환을 깬다. 지문 grep 0건, 은유 0 | h1에 고유 재료를 넣으면 "한 줄 큰 낱말" 배정과 충돌 — 유지 |
| R9 디테일 | 1 | 숫자 열 tabular 정렬 확인, 반복 항목 간격 동일. 200% OS 확대는 1.3×(게이트)까지만 실측 | 실기기 200% 확인 |
| R1 첫인상 | 2 | `final-1440-first.png` 3초 문장: "향연이라는 삼청동 가게가 기록을 적어 자연 침향을 팔고 시향을 받는다" — 컨셉의 명사·동사와 일치. 390도 같음. 반례: "왜 좋은가"는 사실 셋을 읽어야 나온다 |  |
| R2 위계 | 2 | `final-1440-gray-first.png` 시선 돌·향 → h1 → 연기/사실. 의도와 같음. 크기·색·여백으로 구분. 반례: 찾지 못함 |  |
| R4 타이포 | 2 | 웨이트 400만 실어 합성 볼드 없음, h1 1줄(320·390·768·1440·1920·2560 + 1.3×), 본문 36em, 자간 -0.02em에서 닿는 쌍 없음(1440·390 확대 확인). 반례: Gowun Batang 서브셋 밖 글자는 Noto Serif KR 폴백 |  |
| R5 여백 | 2 | 히어로 100svh ↔ 섹션 space-8, 푸터 워드마크 20rem의 스케일 극단. 반례: 섹션 간격이 전부 같다(의도: 네 섹션이 같은 무게) |  |
| R6 이미지 | 2 | 두 장 모두 누끼 처리로 같은 바탕 위에 있고 역할이 적혀 있다(히어로=타는 향, 절편=실물 단면). 390 첫 화면에 제품이 있다. 반례: 돌 크롭은 원본 300px을 1.3~2.8배 확대해 가장자리가 부드럽다 |  |
| R8 구분성 | 2 | 고유 요소 셋(돌 위 향 사진, "삼청동, 2001년부터", 연기). 수렴 5축: 구도·표제 서체·eyebrow(없음)·CTA(링크 하나)·캡션(가운데) 중 같은 것 ≤1. similarity 최대 0.50 |  |
| R10 모바일 | 2 | `final-390-first.png`에 브랜드·제품·h1·행동 링크 네 요소. 순서를 세로로 다시 편집(제품 → 표제 → 사실). 반례: 행동이 상단 링크라 첫 화면 아래쪽에는 없다 |  |

합계 17/20, 통과선 충족(0점 없음, R1·R8 2점, 70% 이상).

대비 실측(#e6e1ea 위): 본문 #2a2530 11.6:1 · 보조 #5a5361 5.74:1 · 링크 #b62752 4.80:1 · "숙성 중" #8f1f40 on #ddd7e2 6.01:1. 어두운 배경·그라디언트 위 텍스트 없음. 게이트 대비 검사 51요소 AA 통과.

키보드: Tab 순서 스킵 링크 → 시향 방문 안내 → 끝(인터랙티브 요소 2개). 감소 모션: `mask-position 55%` 고정, animation none(실측).

미검증: 실기기 INP·field CWV, WebKit(게이트 webkit=false), Firefox(스크롤 타임라인 미지원 — 정지 상태만 코드로 확인), 스크린리더 실청취(role="img" + aria-label은 axe 통과), forced-colors, OS 200% 확대.

## 피드백 기록 · 보존 목록

- 피드백 없음(위임 작업).
- 보존: 상호·사실·수치·이미지 2장·앵커 id·스킵 링크·고지 1회.

## 변경 기록

- 2026-10-06 · 전면 리디자인(plan.md 배정) · 분할 히어로 → 제품 단독, 상단 바 → 내비 없음, 고지 푸터 → 워드마크 푸터, MaruBuri/Pretendard/웜 페이퍼/적갈 → Gowun Batang/Noto Sans KR/회보라/불씨, `.reveal` 11곳 삭제, 로컬 MaruBuri 삭제, 연기 SVG 재질 + 스크롤 마스크 추가. 숙성 기록과 판매 목록을 한 섹션으로 합쳐 섹션 4개.
- 2026-10-02 · 레드팀 06 · 히어로 본문을 면책 문구에서 브랜드 문장으로, "예시" 13회 → 1회(푸터 소유), 장부 넓은 컨테이너 예외 제거.
- 2026-10-02 · 카피 기준(copy-criteria.md) · h1 "연기는 흩어지고 향기만 머뭅니다" → "연도별로 기록한 자연 침향", "~가 아니라 ~다" 대구 제거, "입목" → "입고", 상태 "열매·침향 절편" → "판매 중", 상품명 "백단 침 향·침향 인엽" → "백단 선향·침향 칩".
- 2026-09 · 초판(quiet-luxury 프리셋, 분할 히어로, MaruBuri + Pretendard).