나만의 공감 빙고

서버 없이 돌아가는 정적 사이트입니다. 폴더를 그대로 Vercel에 올리면 배포됩니다. 설치도 빌드도 없습니다. index.html 을 더블클릭하면 내 컴퓨터에서도 그대로 열립니다.

화면

파일	하는 일
index.html	메인. "빙고 만들기" 버튼 + 인기 템플릿 목록
create.html	빙고 만들기. 제목·칸수·FREE·테마·칸 내용 입력 → 공유 링크 생성
play.html	빙고 풀기. 체크 → 빙고 줄 계산 → 결과 문구 → 결과 이미지 저장
tools/og-maker.html	카카오톡 미리보기 이미지를 다시 만드는 도구

자주 고치게 되는 파일

하고 싶은 것	고칠 파일
사이트 주소·카카오 키·광고 설정	assets/js/config.js
빙고 템플릿 추가/수정	data/templates.js
결과 문구 바꾸기	assets/js/results.js
색상 테마 바꾸기	assets/js/themes.js

---

배포하고 나서 꼭 할 일

1. assets/js/config.js 의 SITE_ORIGIN 을 진짜 주소로 바꾸기 (예: https://내사이트.vercel.app, 끝에 / 없이)
2. index.html · create.html · play.html 맨 위의 og:url, og:image 주소도 같이 바꾸기
   • 카카오톡 미리보기를 읽는 프로그램은 자바스크립트를 실행하지 못해서, 주소를 HTML에 직접 적어야 합니다.
   • 각 파일에서 gonggam-bingo.vercel.app 를 찾아 바꾸면 됩니다.
3. tools/og-maker.html 을 열어 이미지 저장 → 받은 파일을 assets/img/og-default.png 에 덮어쓰기 (주소가 바뀌었으니 미리보기 이미지 속 주소도 바뀌어야 합니다)
4. 카카오톡 공유를 쓸 거라면 아래 "카카오 공유 설정"

---

카카오 공유 설정

카카오톡 공유 버튼은 카카오 JavaScript 키가 있어야 동작합니다. 키가 비어 있으면 버튼이 아예 나타나지 않으니, 키 없이도 사이트는 정상입니다.

1. 키 발급받기

1. 카카오 개발자 사이트 에 카카오 계정으로 로그인
2. 상단 내 애플리케이션 → 애플리케이션 추가하기
   • 앱 이름: 공감빙고 (아무거나)
   • 사업자명: 개인 이름이나 블로그 이름
3. 만들어진 앱을 누르면 앱 키 목록이 나옵니다. 여기서 JavaScript 키 를 복사합니다. (REST API 키 아님)

2. 도메인 등록하기 (이걸 빼먹으면 공유가 안 됩니다)

1. 같은 앱에서 왼쪽 메뉴 앱 설정 → 플랫폼 → Web 플랫폼 등록
2. 사이트 도메인에 배포 주소를 넣습니다. 예: https://내사이트.vercel.app
   • 내 컴퓨터에서 시험해 보려면 http://localhost:4173 도 함께 등록하세요.
3. 왼쪽 메뉴 제품 설정 → 카카오 로그인 은 켜지 않아도 됩니다. 링크 공유(메시지 API)만 쓰기 때문에 로그인 설정은 필요 없습니다.

3. 키 넣기

assets/js/config.js 를 열어 한 줄만 바꿉니다.

KAKAO_JS_KEY: '여기에_복사한_JavaScript_키',

저장하고 새로고침하면 카카오톡 공유 버튼이 나타납니다.

주의: JavaScript 키는 브라우저에 그대로 노출되는 키라서 공개되어도 괜찮습니다. 다만 위에서 등록한 도메인에서만 동작하므로, 도메인 등록은 꼭 해주세요. REST API 키나 Admin 키는 절대 여기에 넣으면 안 됩니다.

---

애드센스 승인 준비

승인 신청 전에 아래를 확인하세요. 코드로 해둔 것과 직접 해야 하는 것을 나눠 적었습니다.

준비된 것

• about.html (소개), privacy.html (개인정보처리방침), contact.html (문의) — 모든 페이지 아래 링크 연결됨
• robots.txt — 크롤링 허용, /tools/ 는 제외
• sitemap.xml — 템플릿 페이지 포함 10개 주소
• ads.txt — 게시자 ID만 넣으면 되도록 준비 (파일 안 설명 참고)
• 각 페이지 canonical 태그

직접 해야 하는 것

1. 문의 이메일 넣기 — config.js 의 CONTACT_EMAIL 에 주소를 적으면 문의 페이지에 나타납니다. 비워두면 GitHub 이슈만 안내됩니다.
2. 자체 도메인 연결 — *.vercel.app 주소로 신청했다가 반려된 사례가 있습니다. 도메인을 사서 Vercel → Settings → Domains 에서 연결한 뒤, 이 저장소에서 gonggam-bingo.vercel.app 을 전부 새 주소로 바꾸세요. (config.js, 각 HTML 의 og 태그와 canonical, robots.txt, sitemap.xml)
3. 구글 서치 콘솔 등록 — search.google.com/search-console 에서 사이트를 등록하고 sitemap.xml 을 제출합니다.
4. 읽을 콘텐츠 늘리기 — 가장 중요합니다. 애드센스의 흔한 반려 사유가 "가치가 별로 없는 콘텐츠"인데, 빙고판과 버튼만 있는 사이트는 여기에 걸리기 쉽습니다. 템플릿 해설, 빙고 주제 모음 같은 글을 직접 쓰는 것이 가장 확실합니다.
5. 애드센스 신청 — adsense.google.com

광고 넣기

광고 자리는 빙고판과 버튼 아래에만 있습니다. 지금은 꺼져 있어서 높이 0으로 보이지 않습니다.

1. 애드센스에서 사이트 승인을 받고, 디스플레이 광고 단위를 만듭니다.
2. assets/js/config.js 에서:

   ADSENSE_CLIENT: 'ca-pub-0000000000000000',  // 내 게시자 ID
   AD_ENABLED: true,
   

3. 광고를 넣을 자리의 data-ad-slot="" 안에 광고 단위 ID를 적습니다.
   • index.html → id="adHomeBottom"
   • create.html → id="adCreateBottom"
   • play.html → id="adPlayBottom"

세 군데 모두 넣을 필요는 없습니다. 비워두면 그 자리는 그냥 비어 있습니다.

---

공유 링크가 동작하는 방식

서버와 데이터베이스가 없으므로, 만든 빙고 내용을 통째로 압축해서 주소에 담습니다.

play.html#NoRgNARIDWODWdAEgAZboV5rAINXQmn2AOaiYDMY4A...

• 압축은 vendor/lz-string.min.js, 변환은 assets/js/codec.js 가 담당합니다.
• ? 가 아니라 # 뒤에 붙입니다. # 뒤는 서버로 전송되지 않아 기록에 남지 않고, 길이 제한도 없습니다.
• 한글은 압축이 잘 되지 않아 5x5를 꽉 채우면 주소가 900자쯤 됩니다. 카카오 공유 버튼으로 보내면 주소가 카드 뒤로 숨겨지므로 길어도 보기 싫지 않습니다.
• 1800자를 넘으면 만들기 화면에서 "칸 내용을 줄여보라"고 안내합니다.

알아둘 점: 미리보기 이미지는 모든 링크가 같습니다

정적 사이트라서, 어떤 빙고를 공유하든 카카오톡 미리보기는 og-default.png 하나로 똑같이 뜹니다. 빙고마다 다른 미리보기를 띄우려면 서버 기능(Vercel Edge Function)이 필요합니다.

템플릿 추가하기

data/templates.js 를 열어 { ... } 한 덩어리를 복사하고 내용만 바꾸면 됩니다. 메인 화면의 목록과 결과 문구는 저절로 따라옵니다. 자세한 설명은 파일 맨 위 주석에 있습니다.