yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
Yun Chan 2026-09-12 18:16:33 +09:00
parent 69e5cc1efd
commit e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
Download patch file Download diff file Expand all files Collapse all files

103
apps/site/public/work/muwol-coffee/index.html
View file

@ -3,25 +3,25 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>무월 · 싱글오리진 원두 정기구독</title>
<title>무월 · 원두 선택 기록 구성</title>
<meta
name="description"
content="원두마다 산미·단맛·바디를 같은 척도로 측정해 적고, 생두 매입가를 공개합니다. 격주 화요일 로스팅, 서울 서촌."
content="원두의 향미 좌표와 매입 기록을 읽는 가상 로스터리 구성입니다. 로트·가격·구독 정보는 예시입니다."
/>
<meta property="og:title" content="무월 · 싱글오리진 원두 정기구독" />
<meta property="og:title" content="무월 · 원두 선택 기록 구성" />
<meta
property="og:description"
content="측정된 좌표로 원두를 고르는 격주 구독. 생두 매입 원장 공개."
content="향미 좌표와 생두 기록을 한 흐름으로 읽는 가상 로스터리 구성."
/>
<meta property="og:type" content="website" />
<meta name="theme-color" content="#F4F4F0" />
<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="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
href="./styles/fonts.css?v=20260912all"
/>
<link
rel="stylesheet"
@ -31,7 +31,7 @@
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
/>
<link rel="stylesheet" href="./styles/main.css?v=2" />
<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"
@ -54,25 +54,21 @@
</header>
<main id="main">
<!--
히어로 — R1(coffeecollective.dk): 가격을 첫 화면에서 숨기지 않는다.
문구만으로 시작하는 대신 이번 주 로스 사진 한 장과 원두 둘(값 포함)을 같이 둔다.
-->
<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">
취향은 형용사가 아니라<br />측정된 좌표입니다
</h1>
<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>
<a class="btn" href="#plan">구독 구성 보기</a>
<p class="hero-note">가상 로트·가격·출고 안내 예시 · 실제 주문과 구독을 받지 않습니다.</p>
</div>
</div>
@ -85,29 +81,24 @@
loading="eager"
fetchpriority="high"
/>
<figcaption>이번 주 첫 로스 · 8월 19일</figcaption>
<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>
<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>
<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">
@ -128,12 +119,12 @@
</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" />
@ -144,14 +135,12 @@
<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>
@ -161,22 +150,18 @@
<text x="430" y="180" text-anchor="middle">엘 소코로 8.6</text>
</g>
</svg>
<figcaption>8월 3주차 로트 실측 · 좌표는 주마다 다시 놓입니다</figcaption>
<figcaption>가상 로트의 향미 좌표 예시 · 실제 커핑 결과가 아닙니다</figcaption>
</figure>
</div>
</section>
<!--
원장 — 이 페이지의 신뢰 장치 (R1: 거래 내역 공개가 이 업종의 스펙).
밴드를 살짝 눌러 표가 페이지의 중심임을 알린다.
-->
<section id="ledger" class="section band" aria-labelledby="ledger-h">
<div class="wrap">
<div class="ledger-head">
<h2 id="ledger-h">생두 매입 원장</h2>
<h2 id="ledger-h">생두 매입 기록 예시</h2>
<p class="muted">
농장에 돌아가는 돈이 얼마인지 보여주는 일이 스페셜티의 조건이라
생각합니다. 1kg당 매입가와 가공 방식까지 로트 단위로 남깁니다.
생산자, 가공, 매입가, 커핑을 한 줄에 함께 읽는 기록 형식입니다. 아래
농장명·가공 정보·가격·점수는 실제 거래나 품질 평가가 아닌 예시입니다.
</p>
</div>
<div class="table-wrap reveal">
@ -219,14 +204,11 @@
</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">
@ -237,13 +219,13 @@
height="1200"
loading="lazy"
/>
<figcaption>서촌 매장 · 오후 첫 잔</figcaption>
<figcaption>드립 연출 이미지 · 추출 카드 예시</figcaption>
</figure>
<div class="recipe-text">
<h2 id="recipe-h">원두 18g, 물 288g</h2>
<p>
구독 패키지에는 원두 밀도에 맞춘 분쇄도와 주수 간격을 적은 카드 한 장이
들어갑니다. 드립의 변주는 그 다음 문제입니다.
이 구성에서는 원두마다 분쇄도와 주수 간격을 한 장의 카드로 정리합니다.
아래 값은 추출 방식을 읽는 예시이며 제품 동봉이나 판매를 뜻하지 않습니다.
</p>
<dl class="spec">
<div>
@ -271,31 +253,26 @@
</div>
</section>
<!--
구독 — 회색조에서 가장 어두운 블록. 이 페이지의 유일한 강한 면.
(1단계 회색조 위계 계획의 실행: CTA가 1위 덩어리)
-->
<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>
<h2 id="plan-h">격주 구성 예시,<br />서로 다른 원두 두 종</h2>
<p>
2주마다 화요일 아침, 산미형 한 종과 밸런스형 한 종(각 100g)을 볶어
보냅니다. 원두는 시음 후 남는 양이 없어 다음 주에 같은 로트를 못 드릴 수
있습니다.
산미형 한 종과 밸런스형 한 종을 함께 제안하는 구독 구성을 예시로
보여 줍니다. 원두 종류, 발송 주기, 사은품, 가격은 실제 판매 조건이 아닙니다.
</p>
<ul class="plan-list">
<li>원두별 추출 카드 동봉 — 분쇄도·온도·주수</li>
<li>아로마 밸브 틴케이스 첫 회 증정</li>
<li>출장·휴가 주는 앱에서 건너뛰기</li>
<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>
<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>
<a class="btn btn-inverse" href="#plan">구독 구성 다시 보기</a>
<p class="plan-note">200g(100g×2) 구성 예시 · 실제 출고하지 않습니다</p>
</div>
</div>
</section>
@ -303,14 +280,12 @@
<footer class="site-foot">
<div class="wrap foot-inner">
<p>무월 로스터리 · 서울 종로구 옥인길 18</p>
<p class="muted">화요일 로스팅 · 목요일부터 토요일까지 문을 엽니다</p>
<p class="muted">roastery@muwol.kr</p>
<p>무월 · 가상 로스터리 기록 구성</p>
<p class="muted">실제 매장, 원두 판매, 구독, 연락처를 제공하지 않습니다.</p>
</div>
</footer>
<script>
/* 목요일의 화원과 같은 문법 — 한 번 보이면 유지, 스크롤 이벤트 없음 */
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {