8e3cdb0d3b
Some checks are pending
ci / build (push) Waiting to run
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.
164 lines
12 KiB
HTML
164 lines
12 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="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>
|
||
|
||
<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>
|
||
|
||
<main id="main" class="sheet">
|
||
<section class="hero" aria-labelledby="hero-h">
|
||
<h1 id="hero-h">스튜디오 폼은 주택, 기념관, 오래된 건물의 재생을 설계하는 건축연구소입니다. 프로젝트마다 완공 사진과 평면도를 함께 실어, 집을 왜 그렇게 앉혔는지 설명합니다.</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">폼 하우스는 남쪽 소나무를 베지 않으려고 집을 동서로 길게 앉혔습니다.</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>
|
||
<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>
|
||
</section>
|
||
|
||
<section id="photo" class="section photo" aria-labelledby="photo-h">
|
||
<h2 id="photo-h">재료와 빛은 사진으로 봅니다. 백령도 해녀기념관 전시실과 석고 스터디 모형, 두 장을 실었습니다.</h2>
|
||
<div class="photo-grid">
|
||
<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>
|
||
</section>
|
||
|
||
<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>
|