430 lines
22 KiB
HTML
430 lines
22 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>마테리아 스튜디오 (MATERIA) · 하이엔드 주거 & 상업 공간 인테리어 건축</title>
|
|
<meta
|
|
name="description"
|
|
content="트래버틴 대리석, 훈증 오크, 벨기에 리넨의 촉각적 물성과 자연광의 궤적을 설계하는 하이엔드 인테리어 건축 아틀리에. 한남·청담 펜트하우스 및 프라이빗 갤러리 비스포크 설계."
|
|
/>
|
|
<meta property="og:title" content="마테리아 스튜디오 (MATERIA) · 하이엔드 인테리어 건축" />
|
|
<meta property="og:description" content="빛과 트래버틴이 빚어내는 침묵의 공간 건축. 1:1 비스포크 공간 컨설팅." />
|
|
<meta property="og:type" content="website" />
|
|
<meta name="theme-color" content="#f5f3ef" />
|
|
|
|
<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="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
|
|
/>
|
|
<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="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
|
|
/>
|
|
<link rel="stylesheet" href="./styles/main.css?v=1" />
|
|
<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"
|
|
/>
|
|
</head>
|
|
|
|
<body data-ambiance="day">
|
|
<a class="skip-link" href="#mainContent">본문으로 건너뛰기</a>
|
|
|
|
<!-- 상단 헤더 & 조도 스위처 -->
|
|
<header class="site-head">
|
|
<div class="wrap head-inner">
|
|
<a class="wordmark" href="./index.html">
|
|
MATERIA <span class="wordmark-han">空間素材</span>
|
|
</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>
|
|
</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>HIGH-END ARCHITECTURAL INTERIOR</span>
|
|
</div>
|
|
<h1 id="heroHeading" class="hero-title">
|
|
빛과 트래버틴이 빚어내는<br />
|
|
침묵의 <span class="italic">공간 건축</span>
|
|
</h1>
|
|
<p class="hero-desc">
|
|
우리는 장식을 덧대지 않습니다. 돌의 거친 결, 훈증 오크의 온기, 리넨을 투과하는 자연광의 궤적을 치밀하게 계산하여 시간이 흘러도 변치 않는 하이엔드 주거와 갤러리 공간을 완성합니다.
|
|
</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>
|
|
</div>
|
|
|
|
<div class="hero-visual" style="position: relative;">
|
|
<div class="bezel-outer">
|
|
<div class="hero-frame">
|
|
<img
|
|
src="./assets/penthouse-hero.webp"
|
|
alt="트래버틴 벽체와 훈증 오크 수납장이 조화된 하이엔드 펜트하우스 거실 전경"
|
|
width="1200"
|
|
height="1600"
|
|
loading="eager"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="hero-caption-pill">
|
|
<div class="hero-caption-name">한남 펜트하우스 레지던스</div>
|
|
<div class="hero-caption-meta">Hannam · 284㎡ (86평) · 2026.04 준공</div>
|
|
</div>
|
|
</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"
|
|
loading="lazy"
|
|
/>
|
|
</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>실제 1:1 자재 샘플 보드를 제작하여 거주자의 라이프스타일과 촉감 선호도를 일치시킵니다.</p>
|
|
</div>
|
|
<div class="process-card">
|
|
<div class="process-step">PHASE 03</div>
|
|
<h3>3D 광학 시뮬레이션</h3>
|
|
<p>주광(Daylight)과 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">BESPOKE CONSULTATION</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;">
|
|
월 최대 3건의 프로젝트만을 엄선하여 타협 없는 완성도를 보증합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<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㎡)" value="82평 (271㎡)" />
|
|
</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="성함" value="김민준" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="clientPhone">연락처</label>
|
|
<input type="tel" id="clientPhone" class="form-input" placeholder="010-0000-0000" value="010-5920-8812" 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="추구하시는 분위기, 선호 자재, 착공 희망 시기 등을 자유롭게 적어주세요.">거실에 웅장한 트래버틴 벽체와 자연스러운 간접 조명을 조성하고 싶습니다. 2026년 10월 착공 희망합니다.</textarea>
|
|
</div>
|
|
|
|
<button type="button" class="btn-materia" id="btnSubmitConsult" style="width: 100%; padding: 14px; margin-top: 10px;">
|
|
프라이빗 디자인 상담 신청 완료
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</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>
|
|
</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>마테리아 스튜디오 · 서울 강남구 압구정로 72길 14</p>
|
|
<p class="muted">월요일부터 금요일까지 (사전 예약제)</p>
|
|
<p class="muted">studio@materia.kr</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- 인터랙티브 스크립트 -->
|
|
<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");
|
|
}
|
|
}
|
|
|
|
btnDay.addEventListener("click", () => setAmbiance("day"));
|
|
btnNight.addEventListener("click", () => setAmbiance("night"));
|
|
|
|
// 2. 상담 신청 폼
|
|
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담당 수석 디렉터가 24시간 이내에 포트폴리오 자료와 함께 직접 연락드리겠습니다.`);
|
|
});
|
|
}
|
|
})();
|
|
|
|
// 프로젝트 모달 팝업 함수
|
|
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>
|