닮았네 (dalmum-test)

서비스명은 "닮았네"입니다. 저장소/배포 프로젝트 이름(dalmum-test)은 이전 이름의 흔적으로, 이미 연결된 GitHub 저장소·Vercel 프로젝트·도메인이 있어 그대로 유지합니다. 화면에 보이는 문구만 "닮았네"로 바뀌었다고 생각하면 됩니다.

사진 두 장(내 사진 + 비교 대상)을 올리면 눈·눈썹·코·입·얼굴형·이목구비 배치까지 부위별 닮음도와 **전체 닮음 %**를 보여주는 재미용 웹서비스입니다.

• 얼굴 분석은 100% 브라우저 안에서 실행됩니다. 업로드한 사진은 서버로 전송되거나 저장되지 않습니다.
• 사용 라이브러리: @vladmandic/face-api (무료 오픈소스, face-api.js 유지보수 포크)
• 프레임워크: Next.js 15 (App Router) + React 19
• 현재 상태: Vercel에 배포되어 실제 서비스 중 — 사용해보면서 나온 버그/기능 요청을 반영해 계속 다듬는 단계 (구글/네이버 검색 등록·애드센스 신청은 아직 전. DEPLOY.md 4~5단계 참고)

화면 흐름 (3단계)

1. 사진 올리기 + 위치 맞추기 — 사진을 올리면 얼굴을 자동으로 인식해 원 안에 맞춰준다. 사진 속에 여러 명이 있으면 감지된 얼굴 썸네일 중 하나를 골라 다시 맞출 수 있다. 자동 인식이 마음에 안 들면 슬라이더로 확대/축소하거나, 사진을 직접 드래그(PC는 마우스, 모바일은 두 손가락)해서 옮길 수 있다. ✕ 버튼으로 사진을 지우고 다시 올릴 수 있다.
2. 로딩 — 눈/눈썹/코/입/얼굴형/이목구비 6항목을 순서대로 확인하는 체크리스트 애니메이션.
3. 결과 — 전체 닮음도 %, 5% 구간별 코멘트, 부위별 점수·설명·비교 크롭 이미지, 저장/공유/다시하기.

폴더 구조

경로	설명
app/page.js	메인 화면(위 3단계 흐름 전체)
app/page.module.css	화면 스타일 (디자인 토큰은 app/globals.css)
app/layout.js	공통 레이아웃 + 검색엔진 노출(SEO)용 메타데이터
lib/faceAnalysis.js	얼굴 인식(자동 감지·다중 얼굴)·크롭/줌·부위별 유사도·닮음도 코멘트 계산 (브라우저 전용)
lib/shareCard.js	결과를 SNS 공유용 PNG 이미지로 그리는 코드
public/models/	face-api 모델 파일 (약 7MB, 최초 1회만 다운로드됨)
app/(content)/	소개·사용법·FAQ·약관·문의·읽을거리 등 콘텐츠 페이지 (공통 헤더/푸터 레이아웃)
components/	공통 헤더·푸터, 콘텐츠 페이지 부품
lib/site.js	사이트 이름·도메인·문의 이메일 등 공통 설정 (배포 시 수정)
app/robots.js, app/sitemap.js	robots.txt / sitemap.xml 자동 생성
design_handoff_face_match/	디자인 참고 원본 (수정하지 않음)

로컬에서 실행하기

사전 준비: Node.js 20 버전 이상 설치

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하면 자동 재배포.

환경 변수

이름	용도	없을 때
NEXT_PUBLIC_SITE_URL	사이트 실제 주소 (sitemap·공유 미리보기)	https://example.com
NEXT_PUBLIC_CONTACT_EMAIL	문의 이메일	[email protected]
NEXT_PUBLIC_ADSENSE_CLIENT	ca-pub-… 게시자 ID	광고 대신 자리표시
NEXT_PUBLIC_AD_SLOT_CONTENT	콘텐츠 하단 광고 슬롯 ID	자리표시
NEXT_PUBLIC_AD_SLOT_RESULT	결과 하단 광고 슬롯 ID	자리표시

완료된 것

• 전체 디자인 리뉴얼 ("닮았네" 브랜드, 라즈베리 핑크/크림 팔레트, 2열 소개+업로드 레이아웃, 요약+상세 결과 레이아웃, 부위 설명 접기/펼치기) — 디자인시안/ 폴더의 시안 기준
• 얼굴 비교 핵심 기능 (사진 올리기+위치맞추기 → 로딩 → 결과 → 저장/공유, 3단계)
• 업로드 즉시 얼굴 자동 인식 → 원 안에 자동으로 맞추기, 여러 얼굴 감지 시 썸네일로 선택
• 슬라이더 확대/축소 + 드래그 위치 조정 (PC 마우스 / 모바일 두 손가락), 사진 삭제(✕) 버튼
• 닮음도 코멘트 5% 구간별 문구 (50% 미만은 별도 문구)
• 모바일 대응: 좁은 화면 2열 사진 배치, 스크롤과 사진 드래그 제스처 충돌 방지
• 큰 원본 사진 자동 축소 + 분석 후 즉시 메모리 해제 (모바일 메모리 부족 대비)
• 서비스 소개 / 사용법 / FAQ 페이지
• 개인정보처리방침 / 이용약관 / 문의하기 페이지
• 읽을거리 글 3편 (/reads)
• robots.txt, sitemap.xml, ads.txt(게시자 ID 입력 시 자동), 커스텀 404, 검색엔진용 메타데이터
• 광고 자리 2곳 (콘텐츠 페이지 하단 / 결과 화면 하단) — 버튼·콘텐츠와 떨어진 위치, 승인 전에는 자리표시만 표시
• Vercel 배포 완료, NEXT_PUBLIC_SITE_URL/NEXT_PUBLIC_CONTACT_EMAIL 실제 값 반영

남은 것 (다음 단계)

• 실사용 피드백 기반 버그 수정·기능 추가 계속 진행 중
• 개인정보처리방침·이용약관 문구 검토 (현재는 표준 양식 기반 초안)
• 구글 서치콘솔 / 네이버 서치어드바이저 등록 → sitemap 제출 (DEPLOY.md 4단계)
• SNS/커뮤니티 공유로 트래픽 만들기 → 어느 정도 쌓이면 애드센스 신청 → 승인되면 광고 환경 변수 3개 입력 (DEPLOY.md 5~6단계)

참고

• 부위별 수치는 얼굴 특징점(랜드마크) 위치를 비교한 재미 목적의 값이며, 신원 확인·친자 판별 등 어떤 공식적 용도로도 쓸 수 없습니다. (UI에도 명시되어 있습니다.)
• 유료 얼굴 분석 API로의 전환은 트래픽·수익 검증 후 별도 검토 (CLAUDE.md 참고).