프로젝트명

이벤트 랜딩페이지

개발연도

2025.08

타입

외주

클라이언트

랑콤

요약

요약 내용 22

개발 언어

React.HTML5CSS3NodeExpressMySQL

키워드

키워드해시태그

프로젝트 URL

https://example.com/22

상세설명

프로젝트 요약 화장품 프로모션용 톤체커 랜딩페이지로, 사용자가 셀피를 촬영/업로드하면 얼굴영역을 기준으로 피부 톤·밝기를 추정하고 결과에 맞는 추천 쉐이드/제품과 사용 팁, 즉시 구매/쿠폰 발급까지 연결되도록 기획+디자인+프론트(JavaScript/Canvas, 반응형)와 백엔드(PHP/Laravel·MySQL) 전 과정을 일괄 개발.

개발 과정 및 특징

플로우: 가이드→얼굴 정렬/촬영→톤 분석 진행(로딩)→결과 카드(톤/밝기/추천 제품)→구매/쿠폰/문의 CTA

톤 분석: Canvas 기반 피부영역 ROI 추출·노출 보정·평균색 산출(CIELab 근사)로 쿨/뉴트럴/웜 × 라이트~딥 매핑

추천/전환: 결과에 맞춘 쉐이드 chips·베스트 매칭 제품 리스트, 사용 팁과 함께 장바구니/바로구매·쿠폰 발급 연동

성능/접근성: 주요 연산은 로컬(브라우저)에서 처리해 체감 속도↑, 반응형 UI와 명확한 단계 표시/상태 피드백

개인정보/안내: 미동의 시 이미지 미저장, EXIF 제거 및 임시파일 즉시 삭제, “조명·카메라 설정에 따라 결과가 달라질 수 있음” 고지

운영: 결과/전환 로그·대시보드, 이벤트 공유(카카오/링크)·A/B 테스트, 관리자에서 배너·제품/쉐이드 매핑 CRUD