이사를 앞두고 있었다.
새 집 평면도 받아서 가구 배치를 미리 해보고 싶었다. 침대가 들어갈까? 책상은 어디에? 소파 놓으면 동선이 어떻게 되나?
기존 도구들
찾아보니 평면도 도구가 꽤 있다.
Floorplanner.com
- 예쁘고 기능 많음
- 근데 무거움. 로딩이 오래 걸림
- 무료 버전 제한 많음
Sweet Home 3D
- 설치형
- 기능은 많은데 복잡함
- 3D까지 되는 건 좋은데, 난 2D만 필요함
그냥 파워포인트
- 제일 많이 쓰는 방법
- 근데 치수 맞추기 귀찮음
- 가구 모양 일일이 그려야 함
그냥 만들자
요구사항이 단순했다.
- 방 크기 입력하면 그려짐
- 가구 드래그해서 배치
- 치수 보이면 좋겠음
- 웹에서 바로 됨 (설치 X)
이 정도면 금방 만들겠다 싶었다.
기술 스택
Nuxt 3 + Vue 3
요즘 Vue 쓰고 있어서 그냥 선택. React도 상관없었는데 익숙한 걸로.
vue-konva
Canvas 라이브러리. 다음 글에서 왜 이걸 골랐는지 설명.
Pinia
상태 관리. Vuex보다 간단함.
TailwindCSS
CSS 쓰기 귀찮아서. 클래스만 붙이면 됨.
결과물
방 만들고, 가구 배치하고, 문 달고, 치수 재는 것까지 된다.
생각보다 오래 걸렸다. “금방 만들겠다"는 착각이었다.
다음 글에서 캔버스 라이브러리 선택 과정.