순수 프론트엔드로 구현한 2D/3D 인테리어 설계 웹 도구
wy51ai/floorplan-3d
빌드 과정이나 별도 환경 설정 없이 순수 HTML/JS로 구동되는 웹 기반 인테리어 설계 도구입니다.
이 도구는 별도의 설치 과정 없이 웹에서 작동하며, 단순한 디자인을 넘어 예상 공사비까지 계산해 실질적인 인테리어 계획에 도움을 줘요.
- 2D 평면도에서 가구를 배치하고 벽체를 수정할 수 있으며, 클릭 한 번으로 실제와 같은 3D 공간 체험이 가능합니다.
- 단순한 디자인을 넘어, 방별 면적 자동 계산과 바닥재 변경에 따른 예상 공사비까지 산출하여 실질적인 설계 참고 자료를 제공합니다.
- 설치 과정 없이 접근성이 매우 높지만, 고화질 3D 시점 로딩 및 기능 사용을 위해서는 초기 인터넷 연결이 필수적입니다.
이 도구는 별도의 빌드 과정이나 환경 설정 없이 순수한 HTML, CSS, JavaScript만으로 구동되는 웹 기반의 가구 배치 및 인테리어 디자인 툴입니다. 2D 평면도에서는 원본 배치를 기준으로 1:60 또는 1:100 비율로 공간을 표시하며, 사용자는 좌측의 가구 라이브러리에서 60여 종 이상의 가전과 가구를 끌어다 놓거나(드래그), 이동 및 회전시키고 크기를 조정할 수 있습니다. 또한, 비하중 벽체는 수정이 가능하며, 구조적 안전을 위해 하중벽은 별도로 표시됩니다.
2D 배치 작업 후에는 3D 시점으로 전환하여 공간을 입체적으로 체험할 수 있습니다. 이 3D 환경에서는 조감도, 사선식, 평면 등 다양한 시점을 제공하며, WASD 키와 마우스 또는 가상 스틱을 이용한 이동(워크스루) 모드를 지원합니다. 상세한 기능으로는 전고 벽/단면벽 전환, 일조 시간 슬라이드 및 야간 조명 설정 등이 가능하며, 3D 공간에서도 2D에서 배치했던 가구를 선택하고 움직일 수 있어 두 환경 간의 데이터 동기화가 이루어집니다.
사용자는 단순한 디자인을 넘어 실질적인 설계 자료를 얻을 수 있습니다. 각 방별 면적과 전체 사용 면적이 자동으로 통계되며, 바닥재(나무 마루, 타일, 대리석 등)를 변경할 때마다 해당 재료의 단가와 함께 5% 손실률이 반영된 예상 공사비까지 산출합니다. 이 도구는 브라우저 로컬 스토리지에 자동으로 저장되며, 완성된 결과물은 PNG 이미지로 내보내거나 JSON 파일 형태로 가져올 수 있습니다.
이 도구는 어떤 환경에서 사용할 수 있나요?
별도의 빌드 과정이나 환경 설정 없이 순수한 HTML, CSS, JavaScript만으로 구동되는 웹 기반 도구예요. 설치할 필요가 없어서 접근성이 매우 높아요.
3D 공간에서 어떤 기능을 사용할 수 있나요?
조감도나 사선식 등 다양한 시점을 제공하며, 워크스루 모드를 통해 공간을 입체적으로 체험할 수 있어요. 전고 벽이나 단면벽으로 전환하거나 일조 시간 및 야간 조명 설정 같은 상세 기능도 지원해요.
디자인 외에 어떤 실질적인 정보를 얻을 수 있나요?
각 방별 면적과 전체 사용 면적이 자동으로 통계되며, 바닥재를 변경할 때마다 해당 재료의 단가와 5% 손실률이 반영된 예상 공사비까지 산출해 줘요. 완성된 결과물은 PNG 이미지나 JSON 파일로 내보낼 수 있어요.