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).