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

221
apps/site/public/work/form-architecture/index.html
View file

@ -3,93 +3,162 @@
<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="빛과 비례를 읽는 설계 아카이브." />
<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="#fdfdfb" />
<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/fonts.css?v=20260912all" />
<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 x='6' y='6' width='20' height='20' fill='none' stroke='%23171b19' stroke-width='2'/%3E%3Crect x='11' y='11' width='10' height='10' fill='%23171b19'/%3E%3C/svg%3E" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:image" content="./assets/pavilion-bw.webp" />
<meta name="theme-color" content="#fcfcfb" />
<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=Gothic+A1:wght@300;400&display=swap" />
<link rel="stylesheet" href="./styles/tokens.css?v=20261006" />
<link rel="stylesheet" href="./styles/main.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 x='5' y='9' width='22' height='14' fill='none' stroke='%23161716' stroke-width='2'/%3E%3Cpath d='M5 16h22' stroke='%23161716' stroke-width='1'/%3E%3C/svg%3E" />
</head>
<body>
<a class="skip" href="#main">본문으로 건너뛰기</a>
<header class="site-head">
<div class="rail head-inner">
<a class="wordmark" href="#main">스튜디오 폼 <span>FORM</span></a>
<nav class="nav" aria-label="섹션">
<a href="#index">인덱스</a><a href="#drawing">도면</a><a href="#photo">사진</a><a href="#contact">구성 안내</a>
</nav>
</div>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-h">
<div class="stage hero-top">
<div class="hero-title">
<p class="eyebrow">가상 공간건축 포트폴리오 · 설계 기록 형식</p>
<h1 id="hero-h">공간을 짓는<br />명료한 질서.</h1>
</div>
<div class="hero-intro">
<p>빛이 머무는 방향과 구조가 건너는 거리를 함께 읽습니다. 사진은 결과를, 도면은 그 결과가 만들어진 이유를 남깁니다.</p>
<a class="index-link" href="#index">프로젝트 인덱스 보기 <span aria-hidden="true">↓</span></a>
</div>
</div>
<figure class="hero-image stage">
<img src="./assets/pavilion-bw.webp" alt="긴 수평창이 난 콘크리트 파빌리온에 벽 그림자가 지는 모습" width="1440" height="810" />
<figcaption><span>폼 하우스 · 가평 · 2025</span><span>생성 이미지 · 실제 프로젝트 사진 아님</span></figcaption>
</figure>
<div class="hero-caption rail"><p>이 페이지의 프로젝트명·연도·도면·이미지는 공간 설계 기록의 형식을 설명하기 위한 가상 사례입니다.</p></div>
</section>
<section id="index" class="section index-section" aria-labelledby="index-h">
<div class="wide-rail">
<div class="section-head"><h2 id="index-h">프로젝트 인덱스</h2><p>여섯 항목은 한 장의 가상 설계 도면을 서로 다른 기록의 관점에서 참조합니다.</p></div>
<ol class="index">
<li><a href="#drawing"><span class="idx-no">01</span><span class="idx-name">폼 하우스</span><span class="idx-loc">경기 가평</span><span class="idx-year">2025</span></a></li>
<li><a href="#drawing"><span class="idx-no">02</span><span class="idx-name">백령도 해녀기념관</span><span class="idx-loc">인천 백령도</span><span class="idx-year">2024</span></a></li>
<li><a href="#drawing"><span class="idx-no">03</span><span class="idx-name">은평 재생주거</span><span class="idx-loc">서울 은평</span><span class="idx-year">2024</span></a></li>
<li><a href="#drawing"><span class="idx-no">04</span><span class="idx-name">제주 돌담 스튜디오</span><span class="idx-loc">제주 애월</span><span class="idx-year">2023</span></a></li>
<li><a href="#drawing"><span class="idx-no">05</span><span class="idx-name">성수 인쇄공장 재생</span><span class="idx-loc">서울 성수</span><span class="idx-year">2022</span></a></li>
<li><a href="#drawing"><span class="idx-no">06</span><span class="idx-name">폼 오피스</span><span class="idx-loc">서울 종로</span><span class="idx-year">2019</span></a></li>
</ol>
</div>
</section>
<div class="frame">
<header class="rail">
<a class="wordmark" href="#main">스튜디오 폼</a>
<details class="toc" id="toc" open>
<summary class="toc-summary"><span class="toc-open-label">차례</span><span class="toc-close-label">닫기</span></summary>
<nav class="toc-body" aria-label="프로젝트 색인">
<p class="toc-label" id="index-label">프로젝트</p>
<ol class="index" aria-labelledby="index-label">
<li><a href="#drawing" aria-current="true"><span class="idx-no">01</span><span class="idx-name">폼 하우스</span><span class="idx-meta"><span>가평</span><span>2025</span></span></a></li>
<li><a href="#drawing"><span class="idx-no">02</span><span class="idx-name">백령도 해녀기념관</span><span class="idx-meta"><span>백령도</span><span>2024</span></span></a></li>
<li><a href="#drawing"><span class="idx-no">03</span><span class="idx-name">은평 재생주거</span><span class="idx-meta"><span>서울 은평</span><span>2024</span></span></a></li>
<li><a href="#drawing"><span class="idx-no">04</span><span class="idx-name">제주 돌담 스튜디오</span><span class="idx-meta"><span>제주 애월</span><span>2023</span></span></a></li>
<li><a href="#drawing"><span class="idx-no">05</span><span class="idx-name">성수 인쇄공장 재생</span><span class="idx-meta"><span>서울 성수</span><span>2022</span></span></a></li>
<li><a href="#drawing"><span class="idx-no">06</span><span class="idx-name">폼 오피스</span><span class="idx-meta"><span>서울 종로</span><span>2019</span></span></a></li>
</ol>
<p class="toc-note">여섯 건 모두 같은 예시 평면도로 연결됩니다.</p>
<p class="toc-label" id="parts-label">이 장</p>
<ol class="parts" aria-labelledby="parts-label">
<li><a href="#drawing" data-part="drawing">도면</a></li>
<li><a href="#photo" data-part="photo">사진</a></li>
<li><a href="#studio" data-part="studio">연구소</a></li>
</ol>
</nav>
</details>
<div class="progress" aria-hidden="true"><span class="progress-fill"></span></div>
</header>
<section id="drawing" class="section drawing" aria-labelledby="drawing-h">
<div class="wide-rail drawing-grid">
<div class="drawing-notes">
<p class="eyebrow">도면으로 읽는 장면</p>
<h2 id="drawing-h">폼 하우스, 가평</h2>
<p>대지 남쪽의 소나무군을 지우지 않기 위해 집은 길게 눕고, 마당은 집 안쪽으로 들어왔습니다. 구조는 9.6m 축 한 번으로 건너뛰어 거실에 기둥이 없습니다.</p>
<p>벽체는 단열 성능의 요구치에서 두께가 정해졌습니다. 창은 남향 긴면 하나, 동쪽 마당 면 하나. 그 두 개로 이 집의 하루가 결정됩니다.</p>
<dl class="drawing-spec"><div><dt>구조</dt><dd>RC 라멘 · 9.6m 스팬</dd></div><div><dt>면적</dt><dd>132.4 ㎡ (40.0평)</dd></div><div><dt>창개구</dt><dd>남측 14.4m · 동측 4.2m</dd></div><div><dt>공사 기간</dt><dd>2025-04 – 2026-01</dd></div></dl>
</div>
<div class="drawing-stage">
<svg viewBox="0 0 520 640" role="img" aria-label="폼 하우스 1층 평면도. 남쪽으로 긴 거실과 북쪽 서비스 블록, 동쪽 마당으로 이루어져 있다.">
<path class="wall" d="M 80 60 H 440 V 580 H 80 Z M 88 68 H 432 V 572 H 88 Z" /><path class="wall inner" d="M 260 68 V 300 M 260 380 V 572 M 88 300 H 432 M 88 380 H 260" /><path class="door" d="M 260 340 h -36 M 260 340 a 36 36 0 0 1 36 -36" /><path class="column" d="M 176 130 h 10 v 10 h -10 z M 356 130 h 10 v 10 h -10 z M 176 250 h 10 v 10 h -10 z M 356 250 h 10 v 10 h -10 z" />
<g class="dim"><path d="M 80 610 H 440 M 80 602 v 16 M 440 602 v 16" /><path d="M 50 60 V 580 M 42 60 h 16 M 42 580 h 16" /><text x="260" y="632" text-anchor="middle">14,400</text><text x="30" y="325" text-anchor="middle" transform="rotate(-90 30 325)">9,600</text></g>
<g class="room-label"><text x="174" y="190">거실</text><text x="174" y="460">주방·식당</text><text x="350" y="455">서비스</text><text x="350" y="490">현관</text></g><g class="north"><path d="M 470 90 v -40 M 470 50 l -8 14 M 470 50 l 8 14" /><text x="470" y="110" text-anchor="middle">N</text></g>
<main id="main" class="sheet">
<section class="hero" aria-labelledby="hero-h">
<h1 id="hero-h">스튜디오 폼은 주택, 기념관, 오래된 건물의 재생을 설계하는 건축연구소입니다. 프로젝트마다 완공 사진과 평면도를 함께 실어, 집을 왜 그렇게 앉혔는지&nbsp;설명합니다.</h1>
<figure class="stage">
<img src="./assets/pavilion-bw.webp" alt="긴 수평창이 난 콘크리트 파빌리온의 남측 벽에 그림자가 비스듬히 지는 모습" width="1440" height="810" fetchpriority="high" decoding="async" />
<figcaption class="stage-caption"><span class="cap-no">사진 01</span><span>폼 하우스 남측 진입부, 가평</span></figcaption>
</figure>
<p class="notice">이 페이지의 프로젝트명, 연도, 도면과 사진 세 장은 모두 예시입니다. 사진은 생성 이미지이고 실제 프로젝트 사진이 아닙니다.</p>
</section>
<section id="drawing" class="section drawing" aria-labelledby="drawing-h">
<h2 id="drawing-h">폼 하우스는 남쪽 소나무를 베지 않으려고 집을 동서로 길게&nbsp;앉혔습니다.</h2>
<figure class="plan">
<svg class="plan-svg" viewBox="0 0 900 640" role="img" aria-label="폼 하우스 1층 평면도. 동서 14.4미터, 남북 9.6미터. 서쪽은 기둥 없는 거실, 가운데는 동쪽 마당, 동쪽은 주방과 식당, 현관 블록이다.">
<defs><pattern id="court-hatch" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><path class="hatch" d="M 0 0 V 12" /></pattern></defs>
<rect class="court" x="486" y="78" width="108" height="444" fill="url(#court-hatch)" />
<g class="plan-draw">
<path class="wall" pathLength="1" d="M 60 60 H 780 V 540 H 60 Z" />
<path class="wall" pathLength="1" d="M 72 72 H 768 V 528 H 72 Z" />
<path class="wall inner" pathLength="1" d="M 480 72 V 528 M 600 72 V 528 M 600 300 H 768" />
<path class="window" pathLength="1" d="M 72 532 H 480 M 72 536 H 480 M 600 532 H 768 M 600 536 H 768" />
<path class="window" pathLength="1" d="M 474 132 V 342 M 478 132 V 342" />
<path class="door" pathLength="1" d="M 480 420 V 386 A 34 34 0 0 1 514 420" />
<path class="door" pathLength="1" d="M 600 440 V 474 A 34 34 0 0 1 566 440" />
</g>
<g class="dim"><path d="M 60 580 H 780 M 60 572 v 16 M 780 572 v 16" /><path d="M 30 60 V 540 M 22 60 h 16 M 22 540 h 16" /><text x="420" y="604" text-anchor="middle">14,400</text><text x="18" y="300" text-anchor="middle" transform="rotate(-90 18 300)">9,600</text></g>
<g class="room-label"><text x="270" y="300" text-anchor="middle">거실</text><text x="540" y="300" text-anchor="middle">마당</text><text x="684" y="190" text-anchor="middle">주방, 식당</text><text x="684" y="420" text-anchor="middle">현관</text></g>
<g class="north"><path d="M 840 110 v -50 M 840 60 l -8 14 M 840 60 l 8 14" /><text x="840" y="130" text-anchor="middle">N</text></g>
</svg>
<p class="drawing-caption">폼 하우스 · 1층 평면도 · 가상 설계 도면 예시 · mm</p>
<figcaption class="plan-caption"><span class="cap-no">도면 01</span><span>폼 하우스 1층 평면도, 단위 mm</span></figcaption>
</figure>
<div class="drawing-notes">
<div class="prose">
<p>대지 남쪽에 소나무가 있어 집을 동서로 길게 두고, 마당은 거실과 주방 사이 집 안쪽에 넣었습니다. 거실은 남북 9.6m를 보 하나로 건너 기둥이 없습니다.</p>
<p>창은 남쪽 긴 면 전체와 거실 동쪽 마당 쪽에 냈습니다. 아침 해는 마당 쪽 창으로, 낮 햇빛은 남쪽 창으로 들어옵니다. 벽 두께는 단열 기준에 맞춰 정했습니다.</p>
</div>
<dl class="spec">
<div><dt>구조</dt><dd>RC 라멘, 9.6m 스팬</dd></div>
<div><dt>면적</dt><dd>132.4 m² (40.0평)</dd></div>
<div><dt>창개구</dt><dd>남측 14.4m, 동측 4.2m</dd></div>
<div><dt>공사 기간</dt><dd>2025-04 – 2026-01</dd></div>
</dl>
</div>
</div>
</section>
</section>
<section id="photo" class="section photo" aria-labelledby="photo-h">
<div class="wide-rail"><div class="section-head photo-head"><h2 id="photo-h">사진 시퀀스</h2><p>빛의 방향, 재료의 밀도, 비례의 검토를 순서대로 기록합니다.</p></div>
<section id="photo" class="section photo" aria-labelledby="photo-h">
<h2 id="photo-h">재료와 빛은 사진으로 봅니다. 백령도 해녀기념관 전시실과 석고 스터디 모형, 두 장을 실었습니다.</h2>
<div class="photo-grid">
<figure class="ph ph-wide"><img src="./assets/pavilion-bw.webp" alt="긴 수평창이 낸 콘크리트 파빌리온에 벽 그림자가 지는 모습" width="1440" height="810" loading="lazy" /><figcaption><span>폼 하우스 · 남측 · 준공 후 첫 여름</span><span>생성 이미지 · 실제 프로젝트 사진 아님</span></figcaption></figure>
<figure class="ph ph-narrow"><img src="./assets/interior-bw.webp" alt="천창으로 한 줄기 빛이 사선으로 들어오는 미장 마감 전시실" width="900" height="1200" loading="lazy" /><figcaption><span>백령도 해녀기념관 · 제1전시실</span><span>생성 이미지 · 실제 프로젝트 사진 아님</span></figcaption></figure>
<figure class="ph ph-note"><p class="eyebrow">비례의 검토</p><p>빛과 재료의 표정은 사진으로, 공간의 관계는 도면으로 살펴봅니다.</p></figure>
<figure class="ph ph-model"><img src="./assets/model-bw.webp" alt="직육면체를 쌓은 백색 석고 모형에 측광이 지는 모습" width="1100" height="825" loading="lazy" /><figcaption><span>스터디 모델 07 · 석고</span><span>생성 이미지 · 실제 프로젝트 사진 아님</span></figcaption></figure>
<figure class="ph ph-tall">
<figcaption><span class="cap-no">사진 02</span><span>백령도 해녀기념관 제1전시실</span></figcaption>
<img src="./assets/interior-bw.webp" alt="천창으로 한 줄기 빛이 사선으로 들어오는 미장 마감 전시실" width="900" height="1200" loading="lazy" decoding="async" />
</figure>
<figure class="ph ph-panel">
<figcaption><span class="cap-no">사진 03</span><span>스터디 모델 07, 석고</span></figcaption>
<img src="./assets/model-bw.webp" alt="직육면체를 쌓은 백색 석고 모형에 측광이 지는 모습" width="1100" height="825" loading="lazy" decoding="async" />
</figure>
</div>
</div>
</section>
</section>
<section id="contact" class="section contact" aria-labelledby="contact-h"><div class="rail contact-grid"><h2 id="contact-h">구성 안내</h2><address>가상 공간건축 포트폴리오<br />실제 연락처를 제공하지 않습니다.</address><p>이 페이지는 도면·사진·사양을 한 흐름으로 읽는 포트폴리오 형식의 예시입니다. 신규 프로젝트 상담이나 견적을 접수하지 않습니다.</p></div></section>
</main>
<footer class="site-foot"><div class="rail foot-inner"><p>스튜디오 폼 · 가상 공간건축 포트폴리오</p><p>설계 기록 형식 예시</p></div></footer>
<section id="studio" class="section studio" aria-labelledby="studio-h">
<h2 id="studio-h">가상 연구소라 상담과 견적은 받지 않습니다.</h2>
<div class="studio-grid">
<div class="prose">
<p>스튜디오 폼은 이 쇼케이스를 위해 만든 가상 건축연구소입니다. 프로젝트 기록은 완공 사진, 1층 평면도, 설계 이유를 적은 문단 세 가지로 구성하고, 사진으로는 재료와 빛을, 평면도로는 방 배치와 동선을 보여 줍니다.</p>
</div>
<address class="studio-address">스튜디오 폼<br />연락처와 사무실 주소가 없습니다.</address>
</div>
</section>
</main>
<footer class="foot">
<p class="foot-mark" aria-hidden="true">스튜디오 폼</p>
<p class="foot-line">스튜디오 폼은 가상 브랜드 쇼케이스입니다. 실제 사무소가 아닙니다.</p>
</footer>
</div>
<script>
(function () {
var toc = document.getElementById("toc");
if (!toc) return;
var wide = window.matchMedia("(min-width: 64rem)");
function sync() { toc.open = wide.matches; }
sync();
wide.addEventListener("change", sync);
toc.addEventListener("click", function (event) {
if (!wide.matches && event.target.closest("a")) toc.open = false;
});
var links = document.querySelectorAll(".parts a[data-part]");
if (!links.length || !("IntersectionObserver" in window)) return;
var visible = {};
function mark() {
var current = null;
links.forEach(function (link) {
var id = link.getAttribute("data-part");
if (visible[id] && current === null) current = id;
});
links.forEach(function (link) {
if (link.getAttribute("data-part") === current) link.setAttribute("aria-current", "true");
else link.removeAttribute("aria-current");
});
}
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) { visible[entry.target.id] = entry.isIntersecting; });
mark();
}, { rootMargin: "-40% 0px -45% 0px" });
links.forEach(function (link) {
var target = document.getElementById(link.getAttribute("data-part"));
if (target) observer.observe(target);
});
})();
</script>
</body>
</html>