feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
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.
This commit is contained in:
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
|
|
@ -3,404 +3,379 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>마테리아 스튜디오 (MATERIA) · 하이엔드 주거 & 상업 공간 인테리어 건축</title>
|
||||
<title>마테리아 스튜디오 — 한남과 청담의 주거, 갤러리 인테리어</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="트래버틴 대리석, 훈증 오크, 벨기에 리넨의 촉각적 물성과 자연광의 궤적을 설계하는 하이엔드 인테리어 건축 아틀리에. 한남·청담 펜트하우스 및 프라이빗 갤러리 비스포크 설계."
|
||||
content="마테리아 스튜디오는 한남과 청담의 펜트하우스와 갤러리를 설계하고 직영 시공합니다. 일조를 먼저 재고 로만 트래버틴, 훈증 오크, 벨기에 리넨 같은 마감재를 정합니다. 작업 세 곳, 마감재 네 가지, 4단계 절차와 상담 항목을 안내합니다."
|
||||
/>
|
||||
<meta property="og:title" content="마테리아 스튜디오 (MATERIA) · 하이엔드 인테리어 건축" />
|
||||
<meta property="og:description" content="빛과 트래버틴이 빚어내는 침묵의 공간 건축. 1:1 비스포크 공간 컨설팅." />
|
||||
<meta property="og:title" content="마테리아 스튜디오 — 한남과 청담의 주거, 갤러리 인테리어" />
|
||||
<meta property="og:description" content="일조를 먼저 재고 석재와 오크 마감을 정하는 인테리어 스튜디오. 작업 세 곳과 마감재 네 가지, 상담 항목." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="theme-color" content="#f5f3ef" />
|
||||
<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="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="./styles/fonts.css?v=20260912all" />
|
||||
<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/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
|
||||
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="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
|
||||
<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='%23F5F3EF'/%3E%3Crect x='6' y='6' width='20' height='20' stroke='%23161514' stroke-width='2' fill='none'/%3E%3Crect x='12' y='12' width='8' height='8' fill='%239E8062'/%3E%3C/svg%3E"
|
||||
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>
|
||||
|
||||
<nav class="nav" aria-label="메인 메뉴">
|
||||
<a href="./projects/hannam-duplex/index.html" style="color: var(--accent); font-weight: 600;">24개 공간 갤러리</a>
|
||||
<a href="#works">엄선 프로젝트</a>
|
||||
<a href="#materials">물성 아카이브</a>
|
||||
<a href="#process">설계 프로세스</a>
|
||||
<a href="#contact">프라이빗 상담</a>
|
||||
</nav>
|
||||
|
||||
<div class="head-actions">
|
||||
<div class="ambiance-switcher" role="group" aria-label="조도 모드 전환">
|
||||
<button type="button" class="ambiance-btn is-active" id="btnAmbianceDay">
|
||||
Day
|
||||
</button>
|
||||
<button type="button" class="ambiance-btn" id="btnAmbianceNight">
|
||||
Night
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a href="#contact" class="btn">
|
||||
상담 항목 보기
|
||||
</a>
|
||||
<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-section" aria-labelledby="heroHeading">
|
||||
<div class="wrap hero-grid">
|
||||
<div class="hero-content">
|
||||
<div class="eyebrow">
|
||||
<span>하이엔드 공간 인테리어</span>
|
||||
</div>
|
||||
<h1 id="heroHeading" class="hero-title">
|
||||
빛과 돌이 빚는<br />
|
||||
침묵의 <span class="italic">공간 건축</span>
|
||||
</h1>
|
||||
<p class="hero-desc">
|
||||
우리는 장식을 덧대지 않습니다. 돌의 거친 결, 훈증 오크의 온기, 리넨을 투과하는 자연광의 궤적을 치밀하게 계산하여 시간이 흘러도 변치 않는 하이엔드 주거와 갤러리 공간을 완성합니다.
|
||||
<!-- 전면 이미지 히어로: 사진 한 장이 첫 화면, 표제판은 좌하단, 차례는 표제판 안 -->
|
||||
<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>
|
||||
<div class="hero-ctas">
|
||||
<a href="./projects/hannam-duplex/index.html" class="btn-materia">
|
||||
한남 펜트하우스 24개 공간 감상
|
||||
<span aria-hidden="true">↗</span>
|
||||
</a>
|
||||
<a href="#materials" class="btn-materia" style="background: var(--surface-card); color: var(--ink); border: 1px solid var(--line);">
|
||||
소재와 물성 탐색
|
||||
</a>
|
||||
</div>
|
||||
<a class="btn" href="./projects/hannam-duplex/index.html">24개 공간 사진 보기</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="hero-visual">
|
||||
<figure class="hero-frame">
|
||||
<div class="wrap works-pair">
|
||||
<article class="work work--side">
|
||||
<figure class="work-media">
|
||||
<img
|
||||
src="./assets/penthouse-hero.webp"
|
||||
alt="트래버틴 벽체와 훈증 오크 수납장이 있는 주거 공간 전경"
|
||||
width="1200"
|
||||
height="1600"
|
||||
loading="eager"
|
||||
/>
|
||||
<figcaption class="hero-caption-pill">
|
||||
<span class="hero-caption-name">한남 펜트하우스 레지던스</span>
|
||||
<span class="hero-caption-meta">공간 사진과 물성 조합을 보여 주는 프로젝트 예시</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 엄선 프로젝트 갤러리 (Selected Works) -->
|
||||
<section class="works-section" id="works" aria-labelledby="worksHeading">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<h2 id="worksHeading" class="section-title">엄선된 하이엔드 공간 아카이브</h2>
|
||||
<p class="section-sub">주거 펜트하우스부터 프라이빗 갤러리까지, 공간의 고유한 결을 살린 마테리아의 대표 프로젝트입니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="works-grid">
|
||||
<!-- 프로젝트 1 -->
|
||||
<article class="work-card">
|
||||
<div class="work-card-media">
|
||||
<img
|
||||
src="./assets/penthouse-hero.webp"
|
||||
alt="한남 듀플렉스 펜트하우스 거실 전경"
|
||||
width="600"
|
||||
height="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="work-card-body">
|
||||
<h3 class="work-card-title">한남 듀플렉스 펜트하우스</h3>
|
||||
<div class="work-card-type">Residential · 284㎡ · 로만 트래버틴 & 훈증 오크</div>
|
||||
<p class="work-card-desc">
|
||||
층고 5.8m의 복층 구조에 거친 트래버틴 석재 벽체와 다크 훈증 오크를 대비시켜 웅장하면서도 고요한 빛의 음영을 연출했습니다.
|
||||
</p>
|
||||
<div class="work-card-actions">
|
||||
<a
|
||||
href="./projects/hannam-duplex/index.html"
|
||||
class="btn-materia"
|
||||
>
|
||||
24개 공간 갤러리 감상 ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 프로젝트 2 -->
|
||||
<article class="work-card">
|
||||
<div class="work-card-media">
|
||||
<img
|
||||
src="./assets/materials-macro.webp"
|
||||
alt="청담 프라이빗 갤러리 마감재 매크로"
|
||||
width="600"
|
||||
height="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="work-card-body">
|
||||
<h3 class="work-card-title">청담 프라이빗 갤러리</h3>
|
||||
<div class="work-card-type">Commercial / Gallery · 195㎡ · 마이크로토핑 & 브론즈</div>
|
||||
<p class="work-card-desc">
|
||||
작품이 온전히 숨 쉴 수 있도록 모든 몰딩을 숨긴 무문선·무걸레받이 디테일과 브러시드 브론즈 프레임으로 정갈함을 극대화했습니다.
|
||||
</p>
|
||||
<div class="work-card-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-materia"
|
||||
onclick="openProjectModal('청담 프라이빗 갤러리', '195㎡ (59평)', '이탈리아 마이크로토핑 바닥재, 브러시드 파티나 브론즈, 무반사 저철분 유리', '색채를 배제한 무채색 베이스 위에 섬세한 텍스처를 레이어드하여 미술품의 몰입도를 극대화한 공간입니다.');"
|
||||
>
|
||||
설계 명세 보기 →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 프로젝트 3 -->
|
||||
<article class="work-card">
|
||||
<div class="work-card-media">
|
||||
<img
|
||||
src="./assets/hannam-08-terrace.webp"
|
||||
alt="성북동 포레스트 레지던스 자연석 테라스와 수림 차경"
|
||||
width="600"
|
||||
height="400"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="work-card-body">
|
||||
<h3 class="work-card-title">성북동 포레스트 레지던스</h3>
|
||||
<div class="work-card-type">Private Residence · 340㎡ · 자연석 화강석 & 벨기에 리넨</div>
|
||||
<p class="work-card-desc">
|
||||
북악산 사계절의 숲 풍경을 차경 기법으로 끌어들이고, 실내에는 자연석 아일랜드와 수공예 패브릭을 배치한 친환경 럭셔리 주거.
|
||||
</p>
|
||||
<div class="work-card-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-materia"
|
||||
onclick="openProjectModal('성북동 포레스트 레지던스', '340㎡ (103평)', '가평 통화강석 아일랜드, 스위스 비트라 가구 빌트인, 천연 회벽 마감', '산자락의 자연광과 계절의 변화를 고스란히 담아내는 차경 설계와 천연 자재의 숨결을 결합했습니다.');"
|
||||
>
|
||||
설계 명세 보기 →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 머티리얼 보드 & 촉각성 (Tactile Materiality) -->
|
||||
<section class="material-section" id="materials" aria-labelledby="matHeading">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<h2 id="matHeading" class="section-title">자연이 빚은 물성과 촉각의 조화</h2>
|
||||
<p class="section-sub">마테리아가 선별한 최상급 건축 마감재는 인위적인 가공을 최소화하여 시간의 깊이를 머금습니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="material-grid">
|
||||
<div class="material-frame">
|
||||
<img
|
||||
src="./assets/materials-macro.webp"
|
||||
alt="트래버틴 대리석, 훈증 오크, 벨기에 리넨, 브론즈 머티리얼 플랫레이"
|
||||
width="800"
|
||||
height="600"
|
||||
src="./assets/hannam-21-art-niche.webp"
|
||||
alt="청담 프라이빗 갤러리의 트래버틴 좌대와 작품만 비추는 조명"
|
||||
width="1376"
|
||||
height="768"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="material-specs">
|
||||
<div class="mat-item">
|
||||
<span class="mat-name">로만 트래버틴</span>
|
||||
<span class="mat-desc">이탈리아 티볼리 채석장의 천연 석회암. 무수한 다공성 질감이 빛을 부드럽게 난반사합니다.</span>
|
||||
</div>
|
||||
<div class="mat-item">
|
||||
<span class="mat-name">훈증 오크 (Bog Oak)</span>
|
||||
<span class="mat-desc">수백 년간 수중 숙성된 천연 고재의 깊은 탄화 흑색과 치밀한 나이테 결을 그대로 보존합니다.</span>
|
||||
</div>
|
||||
<div class="mat-item">
|
||||
<span class="mat-name">벨기에 천연 리넨</span>
|
||||
<span class="mat-desc">플랑드르 지방의 무표백 아마 섬유로 짠 고밀도 원단. 부드럽게 빛을 거르고 통기성을 제공합니다.</span>
|
||||
</div>
|
||||
<div class="mat-item">
|
||||
<span class="mat-name">파티나 브론즈</span>
|
||||
<span class="mat-desc">손길이 닿을수록 자연스러운 에이징 산화 피막이 형성되는 수공예 황동 하드웨어입니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4단계 마스터 프로세스 -->
|
||||
<section class="process-section" id="process" aria-labelledby="procHeading">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<h2 id="procHeading" class="section-title">비스포크 공간 건축 4단계 프로세스</h2>
|
||||
<p class="section-sub">기획부터 완공 인도까지, 총괄 디렉터 1인이 모든 자재와 조도를 책임지고 총괄합니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="process-grid">
|
||||
<div class="process-card">
|
||||
<div class="process-step">PHASE 01</div>
|
||||
<h3>일조 및 공간 진단</h3>
|
||||
<p>현장의 24시간 태양 궤적, 조망 축, 구조 하중을 분석하여 채광의 최적 배치를 기획합니다.</p>
|
||||
</div>
|
||||
<div class="process-card">
|
||||
<div class="process-step">PHASE 02</div>
|
||||
<h3>촉각적 머티리얼 페어링</h3>
|
||||
<p>맞춤형 자재 샘플 보드로 생활 방식과 촉감 선호도를 함께 살펴봅니다.</p>
|
||||
</div>
|
||||
<div class="process-card">
|
||||
<div class="process-step">PHASE 03</div>
|
||||
<h3>3D 광학 시뮬레이션</h3>
|
||||
<p>낮빛과 2700K 조명에서 빛이 퍼지는 모습을 공간 시뮬레이션으로 미리 살펴봅니다.</p>
|
||||
</div>
|
||||
<div class="process-card">
|
||||
<div class="process-step">PHASE 04</div>
|
||||
<h3>장인 직영 디테일 시공</h3>
|
||||
<p>30년 경력의 석재·목공 마스터 장인팀이 밀리미터 단위의 오차 없는 시공을 완성합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 프라이빗 공간 컨설팅 신청 -->
|
||||
<section class="contact-section" id="contact" aria-labelledby="contactHeading">
|
||||
<div class="wrap">
|
||||
<div class="contact-card">
|
||||
<div style="text-align: center; margin-bottom: var(--space-6);">
|
||||
<div class="eyebrow">프라이빗 컨설팅</div>
|
||||
<h2 id="contactHeading" style="font-family: var(--font-serif); font-size: var(--step-2); margin-top: 6px;">
|
||||
프라이빗 공간 상담 항목
|
||||
</h2>
|
||||
<p style="font-size: var(--step-0); color: var(--ink-muted); margin-top: 6px;">
|
||||
공간 유형과 규모, 예산 범위를 정리해 보세요.
|
||||
</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>
|
||||
</div>
|
||||
<p class="demo-notice" role="note">안내: 이 페이지의 프로젝트와 상담 항목은 공간 연출 예시입니다. 입력 정보는 저장·전송되지 않으며 실제 상담으로 접수되지 않습니다.</p>
|
||||
|
||||
<form id="consultForm" onsubmit="return false;">
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
||||
<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 style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
||||
<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-materia" id="btnSubmitConsult" style="width: 100%; padding: 14px; margin-top: 10px;">
|
||||
입력한 상담 항목 확인
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-line"
|
||||
onclick="openProjectModal('청담 프라이빗 갤러리', '195㎡ (59평)', '이탈리아 마이크로토핑 바닥재, 브러시드 파티나 브론즈, 무반사 저철분 유리', '벽과 바닥은 무채색으로 통일하고 질감만 다르게 써서, 관람객의 시선이 작품에 머물도록 했습니다.');"
|
||||
>
|
||||
설계 내용 보기
|
||||
</button>
|
||||
</form>
|
||||
</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>
|
||||
|
||||
<!-- 프로젝트 상세 모달 다이얼로그 -->
|
||||
<dialog id="projectModal" class="project-dialog" aria-labelledby="pModalTitle">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem;">
|
||||
<h3 id="pModalTitle" style="font-family: var(--font-serif); font-size: var(--step-1); color: var(--ink);">
|
||||
프로젝트 설계 아카이브
|
||||
</h3>
|
||||
<button type="button" onclick="document.getElementById('projectModal').close();" aria-label="닫기" style="font-size: 18px; font-weight: 700; color: var(--ink-muted);">✕</button>
|
||||
</div>
|
||||
<div style="display: grid; gap: 0.85rem; font-size: var(--step--1); line-height: 1.6;">
|
||||
<div><strong>프로젝트명:</strong> <span id="mProjName" style="color:var(--accent); font-weight:700;"></span></div>
|
||||
<div><strong>공간 면적:</strong> <span id="mProjArea" class="mono"></span></div>
|
||||
<div><strong>주요 마감재:</strong> <span id="mProjMaterials"></span></div>
|
||||
<div style="margin-top: 4px; padding: 12px; background: var(--surface-card); border-radius: var(--radius-sm); border: 1px solid var(--line);">
|
||||
<strong>설계 의도:</strong><br />
|
||||
<span id="mProjNotes" style="color:var(--ink-muted);"></span>
|
||||
<!-- 푸터 = 다음 행동 하나(상담 폼). 고지는 그 안의 한 줄이다 -->
|
||||
<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>
|
||||
</div>
|
||||
<div style="margin-top: 1.5rem; text-align: right;">
|
||||
<button type="button" class="btn-materia" style="padding: 6px 20px; font-size: 13px;" onclick="document.getElementById('projectModal').close();">닫기</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!-- 푸터 (.site-foot SSOT) -->
|
||||
<footer class="site-foot">
|
||||
<div class="wrap foot-inner">
|
||||
<p>마테리아 스튜디오 · 공간 설계 안내</p>
|
||||
<p class="muted">이 페이지의 프로젝트·상담 항목은 예시이며 입력 정보는 저장·전송되지 않습니다.</p>
|
||||
<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 () {
|
||||
// 1. 조도 앰비언스 모드 스위처 (자연광 Day vs 야간 Night)
|
||||
// 낮·밤 조명 보기. 토큰만 바뀌고 레이아웃은 그대로다
|
||||
const btnDay = document.getElementById("btnAmbianceDay");
|
||||
const btnNight = document.getElementById("btnAmbianceNight");
|
||||
|
||||
function setAmbiance(mode) {
|
||||
document.body.setAttribute("data-ambiance", mode);
|
||||
if (mode === "night") {
|
||||
btnNight.classList.add("is-active");
|
||||
btnDay.classList.remove("is-active");
|
||||
} else {
|
||||
btnDay.classList.add("is-active");
|
||||
btnNight.classList.remove("is-active");
|
||||
}
|
||||
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"));
|
||||
|
||||
// 2. 상담 신청 폼
|
||||
// 상담 항목 확인. 저장·전송하지 않는다
|
||||
const btnConsult = document.getElementById("btnSubmitConsult");
|
||||
if (btnConsult) {
|
||||
btnConsult.addEventListener("click", () => {
|
||||
|
|
@ -412,7 +387,6 @@
|
|||
}
|
||||
})();
|
||||
|
||||
// 프로젝트 모달 팝업 함수
|
||||
function openProjectModal(name, area, materials, notes) {
|
||||
document.getElementById("mProjName").textContent = name;
|
||||
document.getElementById("mProjArea").textContent = area;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue