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.
399 lines
21 KiB
HTML
399 lines
21 KiB
HTML
<!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="마테리아 스튜디오는 한남과 청담의 펜트하우스와 갤러리를 설계하고 직영 시공합니다. 일조를 먼저 재고 로만 트래버틴, 훈증 오크, 벨기에 리넨 같은 마감재를 정합니다. 작업 세 곳, 마감재 네 가지, 4단계 절차와 상담 항목을 안내합니다."
|
|
/>
|
|
<meta property="og:title" content="마테리아 스튜디오 — 한남과 청담의 주거, 갤러리 인테리어" />
|
|
<meta property="og:description" content="일조를 먼저 재고 석재와 오크 마감을 정하는 인테리어 스튜디오. 작업 세 곳과 마감재 네 가지, 상담 항목." />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="https://designpaca.chanpaca.net/work/materia-interior/assets/hannam-01-living-void.webp" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="theme-color" content="#e8e0d4" />
|
|
|
|
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
|
<link rel="preload" as="image" href="./assets/hannam-01-living-void.webp" media="(min-width: 701px)" />
|
|
<link rel="preload" as="image" href="./assets/penthouse-hero.webp" media="(max-width: 700px)" />
|
|
<!-- 이롭게 바탕(OFL 1.1, iropke/font-iropke-batang README 확인 2026-10-06)은 main.css 의 @font-face 로 싣는다(font-display: swap) -->
|
|
<!-- Wanted Sans Variable: OFL 1.1(wanteddev/wanted-sans OFL.txt), 유니코드 범위 분할 서브셋, font-display: swap -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css"
|
|
/>
|
|
<link rel="stylesheet" href="./styles/tokens.css" />
|
|
<link rel="stylesheet" href="./styles/main.css" />
|
|
<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='%23e8e0d4'/%3E%3Crect x='6' y='6' width='20' height='20' stroke='%231f1d18' stroke-width='2' fill='none'/%3E%3Crect x='12' y='12' width='8' height='8' fill='%2343632c'/%3E%3C/svg%3E"
|
|
/>
|
|
</head>
|
|
|
|
<body data-ambiance="day">
|
|
<a class="skip-link" href="#mainContent">본문으로 건너뛰기</a>
|
|
|
|
<!-- 종이 결 재질: feTurbulence 높이맵을 조명해 바탕색 위에 곱한다. 필터를 꺼도 바탕은 토큰 색 그대로다 -->
|
|
<svg class="paper" aria-hidden="true" focusable="false">
|
|
<filter id="paperGrain" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
|
|
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7" result="noise" />
|
|
<feDiffuseLighting in="noise" surface-scale="1.4" result="lit">
|
|
<feDistantLight azimuth="45" elevation="62" />
|
|
</feDiffuseLighting>
|
|
<feComposite in="lit" in2="SourceAlpha" operator="in" />
|
|
</filter>
|
|
<rect width="100%" height="100%" filter="url(#paperGrain)" />
|
|
</svg>
|
|
|
|
<header class="site-head">
|
|
<div class="wrap head-inner">
|
|
<a class="wordmark" href="./index.html">MATERIA</a>
|
|
<p class="head-note">주거와 갤러리 인테리어 스튜디오, 서울</p>
|
|
<div class="ambiance-switcher" role="group" aria-label="낮과 밤 조명 보기 전환">
|
|
<button type="button" class="ambiance-btn is-active" id="btnAmbianceDay" data-theme="day" aria-pressed="true">낮</button>
|
|
<button type="button" class="ambiance-btn" id="btnAmbianceNight" data-theme="night" aria-pressed="false">밤</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="mainContent">
|
|
<!-- 전면 이미지 히어로: 사진 한 장이 첫 화면, 표제판은 좌하단, 차례는 표제판 안 -->
|
|
<section class="hero" aria-labelledby="heroHeading">
|
|
<picture class="hero-photo">
|
|
<source media="(max-width: 700px)" srcset="./assets/penthouse-hero.webp" width="896" height="1195" />
|
|
<img
|
|
src="./assets/hannam-01-living-void.webp"
|
|
alt="한남 펜트하우스 거실. 층고 5.8m 트래버틴 벽과 훈증 오크 수납장, 남향 창으로 드는 오후 빛"
|
|
width="1376"
|
|
height="768"
|
|
fetchpriority="high"
|
|
decoding="async"
|
|
/>
|
|
</picture>
|
|
|
|
<div class="hero-plate">
|
|
<h1 id="heroHeading" class="hero-title">
|
|
마테리아는 한남과 청담의 펜트하우스와 갤러리를 설계합니다. 현장에서 시간대별 일조를 먼저 재고, 빛이 드는 자리에 맞춰 로만 트래버틴과 훈증 오크, 벨기에 리넨을 정합니다.
|
|
</h1>
|
|
<nav class="toc" aria-label="차례">
|
|
<ol class="toc-list">
|
|
<li class="toc-item">
|
|
<a class="toc-link" href="#works">
|
|
<span class="toc-name">작업</span>
|
|
<span class="toc-desc">한남 펜트하우스, 청담 갤러리, 성북동 주택</span>
|
|
</a>
|
|
</li>
|
|
<li class="toc-item">
|
|
<a class="toc-link" href="#materials">
|
|
<span class="toc-name">마감재</span>
|
|
<span class="toc-desc">트래버틴, 훈증 오크, 리넨, 브론즈</span>
|
|
</a>
|
|
</li>
|
|
<li class="toc-item">
|
|
<a class="toc-link" href="#process">
|
|
<span class="toc-name">절차</span>
|
|
<span class="toc-desc">일조 진단부터 직영 시공까지 4단계</span>
|
|
</a>
|
|
</li>
|
|
<li class="toc-item">
|
|
<a class="toc-link" href="#contact">
|
|
<span class="toc-name">상담</span>
|
|
<span class="toc-desc">상담 전에 정리할 항목과 신청 폼</span>
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
|
|
<p class="hero-caption">한남 펜트하우스 거실, 로만 트래버틴 벽과 훈증 오크 수납장</p>
|
|
</section>
|
|
|
|
<!-- 작업 세 곳: 대표 1점은 왼쪽 끝까지 흘리고, 보조 2점은 오른쪽 열에 쌓는다 -->
|
|
<section class="works" id="works" aria-labelledby="worksHeading">
|
|
<div class="wrap section-head">
|
|
<p class="section-index">작업</p>
|
|
<h2 id="worksHeading" class="section-title">한남, 청담, 성북동에서 설계하고 시공한 공간 세 곳</h2>
|
|
</div>
|
|
|
|
<article class="work work--lead">
|
|
<figure class="work-media bleed-left">
|
|
<img
|
|
src="./assets/hannam-10-staircase.webp"
|
|
alt="한남 듀플렉스 펜트하우스의 캔틸레버 오크 계단과 트래버틴 벽"
|
|
width="1376"
|
|
height="768"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</figure>
|
|
<div class="work-body">
|
|
<h3 class="work-title">한남 듀플렉스 펜트하우스</h3>
|
|
<dl class="facts">
|
|
<div class="fact"><dt>용도</dt><dd>주거, 복층</dd></div>
|
|
<div class="fact"><dt>면적</dt><dd>284㎡</dd></div>
|
|
<div class="fact"><dt>마감</dt><dd>로만 트래버틴, 훈증 오크</dd></div>
|
|
</dl>
|
|
<p class="work-desc">
|
|
층고 5.8m 복층 거실에 트래버틴 석재 벽과 짙은 훈증 오크 수납장을 함께 썼습니다. 남향 창으로 드는 빛이 석재 벽에 시간대별 음영을 만듭니다. 거실부터 와인 셀러까지 24개 공간을 사진으로 볼 수 있습니다.
|
|
</p>
|
|
<a class="btn" href="./projects/hannam-duplex/index.html">24개 공간 사진 보기</a>
|
|
</div>
|
|
</article>
|
|
|
|
<div class="wrap works-pair">
|
|
<article class="work work--side">
|
|
<figure class="work-media">
|
|
<img
|
|
src="./assets/hannam-21-art-niche.webp"
|
|
alt="청담 프라이빗 갤러리의 트래버틴 좌대와 작품만 비추는 조명"
|
|
width="1376"
|
|
height="768"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</figure>
|
|
<div class="work-body">
|
|
<h3 class="work-title">청담 프라이빗 갤러리</h3>
|
|
<dl class="facts">
|
|
<div class="fact"><dt>용도</dt><dd>갤러리</dd></div>
|
|
<div class="fact"><dt>면적</dt><dd>195㎡</dd></div>
|
|
<div class="fact"><dt>마감</dt><dd>마이크로토핑, 브론즈</dd></div>
|
|
</dl>
|
|
<p class="work-desc">
|
|
작품에 시선이 모이도록 몰딩과 걸레받이를 없앤 무몰딩 마감으로 벽을 정리하고, 창과 진열장 프레임은 브러시드 브론즈로 맞췄습니다.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
class="btn btn-line"
|
|
onclick="openProjectModal('청담 프라이빗 갤러리', '195㎡ (59평)', '이탈리아 마이크로토핑 바닥재, 브러시드 파티나 브론즈, 무반사 저철분 유리', '벽과 바닥은 무채색으로 통일하고 질감만 다르게 써서, 관람객의 시선이 작품에 머물도록 했습니다.');"
|
|
>
|
|
설계 내용 보기
|
|
</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="work work--side">
|
|
<figure class="work-media">
|
|
<img
|
|
src="./assets/hannam-08-terrace.webp"
|
|
alt="성북동 포레스트 레지던스의 자연석 테라스와 숲 조망"
|
|
width="1376"
|
|
height="768"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</figure>
|
|
<div class="work-body">
|
|
<h3 class="work-title">성북동 포레스트 레지던스</h3>
|
|
<dl class="facts">
|
|
<div class="fact"><dt>용도</dt><dd>단독주택</dd></div>
|
|
<div class="fact"><dt>면적</dt><dd>340㎡</dd></div>
|
|
<div class="fact"><dt>마감</dt><dd>자연석 화강석, 벨기에 리넨</dd></div>
|
|
</dl>
|
|
<p class="work-desc">
|
|
거실 창 너머로 북악산 숲이 보이도록 배치하고, 주방에는 자연석 아일랜드, 침실에는 리넨 패브릭을 썼습니다.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
class="btn btn-line"
|
|
onclick="openProjectModal('성북동 포레스트 레지던스', '340㎡ (103평)', '가평 통화강석 아일랜드, 스위스 비트라 가구 빌트인, 천연 회벽 마감', '큰 창으로 북악산 숲을 거실 풍경으로 들이고, 실내는 화강석과 회벽 같은 천연 자재로 마감했습니다.');"
|
|
>
|
|
설계 내용 보기
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 마감재 네 가지: 접사 사진을 오른쪽 끝까지 흘린다 -->
|
|
<section class="materials" id="materials" aria-labelledby="matHeading">
|
|
<div class="materials-grid">
|
|
<div class="materials-body">
|
|
<p class="section-index">마감재</p>
|
|
<h2 id="matHeading" class="section-title">자주 쓰는 마감재 네 가지, 전부 가공을 줄인 천연 소재입니다</h2>
|
|
<dl class="mat-list">
|
|
<div class="mat-item">
|
|
<dt class="mat-name">로만 트래버틴</dt>
|
|
<dd class="mat-desc">이탈리아 티볼리산 천연 석회암. 표면의 작은 구멍들이 빛을 고르게 흩어 눈부심이 적습니다.</dd>
|
|
</div>
|
|
<div class="mat-item">
|
|
<dt class="mat-name">훈증 오크</dt>
|
|
<dd class="mat-desc">수백 년 넘게 물속에 묻혀 있던 참나무 고재. 짙은 흑갈색과 촘촘한 나이테가 특징입니다.</dd>
|
|
</div>
|
|
<div class="mat-item">
|
|
<dt class="mat-name">벨기에 천연 리넨</dt>
|
|
<dd class="mat-desc">플랑드르 지방의 무표백 아마로 짠 고밀도 원단. 커튼으로 쓰면 빛을 부드럽게 거르고 바람이 잘 통합니다.</dd>
|
|
</div>
|
|
<div class="mat-item">
|
|
<dt class="mat-name">파티나 브론즈</dt>
|
|
<dd class="mat-desc">손이 닿을수록 표면에 산화막이 생겨 색이 깊어지는 수공예 브론즈 손잡이와 하드웨어입니다.</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
<figure class="materials-media bleed-right">
|
|
<img
|
|
src="./assets/materials-macro.webp"
|
|
alt="트래버틴, 훈증 오크, 벨기에 리넨, 브론즈 샘플을 한 상 위에 놓은 접사"
|
|
width="1376"
|
|
height="768"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<figcaption class="materials-caption">샘플 보드. 왼쪽부터 트래버틴, 훈증 오크, 리넨, 브론즈</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 절차 4단계: 글만. 번호가 이 페이지에서 가장 큰 글자다 -->
|
|
<section class="process" id="process" aria-labelledby="procHeading">
|
|
<div class="wrap">
|
|
<div class="section-head section-head--inline">
|
|
<p class="section-index">절차</p>
|
|
<h2 id="procHeading" class="section-title">일조 진단부터 직영 시공까지 4단계, 디렉터 한 명이 끝까지 맡습니다</h2>
|
|
</div>
|
|
<ol class="steps">
|
|
<li class="step">
|
|
<span class="step-num" aria-hidden="true">1</span>
|
|
<h3 class="step-title">일조와 현장 진단</h3>
|
|
<p class="step-desc">시간대별 해의 위치, 창밖 조망, 구조 하중을 확인해 채광에 맞게 공간을 배치합니다.</p>
|
|
</li>
|
|
<li class="step">
|
|
<span class="step-num" aria-hidden="true">2</span>
|
|
<h3 class="step-title">마감재 선정</h3>
|
|
<p class="step-desc">실물 샘플 보드를 보며 생활 방식과 원하는 촉감에 맞는 자재를 고릅니다.</p>
|
|
</li>
|
|
<li class="step">
|
|
<span class="step-num" aria-hidden="true">3</span>
|
|
<h3 class="step-title">3D 조명 시뮬레이션</h3>
|
|
<p class="step-desc">낮 시간 자연광과 2700K 조명에서 공간이 어떻게 보이는지 3D로 미리 확인합니다.</p>
|
|
</li>
|
|
<li class="step">
|
|
<span class="step-num" aria-hidden="true">4</span>
|
|
<h3 class="step-title">직영 시공</h3>
|
|
<p class="step-desc">경력 30년의 석재와 목공 팀이 직접 시공하고, 마감 오차를 밀리미터 단위로 확인합니다.</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- 푸터 = 다음 행동 하나(상담 폼). 고지는 그 안의 한 줄이다 -->
|
|
<footer class="site-foot" id="contact" aria-labelledby="contactHeading">
|
|
<div class="wrap foot-grid">
|
|
<div class="foot-lead">
|
|
<p class="section-index">상담</p>
|
|
<h2 id="contactHeading" class="section-title">상담 전에 공간 유형과 면적, 예산 범위를 정리해 주세요</h2>
|
|
<p class="foot-desc">항목을 적어 두면 첫 상담에서 일조 진단 일정과 마감재 후보까지 바로 이야기할 수 있습니다.</p>
|
|
<p class="demo-notice" role="note">안내: 이 페이지의 프로젝트와 상담 항목은 공간 연출 예시입니다. 입력 정보는 저장하거나 전송하지 않으며 실제 상담으로 접수되지 않습니다.</p>
|
|
</div>
|
|
|
|
<form class="consult" id="consultForm" onsubmit="return false;">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label" for="spaceType">공간 유형</label>
|
|
<select id="spaceType" class="form-select">
|
|
<option>주거 펜트하우스 / 타운하우스</option>
|
|
<option>단독주택 신축 / 대수선</option>
|
|
<option>프라이빗 갤러리 / 플래그십</option>
|
|
<option>하이엔드 오피스 라운지</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="spaceArea">예상 전용면적</label>
|
|
<input type="text" id="spaceArea" class="form-input" placeholder="예: 65평 (214㎡)" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label" for="clientName">성함</label>
|
|
<input type="text" id="clientName" class="form-input" placeholder="성함" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="clientPhone">연락처</label>
|
|
<input type="tel" id="clientPhone" class="form-input" placeholder="연락처" required />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="clientBudget">예상 공사 예산 범위</label>
|
|
<select id="clientBudget" class="form-select">
|
|
<option>1억 5천만 원 ~ 3억 원</option>
|
|
<option selected>3억 원 ~ 5억 원</option>
|
|
<option>5억 원 이상</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="clientNote">원하는 분위기와 요청 사항</label>
|
|
<textarea id="clientNote" class="form-textarea" rows="3" placeholder="선호하는 자재, 착공 희망 시기 등을 적어 주세요."></textarea>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-wide" id="btnSubmitConsult">입력한 상담 항목 확인</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="wrap foot-base">
|
|
<p class="foot-brand">MATERIA</p>
|
|
<p class="foot-note">마테리아 스튜디오는 가상 브랜드 쇼케이스입니다. 프로젝트와 상담 항목은 예시입니다.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<dialog id="projectModal" class="project-dialog" aria-labelledby="pModalTitle">
|
|
<div class="dialog-head">
|
|
<h3 id="pModalTitle" class="dialog-title">프로젝트 상세</h3>
|
|
<button type="button" class="dialog-close" onclick="document.getElementById('projectModal').close();" aria-label="닫기">✕</button>
|
|
</div>
|
|
<dl class="dialog-facts">
|
|
<div class="fact"><dt>프로젝트명</dt><dd id="mProjName"></dd></div>
|
|
<div class="fact"><dt>공간 면적</dt><dd id="mProjArea"></dd></div>
|
|
<div class="fact"><dt>주요 마감재</dt><dd id="mProjMaterials"></dd></div>
|
|
<div class="fact fact--note"><dt>설계 의도</dt><dd id="mProjNotes"></dd></div>
|
|
</dl>
|
|
<div class="dialog-actions">
|
|
<button type="button" class="btn" onclick="document.getElementById('projectModal').close();">닫기</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<script>
|
|
(function () {
|
|
// 낮·밤 조명 보기. 토큰만 바뀌고 레이아웃은 그대로다
|
|
const btnDay = document.getElementById("btnAmbianceDay");
|
|
const btnNight = document.getElementById("btnAmbianceNight");
|
|
|
|
function setAmbiance(mode) {
|
|
document.body.setAttribute("data-ambiance", mode);
|
|
const nightOn = mode === "night";
|
|
btnNight.classList.toggle("is-active", nightOn);
|
|
btnDay.classList.toggle("is-active", !nightOn);
|
|
btnNight.setAttribute("aria-pressed", String(nightOn));
|
|
btnDay.setAttribute("aria-pressed", String(!nightOn));
|
|
}
|
|
|
|
btnDay.addEventListener("click", () => setAmbiance("day"));
|
|
btnNight.addEventListener("click", () => setAmbiance("night"));
|
|
|
|
// 상담 항목 확인. 저장·전송하지 않는다
|
|
const btnConsult = document.getElementById("btnSubmitConsult");
|
|
if (btnConsult) {
|
|
btnConsult.addEventListener("click", () => {
|
|
const name = document.getElementById("clientName").value || "고객님";
|
|
const spaceType = document.getElementById("spaceType").value;
|
|
const area = document.getElementById("spaceArea").value;
|
|
alert(`${name}님이 입력한 상담 항목을 확인했습니다. (${spaceType} / ${area || "면적 미입력"})\n실제 상담은 접수되지 않았으며 입력 정보는 저장하거나 전송하지 않습니다.`);
|
|
});
|
|
}
|
|
})();
|
|
|
|
function openProjectModal(name, area, materials, notes) {
|
|
document.getElementById("mProjName").textContent = name;
|
|
document.getElementById("mProjArea").textContent = area;
|
|
document.getElementById("mProjMaterials").textContent = materials;
|
|
document.getElementById("mProjNotes").textContent = notes;
|
|
document.getElementById("projectModal").showModal();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|