Million Dollar Homepage는 2005년에 영국 대학생 알렉스 투(Alex Tew)가 만든 전설적인 인터넷 사이트입니다. 이 사이트는 1000x1000 픽셀의 그리드를 판매하여, 픽셀당 $1에 총 100만 픽셀 = 100만 달러를 벌어들이는 아이디어로 유명합니다.
🔧 이와 같은 홈페이지(픽셀 광고 그리드)를 만드는 방법을 단계별로 자세히 설명드릴게요.
🧱 1. 사이트 기본 개념 이해
🖼 전체 개요
- 크기: 1000픽셀 x 1000픽셀의 사각형 그리드
- 각 픽셀을 **10x10 블록 단위(=100픽셀)**로 판매
- 각 블록에 이미지(광고 배너)를 삽입 + 해당 광고 링크 설정
💻 2. 필요한 기술 스택
| HTML/CSS | 페이지 구조 및 픽셀 그리드 UI |
| JavaScript | 인터랙션 (호버, 클릭 등) |
| 백엔드 (선택) | 광고 업로드 및 링크 저장 (PHP, Node.js, Python 등) |
| 데이터 저장 | DB 또는 JSON/CSV |
| 호스팅 | 웹 서버 (예: Netlify, GitHub Pages, Vercel, 또는 VPS) |
🧰 3. 기본 페이지 제작 절차
✅ (1) 그리드 HTML 구조 만들기
✅ (2) CSS로 스타일링
✅ (3) JavaScript로 링크 연결
🗂 4. 광고 등록 기능 추가 방법 (선택사항)
방법 1. 수동 방식
- HTML/CSS로 직접 이미지 넣고 링크 지정
- 아주 단순한 구조
방법 2. 업로드/자동 생성 시스템 (추천)
✅ 기능 예시:
- 업로드 이미지: 10x10, 20x20 크기 제한
- 링크 입력
- 가격 자동 계산
- 관리자 승인 후 반영
✅ 기술
- HTML Form + PHP/Node.js로 서버 처리
- 업로드된 이미지와 링크 정보를 DB 또는 JSON에 저장
- 그리드 UI가 자동으로 반영하도록 JavaScript로 갱신
📦 5. 이미지 최적화 및 제한
- 사용자가 너무 큰 이미지를 올리지 않도록 제한 필요
- 이미지 업로드 시 자동 리사이징 (예: 10x10 or 20x20)
- 이미지 서버 저장 경로는 /ads/ 폴더 등
💸 6. 결제 시스템 연동 (선택사항)
- PayPal API, Stripe API 등으로 광고 결제 기능 추가 가능
- 구매 완료 후 자동 업로드 기능 구현
📍 7. 도메인 & 호스팅
| 도메인 | 원하는 주소 구입 (ex. pixeladworld.com) |
| 호스팅 | GitHub Pages (정적), 또는 Netlify/Vercel/Cloudflare |
| 백엔드 필요시 | Firebase, Heroku, Render.com, VPS 사용 가능 |
🎨 8. 고급 기능 아이디어 (선택)
- ✔️ 픽셀 구매 시 즉시 반영 시스템
- ✔️ 광고 클릭 수 추적 (Google Analytics 등)
- ✔️ 마우스 오버시 광고 미리보기
- ✔️ 특정 광고 위에 배너 띄우기
- ✔️ QR 코드 생성 등 부가 기능
🔍 예시 사이트 참고
| MillionDollarHomepage | 원조 사이트 |
| PixelGrid.io | NFT형 버전 |
| MillionPixels | 반응형 버전 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Million Pixel Homepage Clone</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#grid {
width: 1000px;
height: 1000px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
border: 1px solid #ccc;
}
.pixel {
width: 10px;
height: 10px;
background-color: #eee;
box-sizing: border-box;
}
.pixel:hover {
outline: 1px solid #999;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Million Pixel Homepage Clone</h1>
<p>Click a pixel to open its link.</p>
<div id="grid"></div>
<script>
// Define a grid of 100 x 100 = 10,000 pixels (1,000,000px)
const grid = document.getElementById("grid");
// Example pixel data (image and link), use JSON or DB in real usage
const pixelData = {
"0": { link: "https://example.com", bg: "#f00" },
"1": { link: "https://openai.com", bg: "#0f0" },
// Add more pixel definitions here as needed...
};
for (let i = 0; i < 10000; i++) {
const div = document.createElement("div");
div.className = "pixel";
if (pixelData[i]) {
div.style.backgroundColor = pixelData[i].bg;
div.addEventListener("click", () => {
window.open(pixelData[i].link, "_blank");
});
}
grid.appendChild(div);
}
</script>
</body>
</html>
=================================
✅ 업로드/관리 시스템 (PHP/Node.js) ✅ 각 픽셀별 이미지 삽입 및 썸네일 처리 ✅ 반응형 그리드/모바일 대응 을 가능한 쉽고 간단하게 운영하는 구조로 개발해줘
// pixel-data.json 예시
{
"0": { "link": "https://example.com", "image": "img1.jpg" },
"1": { "link": "https://openai.com", "bg": "#0f0" }
}
✅ 새로 반영된 기능 요약:
1. 반응형 그리드
- CSS Grid 사용으로 100x100 그리드 구성
- 모바일에서도 50x50, 25x25 등 자동 조정
- aspect-ratio로 정사각형 유지
2. 썸네일 & 배경 이미지 삽입 기능
- 각 픽셀에 image URL이 있으면 배경 이미지로 자동 출력
- 없을 경우 배경색으로 대체
3. 서버에서 JSON으로 관리 가능
관리자는 이 파일만 수정하면 모든 광고 이미지/링크가 자동 반영됩니다.
✍️ 다음 작업이 필요하다면:
- ✅ pixel-data.json 생성 및 기본 예시 제공
- ✅ 간단한 PHP/Node.js 업로드 폼
- ✅ 관리자 전용 편집 페이지
픽셀크기를 결정해야 한다. 3가지 크기를 생각중.
100 x 100
200 x 200
400 x 400
'놀면서 일하기 > I♥ + ◆dr.PLAY' 카테고리의 다른 글
| 엔젤전설 : "상극의 상황을 결합한 그 무엇인가를...." 도전~~~!!! (0) | 2025.07.15 |
|---|---|
| 아이러브카페 웹사이트 구축제안 (0) | 2025.07.09 |
| 카페 로고 탐색중 (2) | 2025.06.29 |
| 파타야에서 장사 잘 되는 PC 바에 사례 나중에 오빠 카페 참조용 (0) | 2025.06.19 |
| 50,60대 여성의 잡학다식 분야 (0) | 2025.06.15 |
댓글