Tag

Cursor

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)

7월 1일 Notion 3.6 업데이트로 HTML 블록이 정식 출시됐습니다. 노션 페이지 안에서 ROI 계산기를 돌리고, 주간 보고 대시보드를 펼치고, 심지어 테트리스를 칠 수 있다면 어떨까요? HTML 블록은 임베드가 아니라, 노션 안에서 바로 동작하는 미니 앱입니다.

이번 글에서는 직접 써 보며 정리한 만드는 방법, 실전 활용, 한계와 우회법을 영상과 함께 정리했습니다.

HTML 블록이란?

웹사이트와 앱의 대부분은 HTML, CSS, JavaScript로 만들어집니다. HTML 블록은 이 세 가지를 노션 페이지 한 칸 안에 넣을 수 있게 해 주는 새 블록 유형이에요.

HTML, CSS, JavaScript — 코딩 몰라도 괜찮아요

HTML 블록 설명을 보면 HTML, CSS, JavaScript(줄여서 JS)라는 단어가 자주 나옵니다. 개발자가 아니어도 역할만 이해하면 충분합니다. 집을 짓는다고 생각해 보세요.

HTML은 뼈대입니다. “여기에 제목이 있고, 여기에 입력 칸이 있고, 여기에 버튼이 있다”처럼 무엇이 어디에 있는지를 정합니다. 노션으로 치면 블록의 종류와 순서를 정하는 것과 비슷합니다.

CSS는 꾸미기입니다. 글자 크기, 색상, 여백, 둥근 모서리, 카드 배경색처럼 어떻게 보일지를 담당합니다. 노션에서 텍스트 색을 바꾸거나 콜아웃 스타일을 고르는 것과 같은 역할이에요.

JavaScript (JS)는 움직임입니다. 버튼을 누르면 숫자가 계산되고, 필터를 클릭하면 목록이 바뀌고, 게임 캐릭터가 움직이는 것처럼 사용자 행동에 반응하는 부분입니다. HTML이 “계산기 틀”이라면, JS는 “실제로 계산해 주는 엔진”입니다.

세 가지가 합쳐져야 계산기, 대시보드, 퀴즈 같은 인터랙티브 UI가 완성됩니다. 직접 코드를 작성할 필요는 없습니다. Notion AI, Claude, Cursor에게 “부가세 계산기 만들어줘”라고 말하면 AI가 HTML·CSS·JS를 알아서 작성해 줍니다. 우리는 결과물이 잘 동작하는지 확인하고, 필요하면 “색을 더 진하게”, “입력 칸 하나 더 추가해줘”처럼 수정을 요청하면 됩니다.

슬래시 메뉴에서 /HTML을 입력하면 블록을 만들 수 있습니다. 계산기, 퀴즈, 조직도, 화이트보드, 미니 게임, 프로세스 다이어그램처럼 클릭·입력·드래그가 필요한 것을 페이지 안에 바로 넣을 수 있습니다. 블록 너비를 조절할 수 있고, 팝업 모드로 전환하면 전체 화면에 가깝게 볼 수도 있습니다.

요금제 안내도 미리 알아두시면 좋습니다.

기능이용 가능 범위
HTML 블록 보기·사용모든 요금제 (무료 포함)
HTML 블록 AI로 생성 (Notion AI)Business, Enterprise
다른 사람이 만든 HTML 공유·배포모든 요금제

HTML 블록 자체는 무료 플랜에서도 됩니다. Notion AI로 “만들어줘” 하는 건 Business 이상이에요. Notion AI가 없으면 Claude + Notion MCP로 노션에 직접 생성하거나, Claude·Cursor로 코드를 만든 뒤 업로드하면 됩니다.

만드는 방법 3가지

1. Notion AI로 만들기

노션 페이지에서 /HTML을 입력한 뒤, AI에게 원하는 기능을 한국어로 구체적으로 설명하면 됩니다. Notion AI로 만들면 노션 기본 디자인 시스템이 자동 적용돼서, 주변 블록과 자연스럽게 어울립니다.

핵심 프롬프트 한 줄 — 이 문구가 없으면 코드만 출력되고 HTML 블록이 생성되지 않습니다.

HTML 임베드 블록을 생성한 후 실행해줘

수정은 노션 안에서 코드를 직접 편집하는 방식이 아닙니다. “숫자 포맷을 원화로 바꿔줘”, “입력 항목 하나 더 추가해줘”처럼 AI에게 다시 요청하거나, HTML 파일을 다운로드해서 편집한 뒤 재업로드하는 방식으로 진행합니다.

2. Claude · ChatGPT · Cursor로 만들기

Notion AI가 없거나, 이미 Claude·Cursor 워크플로우에 익숙하다면 외부 AI로 HTML을 만든 뒤 노션에 올리면 됩니다.

  1. AI에게 HTML/CSS/JS 단일 파일로 생성 요청
  2. 브라우저에서 미리보기 확인
  3. .html 파일로 저장
  4. 노션 HTML 블록에 업로드

복잡한 HTML, 브랜드 디자인 시스템, 여러 버전을 관리하는 작업은 Cursor가 특히 편합니다. 프로젝트 폴더에 design.md를 두고 참조시키면 납품 품질을 반복 생산하기 좋습니다.

3. 노션 MCP + Claude로 만들기

Claude 등 외부 AI에 Notion MCP를 연결하면, HTML 블록을 노션 페이지에 직접 생성할 수 있습니다. 파일을 다운로드했다가 다시 업로드하는 단계 없이, AI가 MCP를 통해 노션 안에 HTML 블록을 만들어 줍니다.

  1. Claude(또는 MCP를 지원하는 AI)에 Notion MCP 연결
  2. 만들고 싶은 위젯을 설명하고, “@페이지명”으로 삽입할 노션 페이지 참조
  3. “HTML 임베드 블록을 생성한 후 실행해줘” 문구 포함
  4. AI가 MCP로 HTML 블록을 생성 → 노션 페이지에서 바로 확인

Notion AI 없이 Business 플랜 이상이 필요한 “노션 안에서 AI 생성” 흐름을 쓰기 어려울 때, MCP + Claude 조합이 특히 유용합니다. @design.md, @프로젝트 DB처럼 노션 페이지를 참조시키면 Notion AI와 비슷하게 맥락 있는 HTML 블록을 받을 수 있어요.

다만 MCP로 HTML 블록을 생성할 수 있다는 것과, HTML 블록이 DB와 실시간으로 연동된다는 것은 별개입니다. MCP 생성도 결과물은 생성 시점 스냅샷이며, DB가 바뀌어도 HTML은 자동 갱신되지 않습니다.

실전 사례 — 컨설팅 주간 HTML 보고

이번 영상의 메인 시연은 실제 컨설팅 프로젝트 DB와 할 일 DB를 참조해 주간 업무 보고를 HTML로 받는 워크플로입니다.

준비물

  • @design.md — 디자인 가이드 페이지
  • @컨설팅 프로젝트 DB — 프로젝트 현황
  • @할 일 DB — 이번 주 할 일

프롬프트 예시 (영상 자료 prompts_gift.md 1-B와 동일)

[디자인 가이드 문서]와 [프로젝트 DB], [할 일 DB] 데이터를 기반으로 주간 업무 보고서를 구현하는 단일 HTML 코드를 작성해 줘. 대괄호 부분은 실제 문서와 데이터베이스로 연결해서 사용할게.

출력 형식: 외부 파일 참조 없이 하나의 HTML 안에 CSS와 JS를 모두 포함할 것
Notion 최적화: Notion HTML 블록(Embed)에 삽입 시 정상적으로 렌더링 및 작동할 것
데이터 처리: 참조한 DB 데이터를 스냅샷 형태로 HTML 내부에 직접 포함시켜 화면에 렌더링할 것
UI/UX 설계: 데이터 특성을 분석하여 KPI, 필터, 카드 배치 등 세부 레이아웃을 가장 효과적인 대시보드 형태로 구성할 것
디자인 시스템: 참조한 디자인 가이드 문서의 스타일 규칙을 엄격하게 적용할 것
안내 문구: 보고서 내에 "이 보고서는 DB 스냅샷 기준이며, 실시간 연동되지 않습니다."라는 문구를 명확히 표시할 것
출력 제한: 부가적인 설명 없이 완성된 HTML 코드만 출력할 것

결과물에는 KPI 4카드, 프로젝트별 현황, 할 일 필터(완료/진행/마감임박)가 포함됩니다. Status 필터를 클릭하면 상태별로 목록이 바뀌지만, 이 상태는 내 브라우저에만 저장됩니다.

PDF 추가 팁 — 노션 기본 차트·대시보드는 PDF로 내보내면 레이아웃이 깨지는 경우가 많습니다. HTML 블록으로 대시보드를 만든 뒤 Agent에게 “PDF 만들어서 이 페이지에 넣어줘”라고 요청하면, 같은 페이지에 HTML(인터랙티브) + PDF(공유·인쇄용)를 함께 둘 수 있습니다.

HTML 템플릿 재활용 — 레이아웃 고정의 정석

노션 HTML 블록은 디자인을 블록 안에서 직접 수정할 수 없습니다. AI에게 “템플릿 유지, 데이터만” 요청해도 레이아웃이 조금씩 달라질 수 있어요.

디자인이 마음에 들면 아래 흐름으로 레이아웃을 100% 고정할 수 있습니다.

  1. 노션에서 HTML 파일 다운로드
  2. weekly_report_template.html처럼 코드로 보관 (Git 등)
  3. 매주 Cursor에서 REPORT_DATA만 DB 스냅샷으로 교체 — CSS·HTML 구조는 유지
  4. 브라우저 미리보기 → 노션 재업로드

Agent로 매주 재생성하는 방식(1-E)은 빠르지만 레이아웃이 변할 수 있고, 템플릿 DATA 갱신(14) 방식은 픽셀 단위로 레이아웃을 고정할 때 씁니다.

design.md — 디자인 일관성 유지

워크스페이스에 design.md 페이지를 만들어 두고 “@design.md 참고해서 만들어줘”라고 요청하면, 색·폰트·카드 스타일이 매번 일관되게 나옵니다. Notion AI 기본 디자인 위에 고객 브랜드 규칙을 덮어쓰는 패턴이에요.

토큰용도
--color-primary#2C26AE메인 강조, 버튼, 헤더
--color-bg-sub#F7F6F3카드·패널 배경
--color-text#37352F본문 텍스트

영상 자료의 design.md 파일을 복사해 노션 페이지로 붙여 넣고, 본인 브랜드 색상으로 수정해 사용하시면 됩니다.

업무·팀·학습 활용 사례

HTML 블록은 “노션을 대체하는 앱”이 아니라, 제안·교육·온보딩을 설득력 있게 보여 주는 레이어로 쓰는 게 맞습니다.

업무 도구

  • 부가세·사업소득·기타소득 계산기
  • ROI / TCO 계산기 (고객 미팅 중 팝업으로 전체 화면 시연)
  • 프로젝트 D-Day 카운트다운
  • 주간 리포트·체크리스트 UI

팀·학습

  • 온보딩 체크리스트 (단계별 가이드·복사 문구)
  • 플래시카드 학습 위젯
  • 미션 → 퀴즈 → Congratulations 흐름
  • 사다리 타기, 테트리스 등 미니게임

컨설턴트·영업

  • As-Is / To-Be 비교표 (탭 전환)
  • 프로젝트 구축 타임라인
  • MECE 시스템 분류 인터랙티브 표
  • 회의록 시각화 (타임라인·카드형)

고객 페이지에는 HTML 위에 “데모용·수치는 예시” Callout을 두시면 신뢰가 올라갑니다.

무료 요금제에서도 대시보드 만들기

노션 네이티브 대시보드 보기는 비즈니스 플랜 전용입니다. HTML 블록은 무료 요금제에서도 DB를 참조한 대시보드를 만들 수 있어요. DB 데이터를 스냅샷으로 HTML에 포함시키면, 담당자·상태·프로젝트별 필터·그래프를 한 화면에 구성할 수 있습니다.

다만 이 방식은 실시간 연동이 아닙니다. DB가 업데이트되어도 HTML은 자동으로 바뀌지 않으므로, 매주 Agent로 재생성하거나 템플릿 DATA 갱신 방식을 사용해 주세요.

알아둘 한계와 우회법

HTML 블록은 강력하지만, 노션 샌드박스 안에서 동작합니다. 직접 써 보면서 확인한 한계를 정리해 둡니다.

정적 HTML — DB 연동·갱신

기대현실
DB 속성을 읽어와 대시보드 자동 갱신DB 기반 HTML도 스냅샷일 뿐
DB 업데이트 시 HTML도 따라 변경보안·샌드박스로 워크스페이스와 격리
HTML에서 만든 데이터 → 노션 DB 적재현재 불가 (향후 업데이트 기대)

동적 데이터 위젯 vs 정적·로컬 위젯

어려운 것가능한 것
캘린더 (외부 일정 연동)명언 위젯
환율·주가 (실시간 fetch)인스턴트 할 일 목록
날씨 APIROI 계산기 (입력→로컬 계산)

외부 API로 데이터를 주고받는 위젯은 불가합니다. HTML 안에서만 도는 상호작용은 가능합니다. 외부 프레임워크, 폰트, SVG 불러오기는 가능합니다.

팀 협업·로컬 저장

필터·화이트보드·입력값은 본인 브라우저에만 저장됩니다. 다른 팀원 PC에서 내 필터 상태가 보이지 않으므로, 개인 탐색·데모·교육에는 적합하고 팀 공유 상태에는 적합하지 않습니다.

우회법 요약

필요대안
DB 연동 실시간 대시보드Notion API + Make, 외부 호스팅
주기적 시각화 보고서커스텀 에이전트 자동화
팀 공유 화이트보드Miro, FigJam
레이아웃 100% 고정HTML 다운로드 → DATA만 갱신 → 재업로드

자주 묻는 질문

Q. HTML 블록은 무료 요금제에서도 쓸 수 있나요?

네. HTML 블록 보기·사용·공유는 모든 요금제에서 가능합니다. Notion AI로 HTML을 생성하는 기능만 Business, Enterprise 플랜에서 사용할 수 있습니다. Notion AI가 없으면 Claude나 Cursor로 HTML을 만든 뒤 업로드하면 됩니다.

Q. “HTML 만들어줘”라고만 하면 왜 블록이 안 생기나요?

Notion AI에게 “HTML 임베드 블록을 생성한 후 실행해줘”라는 문구를 반드시 포함해야 합니다. 이 문구 없이는 코드만 출력되고 HTML 블록이 생성되지 않습니다.

Q. DB를 연결하면 실시간으로 대시보드가 갱신되나요?

아닙니다. HTML 블록은 생성 시점의 DB 스냅샷을 HTML 내부에 포함하는 방식입니다. DB가 바뀌어도 HTML은 자동 갱신되지 않습니다. 매주 Agent로 재생성하거나, 템플릿 DATA 갱신 방식을 사용해 주세요.

Q. 노션 안에서 HTML 코드를 직접 수정할 수 있나요?

현재는 불가합니다. HTML 파일을 다운로드 → 로컬/Cursor에서 편집 → 재업로드하는 방식으로 수정합니다. 레이아웃을 고정하려면 템플릿 파일로 보관하고 DATA만 갱신하는 방식을 권장합니다.

Q. Notion MCP로 HTML 블록을 만들 수 있나요?

네. Claude 등 외부 AI에 Notion MCP를 연결하면 HTML 블록을 노션 페이지에 직접 생성할 수 있습니다. “HTML 임베드 블록을 생성한 후 실행해줘” 문구와 함께 @페이지명으로 삽입 위치를 지정해 요청하세요. 다만 생성된 HTML은 DB 실시간 연동이 아닌 스냅샷입니다.

영상에서 사용한 자료 다운로드

마무리

노션 HTML 블록은 정적 인터랙티브 위젯입니다. DB 실시간 연동 대시보드가 아니라, 정기 스냅샷 리포트·제안용 계산기·교육용 퀴즈로 포지셔닝하면 기대치에 맞게 잘 쓸 수 있습니다.

  • 만드는 법 = @ 페이지·DB 참조 + Notion AI / Claude·Cursor / Notion MCP → 생성
  • 디자인 고정 = design.md 참조 + HTML 템플릿 DATA 갱신
  • PDF = HTML 완성 후 Agent PDF 생성 → 같은 페이지에 삽입
  • 한계 = DB 실시간 연동 ❌, 필터 상태 = 내 PC만 (MCP 생성은 ⭕)

영상 설명란에서 프롬프트와 HTML 샘플 파일을 받아 바로 써 보시면 됩니다. 궁금한 점은 댓글이나 네이버 카페에 남겨 주세요.작성: 전시진 | 시리얼(Sireal)