한일자동도어 AI 시뮬레이터 구축

한일자동도어 AI 시뮬레이터 구축

https://ai.vild.kr/simulator

1. 프로젝트 개요

㈜한일자동도어의 AI 문 시뮬레이터와 브랜드 랜딩 경험을 통합한 웹 서비스로, 방문자가 실제 집 외관 사진에 차고문·대문·현관문을 합성해보고 상담으로 이어질 수 있도록 설계했습니다. 
IT7은 초기 기획, UX 설계, 프론트엔드·백엔드 개발, AI 모델 연동, 관리자 도구 구축, QA·교육까지 전 과정을 단일 팀으로 수행했습니다.

2. 비즈니스 가치

• 시공 상담 전 단계에서 고객이 스스로 디자인을 비교·선택할 수 있어, 상담 준비 시간과 현장 방문 횟수를 줄였습니다.
• 영업팀은 시뮬레이터와 연동된 관리자 도구에서 배경·문 디자인 자산을 통합 관리하여, 신제품 반영과 프로모션 운영 속도를 끌어올렸습니다.
• AI 자동 감지와 다운로드 기능을 통해 사용자가 만든 콘텐츠를 가족·건축사와 공유하기 용이해졌습니다.

3. 핵심 사용자 기능

• 문 시뮬레이터: 샘플 또는 업로드 이미지에서 문 종류→카테고리→색상→디자인 4단계 선택을 거쳐 실시간 합성, 다중 문 배치, 꼭짓점 드래그 편집, 비교·다운로드를 제공합니다.
• AI 자동 감지: YOLOv8 기반 모델로 문 영역을 추출하고, 사용자 편집 기록을 학습 데이터로 재활용해 정확도를 지속 향상시킵니다.
• 모바일/데스크톱 대응: 데스크톱 3패널 구조와 모바일 바텀시트 UI로 모든 디바이스에서 동일한 흐름을 유지합니다.
• 이미지 자산 관리: 사용자 업로드 이미지 이력, 삭제, 재배치, 문 디자인 즐겨찾기 등 개인화 기능을 강화했습니다.
• 브랜드 랜딩 페이지: 히어로·소개·사용방법·신뢰도·CTA로 구성된 스토리텔링 구조와 KPI 카운터 애니메이션, 시공 사례 링크로 전환을 유도합니다.

4. 관리자·내부 운영 기능

• 콘텐츠 관리: 문 종류, 카테고리, 색상, 디자인을 CRUD·드래그앤드롭·대량 업로드로 관리하며 썸네일 자동 생성과 순서 제어를 지원합니다.
• 배경 이미지 편집기: 다각형 그리기와 좌표 편집으로 AI 감지 오차를 보정하고, 감지 히스토리를 기반으로 신뢰도를 가시화했습니다.
• 권한·인증: JWT 기반 인증, 역할별 메뉴 노출, 감사 로그를 적용해 보안과 감사 요구사항을 만족시켰습니다.
• 캐싱·최적화: 문·배경 데이터를 캐시 API로 제공해 초기 로드 시간을 줄이고, 순번 변경 시 서버와 동기화했습니다.

5. 기술 아키텍처

• Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS
• Backend: FastAPI, 
• DB: PostgreSQL
• AI: PyTorch·YOLOv8 커스텀 모델
• 인프라: 온프레미스 환경 내 Docker Compose를 통한 프론트·백엔드·DB 컨테이너화

6. 성과 및 확장성

• 상담사 피드백에 기반한 신속한 디자인 교체, 다운로드 공유 기능을 통한 신규 상담 유입, AI 자동 감지로 인한 합성 정확도 향상이 확인되었습니다.
• 관리자 페이지에서 디자인·배경 자산을 일원화함으로써 콘텐츠 업데이트 리드타임을 단축했습니다.
• 확장 시나리오를 고려해 유연한 모듈 구조와 데이터 모델을 설계했습니다.