AI로 블로그를 처음부터 만든 과정 (Next.js + 애드센스 제작기)

지금 보고 계신 이 블로그는 AI의 도움을 받아 직접 만든 사이트입니다. 왜 티스토리나 네이버 블로그 대신 직접 만들었는지, 어떤 순서로 만들었는지 전부 기록해 둡니다.

왜 직접 만들었나

• 애드센스를 자유롭게 붙이려고: 애드센스는 사이트 HTML에 코드를 넣을 수 있어야 해서, 코드 접근이 막힌 플랫폼은 불리합니다.
• 수익 구조를 넓히려고: 광고 외에 제휴 링크, 뉴스레터, 나중에는 직접 만든 앱 홍보까지 한 사이트에서 하고 싶었습니다.
• 내 사이트가 자산이 되니까: 플랫폼 정책이 바뀌어도 사이트와 글은 그대로 남습니다.

사용한 도구

처음 계획은 Vercel 배포였는데 바꿨습니다. Vercel 무료(Hobby) 플랜은 비상업용이라 광고를 붙이면 월 20달러짜리 Pro로 올려야 합니다. Cloudflare Pages 무료 플랜은 상업용 사이트도 쓸 수 있어서, 결제 정보 하나 넣지 않고 시작했습니다.

만든 순서

1. 주제 정하기: 내가 실제로 쓰고 일하는 분야로 좁혔습니다. AI, Apple, 테슬라, 애드테크.
2. 도메인은 일단 보류: 원래 kanglab.kr을 사려고 했고, 확인해 보니 등록도 가능했습니다. 하지만 수익이 나기 전까지는 0원으로 운영하기로 하고 Cloudflare가 무료로 주는 kanglab.pages.dev 주소를 쓰기로 했습니다. pages.dev 같은 무료 서브도메인도 애드센스에 사이트로 등록할 수는 있지만, 내 소유 도메인보다 승인이 덜 안정적일 수 있다는 점은 감수했습니다. 나중에 도메인을 사면 환경 변수 하나만 바꿔 옮길 수 있게 만들어 두었습니다.
3. AI로 사이트 뼈대 만들기: 거창한 프롬프트는 없었습니다. 블로그 플랫폼 비교표와 "Next.js로 직접 만든 사이트에 애드센스를 붙이면 좋겠다"는 메모를 붙여 넣고 "이거 해줘" 한 줄을 보냈습니다. 그다음부터는 AI가 카테고리 구조(/ai, /apple, /tesla, /adtech), 글 목록, SEO 설정(사이트맵, RSS, 메타 태그), 애드센스 자리까지 잡아 줬습니다.
4. 필수 페이지 만들기: 소개, 개인정보처리방침, 연락처. 애드센스 심사에서 기본으로 봅니다. ads.txt 파일 자리도 미리 만들어 뒀습니다.
5. 배포: 2026년 10월 7일 Cloudflare 계정을 만들고(Pages 프로젝트 이름 kanglab), 빌드 결과물(out 폴더)을 ZIP으로 묶어 Cloudflare 대시보드에 직접 업로드(Direct Upload)했습니다. GitHub 자동 배포는 아직 연결하지 않았습니다.
6. 검색 등록: Google Search Console과 네이버 서치어드바이저에 사이트맵(/sitemap.xml)을 제출하는 게 다음 순서입니다. 이 글을 쓰는 시점에는 아직 하지 않았습니다.

막혔던 부분

1. 배포 명령어가 인증 오류로 실패 원래는 Cloudflare의 명령줄 도구 Wrangler로 wrangler pages deploy를 실행해 배포하려 했습니다. API 토큰까지 만들어 연결했는데도 Authorization failed [code: 8000013] 오류가 나면서 업로드가 막혔습니다. 계속 붙잡고 있기보다 우회하기로 했고, 대시보드에서 ZIP 파일을 직접 올리는 Direct Upload 방식으로 바꾸자 163개 파일이 한 번에 올라가며 바로 배포됐습니다.

2. 첫 접속에 522 오류 배포 직후 첫 접속에서는 522 오류가 떴지만, 새로고침하자 정상적으로 열렸습니다. 새로 배포한 직후 잠깐 생기는 현상이라 따로 손대지 않았습니다.

3. 페이지가 뜨자마자 CSS가 사라지는 버그 디자인을 새로 입힌 뒤, 페이지가 잠깐 제대로 보였다가 스타일이 날아가 글자만 남는 현상이 있었습니다. 원인은 <head> 안의 애드센스 코드였습니다. 애드센스 ID가 아직 없어 빈 값일 때 {ADSENSE_CLIENT && <script />}처럼 썼더니, 빈 문자열이 <head> 안에 텍스트로 찍히면서 React 하이드레이션 오류(#418)가 났고, 그 과정에서 스타일이 날아갔습니다. 조건을 {ADSENSE_CLIENT ? <script /> : null} 삼항 연산자로 바꾸자 해결됐습니다. 수정본을 올린 직후 첫 로딩에서 한 번 스타일 없는 화면이 보였지만, 캐시를 무시하고 새로고침하니 새 디자인이 정상으로 나왔습니다.

AI도 틀린다: 3번 CSS 버그는 AI가 짠 조건문 한 줄이 원인이었습니다. 빌드도 통과하고 코드만 봐서는 멀쩡해 보였는데, 실제 브라우저에서 열어 봐야 드러나는 문제였습니다. AI에게 맡기더라도 결과 화면을 직접 열어 보고, 이상하면 "왜 이렇게 됐는지"를 다시 물어보는 과정이 꼭 필요합니다.

AI로 글을 쓸 때 지키는 원칙

AI가 쓴 초안을 그대로 올리지 않습니다. 실제 영수증·기록 같은 내 데이터로 확인되는 내용만 경험으로 쓰고, 확인할 수 없는 부분은 공식 문서를 근거로 한 일반 정보로 분명히 구분합니다. 그래서 글마다 유형(실사용기·가이드 등)을 표시해 둡니다. 애드센스도 독창적인 콘텐츠를 요구하고, 독자도 결국 믿을 수 있는 글을 찾기 때문입니다.

다음 목표

• 글 20~30개 채우고 애드센스 신청
• 수익이 나면 kanglab.kr 도메인으로 이전
• 진행 상황과 실제 수익을 이 카테고리에서 계속 공개할 예정입니다.

아직 사이트를 연 지 일주일도 안 됐고, 애드센스도 연결 전이라 수익은 0원입니다. 숫자가 생기면 좋든 나쁘든 그대로 공개하겠습니다.