designpaca/apps/site/public/work/baekje-celadon/index.html
Yun Chan e09d4efb1c
Some checks failed
ci / build (push) Has been cancelled
feat: strengthen design skill and refresh all showcases
2026-09-12 18:16:33 +09:00

182 lines
7.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>비색의 침묵 · 고려청자 전시 구성</title>
<meta
name="description"
content="고려청자의 빙렬과 상감을 세 개의 방으로 읽는 가상 전시 구성입니다. 일정·장소·예약 정보는 예시입니다."
/>
<meta property="og:title" content="비색의 침묵 · 고려청자 전시 구성" />
<meta
property="og:description"
content="유약의 빙렬과 상감 문양을 세 개의 방으로 읽는 가상 전시 구성."
/>
<meta property="og:type" content="website" />
<meta name="theme-color" content="#121514" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link
rel="stylesheet"
href="./styles/fonts.css?v=20260912all"
/>
<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="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"
/>
</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>
</nav>
</div>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-h">
<div class="wrap hero-grid">
<figure class="hero-figure reveal">
<img
src="./assets/ewer-dark.webp"
alt="암실 조명 아래 어두운 받침대 위에 놓인 고려청자 주자의 비취색 실루엣"
width="960"
height="1280"
loading="eager"
fetchpriority="high"
/>
<figcaption>
<span>청자 주자 · 전시 연출 이미지</span>
<span>가상 전시 소품</span>
</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">
<img
src="./assets/inlay.webp"
alt="청자 상감 문양 접사 — 흑백 상감 획이 비취 유약 위에 새겨져 있다"
width="1100"
height="825"
loading="lazy"
/>
<figcaption>상감 모란당초문 · 접사</figcaption>
</figure>
</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">
조명과 동선이 관람 경험을 어떻게 바꾸는지 보여 주기 위한 예시입니다.
아래 일정과 해설 방식은 실제 전시 운영 정보가 아닙니다.
</p>
</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>
</footer>
</body>
</html>