95 lines
9 KiB
HTML
95 lines
9 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="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" />
|
||
</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>
|
||
|
||
<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>
|
||
</svg>
|
||
<p class="drawing-caption">폼 하우스 · 1층 평면도 · 가상 설계 도면 예시 · mm</p>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</body>
|
||
</html>
|