roommanager
최근 수정 시각: 2026-07-11 00:13:16
1. 개요
roommanager(방 매니저)는 인터랙티브 캔버스 위에 방과 가구를 배치하고, 각 가구에 보관한 물품을 관리하는 공간 인벤토리 웹앱이다. “어느 방의 어떤 가구 몇 층에 무엇이 있는가”를 목록뿐 아니라 실제 배치와 함께 기억하게 한다.
상단 바는 방 전환, 그리드 크기, 검색, 백업, 테마, 통계, 구매 목록과 AI 분석을 맡는다. 왼쪽은 가구 추가·목록, 가운데는 Konva 캔버스, 오른쪽은 선택한 가구의 속성과 물품을 보여준다.
2. 기능 한눈에 보기
| 문서 | 무엇을 하는가 |
|---|---|
| 방 캔버스 | 여러 방과 그리드 크기를 관리하고 가구를 실제 배치처럼 옮긴다. |
| 가구·물품 | 가구 속성과 그 안의 물품·층·수량·상태를 기록한다. |
| 검색·통계 | 모든 방의 물품을 찾고 상태·카테고리·가구별 현황을 본다. |
| AI 분석 | 방 사진에서 가구 배치를, 물품 사진에서 인벤토리 후보를 제안받는다. |
| 백업·PIN | 자동 저장 데이터를 JSON 또는 4자리 PIN 서버 스냅샷으로 보관·복원한다. |
3. 시작하기
- 방 이름과 그리드 크기를 실제 공간에 맞춘다.
- 사각형·원형 가구를 추가해 캔버스에 배치한다.
- 가구 상세에서 이름·크기·회전·외곽선을 다듬고 물품을 넣는다.
- 물품이 늘어나면 검색과 통계로 위치와 재고 상태를 점검한다.
- 큰 변경 전에는 JSON 백업을 내려받거나 PIN으로 서버에 저장한다.
4. 기술 스택
| 영역 | 기술 |
|---|---|
| 프런트엔드 | React 19, TypeScript, Tailwind CSS v4, Vite 7 |
| 캔버스 | Konva, react-konva |
| 상태 | Zustand, localStorage 영속화 |
| AI | Google Gemini |
| 서버 저장 | Cloudflare Pages Functions, KV |
| 배포 | Cloudflare Pages |
5. 개발 배경
“그 물건이 어느 서랍에 있었지?”라는 문제를 실제 공간의 위치 감각으로 해결하기 위해 만들었다. 가구를 인벤토리 컨테이너로 삼고 층과 상태를 기록해 정리, 재고 파악, 쇼핑, 이사 준비에 함께 쓰도록 확장됐다. 사진 분석은 대량 입력의 부담을 줄이고, JSON·PIN 백업은 브라우저 저장 데이터의 이동과 복원을 보완한다.
6. 링크
- 라이브: roommanager.pages.dev
- GitHub: architectofthoughts/roommanager