·약 41분 읽기
바이브 코딩으로 블로그 만들기 시리즈 코딩을 몰라도 AI와 대화하며 ‘내 소유’ 수익형 웹사이트를 만드는 15일 여정
DAY 02에서 월 100만 원 블로그들의 레이아웃을 뜯어봤습니다. ㄱ자 구조, 광고 황금 위치 4곳, 색상 3가지 규칙. 설계도는 머릿속에 들어갔을 겁니다.
이번 포스팅에서는 그 설계도를 현실로 바꿔줄 AI 코딩 비서를 영입합니다.
비유하자면 이런 겁니다. 어제까지 우리는 건축 도면을 그린 건축주였습니다. 오늘부터는 그 도면을 보고 실제로 집을 지어줄 시공팀을 데려오는 겁니다. 단, 이 시공팀은 인건비가 0원이고, 24시간 대기하며, 한국어로 대화할 수 있습니다.
설치할 프로그램이 3개 있습니다. 15분이면 전부 끝납니다. 순서대로 따라오세요.
시작하기 전에 전체 그림을 먼저 봅시다. ‘이걸 왜 설치하는 건데?’라는 의문이 없어야 손이 빠르게 움직입니다.
| 순서 | 프로그램 | 한 줄 설명 | 비유 |
|---|---|---|---|
| 1 | Node.js | 블로그 코드를 실행시키는 엔진 | 자동차의 엔진 |
| 2 | Git | 코드의 변경 이력을 저장하는 타임머신 | 문서의 ‘버전 관리’ |
| 3 | Cursor | AI가 탑재된 코드 편집기 | 통역사가 붙은 워드프로세서 |
| 4 | GitHub | 코드를 인터넷에 저장하는 창고 | 코드 전용 구글 드라이브 |
Node.js가 없으면 블로그가 내 컴퓨터에서 돌아가지 않습니다. Git이 없으면 나중에 코드를 인터넷에 올릴 수(배포할 수) 없습니다. Cursor가 없으면 AI와 대화하며 코딩할 수 없습니다. GitHub가 없으면 나중에 블로그를 인터넷에 배포할 수 없습니다.
네 개 다 무료입니다. 영원히 무료입니다.
제 블로그에서는 WindowsOS로 실습합니다 이 블로그의 모든 실습은 Windows 운영체제에서 이루어집니다. 참고용으로 MacOS 사용자를 위한 방법도 안내하겠지만, 스크린샷 등은 모두 Windows 운영체제 기준이니 참고하시기 바랍니다.
LTS가 뭔가요? Long Term Support의 약자입니다. ‘오래 관리해줄게’라는 뜻이에요. 최신 버전은 새 기능이 많지만 가끔 불안정합니다. 우리는 블로그를 만드는 거지 Node.js를 실험하는 게 아니니까, 안정 버전을 씁니다.
다운로드된 .msi 파일을 실행합니다.
전부 ‘Next’만 누르세요. 옵션을 바꿀 필요 없습니다. 진짜 그냥 Next → Next → Next → Install → Finish.
.pkg 파일을 실행합니다.설치가 잘 됐는지 확인해봅시다. 지금부터 터미널(명령어 입력 창)이라는 걸 처음 열어봅니다. 겁먹지 마세요. 딱 한 줄만 치면 됩니다.
Windows: 키보드에서 Windows 키 + R → cmd 입력 → 엔터
Mac: Command + Space → ‘터미널’ 입력 → 엔터
검은 화면(혹은 흰 화면)이 뜹니다. 여기에 다음 한 줄을 입력합니다.
node -v
엔터를 치세요. 아래처럼 버전 번호가 나오면 성공입니다.
숫자가 다를 수 있습니다. 숫자가 나오기만 하면 됩니다. 축하합니다. 인생 처음으로 터미널에서 명령어를 실행한 겁니다.
💡 터미널이 무서운 분들께: 터미널은 ‘마우스 대신 키보드로 컴퓨터에게 명령하는 창’입니다. 그리고 바이브 코딩에서 터미널을 직접 쓸 일은 거의 없습니다. AI가 대신 쳐줄 거거든요. 오늘 이후로 터미널에 직접 타이핑하는 일은 손에 꼽을 정도로 적을 겁니다. 안심하세요.
Mac에는 Git이 이미 설치되어 있는 경우가 많습니다. 바로 확인부터 해봅시다.
터미널을 열고 다음을 입력합니다.
git --version
git version 2.xx.x 같은 결과가 나오면 이미 설치되어 있는 겁니다. STEP 3으로 넘어가세요.
만약 ‘Xcode Command Line Tools를 설치하겠습니까?’ 같은 팝업이 뜨면 ‘설치’를 누르세요. Git이 함께 설치됩니다. 몇 분 걸립니다.
다시 터미널(cmd)에서 아래를 입력합니다.
git --version
버전 숫자가 나오면 성공입니다. 벌써 2개 끝났습니다.
Git은 왜 필요한가요? 지금 당장은 안 쓸 것 같아 보이지만, DAY 11에서 블로그를 인터넷에 배포할 때 Git이 없으면 아예 진행이 안 됩니다. 지금 설치해두면 나중에 한 단계를 통째로 건너뛸 수 있습니다. 미래의 나에게 주는 선물이라고 생각하세요.
드디어 오늘의 주인공입니다.
Cursor는 AI가 내장된 코드 편집기입니다. VS Code(개발자들이 가장 많이 쓰는 편집기)를 기반으로 만들어졌는데, 여기에 AI와 대화하는 기능이 통합되어 있습니다.
기존 VS Code + AI 플러그인 조합도 가능하지만, Cursor를 추천하는 이유는 명확합니다.
| VS Code + 플러그인 | Cursor | |
|---|---|---|
| AI 대화 | 별도 설정 필요 | 내장 (바로 사용) |
| 코드 자동 수정 | 복사 → 붙여넣기 | 버튼 한 번으로 적용 |
| 파일 맥락 이해 | 제한적 | 프로젝트 전체 파악 |
| 바이브 코딩 적합도 | ★★★☆☆ | ★★★★★ |
쉽게 말해, VS Code가 ‘빈 메모장 + 따로 고용한 통역사’라면, Cursor는 ‘통역사가 처음부터 같이 앉아있는 사무실’ 입니다.
.exe / Mac: .dmg)Cursor를 처음 열면 몇 가지를 물어봅니다. 당황하지 마세요.
‘Import VS Code Settings?’ → VS Code를 쓴 적 없다면 Skip 회원가입 → 구글 계정 또는 이메일로 가입합니다. (무료 플랜으로 충분) 언어 설정 → 기본 영어 그대로 두세요. AI는 한국어로 대화할 수 있으니 문제없습니다.
설치 끝났으면 다음 화면이 보여야 합니다.
Git과 GitHub. 이름이 비슷해서 헷갈리시죠? 완전히 다른 겁니다.
비유하자면, Git은 일기장이고 GitHub는 일기장을 보관하는 클라우드 금고입니다. 일기장은 내 방에만 있으면 집에 불나면 끝이지만, 클라우드에 백업해두면 어디서든 꺼내볼 수 있죠. 그리고 DAY 11에서 Vercel로 블로그를 배포할 때, Vercel은 GitHub에 올라가 있는 코드를 가져와서 웹사이트로 만들어줍니다. GitHub 없이는 배포가 안 됩니다.
유저네임이 곧 내 주소가 됩니다.
github.com/유저네임으로 프로필 페이지가 만들어지고, 나중에 포트폴리오처럼 쓸 수도 있습니다. 너무 복잡하거나 장난스러운 이름은 피하세요. 블로그 이름과 연관지으면 좋습니다. 예:my-devblog,jisu-codes
GitHub 가입이 끝났으면, 내 컴퓨터에 설치된 Git에게 ‘이 컴퓨터의 주인이 누구인지’ 알려줘야 합니다.
터미널(cmd)을 열고, 아래 두 줄을 한 줄씩 입력합니다. 따옴표 안의 내용만 본인 것으로 바꾸세요.
git config --global user.name "내깃허브유저네임"
git config --global user.email "가입할때쓴이메일@example.com"
예를 들어 유저네임이 jisu-codes이고 이메일이 jisu@gmail.com이라면 이렇게 됩니다.
git config --global user.name "jisu-codes"
git config --global user.email "jisu@gmail.com"
이 명령어는 아무런 응답이 없는 게 정상입니다. 아무 메시지도 안 뜨면 성공한 겁니다. 터미널 세계에서는 ‘침묵이 성공’ 입니다.
잘 등록됐는지 확인하고 싶다면 아래를 입력하세요.
git config --global --list
user.name=jisu-codes
user.email=jisu@gmail.com
이렇게 나오면 완벽합니다.
아직 코드가 없지만, 빈 저장소를 미리 만들어둡시다. 나중에 코드를 올릴 ‘빈 방’을 먼저 마련해두는 겁니다.
Public vs Private? 어느 것이든 상관없습니다. Vercel 무료 배포는 둘 다 지원합니다. 다만 Public으로 해두면 나중에 다른 사람이 참고할 수 있어서, 바이브 코딩 포트폴리오로도 활용할 수 있습니다.
[주의] README, .gitignore, license는 절대 체크하지 마세요. 체크하면 GitHub에 파일이 먼저 생겨버려서, 나중에 내 컴퓨터 코드를 올릴 때 충돌이 납니다. 깨끗한 빈 방으로 만들어야 합니다.
https://github.com/유저네임/my-blog.git
이 주소를 어딘가에 메모해두세요. DAY 11 배포 때 쓸 겁니다. 지금은 여기까지만 하면 됩니다.
자, 프로그램 3개 설치에 GitHub 가입까지 전부 끝났습니다. 이제 AI 비서와 인사를 해봅시다.
먼저, 앞으로 블로그 코드가 저장될 폴더를 하나 만듭니다.
my-blog 으로 합니다.[주의] 폴더 이름은 영어, 소문자, 하이픈(-)만 쓰세요. ‘내블로그’, ‘My Blog’, ‘my blog’ 전부 안 됩니다. 나중에 에러의 원인이 됩니다. 개발 세계에서 폴더 이름에 한글과 띄어쓰기는 ‘금기’입니다.
my-blog 폴더를 선택합니다.Cursor에서 AI와 대화하는 방법은 단축키 하나면 됩니다.
Ctrl + L (Windows)
Cmd + L (Mac)
화면 오른쪽에 채팅 패널이 열립니다. 여기에 한국어로 타이핑하면 됩니다.
채팅창에 다음을 입력해보세요.
안녕! 나는 코딩을 전혀 모르는 초보인데,
너와 함께 수익형 블로그를 만들려고 해.
지금 이 폴더에 블로그 프로젝트를 시작하려면
어떤 순서로 진행하면 좋을지 알려줘.
엔터를 치면 AI가 답변을 시작합니다.
이 순간이 바이브 코딩의 시작점입니다. AI가 구체적인 단계를 제안할 겁니다. 아직 실행하지 않아도 됩니다. 중요한 건 ‘AI와 대화가 된다’ 는 것을 직접 확인하는 겁니다.
AI에게 말하는 방식에 따라 결과물의 품질이 완전히 달라집니다. 같은 요청을 두 가지 방법으로 해보겠습니다.
❌ 개떡 프롬프트 (나쁜 예)
블로그 만들어줘
이렇게 말하면 AI는 ‘어떤 블로그요? 기술 스택은요? 디자인은요?’라며 역질문을 하거나, 자기 마음대로 만들어버립니다. 원하는 결과물이 나올 확률이 낮습니다.
✅ 찰떡 프롬프트 (좋은 예)
수익형 블로그를 만들 거야. 조건은 다음과 같아:
1. 프레임워크: Next.js (App Router)
2. 레이아웃: 본문 70% + 사이드바 30% 2단 구조
3. 반응형: 모바일에서 사이드바는 본문 아래로
4. 색상: 배경 흰색, 글자 #333, 포인트 컬러 파란색 1가지
5. 글꼴 크기: 본문 18px, 줄간격 1.8
6. 필요 기능: 자동 목차(TOC), 카테고리, 인기글 TOP5
7. 마크다운으로 글 작성 가능해야 함
8. 광고 삽입 위치: 제목 아래, 소제목 사이 2곳, 본문 끝
지금 당장 전체 코드를 작성하지 말고,
먼저 폴더 구조와 각 파일의 역할만 정리해서 보여줘.
차이가 느껴지시나요? 두 번째 프롬프트에는 어제 DAY 02에서 정리한 설계 체크리스트가 그대로 들어가 있습니다. 이게 기획을 먼저 한 이유입니다. 기획이 곧 프롬프트가 됩니다.
앞으로 AI에게 요청할 때마다 이 원칙을 떠올리세요.
① 역할을 부여하라 “너는 10년 경력의 프론트엔드 개발자야”처럼 역할을 주면 답변 수준이 달라집니다.
② 조건을 번호로 나열하라 산문으로 길게 쓰면 AI가 조건을 놓칩니다. 번호를 매기면 빠짐없이 반영합니다.
③ 한 번에 하나만 시키라 “블로그 전체를 만들어줘”보다 “헤더 컴포넌트만 만들어줘”가 훨씬 정확한 결과를 냅니다.
④ 출력 형식을 지정하라 “코드로 보여줘”, “표로 정리해줘”, “폴더 구조만 보여줘”처럼 원하는 형식을 말해주세요.
⑤ 모르면 “왜?”라고 물어라 AI가 작성한 코드가 이해가 안 되면 “이 코드에서 3번째 줄은 왜 필요해?”라고 물어보세요. 설명을 놀라울 정도로 잘 해줍니다. 이게 바이브 코딩의 핵심입니다. 코드를 외우는 게 아니라 대화하면서 이해하는 겁니다.
지금 당장 위의 찰떡 프롬프트를 복사해서 Cursor 채팅창에 붙여넣어 보세요. AI의 답변을 읽어보는 것만으로도 ‘아, 이렇게 돌아가는 거구나’라는 감이 올 겁니다. 아직 실행하지 않아도 됩니다. 읽기만 하세요.
걱정하실 분들을 위해 정리합니다. Cursor의 무료 플랜(Hobby)으로 이 시리즈를 전부 따라하는 데 아무 문제 없습니다.
돈을 쓸 필요 없습니다. 블로그가 완성되고 수익이 나기 시작한 후에 Pro로 업그레이드해도 늦지 않습니다.
✅ Node.js 설치 완료 → "node -v"로 확인
✅ Git 설치 완료 → "git --version"으로 확인
✅ Cursor 설치 완료 → 회원가입 + 첫 실행
✅ GitHub 가입 완료 → 저장소(my-blog) 생성 + Git 연결
✅ 작업 폴더 생성 → my-blog 폴더
✅ AI와 첫 대화 → 개떡 vs 찰떡 프롬프트 체험
이 코너는 매 회 해당 단계에서 자주 겪는 문제와 해결법을 다룹니다.
에러 1: node -v 입력했는데 ‘'node'은(는) 내부 또는 외부 명령이 아닙니다’
→ Node.js 설치 후 터미널(cmd)을 새로 열지 않아서 생기는 문제입니다. 열려 있는 cmd를 닫고, 새 cmd를 열어서 다시 시도하세요. 이래도 안 되면 컴퓨터를 재부팅하세요. 설치 프로그램이 ‘환경 변수’라는 걸 등록하는데, 재부팅해야 적용되는 경우가 있습니다.
에러 2: Mac에서 ‘permission denied’ 에러가 뜬다
→ 명령어 앞에 sudo를 붙여보세요. 예: sudo node -v. 비밀번호를 물어보면 Mac 로그인 비밀번호를 입력합니다. (타이핑해도 화면에 안 보이는 게 정상입니다. 그냥 치고 엔터 누르세요.)
에러 3: GitHub 가입할 때 유저네임이 이미 사용 중이라고 나온다
→ 유저네임은 전 세계에서 유일해야 합니다. 인기 있는 이름은 이미 선점되어 있으니, 뒤에 숫자나 하이픈을 붙여보세요. 예: jisu-codes 대신 jisu-codes-blog 또는 jisu-dev-2025. 한 번 정하면 나중에 바꿀 수 있으니 너무 고민하지 마세요.
에러 4: git config 명령어를 쳤는데 에러가 난다
→ 따옴표(")를 빼먹었을 가능성이 높습니다. git config --global user.name jisu-codes처럼 따옴표 없이 치면 이름에 띄어쓰기가 있을 때 에러가 납니다. 반드시 `"jisu-codes"` 형태로 따옴표를 감싸세요. 또한 이메일 주소는 GitHub 가입에 쓴 이메일과 동일해야 나중에 커밋 이력이 정상적으로 연결됩니다.
에러 5: Cursor가 실행은 되는데 영어라서 뭐가 뭔지 모르겠다
→ 정상입니다. Cursor는 영어 인터페이스가 기본입니다. 하지만 걱정 마세요. 우리가 주로 쓸 건 채팅창(Ctrl+L) 하나뿐이고, 거기서는 한국어로 대화할 수 있습니다. 나머지 메뉴는 필요할 때마다 알려드릴 테니 지금 전부 이해하려고 하지 않아도 됩니다. AI한테 “Cursor에서 파일 새로 만드는 법 알려줘”라고 물어봐도 됩니다. AI 코딩 비서의 첫 번째 활용법은, AI 코딩 비서 사용법을 AI에게 물어보는 겁니다.
애드센스 수익 공식과 레이아웃의 관계, 월 100만 원대 블로그 공통 패턴 분석, 스스로 레이아웃을 뜯어보는 체크리스트까지.
블로그 수익 이야기 뒤에 숨은 기술 장벽, 비개발자가 AI·바이브 코딩으로 소유형 블로그를 만든 경험, 연재에서 다룰 범위와 현실적인 기대치까지 정리한다.
바이브 코딩(Vibe Coding)의 뜻과 탄생 배경, 노코드·워드프레스와의 차이를 표로 비교하고, 부담 없이 시작하기 좋은 이유를 짚어본다.