SnowCut

브라우저(iPad Safari 등)에서 쓰는 네컷 사진 부스 웹앱입니다. 카메라로 여러 장을 연속 촬영하고, 프레임에 합성해 저장·인쇄합니다.

페이지

주소	내용	광고
/	메인 페이지 (소개 · 사용법 · 자주 묻는 질문)	구글 애드센스 3곳
/booth	촬영 부스 (홈 화면에 추가하면 바로 여기로 열림)	없음
/privacy	개인정보처리방침 (애드센스 쿠키 안내)	없음
/en · /ja · /zh (+ /booth, /privacy)	영어 · 일본어 · 중국어(간체) 페이지	메인만
/sitemap.xml · /robots.txt · /llms.txt	검색엔진 · AI 검색용	–
/ads.txt	애드센스 판매자 정보	–

다국어 · 접속 국가별 언어

한국어(기본)는 접두사 없는 주소, 다른 언어는 /en, /ja, /zh 아래에 있습니다. 문구는 src/i18n/messages/<언어>/에 있고, 한국어(ko)가 원본입니다. 다른 언어는 같은 구조를 따라야 빌드·테스트가 통과합니다.

• Vercel: vercel.json이 접속 IP의 나라(x-vercel-ip-country)를 보고 한국어 주소에서 언어 주소로 임시 이동(307)시킵니다. 한국 → 한국어, 일본 → 일본어, 중국·대만·홍콩·마카오 → 중국어, 그 밖 → 영어.
• 그 밖의 정적 호스팅(npm run serve 등): 한국어 페이지의 인라인 스크립트가 브라우저 시간대로 나라를 짐작해 옮깁니다.
• 화면 오른쪽 위 🌐 에서 언어를 고르면 lang 쿠키(1년)를 남기고, 그 뒤로는 자동으로 옮기지 않습니다.
• 검색엔진·AI 크롤러는 옮기지 않고, 각 페이지의 hreflang(+ x-default = 한국어)과 sitemap으로 언어별 주소를 알립니다.
• 나라 표를 바꿀 때는 src/i18n/config.ts의 COUNTRY_LOCALE과 vercel.json을 함께 고칩니다(src/i18n/i18n.test.ts가 둘이 같은지 확인).

SEO · GEO

• 언어·페이지별 제목/설명/키워드, canonical, hreflang, Open Graph·트위터 카드(public/og/og-<언어>.png, node scripts/og-images.mjs로 다시 만듦)
• 구조화 데이터(JSON-LD): WebSite, WebApplication(무료), FAQPage, HowTo — 화면의 자주 묻는 질문·사용법과 같은 문구
• 생성형 AI 검색용 /llms.txt, 화면에 보이는 "SnowCut이란?" 정의 문단
• 사이트 주소와 소유 확인 값은 빌드 환경 변수로 넣습니다.

NEXT_PUBLIC_SITE_URL=https://snowcut.vercel.app          # 정식 주소 (기본값)
NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION=...                  # Google Search Console
NEXT_PUBLIC_NAVER_SITE_VERIFICATION=...                   # 네이버 서치어드바이저

구글 애드센스 설정

게시자 ID(ca-pub-6532893388671562)는 코드에 기본값으로 들어 있습니다. 다른 값은 빌드할 때 환경 변수로 넣습니다(Vercel은 Project Settings → Environment Variables). NEXT_PUBLIC_ADSENSE_CLIENT를 빈 값으로 두면 광고를 끕니다.

광고는 기본으로 꺼져 있습니다. 관리자 모드에서 기기(브라우저)마다 켜고 끕니다.

NEXT_PUBLIC_ADSENSE_CLIENT=ca-pub-6532893388671562   # 애드센스 게시자 ID (기본값)
NEXT_PUBLIC_ADSENSE_SLOT_TOP=1111111111              # (선택) 직접 만든 디스플레이 광고 단위 data-ad-slot (소개 아래)
NEXT_PUBLIC_ADSENSE_SLOT_MIDDLE=2222222222           # (기능 소개 아래)
NEXT_PUBLIC_ADSENSE_SLOT_BOTTOM=3333333333           # (자주 묻는 질문 아래)
NEXT_PUBLIC_ADSENSE_SLOT_INTERSTITIAL=4444444444     # 다운로드·인쇄 전에 띄우는 광고 창의 광고 단위 (없으면 광고 창 없이 바로 실행)
ADMIN_PASSWORD=ab12cd34                              # 관리자 모드 비밀번호 (8자리, NEXT_PUBLIC_ 아님)

• 관리자 모드: 화면(메인·촬영 어디서나) 오른쪽 위 구석(약 64px)의 빈 곳을 3초 안에 5번 누르면 열립니다. 보이는 버튼은 없습니다. 상단 바 오른쪽 끝에 버튼 없는 여백(약 44~48px)을 두었으니 그 여백을 누르세요. 링크·버튼·언어 선택을 누른 것은 세지 않고 처음부터 다시 셉니다. 비밀번호를 넣으면 광고 표시 켬/끔 스위치가 나옵니다. 로그인은 그 탭을 닫을 때까지 유지됩니다.
• 광고 설정은 그 기기 브라우저의 localStorage(snowcut.ads)에 저장됩니다. 값이 없으면 꺼짐입니다.
• ADMIN_PASSWORD는 빌드할 때 sha256("snowcut-admin:" + 비밀번호)로 바꿔 넣으므로 평문은 사이트에 들어가지 않습니다. 다만 정적 사이트라 해시는 누구나 볼 수 있으니 추측하기 어려운 값을 쓰세요. 값이 없거나 8자리가 아니면 관리자 모드에서 "비밀번호가 설정되지 않았습니다"가 나오고 로그인할 수 없습니다. 바꾼 뒤에는 다시 배포해야 합니다.
• 광고를 켜면: 메인 페이지는 애드센스 스크립트(자동 광고)와 위 광고 단위를 불러옵니다. 결과 화면의 사진 저장·사진 다운로드·인쇄·인쇄용 파일·영상 저장/다운로드를 누르면 광고 창이 먼저 뜨고, 계속 버튼(바로 누를 수 있음)으로 원래 동작을 합니다. 애드센스 정책상 정해진 시간 동안 광고를 강제로 보여 주지 않습니다. 같은 결과에서는 한 번만 뜹니다. NEXT_PUBLIC_ADSENSE_SLOT_INTERSTITIAL이 없으면 광고 창 없이 바로 실행합니다.
• 광고 창을 띄운 뒤에는 촬영 화면에도 애드센스 스크립트가 들어가므로, 애드센스에서 자동 광고를 켰다면 촬영 화면에 자동 광고가 나올 수 있습니다(인쇄할 때는 CSS로 숨깁니다). 원하지 않으면 애드센스의 자동 광고 설정에서 /booth 페이지를 제외하세요.
• 광고가 꺼져 있으면 스크립트를 불러오지 않습니다. 사이트 소유 확인은 <meta name="google-adsense-account"> 태그와 /ads.txt로 합니다.
• /ads.txt는 NEXT_PUBLIC_ADSENSE_CLIENT 값으로 빌드할 때 만들어집니다.

커스텀 캐릭터 (누끼 서버) — 지금은 꺼져 있음

기본으로 꺼져 있어서 카드와 버튼에 준비중인 기능입니다. 가 표시됩니다. 켜려면 NEXT_PUBLIC_ENABLE_CHARACTER=1로 빌드합니다(아래 누끼 서버 설정도 필요).

시작 화면의 커스텀 캐릭터 카드에서 이미지를 올리고, 남길 캐릭터 위를 눌러 점을 찍은 뒤 누끼 따기를 누르면 배경이 지워진 캐릭터가 프레임 위에 올라갑니다. 끌어서 옮기고, 두 손가락(또는 마우스 휠)·슬라이더로 크기와 회전을 바꾸며, 좌우 반전·흰 테두리(스티커)·맨 앞으로·삭제를 할 수 있습니다. 결과 화면 옵션 단계에서 실제 사진 위에 놓고 다시 고칠 수 있고, 저장·인쇄 이미지에 함께 들어갑니다.

배경 제거는 Background-Remover(FastAPI + SAM 2.1)를 따로 띄워 두고 그 API(POST /background-removal/remove, image + points=[[x,y],...] → 투명 PNG)를 부릅니다. 코드는 가져오지 않고 HTTP로만 연동합니다(그 저장소에는 라이선스 파일이 없습니다).

# 1) 누끼 서버 실행 (NVIDIA GPU 권장, CPU면 한 장에 20~30초). 자세한 방법은 그 저장소의 README.
git clone https://github.com/Daek-You/Background-Remover.git && cd Background-Remover
docker compose -f docker-compose-local.yml up --build     # 기본 포트 5000

# 2-a) 개발: 앱이 서버를 직접 부른다. 서버 config/environments.py의 CORS_ORIGINS에 앱 주소를 넣는다.
NEXT_PUBLIC_BG_REMOVER_URL=http://localhost:5000 npm run dev

# 2-b) 배포(server.mjs): 같은 주소의 /bg-remover/* 를 누끼 서버로 넘긴다. CORS·혼합 콘텐츠 걱정이 없다.
NEXT_PUBLIC_BG_REMOVER_URL=/bg-remover npm run build
BG_REMOVER_URL=http://127.0.0.1:5000 npm run serve

• NEXT_PUBLIC_BG_REMOVER_URL이 없으면 누끼 버튼이 나오지 않고, 배경이 이미 투명한 PNG를 배경 그대로 쓰기로만 올릴 수 있습니다.
• 누끼를 딸 때만 올린 캐릭터 이미지(긴 변 1600px 이하)가 그 서버로 전송됩니다. 촬영한 사진·영상은 여전히 기기 밖으로 나가지 않습니다.

실행

Next.js 16(App Router, TypeScript) 앱이고 정적 파일로 내보냅니다(output: "export"). iPad Safari에서 HTTPS 주소로 열면 라이브 카메라와 카운트다운으로 촬영합니다.

npm install
npm run dev      # http://localhost:3000 (메인), /booth (촬영)
npm test         # 레이아웃·상태 단위 테스트
npm run build    # out/ 에 정적 파일 생성
npm run serve    # out/을 4173 포트로

• 레이아웃 6종: 세로 4컷 · 2×2 그리드 · 세로 3컷 · 2×3 6컷 · 가로 4컷(날짜 오른쪽) · 큰 1컷 + 3컷. 고른 레이아웃의 장수만큼 찍습니다.
• 촬영: 기본 카운트다운 5초, 찍을 때마다 셔터 소리. 처음부터 끝까지 찍는 동안 화면을 영상(Safari는 MP4)으로 녹화합니다.
• 카메라: 연결된 카메라가 둘 이상이면 촬영 화면 오른쪽 위에서 고릅니다. 고른 카메라는 기억합니다.
  • 니콘 Zf: 카메라 메뉴 네트워크 → USB → USB 스트리밍(UVC/UAC) 을 켜고(최신 펌웨어 필요) USB-C로 연결하면 웹캠으로 잡힙니다. 그 PC의 브라우저에서 HTTPS 주소(또는 http://localhost)로 엽니다.
• 결과 화면(다 찍은 뒤) 꾸미기 4단계: 프레임 → 필터 → 옵션(날짜·다시 찍기) → 저장
  • 프레임 21종 (베이직 · 패턴 · 감성 · 시즌). 이미지 파일 없이 캔버스로 그립니다. 장수가 같은 레이아웃끼리는 여기서도 바꿀 수 있습니다.
  • 필터 11종 (CSSgram/instagram.css 수치 기반). 사진 칸에만 적용되고 프레임·문구는 그대로입니다.
  • 사진 아래 문구는 넣지 않습니다. 날짜 표시는 켜고 끌 수 있습니다.
• 저장: 사진 저장 → 공유 시트 → 이미지 저장을 누르면 사진 앱에 들어갑니다. 사진을 길게 눌러도 저장할 수 있습니다. 파일로 다운로드는 파일(iPad는 파일 앱의 다운로드 폴더)로 받습니다. 촬영 영상도 영상 저장 / 영상 다운로드로 받을 수 있습니다.
• 인쇄 (엽서 용지 100×148mm, 테두리 없음): 저장 단계의 인쇄 → 인쇄 창에서 용지 엽서, 테두리 없음을 고릅니다.
  • 제작자는 캐논 SELPHY CP1500을 씁니다. 일반 프린터라면 엽서 크기의 광택 인화지를 넣어 인쇄합니다.
  • 세로 4컷·세로 3컷·가로 4컷(세로로 세움)은 한 장에 두 개씩 들어가서 수량을 2의 배수로 고르고, 가운데 표시를 따라 자릅니다. 나머지 레이아웃은 한 장에 하나입니다.
  • 인쇄용 이미지로 받은 JPEG(2362×3496)를 Canon SELPHY Photo Layout 앱으로 인쇄해도 됩니다.
• Safari 공유 → 홈 화면에 추가를 하면 앱처럼 전체 화면으로 열립니다.
• 실시간 카메라를 쓸 수 없는 환경(HTTP 주소, 권한 거부)에서는 버튼을 누를 때마다 iPad 기본 카메라가 열려 한 장씩 찍습니다.
• 배포: Vercel에서 이 저장소를 가져오면 Next.js로 인식해 설정 없이 배포됩니다. 다른 정적 호스팅(Netlify, GitHub Pages 등)에는 out/ 폴더를 올립니다. GitHub Pages처럼 하위 경로에 올릴 때는 NEXT_PUBLIC_BASE_PATH=/저장소이름 npm run build로 빌드합니다.

src/
  app/            layout(글꼴·메타데이터), page(메인), manifest, globals.css
  app/booth/      촬영 부스 페이지 (광고 없음)
  app/privacy/    개인정보처리방침
  app/ads.txt/    ads.txt (빌드할 때 생성)
  components/     Booth(화면 전환) · StartScreen · CaptureScreen · ResultScreen(꾸미기 4단계) · ShotThumb · AdSlot(메인 광고)
  hooks/useCamera.ts   전면 카메라 연결, 백그라운드 복귀 처리, wake lock
  lib/frame.ts         레이아웃 6종 (캔버스 크기·칸 좌표·장수)
  lib/canvas.ts        촬영본 축소, 4컷 합성
  lib/saveImage.ts     공유 시트 / 다운로드 저장
  lib/recorder.ts      촬영 영상 녹화 (거울 모드 캔버스 → MediaRecorder)
  lib/boothState.ts    화면·촬영 상태 리듀서
  lib/frames.ts        프레임 디자인 21종 (캔버스로 그림)
  lib/look/            색 필터 (WebGL2 셰이더, CSS 필터 행렬)
  lib/sound.ts         셔터 소리 (Web Audio)
  lib/print.ts         SELPHY 엽서 인쇄용 시트 (한 장에 1개 또는 2개)
  lib/ads.ts           애드센스 설정 (환경 변수)
server.mjs           out/ 정적 서버 (npm run serve)