Claude Code로 블로그를 만들고 운영하는 전 과정 정리

개발자가 아닌 사람이 직접 블로그를 만든다는 것

준이아빠블로그(digitalmarketer.co.kr)는 디지털 마케터인 제가 Claude Code로 직접 만들었습니다. 개발을 업으로 삼은 적은 없고, 화면과 데이터 구조, 배포 설정을 AI와 대화하며 만든 뒤 결과를 확인하면서 운영해 왔습니다.

Claude Code는 파일을 읽고 고치거나 명령을 실행하는 AI 에이전트입니다. 원하는 기능을 설명하면 구현을 맡아 주지만, "완료했습니다"라는 답변만으로는 사이트가 제대로 만들어졌는지 알 수 없습니다. 그래서 일을 이렇게 나눴습니다.

Claude Code와 제가 맡은 일

할 일	Claude CodeAI 에이전트	나블로그 운영자
관련 파일 찾아 읽기	제공	–
코드 작성과 수정	제공	–
설치와 실행 명령	제공	–
무엇을 만들지 정하기	–	제공
화면과 결과 확인	–	제공

터미널과 파일 수정이 아직 낯설다면 쉽게 풀어쓴 버전에서 HTML 한 장을 만드는 과정부터 보는 편이 쉽습니다. 이 글은 그보다 한 단계 넓혀, 여러 글을 목록과 상세 화면으로 연결하는 과정을 다룹니다.

Claude Code를 선택한 이유

제가 원한 것은 세 가지였습니다. 디자인과 기능을 직접 바꿀 수 있는 블로그, 반복되는 글쓰기와 검수를 줄이는 절차, 기존 코드를 계속 고쳐 나갈 수 있는 환경입니다. Claude Code는 관련 파일을 찾아 읽고 기존 코드의 방식을 따라 고치기 때문에 이 작업에 잘 맞았습니다.

Claude Code가 일하는 방식은 새로 합류한 팀원이 기존 작업을 읽고 일을 시작하는 모습과 닮았습니다. 그렇다고 모든 파일을 빠짐없이 읽는 것은 아니어서, 어느 파일을 참고했고 무엇을 바꿨는지는 매번 확인했습니다.

요청은 데이터베이스 용어 대신 사용자가 하는 행동으로 설명했습니다. 원하는 화면과 확인할 결과를 함께 말하면 AI가 필요한 구조를 제안합니다.

블로그 프로젝트

> 글마다 태그를 여러 개 붙이고, 태그를 누르면 같은 태그의 글을 모아 보게 해 주세요.

기존 글 목록 화면과 글 정보 파일을 먼저 읽었습니다.
글 정보에 태그 항목을 추가하고 태그별 목록 화면을 만들겠습니다.
바꿀 파일 목록을 먼저 보여 드립니다.

어느 파일을 읽고 무엇을 바꾸는지 먼저 봅니다

기술 스택과 현재 콘텐츠 저장 방식

기술 스택은 사이트를 구성하는 도구의 조합입니다. 각 도구가 맡은 일을 알면 문제가 났을 때 어디부터 볼지 정하기 쉽습니다. 준이아빠블로그에서는 글 원본이 공개 페이지가 되기까지 이렇게 흘러갑니다.

Next.js는 주소마다 맞는 화면을 만들고 페이지끼리 연결하는 프레임워크이고, React는 그 화면을 이루는 부품을 만듭니다. Vercel은 Git 저장소와 연결해 두면 변경된 코드를 받아 사이트를 새로 빌드하고 배포합니다. 한국어 본문 글꼴은 Pretendard를 씁니다.

처음에는 Neon PostgreSQL 데이터베이스와 Drizzle ORM을 썼습니다. 데이터베이스는 자료를 저장하고 꺼내는 프로그램이고, ORM은 코드에서 데이터베이스를 다루는 일을 돕는 도구입니다. 2026년 10월 현재 학습 글의 원본은 Markdown 파일입니다.

Markdown은 # 제목 같은 기호로 글 구조를 표현하는 텍스트 형식이고, 글 맨 앞에 제목과 날짜 같은 정보를 따로 적어 둘 수 있습니다. 준이아빠블로그는 content/insights, content/classes, content/courses 폴더로 인사이트, 클래스, 코스를 나눕니다. 새로 만드는 블로그는 자기 글 종류에 맞게 폴더를 나누면 됩니다.

초기에 거친 구축 단계

초기 구축에는 본업 틈틈이 약 2주가 걸렸습니다. 작업은 아래 순서로 진행했습니다.

1단계에서는 AI가 기본 폴더와 데이터 구조를 만들면 필요한 항목이 빠지지 않았는지 제가 확인했습니다. 2단계의 디자인은 "예쁘게"보다 구체적으로 요청했습니다. 모바일에서는 본문을 크게, PC에서는 목록과 본문을 나눠 보이게, 새 화면에도 기존 화면과 같은 색을 쓰게 했습니다. 재사용할 부품이 생기면 이후 화면에서도 같은 부품을 참고하게 했지만, 새 대화에서는 AI가 앞의 결정을 놓칠 수 있어서 실제 화면을 계속 확인했습니다.

4단계의 사이트맵은 검색 서비스에 페이지 주소를 알려 주는 목록이고, RSS는 새 글 소식을 다른 프로그램이 받아 가도록 제공하는 형식입니다. 이런 기능은 글 한 편의 화면이 제대로 나오는 것을 확인한 뒤에 붙였습니다.

글 두 편이 있는 작은 사이트부터 실행합니다

블로그 전체 구조를 처음 만들 때는 글 두 편짜리 사이트부터 띄워 보는 편이 빠릅니다. HTML 한 장을 만들 때보다 준비할 것이 늘어납니다. Claude Code 설치와 로그인에 더해, Next.js 프로젝트를 실행할 Node.js와 npm이 필요합니다. Node.js는 자바스크립트 프로그램을 실행하고, npm은 프로젝트가 쓰는 프로그램 묶음(패키지)과 실행 명령을 관리합니다.

1단계에서는 Node.js 공식 다운로드에서 LTS 버전을 받습니다. LTS는 오래 유지보수하는 배포 버전입니다. 2026년 10월 4일 Next.js 설치 문서 기준으로 Node.js 20.9 이상이 필요합니다. Claude Code 자체를 설치하는 준비와 Next.js를 실행하는 준비는 서로 다른 일입니다.

2단계에서는 설치 후 터미널이나 PowerShell을 새로 열고 다음을 한 줄씩 실행합니다.

둘 다 버전 번호가 나와야 다음 단계로 넘어갑니다. 명령을 찾을 수 없다는 메시지가 나오면 설치 경로를 보고 터미널을 다시 엽니다. PowerShell에서 npm.ps1 실행 정책 오류가 나오면 npm.cmd --version으로 확인하고, 이후 명령도 npm.cmd run dev처럼 실행합니다. 이 오류는 npm.cmd로 피해 갈 수 있으니 컴퓨터 전체의 실행 정책을 풀거나 관리자 권한으로 실행하지 않습니다.

3단계에서는 my-blog 같은 빈 폴더를 새로 만들고, 쉬운 버전의 폴더 이동 방법대로 그 폴더에서 claude를 실행합니다. 기존 폴더에서 시작하면 그 안의 파일을 덮어쓸 수 있습니다. AI 요청은 계정의 사용량을 쓰고, 패키지 설치에는 인터넷 연결이 필요합니다. 이 단계에서는 유료 데이터베이스나 공개 배포 계정이 필요 없습니다.

4단계에서 대화 입력란에 넣을 요청은 다음과 같습니다. 글 두 편은 실제로 올릴 글의 제목과 첫 문단으로 바꿔 넣어도 됩니다.

AI가 제안한 파일과 설치 목록을 읽고 진행합니다. 모르는 패키지가 있으면 무엇에 필요한지 물어봅니다. 파일 변경과 명령 실행을 하나씩 승인하고 싶다면 수동 승인 모드를 씁니다. AI가 요청하지 않은 기능을 먼저 제안하면 범위를 글 두 편으로 다시 좁힙니다.

만들어진 package.json은 프로젝트의 설정과 실행 명령을 적는 파일입니다. dev는 작업 중에 화면을 보는 개발 서버를 켜는 명령으로, build는 배포할 사이트를 생성하면서 오류를 검사하는 명령으로 구성해 달라고 요청합니다. 두 명령이 각각 무엇을 하는지 AI에게 설명을 들어 두면 나중에 오류가 났을 때 덜 헤맵니다.

5단계 전에, AI가 폴더 안에 하위 프로젝트 폴더를 따로 만들었는지 봅니다. package.json이 들어 있는 폴더가 실제 프로젝트 폴더입니다. 새 터미널 창에서 그 폴더로 이동해 실행합니다. package.json을 찾을 수 없다는 오류가 나오면 현재 경로가 맞는지부터 봅니다.

터미널에 표시된 주소를 브라우저에서 엽니다. 보통 http://localhost:3000이고, 다른 포트를 쓰면 터미널에 나온 주소를 그대로 엽니다. localhost는 지금 쓰는 컴퓨터 자신을 가리키는 주소라서, 이 주소를 다른 사람에게 보내도 그 사람은 내 사이트를 볼 수 없습니다.

완료 기준은 목록, 원문, 이동과 모바일 화면입니다

AI가 파일을 다 만들었다고 답해도, 아래 결과를 브라우저와 터미널에서 직접 봐야 완료입니다. 브라우저에서 보는 것과 npm run build가 검사하는 것은 서로 다릅니다.

브라우저 확인과 빌드 검사가 맡는 범위

확인할 것	브라우저 확인npm run dev	빌드 검사npm run build
첫 화면에 글 제목 두 개	제공	제공하지 않음
본문에 10쪽과 15쪽, 20분과 25분	제공	제공하지 않음
목록 링크로 첫 화면 복귀	제공	제공하지 않음
창을 좁혀도 가로로 안 잘림	제공	제공하지 않음
사이트 생성 중 기술 오류	제공하지 않음	제공

브라우저 확인을 마쳤으면 개발 서버를 실행한 터미널에서 Ctrl + C를 눌러 서버를 멈춥니다. Claude Code 대화창이 아니라 서버가 돌아가는 터미널에서 누릅니다. 그 터미널에서 다음을 실행합니다.

오류 없이 끝나면 기술적 검사는 통과입니다. 화면을 다시 보려면 npm run dev로 개발 서버를 켭니다.

오류가 나면 실행한 명령, 첫 번째 오류 문장, 파일명과 줄 번호를 Claude Code에 알려 줍니다. 비밀번호나 접속 토큰이 들어 있는 로그는 그대로 붙여 넣지 않습니다. 원인을 먼저 설명해 달라고 하고, 이번 오류와 관련된 파일만 고치게 한 뒤 같은 검사를 다시 돌립니다.

예를 들어 Cannot find module은 필요한 패키지를 찾지 못했다는 뜻입니다. 전부 지우고 다시 설치하기 전에 프로젝트 폴더가 맞는지, 패키지 설치가 끝났는지부터 봅니다. 주소가 열리지 않으면 개발 서버 터미널이 켜져 있는지도 봅니다.

두 글이 맞게 보이면 이번에는 직접 쓴 글 한 편을 content/posts에 추가합니다. 목록에 제목이 하나 늘고 상세 화면도 열리면, 이후로는 Markdown 파일만 추가해 글을 늘려 갈 수 있습니다.

CLAUDE.md는 반복 지시를 남기는 설명서입니다

CLAUDE.md에는 프로젝트의 목적, 파일 위치, 실행 명령, 확인 기준을 적습니다. 공식 메모리 문서에 따르면 이 파일을 프로젝트의 기본 폴더에 두면 Claude Code가 대화를 시작할 때 참고합니다. 앞에서 만든 프로젝트라면 다음 정도로 시작할 수 있습니다.

이미 파일이 있다면 덮어쓰지 말고 필요한 규칙만 더합니다. 새 대화에서 /context를 입력하면 Memory files 항목에 이 파일이 보이는지 알 수 있습니다.

my-blog

> /context

Memory files
CLAUDE.md (프로젝트)

여기에 CLAUDE.md가 보이면 지침을 불러온 상태입니다

CLAUDE.md의 지시는 AI가 참고하는 자료이고, 특정 동작을 강제로 막는 보안 장치가 아닙니다. 대화가 길어지면 현재 목표와 남은 일을 짧게 적어 두고 새 대화에서 다음 작업을 시작합니다.

반복 운영은 역할과 검사 기준부터 정합니다

실제 운영에서는 글 한 편이 여러 단계를 거쳐 공개됩니다.

검색용 제목과 설명을 다듬는 SEO 작업은 검색하는 사람이 글을 쉽게 알아보게 하는 일이고, 순위를 보장하지는 않습니다.

초기에는 주제 추천, 작성, 검수, 검색 점검을 AI 네 역할로 나누고 content-ops라는 자체 스킬로 연결했습니다. content-ops는 제가 만든 스킬이라 Claude Code의 기본 명령이 아니고, 다른 컴퓨터에서 입력해도 같은 절차가 실행되지 않습니다. 지금은 작업에 맞는 스킬과 필요한 검토만 쓰고, 서브에이전트 네 개를 매번 실행하지 않습니다.

스킬은 반복 작업의 지침과 자료를 묶어 둔 것이고, 서브에이전트는 따로 떼어 맡긴 작업을 수행하는 보조 AI입니다. 작업을 나눌수록 사용량이 늘고, 여러 AI가 같은 잘못된 전제를 함께 따라갈 수도 있습니다. 짧은 글 하나를 고칠 때는 역할을 나누지 않아도 됩니다.

GA4는 방문 경로와 페이지 이용을 집계하는 도구입니다. 초기에는 GA4에서 Claude 관련 글을 찾는 방문이 많다는 점을 보고 활용 사례 글을 기획했습니다. 성과를 비교할 때는 같은 기간, 같은 지표끼리 놓고 보고, 조회가 많다는 이유만으로 유용한 글이라고 판단하지 않습니다.

커밋과 공개 배포를 구분합니다

파일 저장은 지금 내용을 내 컴퓨터에 남기는 일이고, Git 커밋은 고른 변경을 이력으로 기록하는 일입니다. 푸시는 그 이력을 원격 저장소로 보내는 동작입니다. 세 동작이 바꾸는 곳이 다릅니다.

저장, 커밋, 푸시가 바꾸는 곳

동작	내 컴퓨터	원격 저장소	공개 사이트
파일 저장	제공	제공하지 않음	제공하지 않음
Git 커밋	이력 기록	제공하지 않음	제공하지 않음
푸시	제공	제공	자동 배포가 연결돼 있으면

Git을 쓰기 시작했다면 변경 목록을 보고 이번 작업에 해당하는 파일만 커밋합니다. "전부 커밋해 줘"라고 요청하면 다른 업무 파일이나 비밀값까지 함께 들어갈 수 있습니다. 되돌릴 때도 다른 사람이 고친 내용을 덮지 않도록 이번 변경만 골라냅니다.

공개하기 전에는 원격 저장소의 공개 범위, 서비스의 현재 요금 조건, 공개될 내용, 환경 변수를 봅니다. 환경 변수는 프로그램이 실행할 때 읽는 설정값이고 비밀값이 들어 있을 수 있습니다. 미리보기 배포와 실제 운영 배포의 차이는 Vercel의 Git 배포 안내에 나와 있습니다.

제 경우 가장 도움이 된 것은 반복되는 파일 수정과 오류 확인을 AI에게 맡긴 일이었습니다. 다만 AI에게 맡겼다고 결과가 저절로 완벽해지거나 모든 글을 30분 안에 공개할 수 있게 되지는 않았습니다. 글 두 편의 화면과 수정 결과를 혼자 확인할 수 있게 된 뒤에 필요한 기능과 운영 자동화를 하나씩 더하면 됩니다.