Rebuild reference videos as editable AI motion graphics for product demos and launch videos. Download MotionClone for Windows or explore the early-access online studio.
서비스명은 "닮았네"입니다. 저장소/배포 프로젝트 이름(dalmum-test)은 이전 이름의 흔적으로, 이미
연결된 GitHub 저장소·Vercel 프로젝트·도메인이 있어 그대로 유지합니다. 화면에 보이는 문구만
"닮았네"로 바뀌었다고 생각하면 됩니다.
사진 두 장(내 사진 + 비교 대상)을 올리면 눈·눈썹·코·입·얼굴형·이목구비 배치까지
부위별 닮음도와 전체 닮음 %를 보여주는 재미용 웹서비스입니다.
• 얼굴 분석은 100% 브라우저 안에서 실행됩니다. 업로드한 사진은 서버로 전송되거나 저장되지 않습니다.
• 사용 라이브러리: @vladmandic/face-api (무료 오픈소스, face-api.js 유지보수 포크)
• 프레임워크: Next.js 15 (App Router) + React 19
• 현재 상태: Vercel에 배포되어 실제 서비스 중 — 사용해보면서 나온 버그/기능 요청을 반영해 계속 다듬는 단계 (구글/네이버 검색 등록·애드센스 신청은 아직 전. DEPLOY.md 4~5단계 참고)
현재 상태: Vercel에 배포되어 실제 서비스 중 — 사용해보면서 나온 버그/기능 요청을 반영해 계속 다듬는 단계 (구글/네이버 검색 등록·애드센스 신청은 아직 전. DEPLOY.md 4~5단계 참고)
화면 흐름 (3단계)
사진 올리기 + 위치 맞추기 — 사진을 올리면 얼굴을 자동으로 인식해 원 안에
맞춰준다. 사진 속에 여러 명이 있으면 감지된 얼굴 썸네일 중 하나를 골라 다시
맞출 수 있다. 자동 인식이 마음에 안 들면 슬라이더로 확대/축소하거나, 사진을
직접 드래그(PC는 마우스, 모바일은 두 손가락)해서 옮길 수 있다. ✕ 버튼으로
사진을 지우고 다시 올릴 수 있다.
로딩 — 눈/눈썹/코/입/얼굴형/이목구비 6항목을 순서대로 확인하는 체크리스트
애니메이션.
결과 — 전체 닮음도 %, 5% 구간별 코멘트, 부위별 점수·설명·비교 크롭 이미지,
저장/공유/다시하기.
폴더 구조
경로
설명
app/page.js
메인 화면(위 3단계 흐름 전체)
app/page.module.css
화면 스타일 (디자인 토큰은 app/globals.css)
app/layout.js
공통 레이아웃 + 검색엔진 노출(SEO)용 메타데이터
lib/faceAnalysis.js
얼굴 인식(자동 감지·다중 얼굴)·크롭/줌·부위별 유사도·닮음도 코멘트 계산 (브라우저 전용)
npm install # 처음 한 번만
npm run dev # 개발 서버 실행 → http://localhost:3000
빌드 확인:
npm run build # 배포 전 오류 점검
npm start # 빌드 결과 실행
⚠️ 주의: npm run dev가 켜져 있는 상태에서 npm run build를 돌리면 .next 폴더가
겹쳐 써지면서 개발 서버가 깨집니다(화면에 스타일이 안 먹거나 404가 남). 빌드 전에
개발 서버를 끄고(taskkill //F //IM node.exe //T 후 .next 폴더 삭제), 빌드가 끝나면
다시 npm run dev로 켜세요.
배포
단계별 안내는 DEPLOY.md 를 보세요 (비전공자용, 순서대로 따라 하기).
요약: GitHub에 push → Vercel에서 Import → 환경 변수 입력 → Deploy. 이후 push하면 자동 재배포.
