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,180 +3,238 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>비색의 침묵 · 고려청자 전시 구성</title>
|
||||
<title>비색, 1,280°C — 고려청자 특별전</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="고려청자의 빙렬과 상감을 세 개의 방으로 읽는 가상 전시 구성입니다. 일정·장소·예약 정보는 예시입니다."
|
||||
content="1,280°C 환원 불로 구운 고려청자 특별전. 제1실 빙렬, 제2실 상감을 접사로 보고, 2026년 9월 5일부터 11월 22일까지의 관람 시간과 해설 시간을 확인합니다."
|
||||
/>
|
||||
<meta property="og:title" content="비색의 침묵 · 고려청자 전시 구성" />
|
||||
<meta property="og:title" content="비색, 1,280°C — 고려청자 특별전" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="유약의 빙렬과 상감 문양을 세 개의 방으로 읽는 가상 전시 구성."
|
||||
content="1,280°C 환원 불로 구운 고려청자의 빙렬과 상감을 전시실 두 곳에서 접사로 보는 특별전."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="theme-color" content="#121514" />
|
||||
<meta property="og:image" content="https://designpaca.chanpaca.net/work/baekje-celadon/assets/crazing.webp" />
|
||||
<meta property="og:image:alt" content="청자 유약 표면의 빙렬 접사" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="theme-color" content="#0f1a18" />
|
||||
|
||||
<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 />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="./styles/fonts.css?v=20260912all"
|
||||
href="https://fonts.googleapis.com/css2?family=Song+Myung&family=Noto+Sans+KR&display=swap"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20261006" />
|
||||
<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='%23121514'/%3E%3Cpath d='M11 6h10c-1 3-1 5 0 7 2 3 3 5 3 8 0 4-3 7-8 7s-8-3-8-7c0-3 1-5 3-8 1-2 1-4 0-7z' fill='none' stroke='%236FA08F' stroke-width='1.5'/%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='%230f1a18'/%3E%3Cpath d='M11 6h10c-1 3-1 5 0 7 2 3 3 5 3 8 0 4-3 7-8 7s-8-3-8-7c0-3 1-5 3-8 1-2 1-4 0-7z' fill='none' stroke='%2384c3a9' stroke-width='1.5'/%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="#room-1">빙렬의 방</a>
|
||||
<a href="#room-2">상감의 방</a>
|
||||
<a href="#visit">관람</a>
|
||||
<!-- 재질 필터. 듀오톤 램프는 tokens.css의 --duo-shadow / --duo-high 와 같은 값이다.
|
||||
feTurbulence 는 정적 오버레이 한 장에만 쓴다(svg-filters §6). -->
|
||||
<svg class="defs" aria-hidden="true" focusable="false">
|
||||
<filter id="duotone" color-interpolation-filters="sRGB">
|
||||
<feComponentTransfer>
|
||||
<feFuncR type="linear" slope="1.18" intercept="-0.08" />
|
||||
<feFuncG type="linear" slope="1.18" intercept="-0.08" />
|
||||
<feFuncB type="linear" slope="1.18" intercept="-0.08" />
|
||||
</feComponentTransfer>
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0"
|
||||
/>
|
||||
<feComponentTransfer>
|
||||
<feFuncR type="table" tableValues="0.059 0.345 0.812" />
|
||||
<feFuncG type="table" tableValues="0.102 0.600 0.890" />
|
||||
<feFuncB type="table" tableValues="0.094 0.541 0.855" />
|
||||
</feComponentTransfer>
|
||||
</filter>
|
||||
<filter id="glaze" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.85 0.55" numOctaves="2" seed="7" stitchTiles="stitch" result="n" />
|
||||
<feColorMatrix
|
||||
in="n"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0.81 0 0 0 0 0.89 0 0 0 0 0.85 0 0 0 0.55 -0.08"
|
||||
/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<header class="hero">
|
||||
<div class="hero-media">
|
||||
<img
|
||||
src="./assets/crazing.webp"
|
||||
alt="청자 유약 표면의 빙렬 접사. 비취색 유약 위에 미세한 균열망이 퍼져 있다"
|
||||
width="1600"
|
||||
height="1200"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="hero-glaze" aria-hidden="true"></div>
|
||||
<div class="hero-scrim" aria-hidden="true"></div>
|
||||
|
||||
<div class="wrap hero-band">
|
||||
<div class="hero-title">
|
||||
<h1 id="hero-h">비색, 1,280°C</h1>
|
||||
<p class="lead">
|
||||
가마 안 산소를 줄인 1,280°C 환원 불로 구운 고려청자 특별전입니다. 유약 속 철분이
|
||||
만든 비취색을 전시실 두 곳에서 접사로 봅니다.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="toc" aria-label="전시 차례">
|
||||
<ol>
|
||||
<li>
|
||||
<a href="#room-1">
|
||||
<span class="toc-no">1</span>
|
||||
<span class="toc-name">빙렬</span>
|
||||
<span class="toc-desc">유약 표면의 잔금</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#room-2">
|
||||
<span class="toc-no">2</span>
|
||||
<span class="toc-name">상감</span>
|
||||
<span class="toc-desc">새기고 흙으로 메운 무늬</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#visit">
|
||||
<span class="toc-no">3</span>
|
||||
<span class="toc-name">관람 안내</span>
|
||||
<span class="toc-desc">9월 5일부터 11월 22일까지</span>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<section class="hero" aria-labelledby="hero-h">
|
||||
<div class="wrap hero-grid">
|
||||
<figure class="hero-figure reveal">
|
||||
<section id="room-1" class="room" aria-labelledby="room1-h">
|
||||
<div class="wrap room-grid">
|
||||
<p class="room-no"><span class="room-digit" aria-hidden="true">1</span><span class="room-word">제1실</span></p>
|
||||
<div class="room-text">
|
||||
<h2 id="room1-h">빙렬은 청자가 식으면서 유약에 생긴 잔금입니다</h2>
|
||||
<p>
|
||||
가마에서 꺼낸 청자는 식으면서 유약에 잔금이 생깁니다. 흙과 유약이 줄어드는 속도가
|
||||
다르기 때문입니다. 빙렬은 결함으로 보지 않으며, 같은 가마에서 나온 그릇이라도 잔금
|
||||
모양이 모두 다릅니다.
|
||||
</p>
|
||||
<p>
|
||||
제1실 입구에 청자 주자 한 점을 두고 조명 하나를 비춥니다. 첫 화면의 접사는 12세기
|
||||
청자 표면의 빙렬을 측광으로 찍은 것입니다.
|
||||
</p>
|
||||
</div>
|
||||
<figure class="room-figure">
|
||||
<img
|
||||
class="duo"
|
||||
src="./assets/ewer-dark.webp"
|
||||
alt="암실 조명 아래 어두운 받침대 위에 놓인 고려청자 주자의 비취색 실루엣"
|
||||
alt="어두운 받침대 위에 놓인 고려청자 주자. 조명 하나가 비취색 유약을 비춘다"
|
||||
width="960"
|
||||
height="1280"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<figcaption>
|
||||
<span>청자 주자 · 전시 연출 이미지</span>
|
||||
<span>가상 전시 소품</span>
|
||||
</figcaption>
|
||||
<figcaption>제1실 입구의 청자 주자. 연출 이미지</figcaption>
|
||||
</figure>
|
||||
<div class="hero-text">
|
||||
<p class="hero-kicker reveal" style="--delay: 100ms">
|
||||
가상 전시 구성 · 고려청자
|
||||
</p>
|
||||
<h1 id="hero-h" class="reveal" style="--delay: 160ms">
|
||||
천 년의 비색은<br />말이 없다
|
||||
</h1>
|
||||
<p class="lead reveal" style="--delay: 240ms">
|
||||
비색은 말로 설명되는 색이 아닙니다. 1,280°C의 환원 불에서만
|
||||
나오는, 푸르름과 푸름이 아닌 사이의 색. 이 전시는 그 색을 설명하지
|
||||
않고 세 개의 암실에 놓아 두었습니다.
|
||||
</p>
|
||||
<div class="hero-actions reveal" style="--delay: 300ms">
|
||||
<a class="btn" href="#visit">관람 구성 보기</a>
|
||||
<p class="hero-note">일정·장소·예약 정보는 전시 구성 예시이며 실제 관람을 접수하지 않습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="room-1" class="section plate" aria-labelledby="room1-h">
|
||||
<div class="wrap plate-head">
|
||||
<p class="room-no reveal">제1실</p>
|
||||
<h2 id="room1-h" class="reveal" style="--delay: 60ms">빙렬 — 유약이 남긴 지도</h2>
|
||||
<p class="lead reveal" style="--delay: 120ms">
|
||||
가마에서 꺼내진 청자는 식으면서 유약이 갈라집니다. 흙과 유약이 줄어드는
|
||||
속도가 다르기 때문입니다. 그 균열은 결함이 아니라, 그릇마다 단 한 번만
|
||||
그려지는 지도입니다.
|
||||
</p>
|
||||
</div>
|
||||
<figure class="plate-figure reveal" style="--delay: 160ms">
|
||||
<img
|
||||
src="./assets/crazing.webp"
|
||||
alt="청자 유약 표면의 빙렬 — 미세한 균열망이 비취색 유약 위에 퍼져 있다"
|
||||
width="1600"
|
||||
height="1200"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption class="wrap">
|
||||
<span>빙렬 확대 · 12세기 청자 표면 · 측광</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section id="room-2" class="section" aria-labelledby="room2-h">
|
||||
<div class="wrap two">
|
||||
<div class="two-text">
|
||||
<p class="room-no reveal">제2실</p>
|
||||
<h2 id="room2-h" class="reveal" style="--delay: 60ms">
|
||||
상감 — 새기고,<br />흙으로 채우다
|
||||
</h2>
|
||||
<p class="reveal" style="--delay: 120ms">
|
||||
상감은 그림을 그리는 게 아니라 파내는 기술입니다. 흙 그릇에 무늬를
|
||||
새기고, 그 홈에 백토와 자토를 문질러 채운 뒤 유약을 입힙니다. 불에
|
||||
들어가기 전까지는 무늬가 보이지 않습니다 — 가마를 열기 전까지 장인도
|
||||
결과를 알 수 없었습니다.
|
||||
</p>
|
||||
<p class="muted reveal" style="--delay: 180ms">
|
||||
제2실에는 구름·학·버드나무의 세 가지 문양만을 전시합니다. 상감청자의
|
||||
문양은 자연의 모방이 아니라, 보이지 않는 것(구름, 바람, 계절)을
|
||||
보이는 것으로 옮긴 문법입니다.
|
||||
</p>
|
||||
</div>
|
||||
<figure class="two-photo reveal" style="--delay: 100ms">
|
||||
<section id="room-2" class="room room-wall" aria-labelledby="room2-h">
|
||||
<figure class="wall">
|
||||
<div class="wall-media">
|
||||
<img
|
||||
class="duo"
|
||||
src="./assets/inlay.webp"
|
||||
alt="청자 상감 문양 접사 — 흑백 상감 획이 비취 유약 위에 새겨져 있다"
|
||||
alt="청자 상감 모란당초문 접사. 비취 유약 위에 흰 꽃과 검은 줄기 무늬가 새겨져 있다"
|
||||
width="1100"
|
||||
height="825"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<figcaption>상감 모란당초문 · 접사</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<figcaption class="wrap">상감 모란당초문 접사</figcaption>
|
||||
</figure>
|
||||
<div class="wrap room-grid">
|
||||
<p class="room-no"><span class="room-digit" aria-hidden="true">2</span><span class="room-word">제2실</span></p>
|
||||
<div class="room-text">
|
||||
<h2 id="room2-h">상감은 무늬를 파내고 다른 색 흙으로 메우는 기법입니다</h2>
|
||||
<p>
|
||||
그릇 표면에 무늬를 새긴 뒤 홈에 백토와 자토를 문질러 채우고, 유약을 입혀 굽습니다. 흰
|
||||
무늬와 검은 무늬는 이 두 가지 흙의 색입니다.
|
||||
</p>
|
||||
<p>
|
||||
제2실에는 구름, 학, 버드나무 세 가지 문양의 상감청자를 전시합니다. 조명을 비스듬히 두어
|
||||
흙을 메운 홈의 깊이까지 보이게 했습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="visit" class="section band" aria-labelledby="visit-h">
|
||||
<div class="wrap visit-grid">
|
||||
<div>
|
||||
<p class="room-no reveal">안내</p>
|
||||
<h2 id="visit-h" class="reveal" style="--delay: 60ms">세 개의 방으로 보는 전시 구성</h2>
|
||||
<p class="reveal" style="--delay: 120ms">
|
||||
조명과 동선이 관람 경험을 어떻게 바꾸는지 보여 주기 위한 예시입니다.
|
||||
아래 일정과 해설 방식은 실제 전시 운영 정보가 아닙니다.
|
||||
<section id="visit" class="room" aria-labelledby="visit-h">
|
||||
<div class="wrap room-grid">
|
||||
<p class="room-no"><span class="room-digit" aria-hidden="true">3</span><span class="room-word">안내</span></p>
|
||||
<div class="room-text">
|
||||
<h2 id="visit-h">전시실마다 조명은 하나, 동선은 한 방향입니다</h2>
|
||||
<p>
|
||||
제1실에서는 빙렬을 가까이서 보고, 제2실에서는 비스듬한 조명으로 상감의 홈을 봅니다.
|
||||
</p>
|
||||
<dl class="facts">
|
||||
<div>
|
||||
<dt>해설</dt>
|
||||
<dd>11:00, 14:00, 16:00에 시작하며 회당 40분입니다.</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>예약</dt>
|
||||
<dd>가상 전시라 관람 예약을 받지 않습니다.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<dl class="visit-dl reveal" style="--delay: 160ms">
|
||||
<div>
|
||||
<dt>전시 기간 예시</dt>
|
||||
<dd>2026년 9월 5일 – 11월 22일 · 월요일 휴관</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>관람 시간 예시</dt>
|
||||
<dd>10:00–18:00 · 금·토 21:00까지</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>해설 구성 예시</dt>
|
||||
<dd>11:00 / 14:00 / 16:00 · 회당 40분</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>예약</dt>
|
||||
<dd>실제 예약 시스템과 연결되지 않습니다.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-foot">
|
||||
<div class="wrap foot-inner">
|
||||
<p>비색의 침묵 · 고려청자 전시 구성</p>
|
||||
<p class="muted">가상 전시 프로젝트 · 장소와 소장 정보는 예시입니다.</p>
|
||||
<div class="wrap foot-grid">
|
||||
<p class="foot-mark">비색, 1,280°C</p>
|
||||
<div class="foot-card">
|
||||
<dl>
|
||||
<div>
|
||||
<dt>전시 기간</dt>
|
||||
<dd>2026년 9월 5일 토요일부터 11월 22일 일요일까지</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>관람 시간</dt>
|
||||
<dd>10:00부터 18:00까지. 금요일과 토요일은 21:00까지</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>휴관</dt>
|
||||
<dd>매주 월요일</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>관람료</dt>
|
||||
<dd><span class="placeholder">[관람료]</span></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>장소</dt>
|
||||
<dd><span class="placeholder">[전시 장소와 주소]</span></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>문의</dt>
|
||||
<dd><span class="placeholder">[문의 전화]</span></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<p class="foot-note">
|
||||
가상 전시 쇼케이스입니다. 일정과 소장 정보는 예시이고, 대괄호 자리는 값이 정해지면 채웁니다.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue