당일 개발 가이드
환경 셋업 → 개발 → 확장. 모두에게 공통, 트랙별 분기 안내 포함.
오늘은 컴퓨터를 새로 셋업하는 분이 대부분입니다. 그래서 환경 셋업부터 차근차근 시작합니다. 트랙별로 필요한 것이 조금씩 다르니, 각 단계에서 "내 트랙은?" 박스를 확인하세요.
전체 흐름 — 3단계
| 단계 | 무엇을 하나 | 언제 |
|---|---|---|
| 1단계 | 환경 셋업 — 노트북·계정 모두 준비 | 오전 11:00~12:00 (못 끝나면 점심 후 계속) |
| 2단계 | 개발 — 내 트랙대로 Phase 따라 진행 | 오후 13:30~15:00 |
| 3단계 | 확장 (선택) — 배포 / DB / 다듬기 | 시간 남으면 / 집에 가서 |
모두 컴퓨터가 새로 셋업되니 속도가 다를 수 있습니다. 시간에 쫓기지 마세요. 1단계가 늦어지면 2단계로 자연스럽게 이어가면 됩니다.
1단계 · 환경 셋업
이번 워크숍은 다른 장소에서 진행되니, 새 노트북·실습실 PC에서 환경을 처음부터 셋업합니다. 강사가 화면을 공유하면서 함께 진행할 거예요.
공통 환경: 모든 트랙(A/B/C)에 필요합니다. 반드시 설치.
선택 환경: 배포·DB 연동을 하고 싶을 때만 필요. 안 해도 OK.
🔧 공통 환경 — 모두 필요 (체크리스트)
왜 이렇게 많이 깔까요?
| 도구 | 왜 필요한가 |
|---|---|
| Node.js | 웹 앱 빌드·실행을 위한 런타임. Claude Code가 만든 패키지를 돌리는 엔진 |
| VS Code | 코드 편집기. Claude 확장으로 AI와 직접 협업하는 작업 공간 |
| Git | 코드 버전 관리. 망쳐도 되돌릴 수 있는 안전망 |
| GitHub Desktop | Git을 클릭으로 쓰는 도구. 터미널 안 써도 Push 가능 |
| Claude 확장 | VS Code 안에서 Claude Code 호출. 오늘 우리의 주력 도구 |
🌐 선택 환경 — 트랙·목표에 따라
오늘 배포까지 하고 싶거나, DB를 쓸 앱을 만들 분만 추가로 가입하세요.
Vercel은 만든 웹 앱을 인터넷에 즉시 배포해주는 서비스입니다. GitHub 레포만 연결하면 자동으로 URL이 생겨요.
Supabase는 무료로 쓸 수 있는 데이터베이스 + 인증 서비스입니다. "사용자 정보 저장", "여러 사람이 쓰는 앱" 같은 경우 필요해요. 트랙 C에서 단순 도구 만들 거면 안 써도 됩니다.
⚠️ 환경 셋업 실패 사례 — 미리 알아두기
설치는 됐지만 PATH가 안 잡혔을 가능성. 해결:
- 터미널(CMD/PowerShell)을 새로 열어보기 — 90%는 이걸로 해결
- 그래도 안 되면 노트북 재부팅
- 그래도 안 되면 강사 호출
GitHub Desktop을 쓰면 자동 로그인되어 이 문제가 거의 없습니다. 만약 발생하면:
- GitHub Desktop에서 한 번이라도 Push를 했는지 확인 (첫 Push 시 GitHub 로그인 창 뜸)
- 로그인 창에서 GitHub 계정으로 로그인하면 이후 자동
- VS Code를 완전히 종료 후 재시작
- 확장 페이지에서 "다시 로드(Reload)" 버튼 클릭
- 브라우저에서 claude.ai 로그인 상태 확인
- 가입 직후 "New Project" 클릭
- Organization은 자동 생성된 것 그대로
- Project name: 영문 소문자 (예: my-first-app)
- Database Password: 강력하게 설정 후 반드시 메모
- Region: Northeast Asia (Seoul) 선택
- "Create new project" → 2~3분 대기
아래 3가지가 되면 다음 단계로!
- VS Code 열고 Claude 아이콘이 사이드바에 보인다
- GitHub Desktop 열고 내 계정이 보인다
- 터미널에서 `node -v` 실행하면 버전이 나온다
2단계 · 개발 — 내 트랙대로
이 단계부터 트랙별로 흐름이 갈립니다. 자기 트랙 박스를 펼쳐서 따라가세요.
트랙 A는 Claude Desktop 앱에서 진행합니다. VS Code는 켜둘 필요 없어요. 위 환경 셋업은 트랙 A 분도 다음 트랙·집에 가서 추가 작업할 때를 위해 해두면 좋습니다.
개발 흐름
- Claude Desktop 열기 → 지난 법령내비 대화 찾기
- 개선 포인트 2~3개 정해서 요청
- 하나씩 적용하며 대화로 다듬기
- 완성 후 대화 이름을 "법령내비 v2"로 변경
트랙 B는 기존 제로서치 레포에서 이어 작업합니다.
개발 흐름
- GitHub Desktop에서 기존 제로서치 레포 클론 (또는 풀)
- VS Code에서 그 폴더 열기
- Claude 확장에서 아래 프롬프트로 시작
트랙 C는 4종 문서 세트를 이미 만든 상태에서 시작합니다. 아직 안 만드셨다면 트랙 C 가이드에서 4종 세트부터 완성하고 오세요.
개발 흐름
- GitHub Desktop에서 새 레포 생성 (영문 소문자+하이픈)
- 레포 폴더에 4종 세트 파일 모두 복사 (PRD/CLAUDE/README/current_status)
- Commit & Publish (Private 권장)
- VS Code에서 레포 폴더 열기
- Claude 확장에서 아래 프롬프트로 시작
개발 시작 프롬프트
이 프롬프트의 핵심은 "먼저 4개 다 읽고 → 계획 요약 → 내 확인 후 Phase 1 시작"입니다. 바로 코드 짜지 않고 한 박자 두는 게 안정적이에요.
Phase 진행 중 한 마디
한 Phase 끝낼 때마다 이 한 마디를 추가하세요:
세션이 끊겨도 새 대화에서 이 한 마디면 끝:
2단계 막힐 때
막혔을 때의 흐름과 프롬프트 패턴은 이 페이지 아래쪽의 "트러블슈팅 원칙 — 강사 부르기 전에" 섹션에 자세히 정리되어 있습니다.
핵심만: 빨강 글씨 보이면 → 그대로 복사해서 Claude에게 → 안 되면 더 구체적으로 다시 → 그래도 안 되면 강사
3단계 · 확장 (선택)
여기는 "오늘 못해도 OK, 집에 가서 해도 OK"인 단계입니다. 시간이 남으면 도전, 부담스러우면 건너뛰세요.
1. README 다듬기 + GitHub 정리 — 가장 쉽고 임팩트 큼
2. Vercel 배포 — 인터넷에 올려서 공유하기
3. Supabase 연동 — DB가 필요한 앱일 때
확장 1 · README 다듬기 + GitHub 정리
가장 적은 시간 투자로 가장 큰 효과. 5분이면 끝.
확장 2 · Vercel 배포
만든 앱을 인터넷에 올려서 누구나 접속할 수 있게 합니다. GitHub 레포만 있으면 됩니다.
- vercel.com 접속 → 로그인 (GitHub 계정으로)
- "Add New..." → "Project" 클릭
- 오늘 만든 GitHub 레포 선택 → "Import"
- Framework Preset 자동 감지 (Next.js / Vite / Other 등)
- 환경 변수가 필요하면 "Environment Variables"에 입력
- "Deploy" 클릭 → 1~2분 대기
- 배포 완료되면 URL 받음 (예: my-app-xxx.vercel.app)
막힐 때: 빌드 에러 발생 시 Vercel 화면의 로그를 복사해서 Claude에게:
확장 3 · Supabase 연동
DB가 필요한 앱일 때만 진행하세요. 예: 사용자 정보 저장, 여러 사람이 쓰는 앱, 데이터를 누적 저장하고 싶을 때.
Supabase 연동은 처음 하면 30~60분 걸립니다. 워크숍 시간 안에 못 끝낼 가능성이 높아요. 가입까지만 해두고, 연동은 집에 가서 천천히 하는 것을 권장합니다.
1. Supabase 프로젝트에서 테이블 만들기
- supabase.com 로그인 → 프로젝트 선택
- 왼쪽 메뉴 "Table Editor" → "New table"
- 테이블 이름·컬럼 설정 (또는 SQL Editor로 CREATE TABLE)
2. API 키 가져오기
- 왼쪽 메뉴 "Project Settings" → "API"
- "Project URL"과 "anon public" 키 복사
- (절대 공개 금지 — GitHub에 직접 올리지 말 것)
3. Claude에게 연동 요청
⚠️ .env 파일이 .gitignore에 포함되어 있는지 반드시 확인. 키가 GitHub에 올라가면 즉시 무효화해야 합니다.
Supabase 첫 연동은 정말 어렵습니다. 화면 어디서 뭘 클릭해야 하는지, 어떤 키를 어디서 가져오는지, 헷갈리는 게 한두 가지가 아니에요. 한 번에 다 하려 하지 말고, Claude Code에게 단계별로 자세히 물어보세요.
막힐 때 이렇게 물어보세요:
예시 질문들:
- "Supabase에서 테이블 만들었는데 anon key를 어디서 찾아야 해?"
- "RLS(Row Level Security)가 뭐야? 켜야 해 꺼야 해?"
- "SQL Editor에서 CREATE TABLE 문이 에러나. 이 에러 분석해줘: [에러 메시지]"
- ".env 파일을 만들었는데 Claude Code가 못 읽는 것 같아. 확인 방법 알려줘"
💡 "잘 모른다"고 솔직히 말하면 Claude가 훨씬 친절하게 설명해줍니다. 부끄러워하지 마세요.
🛟 트러블슈팅 원칙 — 강사 부르기 전에
오늘 가장 중요한 능력은 "코딩을 잘하는 것"이 아니라 "막혔을 때 스스로 풀어내는 능력"입니다. AI 시대의 개발은 곧 "AI에게 잘 물어보는 능력"이에요. 강사 한 명이 모든 사람의 문제를 풀어줄 수 없으니, 아래 3단계 흐름을 익혀두세요.
1단계. 에러·문제를 그대로 복사해서 Claude에게 → 80% 해결
2단계. Claude 답변이 안 통하면 더 구체적으로 다시 질문 → 15% 해결
3단계. 그래도 안 되면 강사 호출 (이미 두 번 시도한 상태로) → 마지막 5%
1단계 · 일단 AI에게 그대로 보여주기
가장 기본이자 가장 강력한 패턴입니다. 빨강 글씨 보이면 일단 복사해서 넣으세요.
패턴 1. 에러 메시지 그대로 붙이기
패턴 2. 원인부터 묻기
패턴 3. 무엇이 이상한지 설명하기
"에러 메시지는 빠짐없이 전부 복사"가 핵심입니다. 빨강 글씨만 보고 "에러났어"라고만 하면 Claude도 깜깜이입니다. 터미널이나 브라우저 콘솔에 뜬 메시지를 위부터 아래까지 모두 복사해서 넣으세요.
2단계 · Claude 답변이 안 통할 때
1단계 시도했는데 같은 에러가 또 난다면? Claude의 첫 답이 틀렸을 수 있어요. 더 구체적인 정보를 주면서 다시 물어보세요.
패턴 4. 시도한 것 + 안 된 결과 보여주기
패턴 5. 맥락 더 주기
패턴 6. "초등학생에게 설명하듯"
3단계 · 자가 진단 후 강사 호출
위 두 단계 시도해도 안 되면 강사 호출입니다. 단, 준비된 상태로 호출하세요. 강사도 빠르게 도울 수 있습니다.
1. "Claude에게 물어봤는데 [방법1, 2] 시도했어요"
2. "현재 에러는 [에러 메시지]예요"
3. "지금 어느 단계에 있어요" (Phase 2 중 데이터 수집 부분 등)
이 3가지를 한 호흡에 말할 수 있으면 강사가 30초 안에 도울 수 있습니다.
특수 상황별 트러블슈팅 프롬프트
대화 맥락이 꼬였습니다. 새 대화창을 열고 처음부터 다시 시작하세요. 트랙 C라면 4종 세트 덕분에 안전합니다.
GitHub Desktop을 쓰면 대부분 해결됩니다. 그래도 안 되면:
오늘 만든 앱이 동작하는 것보다 더 중요한 게 이거예요 — "AI에게 잘 물어보는 감각". 막힐 때 일단 AI에게 보여주고, 안 되면 더 구체적으로 다시 묻고, 그래도 안 되면 도움을 요청하는 흐름. 이 감각이 손에 익으면 어떤 도구를 만나도 두렵지 않습니다.
🏃 빨리 끝난 사람을 위한 가이드
사람마다 속도가 다 다릅니다. 1차 Phase가 일찍 끝났다면 멍하니 기다리지 말고 아래 6가지 중 끌리는 걸 골라 해보세요. 완성도를 한 단계 더 올리는 시간입니다.
속도별 추천 활동
| 남은 시간 | 추천 활동 |
|---|---|
| 15분 이내 | ① 스스로 테스트 + ② 동료 데모 받기 |
| 30분 이상 | ③ 다음 Phase 추가 + ④ README 다듬기 |
| 1시간 이상 | ⑤ Vercel 배포 + ⑥ Supabase 가입까지 |
① 스스로 테스트하기 — 가장 먼저
"앱이 돌아간다"와 "앱이 잘 작동한다"는 다릅니다. 빨리 끝났을수록 실제 사용자처럼 써보면서 구멍을 찾아내세요.
1. 정상적인 입력으로 한 번 실행 → 정상 출력 확인
2. 빈 입력으로 한 번 실행 → 에러 없이 메시지 떠야 함
3. 이상한 입력 (한글, 특수문자, 매우 긴 문자열)으로 → 죽지 않아야 함
4. 인터넷 끊고 실행 → 친절한 안내 메시지 떠야 함
5. 결과물이 보기 좋은지, 사용자가 이해할 수 있는지 살펴보기
문제 발견하면 Claude에게:
② 동료에게 데모 받기 — 빨리 끝난 사람끼리
혼자 보면 안 보이는 게 다른 눈으로 보면 보입니다. 옆자리 중에 비슷한 시점에 끝난 사람이 있으면 서로 5분씩 보여주세요.
보는 사람. "이게 뭐 하는 앱이에요?" 한 질문 던지고 끝까지 들어주기
만든 사람. 30초 소개 + 1~2분 시연 + 1분 "오늘 어려웠던 부분" 공유
보는 사람. 마지막에 "I Wish (이게 있으면 좋겠다)" 한 가지 던지기
💡 받은 "I Wish" 하나를 메모하고, 자기 앱에 반영할지 결정해서 Claude에게 요청하면 즉시 이터레이션 1회.
③ 다음 Phase 추가하기
MVP는 끝났는데 PRD에 못한 Phase가 남았다면, 그걸 진행하세요. 시간 남는 게 가장 큰 자산입니다.
④ README + GitHub 정리
완성도가 한 단계 올라가는 가장 쉬운 방법. 10분이면 충분합니다.
⑤ Vercel 배포
위쪽 "3단계 · 확장 (선택)"의 Vercel 배포 가이드 토글을 펼쳐서 따라가세요. 빌드 에러가 나면 로그를 복사해서 Claude에게 물어보면 됩니다.
⑥ Supabase 가입·연동 시도
"가입까지만"이라도 해두면 집에 가서 이어갈 수 있습니다. 위에 있는 Supabase 가이드와 "💎 꿀팁 — Claude Code에게 손잡고 가자" 박스 참고하세요.
오늘 빨리 끝났다면 단순히 시간을 때우지 마세요. "완성도를 한 단계 올리는 경험"이 진짜 자산입니다. ①번 자가 테스트, ④번 README 다듬기 두 가지만 해도 앱이 훨씬 진지해 보입니다.
💬 동료 피드백 + 전체 공유
현장 상황을 보면서 시간이 되면 진행합니다. 모두가 비슷한 시점에 마무리되면 함께 보는 시간을, 진도가 다 다르면 가볍게 진행해요.
가볍게 진행하는 동료 피드백
옆자리 1~2명과 자유롭게 보여주고 의견 나누기. 강제 아닙니다.
- 나는 무엇을 만들었는지 30초 소개
- 한 번 실행해서 보여주기 (1분)
- "I Wish (이게 있으면 좋겠다)" 한 가지 받기
받은 피드백 반영하기
받은 의견 중 하나를 골라 즉시 반영해보세요.
전체 공유 (시간 되면)
전체 모여서 각자 1~2분씩 시연. 시간이 빠듯하면 생략하거나 몇 분만 자원자 발표로 대체합니다.
💡 시연이 부담스러우면 안 해도 OK. 본인 GitHub URL만 강사에게 알려주는 것으로도 충분합니다.
🏁 오늘을 마치며
오늘 만든 결과물이 완벽하지 않아도 괜찮습니다. "코드 한 줄 못 쓴다"고 하셨던 분들이 자기만의 앱을 가지고 집에 돌아가는 것 — 그게 오늘의 성공입니다.
그리고 더 중요한 것 하나 — "AI에게 막힐 때마다 물어보는 감각"을 손에 넣었다는 것. 이건 앞으로 어떤 도구를 만나도 통하는 능력입니다.
이어서 계속 하기
다음 주부터는 이 앱을 매일 한 번씩 돌려보세요. 진짜 개선은 쓰면서 일어납니다. 막힐 때마다 오늘 배운 트러블슈팅 3단계로 풀어가세요.
- 매일 1번 실행 → 불편 발견 → 메모
- 주 1회 (예: 금요일 10분) → Claude Code로 한 가지 개선
- 1개월 후 돌아보면 진짜 "내가 쓰는 서비스"가 되어 있을 것
오늘 워크숍에서 가장 인상적인 순간은?
한 줄로 적어주세요. 다른 참가자들의 이야기도 함께 보입니다.
📝 오늘 워크숍 후기 — 꼭 남겨주세요
오늘의 경험을 짧게 남겨주시면, 다음 워크숍을 더 좋게 만드는 데 큰 도움이 됩니다. 5분이면 끝나요.
소요 시간 5분 · WOWD.LAB Check 설문 시스템