designpaca/apps/site/public/work/griddle-club/index.html
Yun Chan 8e3cdb0d3b
Some checks are pending
ci / build (push) Waiting to run
feat(site): rework 19 marketing showcases for composition diversity
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.
2026-10-06 16:55:50 +09:00

456 lines
25 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, viewport-fit=cover" />
<title>철판클럽 — 주문 뒤에 눌러 굽는 스매시 버거</title>
<meta
name="description"
content="가상 버거 브랜드 철판클럽. 주문 뒤에 패티를 눌러 굽는 스매시 버거 메뉴를 보고 재료를 조합하며, 가상 매장의 영업 상태를 확인합니다. 실제 주문과 결제는 제공하지 않습니다."
/>
<meta property="og:title" content="철판클럽 — 주문 뒤에 눌러 굽는 스매시 버거" />
<meta
property="og:description"
content="메뉴 6가지, 단품 6,900원부터. 재료를 바꾸면 가격과 알레르기 정보가 바로 바뀌는 가상 버거 브랜드."
/>
<meta property="og:type" content="website" />
<meta property="og:image" content="./og.png" />
<meta property="og:image:alt" content="크림색 바탕 위에 버거 사진 조각이 겹친 철판클럽 첫 화면" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="철판클럽 — 주문 뒤에 눌러 굽는 스매시 버거" />
<meta name="twitter:description" content="메뉴 6가지, 단품 6,900원부터. 가상 버거 브랜드 철판클럽." />
<meta name="twitter:image" content="./og.png" />
<meta name="theme-color" content="#fbe9c8" />
<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=Jua&family=Gothic+A1:wght@500;700;800&display=swap"
/>
<link rel="stylesheet" href="./styles/tokens.css?v=20261006" />
<link rel="stylesheet" href="./styles/site.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%3Ccircle cx='16' cy='16' r='16' fill='%232147e7'/%3E%3Cpath d='M8 12h16M10 17h12M12 22h8' stroke='%23fbe9c8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"
/>
<script>document.documentElement.classList.add("is-js");</script>
<script src="./scripts/site.js?v=3" defer></script>
</head>
<body>
<a class="skip-link" href="#main">본문으로 건너뛰기</a>
<div class="truth-bar" role="note">
<p>가상 브랜드입니다. 가격과 매장은 실제 정보가 아닙니다.</p>
</div>
<header class="site-head" id="top">
<div class="wrap head-row">
<a class="brand" href="#top" aria-label="철판클럽 처음으로">
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
<span>철판클럽</span>
</a>
<nav class="head-nav" aria-label="주요 메뉴">
<a href="#menu">메뉴</a>
<a href="#builder">조합하기</a>
<a href="#stores">매장 찾기</a>
<a href="./franchise/">가맹 안내</a>
</nav>
<a class="head-action" href="#builder">내 버거 조합하기</a>
</div>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-heading">
<div class="hero-copy">
<h1 id="hero-heading">주문 뒤 눌러 굽고,<br />바로 건넵니다.</h1>
<p class="hero-lead">
주문을 받은 뒤에 얇은 패티를 뜨거운 철판에 눌러 가장자리까지 바삭하게 굽고, 치즈와 구운 양파를 올려 그 자리에서 포장합니다. 단품 6,900원부터.
</p>
<div class="hero-actions">
<a class="button button-primary" href="#menu">오늘 메뉴 보기</a>
<a class="button button-ghost" href="#builder">내 버거 조합하기</a>
</div>
</div>
<div class="hero-media" aria-label="메뉴 사진 조각" role="group">
<figure class="piece piece-main image-shell" style="--i: 0">
<picture>
<source media="(max-width: 820px)" srcset="./assets/hero-handoff-mobile.webp" />
<img
src="./assets/hero-handoff.webp"
width="1600"
height="900"
alt="철판 주방에서 직원이 유산지에 싼 철판 더블을 파란 쟁반에 올려 건네는 모습"
fetchpriority="high"
/>
</picture>
<span class="image-fallback" aria-hidden="true">버거 건네는 장면</span>
</figure>
<figure class="piece piece-press image-shell" style="--i: 1">
<img
src="./assets/griddle-press.webp"
width="1400"
height="933"
alt="조리사가 철판 위에서 패티를 프레스로 눌러 굽는 모습"
loading="eager"
/>
<span class="image-fallback" aria-hidden="true">철판 조리 장면</span>
</figure>
<figure class="piece piece-single image-shell" style="--i: 2">
<img
src="./assets/single-smash-generated.webp"
width="960"
height="720"
alt="치즈와 피클을 넣은 철판 싱글"
loading="eager"
/>
<span class="image-fallback" aria-hidden="true">철판 싱글 사진</span>
</figure>
<p class="piece piece-tag" style="--i: 3"><span>철판 더블</span><strong>8,900원</strong></p>
<p class="piece piece-sticker" style="--i: 4">주문 뒤 조리</p>
<p class="piece piece-note" style="--i: 5">생성 이미지, 실제 매장이 아닙니다</p>
</div>
</section>
<section class="marquee" aria-label="오늘 메뉴와 가격">
<button type="button" class="marquee-toggle" id="marquee-toggle" aria-pressed="false">흐름 멈춤</button>
<div class="marquee-scroll" role="region" aria-label="메뉴와 가격 목록, 가로로 넘길 수 있음" tabindex="0">
<div class="marquee-track" id="marquee-track">
<ul class="marquee-list">
<li>철판 더블 8,900원</li>
<li>철판 싱글 6,900원</li>
<li>고추 피클 더블 9,400원</li>
<li>얇은 감자 3,600원</li>
<li>양파 한 컵 2,800원</li>
<li>탄산 한 잔 2,400원</li>
<li>주문 뒤 조리</li>
<li>포장과 배달은 매장별 확인</li>
</ul>
<ul class="marquee-list" aria-hidden="true">
<li>철판 더블 8,900원</li>
<li>철판 싱글 6,900원</li>
<li>고추 피클 더블 9,400원</li>
<li>얇은 감자 3,600원</li>
<li>양파 한 컵 2,800원</li>
<li>탄산 한 잔 2,400원</li>
<li>주문 뒤 조리</li>
<li>포장과 배달은 매장별 확인</li>
</ul>
</div>
</div>
</section>
<section class="section menu-section" id="menu" aria-labelledby="menu-heading">
<div class="wrap">
<div class="section-head split-head">
<h2 id="menu-heading">단품 6,900원부터, 메뉴는 여섯 가지.</h2>
<p class="section-note">세트는 감자와 음료를 더해 4,100원이 추가됩니다. 조합하기를 누르면 아래 조합기에 바로 담깁니다.</p>
</div>
<div class="menu-toolbar" role="group" aria-label="메뉴 분류">
<button type="button" class="filter-button is-active" data-menu-filter="all" aria-pressed="true">전체</button>
<button type="button" class="filter-button" data-menu-filter="burger" aria-pressed="false">버거</button>
<button type="button" class="filter-button" data-menu-filter="side" aria-pressed="false">곁들임</button>
<button type="button" class="filter-button" data-menu-filter="drink" aria-pressed="false">음료</button>
</div>
<div class="menu-grid" id="menu-grid">
<article class="menu-item menu-item-featured" data-menu-category="burger">
<div class="menu-photo image-shell">
<img
src="./assets/signature-double.webp"
width="1400"
height="933"
alt="철판 패티 두 장과 치즈, 구운 양파를 넣은 철판 더블"
loading="lazy"
/>
<span class="image-fallback" aria-hidden="true">철판 더블 사진</span>
<span class="menu-number">01</span>
</div>
<div class="menu-body">
<div><p class="menu-state">대표 메뉴</p><h3>철판 더블</h3></div>
<p>얇은 패티 두 장, 치즈, 구운 양파, 피클, 집 소스.</p>
<div class="menu-foot">
<span><small>단품</small> 8,900원</span>
<button type="button" data-preset="double">조합하기</button>
</div>
</div>
</article>
<article class="menu-item menu-item-graphic" data-menu-category="burger">
<div class="menu-poster menu-poster-cream" aria-hidden="true"><span>02</span><b>싱글</b></div>
<div class="menu-body">
<div><p class="menu-state">가볍게</p><h3>철판 싱글</h3></div>
<p>패티 한 장, 치즈, 피클, 집 소스. 단품으로 빠르게.</p>
<div class="menu-foot">
<span><small>단품</small> 6,900원</span>
<button type="button" data-preset="single">조합하기</button>
</div>
</div>
</article>
<article class="menu-item menu-item-blue" data-menu-category="burger">
<div class="menu-poster" aria-hidden="true"><span>03</span><b>매운맛</b></div>
<div class="menu-body">
<div><p class="menu-state">매운 피클</p><h3>고추 피클 더블</h3></div>
<p>고추 피클과 매운 소스를 더한 더블. 맵기는 세 단계 중 둘째.</p>
<div class="menu-foot">
<span><small>단품</small> 9,400원</span>
<button type="button" data-preset="spicy">조합하기</button>
</div>
</div>
</article>
<article class="menu-item menu-item-small" data-menu-category="side">
<div class="menu-body">
<div><p class="menu-state">곁들임</p><h3>얇은 감자</h3></div>
<p>가늘게 튀겨 소금으로 마무리합니다.</p>
<div class="menu-foot"><span>3,600원</span></div>
</div>
</article>
<article class="menu-item menu-item-small" data-menu-category="side">
<div class="menu-body">
<div><p class="menu-state">곁들임</p><h3>양파 한 컵</h3></div>
<p>철판에서 단맛을 낸 양파를 따로 담습니다.</p>
<div class="menu-foot"><span>2,800원</span></div>
</div>
</article>
<article class="menu-item menu-item-small" data-menu-category="drink">
<div class="menu-body">
<div><p class="menu-state">음료</p><h3>탄산 한 잔</h3></div>
<p>매장에서 고른 음료 한 잔. 제품별 성분을 확인해 주세요.</p>
<div class="menu-foot"><span>2,400원</span></div>
</div>
</article>
</div>
<div class="empty-state" id="menu-empty" hidden role="status">
<strong>이 분류에 준비된 메뉴가 없어요.</strong>
<button type="button" data-show-all-menu>모든 메뉴 보기</button>
</div>
</div>
</section>
<section class="section builder-section" id="builder" aria-labelledby="builder-heading">
<div class="wrap">
<div class="section-head split-head">
<h2 id="builder-heading">재료를 바꾸면 가격과 알레르기 정보가 바로 바뀝니다.</h2>
<p class="section-note">맛, 패티 수, 치즈, 양파와 피클, 단품과 세트, 받을 매장 순서로 고릅니다. 오른쪽 영수증에 결과가 모입니다.</p>
</div>
<div class="builder-layout">
<form class="builder-form" id="burger-builder" novalidate>
<fieldset>
<legend><span>01</span> 맛 고르기</legend>
<div class="choice-row">
<label><input type="radio" name="flavor" value="classic" checked /><span><strong>기본</strong><small>집 소스와 피클</small></span></label>
<label><input type="radio" name="flavor" value="spicy" /><span><strong>매운 피클</strong><small>고추 피클과 매운 소스</small></span></label>
</div>
</fieldset>
<fieldset>
<legend><span>02</span> 크기와 치즈</legend>
<div class="choice-row choice-row-compact">
<label><input type="radio" name="patty" value="1" /><span>패티 한 장</span></label>
<label><input type="radio" name="patty" value="2" checked /><span>패티 두 장</span></label>
</div>
<label class="field-label" for="cheese">치즈</label>
<select id="cheese" name="cheese">
<option value="0">치즈 없음</option>
<option value="1" selected>치즈 한 장</option>
<option value="2">치즈 두 장</option>
</select>
</fieldset>
<fieldset>
<legend><span>03</span> 양파와 피클</legend>
<div class="select-grid">
<label>구운 양파
<select name="onion"><option value="none">없음</option><option value="regular" selected>기본</option><option value="extra">많이</option></select>
</label>
<label>피클
<select name="pickle"><option value="none">없음</option><option value="regular" selected>기본</option><option value="extra">많이</option></select>
</label>
<label>소스
<select name="sauce"><option value="none">없음</option><option value="regular" selected>기본</option><option value="side">따로</option></select>
</label>
</div>
</fieldset>
<fieldset>
<legend><span>04</span> 단품 또는 세트</legend>
<div class="choice-row choice-row-compact">
<label><input type="radio" name="serving" value="single" checked /><span>단품</span></label>
<label><input type="radio" name="serving" value="set" /><span>세트 더하기</span></label>
</div>
<div class="set-options" id="set-options">
<p id="set-heading">세트 구성</p>
<div class="select-grid">
<label>곁들임
<select name="side" disabled><option value="fries">얇은 감자</option><option value="onion">양파 한 컵</option></select>
</label>
<label>음료
<select name="drink" disabled><option value="cola">탄산 한 잔</option><option value="water">물 한 병</option></select>
</label>
</div>
</div>
</fieldset>
<fieldset>
<legend><span>05</span> 받을 매장</legend>
<label class="field-label" for="builder-store">매장</label>
<select id="builder-store" name="store">
<option value="seongsu">성수점 (영업 중)</option>
<option value="yeonnam">연남점 (영업 종료)</option>
<option value="mullae">문래점 (오늘 휴무)</option>
</select>
</fieldset>
</form>
<aside class="builder-summary" aria-labelledby="summary-heading">
<div class="summary-body">
<span class="summary-tag">내 조합</span>
<h3 id="summary-heading">철판 더블</h3>
<p id="summary-lines">패티 두 장 / 치즈 한 장 / 양파 기본 / 피클 기본 / 소스 기본</p>
<dl class="summary-list">
<div><dt>받기</dt><dd id="summary-serving">단품</dd></div>
<div><dt>매장</dt><dd id="summary-store">성수점</dd></div>
<div><dt>상태</dt><dd id="summary-store-state">영업 중</dd></div>
</dl>
<div class="allergen-note" id="allergen-note">
<strong>알레르기 정보</strong>
<p id="summary-allergens">알, 우유, 대두, 밀, 쇠고기</p>
<small>같은 철판과 조리 도구를 함께 씁니다. 재료를 빼도 알레르기 안전을 보장하지 않습니다.</small>
</div>
<div class="summary-total"><span>총액</span><strong id="summary-total">8,900원</strong></div>
<p class="truth-inline">이 페이지는 메뉴 조합을 살펴보는 안내 페이지이며, 주문과 결제는 진행되지 않습니다.</p>
<a class="button button-primary button-full" href="#stores" id="check-store-link">가상 매장 안내 보기</a>
</div>
</aside>
</div>
</div>
</section>
<section class="section process-section" id="process" aria-labelledby="process-heading">
<div class="wrap process-grid">
<div class="process-copy">
<h2 id="process-heading">굽고, 쌓고,<br />상자에 담습니다.</h2>
<ol class="process-list">
<li><span>01</span><div><strong>굽기</strong><p>얇은 패티를 뜨거운 철판에 눌러 가장자리를 바삭하게 굽습니다.</p></div></li>
<li><span>02</span><div><strong>쌓기</strong><p>치즈, 구운 양파, 피클을 고른 순서대로 올립니다.</p></div></li>
<li><span>03</span><div><strong>포장하기</strong><p>유산지와 상자에 담고 포장 상태를 확인합니다.</p></div></li>
</ol>
</div>
<figure class="process-media image-shell">
<img
src="./assets/kitchen-flow.webp"
width="1400"
height="933"
alt="좁고 밝은 주방에서 한 사람은 철판에서 굽고 다른 사람은 포장대에서 상자에 담는 모습"
loading="lazy"
/>
<span class="image-fallback" aria-hidden="true">주방 동선 장면</span>
<figcaption>생성 이미지, 실제 조리 시설이 아닙니다</figcaption>
</figure>
</div>
</section>
<section class="section stores-section" id="stores" aria-labelledby="stores-heading">
<div class="wrap">
<div class="section-head split-head">
<h2 id="stores-heading">매장 세 곳의 영업 상태와 포장, 배달 가능 여부입니다.</h2>
<p class="section-note">성수, 연남, 문래 세 곳은 가상 매장이라 상세 주소와 전화번호를 적지 않았습니다.</p>
</div>
<div class="store-tools">
<div class="search-box">
<input id="store-search" type="search" placeholder="동네 또는 매장명 검색" autocomplete="off" aria-label="매장 검색" />
<button type="button" id="clear-store-search" hidden>지우기</button>
</div>
<div class="region-filters" role="group" aria-label="지역 고르기">
<button type="button" class="is-active" data-region="all" aria-pressed="true">전체</button>
<button type="button" data-region="성동" aria-pressed="false">성동</button>
<button type="button" data-region="마포" aria-pressed="false">마포</button>
<button type="button" data-region="영등포" aria-pressed="false">영등포</button>
</div>
</div>
<div class="store-layout">
<div class="store-list" id="store-list">
<article class="store-card is-selected" data-store="seongsu" data-region="성동" data-search="성수점 성동 성수동" tabindex="-1">
<div class="store-card-top"><span class="store-state state-open">영업 중</span><span>성동</span></div>
<h3>성수점</h3>
<p>서울 성동구 성수동 일대, 상세 주소 없음</p>
<dl><div><dt>운영</dt><dd>11:00–21:30</dd></div><div><dt>마지막 주문</dt><dd>21:00</dd></div></dl>
<ul aria-label="이용 방식"><li>포장 가능</li><li>배달 가능</li></ul>
<button type="button" data-select-store="seongsu">성수점으로 조합 보기</button>
</article>
<article class="store-card" data-store="yeonnam" data-region="마포" data-search="연남점 마포 연남동" tabindex="-1">
<div class="store-card-top"><span class="store-state state-closed">영업 종료</span><span>마포</span></div>
<h3>연남점</h3>
<p>서울 마포구 연남동 일대, 상세 주소 없음</p>
<dl><div><dt>운영</dt><dd>11:30–20:30</dd></div><div><dt>마지막 주문</dt><dd>오늘 마감</dd></div></dl>
<ul aria-label="이용 방식"><li>포장 마감</li><li>배달 마감</li></ul>
<button type="button" data-select-store="yeonnam">연남점으로 조합 보기</button>
</article>
<article class="store-card" data-store="mullae" data-region="영등포" data-search="문래점 영등포 문래동" tabindex="-1">
<div class="store-card-top"><span class="store-state state-pause">오늘 휴무</span><span>영등포</span></div>
<h3>문래점</h3>
<p>서울 영등포구 문래동 일대, 상세 주소 없음</p>
<dl><div><dt>운영</dt><dd>임시 휴무</dd></div><div><dt>다음 확인</dt><dd>매장별 안내 필요</dd></div></dl>
<ul aria-label="이용 방식"><li>포장 불가</li><li>배달 불가</li></ul>
<button type="button" data-select-store="mullae">문래점으로 조합 보기</button>
</article>
</div>
<aside class="store-map" aria-label="매장 분포 그림">
<div class="map-grid" aria-hidden="true"></div>
<span class="map-river" aria-hidden="true"></span>
<button type="button" class="map-pin pin-seongsu is-active" data-map-store="seongsu" aria-label="성수점 고르기"><span>성수</span></button>
<button type="button" class="map-pin pin-yeonnam" data-map-store="yeonnam" aria-label="연남점 고르기"><span>연남</span></button>
<button type="button" class="map-pin pin-mullae" data-map-store="mullae" aria-label="문래점 고르기"><span>문래</span></button>
<p>위치 안내가 아닌 지역별 이용 상태를 보여 주는 그림입니다.</p>
</aside>
</div>
<div class="empty-state store-empty" id="store-empty" hidden role="status">
<strong>찾는 조건과 맞는 매장이 없어요.</strong>
<p>검색어와 지역 조건을 지우고 다시 확인해 주세요.</p>
<button type="button" id="reset-store-search">검색 조건 지우기</button>
</div>
</div>
</section>
<section class="franchise-callout" aria-labelledby="franchise-heading">
<div class="wrap franchise-row">
<div class="franchise-copy">
<h2 id="franchise-heading">가맹 안내는 금액보다 상권, 점포, 주방 동선부터 보여 드립니다.</h2>
<p>비용 미정 항목을 먼저 확인할 수 있게 홈과 분리했습니다. 실제 가맹 모집과 상담은 제공하지 않습니다.</p>
</div>
<a class="button button-light" href="./franchise/">가맹 운영 조건 보기</a>
</div>
</section>
</main>
<footer class="site-foot">
<div class="wrap foot-grid">
<div class="foot-brand">
<a class="brand brand-foot" href="#top"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span><span>철판클럽</span></a>
<p>성수, 연남, 문래의 스매시 버거.</p>
</div>
<div><strong>살펴보기</strong><a href="#menu">메뉴</a><a href="#builder">조합하기</a><a href="#stores">매장 찾기</a><a href="./franchise/">가맹 안내</a></div>
<div><strong>매장</strong><a href="#stores">성수점, 영업 중</a><a href="#stores">연남점, 영업 종료</a><a href="#stores">문래점, 오늘 휴무</a></div>
<div class="foot-truth"><strong>가상 브랜드 안내</strong><p>메뉴, 가격, 매장, 알레르기, 원산지 정보는 예시입니다. 실제 주문, 결제, 매장 방문, 가맹 문의를 제공하지 않습니다.</p><p class="foot-mark">GRIDDLE CLUB 2026</p></div>
</div>
</footer>
<nav class="action-bar" aria-label="빠른 이동">
<a href="#menu">메뉴</a>
<a class="action-bar-primary" href="#builder">조합하기</a>
<a href="#stores">매장</a>
<a href="./franchise/">가맹</a>
</nav>
</body>
</html>