㈜한일자동도어는 차고문·대문·현관문 등 다양한 제품군을 보유하고 있으나, 고객이 실제 시공 전 자택 외관과의 조화를 미리 체감하기 어려워 상담 단계에서 많은 시간과 반복 커뮤니케이션이 발생했습니다. 또한 영업팀은 문 디자인, 색상, 배경 자산을 개별적으로 관리해야 해 신제품 반영과 프로모션 운영에 한계가 있었습니다. 이에 따라 본 프로젝트는 AI 기반 자동 감지와 실사 합성 시뮬레이터를 통해 고객이 스스로 디자인을 선택하고 상담으로 전환할 수 있는 브랜드 경험을 구축하는 것을 목표로 하였습니다. 이를 통해 상담 준비 시간 단축, 고객 전환율 향상, 내부 자산 관리 효율화를 동시에 달성하고자 했습니다.

1. 프로젝트 개요

㈜한일자동도어의 AI 문 시뮬레이터와 브랜드 랜딩 경험을 통합한 웹 서비스로, 방문자가 실제 집 외관 사진에 차고문·대문·현관문을 합성해보고 상담으로 이어질 수 있도록 설계했습니다.
당사는 초기 기획, 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 자동 감지로 인한 합성 정확도 향상이 확인되었습니다.
관리자 페이지에서 디자인·배경 자산을 일원화함으로써 콘텐츠 업데이트 리드타임을 단축했습니다.
확장 시나리오를 고려해 유연한 모듈 구조와 데이터 모델을 설계했습니다.