·약 31분 읽기
바이브 코딩으로 블로그 만들기 시리즈 코딩을 몰라도 AI와 대화하며 ‘내 소유’ 수익형 웹사이트를 만드는 15일 여정
DAY 09에서 메타 태그·사이트맵·robots까지 SEO 기본을 마쳤다면, 이제 그다음 단계입니다.
지금까지 정말 열심히 달려왔습니다. 먼저 도구를 세팅한 후 첫 화면을 띄웠고 디자인을 다듬고 글쓰기 시스템을 만들고 SEO까지 끝냈습니다.
오늘은 새로운 기능을 추가하지도, 디자인을 바꾸지도 않습니다.
대신 한 발 물러서서 우리가 만든 블로그를 냉정하게 진단합니다.
다음 포스팅부터 우리는 이 블로그를 세상에 공개하고,
구글 애드센스에 신청하고, 광고를 달 겁니다.
이건 한 번 시작하면 되돌리기 어려운 단계입니다.
그러니 그 전에 마지막으로 점검해야 합니다.
“이 블로그가 정말 돈을 벌 준비가 됐나?”
오늘 글은 두 가지로 구성됩니다. 첫째, 30개 항목의 수익화 체크리스트. 둘째, 부족한 부분을 발견했을 때 어떻게 보완할지에 대한 가이드입니다.
체크리스트는 노트에 그대로 옮겨 적거나 캡처해서 쓰셔도 좋습니다. 블로그를 운영하는 내내 다시 꺼내볼 수 있는 자료입니다.
각 항목 옆에 통과(◯), 주의(△), 실패(✕)를 달아가면서 체크할 겁니다.
◯ 통과: 완벽하게 구현됨, 추가 조치 불필요
△ 주의: 작동은 하지만 개선 여지 있음, 시간 되면 보완
✕ 실패: 작동 안 함 또는 빠짐, 배포 전에 반드시 수정
마지막에 ‘총 점수’를 매겨서 배포 가능 여부를 판단합니다. ✕가 5개 이상이면 배포를 미루고 보완하는 게 좋습니다.
블로그의 가장 밑바닥, ‘작동하느냐’에 관한 항목입니다.
localhost:3000에서 블로그가 에러 없이 열리는가?
브라우저에서 localhost:3000 접속 → 메인 페이지가 정상 표시됨
콘솔(F12)에 빨간 에러 메시지가 없음
터미널에서 npm run build를 실행했을 때 에러 없이 완료되는가?
npm run build
이 명령어는 실제 배포에 사용될 정적 파일을 생성합니다. 빌드가 실패하면 배포도 실패합니다. 반드시 통과해야 할 항목입니다. 에러가 나면 메시지를 그대로 AI에게 주고 수정해달라고 하세요.
아래 페이지들이 전부 열리는가? (404 없이)
/)/blog/[slug]) — 아무 글이나 클릭/category/[name])/about) — DAY 12에서 만들 예정이라면 △/asdf)토글 버튼을 클릭했을 때 색상이 자연스럽게 전환되는가? 새로고침해도 모드가 유지되는가?
브라우저 폭을 줄이면(또는 F12 → 모바일 모드) 레이아웃이 모바일에 맞게 바뀌는가?
체크 포인트:
- 사이드바가 본문 아래로 이동
- 헤더의 카테고리가 햄버거 메뉴(☰)로 변경
- 본문 글자가 잘리지 않음
- 광고 영역이 화면 폭에 맞게 조정됨
페이지 새로고침 시 1초 이내에 콘텐츠가 보이는가?
정확히 측정하려면 크롬 개발자 도구의 Lighthouse 탭을 사용하면 됩니다. 점수가 90 이상이면 ◯, 70~90이면 △, 70 이하면 ✕입니다.
Lighthouse는 구글이 만든 ‘이 페이지, 얼마나 빠르고 잘 만들어졌나?’ 를 숫자로 보여 주는 도구입니다. 설치할 것 없이 크롬 안에 들어 있습니다.
localhost:3000)이나 글이 긴 포스트 하나면 됩니다.F12 키를 누르거나, 페이지 위에서 우클릭 → 검사를 선택합니다.» 화살표나 ⋮ 메뉴를 눌러 숨은 탭 목록에서 찾습니다.같은 페이지라도 측정할 때마다 조금씩 달라질 수 있습니다. 2~3번 돌려서 대략적인 구간만 보면 충분합니다.
업로드한 이미지가 1MB를 넘지 않는가? WebP 형식을 사용하고 있는가?
이미지가 아직 없다면 △로 표시하고 넘어가세요. DAY 13에서 콘텐츠 채울 때 확인합니다.
브라우저 개발자 도구(F12) → Console 탭에 빨간 에러나 노란 경고가 없는가?
노란 경고는 △, 빨간 에러는 ✕입니다. AI에게 에러 메시지를 보여주고 해결을 요청하세요.
GitHub에 코드가 푸시되어 있는가? (DAY 11에서 배포 시 필요)
아직 안 했다면 △. 내일 배포 단계에서 처리할 예정입니다.
.gitignore 파일에 node_modules, .next 등이 포함되어 있는가?
Next.js가 프로젝트 생성 시 자동으로 만들어주지만, 한 번 더 확인하는 게 안전합니다. AI에게 “.gitignore 파일을 확인하고 부족한 항목이 있으면 추가해줘”라고 요청하세요.
구글에 잘 노출되기 위한 설정 점검입니다.
홈, 포스트, 카테고리 페이지의 브라우저 탭에 각각 다른 제목이 표시되는가?
체크 방법:
- 홈 → “BlogName - 한 줄 설명”
- 포스트 → “글 제목 | BlogName”
- 카테고리 → “[카테고리명] 관련 글 모음 | BlogName”
각 페이지 소스(우클릭 → 페이지 소스 보기)에서 <meta name="description">이 페이지마다 다른 내용으로 들어가 있는가?
페이지 소스에서 <meta property="og:title">, og:description, og:image 등이 제대로 들어가 있는가?
og:image의 실제 이미지 파일이 없으면 △. 배포 전에 만들어야 합니다.
각 페이지에 <link rel="canonical">이 들어가 있는가?
localhost:3000/sitemap.xml에 접속하면 XML 형식의 페이지 목록이 표시되는가?
localhost:3000/robots.txt에 접속하면 텍스트 안내문이 표시되는가?
포스트 페이지 소스에서 <script type="application/ld+json"> 태그가 보이는가?
안 했으면 △. 필수는 아니지만 있으면 검색 결과에서 두드러집니다.
URL이 한글이 아니라 영어 슬러그로 되어 있는가?
◯ myblog.com/blog/next-js-tutorial
✕ myblog.com/blog/넥스트제이에스튜토리얼
방문자가 블로그에 와서 ‘오래 머물게’ 만드는 요소들입니다.
애드센스 승인과 수익화에 직결되는 항목들입니다.
현재는 실제 광고 코드가 아니라 ‘광고 영역’이라는 자리 표시자가 있어야 합니다. 아래 4곳에 표시되어 있는가?
사이드바 광고는 수익형 블로그에서 효과가 떨어져서 필수는 아닙니다. 있으면 보너스, 없어도 무방합니다.
블로그에 글이 최소 10개 이상 있는가? 글 1개당 1,500자 이상인가?
애드센스 승인 기준:
- 글 개수: 최소 10~20개 권장
- 글 길이: 1,500자 이상 권장
- 카테고리 수: 3개 이상
- “고품질” 콘텐츠: 정보, 경험, 인사이트가 담긴 글
지금은 더미 글만 있을 가능성이 높습니다. △로 표시하고, DAY 13에서 본격적으로 채울 계획을 세웁니다.
애드센스 승인에 반드시 필요한 페이지 3개가 있는가?
/about)/privacy)/contact)아직 없으면 △. DAY 12에서 AI로 한 번에 만듭니다.
DAY 04에서 정한 도메인이 있는가? 또는 후보가 정해져 있는가?
◯ 구매 완료 / △ 후보만 정함 / ✕ 아무것도 없음
구글 애드센스 신청에 사용할 구글 계정이 있는가? 만 18세 이상인가?
한국 기준 만 19세 이상이어야 애드센스 가입이 가능합니다. 미성년자는 부모님 명의로만 가능합니다.
자, 모든 항목을 체크했습니다. 결과를 종합해봅시다.
총 항목 수: 30개
◯ 통과 개수: ___개
△ 주의 개수: ___개
✕ 실패 개수: ___개
A등급 (배포 준비 완료)
◯ 25개 이상 + ✕ 0개
→ DAY 11로 바로 진행하세요. 준비가 끝났습니다.
B등급 (소소한 보완 필요)
◯ 20~24개 + ✕ 0~2개
→ ✕ 항목만 우선 수정하고 DAY 11로 진행하세요.
C등급 (보완 후 진행)
◯ 15~19개 또는 ✕ 3~5개
→ 하루를 더 써서 ✕ 항목을 모두 해결한 뒤 진행하세요.
D등급 (전면 점검 필요)
◯ 14개 이하 또는 ✕ 6개 이상
→ DAY 05~09를 다시 확인하고, AI에게 도움을 요청하세요.
체크리스트에서 ✕나 △를 찾았다면, 아래 가이드를 참고하세요.
“빌드가 실패해요”
→ 터미널의 에러 메시지를 통째로 복사해서 AI에게 주세요.
대부분 import 누락이나 타입 에러입니다. AI가 1~2번의 대화로 해결합니다.
“콘솔에 빨간 에러가 떠요”
→ 에러 메시지의 첫 줄을 AI에게 보내세요.
“이 에러의 원인과 해결 방법을 알려줘”라고 요청하면 됩니다.
“다크모드가 작동하지 않아요”
→ AI에게 “다크모드 토글이 작동하지 않아.
tailwind.config.js의 darkMode 설정과 토글 로직을 점검해줘”라고 요청하세요.
“sitemap.xml에 접속하면 404가 떠요”
→ AI에게 “app/sitemap.js 파일이 있는지 확인하고,
없으면 만들어줘”라고 요청하세요.
“메타 태그가 비어 있어요”
→ AI에게 “app/layout.js의 metadata export를 확인하고,
누락된 항목을 채워줘”라고 요청하세요.
“본문 글자가 너무 작아요”
→ AI에게 “본문 글자 크기를 18px로 늘리고,
줄간격을 1.8로 설정해줘”라고 요청하세요.
“TOC가 너무 좁게 보여요”
→ AI에게 “사이드바의 TOC 영역 너비를 좀 더 넓히고,
글자 크기를 14px로 통일해줘”라고 요청하세요.
“광고 영역이 안 보여요”
→ AI에게 “포스트 상세 페이지의 광고 플레이스홀더가
제대로 표시되는지 확인해줘.
제목 아래, 본문 중간 2곳, 본문 끝 총 4곳에 있어야 해”라고 요청하세요.
“글이 부족해요”
→ 이건 AI로 해결할 수 없는 유일한 항목입니다.
DAY 13에서 본격적으로 채울 계획이지만,
지금부터 글 주제 10개를 노트에 적어두세요.
체크리스트를 다 채웠다면 결과를 SNS나 커뮤니티에 공유해보세요. 두 가지 효과가 있습니다.
첫째, 자기 강화 효과. 공개적으로 ‘나는 25개 통과했다’라고 말하는 순간, 끝까지 가야 하는 동기가 강해집니다. 심리학에서 말하는 ‘공개 약속 효과’입니다.
둘째, 같은 길을 걷는 사람들과 연결. 비슷한 시기에 바이브 코딩을 시작한 사람들과 만날 수 있습니다. 서로 막힌 부분을 도와주면서 함께 성장합니다.
이 체크리스트를 인쇄하거나 노션 문서로 만들어서 본인 블로그에 첫 글로 올려도 됩니다. ‘내가 만든 블로그 진단 결과’ 같은 제목으로요. 본인 경험담은 구글이 좋아하는 콘텐츠이고, 누군가에게는 진짜 도움이 됩니다.
지금까지 여러분은 단 한 줄의 코드도 직접 쓰지 않았습니다. 전부 AI에게 한국어로 요청한 결과물입니다.
처음에는 ‘AI가 만든 기본 페이지’였던 블로그가, 지금은 ‘수익형 블로그의 모든 기능을 갖춘 사이트’가 됐습니다. 디자인, 글쓰기, 사용자 경험, 검색 최적화까지 전부 갖춰진 상태입니다.
남은 건 세상에 공개하는 것뿐입니다.
다음 글에서는 내가 만든 블로그를 드디어 세상에 공개합니다. 내 컴퓨터에서만 보이던 블로그를 인터넷 누구나 접속할 수 있게 만드는 작업. Vercel에 배포하고, 도메인을 연결하고, HTTPS 자물쇠까지 달면 끝입니다.
20분이면 됩니다. 진짜로.
이 코너는 매 회 해당 단계에서 자주 겪는 문제와 해결법을 다룹니다.
오늘은 점검의 날이니, 에러가 아니라 점검 중 빠지기 쉬운 함정 3가지를 다룹니다.
함정 1: “완벽주의 함정”
→ 30개 항목 중 28개 통과인데, 2개를 완벽하게 만들겠다고 며칠을 쓰는 사람들이 있습니다. 완벽한 블로그는 존재하지 않습니다. 80% 완성도면 배포하세요. 나머지 20%는 운영하면서 다듬는 게 더 효율적입니다. 글이 100개 쌓인 블로그가 완벽한 디자인의 빈 블로그보다 100배 가치 있습니다.
함정 2: “비교 함정”
→ 다른 사람의 블로그를 보면서 ‘내 건 너무 초라하다’고 느낄 수 있습니다. 그런데 그 블로그도 1년 전에는 지금 여러분의 블로그와 똑같았습니다. 시간을 압축해서 비교하지 마세요. 6개월 후의 자신과 비교하면 충분합니다.
함정 3: “코드 깊이 파기 함정”
→ 갑자기 호기심이 발동해서 ‘이 코드는 어떻게 작동하는 거지?’ 하고 AI가 만든 코드를 분석하기 시작하는 경우가 있습니다. 흥미롭지만, 이건 우리의 목표가 아닙니다. 우리는 개발자가 되려는 게 아니라 수익형 블로그를 만들려는 겁니다. 코드가 작동하면 그걸로 충분합니다. 깊이 파는 건 블로그가 수익을 내기 시작한 후에 해도 늦지 않습니다.
메타 태그·Open Graph·sitemap·robots로 구글이 블로그를 찾게 하는 SEO 입문. AI 프롬프트로 코딩 없이 10분 만에 끝내는 설정과 흔한 오해·에러 대응까지 정리한다.
자동 목차(TOC)·카테고리 시스템을 AI 프롬프트로 붙이고, 체류 시간·페이지뷰 관점에서 왜 필요한지와 보너스 UX까지 정리한다.
마크다운 문법·frontmatter·포스트 상세 페이지 다듬기, Cursor 글쓰기 워크플로·이미지·AI 뼈대 팁까지 수익형 블로그 글쓰기 입문.