STUDIO TWOTONE — 한국형 AI 타일 시뮬레이터

방·욕실·주방 사진을 올리고 타일을 고르면 AI가 바닥·벽·백스프레시·샤워 공간에 해당 타일을 시공한 모습을 보여 주는 서비스입니다. 타일 도소매점과 시공·인테리어 업체가 고객 상담에 쓰는 B2B2C 도구를 목표로 합니다. (Roomvo의 한국형 대안)

기능

소비자 화면 (/visualizer)

• 내 방 사진 업로드 또는 데모룸 선택 (욕실·주방·현관)
• 적용면 선택: 바닥 / 벽 / 백스프레시 / 샤워 공간 (면마다 다른 타일 지정, 최대 4면)
• 타일 규격(100×100 ~ 1200×1200), 시공 패턴(정방향·엇붙임·헤링본·대각선), 줄눈 색상·폭 선택
• 컬렉션·색상·마감·적용면 필터, 즐겨찾기, 타일 비교(비포/애프터 슬라이더)
• 샘플 주문·방문 상담·견적 신청 (개인정보 수집 동의 포함), 결과 공유 링크(/d/[id])

딜러 콘솔 (/dealer)

• 카탈로그: CSV/JSON 가져오기(품번 기준 업서트), CSV 양식 내려받기, 직접 등록(이미지 업로드), 노출·가격·컬렉션 변경, 삭제
• 자동 동기화: 피드 URL(https) 등록 + 주기 설정, 지금 동기화
• 노출 컬렉션: 노출 on/off, 순서 변경, 이름·설명 편집
• 고객 관리(CRM): 문의 목록, 상태(신규→연락→샘플→성사/종료), 상담 메모, 선택 타일·시공 이미지 확인, CSV 내보내기
• 설정: 매장명·연락처·가격 표시, iframe 임베드 코드

iPad 매장 시연 (/showroom)

• 딜러 로그인한 기기에서만 열리는 전체 화면 모드
• 120초 무조작 시 자동 초기화(20초 전 경고), 무료 횟수 제한 없음, 접수 건은 "매장"으로 표시

실행

npm install
cp .env.example .env.local   # GEMINI_API_KEY, DEALER_PASSWORD 입력
npm run dev                  # http://localhost:3000

환경변수는 .env.example을 참고하세요. 데모 모드 제한은 lib/constants.ts(무료 5회, IP당 일 20회)이며, 사용자가 자기 Gemini 키(BYOK)를 입력하면 제한 없이 쓸 수 있습니다.

구조

• lib/tiles.ts 도메인 타입·상수 / lib/server/* 파일 DB, 인증, 카탈로그 입출력, SSRF 방어, 속도 제한
• app/api/tile-apply Gemini(gemini-3.1-flash-image-preview)에 방 사진 + 면별 타일 샘플 + 시공 지시문을 전달
• app/api/dealer/* 딜러 전용 API / app/api/catalog, leads, designs 공개 API
• components/tile/* 소비자 UI, components/dealer/* 딜러 콘솔

알아 둘 한계

• 생성형 합성입니다. 면 마스크로 정확히 치환하는 방식이 아니라서 타일 질감·줄눈 정확도가 사진마다 다르고, 옵션을 바꿀 때마다 다시 생성해야 합니다(Roomvo처럼 즉시 반영되지 않음). 견적·시공 확정용 이미지가 아니라는 안내가 필요합니다.
• 파일 기반 저장소(data/db.json)는 MVP용입니다. Vercel 같은 서버리스에는 맞지 않으므로 운영 시 DB와 객체 저장소로 교체하세요.
• 시드 데이터(샘플 타일 24종)와 데모룸 이미지(public/demo-rooms/*.svg)는 자리표시자입니다. 실제 사진과 거래처 카탈로그로 교체하세요.
• 문의 폼의 개인정보 수집·이용 동의 문구는 법무 검토가 필요합니다.
• 피드 URL·이미지 URL 가져오기는 https와 사설망 차단을 적용했지만 DNS 리바인딩까지 완전히 막지는 못합니다.