AI 블로그를 AI로 만들기: Next.js + MDX + Claude Code 실전 후기

안녕하세요, Tom입니다.

지금 이 글을 읽고 계신 이 블로그, Tom's Blog — 이걸 어떻게 만들었는지 궁금하신 분들이 계실 것 같아요. 결론부터 말하면, 블로그의 거의 모든 것을 AI와 함께 만들었습니다.

프로젝트 셋업, 디자인, 컴포넌트, SEO, 뉴스 수집 파이프라인, 심지어 이 포스트 자체까지. 오늘은 그 전 과정을 솔직하게 공유할게요.

왜 이 블로그를 만들었나

AI 뉴스가 매일 쏟아지는데, 한국어로 정리된 곳이 마땅치 않더라고요. GeekNews가 좋긴 한데, AI 전문은 아니잖아요. 그래서 직접 만들기로 했어요.

목표는 단순했습니다:

1. AI 관련 뉴스를 한국어로 빠르게 전달
2. 단순 번역이 아닌 개발자 관점의 의견 포함
3. 운영 비용 $0
4. 수작업 최소화 — 반자동 파이프라인 구축

기술 스택 선택

💡 핵심 포인트: 이 조합의 가장 큰 장점은 비용이 $0이라는 거예요. Vercel 무료 티어 + 자체 도메인(가비아 연간 ~1만원)으로 완전한 블로그가 돌아갑니다.

디자인: 다크 미니멀

Vercel이나 Toss의 디자인을 참고해서 다크 미니멀 테마로 갔어요.

배경: #000000, #0a0a0a, #18181b
텍스트: #fafafa (주), #a1a1aa (보조)
강조: purple-500 → blue-500 그라디언트
보더: rgba(255,255,255,0.1)

카드에는 글래스모피즘 효과를 넣었어요:

/* 카드 스타일 */
bg-zinc-900/50 backdrop-blur-md rounded-xl border border-zinc-800

🎯 라이트 모드는 일부러 안 만들었어요. MVP에서는 하나에 집중하는 게 낫고, 개발자 블로그는 다크 모드가 자연스러우니까요.

핵심 기능: Semi-Manual 뉴스 파이프라인

이 블로그의 진짜 핵심은 뉴스를 수집하고 발행하는 파이프라인이에요.

전체 흐름

1. /fetch-news          → RSS 뉴스 수집 + 리스트 표시
2. "1, 3, 5번 선택"      → 사용자가 뉴스 선택
3. /publish              → 선택된 뉴스로 포스트 자동 생성
4. /commit --push        → 커밋 및 Vercel 배포

이 4단계면 뉴스 수집부터 배포까지 5분 안에 끝나요.

뉴스 소스

현재 수집 중인 소스들이에요:

/fetch-news — 뉴스 수집

RSS 피드를 파싱해서 최신 뉴스를 가져오고, 이미 발행한 URL과 중복 체크를 한 후 리스트로 보여줘요.

pnpm fetch-news --source=ai --limit=5

결과는 .claude/news/YYYYMMDD_news.md 파일에 저장되고, 체크박스 형태로 표시됩니다.

⚠️ 중복 체크가 중요해요. 기존 MDX 파일의 sourceUrl 필드와 비교해서, 이미 발행한 뉴스는 자동으로 제외합니다.

/publish — 포스트 자동 생성

선택한 뉴스의 원문 URL을 크롤링하고, Writing Style Guide에 따라 MDX 포스트를 생성해요.

여기서 핵심은 Writing Style Guide예요:

• "~예요/해요" 대화체 사용
• 개인적 경험과 의견 포함
• 이모지 마커 활용 (💡🎯⚠️)
• "안녕하세요, Tom입니다." 인트로

AI가 쓰더라도 Tom의 목소리가 느껴지도록 가이드를 꽤 자세하게 작성했어요.

/commit --push — 원클릭 배포

Conventional Commits 형식으로 커밋하고 push하면, Vercel이 자동으로 빌드 & 배포합니다.

# 이렇게 커밋됩니다
content(posts): add 5 new posts from 2026-02-19 news

SEO: 무료로 할 수 있는 건 다 했어요

비용 $0 프로젝트에서 SEO는 코드로 해결해야 해요.

💡 OG 이미지 자동 생성이 꽤 편해요. 포스트를 올리면 태그에 따라 다른 색상의 그라디언트 이미지가 자동으로 만들어져서, SNS 공유 시 썸네일 걱정을 안 해도 됩니다.

커스텀 썸네일 시스템

초반에는 OG 이미지만 썼는데, 블로그가 좀 밋밋하더라고요. 그래서 커스텀 썸네일 시스템을 추가했어요.

# MDX frontmatter
thumbnail: "/thumbnails/my-post.png" # 있으면 커스텀 사용
# thumbnail이 없으면 → /api/og 자동 생성 이미지 사용

이 기능을 구현하면서 Contentlayer 스키마, 포스트 카드 컴포넌트, 포스트 상세 페이지를 모두 수정했는데, Claude Code가 전부 처리해줬어요.

Claude Code와의 협업 경험

솔직하게 말하면, 이 프로젝트에서 제가 직접 코드를 작성한 비율은 10% 미만이에요.

Claude Code가 잘한 것

• 프로젝트 초기 셋업: Next.js + Tailwind + Contentlayer 보일러플레이트를 한 번에 생성
• 컴포넌트 구현: 포스트 카드, 카테고리 사이드바, 코드 블록 등 UI 컴포넌트
• SEO 구현: JSON-LD 스키마, OG 이미지 API, sitemap, RSS
• 버그 수정: MDX 렌더링 이슈, 썸네일 폴백 로직 등
• 반복 작업: 40개 이상의 포스트에 썸네일 필드 추가

Claude Code가 못한 것 (사람이 해야 했던 것)

• 디자인 방향 결정: "다크 미니멀로 가자"는 제가 정한 것
• 뉴스 선별: 어떤 뉴스가 가치 있는지는 제가 판단
• Writing Style Guide 작성: Tom의 목소리를 정의하는 건 제가 해야 했어요
• 비즈니스 판단: 어떤 기능을 먼저 만들지, MVP 범위를 어디까지 할지

🤔 배운 점: AI 코딩 도구의 가치는 "코드를 짜주는 것"이 아니라, **"내가 결정에 집중할 수 있게 실행을 대신해주는 것"**이에요.

비용 정리

💰 월 1,000원으로 기술 블로그를 운영하고 있어요. 사실상 도메인 비용만 나가는 거죠.

현재 블로그 현황

아쉬운 점과 개선 계획

현재 한계

1. 콘텐츠 다양성: 뉴스 요약 위주라 오리지널 콘텐츠 비율이 낮음
2. 검색 유입: 뉴스성 포스트는 검색 수명이 짧음
3. 독자 참여: 댓글 시스템이 아직 없음

앞으로의 계획

1. 오리지널 콘텐츠 확대: 비교 리뷰, 튜토리얼, 월간 정리 등
2. Evergreen 콘텐츠: 시간이 지나도 가치 있는 가이드성 글
3. 댓글 시스템: giscus (GitHub Discussions 기반) 도입 예정

이런 분들께 추천해요

• AI 뉴스를 빠르게 한국어로 읽고 싶은 개발자
• Next.js + MDX로 기술 블로그를 만들고 싶은 분
• AI 코딩 도구로 실제 프로젝트를 만들어보고 싶은 분
• 비용 $0으로 블로그를 시작하고 싶은 분

총평

이 블로그 프로젝트를 통해 느낀 건, AI는 도구의 비용을 0에 가깝게 만들어준다는 거예요. 예전에는 블로그를 만들려면 디자인, 프론트엔드, 백엔드, SEO 각각의 지식이 필요했는데, 이제는 "무엇을 만들고 싶은지"만 명확하면 AI가 실행을 도와줍니다.

물론 완벽하진 않아요. AI가 만든 코드를 검토하고, 방향을 잡고, 품질을 관리하는 건 여전히 사람의 몫이에요. 하지만 실행의 장벽이 극적으로 낮아진 건 사실이고, 그 덕분에 한 달 만에 46개 포스트가 발행된 블로그를 만들 수 있었습니다.

궁금한 점 있으시면 편하게 물어봐주세요!