8e3cdb0d3b
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.
240 lines
10 KiB
HTML
240 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>비색, 1,280°C — 고려청자 특별전</title>
|
|
<meta
|
|
name="description"
|
|
content="1,280°C 환원 불로 구운 고려청자 특별전. 제1실 빙렬, 제2실 상감을 접사로 보고, 2026년 9월 5일부터 11월 22일까지의 관람 시간과 해설 시간을 확인합니다."
|
|
/>
|
|
<meta property="og:title" content="비색, 1,280°C — 고려청자 특별전" />
|
|
<meta
|
|
property="og:description"
|
|
content="1,280°C 환원 불로 구운 고려청자의 빙렬과 상감을 전시실 두 곳에서 접사로 보는 특별전."
|
|
/>
|
|
<meta property="og:type" content="website" />
|
|
<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://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Song+Myung&family=Noto+Sans+KR&display=swap"
|
|
/>
|
|
<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='%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>
|
|
|
|
<!-- 재질 필터. 듀오톤 램프는 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 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="어두운 받침대 위에 놓인 고려청자 주자. 조명 하나가 비취색 유약을 비춘다"
|
|
width="960"
|
|
height="1280"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<figcaption>제1실 입구의 청자 주자. 연출 이미지</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<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="청자 상감 모란당초문 접사. 비취 유약 위에 흰 꽃과 검은 줄기 무늬가 새겨져 있다"
|
|
width="1100"
|
|
height="825"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</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="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>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-foot">
|
|
<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>
|