INTRO

나만의 바이브코딩 4단계

AI로 기획하고, 만들고, 배포까지 — 3시간 실습 워크숍

INTRO
WHAT IT REALLY MEANS

바이브코딩은 코딩만 하는 일이 아닙니다

내 일을 더 쉽게, 더 빠르게 만든 뒤, 반복되는 실행을 AI가 대신 이어가는 방식입니다.

일을 쉽게 속도를 빠르게 실행을 이어가기
자동화와 에이전트는 AI가 우리 대신 일을 하기 시작한 형태입니다.
지금 우리가 배우는 것은 코딩 문법보다 AI에게 일을 배정하는 법입니다.

1. 작은 일이 먼저 빨라집니다

이메일 초안, 회의 요약, 폴더 정리 — 매일 하던 일이 가벼워집니다.

2. 하나의 결과물을 끝까지 함께 만듭니다

문서 작성, 보고서 작성 — 처음부터 완성까지 AI와 같이 굴립니다.

3. 반복되는 흐름은 AI가 이어갑니다

매주 같은 보고, 같은 형식 — 흐름을 기억하고 대신 돌립니다.

INTRO
AI AT WORK RIGHT NOW

AI는 이미 이런 일을 하고 있습니다

지금 바로 위임할 수 있는 20가지

문서 & 정리

  • 회의 요약
  • 이메일 초안
  • 보고서 정리
  • 번역
  • FAQ 생성

분석 & 판단

  • 데이터 요약
  • 트렌드 비교
  • 리스크 정리
  • 피드백 분류
  • 일정 우선순위

제작 & 구현

  • 랜딩 페이지
  • 공지문 작성
  • SNS 콘텐츠
  • 프레젠테이션
  • 자동화 스크립트

검토 & 개선

  • 오류 탐지
  • 톤 조정
  • 접근성 검토
  • 성능 최적화
  • 테스트 시나리오
INTRO

오늘의 흐름

Setup → 홈페이지 → 칸반보드 → AI 채팅 → 자유 프로젝트
Setup 0:00 – 0:40

Cursor · Node · Git · vibe-skills · GitHub · Vercel

실습 1 — 홈페이지 0:40 – 1:15

나를 소개하는 개인 홈페이지 + Vercel 배포

실습 2 — 칸반보드 1:25 – 1:55

React 드래그 칸반보드 TODO + Vercel 배포

실습 3 — AI 채팅 1:55 – 2:25

카카오톡 스타일 AI 채팅 앱 + OpenAI API

실습 4 — 자유 프로젝트 2:30 – 2:50

10개 옵션 중 선택 + 배포

마무리 2:50 – 3:00

리소스 안내 + 다음 주 첫 적용

SETUP

Cursor 화면 구성

4개 영역만 파악하면 됩니다

에이전트
세션

이전 대화
목록

메인 에이전트 대화

Agent / Ask

여기서 AI에게 모든 작업을 지시합니다

코드/문서
확인/수정

AI가 만든 결과물이
여기에 표시됩니다

폴더
목록

프로젝트
파일 탐색

핵심 단축키

⇧⌘LNew Agent
⌘JTerminal
⌘BFiles 숨기기
⌘P파일 검색
⇧⌘BBrowser
⌥⌘EChat 최대화
SETUP

첫 미션: AI에게 설치를 맡기세요

Agent(Cmd+I)를 열고 아래 프롬프트를 복사해서 붙여넣으세요

Node.js가 설치되어 있는지 확인하고, 없으면 설치해줘.
Git이 설치되어 있는지 확인하고, 없으면 설치해줘.

vibe-skills 설치 — 스코프와 OS를 선택하세요

User (글로벌) — 모든 프로젝트에서 사용

~/.cursor/skills/ 에 설치됩니다

macOS / Linux

curl -fsSL https://raw.githubusercontent.com/NewTurn2017/vibe-skills/main/install.sh | bash -s -- --cursor

Windows (PowerShell)

irm https://raw.githubusercontent.com/NewTurn2017/vibe-skills/main/install.ps1 | iex

Project (로컬) — 현재 프로젝트 전용

.cursor/skills/ 에 설치, git 커밋으로 팀 공유 가능

macOS / Linux

curl -fsSL https://raw.githubusercontent.com/NewTurn2017/vibe-skills/main/install.sh | bash -s -- --cursor --project

Windows (PowerShell)

irm https://raw.githubusercontent.com/NewTurn2017/vibe-skills/main/install.ps1 | iex; .\install.ps1 -Cursor -Project
/vibe 이 프로젝트의 구조를 분석해줘

← 이 명령이 동작하면 설치 완료!

SETUP

GitHub 계정 & CLI 설정

1. GitHub 가입

https://github.com 에서 회원가입

이미 있다면 다음 단계로

2. gh CLI 설치 & 로그인

gh CLI를 설치하고 GitHub에 로그인해줘.
gh auth status 실행해서 로그인 상태 확인해줘.
SETUP

Vercel 계정 & CLI 설정

1. Vercel 가입

https://vercel.com 에서 GitHub 계정으로 가입

Continue with GitHub 클릭

2. vercel CLI 설치 & 로그인

vercel CLI를 설치하고 Vercel에 로그인해줘.
vercel whoami 실행해서 로그인 상태 확인해줘.
WORKFLOW

AI와 일하는 4단계

/vibe 명령어 하나로 자동 실행됩니다

01

분석

/vibe '분석해줘'

상황을 파악하고 구조를 정리

02

계획

/vibe '계획 세워줘'

구현 계획을 세우고 승인

03

구현

/vibe '구현해줘'

승인된 계획대로 실행

04

리뷰

/vibe '리뷰해줘'

바뀐 점과 품질을 확인

기능을 많이 아는 것보다, 이 흐름을 반복하는 것이 중요합니다.
실습 1

실습 1: 나를 소개하는 홈페이지

기획 → 구현 → 수정 → 배포 (45분)

15분
기획
15분
구현
15분
수정+배포
어떤 홈페이지를 만들지 정리하는 것이 가장 중요합니다. 구현은 AI가 빠르게 해줍니다.
HTML — 웹 페이지의 뼈대 (구조) CSS — 색상, 레이아웃 등 디자인 JS — 클릭, 전환 등 동작 반응형 — 모바일/PC 모두 대응
실습 1

Step 1: 기획 — 만들고 싶은 것만 말하세요

vibe-skills가 자동으로 분석 → 계획 → 승인 요청 → 구현으로 이어갑니다

나를 소개하는 개인 홈페이지를 만들어줘. 한 페이지짜리 반응형 웹사이트로, 깔끔하고 현대적인 디자인으로 부탁해.

AI가 계획을 보여주면 → 검토 → 수정 요청 또는 승인 → 구현 시작

실습 1

Step 2: 수정 — 원하는 대로 다듬기

클릭해서 복사하세요. 여러 개를 조합해도 됩니다.

헤더 배경색을 네이비(#1a1a2e)로 바꿔줘
프로필 사진 영역을 상단에 원형으로 추가해줘
스크롤 시 부드럽게 이동하는 네비게이션을 추가해줘
다크모드/라이트모드 토글 버튼을 넣어줘
푸터에 GitHub, LinkedIn 아이콘 링크를 추가해줘
전체적으로 더 모던하게 리디자인해줘

Cursor 내장 Browser — 프롬프트 없이도 수정 가능

1. 컴포넌트 클릭 → 프롬프트로 수정

브라우저에서 수정할 요소를 직접 클릭하면 해당 컴포넌트가 선택됩니다. 프롬프트로 "이 부분 색상 바꿔줘" 같이 지시하면 정확한 위치를 AI가 알고 수정합니다.

2. CSS 실시간 미리보기 → 바로 적용

선택한 컴포넌트의 CSS를 브라우저에서 직접 수정하고 미리보기할 수 있습니다. 마음에 들면 Apply로 코드에 바로 반영 — 프롬프트 없이 시각적으로 작업합니다.

실습 1

Step 3: Vercel 배포

이 프로젝트를 Vercel로 배포해줘. vercel CLI로 배포하고, 배포된 URL을 알려줘.

체크리스트

  • 홈페이지가 로컬에서 잘 보인다
  • 수정 요청을 2번 이상 해봤다
  • Vercel 배포 URL이 나왔다
  • 모바일에서도 확인했다
BREAK TIME
10분 휴식 1:15 – 1:25

잠시 쉬어갑니다

홈페이지 배포 URL을 옆 사람에게 자랑해보세요

돌아오면 칸반보드와 AI 채팅 앱을 만듭니다.

실습 2

실습 2: 드래그 칸반보드

React + localStorage + 드래그 앤 드롭 (40분)

10분
기획
15분
구현
15분
수정+배포
React — 화면을 컴포넌트 단위로 만드는 프레임워크 Vite — React 프로젝트를 빠르게 만들어주는 도구 localStorage — 브라우저에 데이터를 저장 (서버 불필요, 새로고침해도 유지) 드래그 앤 드롭 — 마우스로 끌어서 옮기는 인터랙션
실습 2

Step 1: 기획

원하는 것만 설명하면 AI가 계획을 세워줍니다

드래그 앤 드롭으로 카드를 이동할 수 있는 칸반보드 TODO 앱을 만들어줘. React(Vite)로 만들고, localStorage에 자동 저장되게 해줘.

AI가 계획을 보여주면 → 검토 → 수정 요청 또는 승인 → 구현 시작

실습 2

Step 2: 수정

카드에 우선순위(높음/중간/낮음) 태그를 추가하고 색상으로 구분해줘
카드 개수를 컬럼 헤더 옆에 표시해줘
새 카드 추가 시 모달 입력 폼으로 바꿔줘
컬럼 추가/삭제 기능을 넣어줘
전체 보드를 JSON으로 내보내기/가져오기 기능을 추가해줘
보드 테마를 3가지 중 선택할 수 있게 해줘
실습 2

Step 3: Vercel 배포

이 React 프로젝트를 Vercel로 배포해줘. vercel CLI로 배포하고, 배포된 URL을 알려줘.

체크리스트

  • 칸반보드가 로컬에서 잘 동작한다
  • 드래그 앤 드롭이 작동한다
  • localStorage에 저장된다 (새로고침 후 유지)
  • Vercel 배포 URL이 나왔다
실습 2

세션 관리 — 대화가 길어지면?

AI의 컨텍스트(기억)는 무한하지 않습니다. 50%를 넘기지 마세요.

왜 50%인가?

AI 모델은 한 세션에 처리할 수 있는 텍스트 양이 정해져 있습니다. 50%를 넘으면 초반 대화를 잊기 시작하고, 품질이 떨어집니다.

해결책: 문서 기반으로 작업하면 새 세션에서도 그대로 이어갈 수 있습니다. vibe-skills의 .vibe/ 폴더가 바로 이 역할입니다.

새 세션으로 넘기기 (Handoff)

대화가 길어졌을 때, 현재 상태를 문서로 남기고 새 대화에서 이어갑니다.

지금까지 작업한 내용을 HANDOFF.md로 정리해줘. 목표, 진행 상황, 다음 할 일을 포함해줘.

→ 새 대화에서: "HANDOFF.md를 읽고 이어서 작업해줘"

코드가 아니라 문서가 기억입니다. 문서가 잘 되어 있으면 언제든 새 세션에서 이어갈 수 있습니다.
실습 3

실습 3: AI 채팅 앱

오픈 카카오톡 스타일 + @ai 멘션으로 대화 요약 & 질문 답변 (30분)

10분
리서치+기획
10분
구현
10분
수정+배포
OpenAI API — AI 모델을 호출하는 인터페이스 API Key — AI 서비스 이용을 위한 인증 키 (선택) @멘션 — 채팅에서 AI를 호출하는 트리거 카카오톡 UI — 익숙한 메신저 인터페이스
실습 3

Step 1: 리서치 + 기획 — 한 세션에서 조사부터 계획까지

vibe-research로 기술 조사 → 바로 기획으로 연결합니다

카카오톡 오픈채팅 스타일의 AI 채팅 앱을 구현하려고 해. 먼저 아래 항목을 조사해줘: 1. OpenAI API 최신 채팅 모델 비교 (가격, 속도, 성능) 2. Vercel AI SDK의 스트리밍 채팅 구현 방식 3. 카카오톡 오픈채팅 UI 핵심 요소 (메시지 버블, 프로필, 시간 표시, 읽음 표시) 조사 결과를 바탕으로 구현 계획을 세워줘.

구현 요구사항

카카오톡 오픈채팅 스타일의 AI 채팅 앱을 구현해줘. - Next.js + Vercel AI SDK - 누구나 들어올 수 있는 단체 채팅방 UI - @ai 멘션 시 AI가 전체 대화 흐름을 읽고 요약/질문 답변 - OpenAI API 연동 (스트리밍 응답) - 반응형 모바일 대응

AI가 계획을 보여주면 → 검토 → 승인 → 구현

실습 3

Step 2: API Key 설정 + 수정

OpenAI API Key 발급 (선택사항)

https://platform.openai.com/api-keys 에서 발급

API Key가 없어도 UI 구현과 mock 데이터로 실습 가능합니다

.env 파일에 VITE_OPENAI_API_KEY를 설정해줘.

수정 프롬프트

@ai 멘션 시 타이핑 애니메이션 효과를 추가해줘
대화 요약 기능을 버튼 하나로 실행하게 바꿔줘
메시지 시간 표시를 카카오톡처럼 오전/오후로 바꿔줘
사용자 프로필 아바타를 랜덤 색상으로 생성해줘
실습 3

Step 3: Vercel 배포

이 React 프로젝트를 Vercel로 배포해줘. 환경변수 VITE_OPENAI_API_KEY도 Vercel에 설정해줘. vercel CLI로 배포하고, 배포된 URL을 알려줘.

체크리스트

  • 카카오톡 스타일 UI가 보인다
  • 메시지를 입력하고 전송할 수 있다
  • @ai 멘션으로 AI가 응답한다
  • Vercel 배포 URL이 나왔다
FINAL SPRINT
5분 휴식 2:40 – 2:45

마지막 스퍼트

돌아오면 각자 원하는 프로젝트를 하나 만듭니다

실습 4

실습 4: 자유 프로젝트

하나를 골라서 기획부터 배포까지 완성하세요 (30분)

포모도로 타이머

HTML/CSS/JS
★

명언 랜덤 생성기

HTML/CSS/JS
★

가위바위보 게임

HTML/CSS/JS
★

가계부

React+Chart.js
★★

퀴즈 앱

React+JSON
★★

레시피 북

React+localStorage
★★

습관 트래커

React+localStorage
★★

마크다운 메모장

React+localStorage
★★

날씨 대시보드

React+API
★★★

팀 소개 페이지

HTML/CSS/JS
★
★ HTML/CSS/JS — 서버 없이 바로 실행 ★★ React — 컴포넌트 기반, 상태 관리 포함 ★★★ API 연동 — 외부 데이터 활용 Chart.js — 차트/그래프 라이브러리
실습 4

시작 프롬프트

[프로젝트 이름]을 만들어줘. [한 줄로 원하는 것 설명]

AI가 계획을 보여주면 → 검토 → 수정 요청 또는 승인 → 구현 시작

이 프로젝트를 Vercel로 배포해줘.

막히면 이 문장을 쓰세요:

지금 상황을 정리하고, 내가 결정해야 할 것을 질문해줘.
마무리

더 배우고 싶다면

Cursor 공식 리소스

  • docs.cursor.com
  • cursor.com/learn
  • cursor.com/changelog

vibe-skills

  • vibe.codewithgenie.com
  • GitHub: NewTurn2017/vibe-skills
  • 익숙해지면 Team Mode도 써보세요

커스터마이징 순서

Rules → .cursorrules → MCP → Plugins (처음엔 기본으로 충분합니다)