웹에서 구동되는 2D/3D 가구 배치 및 인테리어 설계 도구
wy51ai/floorplan-3d
GitHub이 도구는 순수 프론트엔드 기술로 구현되어, 2D 평면도에서 가구를 배치하고 벽을 수정하면 Three.js 기반의 입체적인 3D 공간으로 즉시 전환됩니다.
- 가구 배치, 벽체 변경은 물론 바닥재 교체와 조명 시뮬레이션까지 가능하며, 2D 작업과 3D 뷰가 실시간으로 동기화되어 높은 사용 편의성을 제공합니다.
- 단순한 디자인을 넘어, 공간 면적 자동 계산과 바닥재별 예상 비용 산출이 가능하여 전문적인 설계 참고 자료로 활용할 수 있습니다.
- 별도의 빌드 과정 없이 `index.html` 파일만으로 구동되는 것이 가장 큰 장점이며, 복잡한 인테리어 디자인 과정을 웹에서 쉽게 경험할 수 있습니다.
이 도구는 순수 프론트엔드 기술로 구현되어 별도의 빌드 과정 없이 `index.html` 파일만으로 작동합니다. 2D 평면도에서는 1:60 또는 1:100 비율로 원본 평면을 표시하며, 왼쪽의 가구 라이브러리에서 60여 종의 가구나 가전제품을 끌어다 놓을 수 있습니다. 사용자는 배치된 가구를 이동시키거나 회전(Shift 키를 이용한 자유 각도)하고 크기를 조정할 수 있으며, 벽체는 비내력벽과 내력벽으로 구분하여 수정이 가능합니다.
2D 작업은 Three.js 기반의 3D 공간으로 실시간 전환됩니다. 이 3D 환경에서는 조감도, 사선식, 1인칭 시점 등 다양한 각도로 공간을 관찰할 수 있으며, WASD 키와 마우스로 이동하는 순회 모드(漫游模式)를 지원합니다. 가구 모델은 문짝의 분할이나 손잡이, 반사되는 금속/도자기 재질 등 세밀하게 구현되었으며, 3D에서 배치한 가구는 2D 평면도와 실시간으로 동기화됩니다.
단순한 디자인을 넘어 공간에 대한 통계적 분석 기능도 제공합니다. 각 방의 면적과 사용 면적이 자동으로 계산되며, 바닥재(나무 마루, 타일, 대리석 등)를 변경할 때 해당 재료별로 5% 손실률이 가산된 예상 공사비까지 산출할 수 있습니다. 또한, 모든 작업 내용은 브라우저의 로컬 저장소에 자동 보존되며, 사용자는 PNG 이미지나 JSON 형식으로 설계도를 내보내거나 불러올 수 있습니다.