225 lines
20 KiB
HTML
225 lines
20 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#f3f0e8">
|
||
<meta name="description" content="서울 한남 생활권의 집을 예산, 면적, 입주, 주차 조건으로 비교하고 AI 브리핑 뒤 공인중개사가 사실을 다시 확인하는 스마트 중개 디자인 쇼케이스입니다.">
|
||
<meta property="og:title" content="한남자리 — 내 기준에 맞는 집부터">
|
||
<meta property="og:description" content="조건을 정리하고 후보를 비교한 뒤 공인중개사가 확인하는 개인 주거 브리핑 데스크">
|
||
<meta property="og:image" content="./og.png">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="한남자리 — 내 기준에 맞는 집부터">
|
||
<meta name="twitter:description" content="서울의 집을 내 조건으로 대조하는 개인 주거 브리핑 데스크">
|
||
<meta name="twitter:image" content="./og.png">
|
||
<title>한남자리 — 내 기준에 맞는 집부터</title>
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23121311'/%3E%3Ctext x='32' y='39' text-anchor='middle' font-family='Arial' font-size='19' font-weight='700' fill='%23f3f0e8'%3EHJ%3C/text%3E%3C/svg%3E">
|
||
<link rel="preload" href="./assets/hannam-evening-1600.webp" as="image" type="image/webp" media="(min-width: 961px)">
|
||
<link rel="stylesheet" href="./styles/tokens.css?v=20260829d">
|
||
<link rel="stylesheet" href="./styles/landing.css?v=20260829d">
|
||
<script src="./scripts/landing.js?v=20260829d" defer></script>
|
||
</head>
|
||
<body>
|
||
<a class="skip-link" href="#main-content">본문 바로가기</a>
|
||
<div class="demo-strip" role="region" aria-label="쇼케이스 고지">디자인 쇼케이스 · 가상 브랜드 · 상담은 접수되지 않습니다</div>
|
||
|
||
<header class="site-header" data-site-header>
|
||
<a class="brand-link" href="#top" aria-label="한남자리 처음으로">
|
||
<span class="brand-mark" aria-hidden="true">HJ</span>
|
||
<span class="brand-lockup"><strong class="brand">한남자리</strong><small>개인 주거 브리핑 데스크</small></span>
|
||
</a>
|
||
<button class="menu-button" type="button" aria-expanded="false" aria-controls="site-nav" data-menu-button>
|
||
<span class="sr-only">메뉴 열기</span><i aria-hidden="true"></i><i aria-hidden="true"></i>
|
||
</button>
|
||
<nav class="site-nav" id="site-nav" aria-label="주요 메뉴" data-site-nav>
|
||
<a href="#briefing">맞춤 브리핑</a>
|
||
<a href="#homes">세 집 비교</a>
|
||
<a href="#dossier">선택 서류철</a>
|
||
<a href="#handoff">중개사 인계</a>
|
||
<a class="nav-admin" href="./admin/">관리 화면</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main id="main-content">
|
||
<section class="brief-hero" id="top" aria-labelledby="hero-title">
|
||
<div class="masthead">
|
||
<p class="eyebrow">한남 생활권 맞춤 중개</p>
|
||
<h1 id="hero-title">한남에서, 내 기준에 맞는 집부터.</h1>
|
||
<p class="hero-copy">예산과 면적, 입주 계획을 먼저 정리합니다. AI가 후보를 비교하고 공인중개사가 다시 확인합니다.</p>
|
||
<div class="hero-actions">
|
||
<button class="button button-primary" type="button" data-focus-condition>내 조건 분석하기</button>
|
||
<a class="text-link" href="#homes">매물 보기 <span aria-hidden="true">→</span></a>
|
||
</div>
|
||
<dl class="masthead-note">
|
||
<div><dt>대조 기준</dt><dd>가격 · 면적 · 입주 · 주차</dd></div>
|
||
<div><dt>마지막 판단</dt><dd>공인중개사 확인</dd></div>
|
||
</dl>
|
||
</div>
|
||
|
||
<figure class="hero-scene" data-image-frame>
|
||
<figcaption>연출 이미지</figcaption>
|
||
<picture>
|
||
<source media="(max-width: 640px)" srcset="./assets/hannam-evening-mobile.webp">
|
||
<source media="(max-width: 960px)" srcset="./assets/hannam-evening-960.webp">
|
||
<img src="./assets/hannam-evening-1600.webp" width="1600" height="1000" alt="서울 언덕 생활권의 현대 주거를 표현한 이미지" data-fallback-image>
|
||
</picture>
|
||
<div class="image-fallback" hidden data-image-fallback role="img" aria-label="주거 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div>
|
||
</figure>
|
||
|
||
<form class="brief-dock" data-condition-form aria-describedby="condition-note">
|
||
<div class="dock-heading"><span>내 기준</span><strong>먼저 다섯 가지만 정리해 보세요.</strong></div>
|
||
<label class="dock-field"><span>거래 형태</span><select name="trade" data-trade-input><option value="sale">매매</option><option value="jeonse">전세</option><option value="monthly">월세</option></select></label>
|
||
<label class="dock-field"><span>예산 상한</span><span class="input-suffix"><input name="budget" type="number" min="1" max="100" step="1" value="40" inputmode="decimal"><i>억 원</i></span></label>
|
||
<label class="dock-field"><span>최소 전용면적</span><span class="input-suffix"><input name="minArea" type="number" min="30" max="300" step="1" value="110" inputmode="decimal"><i>㎡</i></span></label>
|
||
<label class="dock-field"><span>입주 희망일</span><input name="moveIn" type="date" value="2026-12-20"></label>
|
||
<label class="dock-field"><span>필요 주차</span><select name="parking"><option value="0">상관없음</option><option value="1">1대 이상</option><option value="2" selected>2대 이상</option><option value="3">3대 이상</option></select></label>
|
||
<div class="dock-actions"><button class="button button-primary" type="submit">분석 결과 보기</button><button class="save-button" type="button" data-save-condition>이 브라우저에 저장</button></div>
|
||
<p class="condition-note" id="condition-note">입력은 전송되지 않으며, 저장을 선택하면 이 브라우저에만 보관됩니다.</p>
|
||
</form>
|
||
</section>
|
||
|
||
<section class="briefing-section" id="briefing" aria-labelledby="briefing-title">
|
||
<header class="section-heading briefing-heading">
|
||
<p class="eyebrow">내 조건 브리핑</p>
|
||
<h2 id="briefing-title">맞는 이유와<br>조정할 지점을 나눕니다.</h2>
|
||
<p>화면에 입력한 값과 후보 정보를 이 브라우저에서 대조합니다.</p>
|
||
</header>
|
||
|
||
<div class="briefing-sheet" data-analysis-result aria-live="polite" aria-atomic="false">
|
||
<header><span>예시 AI 브리핑 · 모의 조건 비교 · 공인중개사 확인 전</span><strong data-analysis-home>아직 분석하지 않았습니다</strong></header>
|
||
<div class="briefing-empty" data-analysis-empty>
|
||
<span aria-hidden="true">01</span>
|
||
<div><h3>내 조건을 먼저 알려 주세요.</h3><p>분석을 실행하면 세 후보 가운데 조건과 가까운 집을 고르고, 이유를 세 묶음으로 정리합니다.</p></div>
|
||
<button class="button button-light" type="button" data-focus-condition>조건 입력으로 이동</button>
|
||
</div>
|
||
<div class="briefing-groups" data-analysis-groups hidden>
|
||
<section><span class="group-number">01</span><h3>조건과 맞는 점</h3><ul data-fit-list></ul></section>
|
||
<section><span class="group-number">02</span><h3>조정이 필요한 점</h3><ul data-adjust-list></ul></section>
|
||
<section><span class="group-number">03</span><h3>중개사와 확인할 점</h3><ul data-check-list></ul></section>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="compare-section" id="homes" aria-labelledby="compare-title">
|
||
<header class="section-heading compare-heading">
|
||
<div><p class="eyebrow">예시 매물 3곳</p><h2 id="compare-title">서울의 집을<br>한 장씩 대조합니다.</h2></div>
|
||
<p>후보를 바꾸면 가운데 장면과 오른쪽 다섯 조건이 함께 바뀝니다.</p>
|
||
<div class="unit-switches" role="group" aria-label="표시 단위">
|
||
<div role="group" aria-label="면적 단위"><button type="button" aria-pressed="true" data-area-unit="m2">㎡</button><button type="button" aria-pressed="false" data-area-unit="pyeong">평</button></div>
|
||
<div role="group" aria-label="가격 표시"><button type="button" aria-pressed="true" data-price-unit="total">총액</button><button type="button" aria-pressed="false" data-price-unit="unit">면적 단가</button></div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="compare-desk">
|
||
<div class="candidate-rail" data-candidate-rail role="group" aria-label="비교할 집 선택">
|
||
<div class="candidate-option is-selected"><button type="button" class="candidate-button" aria-label="정원형 연립주택 선택" aria-pressed="true" data-select-listing="home-1"></button><div class="candidate-content" aria-hidden="true"><span>01</span><strong>정원형 연립주택</strong><small>매매 · 118.42㎡</small></div></div>
|
||
<div class="candidate-option"><button type="button" class="candidate-button" aria-label="복층형 공동주택 선택" aria-pressed="false" data-select-listing="home-2"></button><div class="candidate-content" aria-hidden="true"><span>02</span><strong>복층형 공동주택</strong><small>전세 · 142.80㎡</small></div></div>
|
||
<div class="candidate-option"><button type="button" class="candidate-button" aria-label="테라스형 다세대주택 선택" aria-pressed="false" data-select-listing="home-3"></button><div class="candidate-content" aria-hidden="true"><span>03</span><strong>테라스형 다세대주택</strong><small>월세 · 140.84㎡</small></div></div>
|
||
</div>
|
||
|
||
<figure class="candidate-scene" data-image-frame>
|
||
<figcaption>연출 이미지</figcaption>
|
||
<img src="./assets/hannam-interior-1200.webp" width="1200" height="800" loading="lazy" alt="큰 창과 목재 수납이 있는 거실을 표현한 이미지" data-compare-image data-fallback-image>
|
||
<div class="scene-caption"><span data-compare-index>01</span><div><strong data-compare-name>정원형 연립주택</strong><small data-compare-life>한강진역 북쪽 생활권</small></div></div>
|
||
<div class="image-fallback" hidden data-image-fallback role="img" aria-label="후보 주거 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div>
|
||
</figure>
|
||
|
||
<dl class="condition-matrix" data-condition-matrix>
|
||
<div><dt>거래</dt><dd data-matrix-trade>매매</dd><dd class="matrix-note" data-matrix-trade-note>분석 후 거래 조건 대조</dd></div>
|
||
<div><dt>가격</dt><dd data-matrix-price>38억 원</dd><dd class="matrix-note" data-matrix-price-note>분석 후 예산과 대조</dd></div>
|
||
<div><dt>전용면적</dt><dd data-matrix-area>118.42㎡</dd><dd class="matrix-note" data-matrix-area-note>분석 후 면적과 대조</dd></div>
|
||
<div><dt>주차</dt><dd data-matrix-parking>2대</dd><dd class="matrix-note" data-matrix-parking-note>분석 후 주차와 대조</dd></div>
|
||
<div><dt>입주</dt><dd data-matrix-move>2026.12.20 이후</dd><dd class="matrix-note" data-matrix-move-note>분석 후 입주일과 대조</dd></div>
|
||
</dl>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="dossier-section" id="dossier" aria-labelledby="dossier-title">
|
||
<header class="section-heading dossier-heading">
|
||
<p class="eyebrow">선택한 예시 집 검토 서류철</p>
|
||
<h2 id="dossier-title" data-dossier-title>정원형 연립주택</h2>
|
||
<p><strong data-dossier-life>한강진역 북쪽 생활권</strong><span>거리·소요 시간 미제공</span></p>
|
||
</header>
|
||
|
||
<div class="dossier-shell">
|
||
<div class="dossier-tabs" role="tablist" aria-label="선택한 집 검토 항목">
|
||
<button type="button" role="tab" aria-selected="true" aria-controls="dossier-basic" id="dossier-tab-basic" data-dossier-tab="basic">기본</button>
|
||
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-price" id="dossier-tab-price" tabindex="-1" data-dossier-tab="price">가격</button>
|
||
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-rights" id="dossier-tab-rights" tabindex="-1" data-dossier-tab="rights">권리</button>
|
||
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-location" id="dossier-tab-location" tabindex="-1" data-dossier-tab="location">입지 확인</button>
|
||
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-facility" id="dossier-tab-facility" tabindex="-1" data-dossier-tab="facility">시설·관리</button>
|
||
</div>
|
||
|
||
<div class="dossier-pages">
|
||
<section class="dossier-panel" role="tabpanel" id="dossier-basic" aria-labelledby="dossier-tab-basic" data-dossier-panel="basic">
|
||
<div class="image-filmstrip">
|
||
<figure data-image-frame><figcaption>연출 이미지</figcaption><img src="./assets/hannam-evening-960.webp" width="960" height="540" loading="lazy" alt="서울 언덕 생활권의 주거 외관을 표현한 이미지" data-fallback-image><div class="image-fallback" hidden data-image-fallback role="img" aria-label="외관 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div></figure>
|
||
<figure data-image-frame><figcaption>연출 이미지</figcaption><img src="./assets/hannam-interior-720.webp" width="720" height="480" loading="lazy" alt="큰 창과 목재 수납이 있는 거실을 표현한 이미지" data-fallback-image><div class="image-fallback" hidden data-image-fallback role="img" aria-label="실내 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div></figure>
|
||
</div>
|
||
<dl class="spec-strip" data-spec-strip>
|
||
<div><dt>거래</dt><dd>매매</dd></div><div><dt>가격</dt><dd>38억 원</dd></div><div><dt>전용</dt><dd>118.42㎡</dd></div><div><dt>주차</dt><dd>2대</dd></div><div><dt>입주</dt><dd>2026.12.20 이후</dd></div>
|
||
</dl>
|
||
<div class="decision-columns">
|
||
<section><h3>내 조건과 맞는 점</h3><ul data-dossier-fit><li>브리핑을 실행하면 입력 조건과의 관계를 표시합니다.</li></ul></section>
|
||
<section><h3>확인하고 결정할 점</h3><ul data-dossier-risk><li>등기와 권리 관계를 확인해야 합니다.</li><li>소음과 마감 상태는 현장에서 살펴야 합니다.</li><li>입주 가능일은 중개사와 다시 맞춰야 합니다.</li></ul></section>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="dossier-panel" role="tabpanel" id="dossier-price" aria-labelledby="dossier-tab-price" data-dossier-panel="price" hidden>
|
||
<div class="page-heading"><span>가격 메모</span><h3>입력한 예산과 집의 가격을 따로 봅니다.</h3></div>
|
||
<dl class="page-ledger"><div><dt>입력한 예산 상한</dt><dd data-page-budget>40억 원</dd></div><div><dt>집의 거래 조건</dt><dd data-page-price>38억 원</dd></div><div><dt>기준</dt><dd>화면에 표시된 매물 정보</dd></div></dl>
|
||
</section>
|
||
|
||
<section class="dossier-panel" role="tabpanel" id="dossier-rights" aria-labelledby="dossier-tab-rights" data-dossier-panel="rights" hidden>
|
||
<div class="page-heading"><span>권리 확인</span><h3>계약 전 공인중개사가 다시 볼 항목입니다.</h3></div>
|
||
<ul class="review-list"><li><span>01</span><div><strong>등기와 소유 관계</strong><p>서류를 통해 현재 권리 상태를 확인합니다.</p></div></li><li><span>02</span><div><strong>계약 조건과 특약</strong><p>거래 형태에 맞는 보호 조건을 검토합니다.</p></div></li><li><span>03</span><div><strong>현재 거래 가능 상태</strong><p>상담 시점에 다시 확인합니다.</p></div></li></ul>
|
||
</section>
|
||
|
||
<section class="dossier-panel" role="tabpanel" id="dossier-location" aria-labelledby="dossier-tab-location" data-dossier-panel="location" hidden>
|
||
<div class="page-heading"><span>입지 확인</span><h3 data-location-heading>한강진역 북쪽 생활권을 직접 살핍니다.</h3></div>
|
||
<div class="location-memo"><p>역과 생활 편의 시설의 이용 방식은 현장에서 확인합니다.</p><p>출퇴근 경로는 실제 출발지와 시간대에 맞춰 다시 봅니다.</p><p>이미지의 배경은 조망이나 채광 판단에 사용하지 않습니다.</p></div>
|
||
</section>
|
||
|
||
<section class="dossier-panel" role="tabpanel" id="dossier-facility" aria-labelledby="dossier-tab-facility" data-dossier-panel="facility" hidden>
|
||
<div class="page-heading"><span>시설·관리</span><h3>생활 비용과 이용 조건을 함께 봅니다.</h3></div>
|
||
<dl class="page-ledger"><div><dt>관리비</dt><dd data-page-fee>월 48만 원</dd></div><div><dt>포함 항목</dt><dd data-page-included>공용 관리, 청소, 승강기</dd></div><div><dt>별도 항목</dt><dd data-page-excluded>전기, 가스, 수도</dd></div><div><dt>방과 욕실</dt><dd data-page-rooms>방 3 · 욕실 2</dd></div></dl>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="handoff-section" id="handoff" aria-labelledby="handoff-title">
|
||
<header><p class="eyebrow">사람에게 넘기는 마감</p><h2 id="handoff-title">AI가 좁히고,<br>공인중개사가 확인합니다.</h2></header>
|
||
<ol class="handoff-steps">
|
||
<li><span>01</span><div><strong>조건 정리</strong><p>가격, 면적, 입주, 주차를 한 장에 모읍니다.</p></div></li>
|
||
<li><span>02</span><div><strong>후보 비교</strong><p>서로 다른 집의 차이를 같은 기준으로 대조합니다.</p></div></li>
|
||
<li><span>03</span><div><strong>권리·현장 확인</strong><p>서류와 현장에서 확인한 뒤 최종 판단합니다.</p></div></li>
|
||
</ol>
|
||
<button class="button button-light handoff-cta" type="button" data-open-consult>상담 흐름 미리보기</button>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<div><strong>한남자리</strong><span>개인 주거 브리핑 데스크</span></div>
|
||
<p>한남자리는 가상 브랜드이며 등록 공인중개사무소나 거래 서비스를 제공하지 않습니다.</p>
|
||
<nav aria-label="보조 메뉴"><a href="#top">처음으로</a><a href="./admin/">관리 화면</a></nav>
|
||
</footer>
|
||
|
||
<dialog class="consult-dialog" data-consult-dialog aria-labelledby="consult-title">
|
||
<form method="dialog" class="dialog-shell" data-consult-form>
|
||
<header><div><span>상담 순서 살펴보기</span><h2 id="consult-title">중개사에게 무엇을 넘길까요?</h2></div><button class="dialog-close" type="button" aria-label="상담 흐름 닫기" data-close-consult>×</button></header>
|
||
<p class="dialog-privacy">연락처를 받거나 입력 내용을 저장하지 않습니다.</p>
|
||
<div class="dialog-content" data-consult-content>
|
||
<p><strong data-consult-home>정원형 연립주택</strong>을 기준으로 준비할 항목을 골라 보세요.</p>
|
||
<label><input type="checkbox" name="agenda" value="rights" checked> 권리 관계와 계약 조건</label>
|
||
<label><input type="checkbox" name="agenda" value="visit" checked> 현장 방문 때 볼 항목</label>
|
||
<label><input type="checkbox" name="agenda" value="move"> 입주 가능일 조율</label>
|
||
</div>
|
||
<footer><button class="button button-primary" type="button" data-finish-consult>다음 순서 보기</button></footer>
|
||
</form>
|
||
</dialog>
|
||
|
||
<div class="live-region" role="status" aria-live="polite" data-live-region hidden></div>
|
||
<noscript><div class="no-script"><strong>자바스크립트 없이 보는 중입니다.</strong><p>집 정보는 읽을 수 있지만 조건 비교, 후보 변경과 상담 미리보기는 작동하지 않습니다.</p></div></noscript>
|
||
</body>
|
||
</html>
|