오늘의코디
오늘의코디 프로젝트 요약
프로젝트/팀 기본정보
- 팀명: okko
- 프로젝트명: 오늘의코디
- GitHub 저장소: https://github.com/okko93837/okko-in-okky
제품 링크 또는 실행 방법
pnpm install && pnpm dev 로 로컬 실행 (http://localhost:3000)
문제 정의 (Problem)
보유한 옷의 코디 조합을 실제로 입어보지 않고는 확인할 수 없는 불편함. 매일 아침 옷을 꺼내 입어보고 갈아입는 시간 낭비와, 새로운 조합을 시도하지 못하는 한계를 해결하고자 함.
해결 방식 (Solution)
- 클라이언트 프라이버시 보호: OpenCV.js + YuNet으로 얼굴 블러를 브라우저에서 처리하여 서버에 얼굴 데이터 미전송
- AI 파이프라인: SAM3 세그멘테이션 → @imgly 배경 제거 → 멀티모달 LLM 재질 파악 → GPT Image 제품샷 생성
- 가상 착용: 옷장에서 상의/하의/신발을 조합하고 프리셋 모델에 착용 이미지를 생성
- 임의판단 금지: 프롬프트에 색상/패턴/재질/핏 변경 금지 조항을 명시하여 원본 충실도 유지
한 줄 소개
전신 사진 한 장으로 AI가 옷을 분리·분석하고, 가상 모델에 입혀보는 코디 미리보기 서비스
데모 설명 (3분 이내 기준)
- 전신 사진 1장 업로드
- AI가 자동으로 얼굴 블러 → 의류 분리 → 배경 제거 → 재질 분석 → 제품샷 생성
- 옷장에 저장된 아이템을 상의/하의/신발 조합
- 프리셋 모델 선택 후 착용 이미지 생성으로 코디 미리보기
팀 소개 및 역할
A - 인입 파이프라인 (업로드/얼굴블러/세그멘테이션/배경제거/재질파악/제품샷 생성) B - 옷장·프리뷰 파이프라인 (옷장 UI/아이템 관리/프리셋 모델/착용 이미지 생성)
기술 스택
- 프레임워크: Next.js 16 (App Router) + React 19 + TypeScript
- 스타일링: Tailwind CSS 4 (Mono Black + Rose 디자인 시스템)
- 얼굴 블러: OpenCV.js + YuNet ONNX (클라이언트)
- 배경 제거: @imgly/background-removal (클라이언트 WASM)
- 세그멘테이션: Replicate SAM3 API
- 이미지 생성: OpenAI gpt-image-1 (제품샷 + 착용 이미지)
- 재질 분석: Google Gemini 멀티모달 LLM
- DB/Storage: Supabase (PostgreSQL + Storage + Anonymous Auth)
- 프리셋 모델: AI 사전 생성 정적 에셋 (남녀 × 3체형)
실행/검증 방법
- pnpm install
- .env.local에 OPENAI_API_KEY, REPLICATE_API_TOKEN, NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY, GOOGLE_AI_API_KEY 설정
- pnpm dev → http://localhost:3000
- 전신 사진 업로드 → 자동 파이프라인 처리 확인
- 옷장에서 아이템 조합 → 미리보기 생성 확인