Build Log #4: 블로그를 완성한 24개의 프롬프트 전체 공개

이전 글에서 Claude Code를 설치하고 첫 번째 명령을 내리는 것까지 보여드렸습니다.

이번 글에서는 제가 실제로 aicraftlog.com을 완성하기까지, 어떤 명령을 어떤 순서로 내렸는지를 전부 공개합니다.

---

프롬프트의 핵심: 잘 시키는 것보다, 잘 보여주는 것

AI에게 명령을 내리는 것, 즉 프롬프트는 중요합니다.

하지만 긴 글로 설명하는 것보다, 마음에 드는 블로그를 캡처해서 보여주는 것이 훨씬 효과적입니다.

AI는 이미지를 분석해서 레이아웃, 색감, 구조를 한번에 파악합니다. 백 마디 설명보다 한 장의 스크린샷이 낫습니다.

실제로 제가 한 방법

1단계: 마음에 드는 블로그를 찾아서 화면을 캡처합니다.

2단계: 캡처한 이미지를 Claude Code 터미널에 Drag & Drop 하고, 이렇게 명령합니다:

나 이런 블로그를 만들고 싶어.
용도는 AI를 활용하여 수익을 얻는 글을 쓰려고 해.
사람들이 쉽게 볼 수 있는 깔끔한 블로그였으면 좋겠어.
구독 및 댓글 기능도 있으면 좋겠어.

이 한 마디에 Claude Code가 블로그의 뼈대를 만들어줍니다.

3단계: 뼈대가 만들어지면, 하나씩 디테일을 요청합니다.

글은 관리자만 쓸 수 있게 해줘.
글을 배포할 때 예약 시간을 설정할 수 있게 해줘.

블로그 색감은 파란색으로 해줘.

이 로고 파일을 사용해서 블로그에 적용해줘.

이렇게 큰 그림을 먼저 잡고, 세부 사항을 하나씩 다듬어 나가는 방식으로 블로그가 만들어졌습니다.

최종 소스 코드는 GitHub에 공개해 두었습니다:

🔗 https://github.com/johnehk86/aicraftlog

---

역발상: AI에게 프롬프트를 역으로 분석하게 하기

블로그가 완성된 후, 저는 AI에게 이렇게 물어봤습니다.

지금 내가 만든 블로그를 분석해서,
다른 사람이 동일하게 만들려면 어떤 프롬프트를 
어떤 순서로 줘야 하는지 정리해줘.

그 결과, 10단계 24개의 프롬프트로 정리되었습니다.

아래가 그 전체 내용입니다.

---

Phase 1: 프로젝트 초기 설정 (프롬프트 1~2)

집을 지을 때 땅을 다지고 기초를 놓는 단계입니다.

프롬프트 1 — 프로젝트 생성

Next.js 15 + TypeScript + Tailwind CSS 프로젝트를 만들어줘.
프로젝트명은 aicraftlog.
Cloudflare Pages에 배포할 거야.
폰트는 Space Grotesk(영문), Pretendard(한글), JetBrains Mono(코드)를 사용해줘.

결과: 프로젝트 폴더, 설정 파일, 기본 페이지가 자동 생성됩니다.

프롬프트 2 — 다크 모드 설정

다크 모드를 지원해줘. 기본은 라이트 모드.
블루 계열 색상을 메인 컬러로 설정해줘.

결과: 라이트/다크 모드 전환 기능과 블로그 전체 색상 테마가 설정됩니다.

---

Phase 2: 블로그 콘텐츠 시스템 (프롬프트 3~4)

블로그의 핵심 — 글을 쓰고 보여주는 시스템입니다.

프롬프트 3 — 마크다운 기반 블로그 구조

마크다운(MDX) 파일 기반의 블로그를 만들어줘.
제목, 설명, 날짜, 카테고리, 태그, 썸네일, Featured 여부를 지원하고,
코드 하이라이팅도 적용해줘.
글 목록 조회, 카테고리별 조회, 태그별 조회, 관련 글 추천 기능도 만들어줘.

결과: 마크다운 파일만 작성하면 자동으로 블로그 글이 되는 시스템이 만들어집니다.

프롬프트 4 — 커스텀 컴포넌트

블로그 글 안에서 사용할 커스텀 컴포넌트를 만들어줘.
제목에 앵커 링크, 외부 링크 새 탭 열기,
정보/경고/주의 박스 같은 것들.

결과: 글 안에서 정보 박스, 경고 박스 등을 사용할 수 있게 됩니다.

---

Phase 3: 블로그 프론트엔드 (프롬프트 5~9)

방문자가 보는 화면을 만드는 단계입니다.

프롬프트 5 — 레이아웃

블로그 레이아웃을 만들어줘.
상단: 로고, 네비게이션, 검색 버튼, 테마 토글, 모바일 메뉴
하단: 뉴스레터 구독, 링크, 저작권
사이드바: 최근 포스트, 태그 목록, 카테고리별 글 수
모바일 하단 네비게이션도 만들어줘.

결과: 헤더, 푸터, 사이드바, 모바일 메뉴까지 블로그의 뼈대가 완성됩니다.

프롬프트 6 — 홈페이지

홈페이지를 만들어줘.
그라디언트 배경에 로고가 있는 히어로 섹션,
최근 6개 포스트 표시, 카테고리별 필터 네비게이션.

결과: 방문자가 처음 보는 메인 페이지가 완성됩니다.

프롬프트 7 — 글 카드

글 카드 컴포넌트를 만들어줘.
일반/Featured 두 가지 스타일,
카테고리별 다른 뱃지 색상, 읽기 시간 표시.

결과: 글 목록에서 각 글이 카드 형태로 깔끔하게 보입니다.

프롬프트 8 — 글 목록 및 상세 페이지

전체 글 목록 페이지(10개씩 페이지네이션)와
글 상세 페이지를 만들어줘.
상세 페이지에는 목차, 관련 글 추천 3개, 공유 버튼을 넣어줘.

결과: 글을 클릭하면 본문, 목차, 관련 글, SNS 공유까지 갖춘 페이지가 나옵니다.

프롬프트 9 — 카테고리/태그/검색

카테고리별 글 페이지, 태그별 글 페이지,
검색 기능을 만들어줘.
검색은 제목/설명/태그/카테고리에서 검색 가능하게.

결과: 방문자가 원하는 글을 쉽게 찾을 수 있습니다.

---

Phase 4: 관리자 인증 (프롬프트 10)

블로그 주인만 글을 관리할 수 있게 잠금장치를 만듭니다.

프롬프트 10 — 관리자 로그인

관리자 인증 시스템을 만들어줘.
로그인 페이지, 비밀번호 검증, 24시간 유효한 토큰.
관리자 페이지와 글 관련 API는 로그인해야만 접근 가능하게.

결과: 비밀번호를 입력해야만 관리자 페이지에 접근할 수 있습니다.

---

Phase 5: GitHub API 연동 (프롬프트 11~12)

블로그 글을 GitHub에 저장하고 관리합니다.

프롬프트 11 — 글 CRUD (생성/조회/수정/삭제)

GitHub API를 사용해서 블로그 글을 관리해줘.
글 목록 보기, 새 글 만들기, 글 수정, 글 삭제, 일괄 삭제 기능.

결과: 관리자 페이지에서 글을 쓰면 자동으로 GitHub에 저장됩니다.

프롬프트 12 — Edge 호환 파서

Cloudflare Pages에서 동작하는 마크다운 파서를 만들어줘.
제목/날짜/카테고리 등 메타데이터 파싱과 읽기 시간 계산 기능.

결과: 서버 환경에 관계없이 글 정보를 정확하게 읽어냅니다.

---

Phase 6: 이미지 업로드 (프롬프트 13)

글에 사진을 넣을 수 있어야 합니다.

프롬프트 13 — 이미지 업로드

이미지 업로드 기능을 만들어줘.
JPEG, PNG, WebP, GIF 지원. 최대 5MB.
업로드하면 URL이 반환되게.

결과: 이미지를 드래그하면 자동으로 클라우드에 저장됩니다.

---

Phase 7: 관리자 대시보드 (프롬프트 14~16)

블로그를 편하게 관리하는 관리자 화면입니다.

프롬프트 14 — 대시보드

관리자 대시보드를 만들어줘.
글 목록 테이블 (제목, 날짜, 카테고리, 상태),
다중 선택 + 일괄 삭제, 개별 수정/삭제/발행 버튼.

결과: 한눈에 모든 글을 보고 관리할 수 있습니다.

프롬프트 15 — 글쓰기 에디터

글쓰기 페이지를 만들어줘.
리치 텍스트 에디터 사용.
볼드, 이탤릭, 제목, 리스트, 링크, 이미지 업로드, 색상 지원.
제목 입력하면 URL 슬러그 자동 생성.
저장 옵션: 임시저장, 즉시발행, 예약발행.

결과: 워드프로세서처럼 편하게 글을 쓸 수 있는 에디터가 만들어집니다.

프롬프트 16 — 글 수정

기존 글을 불러와서 수정할 수 있는 페이지를 만들어줘.

결과: 발행된 글도 언제든 수정할 수 있습니다.

---

Phase 8: 동적 관리 (프롬프트 17~18)

코드 수정 없이 카테고리와 메뉴를 관리합니다.

프롬프트 17 — 카테고리 관리

카테고리를 관리자 페이지에서 추가/삭제/순서 변경할 수 있게 해줘.

결과: 새 카테고리가 필요하면 관리자 페이지에서 바로 추가합니다.

프롬프트 18 — 네비게이션 관리

상단 네비게이션 메뉴를 관리자 페이지에서 수정할 수 있게 해줘.

결과: 메뉴 구성을 코드 없이 자유롭게 바꿀 수 있습니다.

---

Phase 9: SEO 및 부가 기능 (프롬프트 19~23)

구글에서 검색되고, 수익화를 준비하는 단계입니다.

프롬프트 19 — SEO 최적화

SEO를 최적화해줘.
사이트맵, RSS 피드, 메타태그 자동 생성.
관리자 페이지는 검색엔진에 노출되지 않게.

결과: 구글이 블로그를 잘 찾을 수 있도록 설정됩니다.

프롬프트 20 — 댓글

GitHub Discussions 기반 댓글 기능을 추가해줘.
다크 모드도 지원하게.

결과: 방문자가 글에 댓글을 달 수 있습니다.

프롬프트 21 — 애드센스 승인용 페이지

구글 애드센스 승인을 위한 페이지들을 만들어줘.
소개, 개인정보처리방침, 이용약관, 연락처.
광고 슬롯도 미리 배치해줘.

결과: 구글 애드센스 심사를 받을 준비가 완료됩니다.

프롬프트 22 — 뉴스레터 구독

뉴스레터 구독 기능을 추가해줘.
푸터와 글 상세 페이지에 구독 폼 배치.

결과: 방문자가 이메일을 남기면 새 글 알림을 받을 수 있습니다.

프롬프트 23 — 방문자 추적

방문자 수 추적 기능을 만들어줘.
IP 기반 중복 제거, 일일/총 방문자 수 표시.

결과: 블로그에 몇 명이 방문하는지 확인할 수 있습니다.

---

Phase 10: 배포 (프롬프트 24)

마지막 단계 — 세상에 공개합니다.

프롬프트 24 — Cloudflare Pages 배포

Cloudflare Pages에 배포할 수 있게 설정해줘.

결과: aicraftlog.com으로 전 세계 누구나 접속 가능한 블로그가 완성됩니다.

---

24개 프롬프트를 마치며

이 블로그는 결국 코드 파일들의 덩어리입니다.

AI가 만들어준 이 코드들을 어떻게 관리하고, 전 세계 사람들이 접속할 수 있게 배포하는지 — 이 과정도 중요합니다.

그래서 다음 글에서는 다음과 같은 내용을 다루겠습니다.

AI가 만들어준 코드는 Git으로 어떻게 관리하는지, 그리고 Cloudflare Pages를 통해 어떻게 전 세계에 배포하는지를 정리하겠습니다.

하지만 그 전에, AI를 더 잘 활용하기 위한 세 가지 팁을 남깁니다.

---

AI에게 잘 시키는 3가지 방법

1. 한 번에 다 요청하지 마세요

"블로그 전체를 만들어줘"보다 단계별로 나눠서 요청하는 게 훨씬 좋은 결과를 냅니다. 집을 지을 때 기초 → 골조 → 내장 → 외장 순서로 짓는 것처럼, AI에게도 순서대로 시키면 탄탄한 결과물이 나옵니다.

2. 결과를 확인하고 다음으로 넘어가세요

각 명령 후에 결과물을 반드시 확인하고, 문제가 있으면 바로 수정한 뒤 다음 단계로 넘어가세요. 이게 안정적인 결과물을 만드는 비결입니다.

3. AI는 도구이고, 기획은 사람의 몫입니다

AI가 코드를 짜주지만, "무엇을 만들지"는 사람이 결정해야 합니다. 저도 처음부터 10단계를 계획한 것이 아닙니다. 마음에 드는 블로그를 보여주고 "이렇게 만들어줘"에서 시작해서, 필요한 기능을 하나씩 추가해 나간 것입니다. AI와 대화하다 보면 자연스럽게 구조가 잡힙니다.

---

다음 글 예고

다음 글에서는 AI가 만들어준 코드를 Git으로 관리하고, Cloudflare Pages로 배포하는 전체 과정을 보여드리겠습니다.

Build Log #5에서 만나겠습니다.