# Build Log #3AI로 블로그 홈페이지 만들기 — Claude Code 설치 및 시작 가이드

Build Log #3: AI를 이용하여 블로그 만들기

웹 개발 경험 제로인 임베디드 개발자가, AI에게 명령해서 블로그를 만듭니다.

이번 글에서는 어떤 AI 도구를 선택했고, 어떻게 설치하고, 어떤 명령을 내렸는지까지를 정리합니다.

---

AI의 대표 3대장

AI의 대표 3사는 아래와 같습니다.

• Open AI사의 Chat GPT
• Google사의 Gemini
• Anthropic 사의 Claude

아마도 많은 분들이 AI Chat 기능을 사용하여 궁금한 부분을 많이 물어봤을 것입니다. 그런데 단순히 Chat 기능을 떠나 AI에게 명령을 하면 웹 또는 앱과 같은 생성물을 만들어 주는 기능이 있습니다.

예를 들어 Claude는 조언을 해주는 컨설턴트의 역할을 수행하고, Claude Code는 직접 무언가를 만들어 주는 개발자라고 보시면 됩니다.

• Open AI사의 Chat GPT / Codex CLI
• Google사의 Gemini / Gemini CLI
• Anthropic 사의 Claude / Claude Code

저는 AI의 개발자 능력을 이용해서, 블로그 홈페이지라는 생성물을 만들려고 합니다.

---

왜 Claude Code를 선택했는가?

그렇다면 이 3사 중에 어떤 것을 사용하는 것이 좋을까요?

Claude Code는 바이브 코딩과 전문 개발 프로젝트 모두에서 선도적인 도구로 평가받고 있습니다. 터미널에서 프로젝트 전체를 직접 생성하고, 파일 관리, 에러 수정, 실행까지 한번에 해줍니다.

OpenAI Codex CLI는 터미널에서 동작하는 경량 오픈소스 코딩 에이전트로, o3나 o4-mini 같은 모델을 로컬 워크플로우에서 사용할 수 있습니다. ChatGPT 구독으로 사용 가능하지만, 외부 API와 함께 쓸 때는 경험이 떨어질 수 있습니다.

Gemini CLI는 오픈소스(Apache 2.0)이고 무료 사용 한도가 가장 넉넉합니다. 개인 구글 계정으로 분당 60회, 하루 1,000회 요청이 가능합니다. 하지만 실제로 설정이나 MCP 연동에서 문제가 많고, 실사용에서 가치를 얻기 어렵다는 평가가 있습니다.

따라서 저는 Claude Code를 이용하여 블로그 홈페이지를 만들기로 하였습니다.

Claude Code는 "Next.js로 블로그 만들어줘"라고 하면 파일 구조 설계부터 코드 작성, 배포 설정까지 한번에 처리합니다. 에러가 나면 스스로 감지하고 수정까지 해줘서, 웹 개발 경험이 없는 사람도 3일 만에 완성된 블로그를 만들 수 있습니다.

---

Claude Code 설치부터 첫 명령까지

우선 아래 내용은 Claude를 통해 전반적인 내용을 요약 정리한 것입니다.

1. 준비물

시작하기 전에 필요한 것들:

• Claude Pro 구독 ($20/월) — 무료 플랜에서는 Claude Code 사용 불가
• VS Code 설치 (무료, code.visualstudio.com)
• Git 설치 (Windows의 경우 Git for Windows 필요)

해당 설치에 대해서는 인공지능을 통해 자세히 가이드 받으시는 게 좋을 것 같습니다.

2. Claude Code 설치

이제 네이티브 인스톨러가 권장 방법이며, Node.js가 필요 없습니다.

Mac/Linux:

curl -fsSL https://claude.ai/install.sh | bash

Windows (PowerShell):

irm https://claude.ai/install.ps1 | iex

Windows는 Git for Windows가 필요합니다.

설치 확인:

claude --version

만일 설치 후 위의 버전이 나오지 않으면 PATH가 잡히지 않은 것이니, 아래 내용을 복사한 후 PowerShell을 끄고 다시 실행해 보세요.

[Environment]::SetEnvironmentVariable("PATH", "$env:PATH;$env:USERPROFILE\.local\bin", [EnvironmentVariableTarget]::User)

3. Claude Code 로그인

터미널에서 claude를 입력하면 브라우저 로그인 화면이 뜹니다. 브라우저를 따라 로그인하면 됩니다.

4. VS Code에서 프로젝트 시작

mkdir my-blog
cd my-blog
code .

VS Code가 열리면 터미널을 열고 (Ctrl + ` 또는 상단 메뉴 Terminal → New Terminal):

claude

이렇게 Claude Code 사용을 VS Code와 연동시켰다면 이제부터는 Claude Code에게 명령을 하여, 결과물을 만들어야 합니다.

이렇게 AI에게 명령을 내리는 것을 프롬프트라고 합니다.

우리는 AI에게 명령을 잘 해야 합니다. 어떤 명령을 내리느냐에 따라 결과물의 품질이 달라집니다.

---

첫 번째 프롬프트 — 블로그 만들기

Claude Code가 실행되면 아래처럼 입력합니다:

Next.js 15와 Tailwind CSS를 사용해서 개인 블로그를 만들어줘.

요구사항:
- App Router 사용
- 마크다운(MDX) 기반 글 작성 시스템
- 카테고리: Build Log, AI Tools, Tutorial, Thoughts
- 다크모드 토글
- SEO 최적화 (sitemap.xml, robots.txt, Open Graph 메타태그)
- 모바일 반응형 디자인
- 1컬럼 리스트 레이아웃 (제목 + 요약 + 날짜)
- Cloudflare Pages에 배포 가능한 구조

블로그 이름: AI Craft Log
도메인: aicraftlog.com

Claude Code가 이 명령을 받으면 자동으로 파일 구조를 만들고, 코드를 작성하고, 필요한 패키지를 설치해줍니다.

해당 프롬프트는 간단히 설명하여 정리한 것이고, 실제로 이 블로그를 완성하기까지 총 24개의 프롬프트를 사용하였습니다.

---

다음 글 예고

다음 글에서는 24개의 프롬프트로 이 블로그를 완성한 전체 과정을 공개합니다.

어떤 순서로 명령했고, 각 단계에서 무엇이 만들어졌는지, 그리고 중간에 어떤 문제가 발생하고 어떻게 해결했는지까지 숨김없이 보여드리겠습니다.

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