뷰티 커머스 모바일 앱 AI 기반 향수 추천 기능 프로토타입

사용자가 가지고 있거나 캡처한 향수 이미지를 업로드하면, AI가 브랜드와 제품을 인식하여 해당 제품과 향기 프로필이 유사한 제품을 사용자의 예산 내에서 추천해주는 서비스 프로토타입입니다.

🌟 핵심 기능 (Features)

• 이미지 기반 향수 인식: 향수병 이미지 업로드 시 제품을 인식하는 모의 시나리오 제공 (Step 1~4)
• 향 프로필 분석: 인식된 향수의 향 계열, 노트, 분위기 등 특징을 키워드로 분석 (Step 5)
• 맞춤형 예산 필터링: 사용자가 원하는 최대 가격대를 설정하여 추천 범위를 제한 (Step 6)
• 스마트 유사도 매칭: 설정된 예산 내에서 향 유사도가 높은 제품들을 AI가 분석하여 리스트로 추천 (Step 7)
• 직관적인 향수 비교: 기준 향수와 추천 향수의 공통점/차이점 및 향 프로필(어코드)을 한눈에 비교 (Step 8)
• 상세 정보 및 구매 연결: 추천된 향수의 상세 설명과 함께 바로 장바구니/구매 탭으로 이어지는 원스톱 경험 제공 (Step 9)

🎨 UI/UX 디자인

• Apple Store 스타일의 직관적이고 깔끔한 화이트/그레이 톤 레이아웃
• 모바일(iPhone 15 Pro, 393x852) 화면에 최적화된 앱 라이크(App-like) 뷰
• 커스텀 CSS를 활용한 부드러운 애니메이션 및 모던한 칩(Chip), 카드(Card) 컴포넌트

🛠 기술 스택 (Tech Stack)

• Framework: React 18, Vite
• Styling: Vanilla CSS (커스텀 디자인 토큰 적용)
• Icons: Lucide-React
• State Management: React useState 기반의 단일 페이지 뷰 라우팅

🚀 로컬 실행 방법 (How to Run)

1. 패키지 설치

npm install

2. 개발 서버 실행

npm run dev

3. 접속 브라우저에서 http://localhost:5173 으로 접속합니다. (바탕화면에 생성된 바로가기를 클릭하셔도 됩니다.)

📁 프로젝트 구조

• /src/components/: Step 1부터 9까지 전체 플로우를 담당하는 UI 컴포넌트
• /src/App.jsx: 메인 화면 렌더링 및 뷰 컨트롤러 역할
• /src/data.js: 프로토타입 구동을 위한 모의(Mock) 향수 데이터베이스
• /src/index.css: 전역 디자인 토큰 및 공통 UI 클래스 정의