🏠오픈소스
우리집 모델하우스 - 웹 기반 3D 아파트 평면 시뮬레이터
입주 전 우리 집을 미리 체험해보는 인터랙티브 3D 모델하우스 웹 애플리케이션
↗ 원본 링크#3D#웹앱#부동산#시각화#인테리어
프로젝트 소개
우리집 모델하우스는 아파트 입주 전에 내 집을 미리 걸어볼 수 있는 사이버 모델하우스 웹 애플리케이션입니다. 평면 타입을 선택하면 가구가 배치된 3D 공간으로 들어가 실제처럼 둘러볼 수 있습니다.
주요 기능
📐 다양한 평면 타입
▸
59A (24평형): 3Bay 판상형, 맞통풍 설계
▸
84A (34평형): 4Bay 판상형, 알파룸과 드레스룸 포함
▸
84B (34평형): 타워형 코너 거실, 팬트리 구성
▸
내 평면: 직접 벽을 그려 맞춤 평면 제작 가능
🎮 3D 둘러보기
▸2D 평면에서 3D로 자동 전환
▸방마다 눈높이 시점으로 이동
▸
모델하우스 투어: 자동으로 각 방을 안내
▸
걸어보기 모드: WASD 키보드 또는 가상 조이스틱으로 자유롭게 이동
▸벽과 가구 충돌 감지, 문 열고 닫기 기능
🎨 커스터마이징
유상옵션
▸발코니 확장, 시스템 에어컨
▸빌트인 가전 패키지
▸드레스룸 시스템장, 현관 중문
인테리어 스타일
▸3가지 스타일 패키지 (내추럴 우드, 모던 화이트, 호텔 그레이지)
▸벽지 6색 선택
▸방별 바닥재 변경 (강마루, 타일, 대리석 등)
가구 배치
▸60여 종의 한국 가정용 가구/가전 제공
▸드래그 앤 드롭으로 배치
▸크기, 색상, 회전 조정 가능
💰 실시간 견적
선택한 옵션과 마감재에 따라 추가 비용을 실시간으로 계산하여 보여줍니다. 견적서는 인쇄하거나 이미지로 저장할 수 있습니다.
✏️ 평면 편집기
▸클릭으로 벽 그리기 (50mm 격자 스냅)
▸문, 창문, 미닫이문 배치
▸벽 길이 조절 및 평행 이동
▸자동 방 인식 및 면적 계산
기술 스택
▸
Node.js 20: 이상 필요
▸정적 호스팅 지원
▸단일 HTML 파일로도 빌드 가능
▸다국어 지원 (한국어/영어)
시작하기
bash
# 설치
npm install
# 개발 서버 실행
npm run dev
# 빌드
npm run build
# 단일 파일 빌드 (서버 없이 실행 가능)
npm run build:single테스트
프로젝트는 단위 테스트와 E2E 테스트를 모두 포함합니다:
bash
# 단위 테스트 (Vitest)
npm test
# 브라우저 E2E 테스트 (Playwright)
npm run test:e2e▸평면 데이터 검증 (면적, 공간 겹침 검사)
▸동선 검증 (현관에서 모든 방 접근 가능)
▸가구 충돌 검사
▸UI 시나리오 테스트
활용 사례
▸🏗️ **예비 입주자**: 분양 전 평면과 옵션을 미리 체험
▸🎨 **인테리어 계획**: 가구 배치와 스타일 시뮬레이션
▸📊 **견적 비교**: 옵션별 추가 비용 즉시 확인
▸🖌️ **평면 설계**: 직접 평면을 그려보며 공간 이해
> 💡 참고: 제공되는 평면과 가격은 예시이며, 실제 분양 사례와는 다를 수 있습니다.
특징
✅ 브라우저 자동 저장 (다시 열면 이어서 보기)
✅ 모바일/태블릿 반응형 지원
✅ 실행 취소/다시 실행 기능
✅ 저장 파일 내보내기/불러오기
한국 아파트 분양 문화를 디지털로 구현한 실용적인 프로젝트입니다!