주의!

글쓴이는 Next.js로 웹사이트를 개발해본 경험이 있습니다. 그래서 처음 시작하시는 분들은 진짜 2분은 아니고 그것보다 더 걸릴 수 있어요.

제가 처음 블로그를 만들었을 때는 여러가지 의사결정과 시행착오로 첫 배포를하고 웹사이트에 블로그가 보이는데 까지 한달이 넘게 걸렸답니다. 마크다운 렌더링, 파일 호스팅, 디자인, 도메인 설정 등 정말 모든 것을 하나 하나 수작업으로 해야했었어요.

하지만 지금은 AI의 발전과 개발경험을 살려 몇 분만에 그 과정을 모두 완성할 수 있게 되었어요. 나만의 블로그를 만드시는 모든 분들께 의사결정에 도움이 될 수 있도록 저의 노하우를 공유드립니다.

Claude Code로 1분만에 블로그 개발하기

개발할 때 가장 좋은 AI, 개발자들의 원픽 AI 코드 툴인 Claude Code를 사용하면 정말 1분 만에 블로그 템플릿을 만들 수 있습니다. 다른 블로그 만든 분들 사례를 봤을 때 워드프레스로 코드 없이 만드는 방법도 있습니다.

저는 Next.js개발 및 유지보수 경험이 있기 때문에 Claude Code와 대화가 더 잘 될 것 같아 Next.js를 사용했습니다. Claude Code 설치 방법은 터미널을 열고 공식 문서에 있는 명령어를 환경에 맞게 입력하면 됩니다.

맥 노트북 기준으로 터미널을 열고 다음 명령어 실행:

# Claude Code 설치
curl -fsSL https://claude.ai/install.sh | bash

# Claude Code 실행
claude

# 계정에 로그인
/login

아직 구독하지 않은 경우 구독 웹페이지로 이동할 텐데요. 저는 바로 1년 구독으로 결제했습니다. 결제 후 브라우저를 닫으면 터미널에서 바로 Claude Code에게 일을 시킬 수 있어요.

생각해보니 처음 블로그를 개발할 때만 필요해서 1개월만 구독을 했다면 더 좋았을 것 같네요. 본격적으로 개발을 시켜보겠습니다. 터미널에서 클로드코드를 실행하면 다음과 같이 보입니다. claude code 시작화면

아래 대화창에 다음과 같이 명령해봅니다.

"Next.js로 블로그를 만들어줘. 포스트 내용은 마크다운 파일로 관리할 거야"

이제 제대로 만들어졌는지 확인해보기 위해 로컬서버를 열어봐야해요.

# 프로젝트 실행
npm run dev

프로젝트 실행 후 브라우저에서 localhost:3000을 실행합니다. 로컬서버를 여는 방법을 몰라도, claude code에게 물어보면 실행 방법을 알려줍니다.

claude code 시작화면

하니 정말 1분 내에 그럴싸한 블로그가 완성되었어요.

디자인도 따로 할 필요가 없고 CSS 삽질을 하지 않아도 돼요.

"한국 블로그형 디자인을 적용해줘. 폰트는 Noto Sans로 설정해줘"

간단하게만 말해도 바로 적용이 됩니다.

모든 틀이 준비되었을 때 마크다운에 첫 포스트를 씁니다.

앗, 마크다운 표 형식이 제대로 렌더링되지 않고 텍스트가 너무 못생겼어요.

"포스트 내용이 못생기게 렌더링되고 있어. 한국 블로그 포스트 스타일에 맞게 CSS 및 렌더링 로직을 수정해줘. 표가 제대로 안 나옴."

Claude Code가 원인 분석부터 해결까지 싹 해줍니다.

claude code에게 일 시키기

이 외에도 커스텀하고 싶은 것들을 시키면 클로드 코드가 알아서 깔끔하고 센스있게 작업해줍니다.

  • 네비게이션 메뉴 구성을 어쩌구 저쩌구 바꿔줘.
  • 블로그 이름을 바꿔줘.
  • 포스트 하단에 다음 포스트로 가는 버튼을 추가해줘.

웬만한 틀이 모두 잡혔습니다. 이제는 글을 쓰고 git push만 하면 바로 블로그 글이 올라가는 상태가 되었어요.

Vercel로 1분만에 사이트 배포하기

약 4년 전, 블로그를 호스팅하기 위해 가비아에서 도메인을 구매했습니다.

원하는 도메인만 고르고 금액을 결제하면 저절로 될 줄 알았는데, 막상 열어보니 설정해야 할 항목이 너무 많았습니다. DNS 레코드, 네임서버 변경... 처음 접하는 용어들 때문에 시행착오가 많았어요.

저는 Next.js 기반의 블로그 소스를 GitHub에 올려서 관리하기 때문에 Vercel이라는 호스팅 서비스를 사용합니다. Vercel은 Next.js를 만든 회사에서 운영하는 서비스라 궁합이 좋고 배포도 간편합니다.

Vercel에서 도메인 구매하기

Vercel에서 GitHub과 연동해 프로젝트를 연결하면 .vercel.app이라는 기본 서브도메인이 자동으로 부여됩니다. 나만의 커스텀 도메인을 사용하고 싶다면 Vercel 대시보드 사이드바의 Domains 메뉴에서 바로 구매할 수 있습니다.

Vercel 프로젝트 사이드바 — Domains 메뉴

가비아와 달리 별도의 DNS 설정 없이 Vercel 안에서 모든 과정이 끝납니다. Domains 메뉴에 들어가면 검색창과 함께 Add Existing(기존 도메인 연결)과 Buy(신규 구매) 버튼이 나타납니다.

Vercel Domains — 검색창과 구매 버튼

검색창에 원하는 도메인을 입력하면 가격과 사용 가능 여부를 바로 확인할 수 있습니다.

lifewithyuza.blog 검색 결과 — $5.99

Vercel에서 구매하면 DNS 설정이 자동으로 완료되기 때문에 처음 시작하는 분께는 Vercel에서 바로 구매하는 방법을 추천합니다. 이미 다른 곳에서 도메인을 보유하고 있다면 Add Existing 버튼으로 연결하면 됩니다.