Room Simulator
TOOL평면도 인식부터 2D 편집과 3D 워크스루까지 잇는 인테리어 도구
- 기간
- 2026.08
- 역할
- 기획 · 구현 단독
- 사용 기술
- React 18 · TypeScript · three / R3F · Zustand · Vitest
개요
평면도 한 장에서 2D 편집과 3D 워크스루까지 이어지는 인테리어 도구입니다. 하나의 Plan으로 두 화면을 함께 만듭니다.
백엔드가 없습니다. 도면은 localStorage에 저장하고 JSON으로 내보냅니다.
문제와 해결
- 01
자동 인식 범위 재설정
Matterport 공개 샘플 도면에서 가구 심볼 자동 인식은 재현율 약 5%, 계단 인식은 정탐 0건으로 측정됐습니다. 벽선·기호가 연결된 도면 특성상 두 기능을 신뢰성 있게 자동화하기 어렵다고 판단했습니다.
자동 인식은 벽·방·개구부로 제한하고, 가구와 계단은 도면 위에 직접 배치하도록 범위를 조정했습니다. 측정 조건과 결정 근거는
docs/DECISIONS.md에 기록했습니다. - 02
드래그 미리보기와 저장 좌표 통일
드래그 중 표시와 저장 단계가 서로 다른 스냅·충돌 규칙을 적용하면 마우스를 놓는 순간 가구가 이동했습니다.
드래그 중에도 최종 규칙을 적용한 미리보기를 표시하고, 드롭할 때 화면에 보인 좌표를 그대로 저장했습니다.
- 03
2D·3D 상태 통합
두 화면이 별도 데이터를 관리하면 벽이나 가구 수정이 한쪽에만 반영될 수 있습니다.
하나의 Plan에서 2D 편집 화면과 3D 장면을 모두 만들고, 다층 구조는
buildingId로 연결해 기존 단층 저장 형식도 유지했습니다. - 04
저장 실패 복구와 안내
브라우저 저장 공간 초과나 병합 오류가 조용히 지나가면 사용자가 편집한 결과를 잃을 수 있습니다.
이전 스냅샷을 백업하고 삭제 의도를 보존하는 병합 검사를 추가했으며, 저장 공간 오류는 화면에 안내하도록 바꿨습니다.
주요 구현
- 도면 인식 파이프라인 — 이진화 · 벽 스캔 · 외곽 폐합 · flood 방 검출 · 밝은 갭을 문·창으로 부착
- 2D 에디터 — 벽·문·창 드로잉, 그리드·벽면 스냅, 충돌과 문 앞 공간 경고, 치수 주석
- 3D 워크스루 — 1인칭 WASD(캡슐 충돌·슬라이딩), 응시 상호작용으로 조명·TV·문 조작
- 조감도 — 돌하우스·단면·평행 투상, 시간대와 창 방향에 따른 조명 시뮬레이션
- 다층 건물 — 층 스택 · 오픈 천장 · 층 정렬 · 계단 이동
- 가구 83종 — 실판매가와 상품 링크가 확인된 것만 가격 표시
- 저장 보호 — 삭제 의도 병합 가드 · 이전 스냅샷 백업 · quota 오류 표면화
- Vitest 289개
회고
자동화 범위는 기대가 아니라 측정 결과로 정해야 했습니다. 정확도가 낮은 기능은 숨기지 않고 사용자가 보정할 수 있는 흐름으로 전환했습니다.