Claude Code로 블로그 뚝딱 만들기 (1편: 설계)

블로그 하나 만들려고 했다

요즘 업무의 90% 이상을 Claude Code로 처리하고 있다. 코드 짜는 것도, 리뷰하는 것도, 문서 정리하는 것도.

그러다 보니 생각이 들었다. "퀄리티 좋은 블로그도 금방 뽑아낼 수 있지 않을까?"

그래서 만들어봤다. 정리해둘 게 있어서 적어둔다.

스택 선택

Next.js + MDX + Vercel

나 → Claude Code → Next.js 블로그 → Vercel 배포

왜 이걸 골랐냐면:

• Next.js: SSG 지원, SEO 괜찮음
• MDX: 마크다운으로 글쓰기 편함
• Vercel: 그냥 배포하면 됨

근데 사실 제일 큰 이유는 **"나, AI, 프론트엔드 개발자 모두 이해하기 쉬운 구조"**였다. 복잡하게 가면 AI도 헷갈리고 나도 헷갈린다.

마크다운 기반으로 간 진짜 이유

content/
├── ai/
│   └── intro-to-llm.md
└── tech/
    └── getting-started-nextjs.md

DB 붙이고 어드민 만들고... 그런 거 안 했다. 마크다운 파일로 글 관리한다.

왜냐면 내가 글 쓰는 방식이 이미 이렇다:

1. ChatGPT나 Gemini랑 대화 → 정리되면 마크다운으로 export
2. Claude Code한테 바로 글 써달라고 함 → 애초에 마크다운으로 나옴

어차피 결과물이 다 .md 파일이다. 그러면 그냥 그 파일을 content 폴더에 넣으면 끝 아닌가?

CMS 붙이면 오히려 복잡해진다. AI가 뱉은 마크다운을 복붙해서 에디터에 붙여넣고... 그런 단계가 생긴다. 귀찮다.

AI 출력물 → 블로그 글 이 파이프라인이 가장 짧은 구조가 마크다운 기반이었다.

Claude Code 써보니까

프롬프트는 구체적일수록 좋았다

처음엔 이렇게 시작했다:

"Next.js로 블로그 만들어줘"

이것만으로도 기본 구조는 나온다. 근데 이런 패턴이 더 잘 먹혔다:

[현재 상황] + [원하는 것] + [제약 조건]

예시:

"지금 이 블로그의 테마 색을 바꾸자. 핫핑크로. 다크모드 배경도 어울리게."

"SEO 작업 들어갈까? sitemap, robots.txt, OG 태그 다 해줘."

대화하듯이 이어가는 게 편했다

나: "테마 색 바꾸자"
Claude: (변경함)
나: "다크모드 배경도 어울리게"
Claude: (다크모드도 수정)
나: "좋아 커밋해"
Claude: (커밋함)

맥락을 기억하니까 일일이 설명 안 해도 됐다.

모르면 물어보게 했다

나: "바이오도 넣어줘"
Claude: "어떤 정보 넣을까요?"
나: "github cli로 조회해봐"
Claude: (gh api user 실행 → 정보 추출 → 바이오 생성)

폴더 구조

최종 구조:

medium-blogging/
├── content/           # 블로그 글 (마크다운)
│   ├── ai/
│   └── tech/
├── public/
│   ├── images/        # 포스트 이미지
│   └── ai/            # AI 글쓰기 가이드
├── src/
│   ├── app/           # Next.js App Router
│   ├── components/    # React 컴포넌트
│   └── lib/           # 유틸리티 (MDX 파싱)
├── CLAUDE.md          # AI 어시스턴트 가이드
└── README.md

핵심은 content/ 폴더. 여기에 마크다운 파일만 넣으면 자동으로 블로그 글이 된다.

CLAUDE.md 꿀팁

프로젝트 루트에 CLAUDE.md 파일을 두면 Claude Code가 자동으로 읽는다.

# CLAUDE.md

## Commands
npm run dev      # 개발 서버
npm run build    # 빌드

## 새 글 추가하기
content/[category]/[slug].md 에 파일 생성

이렇게 해두면 매번 설명 안 해도 된다.

배포

Vercel 배포는 진짜 간단했다:

1. GitHub 레포 연결
2. 끝

자동으로 Next.js 감지하고, 빌드하고, 배포한다.

https://blog.sangwon0001.xyz

일단 여기까지

"블로그 뼈대 만들기"였다.

• 대화 몇 번으로 기본 구조 완성
• 직접 코딩은 거의 안 함
• AI 출력물 → 블로그 글 파이프라인 최단 경로로 설계

다음 편에서는 커스터마이징 얘기할 듯:

• 핫핑크 테마
• SEO 최적화
• 이미지 자동 최적화
• AI한테 글 쓰게 하는 법

나중에 더 생각나면 추가.

이 글도 Claude Code한테 "지금까지 한 거 정리해서 블로그 글로 만들어줘"라고 해서 초안 나온 거다.