Mr.Young's Billionaire Homepage 🌍
전 세계 행정구역을 광고 단위로 활용하는 인터랙티브 지도 플랫폼
🎯 프로젝트 개요
이 프로젝트는 "The Million Dollar Homepage"의 개념을 전 세계 행정구역으로 확장한 인터랙티브 광고 플랫폼입니다. 사용자는 마치 구글어스처럼 전 세계를 탐색하며, 각 행정구역을 클릭하여 광고를 구매할 수 있습니다.
✨ 주요 기능
🗺️ 인터랙티브 월드맵
- 줌/팬/드래그: 구글어스와 같은 직관적인 지도 탐색
- 다단계 줌: 전 세계 → 대륙 → 국가 → 주/성/도 → 시/군/구
- 정밀한 클릭 감지: 경계 근처 클릭 시에도 정확한 지역 선택
🌏 전 세계 행정구역 지원
- 대한민국: 시 단위 (서울특별시, 부산광역시 등)
- 미국: 주 단위 (캘리포니아주, 뉴욕주 등)
- 중국: 성 단위 (광둥성, 상하이시 등)
- 일본: 현 단위 (도쿄도, 오사카부 등)
- 기타 국가: 각국의 행정 체계에 맞는 구분
🎨 시각적 구분
- 색상 코딩: 사용 가능/광고 중/선택됨 상태별 색상 구분
- 경계선 표시: 각 행정구역의 명확한 경계 시각화
- 호버 효과: 마우스 오버 시 지역 정보 미리보기
💰 광고 시스템
- 지역별 차등 가격: 인구, 면적, 경제 규모에 따른 가격 책정
- 실시간 상태 관리: 광고 구매/해제 상태 실시간 반영
- 상세 정보 표시: 인구, 면적, GDP, 가격 등 상세 정보
🛠️ 기술 스택
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- 지도 라이브러리: MapLibre GL JS (오픈소스)
- 데이터 형식: GeoJSON
- 스타일링: CSS Grid, Flexbox, CSS Variables
- 반응형 디자인: Mobile-first 접근
📁 프로젝트 구조
Mr.Young 억만장자 홈페이지/
├── index.html # 메인 HTML 파일
├── styles.css # CSS 스타일시트
├── script.js # JavaScript 메인 로직
├── data/
│ └── world-regions.geojson # 전 세계 행정구역 데이터
└── README.md # 프로젝트 문서
🚀 시작하기
1. 프로젝트 클론
git clone [repository-url]
cd "Mr.Young 억만장자 홈페이지"
2. 웹 서버 실행
로컬 웹 서버를 실행하여 CORS 문제를 방지합니다:
# Python 3 사용
python -m http.server 8000
# Node.js 사용
npx http-server
# VS Code Live Server 확장 사용
3. 브라우저에서 접속
http://localhost:8000
🌐 Netlify 배포 및 도메인 설정
Netlify 배포
- Netlify 대시보드에서 새 사이트 생성
- 프로젝트 폴더를 드래그 앤 드롭하거나 Git 저장소 연결
- 빌드 설정 없음 (정적 사이트)
가비아 도메인을 Netlify에 연결하기
가비아에서 도메인을 구매한 경우, DNS 설정을 통해 Netlify와 연결해야 합니다.
방법 1: Netlify DNS 사용 (권장)
-
Netlify에서 도메인 추가
- Netlify 대시보드 → Site settings → Domain management
- "Add domain alias" 클릭
worldadvertisingmap.com 입력
-
Netlify DNS 서버 정보 확인
- Domain management에서 도메인 선택
- Netlify가 제공하는 DNS 서버 주소 확인 (예:
dns1.p01.nsone.net, dns2.p01.nsone.net)
-
가비아에서 DNS 서버 변경
- 가비아 로그인 → 마이페이지 → 도메인 관리
worldadvertisingmap.com 선택 → DNS 관리- 네임서버 변경 메뉴 선택
- Netlify에서 제공한 DNS 서버 주소 입력
- 저장 후 24-48시간 대기 (일반적으로 몇 시간 내 완료)
방법 2: 가비아 DNS에서 레코드 직접 설정
-
Netlify에서 도메인 추가
- Netlify 대시보드 → Site settings → Domain management
- "Add domain alias" 클릭
worldadvertisingmap.com 입력
-
Netlify IP 주소 확인
- Domain management에서 도메인 선택
- "Verify DNS configuration" 또는 "Check DNS" 클릭
- Netlify가 제공하는 IP 주소 확인 (일반적으로 여러 개의 IP 주소)
-
가비아에서 DNS 레코드 설정
- 가비아 로그인 → 마이페이지 → 도메인 관리
worldadvertisingmap.com 선택 → DNS 관리- 다음 레코드 추가:
A 레코드 (루트 도메인용):
호스트: @ (또는 비워두기)
타입: A
값: Netlify에서 제공한 IP 주소 (여러 개면 모두 추가)
TTL: 3600 (또는 기본값)
CNAME 레코드 (www 서브도메인용):
호스트: www
타입: CNAME
값: worldadvertisingmap.com (또는 Netlify가 제공한 값)
TTL: 3600 (또는 기본값)
-
DNS 전파 대기
- DNS 변경 사항이 전 세계에 전파되기까지 24-48시간 소요
- 온라인 DNS 체크 도구로 확인 가능:
SSL/TLS 인증서 설정
-
Let's Encrypt 인증서 자동 발급
- DNS 설정이 완료되면 Netlify가 자동으로 Let's Encrypt 인증서 발급
- 보통 몇 분에서 몇 시간 소요
-
인증서 발급 실패 시 확인 사항
-
문제 해결
"worldadvertisingmap.com doesn't appear to be served by Netlify" 오류 발생 시:
단계 1: 네임서버 확인
# PowerShell에서 실행
nslookup -type=NS worldadvertisingmap.com
- 결과에
dns1.p07.nsone.net, dns2.p07.nsone.net 등이 보이면 네임서버는 올바르게 설정됨
- 보이지 않으면 가비아에서 네임서버 변경이 완료되었는지 확인
단계 2: DNS 전파 상태 확인
단계 3: 대기 및 재시도
- DNS 전파는 보통 몇 시간~24시간 소요
- 네임서버가 올바르게 설정되어 있다면 시간이 지나면 자동으로 해결됨
- 24시간 후에도 문제가 지속되면:
- Netlify 대시보드 → Domain management → "Renew certificate" 클릭
- 또는 Netlify 지원팀에 문의
단계 4: DNS 캐시 클리어
# Windows에서 DNS 캐시 클리어
ipconfig /flushdns
확인 방법
-
DNS 전파 확인
# 터미널에서 실행
nslookup worldadvertisingmap.com
# 또는
dig worldadvertisingmap.com
-
웹사이트 접속 확인
http://worldadvertisingmap.com 접속https://worldadvertisingmap.com 접속 (SSL 인증서 발급 후)
접속이 안 될 때 해결 방법:
- 브라우저 캐시 클리어:
- Chrome/Edge:
Ctrl + Shift + Delete → 캐시된 이미지 및 파일 삭제
- 또는 시크릿 모드로 접속:
Ctrl + Shift + N
- DNS 캐시 클리어:
ipconfig /flushdns
- 다른 브라우저로 시도 (Chrome, Firefox, Edge 등)
- 다른 네트워크로 시도 (모바일 데이터 등)
-
Netlify 대시보드 확인
- Domain management에서 도메인 상태 확인
- HTTPS 섹션에서 인증서 상태 확인
- Site overview에서 배포 상태 확인
🔥 Firebase 설정 (Google 로그인)
Firebase Console 설정
-
Firebase 프로젝트 접속
-
Google 로그인 활성화
- Authentication → Sign-in method
- Google 제공업체 클릭
- "사용 설정" 토글 활성화
- 프로젝트 지원 이메일 선택
- 저장
-
승인된 도메인 추가
- Authentication → Settings → Authorized domains
- "도메인 추가" 클릭
- 다음 도메인 추가:
worldadvertisingmap.comwww.worldadvertisingmap.comzesty-sherbet-9a9e5e.netlify.app (Netlify 기본 도메인)
- 저장
콘솔 오류 해결
Firebase 오류 (auth/configuration-not-found):
- Firebase Console에서 Google 로그인 활성화 확인
- 승인된 도메인 목록에 현재 도메인 추가 확인
Mapbox 경고 (anchor, color, intensity, position):
- Mapbox 라이브러리 내부 경고로 기능에는 영향 없음
- 무시해도 됨
WebGL 경고:
- 브라우저 하드웨어 가속 관련 경고
- 기능에는 영향 없음
🎮 사용법
기본 조작
- 마우스 휠: 줌 인/아웃
- 드래그: 지도 이동
- 지역 클릭: 지역 선택 및 정보 확인
- 마우스 호버: 지역 정보 미리보기
키보드 단축키
- 1, 2, 3: 줌 레벨 빠른 변경 (전 세계/국가별/지역별)
- Enter: 선택된 지역 구매
- ESC: 패널/모달 닫기
- H: 도움말 표시
컨트롤 패널
- 줌 레벨 버튼: 전 세계/국가별/지역별 빠른 이동
- 범례: 색상별 상태 확인
- 실시간 통계: 총 지역 수, 광고 중인 지역, 총 수익, 점유율
광고 구매
- 원하는 지역 클릭
- 우측 정보 패널에서 상세 정보 확인
- "이 지역 구매하기" 버튼 클릭 또는 Enter 키
- 구매 모달에서 광고 정보 입력
- 구매 확인 후 완료
📊 데이터 구조
GeoJSON Feature Properties
{
"id": "unique_region_id",
"name_ko": "한국어 지역명",
"name_en": "영어 지역명",
"name_local": "현지어 지역명",
"country": "국가명",
"country_code": "국가 코드",
"admin_level": "행정구역 레벨",
"population": "인구수",
"area": "면적 (km²)",
"gdp_per_capita": "1인당 GDP",
"occupied": "광고 중 여부",
"price": "광고 가격 (USD)",
"currency": "통화",
"timezone": "시간대",
"coordinates": [경도, 위도]
}
🎨 색상 시스템
- 🟢 사용 가능:
#4ecdc4 (청록색)
- 🔴 광고 중:
#ff6b6b (빨간색)
- 🟡 선택됨:
#feca57 (노란색)
- ⚪ 경계선:
#ffffff (흰색)
🔮 향후 계획
Phase 1: 기본 기능 완성 ✅
Phase 2: 고급 기능
Phase 3: 플랫폼 확장
🤝 기여하기
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature)
- Commit your Changes (
git commit -m 'Add some AmazingFeature')
- Push to the Branch (
git push origin feature/AmazingFeature)
- Open a Pull Request
📄 라이선스
이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.
📞 연락처
"전 세계를 하나의 광고 캔버스로 만들어보세요!" 🌍✨
