제15강 : 바이브코딩 개발환경 설정

VS Code부터 GitHub까지, 1시간 완성 가이드

주요 주제
필수 도구 설치
  • • VS Code 설치 및 확장 프로그램 설정
  • • Node.js 설치 (nvm 권장)
  • • Git 설치 및 기본 설정
GitHub 연동
  • • GitHub 계정 생성 및 2FA 설정
  • • SSH 키 생성 및 GitHub 연결
  • • 첫 저장소 생성 및 푸시
배포 환경 설정
  • • Vercel 계정 생성 및 GitHub 연동
  • • 첫 배포 및 자동 배포 설정
  • • 환경변수 설정
터미널 및 트러블슈팅
  • • Windows PowerShell/macOS Terminal 사용법
  • • 자주 발생하는 문제 해결법
  • • 개발 워크플로우 확인

준비 체크리스트 (5분)

1단계: VS Code 설치 (10분)

  1. 다운로드: https://code.visualstudio.com/ → Download for Windows
  2. 설치 실행 → 모든 기본값으로 Next
  3. 옵션 권장 체크
  4. 실행: 시작 메뉴 → Visual Studio Code
  1. 다운로드: https://code.visualstudio.com/ → Download for macOS (Apple Silicon/Intel 확인)
  2. 압축 해제 후 Visual Studio Code.app를 Applications 폴더로 드래그
  3. 실행: Launchpad → Visual Studio Code
2025년 필수 확장 프로그램 (단계별 설치 권장)
1단계: 기본 설정
  • Korean Language Pack for VS Code (한국어 UI)
  • Material Icon Theme (파일 아이콘)
  • One Dark Pro 또는 GitHub Theme (테마)
  • Peacock (워크스페이스 색상 구분)
  • Bracket Pair Colorizer 2 (괄호 색상)
  • indent-rainbow (들여쓰기 가시화)
2단계: 코드 품질 & 포맷팅
  • Prettier - Code formatter (48M+ 설치)
  • ESLint (코드 품질 검사)
  • Auto Rename Tag (HTML/JSX 태그 자동 수정)
  • Path Intellisense (파일 경로 자동완성)
  • IntelliSense for CSS class names
  • Auto Close Tag (태그 자동 닫기)
3단계: AI & 생산성 도구 (2025년 핵심)
💡 팁: AI 도구는 하나씩 설치해서 사용법을 익힌 후 다음으로 진행하세요!
  • GitHub Copilot (41M+ 설치, AI 코드 자동완성)
  • Claude Code (공식 CLI 연동)
  • Claude Coder (Claude 3.5 Sonnet 기반)
  • Tabnine (AI 기반 코드 완성)
  • Live Server (실시간 미리보기)
  • Turbo Console Log (디버깅 로그)
4단계: 개발 언어별 (필요에 따라 선택)
JavaScript/TypeScript/React:
  • ES7+ React/Redux/React-Native snippets
  • Simple React Snippets
  • Import Cost (패키지 크기 표시)
  • Quokka.js (실시간 JS/TS 실행)
Python:
  • Python (Microsoft, 173M+ 설치)
  • Pylance (고급 Python 언어 지원)
  • autoDocstring (문서화 자동생성)
  • AREPL (실시간 Python 코드 실행)
5단계: Git & 협업
  • GitLens (Git 히스토리 가시화)
  • GitHub Pull Requests and Issues
  • Live Share (실시간 협업)
  • Git History (Git 로그 뷰어)
  • GitBlame (코드 작성자 표시)
  • Remote - SSH (원격 개발)
확장 프로그램 설치 방법
  1. VS Code 좌측 Activity Bar → Extensions (Ctrl+Shift+X)
  2. 검색창에 확장 프로그램 이름 입력
  3. Install 버튼 클릭
  4. 설치 후 Reload 또는 VS Code 재시작

2단계: Node.js 설치 (15~20분)

설치 방법 선택 가이드:
  • 직접 설치: 초보자 추천 - 간단하고 빠른 설치
  • nvm 설치: 고급 사용자용 - 여러 Node.js 버전 관리 필요시
초보자 추천: 간단하고 빠른 설치 방법입니다.
공식 홈페이지에서 다운로드
  1. Node.js 공식 홈페이지로 이동
  2. LTS (Long Term Support) 버전 다운로드 클릭 ※ LTS는 장기 지원 버전으로 안정성이 보장됩니다
  3. 운영체제에 맞는 인스톨러 자동 감지 및 다운로드
  4. 다운로드된 인스톨러 실행 → 기본 설정으로 설치 진행
  5. 설치 완료 후 확인:
# 터미널/명령 프롬프트에서 확인
node -v              # 예: v20.16.0
npm -v               # 예: 10.8.1
설치 후 주의사항
  • Windows: 설치 후 터미널(PowerShell/명령 프롬프트) 재시작 필요
  • macOS: 터미널 재시작 후 확인
  • 설치 경로: Windows는 C:\Program Files\nodejs\, macOS는 /usr/local/bin/
고급 사용자용: 여러 Node.js 버전 관리가 필요한 경우 사용
  1. GitHub 릴리스: nvm-windows releases → nvm-setup.exe 설치
  2. 설치 중 Node 경로는 기본값 유지 권장
  3. 터미널 재실행 후:
nvm version
nvm list available   # 설치 가능한 버전 목록
nvm install 20.16.0  # LTS 권장
nvm use 20.16.0
node -v              # v20.16.0
npm -v
고급 사용자용: 여러 Node.js 버전 관리가 필요한 경우 사용
  1. Homebrew 설치(미설치 시): https://brew.sh
  2. nvm 설치:
brew install nvm
mkdir -p ~/.nvm
# 쉘 초기화 파일에 nvm 설정 추가 (zsh 기준)
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo '[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh"' >> ~/.zshrc
source ~/.zshrc
nvm --version
  1. Node 설치:
nvm ls-remote | tail -n 20  # 최신 LTS 확인
nvm install 20.16.0
nvm use 20.16.0
node -v
npm -v

3단계: GitHub 계정 및 Git 설정 (10~15분)

계정 생성
  1. https://github.com → Sign up
  2. 이메일 인증 → 사용자명 설정 → Free 플랜으로 시작
  3. 2단계 인증(2FA) 활성화 권장
Git 설치 확인
  • Windows: Git for Windows 설치
  • macOS: xcode-select --install 또는 brew install git
git --version
SSH 키 생성 및 GitHub 연결
# 이메일은 GitHub에 등록한 이메일로 변경
ssh-keygen -t ed25519 -C "your_email@example.com" -f ~/.ssh/id_ed25519 -N ""
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519
cat ~/.ssh/id_ed25519.pub  # 출력값 복사
다음 단계: GitHub → Settings → SSH and GPG keys → New SSH key → 위에서 복사한 키 붙여넣기
연결 테스트 및 사용자 정보 설정
# 연결 테스트
ssh -T git@github.com

# 사용자 정보 설정
git config --global user.name "Your Name"
git config --global user.email "your_email@example.com"

4단계: Vercel 계정 및 배포 설정 (10~15분)

계정 생성
  1. https://vercel.com → Sign Up
  2. Continue with GitHub (연동 허용)
  3. 대시보드 진입 후 Hobby(Free) 플랜으로 시작
첫 저장소 만들기 및 배포
mkdir vibe-sideproject && cd vibe-sideproject
echo "# Vibe Coding Side Project" > README.md
git init
git add .
git commit -m "chore: init"
git branch -M main
git remote add origin git@github.com:<username>/vibe-sideproject.git
git push -u origin main
Vercel에서 배포: 대시보드 → New Project → Import Git Repository → vibe-sideproject 선택 → Deploy

터미널/명령 프롬프트 기본 사용법

실행 방법
  • VS Code 내부(권장): Ctrl + ` (백틱)
  • Windows: Win + X → Windows Terminal 또는 PowerShell
  • macOS: Cmd + Space → Terminal 검색
자주 쓰는 명령어
  • pwd - 현재 위치 보기
  • ls (Mac/PowerShell), dir (cmd) - 목록 보기
  • cd <폴더> - 폴더 이동
  • mkdir <폴더> - 폴더 생성
  • code . - 현재 폴더를 VS Code로 열기
  • clear (Mac/PowerShell), cls (cmd) - 화면 지우기
  • node app.js - Node 스크립트 실행
  • npm run dev - 개발 서버 실행

최종 점검 (5분)

트러블슈팅 FAQ

  • Windows: 새 터미널/PC 재부팅, nvm use <버전> 재실행
  • macOS: source ~/.zshrc, 터미널 재시작
  • 경로 충돌 확인: where node(Win) / which node(Mac)

  • 공개키(.pub)를 정확히 붙여넣었는지 확인
  • ssh-agent 실행 여부 확인
  • 방화벽/회사망 정책 확인
  • 키 파일 권한 확인: chmod 600 ~/.ssh/id_ed25519

  • Node 버전 불일치 → package.json에 engines 필드 추가
  • 환경변수 누락 → Vercel Environment Variables 확인
  • 빌드 명령 확인 → Vercel Project Settings에서 Build Command 확인

다음 단계

개발환경 설정이 완료되었다면, 이제 바이브코딩을 시작해보세요!

11강: 바이브코딩 기초
12강: 바이브코딩 기초 실습
추천 학습 순서

15강(환경설정) → 11강(기초) → 12강(기초실습) → 13강(마스터) → 14강(완전정복)

강의 목차
1강 생성형 AI의 기초 2강 생성형 AI로 일 잘하는 조직 만들기 3강 프롬프트 엔지니어링 I 4강 프롬프트 엔지니어링 II 5강 페르소나 설정을 통한 업무 피드백 6강 [생성형 AI 활용] 보고서 작성과 가혹한 글쓰기 7강 AI 에이전트 사용하기 8강 [생성형 AI 활용] 기타 9강 프로젝트 모음 10강 지피티 설정과 myGPTs 11강 바이브코딩 기초 12강 바이브코딩 기초 실습 13강 AI 바이브코딩 마스터 14강 바이브 코딩 완전 정복 15강 바이브코딩 개발환경 설정