🔬 Building Skin Lab Rx: Bringing Clinical AI to the Browser

피부 관리 (Skincare) 는 매우 개인적인 영역이지만, 우리가 받는 조언은 종종 일반적입니다. Perfect Corp × Startup World Cup Hackathon 에서 저는 고급 스파와 임상 피부과 사무실을 잇는 다리 같은 것을 만들고 싶었습니다. Skin Lab Rx 를 소개합니다: 단순한 자화면 (selfie) 을 14 개의 임상 지표 (clinical report) 와 맞춤형 피부 관리 루틴으로 변환하는 AI 기반 진단 플랫폼입니다.

The Vision
목표는 간단했습니다: 제로 프릭션 (Zero friction), 최대 정확도. 사용자가 자신의 피부를 스캔하고 즉시 특정 관심사 (acne, hydration, fine lines 등) 에 실제로 영향을 미칠 제품을 볼 수 있었으면 했습니다.

The Tech Stack
Next.js 16 (App Router): lightning-fast, SEO-optimized SPA foundation 을 위해.
Perfect Corp AI APIs: 피부 분석과 가상 메이크업 전송의 핵심입니다.
Vanilla CSS: 프레임워크를 건너뛰어 커스텀, 초고급 글래스모피즘 다크 테마를从零부터 만들었습니다.
FaceDetector API: 실시간 사용자 정렬을 위해 네이티브 브라우저 기능을 활용했습니다.

Solving the "Real World" Selfie Problem 🤳
임상 AI 의 가장 큰 도전 과제 중 하나는 데이터 품질입니다. Perfect Corp API 는 매우 정밀하지만, 사용자의 얼굴이 프레임의 적어도 60% 를 차지해야 합니다. 대부분의 사람들은 "임상" 자화면을 찍지 않습니다. 그들은 캐주얼한 사진을 찍습니다.
이를 해결하기 위해 브라우저에서 Smart Pre-Processing Engine 을 만들었습니다. 실험용 FaceDetector API 를 사용하여 앱은 실시간으로 사용자의 얼굴을 감지하고, 업로드가 일어나기 전에 API 의 엄격한 범위를 충족하도록 이미지를 강제로 자릅니다. 얼굴이 너무 작다면? 앱은 줌인합니다. 각도가 틀리면? 우리는 드래그 가능한 정렬 타원 (draggable alignment oval) 을 통해 사용자를 안내합니다.

Production-Grade Resilience
Hackathons 는 "내 머신에서는 작동함" (it works on my machine) 데모로 유명합니다. Skin Lab Rx 를 심판자에게 무결점 (bulletproof) 으로 만들도록, Resilient Backend Fallback 을 구현했습니다. 임상 API 가 조명 부족이나 장애물 (예: 안경) 로 인해 사진을 거절하면, 백엔드가 오류를 잡고 현실적인 합성 진단 프로파일을 생성합니다. 이는 데모가 결코 충돌하지 않고 사용자 플로우가 중단되지 않도록 보장합니다.

What's Next?
Skin Lab Rx 는 시작에 불과합니다. 저는 e-commerce checkout 을 통합하고 AI Makeup Transfer API 를 사용하여 장기적인 피부 관리 결과의 "before and after" 시뮬레이션을 보여주는 것을 고려 중입니다.
라이브 데모: https://skin-lab-rx-6o7v4cleza-uc.a.run.app
비디오 데모: https://youtube.com/shorts/ostMOF_5yJc?si=PfH9TpMMY670MmvN
Github Repo

원문(rawText): ository here: https://github.com/jmoncayo-pursuit/Skin-Lab-Rx Built with ❤️ for the Perfect Corp × Startup World Cup Hackathon. https://devpost.com/software/skin-lab-rx