302 lines
13 KiB
HTML
302 lines
13 KiB
HTML
<!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="#f5efe6" />
|
||
|
||
<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"
|
||
/>
|
||
<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="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
|
||
/>
|
||
<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='%23F4F4F0'/%3E%3Cpath d='M16 7a7 7 0 0 1 7 7h-7z' fill='%237A3E1D'/%3E%3Cpath d='M16 9a7 7 0 0 0-7 7h7z' fill='%23181B18'/%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='%23181B18' 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="#scale">척도</a>
|
||
<a href="#ledger">원장</a>
|
||
<a href="#recipe">레시피</a>
|
||
<a href="#plan">구독</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main">
|
||
<section class="hero" aria-labelledby="hero-h">
|
||
<div class="wrap hero-grid">
|
||
<div class="hero-text">
|
||
<p class="hero-label reveal">가상 로스터리 · 원두 선택 기록 예시</p>
|
||
<h1 id="hero-h" class="reveal" style="--delay: 60ms">취향을 고르는 향미의 좌표</h1>
|
||
<p class="lead reveal" style="--delay: 120ms">
|
||
과일 향이라는 말만으로는 추출 방법을 고르기 어렵습니다. 이 페이지는
|
||
향미 좌표와 매입 기록을 함께 읽는 방식을 보여 줍니다.
|
||
</p>
|
||
<p class="lead hero-disclaimer reveal" style="--delay: 140ms">
|
||
로트, 가격, 출고 정보는 실제 판매나 구독을 뜻하지 않는 예시입니다.
|
||
</p>
|
||
<div class="hero-actions reveal" style="--delay: 180ms">
|
||
<a class="btn" href="#plan">구독 구성 보기</a>
|
||
<p class="hero-note">가상 로트·가격·출고 안내 예시 · 실제 주문과 구독을 받지 않습니다.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<figure class="hero-photo reveal" style="--delay: 100ms">
|
||
<img
|
||
src="./assets/beans-hero.webp"
|
||
alt="따뜻한 회색 리넨 위 질도기 그릇에 담긴 갓 볶은 원두와 놋쇠 스쿱"
|
||
width="900"
|
||
height="1200"
|
||
loading="eager"
|
||
fetchpriority="high"
|
||
/>
|
||
<figcaption>로스팅 연출 이미지 · 가상 로트 기록</figcaption>
|
||
</figure>
|
||
|
||
<dl class="hero-beans reveal" style="--delay: 240ms">
|
||
<div class="bean-row">
|
||
<dt>에티오피아 구지 우라가</dt>
|
||
<dd class="bean-origin">워시드 · 해발 2,150m · 커핑 88.75</dd>
|
||
<dd class="bean-price"><span>100g</span> 예시 8,500원</dd>
|
||
</div>
|
||
<div class="bean-row">
|
||
<dt>콜롬비아 엘 파라이소</dt>
|
||
<dd class="bean-origin">혐기발효 · 해발 1,930m · 커핑 91.20</dd>
|
||
<dd class="bean-price"><span>100g</span> 예시 11,000원</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="scale" class="section" aria-labelledby="scale-h">
|
||
<div class="wrap scale-grid">
|
||
<div class="scale-text">
|
||
<h2 id="scale-h">같은 척도로 잰<br />향미 좌표</h2>
|
||
<p>
|
||
같은 밝기로 볶아도 생두가 머금은 수분과 밀도에 따라 열은 다르게
|
||
들어갑니다. 그래서 무월은 색이 아니라 1차 팝핑 후 감률과 커핑 점수로
|
||
로트를 기록합니다.
|
||
</p>
|
||
<p class="muted">
|
||
좌표는 로트마다 다시 측정해 옮겨 적습니다. 지난 로트의 좌표와 지금이
|
||
같다고 말하지 않습니다.
|
||
</p>
|
||
<ul class="scale-legend" aria-label="좌표 범례">
|
||
<li><span class="key" aria-hidden="true"></span>우라가 G1 워시드</li>
|
||
<li><span class="key key-b" aria-hidden="true"></span>엘 파라이소 혐기발효</li>
|
||
<li><span class="key key-c" aria-hidden="true"></span>엘 소코로 마라카투라</li>
|
||
</ul>
|
||
</div>
|
||
<figure class="scale-plot reveal">
|
||
<p class="plot-note">가로축: 산미에서 바디까지 · 세로축: 기록값 0–10</p>
|
||
<svg
|
||
viewBox="0 0 520 340"
|
||
role="img"
|
||
aria-label="산미-바디 2차원 좌표. 우라가는 산미 높음, 엘 파라이소는 단맛 높음, 엘 소코로는 바디 높음."
|
||
>
|
||
<g class="grid">
|
||
<line x1="56" y1="40" x2="56" y2="280" />
|
||
<line x1="56" y1="280" x2="500" y2="280" />
|
||
<line x1="56" y1="160" x2="500" y2="160" />
|
||
<line x1="278" y1="40" x2="278" y2="280" />
|
||
<line x1="167" y1="40" x2="167" y2="280" stroke-dasharray="2 6" />
|
||
<line x1="389" y1="40" x2="389" y2="280" stroke-dasharray="2 6" />
|
||
<line x1="56" y1="100" x2="500" y2="100" stroke-dasharray="2 6" />
|
||
<line x1="56" y1="220" x2="500" y2="220" stroke-dasharray="2 6" />
|
||
</g>
|
||
<g class="axis-labels">
|
||
<text x="56" y="302">산미 →</text>
|
||
<text x="500" y="302" text-anchor="end">바디 →</text>
|
||
<text x="46" y="46" text-anchor="end">10.0</text>
|
||
<text x="46" y="286" text-anchor="end">0</text>
|
||
</g>
|
||
<g class="points">
|
||
<circle cx="140" cy="62" r="5" />
|
||
<text x="140" y="46" text-anchor="middle">우라가 8.8</text>
|
||
<circle cx="252" cy="92" r="5" class="pt-b" />
|
||
<text x="252" y="76" text-anchor="middle">엘 파라이소 9.0</text>
|
||
<circle cx="430" cy="196" r="5" class="pt-c" />
|
||
<text x="430" y="180" text-anchor="middle">엘 소코로 8.6</text>
|
||
</g>
|
||
</svg>
|
||
<figcaption>가상 로트의 향미 좌표 예시 · 실제 커핑 결과가 아닙니다</figcaption>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="ledger" class="section band" aria-labelledby="ledger-h">
|
||
<div class="wrap">
|
||
<div class="ledger-head">
|
||
<h2 id="ledger-h">생두 매입 기록 예시</h2>
|
||
<p class="muted">
|
||
생산자, 가공, 매입가, 커핑을 한 줄에 함께 읽는 기록 형식입니다. 아래
|
||
농장명·가공 정보·가격·점수는 실제 거래나 품질 평가가 아닌 예시입니다.
|
||
</p>
|
||
</div>
|
||
<div class="table-wrap reveal">
|
||
<table>
|
||
<caption class="sr-only">
|
||
원두별 생두 매입 원장 — 원두명, 생산자, 가공 방식, 매입가, 커핑 점수
|
||
</caption>
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">원두</th>
|
||
<th scope="col">생산자</th>
|
||
<th scope="col">가공</th>
|
||
<th scope="col" class="num">매입가 (FOB/kg)</th>
|
||
<th scope="col" class="num">커핑</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">에티오피아 구지 우라가</th>
|
||
<td>하르소 콜루 세척장</td>
|
||
<td>워시드 · 72시간 발효</td>
|
||
<td class="num">$14.20</td>
|
||
<td class="num">88.75</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">콜롬비아 엘 파라이소</th>
|
||
<td>디에고 사무엘 베르무데스</td>
|
||
<td>혐기발효 · 열충격 2회</td>
|
||
<td class="num">$26.50</td>
|
||
<td class="num">91.20</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">과테말라 엘 소코로</th>
|
||
<td>후안 디에고 데 라 세르다</td>
|
||
<td>전량 워시드</td>
|
||
<td class="num">$16.80</td>
|
||
<td class="num">89.00</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p class="ledger-note muted">
|
||
표의 매입가와 점수는 원두 기록 화면의 정보 구조를 설명하기 위한 예시 값입니다.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="recipe" class="section" aria-labelledby="recipe-h">
|
||
<div class="wrap recipe-grid">
|
||
<figure class="recipe-photo reveal">
|
||
<img
|
||
src="./assets/pourover.webp"
|
||
alt="고핫물이 필터 백에 담긴 도자기 드리퍼로 얇은 물줄기로 들어가는 중"
|
||
width="900"
|
||
height="1200"
|
||
loading="lazy"
|
||
/>
|
||
<figcaption>드립 연출 이미지 · 추출 카드 예시</figcaption>
|
||
</figure>
|
||
<div class="recipe-text">
|
||
<h2 id="recipe-h">원두 18g, 물 288g</h2>
|
||
<p>
|
||
이 구성에서는 원두마다 분쇄도와 주수 간격을 한 장의 카드로 정리합니다.
|
||
아래 값은 추출 방식을 읽는 예시이며 제품 동봉이나 판매를 뜻하지 않습니다.
|
||
</p>
|
||
<dl class="spec">
|
||
<div>
|
||
<dt>물 온도</dt>
|
||
<dd>93°C</dd>
|
||
</div>
|
||
<div>
|
||
<dt>분쇄도</dt>
|
||
<dd>코만단테 24딸</dd>
|
||
</div>
|
||
<div>
|
||
<dt>뜸 들이기</dt>
|
||
<dd>40초 · 물 40g</dd>
|
||
</div>
|
||
<div>
|
||
<dt>주수</dt>
|
||
<dd>3회 · 116g씩</dd>
|
||
</div>
|
||
</dl>
|
||
<p class="muted">
|
||
추출 시간은 2분 30초에서 3분 사이가 기준입니다. 그보다 빨리 흘러내리면
|
||
곱게 갈고, 늦으면 굵게 갑니다.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="plan" class="section plan" aria-labelledby="plan-h">
|
||
<div class="wrap plan-grid">
|
||
<div class="plan-text">
|
||
<h2 id="plan-h">격주 구성 예시,<br />서로 다른 원두 두 종</h2>
|
||
<p>
|
||
산미형 한 종과 밸런스형 한 종을 함께 제안하는 구독 구성을 예시로
|
||
보여 줍니다. 원두 종류, 발송 주기, 사은품, 가격은 실제 판매 조건이 아닙니다.
|
||
</p>
|
||
<ul class="plan-list">
|
||
<li>원두별 추출 카드 구성 — 분쇄도·온도·주수</li>
|
||
<li>틴케이스 동봉 방식 예시</li>
|
||
<li>건너뛰기와 해지 정보를 함께 보여 주는 구성</li>
|
||
</ul>
|
||
</div>
|
||
<div class="plan-box">
|
||
<p class="plan-price">
|
||
<span>예시 28,000원</span><span class="plan-unit">회당 · 배송비 포함</span>
|
||
</p>
|
||
<a class="btn btn-inverse" href="#plan">구독 구성 다시 보기</a>
|
||
<p class="plan-note">200g(100g×2) 구성 예시 · 실제 출고하지 않습니다</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-foot">
|
||
<div class="wrap foot-inner">
|
||
<p>무월 · 가상 로스터리 기록 구성</p>
|
||
<p class="muted">실제 매장, 원두 판매, 구독, 연락처를 제공하지 않습니다.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
const io = new IntersectionObserver(
|
||
(entries) => {
|
||
for (const e of entries) {
|
||
if (!e.isIntersecting) continue;
|
||
e.target.classList.add("is-in");
|
||
io.unobserve(e.target);
|
||
}
|
||
},
|
||
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
|
||
);
|
||
for (const el of document.querySelectorAll(".reveal")) io.observe(el);
|
||
</script>
|
||
</body>
|
||
</html>
|