Claude Code로 블로그 만들기, 쉽게 풀어쓴 버전
준이아빠블로그를 Claude Code로 만든 과정을 바탕으로, 글 한 편이 보이는 화면을 먼저 만드는 순서와 고치는 방법, 저장과 공개의 차이를 설명합니다.
세 줄로 먼저 읽기
- 준이아빠블로그는 코딩을 직업으로 해 본 적 없는 마케터가 Claude Code와 대화하며 약 2주 만에 만들었고, 지금 글 원본은 Markdown 파일입니다.
- 처음에는 서버나 데이터베이스 없이 글 한 편을 담은 HTML 파일 하나를 만들어 브라우저에서 엽니다.
- 파일 저장과 Git 커밋, 푸시는 서로 다른 단계이며 자동 배포가 연결된 저장소로 푸시하면 사이트가 바뀝니다.
개발자가 아닌 마케터가 블로그를 직접 만든 이유
준이아빠블로그는 코딩을 직업으로 해 본 적 없는 디지털 마케터가 Claude Code로 만들었습니다. Claude Code는 프로젝트 폴더의 파일을 읽고 고치거나 명령을 실행하는 AI 도구입니다. 저는 어떤 블로그가 필요한지 설명했고, AI가 만든 결과를 확인하면서 디자인과 기능을 하나씩 더했습니다.
제가 원한 것은 디자인과 기능을 직접 바꿀 수 있고, 반복되는 글쓰기와 점검 작업을 줄여 주는 블로그였습니다. 가입해서 글만 올리는 블로그 서비스가 더 편한 경우도 있으므로, 두 방식의 차이를 먼저 표로 놓았습니다.
가입형 블로그와 직접 만든 블로그
| 하는 일 |  가입형 블로그 서비스 |  Claude Code로 만든 블로그 |
|---|---|---|
| 가입하자마자 글쓰기 | 제공 | 제공하지 않음 |
| 디자인과 기능을 원하는 대로 바꾸기 | 제공하지 않음 | 제공 |
| 오류 수정과 운영을 직접 맡기 | 제공하지 않음 | 제공 |
Claude Code를 고른 이유는 어떤 파일을 바꿨고 결과가 어디에 생겼는지 확인하며 일할 수 있다는 점이었습니다. Claude Code에 일을 맡기는 과정은 새로 합류한 팀원에게 일을 설명하는 과정과 닮았습니다. 다만 AI는 프로젝트 전체를 한 번에 빠짐없이 이해하지 못하므로, 관련 파일을 찾아 읽게 하고 실제로 바뀐 내용과 화면은 제가 직접 확인합니다.
블로그를 이루는 부품: 처음과 지금
기술 스택은 웹사이트를 만드는 데 쓰는 도구의 조합입니다. 블로그를 만들려면 화면을 만드는 도구, 글을 보관하는 방식, 인터넷에 공개하는 서비스가 필요합니다. 준이아빠블로그는 처음 만들 때와 지금, 글을 보관하는 방식이 다릅니다.
준이아빠블로그의 부품 변화
| 역할 |  처음 만들 때2026년 3월 |  지금2026년 10월 |
|---|---|---|
| 화면 만들기 | Next.js | Next.js |
| 글 원본 보관 | Neon PostgreSQL 데이터베이스 | content/ 폴더의 Markdown 파일 |
| 인터넷 공개 | Git 저장소와 Vercel 연결 | Git 저장소와 Vercel 연결 |
Next.js는 여러 페이지와 공통 화면을 구성하는 웹 프레임워크입니다. Markdown은 # 제목처럼 기호로 글 구조를 나타내는 텍스트 형식이고, Vercel은 Git 저장소의 코드 변경을 받아 사이트를 만들고 인터넷에 공개하는 서비스입니다. 처음에는 Neon PostgreSQL이라는 데이터베이스와 Drizzle ORM이라는 연결 도구를 썼습니다. 데이터베이스는 자료를 정해진 구조로 저장하고 찾는 프로그램이고, ORM은 코드가 데이터베이스를 읽고 쓰는 일을 돕습니다. 지금은 글을 Markdown 파일로 쓰고 저장하므로 글을 올릴 때 데이터베이스를 거치지 않습니다.
본문 글꼴은 Pretendard입니다. 검정 글자와 빨간 포인트, 각진 형태는 제 취향으로 고른 디자인이고, 카드에 색 띠를 붙이지 않고 글자 크기와 여백으로 위계를 나눴습니다.
빈 폴더에서 블로그를 만든 네 단계
처음 만드는 데 본업 틈틈이 약 2주가 걸렸습니다. 순서는 이랬습니다.
- 글의 구조를 정했습니다. 어떤 종류의 글과 카테고리가 필요한지 설명했고, AI가 파일과 데이터 구조를 만들면 필요한 항목이 다 있는지 봤습니다.
- 디자인을 정했습니다. “예쁘게” 대신 “스마트폰에서는 본문을 크게, PC에서는 목록과 본문을 나눠 달라”처럼 화면에서 바로 대조할 수 있게 요청했습니다.
- 기능을 하나씩 붙였습니다. 태그, 연재물, 검색용 제목과 설명, 공유할 때 보이는 미리보기 이미지를 차례로 추가하고, 그때마다 기존 화면이 그대로인지 봤습니다.
- 확인한 사이트를 공개했습니다. 코드 저장소와 Vercel을 연결하고 공개 주소를 설정했습니다. 저장소의 정해진 브랜치에 변경을 보내면 자동으로 배포되게 했습니다.
요청할 때는 기술 용어보다 원하는 동작을 구체적으로 말하는 편이 결과가 좋았습니다. 태그 기능은 이렇게 요청했습니다.
Claude Code, 블로그 프로젝트바꿀 파일 목록을 먼저 보여 드릴게요.
AI가 그 설명을 코드로 제대로 옮겼는지는 글을 열고 태그를 직접 눌러 확인했습니다.
처음에는 글 한 편이 보이는 화면부터 만듭니다
블로그 전체를 한 번에 만들기보다, 글 한 편을 담은 HTML 파일 하나를 만들어 브라우저에서 여는 것부터 시작합니다. Claude Code 설치와 로그인은 끝난 상태여야 합니다. 아직이라면 맥 설치 안내나 윈도우 설치 안내를 먼저 따라 합니다. 이 단계에서는 도메인, 데이터베이스, 배포 서비스에 가입하지 않습니다.
글 한 편짜리 화면을 만드는 순서
- 1. 새 폴더 만들기my-blog 폴더를 만들고
경로를 복사 - 2. 폴더로 이동cd "경로" 입력 뒤
pwd에 그 경로가 보이면 성공 
3. claude 실행과 요청claude 입력 후
아래 요청문을 붙여 넣기
4. 변경 승인대상이 index.html
하나인지 보고 허용
5. 브라우저로 열기주소가 file://로 시작하고
제목과 본문이 보이면 성공
1. 새 폴더를 만듭니다. Finder나 파일 탐색기에서 my-blog 폴더를 새로 만듭니다. 맥은 폴더를 선택하고 Option + Command + C를 누르면 경로가 복사됩니다. 윈도우는 폴더 안으로 들어가 주소 표시줄을 누른 뒤 경로를 복사합니다.
2. 터미널에서 그 폴더로 이동합니다. 설치 때 쓴 터미널이나 PowerShell을 열고 cd "복사한 경로"를 입력합니다. 경로에 공백이 있어도 이동할 수 있도록 따옴표는 지우지 않습니다. 맥은 pwd, PowerShell은 Get-Location을 입력해 방금 만든 폴더 경로가 나오면 이동한 것입니다. Claude Code는 실행한 폴더의 파일을 읽고 고치므로, 다운로드 폴더나 회사 프로젝트 폴더에서 실행하지 않습니다.
3. claude를 입력하고 요청을 보냅니다. 제목과 본문에는 가지고 있는 글 한 편, 예를 들어 예전에 다른 블로그에 올린 원고를 붙여 넣습니다.
현재 폴더의 경로와 파일 목록을 먼저 알려 주세요.
index.html 한 파일만 만들어 주세요.
브라우저에서 파일을 직접 열어 볼 수 있게 HTML과 CSS를 한 파일에 넣어 주세요.
제목: (가지고 있는 글의 제목)
본문: (가지고 있는 글의 본문)
흰 배경에 검정 글자로, 스마트폰 폭에서도 문장이 잘 보이게 만들어 주세요.
외부 이미지, 외부 폰트, 로그인, 설치, 서버 실행, 인터넷 공개는 하지 마세요.
파일을 만들기 전에 바꿀 내용을 설명해 주세요.HTML은 브라우저에 보여 줄 글과 구조를 적는 형식이고, CSS는 글자 크기와 여백 같은 모양을 정하는 규칙입니다. 이 둘이 든 파일 한 장이 웹사이트 화면의 가장 작은 단위입니다.
4. 변경을 승인합니다. 파일 변경을 하나씩 보려면 수동 승인 모드를 고릅니다. 승인 창에 나온 경로가 my-blog 폴더이고 만들 파일이 index.html 하나이면 허용합니다. AI가 요청하지 않은 설치나 인터넷 공개를 제안하면 거절하고 이유를 묻습니다.
5. 브라우저로 엽니다. Finder나 파일 탐색기에서 index.html을 두 번 클릭합니다. 편집기가 열리면 연결 프로그램 또는 다음으로 열기에서 브라우저를 고릅니다. 주소창이 file://로 시작하면 내 컴퓨터의 파일을 연 것입니다. 붙여 넣은 제목과 본문이 그대로 보이고, 창을 좁혀도 글이 화면 밖으로 잘리지 않으면 첫 화면이 완성된 것입니다.
만든 화면을 고칠 때는 한 곳씩 요청합니다
고치기 전에 index.html을 index-before.html로 복사해 두면 바뀐 곳을 비교하고 되돌리기 쉽습니다. 요청은 바꿀 곳 하나와 그대로 둘 것을 함께 적습니다.
Claude Code, my-blog본문과 다른 스타일은 바꾸지 않았습니다.
브라우저를 새로고침해 제목만 커졌는지 봅니다. 다른 곳까지 바뀌었다면 어느 문장이 달라졌는지 알려 주고 그 부분만 되돌리게 합니다. 자주 막히는 경우는 다음과 같습니다.
| 막힌 상황 | 먼저 볼 것 |
|---|---|
index.html이 없습니다 | AI가 알려 준 저장 경로와 내가 연 폴더가 같은지 봅니다 |
파일 이름이 index.html.txt입니다 | 파일 확장자 표시를 켜고 실제 이름을 봅니다 |
| 화면이 비거나 코드만 보입니다 | 편집기가 아니라 브라우저로 열었는지 보고, 보이는 화면과 파일 이름을 AI에게 알려 줍니다 |
| 고치기 전 문장이 보입니다 | 새로고침하고, 같은 이름의 다른 파일을 열지 않았는지 봅니다 |
| 요청하지 않은 설치나 여러 파일 변경이 시작됩니다 | Esc로 멈추고 한 파일만 만들라는 요청을 다시 보냅니다 |
반복되는 규칙은 CLAUDE.md에 적습니다
CLAUDE.md는 프로젝트에서 계속 지킬 지시를 적는 텍스트 파일입니다. 프로젝트의 기본 폴더에 두면 Claude Code가 작업을 시작할 때 읽습니다. 동작 방식은 공식 메모리 안내에 나와 있습니다. 목적, 파일 위치, 결과를 확인할 기준을 짧게 적습니다. 같은 폴더에 이미 CLAUDE.md가 있으면 덮어쓰지 말고 기존 내용에 더하게 합니다.
# 블로그 작업 규칙
- 이 폴더는 개인 블로그의 HTML 파일입니다.
- 요청한 파일만 수정하고, 바꾼 파일 이름을 알려 주세요.
- 글의 날짜와 숫자는 제공한 원문과 대조해 주세요.
- 설치, 외부 연결, 공개 배포는 먼저 설명해 주세요.새 대화에서 /context를 입력하면 Claude Code가 읽은 파일 목록이 나옵니다.
Claude Code, my-blogmy-blog/CLAUDE.md
목록에 없으면 Claude Code를 실행한 폴더와 파일 이름부터 봅니다. CLAUDE.md는 권한을 막는 설정이 아니라 지시문이므로, 규칙을 읽었더라도 결과는 매번 확인합니다. 더 자세한 작성법은 CLAUDE.md 작성 안내에 정리했습니다.
글쓰기와 검수를 나눠 운영합니다
준이아빠블로그의 글은 아래 순서를 거칩니다. 검색 최적화는 검색 서비스가 글의 주제와 내용을 알아보도록 제목과 설명을 정리하는 일입니다.
준이아빠블로그의 글 한 편이 공개되기까지
1. 주제 선정방문 데이터 참고
2. 조사인용할 자료와
실제 화면
3. 초안 작성Markdown 파일로- 4. 사실과 문장 검수날짜와 수치를
사람이 대조 
5. 검색용 정보 점검제목과 설명
6. 공개확인한 뒤에만
초기 운영에서는 주제 추천, 글쓰기, 검수, 검색 점검을 네 역할로 나눠 각각 AI에게 맡겼습니다. 편집장, 기자, 교정 담당자를 따로 두는 방식입니다. AI에게 따로 맡기는 보조 작업자를 서브에이전트라고 하고, 반복 작업의 지침을 묶어 둔 것을 스킬이라고 합니다. 지금은 작업 크기에 맞춰 나눕니다. 큰 글은 역할을 나누고, 작은 수정은 AI 하나에 맡긴 뒤 제가 확인합니다.
AI끼리 검토해도 사실 확인은 끝나지 않습니다. 인용한 자료의 날짜와 수치, 실제 화면은 사람이 대조합니다. 초안을 써 달라는 요청과 공개해 달라는 요청도 구분해서 말합니다.
GA4는 방문자가 어떤 글을 보고 어떤 경로로 들어오는지 집계하는 분석 도구입니다. 초기에는 Claude 관련 글을 찾는 방문이 많다는 관찰을 주제 선정에 참고했습니다. 분석 자동화는 글이 쌓이고 방문 데이터가 생긴 뒤에 붙입니다.
저장과 공개는 다른 단계입니다
파일을 저장해도 인터넷에는 아무 변화가 없습니다. 공개까지는 몇 단계를 더 거칩니다.
파일 저장에서 사이트 공개까지
- 1. 파일 저장내 컴퓨터에만 남음
2. Git 커밋고른 파일의
변경 이력을 기록
3. 푸시이력을 원격 저장소로
보냄- 4. 자동 배포Vercel이 받아
사이트가 바뀜
Git은 파일의 변경 이력을 남기는 도구입니다. 커밋은 고른 파일의 변경을 이력에 기록하는 일이고, 푸시는 그 이력을 원격 저장소로 보내는 일입니다. 준이아빠블로그처럼 자동 배포를 연결해 두면 정해진 브랜치에 푸시하는 순간 공개까지 이어집니다.
그래서 “지금까지 전부 저장해 줘”보다 “바뀐 파일 목록을 보여 주고, 이번에 고친 파일만 커밋하는 방법을 설명해 줘”라고 요청합니다. 목록에 비밀번호가 든 파일이나 다른 업무 파일이 섞이지 않았는지 먼저 봅니다. 글 한 편짜리 HTML 단계에서는 Git 없이 index-before.html 같은 사본으로 비교하고 되돌려도 됩니다.
글 한 편을 만들고 고칠 수 있게 되면 다음은 글 목록 화면과 글 상세 화면을 잇는 단계입니다. 여러 글을 파일로 관리하며 사이트를 짓는 과정은 블로그 제작 전체 과정에 이어집니다. 공개는 그 화면과 내용을 확인한 뒤에 결정합니다.
제대로 이해했는지 한 문제로 확인해 볼까요?
답을 고르면 바로 풀이가 나와요.
AI가 블로그 첫 화면을 만들었다고 답했습니다. 다음 행동으로 알맞은 것은 무엇인가요?
새 글과 AI 소식을 메일로 받아 보세요
AI가 바꾸는 일과 도구, 측정 실무 이야기를 매주 한 번 보내 드려요.
이 글이 도움이 되었나요?
설치 다음 단계인 명령어, 플랜 모드, 메모리, 한도를 차례로 익힙니다
- 1Claude Code 이해하기: 파일을 읽고 수정하는 AI 도구
- 2클로드 코드(Claude Code) 설치 방법: 윈도우, 맥, 리눅스 명령어와 터미널 로그인
- 3클로드 코드 슬래시 명령어 정리: /clear, /usage, /compact와 내 명령 만들기