반응형
📋 프로젝트 개요
항목 내용
| 사이트 | https://product-builder-recture.pages.dev/ |
| GitHub | https://github.com/woogim-afk/product-builder-recture |
| 배포 | Cloudflare Pages (자동 배포) |
| 최종 커밋 | bb5bd1e |
| 작업일 | 2026-04-28 ~ 2026-04-29 |
🛠 전체 작업 내역
1단계 — 기본 사이트 구축
- index.html : 로또 6/45 번호 추첨기 메인 페이지
- style.css : 다크/라이트 테마, 반응형 디자인
- script.js : 피셔-예이츠 셔플 알고리즘 기반 번호 생성, 단일/5개 동시 추첨, 히스토리 기능
2단계 — 기능 확장
- 다크/라이트 모드 : CSS 커스텀 변수(--bg-gradient 등) + body.light 클래스 토글
- 5개 동시 추첨 : drawMulti() 함수 및 renderMultiBalls() 렌더링 추가
- 제휴 문의 폼 (contact.html) : Formspree(xvzdnndp) 연동, _next 리다이렉트, 완료 메시지 처리(https://formspree.io/register)
- Disqus 댓글 : producttbuilder 쇼트네임, index.html 하단 삽입(https://disqus.com/)
- 동물상 테스트 (animal.html) : TensorFlow.js MobileNet v2 기반 강아지상/고양이상/믹스상 판별, 브라우저 내 처리로 개인정보 보호(https://teachablemachine.withgoogle.com/)
- Google AdSense : ads.txt 추가, 모든 페이지 헤드 스크립트 및 광고 유닛 삽입 (ca-pub-4067903464638354)
3단계 — AdSense 승인 최적화 ✅
작업 파일 내용
| 개인정보처리방침 | privacy.html (신규) | AdSense 쿠키, 이미지 처리, Formspree/Disqus/TF.js/Cloudflare 등 10개 항목 |
| 사이트 소개 | about.html (신규) | 서비스 설명, 기술 스택, 제휴 안내 |
| 로또 콘텐츠 섹션 | index.html | 로또 소개, 당첨 확률표(1~5등), 이용방법, FAQ |
| 동물상 콘텐츠 섹션 | animal.html | 동물상이란, AI 분석 방법, 개인정보 안내, 강아지상·고양이상·믹스상 특징 |
| 전체 푸터 | 모든 페이지 | 로또추첨기·동물상테스트·소개·제휴문의·개인정보처리방침 링크 |
| 메타 태그 | 모든 페이지 | meta description, og:title, og:description, og:url, canonical |
📁 최종 파일 구조
로또 번호 추첨기/
├── index.html — 로또 번호 추첨기 (메인)
├── animal.html — 동물상 테스트 (AI)
├── contact.html — 제휴 문의 (Formspree)
├── about.html — 사이트 소개 ✨ 신규
├── privacy.html — 개인정보처리방침 ✨ 신규
├── script.js — 추첨 로직
├── style.css — 공통 스타일
└── ads.txt — AdSense 인증
✅ AdSense 승인 체크리스트
- [x] ads.txt 등록 (google.com, pub-4067903464638354, DIRECT)
- [x] 모든 페이지에 AdSense 헤드 스크립트 삽입
- [x] 개인정보처리방침 페이지 (privacy.html) — 쿠키·제3자 서비스 명시
- [x] 소개 페이지 (about.html) — 사이트 목적 및 운영자 정보
- [x] 제휴 문의 페이지 (contact.html) — 연락처 제공
- [x] 실질 텍스트 콘텐츠 (로또 설명, 당첨 확률, FAQ, 동물상 설명)
- [x] 모든 페이지 하단에 개인정보처리방침 링크 노출
- [x] meta description / og 태그 / canonical URL
- [x] 다크/라이트 모드 반응형 디자인
- [x] 복수 페이지 (5개) — thin site 아님
🔧 주요 기술 스택
- Frontend : Vanilla HTML5 / CSS3 / JavaScript (ES5+)
- AI 모델 : TensorFlow.js 4.17.0 + MobileNet v2 (CDN)
- 추첨 알고리즘 : Fisher-Yates Shuffle
- 폼 처리 : Formspree (서버리스)
- 댓글 : Disqus
- 광고 : Google AdSense
- 호스팅 : Cloudflare Pages + GitHub Actions 자동 배포