🏆 최우수상 수상
내 피부를 가장 잘 아는
나만의 맞춤형 스킨케어 큐레이션
피부 타입 분석부터 화장품 추천, 루틴 관리까지
스마트 뷰티 플랫폼, 피뷰(Piview)
🚀 프로젝트 정보 |
🔥 Team |
💬 왜 PiView인가 |
✨ 주요 기능 |
📂 프로젝트 구조
⚙️ 코어 파이프라인 |
🛠 기술 스택 |
📄 개발 상세 문서 |
🗃 Data Modeling
🏗 System Architecture |
🎬 Demo Video
| 항목 | 상세 내용 |
|---|---|
| 🗓️ 진행 기간 | 2026.02.23 ~ 2026.03.30 (약 5주) |
| 💻 플랫폼 | Web |
| 👥 개발 인원 | 6명 |
| Profile | Responsibilities |
|---|---|
 김가민 Team Lead / Infra / BE |
- 프로젝트 총괄 - Docker Compose·Nginx 기반 Dev/Prod 환경 및 HTTPS·Swagger 라우팅 설정 - Redis·MySQL·DuckDB·Chroma 기반 서비스 환경 및 컨테이너 설정 구현 - 화장품 추천 API 및 루틴 단계별/멀티 추천 로직 구현 - 비적합 제품·문제 성분 반영 추천 로직 및 피부 타입·카테고리 기반 추천 구조 구현 - DuckDB 기반 이벤트 로그 배치 및 추천 점수·연관 상품 동기화 구현 - OAuth2·Security 설정 및 인증/리다이렉트 경로 설정 반영 |
 김상지 AI / BE |
- JWT 기반 인증 필터 및 토큰 재발급·로그아웃 API 구현 - OAuth2(Kakao) 로그인, 쿠키 릴레이, 하이브리드 인증 구조 구현 - SecurityConfig·WebMvc·Swagger 인증 경로 및 개발용 토큰 설정 반영 - Redis 기반 임시 루틴 저장 및 루틴 추가·조회·수정 로직 구현 - 메인 루틴 조회·관리 및 루틴 응답 구조 개선 - 제품 좋아요 API 및 화장품 통합 검색 API 구현 - 외부 AI 연동 기반 제품 요약·비교 분석 API 및 비동기 처리 구현 - FastAPI, EasyOCR, GMS 연동 기반 화장품 OCR 인식 및 AI 텍스트 정제 파이프라인 구축** |
 문현지 FE |
- 마이페이지·홈·추천·검색·상품 상세 화면 Figma로 UI 구현 - ProductCard·RoutineTab·OwnedTab·RoutineAddModal 등 재사용 가능한 공통 컴포넌트 설계·구현 및 TypeScript 기반 props 타입 정의를 통한 타입 안전성 확보, shadcn/ui + Radix UI 활용 접근성 개선 - 보유제품·기피제품·피부타입·피부고민 조회/수정 API 연동, 임시 루틴 이동 및 루틴 기반 제품 추천 기능 개발 - 성분 비교 모달·AI 챗봇 UI·제품 태그·하단 네비게이션 디자인 개선 및 Zustand를 활용한 전역 상태 기반 UI 인터랙션 구현 - 모바일 퍼스트 반응형 레이아웃 구현, CSS transition 기반 버튼 애니메이션 적용, Next.js App Router 라우팅 관련 뒤로가기 오류 디버깅 및 수정 |
 박승찬 BE |
- 제품 엔티티·리포지토리 및 상품 조회 API 구조 구현 - 대카테고리·카테고리·브랜드·피부고민 태그 메타데이터 API 구현 - 상품 목록 조회·필터링·통합 검색 쿼리 및 ProductCatalogService 로직 구현 - ProductRepositoryImpl 기반 조회 쿼리 최적화 및 native SQL 적용 - 상품 피부고민 태그 매핑 및 ProductConcernCache 기반 응답 구조 반영 - 상품 비교 API 및 성분·EWG·알레르기 비교 로직 구현 |
 전희수 AI / BE |
- 피부 설문/피부 분석 기능 및 백엔드-AI 연동 개발 - 챗봇 기능 개발 및 RAG 검색 구조 구현 - 상품 검색 파이프라인 및 검색어 해석 로직 구현 - Chroma·Redis 기반 검색/세션 환경 연동 구현 - 사용자 프로필 조회·수정 API 구현 - 안 맞는 제품 등록·조회·삭제 및 문제 성분 관리 API 구현 - README, AGENTS, Swagger 문서 정리 |
 최현웅 AI / FE |
- React/Next 기반 퍼블리싱 및 주요 화면 UI 구현 - 검색·추천·상품 상세·좋아요·마이페이지 화면 개발 - ProductCard·CompareModal·CategoryFilter 등 공통 UI 컴포넌트 구현 및 개선 - 피부 설문 플로우 및 상세·검색 API 연동 화면 처리 - 루틴 추가 모달·OCR 뷰파인더·챗봇 제품 카드 등 사용자 인터랙션 기능 수정 - 카테고리 필터·페이징·이미지 최적화·PWA 등 프론트 기능 개선 - 스킨케어 성분 DB · 제품 데이터 크롤링 및 성분 기반 피부타입 분류 알고리즘 설계 - AI 루틴 분석 설계 및 구현 — 피부 데이터 구조화 및 Gemini 프롬프트 엔지니어링 |
화장품을 고르는 일은 생각보다 단순하지 않습니다. 같은 수분크림이라도 피부 타입이 어떤지, 민감도는 어떤지, 피하고 싶은 성분이 있는지, 이미 쓰고 있는 제품과 충돌하지는 않는지에 따라 잘 맞는 제품이 달라집니다.
기존 탐색 방식은 대체로 리뷰 중심이거나 단일 제품 중심입니다.
- 피부 상태를 정량적으로 반영하기 어렵습니다.
- 사용자의 회피 성분과 선호를 구조화해 반영하기 어렵습니다.
- 이미 사용 중인 제품들과의 궁합까지 고려하기 어렵습니다.
- 검색 결과는 많지만, 왜 이 제품이 나에게 맞는지 설명이 약합니다.
PiView는 이 문제를 해결하기 위해 피부 분석, 설문 기반 보정, 성분 분석, 제품 비교, 보유 제품 관리, 루틴 구성을 하나의 흐름으로 연결했습니다.
| AI 피부 진단 | OCR 기반 보유 제품 등록 | 제품 상세보기 및 AI 분석 | 제품 비교 및 AI 요약 |
|
|
|
|
| 추천 제품 추가 후 루틴 AI 분석 | 제품 충돌 알람 | 추천 탭 조회 및 루틴 추가 | Gamini 챗봇 |
|
|
|
|
.
├─ frontend/ # 사용자 화면, 온보딩, 탐색, 추천, 마이페이지, 상태 관리
├─ backend/ # 인증, 도메인 로직, 제품/루틴 API, 추천 오케스트레이션, 데이터 관리
├─ ai/ # 피부 분석, OCR, 자연어 질의 해석, 검색 보조, 챗봇 보조
├─ nginx/ # 리버스 프록시 및 라우팅 설정
├─ docs/
│ └─ architecture/ # 시스템 개요와 계층별 상세 설계 문서
├─ docker-compose.yml # 프론트엔드, 백엔드, AI, 인프라 컨테이너 구성
└─ init.sql # MySQL 초기 데이터베이스 생성 스크립트
| 피뷰(Piview)는 정확한 진단, 정교한 추천, 그리고 스마트한 탐색을 위해 3가지 핵심 AI 파이프라인을 운영합니다.
얼굴 이미지 추론 데이터와 사용자 설문 응답을 결합하여, 가장 정확한 현재 피부 상태를 도출합니다.
- Step 1. 입력 정리 얼굴 사진(모델 추론용)과 설문 응답(체감 정보 및 생활 습관 신호)을 하나의 사용자 컨텍스트로 묶어 분석을 준비합니다.
- Step 2. 얼굴 영역(ROI) 추출
MediaPipe를 활용해 이마, 양 볼 등 부위별 분석에 필요한 얼굴 영역을 추출하고 정렬합니다. 사진의 구도가 달라도 일관된 기준으로 부위를 잘라내어 추론의 정확도를 높입니다. - Step 3. AI 모델 추론 * 전체 얼굴:
EfficientNet-B0적용- 국소 부위:
ConvNeXt-Tiny,EfficientNet-B2적용 - 유/수분감이 부위별로 다를 수 있으므로, 얼굴 전체의 흐름과 국소 부위의 특징을 분리하여 정밀하게 분석합니다.
- 국소 부위:
- Step 4. 설문 보정 및 최종 결과 생성 사진 추론 결과에 설문 응답을 보정 신호로 결합합니다. 이렇게 완성된 피부 상태 정보는 추천, 검색, 필터링의 핵심 기준으로 사용됩니다.
피부 타입, 루틴의 밸런스, 성분 충돌, 그리고 사용자의 행동 로그까지 종합적으로 분석하여 최적의 제품을 제안합니다.
- Step 1. 추천 컨텍스트 구성 피부 타입, 주요 고민, 회피 성분, 안 맞는 제품, 현재 루틴 상태를 종합하여 추천의 기준점을 설정합니다.
- Step 2. 1차 후보 필터링 (Hard Filter)
- 피부 타입에 맞지 않거나, 회피/알레르기 성분이 포함된 제품 제외
- 지성/수부지의 경우 트러블 유발 가능성(모공 막힘 등)이 높은 제품 엄격히 필터링
- 현재 루틴에 이미 포함된 제품 제외
- Step 3. 기본 적합도 스코어링 사용자의 피부 타입과 현재 피부 고민에 얼마나 부합하는지를 기준으로 가산점을 부여합니다.
- Step 4. 스킨케어 루틴 밸런스 보정 단일 제품의 스펙뿐만 아니라 현재 루틴과의 조화를 분석합니다. 각 루틴 단계에서 기대하는 유/수분 균형을 계산하여, 부족한 부분을 잘 채워주는 제품에 높은 점수를 부여합니다.
- Step 5. 성분 충돌 필터링 (Safety Check)
같이 사용하면 위험한 성분 조합(예:
레티놀 ↔ 산성 각질제거제 / 순수 비타민C)을 감지하여 강력한 페널티를 부여합니다. - Step 6. 동적 행동 로그 반영 (User Interaction)
주기적으로 집계된 행동 로그를 스코어에 반영합니다. (
좋아요(강) > 상세페이지 조회(중) > 검색 노출(약)) - Step 7. 최종 랭킹 정렬 기본 적합도, 루틴 밸런스, 성분 안전성, 행동 로그를 모두 수치화하여 최종 우선순위 목록을 사용자에게 제공합니다.
사용자의 자연어 질의를 해석하고, 벡터 검색과 키워드 검색을 병행하여 맞춤형 제품 정보와 추천 이유를 설명합니다.
- Step 1. 자연어 질의 입력 단순한 대화가 아닌, 제품 탐색과 추천 이유 설명에 특화된 인터페이스로 질의를 수집합니다.
- Step 2. 의도 및 조건 추론 (NLP Processing)
- 질문을
추천 요청형,정보 설명형,기본 안내형으로 분류합니다. kiwipiepy로 형태소를 분석하고,RapidFuzz를 통해 오타와 표현의 흔들림을 교정합니다.- 영어/한국어 혼용 표현(
toner->토너)을 정규화하며, 현재 화면의 문맥(카테고리, 피부 고민 등)을 함께 파악합니다.
- 질문을
- Step 3. 하이브리드 멀티 검색 (Retrieval)
- 벡터 검색:
ChromaDB를 활용해 질문의 의미(Semantic)와 유사한 제품 탐색 - 키워드 검색: 상품명, 브랜드 등 명시적인 텍스트 조건 매칭
- 퍼지 검색: 오타 보정 및 연관 후보 확장
- 벡터 검색:
- Step 4. 생성형 응답 조합 (Generation) 단순한 검색 결과 나열을 넘어, 검색된 데이터를 근거로 제품의 추천 이유와 비교 요약을 사람이 읽기 쉬운 자연어로 생성합니다. (검색 근거가 부족할 경우 Fallback 응답 제공)
- Step 5. 최종 응답 반환 이전 대화의 맥락을 유지하면서, 제품 정보와 스마트한 추천 이유가 결합된 최종 답변을 사용자에게 제공합니다.
| Category | Spec |
|---|---|
| Language | TypeScript |
| Package Manager | pnpm 10 |
| Framework | Next.js 16, React 19 |
| Libraries | TanStack Query 5.90, Axios 1.13, Zustand 5, Framer Motion 12 |
| UI | Radix UI, shadcn/ui, Lucide React |
| Styling | Tailwind CSS 4 |
| PWA | @ducanh2912/next-pwa 10.2.9 |
| Build Tool | Next.js (Turbopack / Webpack) |
| IDE | VS Code |
| Category | Spec |
|---|---|
| Language | Java 21 |
| Framework | Spring Boot 3.5.11 |
| Core Libraries | Spring Security, Spring Batch, Spring Data JPA, QueryDSL, JWT, OAuth2 |
| API Docs | Springdoc OpenAPI (Swagger) |
| Database | MySQL, Redis |
| Vector / OLAP DB | Chroma DB, DuckDB |
| Build Tool | Gradle |
| IDE | IntelliJ IDEA |
| Category | Spec |
|---|---|
| LLM Model | Gemini 계열 모델 (FastAPI OCR/챗봇 기본 gemini-2.5-flash, Backend 상품 요약·상품 비교·루틴 분석 gemini-2.5-flash-lite) |
| OCR & Vision | EasyOCR, OpenCV, PaddleOCR |
| Skin Analysis | PyTorch, MediaPipe Face Landmarker, EfficientNet-B0, ConvNeXt-Tiny, EfficientNet-B2 |
| Embedding & Vector Search | GMS OpenAI-compatible Embeddings (text-embedding-3-small), ChromaDB |
| Search Engine | MySQL Keyword Search, Exact Search, Fuzzy Search |
| Session & Cache | Redis / In-memory Chat Session, Redis 기반 피부 분석 상태 캐싱 |
| Algorithm | Bounding Box Height Sorting, OCR Confidence Filtering, Levenshtein Distance (DP), Dynamic Weighted Matching, Hybrid Retrieval (Vector + Keyword + Exact/Fuzzy), Structured Query Parsing & Reranking |
| Features | 인메모리 이미지 디코딩, 얼굴 ROI 추출 및 부위별 피부 타입 분석, 양볼 평균 수분 추정, LLM 기반 OCR 텍스트 정제 및 공식 명칭 변환, 동적 가중치 및 오타 보정 기반 DB 매칭, 사전 기반 상품 검색 질의 해석, 사용자 문맥 기반 개인화 챗봇, 상품 AI 요약/비교, 루틴 AI 분석 |
| Category | Spec |
|---|---|
| Instance | Cloud Instance (Ubuntu) |
| Container | Docker, Docker Compose |
| CI/CD | GitLab, Jenkins (Publish over SSH) |
| Frontend | React, Next.js |
| Backend | Java 21 (Eclipse Temurin), Spring Boot 3 |
| Database (Main) | MySQL |
| Database (Vector) | ChromaDB |
| Database (Batch) | DuckDB (Embedded) |
| AI / External API | Google Gemini Pro API |
| Security | JWT (JSON Web Token) |
| Version Control | Git, GitLab (Monorepo Architecture) |
루트 README에서는 PiView의 전체 흐름을 먼저 볼 수 있고, 더 자세한 구조와 설계는 docs/architecture/ 아래 문서에서 이어서 확인할 수 있습니다.
실제 공개 경로, 외부 설정 파일, 서비스 연결 방식은 환경과 배포 설정에 따라 달라질 수 있습니다.
| 요구사항 정의서 | Notion 바로가기 |
| 아키텍처 인덱스 | docs/architecture/README.md |
| 시스템 개요 | docs/architecture/overview/system-overview.md |
| Frontend 구조 | docs/architecture/frontend/app-structure.md |
| Backend 도메인 맵 | docs/architecture/backend/domain-map.md |
| AI 서비스 맵 | docs/architecture/ai/service-map.md |
| Infra 배포 구조 | docs/architecture/infra/deployment-layout.md |
Database ERD Cloud – 관계형 데이터 모델링 구조
