feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
This commit is contained in:
Yun Chan
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
|
|
@ -3,122 +3,172 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>향연 · 자연 침향 아카이브</title>
|
||||
<title>향연 — 삼청동 자연 침향 전문점</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="연기는 흩어지고 향기만 머뭅니다. 자연 침향목의 수지 함량과 숙성 연도를 기록으로 남기는 향 아카이브. 서울 삼청동."
|
||||
content="서울 삼청동의 가상 침향 전문점 향연. 2001년부터 들여온 자연 침향의 산지, 수지 함량, 입고 연도를 적어 절편과 선향을 팔고, 화요일부터 토요일 하루 세 번 시향 방문을 받습니다."
|
||||
/>
|
||||
<meta property="og:title" content="향연 · 자연 침향 아카이브" />
|
||||
<meta property="og:description" content="수지 함량과 숙성 연도를 기록으로 남기는 침향 아카이브." />
|
||||
<meta property="og:title" content="향연 — 삼청동 자연 침향 전문점" />
|
||||
<meta property="og:description" content="산지, 수지 함량, 입고 연도를 적어 파는 자연 침향과 시향 방문 안내." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="theme-color" content="#F6F2E9" />
|
||||
<meta property="og:image" content="https://designpaca.chanpaca.net/work/hyang-incense/assets/smoke.webp" />
|
||||
<meta property="og:image:alt" content="검은 돌 받침에 꽂힌 침향 한 자루에서 연기가 오르는 모습" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="theme-color" content="#e6e1ea" />
|
||||
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<!-- Gowun Batang은 표제·워드마크·연도·상품명·가격에만 쓰므로 text= 로 그 글자(59자)만 싣는다.
|
||||
(풀 패밀리는 168KB, 서브셋은 수 KB — tokens §5 폰트 예산.) 표제·상품명 글자를 바꾸면
|
||||
design.md "토큰과 예산"의 명령으로 text= 를 다시 만든다. -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="./styles/fonts.css?v=20260912all"
|
||||
href="https://fonts.googleapis.com/css2?family=Gowun+Batang&text=%2C0124689%EA%B0%80%EA%B5%B3%EA%B8%88%EA%B9%81%EB%82%98%EB%82%9C%EB%85%84%EB%8A%94%EB%8B%88%EB%8B%A4%EB%8B%A8%EB%90%9C%EB%93%A4%EB%9E%98%EB%A3%A8%EB%AC%B4%EB%B0%B1%EB%B2%88%EB%B6%80%EC%82%B4%EC%83%81%EC%83%9D%EC%84%A0%EC%84%B8%EC%88%98%EC%8A%B5%EC%8B%9C%EC%96%B4%EC%97%90%EC%97%B0%EC%98%A4%EC%99%94%EC%9A%94%EC%9B%90%EC%9D%80%EC%9D%BC%EC%9E%85%EC%9E%88%EC%9E%90%EC%9E%A5%EC%A0%88%EC%A7%80%EC%B2%98%EC%B9%A8%EC%B9%A9%ED%84%B0%ED%86%A0%ED%8E%B8%ED%95%98%ED%96%A5%ED%99%94&display=swap"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
|
||||
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20261006" />
|
||||
<!-- 히어로 누끼는 CSS 배경으로 오리므로(요소 넘침 없이 확대 크롭) LCP용 preload를 둔다(images §3-c). -->
|
||||
<link rel="preload" as="image" href="./assets/smoke.webp" fetchpriority="high" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23F6F2E9'/%3E%3Cpath d='M16 6c0 3 0 5 0 7m0 4c0 3 2 3 2 5m-2 2c0 2-2 3-2 5' fill='none' stroke='%237C3B24' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"
|
||||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e6e1ea'/%3E%3Cpath d='M16 7c-2 3 2 5 0 8s2 5 0 8' fill='none' stroke='%236f6678' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='24' r='1.6' fill='%23b62752'/%3E%3Cellipse cx='16' cy='27' rx='7' ry='2.4' fill='%232a2530'/%3E%3C/svg%3E"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a class="skip" href="#main">본문으로 건너뛰기</a>
|
||||
|
||||
<header class="site-head">
|
||||
<div class="wrap head-inner">
|
||||
<a class="wordmark" href="#main">향연</a>
|
||||
<nav class="nav" aria-label="섹션">
|
||||
<a href="#wood">향목</a>
|
||||
<a href="#aging">숙성</a>
|
||||
<a href="#collection">아카이브</a>
|
||||
<a href="#visit">방문</a>
|
||||
</nav>
|
||||
<!-- 연기 재질. 글자에는 걸지 않는다 — 히어로의 .smoke 한 곳만 쓴다(svg-filters §2·§6). -->
|
||||
<svg class="defs" aria-hidden="true" focusable="false">
|
||||
<defs>
|
||||
<filter id="smoke-wisp" x="-120%" y="-15%" width="340%" height="130%" color-interpolation-filters="sRGB">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.005 0.011" numOctaves="3" seed="11" result="n" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="n" scale="46" xChannelSelector="R" yChannelSelector="G" result="d" />
|
||||
<feGaussianBlur in="d" stdDeviation="1.3" />
|
||||
</filter>
|
||||
<filter id="smoke-haze" x="-160%" y="-20%" width="420%" height="140%" color-interpolation-filters="sRGB">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.006 0.012" numOctaves="3" seed="4" result="n" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="n" scale="70" xChannelSelector="R" yChannelSelector="G" result="d" />
|
||||
<feGaussianBlur in="d" stdDeviation="11" />
|
||||
</filter>
|
||||
<linearGradient id="smoke-fade" x1="0" y1="1" x2="0" y2="0">
|
||||
<stop offset="0" stop-color="#fff" />
|
||||
<stop offset="0.55" stop-color="#fff" stop-opacity="0.7" />
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<!-- 마스크 영역을 경로 bbox보다 넓게 잡는다 — 기본 -10%~120%면 블러로 번진 연기가 세로로 잘린다. -->
|
||||
<mask id="smoke-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" x="-1.5" y="-0.1" width="4" height="1.2">
|
||||
<rect x="-1.5" y="-0.1" width="4" height="1.2" fill="url(#smoke-fade)" />
|
||||
</mask>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<header class="brand-bar">
|
||||
<div class="wrap bar-inner">
|
||||
<p class="wordmark">향연</p>
|
||||
<a class="action" href="#visit">시향 방문 안내</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<section class="hero" aria-labelledby="hero-h">
|
||||
<div class="wrap hero-grid">
|
||||
<div class="hero-text">
|
||||
<p class="hero-kicker reveal">가상 향 아카이브 · 기록 형식 예시</p>
|
||||
<h1 id="hero-h" class="reveal" style="--delay: 80ms">
|
||||
연기는 흩어지고<br />향기만 머뭅니다
|
||||
</h1>
|
||||
<p class="lead reveal" style="--delay: 160ms">
|
||||
향연은 향의 산지·숙성·연소 정보를 어떻게 기록할 수 있는지 보여 주는
|
||||
가상 아카이브입니다. 아래 상품·가격·방문 정보는 판매나 예약을 위한
|
||||
정보가 아니라 기록 형식의 예시입니다.
|
||||
</p>
|
||||
<div class="hero-actions reveal" style="--delay: 220ms">
|
||||
<a class="btn" href="#collection">기록 구성 보기</a>
|
||||
</div>
|
||||
<div class="stage">
|
||||
<figure class="product">
|
||||
<div class="smoke" aria-hidden="true">
|
||||
<svg class="smoke-svg" viewBox="0 0 200 720" preserveAspectRatio="xMidYMax meet">
|
||||
<g mask="url(#smoke-mask)">
|
||||
<path
|
||||
class="smoke-cloud"
|
||||
d="M92 430 C 150 360 150 260 118 200 S 64 100 96 0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="54"
|
||||
stroke-linecap="round"
|
||||
filter="url(#smoke-haze)"
|
||||
/>
|
||||
<path
|
||||
class="smoke-haze"
|
||||
d="M100 673 C 102 600 60 540 86 450 S 156 310 120 220 S 62 100 96 0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="20"
|
||||
stroke-linecap="round"
|
||||
filter="url(#smoke-haze)"
|
||||
/>
|
||||
<path
|
||||
class="smoke-wisp"
|
||||
d="M100 673 C 102 600 60 540 86 450 S 156 310 120 220 S 62 100 96 0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.6"
|
||||
stroke-linecap="round"
|
||||
filter="url(#smoke-wisp)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="cut"
|
||||
role="img"
|
||||
aria-label="검은 돌 받침에 꽂힌 침향 한 자루"
|
||||
></div>
|
||||
</figure>
|
||||
</div>
|
||||
<figure class="hero-photo reveal" style="--delay: 120ms">
|
||||
<img
|
||||
src="./assets/smoke.webp"
|
||||
alt="밝은 배경의 검은 받침대에서 한 줄기 침향 연기가 곧게 피어오르는 모습"
|
||||
width="900"
|
||||
height="1200"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<figcaption>침향 연출 이미지 · 가상 아카이브</figcaption>
|
||||
</figure>
|
||||
<h1 id="hero-h">자연 침향</h1>
|
||||
<ul class="facts">
|
||||
<li>삼청동, 2001년부터</li>
|
||||
<li>입고 연도와 산지, 수지 함량을 적어 팝니다</li>
|
||||
<li>시향은 화요일부터 토요일, 하루 세 번</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="wood" class="section" aria-labelledby="wood-h">
|
||||
<div class="wrap two">
|
||||
<figure class="two-photo reveal">
|
||||
<img
|
||||
src="./assets/agarwood.webp"
|
||||
alt="자연 침향 단면 — 짙은 수지 결과 하얀 목질이 함께 보이는 절편"
|
||||
width="1100"
|
||||
height="825"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>자연 침향 단면 · 수지와 목질</figcaption>
|
||||
<figure class="slab">
|
||||
<div class="slab-cut">
|
||||
<img
|
||||
src="./assets/agarwood.webp"
|
||||
alt="자연 침향 절편의 단면. 짙은 수지 결과 밝은 목질이 함께 보인다"
|
||||
width="1100"
|
||||
height="825"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<figcaption>자연 침향 단면. 검은 부분이 수지, 밝은 부분이 목질입니다.</figcaption>
|
||||
</figure>
|
||||
<div class="two-text">
|
||||
<h2 id="wood-h">병든 나무만이<br />이 향을 가집니다</h2>
|
||||
<h2 id="wood-h">침향은 상처 난 나무에 수지가 굳어 생깁니다</h2>
|
||||
<p>
|
||||
침향은 나무의 향이 아니라 나무의 상처입니다. 상처 입은 나무가 스스로를
|
||||
아무려기 위해 분비한 수지가 오랜 세월 굳은 것 — 그래서 심은 나무에서는
|
||||
얻을 수 없고, 자연에서 쓰러진 나무에서만 길어 올립니다.
|
||||
침향나무는 상처를 입으면 스스로를 지키려고 수지를 내놓습니다. 이 수지가 오랜 세월
|
||||
나무 속에서 굳은 것이 침향입니다. 심은 나무에서는 얻기 어려워서, 향연은 자연에서
|
||||
쓰러진 나무에서 거둔 침향만 들여옵니다.
|
||||
</p>
|
||||
<p class="muted">
|
||||
이 섹션은 산지·수지 함량·숙성 상태를 함께 기록하는 방식을 설명합니다.
|
||||
특정 목재의 매입 기준이나 실제 아카이브 운영 정책을 뜻하지 않습니다.
|
||||
수지가 많을수록 절편은 무겁고 검으며, 물에 넣으면 가라앉습니다. 그래서 향연은
|
||||
무게보다 수지 함량을 먼저 적습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="aging" class="section band" aria-labelledby="aging-h">
|
||||
<section id="aging" class="section record" aria-labelledby="aging-h">
|
||||
<div class="wrap">
|
||||
<div class="aging-head">
|
||||
<h2 id="aging-h">숙성 기록 예시</h2>
|
||||
<p class="muted">
|
||||
들여온 해와 수지 함량, 상태를 한 줄에서 읽는 기록 형식입니다. 아래
|
||||
연도·산지·수지 함량은 실제 측정이나 재고를 뜻하지 않습니다.
|
||||
</p>
|
||||
<div class="record-head">
|
||||
<h2 id="aging-h">가장 오래된 절편은 2001년에 들어왔습니다</h2>
|
||||
<p class="muted">들여온 해와 산지, 수지 함량, 지금 상태를 한 줄에 적습니다.</p>
|
||||
</div>
|
||||
<div class="table-wrap reveal">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption class="sr-only">
|
||||
숙성 기록 예시 — 입목 연도, 산지, 수지 함량, 상태
|
||||
</caption>
|
||||
<caption class="sr-only">숙성 기록 — 입고 연도, 산지, 수지 함량, 상태</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">입목</th>
|
||||
<th scope="col">입고</th>
|
||||
<th scope="col">산지</th>
|
||||
<th scope="col" class="num">수지 함량</th>
|
||||
<th scope="col">상태</th>
|
||||
|
|
@ -129,87 +179,85 @@
|
|||
<th scope="row">2001년</th>
|
||||
<td>베트남 카호아</td>
|
||||
<td class="num">64.2%</td>
|
||||
<td>열매 · 상태 예시</td>
|
||||
<td>판매 중</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2012년</th>
|
||||
<td>인도네시아 리아우</td>
|
||||
<td class="num">51.8%</td>
|
||||
<td>침향 절편 · 상태 예시</td>
|
||||
<td>판매 중</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2024년</th>
|
||||
<td>캄보디아 프놈펜 인근</td>
|
||||
<td class="num">47.3%</td>
|
||||
<td>숙성 중 · 상태 예시</td>
|
||||
<td class="is-aging">숙성 중</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="aging-note muted">
|
||||
수지 함량과 상태 표기는 기록 형식을 설명하기 위한 예시 값입니다.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="collection" class="section" aria-labelledby="collection-h">
|
||||
<div class="wrap">
|
||||
<h2 id="collection-h">기록으로 살펴보는 구성</h2>
|
||||
<h3 id="collection" class="collection-h">지금 살 수 있는 향은 세 가지입니다</h3>
|
||||
<ol class="collection">
|
||||
<li class="item reveal">
|
||||
<li class="item">
|
||||
<div class="item-text">
|
||||
<h3>자연 침향 절편</h3>
|
||||
<p>2001년 입목 · 수지 64.2% · 10g</p>
|
||||
<p class="item-name">자연 침향 절편</p>
|
||||
<p>2001년 입고, 수지 64.2%, 10g</p>
|
||||
</div>
|
||||
<p class="item-price">예시 180,000원</p>
|
||||
<p class="item-price">180,000원</p>
|
||||
</li>
|
||||
<li class="item reveal" style="--delay: 80ms">
|
||||
<li class="item">
|
||||
<div class="item-text">
|
||||
<h3>백단 침 향</h3>
|
||||
<p>인도 마이소르 노목 · 20g · 연소 45분</p>
|
||||
<p class="item-name">백단 선향</p>
|
||||
<p>인도 마이소르산 노목, 20g, 한 개비 45분</p>
|
||||
</div>
|
||||
<p class="item-price">예시 42,000원</p>
|
||||
<p class="item-price">42,000원</p>
|
||||
</li>
|
||||
<li class="item reveal" style="--delay: 160ms">
|
||||
<li class="item">
|
||||
<div class="item-text">
|
||||
<h3>침향 인엽</h3>
|
||||
<p>리아우산 · 2012년 입목 · 3g</p>
|
||||
<p class="item-name">침향 칩</p>
|
||||
<p>인도네시아 리아우산, 2012년 입고, 3g</p>
|
||||
</div>
|
||||
<p class="item-price">예시 96,000원</p>
|
||||
<p class="item-price">96,000원</p>
|
||||
</li>
|
||||
</ol>
|
||||
<p class="muted collection-note">
|
||||
이 목록은 상품명·단위·가격을 기록하는 방식을 보여 줍니다. 실제 상품 판매,
|
||||
향 시향, 예약 또는 방문을 제공하지 않습니다.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="visit" class="section visit" aria-labelledby="visit-h">
|
||||
<div class="wrap visit-grid">
|
||||
<div>
|
||||
<h2 id="visit-h">방문 정보 예시</h2>
|
||||
<address>
|
||||
가상 아카이브 안내<br />
|
||||
실제 장소와 방문 경로를 제공하지 않습니다.
|
||||
</address>
|
||||
</div>
|
||||
<div class="visit-info">
|
||||
<dl>
|
||||
<div>
|
||||
<dt>방문 시간 예시</dt>
|
||||
<dd>화–토 · 11:00, 14:00, 16:00 회당 50분</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>예약</dt>
|
||||
<dd>실제 예약 및 문의를 받지 않습니다.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<p class="visit-mark">향연</p>
|
||||
<h2 id="visit-h">시향은 화요일부터 토요일, 하루 세 번입니다</h2>
|
||||
<dl class="visit-info">
|
||||
<div>
|
||||
<dt>시간</dt>
|
||||
<dd>11시, 14시, 16시. 회당 50분</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>인원</dt>
|
||||
<dd>회당 최대 4명</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>방식</dt>
|
||||
<dd>절편을 직접 데워 향을 맡아 봅니다</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>예약</dt>
|
||||
<dd>가상 매장이라 예약과 문의를 받지 않습니다</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 페이지 범위의 가상 고지는 푸터 한 곳이 소유한다(trustworthy-showcases §4-b). -->
|
||||
<footer class="site-foot">
|
||||
<div class="wrap">
|
||||
<p class="foot-mark">향연</p>
|
||||
<p class="foot-line">
|
||||
<span>삼청동 자연 침향 전문점</span>
|
||||
<span>향연은 가상 브랜드 쇼케이스입니다. 기록과 가격, 방문 정보는 예시이며 실제 판매나 시향, 예약을 제공하지 않습니다.</span>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue