개발환경 세팅 가이드
개발 시작 전, 이 페이지의 세팅을 모두 완료해주세요.
IDE 세팅
코드 편집기와 목업 도구를 준비합니다.
AG Google Antigravity (목업용 IDE)
AI 기반 목업/프로토타입 빌더. 해커톤 1단계에서 핵심 화면 3개를 빠르게 잡는 데 사용합니다.
Antigravity 다운로드 공식 시작 가이드EX VSCode 추천 익스텐션
| 익스텐션 | 용도 |
|---|---|
| Claude Code Agent Monitor | 서브에이전트 실시간 모니터링 |
| ESLint | 코드 품질 자동 검사 |
| Prettier | 코드 포맷 자동 정리 |
| Auto Rename Tag | HTML/JSX 태그 자동 수정 |
| Korean Language Pack | VSCode 한국어 지원 |
Claude Code 설치
터미널에서 AI와 함께 코딩하는 CLI 도구입니다.
1 선행 조건 — Node.js 설치
Claude Code는 Node.js 18 이상이 필요합니다. LTS 버전을 설치하세요.
Node.js LTS 다운로드node -v # v18 이상이면 OK
npm -v # 함께 설치됨
2 Claude Code 설치
claude --version
3 실행 모드 — Bypass (해커톤 전용)
매번 권한 승인 팝업을 건너뛰어 개발 속도를 극대화합니다. 해커톤처럼 시간이 제한된 상황에서만 사용하세요.
cd my-project
claude --dangerously-skip-permissions
4 서브에이전트 확인 — Agent View
여러 AI 에이전트가 동시에 작업하는 모습을 한 화면에서 확인합니다.
claude agents
별도 설치 없이 Claude Code v2.1.139 이상이면 바로 사용 가능
Claude 계정 & API Key
Claude Code 실행과 API 호출에 필요한 계정을 준비합니다.
CL Claude 계정 — 최소 Pro 플랜
| 항목 | 내용 |
|---|---|
| 필요 플랜 | Pro ($20/월) 이상 — Claude Code 사용에 필수 |
| 가입/구독 | claude.ai 접속 → 로그인 → 좌측 하단 "구독 관리" |
| Claude Code 연동 | 터미널에서 claude 입력 시 브라우저 로그인으로 자동 연결 |
API Claude Console API Key
면접 질문 생성, 피드백 등 AI 기능 호출에 사용됩니다. 해커톤 1회 기준 $5 이내로 충분합니다.
| 단계 | 방법 |
|---|---|
| 1. 콘솔 접속 | console.anthropic.com 로그인 |
| 2. API Key 발급 | Settings → API Keys → Create Key |
| 3. 크레딧 충전 | Billing → Add Credits → $5 충전 |
| 4. 환경변수 설정 | export ANTHROPIC_API_KEY="sk-..." |
G Google AI Studio — Gemini API Key (선택)
멀티 LLM 구성 시 Gemini를 활용하려면 API Key가 필요합니다. 무료 티어로 충분합니다.
Gemini API Key 발급MCP 세팅
Claude Code에 외부 도구를 연결합니다.
PW Playwright — 브라우저 자동화
웹 테스트, 스크린샷, 브라우저 조작을 AI가 직접 수행합니다.
npm install -g @playwright/mcp@latest
# 2. Claude Code에 MCP 등록
claude mcp add playwright -- playwright-mcp
# 3. 등록 확인
claude mcp list # playwright: ✓ Connected 확인
npm config get registry를 확인하세요. https://registry.npmjs.org/가 아니면 npm config set registry https://registry.npmjs.org/로 변경 후 재시도.SQ Sequential Thinking — 단계별 추론 (선택)
C7 Context7 — 최신 문서 참조 (선택)
FS Filesystem — 파일 시스템 접근 (선택)
Claude Code가 지정된 디렉토리의 파일을 직접 읽고 쓸 수 있게 합니다.
/Users/yourname/project를 본인 프로젝트 폴더 절대경로로 바꿔주세요. 예: /Users/jaden/Documents/interviewmateSB Supabase — 데이터베이스 연동 (선택)
면접 기록 저장, 사용자 인증 등 백엔드 DB가 필요할 때 사용합니다. Supabase 프로젝트 생성 후 URL과 Key를 준비하세요.
claude mcp add supabase -- npx -y @supabase/mcp-server
# 2. 환경변수 설정 (.env 파일에 추가)
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_KEY=your-anon-key
Wow 포인트 라이브러리
심사위원 시선을 잡는 시각 효과용 라이브러리입니다. (CH3-4에서 사용)
React Bits — 애니메이션 UI 컴포넌트
110+ 애니메이션 컴포넌트. 필요한 것만 골라 복사해서 사용합니다. npm 설치가 아닌 CLI 복사 방식.
React Bits 공식 사이트 GitHubLottieFiles — 애니메이션 에셋
무료 Lottie JSON 애니메이션. 로딩, 축하, 성공 등 다양한 이펙트를 즉시 적용할 수 있습니다.
canvas-confetti — 축하 이펙트
면접 완료 시 색종이 날림 효과. 한 줄이면 적용됩니다.
Framer Motion — React 애니메이션
점수 게이지 애니메이션, 페이드인, 슬라이드 등 인터랙션에 사용합니다.
트러블슈팅
자주 발생하는 문제와 해결법입니다.
| 증상 | 원인 | 해결 |
|---|---|---|
| npm install 무한 로딩 | npm registry가 사내 Nexus로 설정됨 | npm config set registry https://registry.npmjs.org/ |
| MCP "Failed to connect" | npx 실행 시 확인 프롬프트 대기 | npx 명령에 -y 플래그 추가 |
| Claude Code 로그인 안됨 | Pro 구독 미완료 | claude.ai → 구독 관리 → Pro 플랜 활성화 |
| Node.js 버전 오류 | v18 미만 설치됨 | nodejs.org에서 LTS 재설치 |
| Playwright MCP 버전 호환 오류 | 최신 버전 호환 이슈 | npm install -g @playwright/mcp@0.0.41로 버전 고정 |
| CORS 에러 (개발 중) | 프론트/백엔드 포트 불일치 | 백엔드에 CORS 미들웨어 추가 또는 프록시 설정 |
최종 체크리스트
해커톤 시작 전, 아래 항목을 모두 완료했는지 확인하세요.
- VSCode 설치 완료
- Google Antigravity 설치 완료
- Node.js v18 이상 설치 확인 (
node -v) - Claude Code 설치 완료 (
claude --version) - Claude Pro 구독 활성화
- Claude Console API Key 발급 + $5 충전
- Playwright MCP 연결 확인 (
claude mcp list→ ✓ Connected) - npm registry가 공식 주소인지 확인 (
npm config get registry) - 프로젝트 폴더에서
claude --dangerously-skip-permissions정상 실행 확인
참고 링크 모음
강의에서 사용하는 모든 외부 링크입니다.