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

feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
Details

Browse source 
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.
This commit is contained in:
Yun Chan 2026-10-06 16:55:50 +09:00
parent 88c11682b1
commit 8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
Download patch file Download diff file Expand all files Collapse all files

93
apps/site/public/work/griddle-club/franchise/index.html
View file

@ -3,12 +3,12 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>철판클럽 가맹 안내 — 운영 조건부터 확인하기</title>
<title>철판클럽 가맹 안내 — 상권, 점포, 주방 동선부터</title>
<meta
name="description"
content="가상 버거 브랜드 철판클럽의 상권, 점포, 면적, 개설 절차와 비용 미정 항목을 살펴보고 가맹 검토에 필요한 조건을 정리해 보세요. 실제 상담과 계약은 제공하지 않습니다."
/>
<meta property="og:title" content="철판클럽 가맹 안내 — 운영 조건부터" />
<meta property="og:title" content="철판클럽 가맹 안내 — 상권, 점포, 주방 동선부터" />
<meta
property="og:description"
content="수익 약속 없이 상권, 점포, 주방 동선과 비용 미정 항목을 안내합니다."
@ -17,43 +17,38 @@
<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:title" content="철판클럽 가맹 안내 — 상권, 점포, 주방 동선부터" />
<meta
name="twitter:description"
content="상권, 점포, 주방 동선과 비용 미정 항목을 살펴보는 가맹 안내."
/>
<meta name="twitter:image" content="../og.png" />
<meta name="theme-color" content="#fffdf8" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<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://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
href="https://fonts.googleapis.com/css2?family=Jua&family=Gothic+A1:wght@500;700;800&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap"
/>
<link rel="stylesheet" href="../styles/tokens.css?v=20260912all" />
<link rel="stylesheet" href="../styles/site.css?v=20260912all" />
<link rel="stylesheet" href="../styles/franchise.css?v=20260912all" />
<link rel="stylesheet" href="../styles/tokens.css?v=20261006" />
<link rel="stylesheet" href="../styles/site.css?v=20261006" />
<link rel="stylesheet" href="../styles/franchise.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='%232147e7'/%3E%3Cpath d='M6 9h20M8 16h16M10 23h12' stroke='%23fffdf8' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E"
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/franchise.js?v=1" defer></script>
<script src="../scripts/franchise.js?v=2" defer></script>
</head>
<body class="franchise-page">
<a class="skip-link" href="#main">본문으로 건너뛰기</a>
<div class="truth-bar" role="note">
<p>가상 브랜드 안내 · 실제 가맹 모집, 상담, 계약을 제공하지 않습니다.</p>
<p>가상 브랜드입니다. 가맹 모집과 상담은 하지 않습니다.</p>
</div>
<header class="site-head">
<div class="wrap head-row franchise-head-row">
<div class="wrap head-row">
<a class="brand" href="../" aria-label="철판클럽 홈으로">
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
<span>철판클럽</span>
@ -71,14 +66,13 @@
<main id="main">
<section class="franchise-hero" aria-labelledby="franchise-hero-heading">
<div class="franchise-hero-copy">
<p class="section-kicker">철판클럽 가맹 안내</p>
<h1 id="franchise-hero-heading">매출 약속보다<br />운영 조건부터.</h1>
<h1 id="franchise-hero-heading">가맹은 상권과<br />점포부터 봅니다.</h1>
<p>
버거 사진만 보고 결정하지 않도록 상권, 점포, 전용 면적, 주방 동선과 아직 정할 수 없는 비용을 순서대로 보여 줍니다.
</p>
<div class="hero-actions">
<a class="button button-light" href="#site-fit">내 조건 살펴보기</a>
<a class="text-link light-link" href="#cost">비용 미정 항목 보기 <span aria-hidden="true">↓</span></a>
<a class="button button-primary" href="#site-fit">조건 살펴보기</a>
<a class="button button-ghost" href="#cost">비용 항목 보기</a>
</div>
<div class="franchise-truth">
<strong>먼저 확인해 주세요</strong>
@ -94,22 +88,22 @@
fetchpriority="high"
/>
<span class="image-fallback" aria-hidden="true">주방 운영 동선 장면</span>
<figcaption>생성 이미지 · 실제 매장과 가맹 시설 아님</figcaption>
<figcaption>생성 이미지, 실제 매장과 가맹 시설이 아닙니다</figcaption>
</figure>
</section>
<section class="fact-rail" aria-label="가맹 안내 원칙">
<div class="wrap fact-rail-grid">
<p><span>01</span> 수익률을 약속하지 않음</p>
<p><span>02</span> 점포를 보기 전 금액을 확정하지 않음</p>
<p><span>03</span> 실제 개인정보를 받지 않음</p>
<p><span>01</span> 수익률을 약속하지 않습니다</p>
<p><span>02</span> 점포를 보기 전에는 금액을 정하지 않습니다</p>
<p><span>03</span> 실제 개인정보를 받지 않습니다</p>
</div>
</section>
<section class="section model-section" id="model" aria-labelledby="model-heading">
<div class="wrap">
<div class="section-head split-head">
<div class="model-heading-copy"><p class="section-kicker">어떤 운영 방식인지</p><h2 id="model-heading">좁은 주방에서<br />역할을 분명하게.</h2></div>
<div class="model-heading-copy"><h2 id="model-heading">주방은 준비, 조리, 포장, 전달 네 구간으로 나눕니다.</h2></div>
<p class="section-note">조리, 조립, 포장, 전달이 서로 겹치지 않는 흐름을 먼저 검토합니다. 실제 설비와 인원은 점포마다 달라집니다.</p>
</div>
@ -121,7 +115,7 @@
</div>
<div class="operator-fit">
<div class="operator-heading-copy"><p class="section-kicker">운영자에게 필요한 태도</p><h3>직접 확인하고,<br />같은 품질을 반복하기.</h3></div>
<div class="operator-heading-copy"><h3>점주는 매장에서 직접 조리하며 네 가지를 준비합니다.</h3></div>
<ul>
<li><strong>현장 참여</strong><span>조리와 응대 흐름을 직접 익힐 준비</span></li>
<li><strong>위생 기록</strong><span>보관, 조리, 마감 상태를 남길 준비</span></li>
@ -135,28 +129,28 @@
<section class="section site-fit-section" id="site-fit" aria-labelledby="site-fit-heading">
<div class="wrap">
<div class="section-head split-head">
<div class="site-fit-heading-copy"><p class="section-kicker">상권과 점포</p><h2 id="site-fit-heading">주소보다 먼저<br />운영 장면을 봅니다.</h2></div>
<div class="site-fit-heading-copy"><h2 id="site-fit-heading">상권, 점포 상태, 전용 면적, 설비, 이전 용도 다섯 가지를 적습니다.</h2></div>
<p class="section-note">아래 분류는 적합 판정이 아니라 문의 때 빠뜨리지 않을 조건 목록입니다. 권장 면적 수치는 실제 검토 뒤에만 제시할 수 있습니다.</p>
</div>
<div class="fit-grid">
<article class="fit-main">
<p class="fit-number mono">A</p>
<p class="fit-number">A</p>
<h3>상권 흐름</h3>
<p>업무가, 주거지, 역 주변, 대학가, 상점가 또는 여러 수요가 섞인 곳인지 먼저 적습니다.</p>
<ul><li>점심과 저녁 수요 시간</li><li>도보와 차량 접근</li><li>포장 대기 공간</li><li>배달 픽업 접근</li></ul>
</article>
<article>
<p class="fit-number mono">B</p><h3>점포 상태</h3><p>점포 없음, 찾는 중, 협의 중, 보유함으로 나눕니다.</p>
<p class="fit-number">B</p><h3>점포 상태</h3><p>점포 없음, 찾는 중, 협의 중, 보유함으로 나눕니다.</p>
</article>
<article>
<p class="fit-number mono">C</p><h3>전용 면적</h3><p>사용자가 입력한 ㎡와 환산한 평을 함께 봅니다. 적합 판정은 하지 않습니다.</p>
<p class="fit-number">C</p><h3>전용 면적</h3><p>사용자가 입력한 ㎡와 환산한 평을 함께 봅니다. 적합 판정은 하지 않습니다.</p>
</article>
<article>
<p class="fit-number mono">D</p><h3>설비 조건</h3><p>전기, 배기, 급수, 배수와 반입 경로는 점포 자료로 따로 확인합니다.</p>
<p class="fit-number">D</p><h3>설비 조건</h3><p>전기, 배기, 급수, 배수와 반입 경로는 점포 자료로 따로 확인합니다.</p>
</article>
<article>
<p class="fit-number mono">E</p><h3>이전 용도</h3><p>음식점, 소매점, 빈 점포 등 이전 사용 상태를 확인합니다.</p>
<p class="fit-number">E</p><h3>이전 용도</h3><p>음식점, 소매점, 빈 점포 등 이전 사용 상태를 확인합니다.</p>
</article>
</div>
</div>
@ -165,7 +159,7 @@
<section class="section franchise-process" id="process" aria-labelledby="process-heading-franchise">
<div class="wrap">
<div class="section-head split-head">
<div class="process-heading-copy"><p class="section-kicker">개설 절차</p><h2 id="process-heading-franchise">기간을 꾸미지 않고<br />순서만 보여 줍니다.</h2></div>
<div class="process-heading-copy"><h2 id="process-heading-franchise">개설은 여덟 단계이고, 기간은 점포마다 다릅니다.</h2></div>
<p class="section-note">점포, 자료, 협의와 공사 조건에 따라 기간이 달라집니다. 아래 순서는 검토에 필요한 항목을 정리한 것이며 계약이나 개점을 보장하지 않습니다.</p>
</div>
<ol class="franchise-timeline">
@ -184,7 +178,7 @@
<section class="section cost-section" id="cost" aria-labelledby="cost-heading">
<div class="wrap">
<div class="cost-head">
<div class="cost-heading-copy"><p class="section-kicker">비용 항목</p><h2 id="cost-heading">합계를 만들 수 없는<br />이유부터 적습니다.</h2></div>
<div class="cost-heading-copy"><h2 id="cost-heading">비용 항목은 열한 가지이고, 금액은 점포를 본 뒤에 정합니다.</h2></div>
<div class="unknown-cost">
<span>현재 상태</span>
<strong>비용 미정</strong>
@ -209,7 +203,7 @@
<tr><th scope="row">첫 물류</th><td>메뉴 범위 필요</td><td>미정</td><td>품목과 보관량 확인</td></tr>
<tr><th scope="row">임대 보증 관련 비용</th><td>점포 계약 필요</td><td>미정</td><td>임대 조건 직접 확인</td></tr>
</tbody>
<tfoot><tr><th scope="row" colspan="2">합계</th><td colspan="2">계산하지 않음 · 확인되지 않은 숫자를 더하지 않습니다</td></tr></tfoot>
<tfoot><tr><th scope="row" colspan="2">합계</th><td colspan="2">계산하지 않습니다. 확인되지 않은 숫자는 더하지 않습니다.</td></tr></tfoot>
</table>
</div>
<p class="cost-warning">평균 매출, 예상 수익, 회수 기간과 최저 비용은 근거 자료가 없어 제공하지 않습니다.</p>
@ -219,8 +213,7 @@
<section class="section inquiry-section" id="inquiry" aria-labelledby="inquiry-heading">
<div class="wrap inquiry-layout">
<div class="inquiry-intro">
<p class="section-kicker">조건 정리</p>
<h2 id="inquiry-heading">연락처 없이도<br />조건부터 정리하기.</h2>
<h2 id="inquiry-heading">연락처 없이 세 단계로 조건만 정리해 봅니다.</h2>
<p>실제 이름과 연락처를 받지 않습니다. 가상의 운영 조건을 입력하면 어떤 항목을 확인해야 하는지 순서대로 살펴볼 수 있습니다.</p>
<div class="privacy-note" role="note">
<strong>실제 개인정보를 입력하지 마세요.</strong>
@ -330,7 +323,6 @@
<section class="inquiry-success" id="inquiry-success" hidden aria-labelledby="success-heading" tabindex="-1">
<span class="success-mark" aria-hidden="true">✓</span>
<p class="section-kicker">조건 확인 완료</p>
<h3 id="success-heading">입력한 조건을 확인했습니다.</h3>
<p>입력한 내용은 전송되거나 보관되지 않으며, 상담 신청은 이루어지지 않습니다.</p>
<div class="success-actions"><button class="button button-ghost" type="button" id="review-again">입력 내용 다시 보기</button><button class="button button-primary" type="button" id="restart-form">처음부터 보기</button></div>
@ -341,18 +333,29 @@
<section class="franchise-close" aria-labelledby="close-heading">
<div class="wrap close-row">
<div class="close-heading-copy"><p class="section-kicker">철판클럽</p><h2 id="close-heading">숫자를 꾸미지 않아야<br />조건을 제대로 볼 수 있습니다.</h2></div>
<a class="button button-light" href="../">소비자 홈으로 돌아가기</a>
<div class="close-heading-copy"><h2 id="close-heading">메뉴 여섯 가지와 매장 세 곳은 홈에서 확인합니다.</h2></div>
<a class="button button-light" href="../">철판클럽 홈으로 돌아가기</a>
</div>
</section>
</main>
<footer class="site-foot">
<div class="wrap foot-grid franchise-foot-grid">
<div><a class="brand brand-foot" href="../"><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="#model">운영 방식</a><a href="#site-fit">상권과 점포</a><a href="#process">개설 절차</a><a href="#cost">비용 항목</a></div>
<div class="foot-truth"><strong>가상 브랜드 안내</strong><p>실제 가맹 모집, 수익 안내, 계약과 상담 신청을 제공하지 않습니다.</p><p class="mono">GRIDDLE CLUB · 2026</p></div>
<div class="wrap foot-grid">
<div class="foot-brand">
<a class="brand brand-foot" href="../"><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="#model">운영 방식</a><a href="#site-fit">상권과 점포</a><a href="#process">개설 절차</a><a href="#cost">비용 항목</a><a href="#inquiry">조건 정리</a></div>
<div><strong>홈</strong><a href="../#menu">메뉴</a><a href="../#builder">조합하기</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="#site-fit">상권</a>
<a class="action-bar-primary" href="#inquiry">조건 정리</a>
<a href="#cost">비용</a>
<a href="../">홈</a>
</nav>
</body>
</html>