개인 블로그 만들기부터 AdSense 수익화까지: 완벽 가이드

혼자 쓰는 수영 로그라서 사실 로컬에서만 돌려도 되지만,
언제 어디서든 모바일로 바로 열어보고 싶고, 기록하는 과정도 조금 더 "서비스처럼" 느끼고 싶었다.
그래서 이번에는 단순히 만들고 끝나는 게 아니라, Next.js로 만든 내 수영 로그 블로그를 Vercel에 실제로 배포까지 해보기로 했다.
어차피 혼자 쓰는 서비스라서 완전 무료로 운영하는 것도 중요한 조건이었다.

그리고 이제는 이 블로그에 Google AdSense를 적용해서 수익화까지 시도해보는 과정까지 정리해본다.

1단계: 기술 스택 선정 및 아키텍처 설계

현재 블로그의 기술 스택은 이렇게 구성되어 있다.

프론트/백엔드: Next.js 16 (app router)
인증: NextAuth + GitHub 로그인
DB/스토리지: Supabase Free tier
스타일: Tailwind 기반 UI 컴포넌트
배포: Vercel Hobby(무료)

Next.js + Vercel 조합은 워낙 많이 쓰이는 조합이고,
특히 app router와 route handler 같은 최신 기능까지 자연스럽게 지원해 줘서
설정 단계에서 크게 막히지 않고 배포까지 갈 수 있었다.

2단계: 무료 운영 가능성 검증

배포를 결정하기 전에 제일 먼저 확인한 건 **"정말로 돈 안 나오는가?"**였다.

Vercel Hobby 플랜

개인/사이드 프로젝트 용도로는 충분한 자원
GitHub에 push만 하면 자동 빌드 + 배포
Preview 환경도 자동으로 생성

Supabase Free 플랜

혼자 수영 기록 남기는 정도의 트래픽과 데이터량이면 넉넉하다

주의해야 할 점은 딱 두 가지였다.

Pro/Team 같은 유료 플랜으로 업그레이드하지 않기
Vercel에서 Postgres, KV, Blob 같은 추가 유료 리소스를 함부로 생성하지 않기

이 두 가지만 조심하면,
"Next.js + Supabase + Vercel" 조합으로 개인 블로그를 사실상 완전 무료에 가깝게 운영할 수 있다.

3단계: 환경 변수 정리 및 로컬 설정

NextAuth를 쓰고 있어서, 배포 전에 환경변수를 한 번 정리해 줬다.

로컬 개발용 `.env.local`

NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...

AUTH_GITHUB_ID=...
AUTH_GITHUB_SECRET=...

ADMIN_EMAIL=...
ADMIN_GITHUB=...

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=로컬에서 생성한 긴 랜덤 문자열

NEXTAUTH_URL과 NEXTAUTH_SECRET을 설정해 두면
콘솔에서 자주 보이는 NEXTAUTH_URL, NO_SECRET 경고도 깔끔하게 사라진다.

4단계: Vercel 배포 과정

배포 과정은 크게 어렵지 않았다. 전체 흐름은 이렇다.

GitHub에 코드 올리기
- 로컬에서 작업하던 repo를 GitHub 새 저장소에 main 브랜치로 push
Vercel에서 Import
- Vercel 대시보드 → "Add New Project" → GitHub repo 선택
- 프레임워크는 자동으로 Next.js로 인식
환경변수 입력
- 위에서 정리한 값들(NEXTAUTH_URL, NEXTAUTH_SECRET, Supabase 키 등)을 그대로 입력
Deploy 버튼 클릭

배포 후 환경 변수 설정

배포 후에는 NEXTAUTH_URL만 실제 도메인으로 바꿔주면 된다.

NEXTAUTH_URL=https://내-프로젝트명.vercel.app
NEXTAUTH_SECRET=로컬과 동일한 시크릿 값

조금 기다리면 빌드 로그가 쭉 올라가고,
마지막에 https://<프로젝트이름>.vercel.app처럼 새 도메인이 하나 생긴다.

5단계: 브랜딩 및 디테일 개선

헤더에 쓰던 물결 모양 로고가 마음에 들어서,
이걸 바탕으로 파비콘도 같이 만들었다.

두 줄의 파형으로 수영 레인을 표현하는 작은 SVG 아이콘
어두운 네모 배경 위에 파란 물결선 두 줄
src/app/icon.svg로 추가하면 Next.js app router에서 자동으로 파비콘으로 인식된다

브라우저 탭에 걸리는 작은 아이콘 하나만으로도
프로젝트가 훨씬 "서비스다운" 느낌이 나는 게 꽤 만족스러웠다.

6단계: AdSense 적용 시도

이제 본격적으로 Google AdSense 적용을 시도했다.

6.1 AdSense 신청

먼저 Google AdSense에 신청했다. 필요한 정보들:

사이트 URL: https://sooyoung-archive.vercel.app
사이트 언어: 한국어
사이트 주제: 기술/개발 블로그

6.2 사이트 확인 과정

AdSense에서는 먼저 사이트 소유권 확인을 요구했다.
두 가지 방법이 있었다:

DNS 레코드 추가
HTML 태그 삽입

나는 HTML 태그 방법을 선택했다.

6.3 첫 번째 실패: 코드 삽입 오류

처음에는 Next.js의 Script 컴포넌트를 사용해서 코드를 삽입했다.

<Script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-..."
  crossOrigin="anonymous"
  strategy="afterInteractive"
/>

하지만 이 방법으로는 AdSense 크롤러가 코드를 찾지 못했다.

6.4 두 번째 실패: 코드 위치 문제

Script 컴포넌트를 <head> 태그 안으로 옮겨봤다.

<html lang="ko">
  <head>
    <Script ... />
  </head>
  <body>
    ...
  </body>
</html>

하지만 여전히 "사이트를 확인할 수 없습니다" 오류가 발생했다.

6.5 세 번째 성공: 직접 script 태그 사용

문제를 해결한 것은 직접 <script> 태그를 사용하는 것이었다.

<html lang="ko">
  <head>
    <script
      async
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-..."
      crossOrigin="anonymous"
    />
  </head>
  <body>
    ...
  </body>
</html>

이 방법으로 변경하자 드디어 사이트 확인에 성공했다!

7단계: AdSense 정책 위반 및 해결

사이트 확인에 성공했지만, 바로 이어서 정책 위반 통보를 받았다.

7.1 정책 위반 내용

"가치가 별로 없는 콘텐츠"

AdSense는 최소한의 콘텐츠 요건을 엄격하게 적용한다.

7.2 원인 분석

문제는 콘텐츠의 양과 질이 부족했기 때문이다:

현재 9개의 포스트만 존재
일부 포스트는 테스트용으로 내용이 짧음
사이트 구조가 최소적임

7.3 해결 방안: 사이트 품질 개선

AdSense 요구사항을 충족하기 위해 다음과 같은 개선을 진행했다.

7.3.1 SEO 메타데이터 개선

기존의 단순한 메타데이터를 전문적인 블로그 느낌으로 수정:

export const metadata: Metadata = {
  title: "수영의 개발 아카이브 - 프로그래밍 일지 & 기술 블로그",
  description: "웹 개발자 수영의 프로그래밍 학습 일지. Next.js, React, TypeScript 등 최신 웹 기술 개발 경험과 노하우를 공유합니다.",
  keywords: ["개발 블로그", "프로그래밍", "웹 개발", "Next.js", "React", "TypeScript"],
  // ... 추가 설정
};

7.3.2 소개 페이지 추가

전문성을 보여주기 위해 상세한 소개 페이지를 작성:

개발자로서의 정체성과 철학
블로그의 목적과 다루는 내용
연락처 정보

7.3.3 개인정보처리방침 상세화

AdSense는 법적 요구사항을 엄격하게 확인한다:

쿠키 정책 명시
Google Analytics 사용 고지
구체적인 보관 기간 명시
이용자 권리 상세 기술

7.3.4 페이지네이션 로직 수정

의도치 않게 9개 포스트가 8개+1개로 나뉘는 문제를 발견하고 수정:

페이지당 9개로 변경
10개 이상부터 페이지네이션 활성화

8단계: 콘텐츠 확장 계획

AdSense는 최소 10-15개의 원본 콘텐츠를 요구한다.

현재 9개 포스트에서 1개만 더 추가하면 기술적 요건은 충족된다.

하지만 중요한 것은 콘텐츠의 질이다:

각 포스트 300-500자 이상
실질적인 개발 경험 공유
독창적이고 유용한 내용

9단계: 실제 운영 체험

로컬에서만 쓰던 수영 로그를 Vercel에 올려 보니, 생각보다 체감이 크다.

수영장 가는 길에 휴대폰으로 지난 기록을 바로 확인할 수 있고
세션이 끝난 직후 락커룸에서 오늘 훈련 내용을 바로 정리할 수 있고
혼자 쓰는 서비스지만, 배포를 한 번 해두니 "진짜 제품"처럼 느껴진다

무엇보다도, "Next.js + Supabase + Vercel" 조합 하나만 익혀두면
비슷한 사이드 프로젝트 아이디어가 떠올랐을 때
"이걸 실제 서비스처럼 만들어볼까?"라는 생각을 부담 없이 실행으로 옮길 수 있다는 점이 좋았다.

10단계: AdSense 재심사 준비

이제 모든 준비가 끝났다:

✅ 기술적 구조 완성
✅ 사이트 확인 성공
✅ SEO 최적화
✅ 법적 요구사항 충족
✅ 콘텐츠 양 확보 (9개 → 10개)
✅ 사이트 전문성 향상

다음 단계: 1개의 양질 포스트 추가 후 AdSense 재심사 요청

결론: 개발자의 수익화 여정

개인 블로그 만들기는 단순히 기술을 익히는 것 이상의 의미가 있다.

실전 경험: 로컬 개발과 실제 배포는 다른 문제들을 만들어낸다
문제 해결 능력: AdSense 적용 과정에서 수많은 문제를 해결했다
상품화 사고: 사용자를 생각하고, 정책을 고려하는 관점을 배웠다
수익화 가능성: 기술로 가치를 만들고 수익을 창출할 수 있다는 자신감

혼자 쓰는 블로그지만, 이 과정을 통해 얻은 경험은
앞으로 어떤 프로젝트를 하든 큰 자산이 될 것이다.

"코드를 작성하는 것에서 끝나지 않고, 실제 가치를 만드는 것까지"
이것이 개발자가 가져야 할 마인드셋이라는 생각이 들었다.

이 글은 개인 블로그 개발부터 AdSense 적용까지의 실제 과정을 기록한 경험 공유입니다. 비슷한 고민을 하는 다른 개발자들에게 조금이나마 도움이 되기를 바랍니다.

개인 블로그 만들기부터 AdSense 수익화까지: 완벽 가이드

그리고 이제는 이 블로그에 Google AdSense를 적용해서 수익화까지 시도해보는 과정까지 정리해본다.

1단계: 기술 스택 선정 및 아키텍처 설계

현재 블로그의 기술 스택은 이렇게 구성되어 있다.

프론트/백엔드: Next.js 16 (app router)
인증: NextAuth + GitHub 로그인
DB/스토리지: Supabase Free tier
스타일: Tailwind 기반 UI 컴포넌트
배포: Vercel Hobby(무료)

2단계: 무료 운영 가능성 검증

배포를 결정하기 전에 제일 먼저 확인한 건 **"정말로 돈 안 나오는가?"**였다.

Vercel Hobby 플랜

개인/사이드 프로젝트 용도로는 충분한 자원
GitHub에 push만 하면 자동 빌드 + 배포
Preview 환경도 자동으로 생성

Supabase Free 플랜

혼자 수영 기록 남기는 정도의 트래픽과 데이터량이면 넉넉하다

주의해야 할 점은 딱 두 가지였다.

Pro/Team 같은 유료 플랜으로 업그레이드하지 않기
Vercel에서 Postgres, KV, Blob 같은 추가 유료 리소스를 함부로 생성하지 않기

이 두 가지만 조심하면,
"Next.js + Supabase + Vercel" 조합으로 개인 블로그를 사실상 완전 무료에 가깝게 운영할 수 있다.

3단계: 환경 변수 정리 및 로컬 설정

NextAuth를 쓰고 있어서, 배포 전에 환경변수를 한 번 정리해 줬다.

로컬 개발용 `.env.local`

NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...

AUTH_GITHUB_ID=...
AUTH_GITHUB_SECRET=...

ADMIN_EMAIL=...
ADMIN_GITHUB=...

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=로컬에서 생성한 긴 랜덤 문자열

NEXTAUTH_URL과 NEXTAUTH_SECRET을 설정해 두면
콘솔에서 자주 보이는 NEXTAUTH_URL, NO_SECRET 경고도 깔끔하게 사라진다.

4단계: Vercel 배포 과정

배포 과정은 크게 어렵지 않았다. 전체 흐름은 이렇다.

GitHub에 코드 올리기
- 로컬에서 작업하던 repo를 GitHub 새 저장소에 main 브랜치로 push
Vercel에서 Import
- Vercel 대시보드 → "Add New Project" → GitHub repo 선택
- 프레임워크는 자동으로 Next.js로 인식
환경변수 입력
- 위에서 정리한 값들(NEXTAUTH_URL, NEXTAUTH_SECRET, Supabase 키 등)을 그대로 입력
Deploy 버튼 클릭

배포 후 환경 변수 설정

배포 후에는 NEXTAUTH_URL만 실제 도메인으로 바꿔주면 된다.

NEXTAUTH_URL=https://내-프로젝트명.vercel.app
NEXTAUTH_SECRET=로컬과 동일한 시크릿 값

조금 기다리면 빌드 로그가 쭉 올라가고,
마지막에 https://<프로젝트이름>.vercel.app처럼 새 도메인이 하나 생긴다.

5단계: 브랜딩 및 디테일 개선

헤더에 쓰던 물결 모양 로고가 마음에 들어서,
이걸 바탕으로 파비콘도 같이 만들었다.

두 줄의 파형으로 수영 레인을 표현하는 작은 SVG 아이콘
어두운 네모 배경 위에 파란 물결선 두 줄
src/app/icon.svg로 추가하면 Next.js app router에서 자동으로 파비콘으로 인식된다

브라우저 탭에 걸리는 작은 아이콘 하나만으로도
프로젝트가 훨씬 "서비스다운" 느낌이 나는 게 꽤 만족스러웠다.

6단계: AdSense 적용 시도

이제 본격적으로 Google AdSense 적용을 시도했다.

6.1 AdSense 신청

먼저 Google AdSense에 신청했다. 필요한 정보들:

사이트 URL: https://sooyoung-archive.vercel.app
사이트 언어: 한국어
사이트 주제: 기술/개발 블로그

6.2 사이트 확인 과정

AdSense에서는 먼저 사이트 소유권 확인을 요구했다.
두 가지 방법이 있었다:

DNS 레코드 추가
HTML 태그 삽입

나는 HTML 태그 방법을 선택했다.

6.3 첫 번째 실패: 코드 삽입 오류

처음에는 Next.js의 Script 컴포넌트를 사용해서 코드를 삽입했다.

<Script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-..."
  crossOrigin="anonymous"
  strategy="afterInteractive"
/>

하지만 이 방법으로는 AdSense 크롤러가 코드를 찾지 못했다.

6.4 두 번째 실패: 코드 위치 문제

Script 컴포넌트를 <head> 태그 안으로 옮겨봤다.

<html lang="ko">
  <head>
    <Script ... />
  </head>
  <body>
    ...
  </body>
</html>

하지만 여전히 "사이트를 확인할 수 없습니다" 오류가 발생했다.

6.5 세 번째 성공: 직접 script 태그 사용

문제를 해결한 것은 직접 <script> 태그를 사용하는 것이었다.

<html lang="ko">
  <head>
    <script
      async
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-..."
      crossOrigin="anonymous"
    />
  </head>
  <body>
    ...
  </body>
</html>

이 방법으로 변경하자 드디어 사이트 확인에 성공했다!

7단계: AdSense 정책 위반 및 해결

사이트 확인에 성공했지만, 바로 이어서 정책 위반 통보를 받았다.

7.1 정책 위반 내용

"가치가 별로 없는 콘텐츠"

AdSense는 최소한의 콘텐츠 요건을 엄격하게 적용한다.

7.2 원인 분석

문제는 콘텐츠의 양과 질이 부족했기 때문이다:

현재 9개의 포스트만 존재
일부 포스트는 테스트용으로 내용이 짧음
사이트 구조가 최소적임

7.3 해결 방안: 사이트 품질 개선

AdSense 요구사항을 충족하기 위해 다음과 같은 개선을 진행했다.

7.3.1 SEO 메타데이터 개선

기존의 단순한 메타데이터를 전문적인 블로그 느낌으로 수정:

export const metadata: Metadata = {
  title: "수영의 개발 아카이브 - 프로그래밍 일지 & 기술 블로그",
  description: "웹 개발자 수영의 프로그래밍 학습 일지. Next.js, React, TypeScript 등 최신 웹 기술 개발 경험과 노하우를 공유합니다.",
  keywords: ["개발 블로그", "프로그래밍", "웹 개발", "Next.js", "React", "TypeScript"],
  // ... 추가 설정
};

7.3.2 소개 페이지 추가

전문성을 보여주기 위해 상세한 소개 페이지를 작성:

개발자로서의 정체성과 철학
블로그의 목적과 다루는 내용
연락처 정보

7.3.3 개인정보처리방침 상세화

AdSense는 법적 요구사항을 엄격하게 확인한다:

쿠키 정책 명시
Google Analytics 사용 고지
구체적인 보관 기간 명시
이용자 권리 상세 기술

7.3.4 페이지네이션 로직 수정

의도치 않게 9개 포스트가 8개+1개로 나뉘는 문제를 발견하고 수정:

페이지당 9개로 변경
10개 이상부터 페이지네이션 활성화

8단계: 콘텐츠 확장 계획

AdSense는 최소 10-15개의 원본 콘텐츠를 요구한다.

현재 9개 포스트에서 1개만 더 추가하면 기술적 요건은 충족된다.

하지만 중요한 것은 콘텐츠의 질이다:

각 포스트 300-500자 이상
실질적인 개발 경험 공유
독창적이고 유용한 내용

9단계: 실제 운영 체험

로컬에서만 쓰던 수영 로그를 Vercel에 올려 보니, 생각보다 체감이 크다.

수영장 가는 길에 휴대폰으로 지난 기록을 바로 확인할 수 있고
세션이 끝난 직후 락커룸에서 오늘 훈련 내용을 바로 정리할 수 있고
혼자 쓰는 서비스지만, 배포를 한 번 해두니 "진짜 제품"처럼 느껴진다

10단계: AdSense 재심사 준비

이제 모든 준비가 끝났다:

✅ 기술적 구조 완성
✅ 사이트 확인 성공
✅ SEO 최적화
✅ 법적 요구사항 충족
✅ 콘텐츠 양 확보 (9개 → 10개)
✅ 사이트 전문성 향상

다음 단계: 1개의 양질 포스트 추가 후 AdSense 재심사 요청

결론: 개발자의 수익화 여정

개인 블로그 만들기는 단순히 기술을 익히는 것 이상의 의미가 있다.

실전 경험: 로컬 개발과 실제 배포는 다른 문제들을 만들어낸다
문제 해결 능력: AdSense 적용 과정에서 수많은 문제를 해결했다
상품화 사고: 사용자를 생각하고, 정책을 고려하는 관점을 배웠다
수익화 가능성: 기술로 가치를 만들고 수익을 창출할 수 있다는 자신감

혼자 쓰는 블로그지만, 이 과정을 통해 얻은 경험은
앞으로 어떤 프로젝트를 하든 큰 자산이 될 것이다.

"코드를 작성하는 것에서 끝나지 않고, 실제 가치를 만드는 것까지"
이것이 개발자가 가져야 할 마인드셋이라는 생각이 들었다.

개인 블로그 만들기부터 AdSense 수익화까지: 완벽 가이드

1단계: 기술 스택 선정 및 아키텍처 설계

2단계: 무료 운영 가능성 검증

Vercel Hobby 플랜

Supabase Free 플랜

3단계: 환경 변수 정리 및 로컬 설정

로컬 개발용 .env.local

4단계: Vercel 배포 과정

배포 후 환경 변수 설정

5단계: 브랜딩 및 디테일 개선

6단계: AdSense 적용 시도

6.1 AdSense 신청

6.2 사이트 확인 과정

6.3 첫 번째 실패: 코드 삽입 오류

6.4 두 번째 실패: 코드 위치 문제

6.5 세 번째 성공: 직접 script 태그 사용

7단계: AdSense 정책 위반 및 해결

7.1 정책 위반 내용

7.2 원인 분석

7.3 해결 방안: 사이트 품질 개선

7.3.1 SEO 메타데이터 개선

7.3.2 소개 페이지 추가

7.3.3 개인정보처리방침 상세화

7.3.4 페이지네이션 로직 수정

8단계: 콘텐츠 확장 계획

9단계: 실제 운영 체험

10단계: AdSense 재심사 준비

결론: 개발자의 수익화 여정

댓글

개인 블로그 만들기부터 AdSense 수익화까지: 완벽 가이드

1단계: 기술 스택 선정 및 아키텍처 설계

2단계: 무료 운영 가능성 검증

Vercel Hobby 플랜

Supabase Free 플랜

3단계: 환경 변수 정리 및 로컬 설정

로컬 개발용 .env.local

4단계: Vercel 배포 과정

배포 후 환경 변수 설정

5단계: 브랜딩 및 디테일 개선

6단계: AdSense 적용 시도

6.1 AdSense 신청

6.2 사이트 확인 과정

6.3 첫 번째 실패: 코드 삽입 오류

6.4 두 번째 실패: 코드 위치 문제

6.5 세 번째 성공: 직접 script 태그 사용

7단계: AdSense 정책 위반 및 해결

7.1 정책 위반 내용

7.2 원인 분석

7.3 해결 방안: 사이트 품질 개선

7.3.1 SEO 메타데이터 개선

7.3.2 소개 페이지 추가

7.3.3 개인정보처리방침 상세화

7.3.4 페이지네이션 로직 수정

8단계: 콘텐츠 확장 계획

9단계: 실제 운영 체험

10단계: AdSense 재심사 준비

결론: 개발자의 수익화 여정

댓글

로컬 개발용 `.env.local`

로컬 개발용 `.env.local`