InMyRoom 🏠 - 방 꾸미기 시뮬레이터

InMyRoom은 사용자가 다양한 가구와 장식을 선택해 가상의 방을 꾸밀 수 있는 웹 애플리케이션입니다.
직관적인 UI와 로컬 스토리지 기반의 상태 관리로 사용자가 자신만의 방을 자유롭게 디자인하고 스크린샷으로 저장할 수 있습니다.

🏠 프로젝트 개요 🏠

• 프로젝트명: InMyRoom
• 기술 스택: HTML5, CSS3, JavaScript (Vanilla)
• 주요 라이브러리: html2canvas
• 주요 기능: 가구 배치, 배경/바닥 설정, 스크린샷 저장 및 복사, 상태 저장, 이력 타임라인

요구사항 분석

1. 가구 선택 및 배치 기능

1. 카테고리(배경/바닥, 가구, 장식 등)별로 가구 아이템 선택 가능
2. 마우스 드래그로 화면 내에서 자유롭게 배치 가능 (겹치기 허용)
3. 카테고리별 목록 접기/펼치기 기능 제공
4. 선택된 가구의 타입, 위치, 크기, 회전 각도, 레이어 정보 표시
5. 선택된 가구 강조 스타일(테두리 및 그림자) 적용
6. 가구 배치 전체 초기화 가능
7. 마우스 클릭으로 가구 선택/해제, 캔버스 빈 공간 클릭 시 선택 해제
8. 단축키 지원: Delete/Backspace(삭제), 화살표 이동, Shift+화살표(빠른 이동)

2. 배경 및 바닥 설정

1. 다양한 배경 및 바닥 스타일 선택 가능
2. 사용자가 직접 업로드한 이미지 적용 가능
3. 업로드 이미지의 파일명을 화면에 표시

3. 가구 조작 기능

1. 크기 조절, 회전, 삭제, 레이어 변경 가능
2. 크기 조절 및 회전 애니메이션 적용
3. 크기 조절 범위 제한으로 안정성 확보

4. 이미지 다운로드 및 복사

1. 꾸민 방을 PNG 이미지로 다운로드
2. 클립보드 복사 기능 제공
3. 스크린샷 미리보기 모달창 사용 (ESC/배경 클릭 시 닫기)

5. 상태 관리

1. 방 상태를 JSON 직렬화하여 로컬 스토리지에 저장
2. 페이지 새로고침/종료 후에도 상태 복원

6. 이력 타임라인 (신규 기능)

1. 사용자 액션별 이력 자동 기록
2. 최근 10개 이력 항목 관리
3. 이력 클릭으로 이전 상태 복원 가능
4. 실시간 이력 타임라인 업데이트

설계 및 모델링

1. 주요 구성 요소

1. 캔버스 영역: 사용자가 가구를 배치하는 공간
2. 사이드바 메뉴: 배경/바닥, 가구, 장식 선택 UI 제공
3. 속성 패널: 선택된 가구의 속성(위치, 크기, 회전 등) 표시 및 수정
4. 모달창: 스크린샷 미리보기 및 다운로드/복사 기능 제공
5. 로컬 스토리지: 상태 저장 및 복원 처리
6. 이력 타임라인: 사용자 액션 이력 관리 및 복원

2. 주요 로직

1. 드래그 앤 드롭: mouseDown → mouseMove → mouseUp 이벤트 체인으로 구현
2. 크기 조절/회전: transform CSS 속성과 이벤트 리스너 사용
3. 상태 직렬화 및 복원: localStorage.setItem()과 JSON.stringify(), 페이지 로드 시 JSON.parse()로 상태 복원
4. 스크린샷 처리: html2canvas로 DOM 캡처 후 다운로드/복사 API 활용
5. 이력 관리: 스냅샷 기반 상태 저장 및 복원 시스템

3. 클래스 구조 (MVC 패턴)

InMyRoomApp (Controller)
├── AppState (Model)
├── FloorManager
├── BackgroundManager
├── FurnitureManager
├── DragDropManager
├── ScreenshotManager
└── StateManager

4. 에러 핸들링 및 접근성

1. 에러 핸들링: 중앙화된 ErrorHandler 클래스로 일관된 오류 처리
2. 접근성: ARIA 속성, 키보드 네비게이션, 스크린 리더 지원
3. 사용자 피드백: 성공/실패 메시지 및 시각적 피드백 제공

결과 / 결과 분석

1. 사용자 인터페이스: 카테고리별로 가구를 선택하여 자유롭게 배치할 수 있고, 선택된 가구는 테두리 및 그림자 효과로 강조된다.
2. 키보드 지원: 단축키(Delete/Backspace, 화살표, Shift+화살표)를 통해 빠르고 직관적인 가구 조작이 가능하다.
3. 배경 커스터마이징: 배경 및 바닥은 기본 제공된 색상 외에 사용자 업로드 이미지로 커스터마이징할 수 있고, 업로드한 파일명도 UI에 표시된다.
4. 가구 조작: 가구의 크기, 회전, 레이어 변경은 실시간으로 적용되며, 최소/최대 제한으로 안정성을 유지한다.
5. 스크린샷 기능: PNG 다운로드 및 클립보드 복사 기능을 지원하며, 모달창을 통한 미리보기 및 종료 처리로 UX를 강화했다.
6. 상태 관리: 로컬 스토리지 상태 관리를 통해 새로고침 후에도 사용자가 이전에 꾸민 방 상태가 그대로 복원된다.
7. 이력 관리: 사용자 액션별 이력이 자동으로 기록되며, 이력 타임라인을 통해 이전 상태로 쉽게 복원할 수 있다.
8. 접근성: 키보드만으로도 모든 기능을 사용할 수 있으며, 스크린 리더 사용자를 위한 ARIA 속성이 적용되어 있다.

실행 방법

1. 레포지토리를 클론합니다.

   git clone https://github.com/your-username/InMyRoom.git

2. 프로젝트 디렉토리로 이동합니다.

   cd InMyRoom

3. 브라우저로 index.html을 실행합니다.

   open index.html

주요 기능 사용법

가구 배치

• 사이드바에서 원하는 가구를 선택하여 캔버스에 드래그
• 마우스로 자유롭게 위치 조정
• 클릭으로 가구 선택/해제

가구 조작

• 선택된 가구 조작: 컨트롤 패널의 버튼으로 크기, 회전, 레이어 변경
• 키보드 단축키:
  • Delete/Backspace: 선택된 가구 삭제
  • 화살표 키: 가구 이동 (1px씩)
  • Shift + 화살표 키: 빠른 이동 (10px씩)

배경/바닥 설정

• 드롭다운에서 미리 정의된 스타일 선택
• "이미지 업로드" 선택으로 사용자 정의 이미지 적용

스크린샷

• "스크린샷 저장" 버튼으로 현재 방 상태 캡처
• 모달창에서 다운로드 또는 클립보드 복사

이력 관리

• 오른쪽 사이드바의 이력 타임라인에서 이전 상태 확인
• 이력 항목 클릭으로 해당 상태로 복원

시연 영상 링크

• https://youtu.be/rWUqgG4CbzA