Skip to content

RoomFicial

온라인 쇼핑몰에서 마음에 드는 가구를 발견했을 때, "우리 방에 실제로 놓으면 어떨까?"라는 고민을 해결하는 Chrome 확장 프로그램입니다.

Core trick

Sends a room photo and collected product images to Nano Banana, which composites the furniture into the scene.

Tags

Description

온라인 쇼핑몰에서 마음에 드는 가구를 발견했을 때, "우리 방에 실제로 놓으면 어떨까?"라는 고민을 해결하는 Chrome 확장 프로그램입니다. Nano Banana(Gemini) AI 이미지 생성을 활용하여, 내 방 사진 위에 수집한 가구를 자연스럽게 배치한 시뮬레이션 결과를 제공합니다. 오늘의집 등 쇼핑몰에서 원클릭으로 상품을 수집하고, 드래그 앤 드롭으로 이미지를 추가할 수도 있습니다. 인테리어 모드 외에 패션 모드도 지원하여 옷 피팅 시뮬레이션도 가능합니다.
OverRaddit/bang-ficial★ 00 forksJavaScriptCreated Feb 28, 2026 · last push Feb 28, 2026

README excerpt

# 방피셜 (RoomFicial)

Chrome Extension + Nano Banana(Gemini) AI 이미지 생성을 활용한 인테리어 & 패션 시뮬레이터.

쇼핑몰에서 마음에 드는 가구/옷을 수집하고, 내 방/내 사진에 AI로 합성해 볼 수 있습니다.

## 주요 기능

- 내 방 사진에 가구를 AI 배치 (인테리어 모드)
- 내 사진에 옷을 AI 피팅 (패션 모드)
- 오늘의집 등 쇼핑몰에서 원클릭 상품 수집
- 이미지 드래그 앤 드롭으로 직접 추가
- 한국어/영어 UI 전환

## 설치 & 실행

### 1. 백엔드

```bash
cd backend
npm install
cp .env.example .env
# .env에 Gemini API 키 입력
npm start
```

### 2. 프론트엔드 (Chrome Extension)

```bash
cd front
npm install
npm run build
```

### 3. Chrome에 확장 프로그램 로드

1. `chrome://extensions` 접속
2. **개발자 모드** 켜기
3. **압축해제된 확장 프로그램을 로드합니다** 클릭
4. `front/dist` 폴더 선택

## 사용법

1. 확장 프로그램 아이콘 클릭 → 사이드패널 열기
2. **내 방** 탭에서 방 사진 업로드
3. 쇼핑몰에서 **내방에 추가** 버튼 클릭 or **수집목록** 탭에서 가구 이미지 드래그
4. 수집목록에서 **적용** 버튼 → AI가 방에 가구를 배치
5. **결과** 탭에서 시뮬레이션 결과 확인 & 저장

## 기술 스택

- **Frontend**: React, Vite, CRXJS (Chrome Extension)
- **Backend**: Express, Google Gemini API (Nano Banana)

Team