2025.08.30
1. 바이브 코딩 이해 및 도구 둘러보기
1차시 : 바이브 코딩 이해
생존을 위해서는 AI와 협업할 수 있는 능력을 기르는 것이 필수
Vibe coding
느낌(프롬프트)을 던지면 AI가 코드까지 완성하는 개발 방식
바이브 코딩 순서
https://aistudio.google.com/
2차시 : 바이브 코딩 도구 둘러보기
로컬 vs 클라우드
3차시 : 기술에 대한 이해
웹/앱 서비스 작동 원리, API, FE UI, 도구 등
2. 커서 활용 및 바이브 코딩 시작
4차시 : 바이브 코딩을 위한 도구 설치
brew update
brew upgrade
(python@3.13, pcre2, qemu, cloudflared and git)
cursor pro 구매 / cursor 명령어 PATH에 추가
brew install gh
5차시 : 바이브 코딩 맛보기
명령어 1.
html, css, js를 사용해 카드 안에 귀여운 곰을 그려 줄래?
명령어 2(수정 및 개선).
캐릭터 옆에 버튼을 3개 만들고 각 버튼마다 움직임이 있었으면 좋겠어
3. 바이브 코딩 Skill-Up
6차시 : 바이브 코딩 Skill-Up1 (PRD)
바이브 코딩
Say - Run - See (반복)
Say - 뭘 만들고 싶은지 먼저 말한다
Run – 실제로 만들어보기
See – 결과를 보고 개선한다
PRD
“바이브 코딩이 속도를 낸다면, PRD는 그 속도에 방향을 더한다.”
상세한 개발을 몰라서 PRD를 못 본다면? - 유저플로우만이라도
7차시 : 바이브 코딩 Skill-Up2 (Rule)
Generate Cursor Rules
.mdc
- 프로젝트 단위로 RULE을 설정할 수 있음
- 리팩토링이 필요한 경우 계획을 설명하고 허락 받은 다음에 진행
- 디버깅 시에는 원인과 해결책을 설명하고 허락 받은 다음에 진행
- 상세 로그 추가 등
8차시 : 바이브 코딩 Skill-Up3 (MCP)
MCP(Model Context Protocol)는 AI 모델이 외부 세계와 소통할 수 있도록 돕는 “통역사” 역할
이를 통해 AI는 파일 시스템, 웹 API, 데이터베이스, 브라우저 등 다양한 도구와 연결되어 더 복잡한
작업을 수행할 수 있음.
MCP 플랫폼
Exa Search MCP
configure → exa.ai에서 발급받은 api key 붙여넣고 update 후 터미널 명령어 실행(npx)
설치가 됐으면 노란색에서 초록색이 되어야 / 안 되면 빨간색
++ 짬을 내서 nvm 설치
명령어 1.
exa MCP를 사용해서 2025 vibe coding trend 조사해 줘
명령어 2.
@https://modu.museum.go.kr/learn exa MCP를 사용해서 교육과정을 크롤링해서 csv로 만들어 줘
터미널을 볼 수 있다면 CLI가 명확함
터미널을 읽을 수 없다면 MCP가 편리함
4. 프로젝트
9차시 : Project1: 유튜브 댓글 분석
Playwright Automation MCP Cursor에 설치
명령어 1.
Playwright MCP를 사용해 메타코드 강의 목록을 찾아줘