Tag

바이브코딩

Browsing

코딩을 처음 접하시는 분도 괜찮습니다. 이 글은 Mac(macOS)에서 바이브코딩·Cursor 실습을 시작하기 전에 꼭 설치해야 하는 프로그램 3가지—Node.js, Git, Cursor를 처음부터 끝까지 따라 할 수 있도록 정리했습니다.

스크린샷과 영상을 보면서, 한 단계씩 그대로 진행해 주세요. Node.js, Git, Cursor 설치를 모두 마친 뒤, 마지막 설치 확인까지 반드시 완료해 주세요.

  • 대상: 비개발자 / Mac(macOS) 사용자
  • 예상 소요 시간: 20-40분 (완전 초보자 기준)
  • 준비물: Mac 기기 로그인 비밀번호, 인터넷 연결, Google 계정

Windows 사용자는 Windows 설치 가이드를 참고해 주세요.


먼저 알아두면 좋은 것

바이브코딩으로 앱이나 웹 페이지를 만들려면, Mac 안에 “만들고 실행할 수 있는 환경”이 갖춰져 있어야 합니다. 마치 요리를 하려면 배관 공사와 가스 공사가 있어야 하는 것과 같습니다.

이번에 설치하는 도구는 Node.js, Git, Cursor 세 가지입니다. 이름만 들어보면 낯설 수 있는데, 각각 어떤 프로그램인지, 바이브코딩에서 왜 필요한지만 먼저 짚고 넘어가겠습니다.

Node.js — 만든 앱을 Mac에서 돌려 주는 엔진

Node.js는 웹·앱 개발에서 쓰는 실행 엔진입니다. 바이브코딩으로 AI가 만들어 준 코드를 “실제로 내 Mac에서 실행”하려면 이 엔진이 있어야 합니다. 자동차에 엔진이 없으면 출발할 수 없듯, Node.js 없이는 npm run dev 같은 명령으로 만든 결과물을 미리보기할 수 없습니다.

바이브코딩 실습에서는 프로젝트를 시작할 때, 개발 서버를 띄울 때, 필요한 라이브러리를 받아올 때 거의 항상 Node.js가 뒤에서 동작합니다. 직접 코드를 많이 작성하지 않아도, Cursor 터미널에 입력하는 명령어 대부분이 Node.js 환경을 전제로 합니다.

Node.js를 설치하면 npm(노드 패키지 매니저)도 함께 설치됩니다. npm은 “이 프로젝트에 필요한 부품을 인터넷에서 받아와라”고 Mac에 지시하는 도구입니다. 실습 중 npm install처럼 한 줄로 추가 도구를 설치할 때 씁니다. 처음에는 Node.js와 npm이 한 세트라고만 기억하셔도 충분합니다.

설치가 끝나면 Cursor 터미널에서 아래 같은 명령어를 쓰게 됩니다. 지금은 외울 필요 없고, “Node.js가 있어야 이런 명령이 된다” 정도만 알아두세요.

  • npm install — 프로젝트에 필요한 패키지(부품)를 한꺼번에 받아옴
  • npm run dev — 만든 웹·앱을 내 Mac에서 미리보기 (주소는 보통 localhost:3000)
  • npx — 별도 설치 없이 도구를 한 번 실행 (프로젝트 생성 등)

터미널은 이런 명령어를 입력하는 창입니다. Cursor 하단 Terminal 탭이 바로 그 역할을 합니다.

Git — 파일 변경 기록을 남기고, 되돌리고, 공유하는 도구

Git은 파일의 변경 이력을 저장·관리하는 프로그램입니다. 워드에서 “버전 기록”으로 예전 문서를 되돌리듯, 코드 파일도 “어제 상태”, “일주일 전 상태”로 되돌릴 수 있게 해 줍니다. 실습 중 AI가 코드를 수정하다가 뭔가 꼬였을 때, Git이 있으면 이전 버전으로 안전하게 돌아갈 수 있습니다.

바이브코딩 환경에서 Git은 두 가지 역할을 합니다. 첫째, 내 Mac에서 프로젝트 폴더의 변경 사항을 기록합니다. 둘째, 나중에 GitHub 같은 서비스와 연결하면 만든 결과물을 온라인에 올리거나, 다른 사람과 공유할 수 있습니다. 포트폴리오를 웹에 배포하는 실습에서도 Git이 빠지지 않습니다.

Mac에는 Xcode 명령줄 도구에 Git이 포함된 경우가 많지만, 실습에서는 Homebrew로 최신 Git을 설치하는 방법을 안내합니다.

Cursor — AI와 함께 코드를 작성하는 실습용 편집기

Cursor는 코드를 작성·수정하는 프로그램(코드 편집기)입니다. 겉모습은 VS Code와 비슷하지만, 옆에 AI 채팅이 붙어 있어서 “로그인 페이지 만들어줘”, “버튼 색을 파란색으로 바꿔줘”처럼 말로 요청하면서 작업할 수 있습니다. 바이브코딩의 핵심 도구가 바로 이 Cursor입니다.

실습에서는 Cursor 한곳에서 거의 모든 일이 일어납니다. AI에게 지시하고, 생성된 코드를 확인하고, 터미널에 명령어를 입력하고, 파일을 저장하는 작업이 모두 Cursor 안에서 이루어집니다. 메모장이나 워드로는 코드 실행·AI 대화·터미널 사용이 한 번에 되지 않기 때문에, Cursor 설치는 선택이 아니라 필수입니다.

Cursor는 무료로 시작할 수 있고, Google 또는 GitHub 계정으로 로그인하면 바로 쓸 수 있습니다. 유료 플랜은 AI 사용량이 많아졌을 때 검토하시면 됩니다. 실습 입문 단계에서는 무료 범위로도 충분합니다.


세 도구를 한 번 설치해 두면, 이후 실습에서 필요한 다른 프로그램은 대부분 명령어 한두 줄로 추가할 수 있습니다. 지금은 각 도구가 “왜 필요한지” 정도만 이해하셨다면, 아래 설치 단계로 넘어가 주세요.


설치 전 준비 — 계정 만들기

프로그램을 설치하기 전에, Cursor·GitHub·Vercel에 미리 회원가입해 주세요. Cursor 로그인과 이후 GitHub 연동·배포 실습에 필요합니다. 이미 계정이 있다면 이 단계는 건너뛰셔도 됩니다.

  • Cursor 회원가입 — Google 또는 GitHub 계정으로 가입할 수 있습니다. (실습에서는 Google 계정 로그인을 권장합니다.)
  • GitHub 회원가입 — 코드 저장·공유·배포에 쓰는 계정입니다. 무료 계정으로 충분합니다.
  • Vercel 회원가입 — 만든 웹사이트를 인터넷에 올리는(배포) 서비스입니다. GitHub 계정으로 가입하는 것을 권장합니다.

※ GitHub이 아니라 Google 계정으로 Vercel에 가입했다면? → 아래 자주 겪는 문제 — Vercel을 Google로 가입한 경우를 참고해 주세요.


설치 체크리스트

아래 순서대로 설치를 진행해 주세요.

  • ☐ 1. Node.js 설치
  • ☐ 2. npm 업데이트
  • ☐ 3. Git 설치 (Homebrew)
  • ☐ 4. Cursor 설치
  • ☐ 5. Cursor 터미널에서 Git 설정

설치

Node.js → npm 업데이트 → Git(Homebrew) → Cursor 순서로 설치합니다. Git 사용자 설정(5단계)까지 마치면 설치 확인으로 넘어갑니다.

1. Node.js 설치

Node.js는 바이브 코딩으로 만든 앱을 내 Mac에서 실행할 때 필요한 기본 엔진입니다. 웹·앱 개발 실습의 거의 모든 도구가 Node.js 위에서 동작합니다.

아래 영상을 보면서 진행해도 되고, 글의 스크린샷 순서대로 따라와도 됩니다.

1-1. Node.js 공식 사이트 접속

  1. 웹 브라우저(Safari, Chrome 등)를 엽니다.
  2. 주소창에 https://nodejs.org/ko 를 입력하고 Enter를 누릅니다.
  3. 한국어 페이지가 열리면 준비 완료입니다.

1-2. 설치 파일 다운로드

  1. 페이지 중앙의 Get Node.js® 버튼을 클릭합니다.
Node.js 다운로드 버튼

LTS / Current 중 뭘 골라야 하나요?

공식 페이지에서 직접 고를 경우 초록색 LTS 버튼을 누르세요.

LTS는 ‘가장 안정적인 버전’이라는 뜻이라, 비개발자에게 딱 맞습니다.

Current는 최신 실험 버전이라 실습용으로는 권장하지 않습니다.

Get Node.js® 버튼 하나만 보이면 LTS가 이미 선택된 상태이므로, 그대로 누르시면 됩니다.

  1. macOS용 설치 프로그램(.pkg)이 자동으로 다운로드됩니다. 파일 이름은 node-v○○.○.○.pkg 형태입니다.
Mac Node.js pkg 다운로드
  1. 브라우저 하단이나 다운로드 폴더에서 .pkg 파일을 찾습니다.

1-3. Node.js 설치 프로그램 실행

  1. 다운로드한 .pkg 파일을 더블클릭해 실행합니다.
Mac Node.js pkg 설치
  1. “확인되지 않은 개발자” 경고가 나오면, 시스템 설정 → 개인정보 보호 및 보안에서 “그래도 열기”를 선택합니다.
  2. 설치 마법사가 열리면 계속(Continue) → 동의(Agree) → 설치(Install) 순서로 진행합니다.
  3. Mac 로그인 비밀번호를 입력하라는 창이 나오면 입력합니다. (입력 중 화면에 점이 표시되지 않아도 정상입니다.)
  4. 설치가 끝나면 닫기(Close)를 누릅니다.

Node.js 설치가 끝나면 npm 업데이트(2단계)로 넘어갑니다.


2. npm 업데이트

npm은 Node.js와 함께 설치되는 패키지 관리 도구입니다. Mac에서는 Node.js 설치 직후 npm을 최신 버전으로 한 번 올려 두면, 이후 실습에서 오류가 줄어드는 경우가 많습니다.

2-1. 터미널 열기

  1. 키보드 Cmd + Space를 눌러 Spotlight 검색을 엽니다.
  2. terminal을 입력하고 Enter를 눌러 터미널 앱을 실행합니다.
Mac Spotlight에서 terminal 실행

Cursor를 이미 설치했다면 Cursor 터미널(Cmd + J)을 써도 됩니다. Node.js 설치 직후에는 Mac 기본 터미널로 진행하는 것이 가장 단순합니다.

2-2. npm 최신 버전으로 업데이트

터미널에 아래 명령어를 입력하고 Enter를 누릅니다.

sudo npm install -g npm@latest

Mac 로그인 비밀번호를 입력하라는 메시지가 나오면 입력합니다. 입력 중 화면에 글자가 보이지 않는 것이 정상입니다.

업데이트가 끝나면 아래로 버전을 확인합니다.

npm -v

11.9.0처럼 버전 번호가 출력되면 npm 업데이트가 완료된 것입니다. 숫자가 조금 달라도 v10 이상이면 실습에 무리 없습니다.

Mac npm -v 확인

3. Git 설치 (Homebrew)

Git은 실습 중 만든 파일의 변경 이력을 저장하고, 나중에 GitHub 같은 서비스와 연결할 때 필요한 도구입니다. Mac에서는 Homebrew(홈브류)라는 패키지 관리 도구를 통해 Git을 설치합니다.

3-1. Git이 이미 있는지 확인 (선택)

터미널에 아래를 입력해 보세요.

git --version

git version 2.x.x처럼 버전이 나오면 Git이 이미 설치된 상태입니다. 그래도 Homebrew Git을 설치하면 최신 버전을 쓸 수 있어 권장합니다. 버전이 나오지 않거나 “command not found”가 나오면 아래 Homebrew 설치를 진행하세요.

3-2. Homebrew 설치

터미널에 아래 명령어를 한 줄로 복사해 붙여 넣고 Enter를 누릅니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

설치 중 Mac 로그인 비밀번호를 물어볼 수 있습니다. 화면 안내에 따라 Enter를 눌러 진행합니다.

Apple Silicon Mac(M1/M2/M3/M4)인 경우, 설치 마지막에 “Next steps”로 PATH 설정 명령이 표시됩니다. 안내에 나온 두 줄(예: echo >> ~/.zprofile …, eval "$(/opt/homebrew/bin/brew shellenv)")을 그대로 복사해 터미널에 실행한 뒤, 터미널을 껐다 켜 주세요.

Intel Mac은 대부분 추가 PATH 설정 없이 바로 brew 명령을 쓸 수 있습니다.

3-3. Git 설치

Homebrew 설치가 끝났다면, 터미널에 아래를 입력합니다.

brew install git

설치가 완료되면 버전을 확인합니다.

git --version

git version 2.x.x처럼 출력되면 Git 설치 성공입니다.


4. Cursor 설치

Cursor는 바이브 코딩 실습에서 사용할 AI 코드 편집기입니다. VS Code와 비슷한 화면에 AI 채팅이 붙어 있어, “이 기능 만들어줘”처럼 말로 요청하면서 코드를 작성할 수 있습니다.

4-1. 다운로드 및 설치

  1. Cursor 다운로드 페이지에 접속합니다.
  2. Mac용 Download 버튼을 눌러 설치 파일을 받습니다.
  3. 다운로드한 .dmg 파일을 열고, Cursor 아이콘을 Applications(응용 프로그램) 폴더로 드래그합니다.
  4. Applications에서 Cursor를 실행합니다. “확인되지 않은 개발자” 경고가 나오면, Cursor 아이콘을 Control+클릭 → 열기를 선택합니다.

4-2. 첫 실행 및 로그인

  1. 처음 실행하면 Google 또는 GitHub 계정으로 로그인하라는 화면이 나옵니다. Google 계정으로 로그인해 주세요.
  2. 로그인 후 기본 단축키 안내, 테마 선택, 한국어 설정 등 초기 설정 화면이 나올 수 있습니다. 기본값으로 두거나, 한국어를 선호하시면 Language에서 Korean을 선택하시면 됩니다.

4-3. Agent 창 → Editor 창으로 바꾸기

Cursor를 처음 실행하면 Agent(에이전트) 화면이 먼저 열리는 경우가 많습니다. Agent 화면은 AI와 대화하는 데 특화된 레이아웃이고, 실습에서는 파일 목록·코드 편집·터미널이 함께 보이는 Editor(에디터) 화면을 주로 사용합니다. Git 설정(5단계)과 터미널 작업을 하려면 Editor로 바꿔 두는 것이 편합니다.

Editor로 전환하는 방법은 다음과 같습니다.

  1. Cursor 창 우측 상단에 있는 Editor window 또는 IDE 버튼을 클릭합니다. 또는 상단 메뉴 바에서 File → Open IDE(또는 Open Editor Window)를 선택해도 됩니다.
  2. 한 번 Editor 화면으로 바꾼 뒤부터는 키보드 Cmd + E로 Agent ↔ Editor를 빠르게 오갈 수 있습니다.

Editor 화면이 열리면 왼쪽에 파일 탐색기, 가운데에 코드 편집 영역, 아래에 터미널(Cmd + J)을 둘 수 있습니다. 설치 확인·Git 설정 단계에서는 Editor 화면에서 진행해 주세요.


5. Cursor 터미널에서 Git 설정

Git을 Cursor 안에서 바로 쓰려면, “내 이름과 이메일”을 Git에 한 번 알려 주어야 합니다. GitHub에 올릴 때 누가 작업했는지 기록되도록 하는 설정입니다.

5-1. 터미널 열기

  1. Cursor를 실행합니다. Agent 화면이 열려 있다면 위 4-3단계대로 Editor 화면으로 전환합니다.
  2. 키보드 Cmd + J를 누릅니다. 화면 아래쪽에 패널이 열립니다.
  3. 패널 상단 탭에서 Terminal을 클릭합니다.
Cursor 하단 패널에서 Terminal 선택
  1. 터미널 창에 % 또는 $로 시작하는 줄과 깜빡이는 커서가 보이면 준비 완료입니다.

5-2. Git 사용자 정보 설정

아래 명령어에서 "SIREAL", "sireal@example.com" 부분을 본인 이름·이메일로 바꿔, 한 줄씩 입력하고 Enter를 누릅니다.

git config --global user.name "SIREAL"
git config --global user.email "sireal@example.com"
git config --global init.defaultBranch main
git config --global credential.helper store

각 줄이 하는 일:

명령어설명
user.nameGit 커밋(저장 기록)에 표시될 이름. 영문 권장
user.emailGit에 등록할 이메일. GitHub 쓸 예정이면 GitHub 가입 이메일과 맞추면 편합니다
init.defaultBranch main새 프로젝트의 기본 브랜치 이름을 main으로 설정
credential.helper storeGitHub 등 로그인 정보를 Mac에 저장해, 매번 비밀번호를 안 물어보게 함

따옴표 " 안에 이름·이메일을 넣는 것을 잊지 마세요. 입력 후 아무 메시지가 없이 다음 줄로 넘어가면 정상입니다.

5-3. 터미널 화면 정리 (선택)

clear
Git config 설정 후 터미널 화면

설치 확인

1~5단계 설치가 모두 끝났다면, Cursor 터미널에서 프로그램이 제대로 설치됐는지 확인합니다.

6. Node.js 설치 확인

Cursor 터미널에 아래 명령어를 입력하고 Enter를 누릅니다.

node -v

정상적으로 설치되었다면 v25.6.1처럼 v로 시작하는 버전 번호가 출력됩니다. 숫자가 조금 다르면 괜찮습니다. v와 숫자가 보이면 Node.js 설치 성공입니다.

Mac node -v 확인

7. npm 설치 확인

npm -v

11.9.0처럼 버전 번호가 출력되면 npm도 정상입니다.

Mac npm -v 확인

8. Git·전체 설치 확인

Cursor 터미널에서 아래 명령어를 하나씩 입력합니다.

git -v
node -v
npm -v

각 명령마다 버전 정보가 출력되면 설치가 모두 완료된 것입니다. 예시:

  • git version 2.47.0
  • v25.6.1
  • 11.9.0

숫자는 Mac마다 조금 다를 수 있습니다. “버전 번호가 나온다”는 것만 확인하시면 됩니다.

세 가지 모두 버전이 보이면 Mac 바이브코딩 실습 환경 준비가 끝났습니다. Cursor를 열고 바로 실습을 시작하시면 됩니다.

설치했는데 버전 정보가 나오지 않을 때

  1. Cursor를 완전히 종료한 뒤 다시 실행합니다. 메뉴 바 Cursor → Quit Cursor(또는 Cmd + Q)로 종료합니다.
  2. 그래도 안 되면 Mac을 재시작합니다. Homebrew 설치 직후에는 PATH가 반영되지 않은 경우가 있습니다.
  3. Apple Silicon Mac에서 brew 또는 git 명령이 안 되면, Homebrew 설치 마지막에 안내된 PATH 설정 명령을 다시 실행한 뒤 터미널을 껐다 켜 보세요.
  4. 그래도 해결되지 않으면 Cursor 에이전트 패널을 열어 터미널 오류를 복사해 질문합니다.

Cursor 에이전트 패널 여는 방법:

  • Cursor 창 우측 상단에서 톱니바퀴(설정) 바로 왼쪽 Agent(에이전트) 아이콘을 클릭합니다.
  • 또는 키보드 Cmd + Option + B를 눌러 AI 채팅(에이전트) 패널을 열거나 닫습니다.

자주 겪는 문제

node, npm, git 명령어가 인식되지 않는 경우

  1. Cursor → Quit Cursor(Cmd + Q)로 완전히 종료한 뒤 재실행합니다.
  2. node -v, npm -v, git -v를 다시 입력합니다.
  3. 그래도 안 되면 Mac을 재시작합니다.
  4. Homebrew로 설치한 Git만 문제일 때는 brew install git을 다시 실행합니다.
  5. Node.js만 문제일 때는 nodejs.org/ko에서 .pkg를 다시 설치합니다.

Homebrew 설치 중 오류가 나는 경우

  • “Need sudo access” 메시지가 나오면 Mac 관리자 비밀번호를 입력합니다.
  • 네트워크 오류가 나면 Wi-Fi 연결을 확인하고 다시 시도합니다.
  • 회사 Mac에서 설치가 막히면 IT 담당자에게 Homebrew·Node.js·Cursor 설치 권한을 요청하세요.

brew: command not found

Apple Silicon Mac에서 Homebrew 설치 후 PATH 설정을 하지 않으면 발생합니다. 설치 마지막에 표시된 Next steps 명령 두 줄을 터미널에 실행한 뒤, 터미널을 껐다 켜 주세요.

Cursor 로그인이 안 되는 경우

  • 회사 네트워크·VPN에서 cursor.com 접속이 차단될 수 있습니다. VPN을 끄거나, 다른 네트워크(핫스팟 등)에서 시도해 보세요.
  • Google 로그인이 안 되면 GitHub 계정으로 시도해 보세요.

Vercel을 Google로 가입한 경우 — GitHub 계정 연동하기

Vercel을 Google 계정으로 먼저 만들었다면, 배포 실습 전에 GitHub 계정을 같은 Vercel 계정에 연결해 주세요. GitHub으로 다시 새로 가입하면 계정이 두 개로 나뉠 수 있으니, 기존 계정에 연동하는 방식을 권장합니다.

1. 브라우저에서 Vercel기존에 쓰던 Google 계정으로 로그인합니다.

2. 우측 상단 프로필 아이콘 → Account Settings(계정 설정)을 엽니다. 또는 vercel.com/account로 바로 이동합니다.

3. Authentication 항목에서 GitHubConnect(연결) 버튼을 클릭합니다.

4. GitHub 로그인·권한 승인 화면이 나오면, 실습에 쓸 GitHub 계정으로 로그인한 뒤 Authorize(승인)합니다.

5. 다시 Account Settings로 돌아와 Login Connections에 GitHub이 연결되어 있으면 완료입니다.

이후 프로젝트를 배포할 때 Import Git Repository 화면에서 GitHub 저장소가 보이면 정상적으로 연동된 것입니다. GitHub이 보이지 않으면 위 연동을 다시 확인하거나, 배포 화면에서 GitHub Install/Configure를 눌러 권한을 추가해 주세요.


다음에 할 일

  1. Cursor를 실행하고, 새 폴더를 열어 실습 프로젝트를 시작합니다.
  2. Windows를 쓰는 분은 Windows 설치 가이드를 참고해 주세요.
  3. 설치 중 막히는 부분이 있으면 시리얼 블로그 댓글이나 네이버 카페에 질문을 남겨 주세요.

여기까지 완료하셨다면, Mac에서 바이브코딩을 시작할 준비가 끝났습니다.

작성: 전시진 | 시리얼(Sireal)

코딩을 처음 접하시는 분도 괜찮습니다. 이 글은 Windows PC에서 바이브코딩·Cursor 실습을 시작하기 전에 꼭 설치해야 하는 프로그램 3가지—Node.js, Git, Cursor를 처음부터 끝까지 따라 할 수 있도록 정리했습니다.

스크린샷과 영상을 보면서, 한 단계씩 그대로 진행해 주세요. Node.js, Git, Cursor 설치를 모두 마친 뒤, 마지막 설치 확인까지 반드시 완료해 주세요.

  • 대상: 비개발자 / Windows 사용자
  • 예상 소요 시간: 20-40분
  • 준비물: PC 관리자 권한, 인터넷 연결, Google 계정

Mac 사용자는 Mac 설치 가이드를 참고해 주세요.


먼저 알아두면 좋은 것

바이브코딩으로 앱이나 웹 페이지를 만들려면, PC 안에 “만들고 실행할 수 있는 환경”이 갖춰져 있어야 합니다. 마치 요리를 하려면 배관 공사와 가스 공사가 있어야 하는 것과 같습니다.

이번에 설치하는 도구는 Node.js, Git, Cursor 세 가지입니다. 이름만 들어보면 낯설 수 있는데, 각각 어떤 프로그램인지, 바이브코딩에서 왜 필요한지만 먼저 짚고 넘어가겠습니다.

Node.js — 만든 앱을 PC에서 돌려 주는 엔진

Node.js는 웹·앱 개발에서 쓰는 실행 엔진입니다. 바이브코딩으로 AI가 만들어 준 코드를 “실제로 내 컴퓨터에서 실행”하려면 이 엔진이 있어야 합니다. 자동차에 엔진이 없으면 출발할 수 없듯, Node.js 없이는 npm run dev 같은 명령으로 만든 결과물을 미리보기할 수 없습니다.

바이브코딩 실습에서는 프로젝트를 시작할 때, 개발 서버를 띄울 때, 필요한 라이브러리를 받아올 때 거의 항상 Node.js가 뒤에서 동작합니다. 직접 코드를 많이 작성하지 않아도, Cursor 터미널에 입력하는 명령어 대부분이 Node.js 환경을 전제로 합니다.

Node.js를 설치하면 npm(노드 패키지 매니저)도 함께 설치됩니다. npm은 “이 프로젝트에 필요한 부품을 인터넷에서 받아와라”고 PC에 지시하는 도구입니다. 실습 중 npm install처럼 한 줄로 추가 도구를 설치할 때 씁니다. 처음에는 Node.js와 npm이 한 세트라고만 기억하셔도 충분합니다.

설치가 끝나면 Cursor 터미널에서 아래 같은 명령어를 쓰게 됩니다. 지금은 외울 필요 없고, “Node.js가 있어야 이런 명령이 된다” 정도만 알아두세요.

  • npm install — 프로젝트에 필요한 패키지(부품)를 한꺼번에 받아옴
  • npm run dev — 만든 웹·앱을 내 PC에서 미리보기 (주소는 보통 localhost:3000)
  • npx — 별도 설치 없이 도구를 한 번 실행 (프로젝트 생성 등)

터미널은 이런 명령어를 입력하는 창입니다. Cursor 하단 Terminal 탭이 바로 그 역할을 합니다.

Git — 파일 변경 기록을 남기고, 되돌리고, 공유하는 도구

Git은 파일의 변경 이력을 저장·관리하는 프로그램입니다. 워드에서 “버전 기록”으로 예전 문서를 되돌리듯, 코드 파일도 “어제 상태”, “일주일 전 상태”로 되돌릴 수 있게 해 줍니다. 실습 중 AI가 코드를 수정하다가 뭔가 꼬였을 때, Git이 있으면 이전 버전으로 안전하게 돌아갈 수 있습니다.

바이브코딩 환경에서 Git은 두 가지 역할을 합니다. 첫째, 내 PC에서 프로젝트 폴더의 변경 사항을 기록합니다. 둘째, 나중에 GitHub 같은 서비스와 연결하면 만든 결과물을 온라인에 올리거나, 다른 사람과 공유할 수 있습니다. 포트폴리오를 웹에 배포하는 실습에서도 Git이 빠지지 않습니다.

코딩을 처음 시작하는 분에게 Git은 “왜 필요하지?” 싶을 수 있습니다. 하지만 바이브코딩은 AI가 코드를 빠르게 바꾸기 때문에, 기록 없이 작업하면 “언제부터 잘못됐는지” 찾기가 어렵습니다. Git은 그런 상황을 막아 주는 안전벨트 같은 존재입니다.

Cursor — AI와 함께 코드를 작성하는 실습용 편집기

Cursor는 코드를 작성·수정하는 프로그램(코드 편집기)입니다. 겉모습은 VS Code와 비슷하지만, 옆에 AI 채팅이 붙어 있어서 “로그인 페이지 만들어줘”, “버튼 색을 파란색으로 바꿔줘”처럼 말로 요청하면서 작업할 수 있습니다. 바이브코딩의 핵심 도구가 바로 이 Cursor입니다.

실습에서는 Cursor 한곳에서 거의 모든 일이 일어납니다. AI에게 지시하고, 생성된 코드를 확인하고, 터미널에 명령어를 입력하고, 파일을 저장하는 작업이 모두 Cursor 안에서 이루어집니다. 메모장이나 워드로는 코드 실행·AI 대화·터미널 사용이 한 번에 되지 않기 때문에, Cursor 설치는 선택이 아니라 필수입니다.

Cursor는 무료로 시작할 수 있고, Google 또는 GitHub 계정으로 로그인하면 바로 쓸 수 있습니다. 유료 플랜은 AI 사용량이 많아졌을 때 검토하시면 됩니다. 실습 입문 단계에서는 무료 범위로도 충분합니다.


세 도구를 한 번 설치해 두면, 이후 실습에서 필요한 다른 프로그램은 대부분 명령어 한두 줄로 추가할 수 있습니다. 지금은 각 도구가 “왜 필요한지” 정도만 이해하셨다면, 아래 설치 단계로 넘어가 주세요.


설치 전 준비 — 계정 만들기

프로그램을 설치하기 전에, Cursor·GitHub·Vercel에 미리 회원가입해 주세요. Cursor 로그인과 이후 GitHub 연동·배포 실습에 필요합니다. 이미 계정이 있다면 이 단계는 건너뛰셔도 됩니다.

  • Cursor 회원가입 — Google 또는 GitHub 계정으로 가입할 수 있습니다. (실습에서는 Google 계정 로그인을 권장합니다.)
  • GitHub 회원가입 — 코드 저장·공유·배포에 쓰는 계정입니다. 무료 계정으로 충분합니다.
  • Vercel 회원가입 — 만든 웹사이트를 인터넷에 올리는(배포) 서비스입니다. GitHub 계정으로 가입하는 것을 권장합니다.

※ GitHub이 아니라 Google 계정으로 Vercel에 가입했다면? → 아래 자주 겪는 문제 — Vercel을 Google로 가입한 경우를 참고해 주세요.


설치 체크리스트

아래 순서대로 설치를 진행해 주세요.

  • ☐ 1. Node.js 설치
  • ☐ 2. Git 설치
  • ☐ 3. Cursor 설치
  • ☐ 4. Cursor 터미널에서 Git 설정

설치

Node.js → Git → Cursor 순서로 설치합니다. Git 사용자 설정(4단계)까지 마치면 설치 확인으로 넘어갑니다.

1. Node.js 설치

Node.js는 바이브 코딩으로 만든 앱을 내 PC에서 실행할 때 필요한 기본 엔진입니다. 웹·앱 개발 실습의 거의 모든 도구가 Node.js 위에서 동작합니다.

아래 영상을 보면서 진행해도 되고, 글의 스크린샷 순서대로 따라와도 됩니다.

1-1. Node.js 공식 사이트 접속

  1. 웹 브라우저(Chrome, Edge 등)를 엽니다.
  2. 주소창에 https://nodejs.org/ko 를 입력하고 Enter를 누릅니다.
  3. 한국어 페이지가 열리면 준비 완료입니다.

1-2. 설치 파일 다운로드

  1. 페이지 중앙의 Get Node.js® 버튼을 클릭합니다.
Node.js 다운로드 버튼

LTS / Current 중 뭘 골라야 하나요?

공식 페이지에서 직접 고를 경우 초록색 LTS 버튼을 누르세요.

LTS는 ‘가장 안정적인 버전’이라는 뜻이라, 비개발자에게 딱 맞습니다.

Current는 최신 실험 버전이라 실습용으로는 권장하지 않습니다.

Get Node.js® 버튼 하나만 보이면 LTS가 이미 선택된 상태이므로, 그대로 누르시면 됩니다.

  1. Windows용 설치 프로그램(.msi)이 자동으로 다운로드됩니다. 파일 이름은 node-v○○.○.○-x64.msi 형태입니다. 페이지에 Windows Installer(.msi) 링크가 따로 보이면 그것을 눌러 받으셔도 됩니다.
Windows Node.js msi 다운로드
  1. 브라우저 하단이나 다운로드 폴더에서 .msi 파일을 찾습니다. 보통 다운로드 폴더에 저장됩니다.

1-3. Node.js 설치 프로그램 실행

  1. 다운로드한 .msi 파일을 더블클릭해 실행합니다.
Node.js msi 실행
  1. “이 앱이 디바이스를 변경하도록 허용하시겠습니까?” 창이 뜨면 예를 클릭합니다.
  2. 설치 마법사가 열리면 Next(다음)를 눌러 진행합니다.
  3. 라이선스 동의 화면 → I accept(동의) → Next.
  4. 설치 경로, 구성 요소 선택 화면은 기본값 그대로 Next를 눌러 진행합니다. 특별히 바꿀 필요 없습니다.
  5. Tools for Native Modules 또는 Add to PATH 항목이 보이면 체크된 상태(기본값)를 유지합니다. Add to PATH는 터미널 어디서든 node, npm 명령을 쓸 수 있게 해 주는 옵션입니다. 체크를 해제하면 설치 확인 단계에서 명령어가 인식되지 않을 수 있습니다.
  6. Install(설치) → 완료되면 Finish(마침)를 누릅니다.

Node.js 설치가 끝나면 Git 설치(2단계)로 넘어갑니다. 설치 확인은 Cursor까지 설치한 뒤, 설치 확인 섹션에서 한꺼번에 진행합니다.


2. Git 설치

Git은 실습 중 만든 파일의 변경 이력을 저장하고, 나중에 GitHub 같은 서비스와 연결할 때 필요한 도구입니다. “어제 버전으로 되돌리기”, “팀원과 같은 파일 공유” 같은 작업의 기반이 됩니다.

2-1. Git 설치 페이지 접속

  1. 브라우저에서 Git – Install for Windows 페이지를 엽니다.
  2. Git for Windows/x64 Setup 링크를 클릭해 설치 파일을 다운로드합니다.

직접 링크: Git for Windows/x64 Setup

(버전 번호는 업데이트될 수 있습니다. 공식 페이지의 x64 Setup을 받으시면 됩니다.)

2-2. Git 설치 진행

  1. 다운로드한 .exe 파일을 실행합니다.
  2. 설치 마법사가 열리면 Next를 눌러 진행합니다.
  3. Select Destination Location(설치 위치), Select Components(구성 요소) 화면이 나옵니다.

Select components 화면에서 아래 항목이 체크되어 있는지 확인합니다.

Add a git bash profile to Windows Terminal

이 옵션을 켜 두면, 나중에 Windows Terminal에서 Git Bash를 선택해 쓸 수 있습니다. 실습에서는 주로 Cursor 안의 터미널을 쓰지만, 체크해 두는 것을 권장합니다.

Git Select components — Windows Terminal 프로필 추가
  1. 그 외 화면(기본 에디터 선택, PATH 설정, HTTPS 설정, 줄바꿈 처리 등)은 모두 기본값(Default) 그대로 Next → Install → Finish로 마칩니다.
  2. “Git Bash를 실행하시겠습니까?”가 나오면 지금은 닫아도 됩니다. Cursor에서 터미널을 쓸 예정입니다.

3. Cursor 설치

Cursor는 바이브 코딩 실습에서 사용할 AI 코드 편집기입니다. VS Code와 비슷한 화면에 AI 채팅이 붙어 있어, “이 기능 만들어줘”처럼 말로 요청하면서 코드를 작성할 수 있습니다.

3-1. 다운로드 및 설치

  1. Cursor 다운로드 페이지에 접속합니다.
  2. Windows용 Download 버튼을 눌러 설치 파일을 받습니다.
  3. 다운로드한 설치 파일을 실행합니다.
  4. 설치 마법사는 기본 설정 그대로 진행합니다. 특별히 변경할 항목이 없으면 Next → Install → Finish 순서로 마칩니다.

3-2. 첫 실행 및 로그인

  1. 설치 후 Cursor를 실행합니다. 바탕화면 또는 시작 메뉴에서 Cursor 아이콘을 찾을 수 있습니다.
  2. 처음 실행하면 Google 또는 GitHub 계정으로 로그인하라는 화면이 나옵니다. Google 계정으로 로그인해 주세요. (GitHub로도 로그인할 수 있지만, Google 계정 로그인을 권장합니다.)
  3. 로그인 후 기본 단축키 안내, 테마 선택, 한국어 설정 등 초기 설정 화면이 나올 수 있습니다. 기본값으로 두거나, 한국어를 선호하시면 Language에서 Korean을 선택하시면 됩니다.

3-3. Agent 창 → Editor 창으로 바꾸기

Cursor를 처음 실행하면 Agent(에이전트) 화면이 먼저 열리는 경우가 많습니다. Agent 화면은 AI와 대화하는 데 특화된 레이아웃이고, 실습에서는 파일 목록·코드 편집·터미널이 함께 보이는 Editor(에디터) 화면을 주로 사용합니다. Git 설정(4단계)과 터미널 작업을 하려면 Editor로 바꿔 두는 것이 편합니다.

Editor로 전환하는 방법은 다음과 같습니다.

  1. Cursor 창 우측 상단에 있는 Editor window 또는 IDE 버튼을 클릭합니다. (처음 한 번은 이 버튼으로 전환하는 것이 가장 확실합니다. Cursor 버전에 따라 버튼 이름이 Editor window 또는 IDE로 표시될 수 있습니다.) 또는 상단 메뉴 바에서 File을 클릭한 뒤 Open IDE(또는 Open Editor Window)를 선택해도 됩니다.
  2. 한 번 Editor 화면으로 바꾼 뒤부터는 키보드 Ctrl + E로 Agent ↔ Editor를 빠르게 오갈 수 있습니다.

Editor 화면이 열리면 왼쪽(또는 설정에 따라 오른쪽)에 파일 탐색기, 가운데에 코드 편집 영역, 아래에 터미널(Ctrl + J)을 둘 수 있습니다. Agent 화면과 Editor 화면을 오가며 쓸 수 있지만, 설치 확인·Git 설정 단계에서는 Editor 화면에서 진행해 주세요.

Cursor 무료 플랜으로도 실습 시작에 충분합니다. 유료 전환은 나중에 필요할 때 검토하셔도 됩니다.


4. Cursor 터미널에서 Git 설정

Git을 Cursor 안에서 바로 쓰려면, “내 이름과 이메일”을 Git에 한 번 알려 주어야 합니다. GitHub에 올릴 때 누가 작업했는지 기록되도록 하는 설정입니다.

아래 단계는 모두 Cursor 프로그램 안에서 진행합니다.

4-1. 터미널 열기

  1. Cursor를 실행합니다. Agent 화면이 열려 있다면 위 3-3단계대로 Editor 화면으로 전환합니다.
  2. 키보드 Ctrl + J를 누릅니다. 화면 아래쪽에 패널이 열립니다.
  3. 패널 상단 탭에서 Terminal을 클릭합니다. Problems, Output 등 다른 탭이 선택되어 있으면 Terminal로 바꿔 주세요.
Cursor 하단 패널에서 Terminal 선택
  1. 터미널 창에 $ 또는 PS로 시작하는 줄과 깜빡이는 커서가 보이면 준비 완료입니다.

4-2. Git 사용자 정보 설정

아래 명령어에서 "SIREAL", "sireal@example.com" 부분을 본인 이름·이메일로 바꿔, 한 줄씩 입력하고 Enter를 누릅니다.

git config --global user.name "SIREAL"
git config --global user.email "sireal@example.com"
git config --global init.defaultBranch main
git config --global credential.helper store
git config --global core.editor "notepad"

각 줄이 하는 일:

명령어설명
user.nameGit 커밋(저장 기록)에 표시될 이름. 영문 권장 (예: "Sijin Jeon")
user.emailGit에 등록할 이메일. GitHub 쓸 예정이면 GitHub 가입 이메일과 맞추면 편합니다
init.defaultBranch main새 프로젝트의 기본 브랜치 이름을 main으로 설정
credential.helper storeGitHub 등 로그인 정보를 PC에 저장해, 매번 비밀번호를 안 물어보게 함
core.editor “notepad”Git이 메모를 열 때 Windows 메모장 사용 (Windows 전용)

따옴표 " 안에 이름·이메일을 넣는 것을 잊지 마세요. 본인 정보로 바꿔 입력하면 됩니다. 예시:

git config --global user.name "SIREAL"
git config --global user.email "sireal@example.com"

입력 후 아무 메시지가 없이 다음 줄로 넘어가면 정상입니다. Git config는 “설정 저장 완료” 메시지를 따로 띄우지 않습니다.

4-3. 터미널 화면 정리 (선택)

명령어를 많이 입력했다면 터미널을 깨끗이 비우고 싶을 수 있습니다. 아래를 입력합니다.

clear
Git config 설정 후 터미널 화면

설치 확인

1~4단계 설치가 모두 끝났다면, Cursor 터미널에서 프로그램이 제대로 설치됐는지 확인합니다. 4단계에서 연 터미널을 그대로 쓰셔도 되고, Cursor를 껐다 켰다면 Ctrl + J → Terminal로 다시 열어 주세요.

5. Node.js 설치 확인

Cursor 터미널에 아래 명령어를 입력하고 Enter를 누릅니다. (Cursor가 아직 없다면 Windows 시작 → powershell 검색 → Windows PowerShell 실행 후 같은 명령을 입력해도 됩니다.)

node -v

입력 방법: 터미널 창을 클릭한 뒤, node -v를 타이핑하거나 복사해서 붙여 넣고 Enter.

정상적으로 설치되었다면 v22.18.0처럼 v로 시작하는 버전 번호가 출력됩니다. 숫자가 조금 다르면(예: v24.x, v20.x) 괜찮습니다. v와 숫자가 보이면 Node.js 설치 성공입니다. 버전 번호는 PC마다 다를 수 있으며, “출시 번호”라고 생각하시면 됩니다.

Windows node -v 확인

'node'은(는) 내부 또는 외부 명령... 오류가 나오면 아래 “설치했는데 버전 정보가 나오지 않을 때” 또는 FAQ를 참고해 주세요.


6. npm 설치 확인

npm은 Node.js와 함께 설치되는 패키지 관리 도구입니다. 프로젝트마다 필요한 패키지(라이브러리) 목록을 npm install 한 번으로 받아오거나, package.json에 적힌 의존성(dependency)을 자동으로 설치할 때 씁니다. Node.js가 정상이면 npm도 함께 설치되어 있습니다. 별도 프로그램을 추가로 깔 필요는 없습니다.

Cursor 터미널에 아래를 입력합니다.

npm -v

v11.5.2처럼 버전 번호가 출력되면 npm도 정상입니다. Node.js와 마찬가지로 숫자가 조금 달라도 문제 없습니다. v10 이상이면 실습에 무리 없습니다.

Windows npm -v 확인

버전이 너무 낮거나 npm 관련 오류가 반복되면, 아래 명령으로 npm만 최신 쪽으로 올린 뒤 다시 npm -v를 확인해 보세요. (선택 사항입니다. 정상 출력되면 건너뛰어도 됩니다.)

npm install -g npm@latest

7. Git·전체 설치 확인

마지막으로 Git과 세 도구 전체가 Cursor 터미널에서 동작하는지 확인합니다.

Cursor 터미널에서 아래 명령어를 하나씩 입력합니다.

git -v
node -v
npm -v

각 명령마다 버전 정보가 출력되면 설치가 모두 완료된 것입니다. 예시:

  • git version 2.54.0.windows.1
  • v22.18.0
  • 11.5.2

숫자는 PC마다 조금 다를 수 있습니다. “버전 번호가 나온다”는 것만 확인하시면 됩니다.

Windows 최종 설치 확인 — git, node, npm 버전 출력

세 가지 모두 버전이 보이면 Windows 바이브코딩 실습 환경 준비가 끝났습니다. Cursor를 열고 바로 실습을 시작하시면 됩니다.

설치했는데 버전 정보가 나오지 않을 때

Node.js나 Git 설치를 마쳤는데 node -v, git -v, npm -v 입력 시 버전 번호가 나오지 않거나 '…은(는) 내부 또는 외부 명령…' 오류가 나올 수 있습니다. 아래 순서대로 시도해 보세요.

  1. Cursor를 완전히 종료한 뒤 다시 실행합니다.

창만 닫으면 Cursor가 백그라운드에서 계속 실행 중일 수 있습니다. Alt + F4로 창을 닫는 것만으로는 부족한 경우가 많습니다.

  • 화면 우측 하단 작업 표시줄(시계·Wi-Fi·볼륨 아이콘이 있는 영역)을 확인합니다.
  • ^ 또는 아이콘을 클릭해 숨겨진 아이콘을 펼칩니다.
  • Cursor 아이콘을 마우스 오른쪽 버튼으로 클릭합니다.
  • Quit(종료) 또는 Exit Cursor(Cursor 종료)를 선택합니다.

Cursor를 다시 실행한 뒤 Editor 화면에서 터미널을 열고, node -v, git -v, npm -v를 다시 입력해 보세요.

  1. 그래도 버전이 나오지 않으면 PC를 재부팅합니다.

설치 직후에는 Windows가 프로그램 경로(PATH)를 아직 반영하지 못한 경우가 있습니다. 재부팅 후 Cursor를 실행하고 같은 명령어를 다시 입력해 보세요.


  1. 재부팅 후에도 동일하면 프로그램을 완전히 제거한 뒤 다시 설치합니다.



  2. Windows 시작 → 설정 → 앱 → 설치된 앱(또는 프로그램 추가/제거)으로 이동합니다.


  3. Node.js, Git, Cursor를 각각 찾아 제거(삭제)합니다.
  4. PC를 한 번 더 재부팅합니다.
  5. 이 글의 1~3단계(Node.js → Git → Cursor)부터 다시 설치합니다.

Node.js 재설치 시 Add to PATH 옵션은 기본값(체크됨)을 유지하고, Git 재설치 시 “Git from the command line and also from 3rd-party software”가 선택된 상태(기본값)인지 확인하세요.

  1. 위 방법을 모두 진행했는데도 해결되지 않으면, AI에게 오류 내용을 보여 주고 도움을 요청해 보세요.

Cursor 에이전트 패널 여는 방법:

  • Cursor 창 우측 상단에서 톱니바퀴(설정) 바로 왼쪽에 있는 Agent(에이전트) 아이콘을 클릭합니다.
  • 또는 키보드 Ctrl + Alt + B를 눌러 AI 채팅(에이전트) 패널을 열거나 닫습니다. (Editor 화면에서도 사용할 수 있습니다.)

오류를 AI에게 물어보는 방법:

  • 터미널에 표시된 오류 메시지 전체를 드래그해 복사(Ctrl + C)합니다.
  • 에이전트 채팅에 붙여 넣고, “Windows에서 Node.js(또는 Git) 설치 후 node -v를 입력했는데 이 오류가 납니다. 해결 방법을 알려주세요”처럼 상황을 함께 적어 질문합니다.
  • Cursor로 해결이 어렵다면, 같은 오류 메시지를 ChatGPT, Gemini, Claude 등 다른 AI에 붙여 넣어 추가로 물어볼 수 있습니다. 오류 문구가 길수록 답변 정확도가 올라가므로, 터미널에 출력된 내용을 빠짐없이 복사하는 것이 좋습니다.

자주 겪는 문제

node, npm, git 명령어가 인식되지 않는 경우

설치 확인 단계의 “설치했는데 버전 정보가 나오지 않을 때”와 동일합니다. 요약하면:

  1. Alt + F4가 아니라, 작업 표시줄 우측 하단(트레이)의 Cursor 아이콘 → Quit(종료)로 완전히 종료한 뒤 재실행합니다.
  2. node -v, npm -v, git -v를 다시 입력합니다.
  3. 그래도 안 되면 PC를 재부팅한 뒤 재시도합니다.
  4. 그래도 안 되면 설정 → 앱 → 설치된 앱(프로그램 추가/제거)에서 Node.js·Git·Cursor를 제거하고, 재부팅 후 처음부터 다시 설치합니다.
  5. 위 단계를 모두 했는데도 해결되지 않으면, Cursor 에이전트 패널(우측 상단 설정 왼쪽 Agent 아이콘, 또는 Ctrl + Alt + B)을 열어 터미널 오류를 복사해 붙여 넣고 질문하거나, ChatGPT·Gemini·Claude 등 다른 AI에 같은 오류 메시지를 붙여 넣어 해결 방법을 물어보세요.

PowerShell 실행 정책 오류가 나오는 경우 (실습 중 해당될 때만)

실습 중 npm install 등을 실행할 때 “스크립트 실행이 금지되어 있습니다” 같은 오류가 나올 수 있습니다. 그때만 Cursor 터미널에 아래를 입력합니다.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

질문이 나오면 A(모두 예)를 입력합니다.

Git 설치 후 git 명령어가 안 되는 경우

위 “node, npm, git 명령어가 인식되지 않는 경우”와 같은 순서로 진행합니다. Git만 문제일 때는 Git을 프로그램 추가/제거에서 삭제한 뒤 git-scm.com/install/windows에서 재설치하고, “Git from the command line and also from 3rd-party software” 옵션이 선택된 상태(기본값)인지 확인하세요.

회사 PC라 설치가 막히는 경우

회사 보안 정책 때문에 .exe·.msi 설치, 관리자 권한 실행, PowerShell 정책 변경이 막혀 있을 수 있습니다.

  • IT 담당자에게 Node.js, Git, Cursor 설치 권한을 요청해 주세요.
  • “개발·교육용 도구”라고 설명하시면 승인받는 경우가 많습니다.
  • 설치가 어려우시면 실습 전에 미리 문의해 주시면, 가능한 범위에서 함께 확인해 드립니다.

Cursor 로그인이 안 되는 경우

  • 회사 네트워크·VPN에서 cursor.com 접속이 차단될 수 있습니다. VPN을 끄거나, 다른 네트워크(핫스팟 등)에서 시도해 보세요.
  • Google 로그인이 안 되면 GitHub 계정으로 시도해 보세요.

Vercel을 Google로 가입한 경우 — GitHub 계정 연동하기

Vercel을 Google 계정으로 먼저 만들었다면, 배포 실습 전에 GitHub 계정을 같은 Vercel 계정에 연결해 주세요. GitHub으로 다시 새로 가입하면 계정이 두 개로 나뉠 수 있으니, 기존 계정에 연동하는 방식을 권장합니다.

1. 브라우저에서 Vercel기존에 쓰던 Google 계정으로 로그인합니다.

2. 우측 상단 프로필 아이콘 → Account Settings(계정 설정)을 엽니다. 또는 vercel.com/account로 바로 이동합니다.

3. Authentication 항목에서 GitHubConnect(연결) 버튼을 클릭합니다.

4. GitHub 로그인·권한 승인 화면이 나오면, 실습에 쓸 GitHub 계정으로 로그인한 뒤 Authorize(승인)합니다.

5. 다시 Account Settings로 돌아와 Login Connections에 GitHub이 연결되어 있으면 완료입니다.

이후 프로젝트를 배포할 때 Import Git Repository 화면에서 GitHub 저장소가 보이면 정상적으로 연동된 것입니다. GitHub이 보이지 않으면 위 연동을 다시 확인하거나, 배포 화면에서 GitHub Install/Configure를 눌러 권한을 추가해 주세요.


다음에 할 일

  1. Cursor를 실행하고, 새 폴더를 열어 실습 프로젝트를 시작합니다.
  2. Mac을 쓰는 분은 Mac 설치 가이드를 참고해 주세요.
  3. 설치 중 막히는 부분이 있으면 시리얼 블로그 댓글이나 네이버 카페에 질문을 남겨 주세요.

여기까지 완료하셨다면, Windows에서 바이브코딩을 시작할 준비가 끝났습니다.

작성: 전시진 | 시리얼(Sireal)

워드프레스 테크니컬 SEO, Claude Code로 자동 해결하는 법

워드프레스 사이트를 운영하면서 SEO에 신경 쓰고 싶은데, 막상 시작하려면 낯선 용어들이 쏟아져 막막했던 경험 있으신가요? robots.txt, 사이트맵 XML, HTTPS 리다이렉션, 구조화 데이터… 이름만 들어도 개발자의 영역처럼 느껴지는 것들이죠. 그런데 이 모든 테크니컬 SEO 작업을 Claude Code에 자연어로 요청하면, AI가 서버에 직접 접속해 처음부터 끝까지 처리해 준다면 어떨까요? 실제로 그 방법을 써봤고, 생각보다 훨씬 효과적이었어요.


테크니컬 SEO와 콘텐츠 SEO, 뭐가 다를까요

SEO를 공부하다 보면 크게 두 가지로 나뉜다는 걸 알게 돼요. 테크니컬 SEO는 건물로 치면 기초 공사예요. 사이트가 검색엔진에 올바르게 인식될 수 있도록 서버 환경, 색인 설정, URL 구조, 속도 등을 다듬는 작업이죠. 콘텐츠 SEO는 그 건물 안에 좋은 콘텐츠를 채워 넣는 일이고요.

문제는 테크니컬 SEO가 진입 장벽이 꽤 높다는 점이에요. robots.txt가 뭔지, 사이트맵 XML은 어떻게 만들어야 하는지, 스테이징 URL이 색인에 잡히면 왜 안 되는지—이런 개념을 모르면 어디서부터 손을 대야 할지 알 수가 없어요. 일반적으로는 개발자에게 의뢰하거나, 오랜 시간을 들여 직접 공부해야 했죠.


Claude Code가 이걸 어떻게 처리하나요

Claude Code는 터미널에서 동작하는 AI 코딩 도구예요. 단순히 코드를 생성해 주는 것에서 그치지 않고, SSH를 통해 원격 서버에 직접 접속해서 실제 명령어를 실행할 수 있어요. 워드프레스 사이트를 Cloudways나 cafe24 같은 호스팅에 올려두셨다면, Claude Code를 그 서버와 연결해 두는 것만으로 이후 작업을 모두 자연어로 지시할 수 있게 됩니다.

실제로 이런 식으로 요청해요: “robots.txt 확인하고 SEO에 맞게 최적화해줘. wp-includes랑 wp-admin은 차단하고, 사이트맵 위치도 추가해줘.” 그러면 Claude Code가 현재 서버의 robots.txt를 먼저 확인하고, 없으면 최적화된 파일을 직접 생성해 줘요. 에러가 나도 스스로 수정하고 다시 시도하니 기다리기만 하면 됩니다.


실제로 어떤 단계로 진행되나요

1단계: SSH 접속 설정
처음에 Claude Code가 해당 서버에 SSH로 접속할 수 있도록 SSH 키 또는 비밀번호를 설정해 두어야 해요. .ssh/config에 alias를 등록해 두면 이후 ssh 사이트명 한 줄로 접속할 수 있어요. 한 번만 설정하면 이후 작업은 전부 Claude Code가 처리합니다.

2단계: 테크니컬 SEO 점검 요청
“SEO 점검해줘”라고 요청하거나, SEO 체크리스트 파일을 통째로 주고 “다 확인하고 고쳐줘”라고 해도 됩니다. Claude Code는 robots.txt, 사이트맵, HTTPS 리다이렉션, 구조화 데이터 등을 하나씩 확인하면서 문제가 있는 항목을 직접 수정해요. 여러 항목을 한 번에 처리하면 10분 안에 주요 항목이 다 해결되는 경우도 많아요.

3단계: 구글 서치 콘솔(GSC) 제출
사이트맵이 생성되면, Claude Code가 제출할 사이트맵 URL을 알려줘요. 그 URL을 복사해서 구글 서치 콘솔에 붙여넣고 제출하면 끝이에요. 구글이 사이트 구조를 파악하는 속도가 훨씬 빨라집니다.

4단계: 구조화 데이터 추가
구글 AI 개요(AI Overview)나 리치 결과에 노출되려면 FAQ, Q&A 형식의 구조화 데이터가 필요해요. 이것도 “푸터 위에 FAQ 5개 추가해줘”처럼 요청하면, Claude Code가 워드프레스 테마 파일을 수정해 JSON-LD 형태로 넣어줘요.


이 방법을 어떻게 더 활용할 수 있을까요

한 가지 사이트에만 쓰는 게 아니라, 운영하는 워드프레스 사이트가 여러 개라면 각 사이트마다 SSH alias를 등록해 두고 같은 방식으로 활용할 수 있어요. SEO 체크리스트 파일을 미리 만들어 두면 “이 파일 기준으로 다 점검해줘”라는 요청 하나로 전체 진단이 가능하죠.

구글 서치 콘솔 API를 Claude Code에 연결하면 한 단계 더 나아가요. 검색 성과 데이터를 불러와서 클릭률이 낮은 페이지를 분석하거나, 크롤 에러를 바로 수정하는 것도 가능해집니다. 테크니컬 SEO와 콘텐츠 SEO를 하나의 워크플로우로 묶을 수 있게 되는 거예요.


주의사항 및 한계

Claude Code가 강력하긴 하지만, 몇 가지 주의할 점이 있어요. 서버 접속 권한이 있는 만큼, 잘못된 명령이 실행되면 설정이 바뀌거나 파일이 수정될 수 있어요. 중요한 작업 전에는 백업을 해두는 걸 권장해요. 또, Cloudflare를 사용하는 경우 HTTPS 설정이 Cloudflare 단에서 처리되는 경우가 있어, WordPress 서버 측에서 추가로 설정하면 무한 루프가 생길 수 있어요. 이 부분은 Claude Code도 주의하라고 안내해 주지만, 직접 확인하는 게 안전해요.

호스팅 환경에 따라 PHP 경로나 WP-CLI 명령어가 다를 수 있어요. cafe24는 openresty 기반으로 .xml URL 처리 방식이 일반적인 Apache와 달라서, 정적 파일을 루트에 직접 만들어야 하는 경우도 있었어요. Claude Code가 이런 환경 차이를 어느 정도 파악하고 대응하지만, 처음 연결할 때 환경 정보를 명확히 알려주는 게 좋아요.


자주 묻는 질문

Claude Code를 WordPress에 연결하려면 개발 지식이 필요한가요?
SSH 접속 설정은 처음 한 번만 해두면 돼요. 터미널에서 SSH 키를 등록하는 수준의 작업이 필요하고, 이 과정도 Claude Code에 요청하면 단계별로 안내를 받을 수 있어요. 이후 SEO 작업은 전부 자연어로 진행할 수 있어요.

WordPress 호스팅이 cafe24인데 사용할 수 있나요?
사용할 수 있어요. 다만 cafe24는 openresty 환경 특성상 .xml 파일을 URL로 접근할 때 홈으로 리다이렉션이 되는 경우가 있어요. 이 문제는 WordPress 루트에 정적 파일을 직접 만들어 해결할 수 있으며, Claude Code가 이 방법으로 처리해 줍니다.

구글 서치 콘솔 연동도 자동화할 수 있나요?
GSC API 토큰을 서버에 저장해 두면, Claude Code가 직접 서치 콘솔 데이터를 읽어 분석하고 피드백을 줄 수 있어요. 사이트맵 제출, 크롤 에러 확인, 색인 상태 점검 등을 자동화할 수 있는 방향으로 확장이 가능해요.

robots.txt를 잘못 설정하면 어떻게 되나요?
robots.txt에서 Disallow 범위를 너무 넓게 설정하면 구글이 사이트 전체를 크롤하지 못할 수 있어요. Claude Code는 일반적으로 안전한 기본 설정을 만들어 주지만, 생성 후 구글 서치 콘솔의 robots.txt 테스터로 검증해 보는 걸 권장해요.

구조화 데이터는 어디에 추가해야 가장 효과적인가요?
홈페이지와 자주 검색될 것 같은 주요 포스트에 FAQ 또는 Q&A 형식의 구조화 데이터를 추가하는 게 효과적이에요. JSON-LD 형식으로 WordPress 테마의 footer 직전에 넣으면 되고, 리치 결과 테스트 도구로 적격 여부를 확인해 볼 수 있어요.


마무리

테크니컬 SEO는 사이트가 검색엔진에 제대로 인식될 수 있는 기반을 다지는 작업이에요. 이 기초가 탄탄해야 이후 콘텐츠 SEO의 효과도 온전히 발휘될 수 있어요. Claude Code는 이 기초 공사를 개발자 없이, 자연어만으로 처리할 수 있게 해줘요. WordPress 사이트를 운영하신다면, Claude Code와 SSH 연결 한 번만 해두세요. 그 다음부터는 말로 모든 게 해결됩니다.


이 글은 Cursor Korea 커뮤니티 운영 과정에서 직접 Claude Code를 활용한 경험을 바탕으로 작성했습니다.

작성: 전시진 | 시리얼(Sireal)

포트폴리오 웹사이트를 직접 만들겠다고 마음먹는 순간, 머릿속에 이런 생각부터 스쳐 지나갑니다.

  • “도메인은 또 뭐고, 호스팅은 어디서 해야 하지?”
  • “HTML이니 CSS니 자꾸 말은 들었는데, 내가 이걸 할 수 있을까?”

그래서 대부분의 사람들은 결국 PPT나 PDF 포트폴리오에 머무릅니다. 파일로만 있어도 당장 지원은 할 수 있으니까요. 하지만 막상 상대 입장에서 생각해 보면, 링크 하나만 눌러서 내 포트폴리오를 볼 수 있는 사람과, 굳이 파일을 열어봐야 하는 사람 중 누가 더 기억에 남을지는 이미 답이 나와 있습니다.

좋은 소식은, 이제는 이 격차를 줄이는 일이 예전보다 훨씬 쉬워졌다는 점입니다. Gemini 같은 생성형 AI, Google AI 스튜디오, GitHub, Vercel을 한 번만 연결해두면, 그 다음부터는 정말 말 그대로 “10분짜리 작업”에 가까워집니다.

이 글은 강의에서 설명했던 과정을 그대로 가져와서, 실제로 따라 하면 그대로 사이트가 나오는 흐름으로 사람 말투에 가깝게 정리한 버전입니다.


1. PPT 포트폴리오, 왜 아쉽게 느껴질까

PPT는 발표용으로는 최고지만, 읽기용 매체로는 한계가 분명합니다.

  • 슬라이드는 한 장 한 장 끊겨 있어서, 전체 스토리가 한 번에 잡히지 않습니다.
  • 파일을 열어야 하니, 모바일에서 보기에도 은근히 번거롭습니다.
  • 특정 프로젝트를 다시 찾아보기도 쉽지 않습니다.

웹 포트폴리오는 정반대입니다.

  • URL 하나면 어디서든 열립니다.
  • 위에서 아래로 자연스럽게 읽을 수 있습니다.
  • 검색엔진·내부 검색 모두에 잘 잡힙니다.

그러니까, PPT 포트폴리오가 이미 있는 분이라면 “새로 만드는 것”이 아니라 “한 단계 업그레이드하는 것” 정도로 생각하면 부담이 훨씬 줄어듭니다.


2. AI가 이해할 수 있는 포맷으로 내용부터 정리하기

웹을 만들겠다고 해서, 처음부터 개발 툴부터 열 필요는 없습니다. 오히려 그 전에 할 일은 내 이야기를 AI가 읽기 좋은 텍스트로 정리해 두는 것입니다.

형식은 뭐든 괜찮습니다.

  • Google Docs
  • Word
  • 한글 문서

중요한 건 구조입니다. 예를 들어 생산성 컨설턴트 포트폴리오라면 이렇게 나눌 수 있겠죠.

  1. 나라는 사람에 대한 한 줄 소개
  2. 어떤 문제를 풀어주는 사람인지, 핵심 역량
  3. 실제로 함께 일했던 기업·조직 목록
  4. 대표 프로젝트와 그 결과(숫자까지 있으면 금상첨화)

AI에게 “이 내용을 기반으로 웹 포트폴리오를 만들어 달라”고 할 예정이기 때문에, 문장 하나하나를 예쁘게 쓰는 것보다, 큰 덩어리를 잘 나눠놓는 게 훨씬 중요합니다.


3. Framer·Webflow에서 ‘나 닮은’ 템플릿 고르기

다음 단계는 겉모습, 즉 레이아웃 레퍼런스 찾기입니다. 여기서 직접 디자인을 튀어나오게 새로 할 필요는 없습니다. 이미 잘 만든 포트폴리오 템플릿이 세상에 널려 있으니까요.

Framer나 Webflow 같은 곳에 들어가서 검색창에 portfolio만 쳐 봐도, 수십 개의 템플릿이 나옵니다. 이 중에서 아래 네 가지 기준에 맞는 것만 골라도 반은 성공입니다.

  • 맨 위에 이름과 한 줄 소개가 큼직하게 보이는지
  • 서비스·역량을 자연스럽게 나열할 수 있는 섹션이 있는지
  • 기업 로고, 프로젝트 카드 등을 모아둘 수 있는 공간이 있는지
  • 맨 아래에 문의, 연락처, 버튼 같은 콜투액션이 있는지

완벽한 것을 찾으려다 시간을 다 쓰기 쉬우니, “내 포트폴리오를 이 레이아웃에 얹었을 때 어색하지 않겠다” 정도면 충분합니다.


4. 템플릿 페이지 전체를 캡처해서 AI에게 보여주기

여기서 우리가 할 일은 디자인을 그대로 가져오는 게 아니라, AI에게 참고용으로 보여주는 것입니다. 그래서 템플릿 페이지를 통째로 이미지로 만들어 둡니다.

방법은 간단합니다.

  1. 크롬에서 템플릿 페이지를 연다.
  2. 전체 페이지 캡처 확장 프로그램을 설치한다. (예: GoFullPage)
  3. 페이지를 끝까지 스크롤한 뒤, 한 번에 전체를 캡처한다.

이 이미지는 곧 “이런 모양으로 내 포트폴리오를 꾸며줘”라고 AI에게 설명할 때 쓰이는 자료가 됩니다.


5. Google AI 스튜디오 Builder에서 ‘사이트 뼈대’ 뽑아내기

이제 본격적으로 Google AI 스튜디오의 Builder를 엽니다. 이 화면은 쉽게 말해서, 디자인 이미지와 텍스트를 넣으면 웹사이트 코드가 나오는 공간입니다.

진행 순서는 이렇습니다.

  1. Google AI 스튜디오 접속 → Builder 앱 열기
  2. 새 프로젝트 생성 후 약관 동의
  3. 입력란에 템플릿 전체 이미지를 Ctrl + V로 붙여넣기
  4. 그 아래에 내가 정리해 둔 포트폴리오 텍스트 붙여넣기
  5. 마지막으로 프롬프트 작성

예를 들면, 이런 식으로 쓸 수 있습니다.

“첨부한 이미지의 디자인을 활용해서 아래 내용에 있는 포트폴리오를 만들어줘. 웹사이트 디자인 코드로 만들어줘. GitHub에 저장하고 Vercel에 배포를 할 거야. 알아서 코드를 잘 만들어줘.”

엔터를 누르고 잠시 기다리면, AI가 이미지를 뜯어보면서 어느 부분이 어떤 섹션인지 파악하고, 그 아래 텍스트와 매칭해서 기본 웹사이트 뼈대를 가진 코드를 만들어 줍니다.

코드 탭을 보면 HTML·CSS 구조가 생겨 있고, Preview 탭에서는 실제 페이지 모양을 확인할 수 있습니다. 이때까진 그냥 “나쁘지 않은 템플릿 복사본” 정도의 상태라고 보면 됩니다.


6. 클릭하면 팝업이 뜨는 인터랙션까지 AI에게 맡기기

포트폴리오 사이트가 ‘고급져 보이는’ 포인트 중 하나가, 카드를 클릭했을 때 뜨는 팝업 모달입니다. 이걸 직접 자바스크립트로 짜려면 머리가 지끈한데, Builder 안에서는 설명만 잘 해 주면 AI가 알아서 구현해 줍니다.

  1. Preview에서 팝업으로 만들고 싶은 영역(예: 프로젝트 카드)을 선택합니다.
  2. Annotate 탭을 클릭해 그 영역에 체크 표시를 남깁니다.
  3. Add to chat 버튼을 눌러 해당 영역 스크린샷을 채팅으로 보냅니다.
  4. 이렇게 요청합니다.

“이 부분을 팝업으로 만들어줘. 버튼을 누르거나 이미지나 글자를 누르면 팝업이 떠서 좀 더 상세한 내용을 볼 수 있게 만들어줘.”

잠시 후 코드를 다시 빌드하면, 클릭 시 화면 중앙에 상세 내용이 뜨는 팝업이 생깁니다. 생각보다 훨씬 덜 복잡하죠.

같은 방식으로 파트너 로고 영역이나 진행 기업 목록 같은 것도 각각 팝업 구조를 달아 줄 수 있습니다. 강의에서 보여줬던 것처럼, 카드 하나하나가 살아 움직이는 느낌을 줄 수 있습니다.


7. 내 콘텐츠로 갈아끼우기: 텍스트·이미지 치환

이제 모양새는 나왔으니, 내용을 진짜 내 것으로 바꿀 차례입니다. 여기서 할 일은 단순합니다.

  • 템플릿이 넣어준 예시 문구 → 내 포트폴리오 텍스트로 교체
  • 더미 로고·사진 → 내 이미지로 교체

텍스트는 영역을 선택해서 Add to chat으로 보내고

“여기 텍스트를 내가 실제로 진행했던 기업 목록으로 바꿔줘.”

처럼 요청하면 됩니다.

이미지는 GitHub를 한 번 거쳐야 합니다.

  1. GitHub 레포지토리에서 Add file → Upload files로 이미지를 업로드합니다.
  2. 업로드한 이미지를 클릭한 뒤, 점점점 메뉴에서 Copy permalink를 눌러 링크를 복사합니다.
  3. 다시 Google AI 스튜디오로 돌아와 이미지 영역을 Annotate → Add to chat으로 보낸 뒤,

“이 이미지 영역을 방금 복사한 링크의 이미지로 변경해줘.”

라고 요청합니다.

이미지가 어색하게 잘리면 한 줄만 더 붙이면 됩니다.

“이미지가 위아래로 잘리고 있어. 비율에 맞게 자연스럽게 보이도록 스타일도 같이 수정해줘.”

이 과정을 몇 번 반복하고 나면, 화면 속 사이트가 어느 순간 “아, 이건 완전히 내 웹사이트네” 하는 느낌으로 바뀝니다.


8. GitHub에 저장해 두면, 그다음부터는 편해진다

눈앞의 화면이 마음에 들기 시작했다면, 이제 이걸 날려먹지 않게 GitHub에 저장해 두는 일이 남았습니다. GitHub는 어렵게 생각할 필요 없이, “코드를 위한 구글 드라이브” 정도로 받아들이면 편합니다.

Builder에서 GitHub에 저장 버튼을 눌러 레포지토리를 만들고, 이름을 하나 정해 줍니다. (예: portfolio)

그 다음부터는 수정할 때마다

  • Stage & Commit All Changes 버튼 한 번
  • “변경 사항이 없습니다”라는 문구가 나올 때까지 커밋

이 정도만 해 주면 됩니다. 이 과정이 익숙해질수록, 나중에 코드를 되돌리거나 비교할 수 있어서 오히려 마음이 편해집니다.


9. Vercel로 실제 배포까지 끝내기

이제 마지막 단계, Vercel 배포입니다. 여기까지 오면 사실상 90%는 끝난 거고, 배포는 그냥 연결 작업에 가깝습니다.

  1. Vercel 사이트에서 회원가입을 합니다. 플랜은 Hobby(무료)로 충분합니다.
  2. 이름을 영어로 적고, 로그인 방식은 GitHub 연동으로 선택합니다.
  3. Authorize Vercel을 눌러 권한을 허용하고, 휴대폰 인증까지 마칩니다.

로그인이 끝나면 대시보드에서 Add New → Project를 누릅니다. GitHub에 연결된 레포지토리 목록이 뜨는데, 아까 만든 포트폴리오 레포를 선택하고 ImportDeploy만 눌러주면 됩니다.

잠시 후 프로젝트명.vercel.app 형태의 도메인이 하나 생깁니다. 이 주소를 클릭했을 때, 강의에서 봤던 것과 같은 웹 포트폴리오가 떠 있으면 성공입니다.

혹시 화면이 갑자기 검거나 하얗게 나오면 당황하지 말고, 다시 Google AI 스튜디오에 가서 이렇게 말해 주세요.

“Vercel에 배포했는데 화면이 검게 나와. 왜 그런지 찾아서 고쳐줘.”

수정된 코드를 다시 GitHub에 저장하면, Vercel이 자동으로 재배포를 진행합니다.


10. 도메인만 얹으면, 이제 진짜 ‘내 사이트’가 된다

기본 도메인도 충분히 쓸 수 있지만, 포트폴리오용이라면 개인 도메인까지 연결하면 완전히 느낌이 달라집니다.

같은 주소는 생각보다 금방 적응되고, 한번 익어버리면 명함·이력서·SNS 어디에 붙여도 다 자연스럽습니다.

Vercel의 Domain 탭에서 Add domain을 눌러 이미 가지고 있는 도메인을 붙이거나, Buy domain에서 새로 구입할 수 있습니다.

그다음부터는 이 주소가 곧 나를 설명하는 가장 최신 링크가 됩니다.


11. 한 번만 해 보면, 두 번째부터는 진짜 10분 컷

여기까지 읽으면 “생각보다 할 게 많네…”라는 느낌이 들 수도 있습니다. 하지만 실제로 한 번만 세팅을 해 보면, 그다음부터는 리듬이 완전히 달라집니다.

  • 새 프로젝트를 추가하고 싶을 때 → 텍스트만 조금 바꾸고 이미지 몇 개 교체
  • 실적이 업데이트됐을 때 → 해당 섹션 문단만 수정
  • 디자인을 조금 바꾸고 싶을 때 → 템플릿 이미지를 하나 더 가져와서 일부 레이아웃만 조정

이 정도 작업은 이제 정말 10분 안에 할 수 있는 일이 됩니다. 코드를 직접 짜는 게 아니라, AI에게 “여기 좀 이렇게 바꿔줘”라고 말해 주는 쪽에 더 가깝기 때문입니다.

포트폴리오 사이트는 결국, “나라는 사람을 대신 소개해 주는 24시간짜리 안내원” 같은 존재입니다. 이 안내원을 텍스트 파일 안에만 가둬 두느냐, 아니면 웹이라는 무대 위에 올려두느냐의 차이는 시간이 갈수록 점점 커질 수밖에 없습니다.

AI와 템플릿, 그리고 GitHub·Vercel까지 한 번만 연결해 보세요. 생각보다 훨씬 적은 에너지로, 그동안 미뤄 두었던 나만의 포트폴리오 사이트를 충분히 멋지게 완성할 수 있을 겁니다.