① "Hobby" 선택 → 이름 입력 → Continue ② "Continue with GitHub" (까만 버튼) ③ "Authorize Vercel" 초록 버튼 → 자동 연결!
🎉 설치 완료!
Claude 데스크탑 · Git · VS Code · GitHub · Vercel — 5개 도구가 모두 준비됐어요. 이제 다음 회차부터는 설치 없이 만들기에만 집중합니다!
STEP 3
🎮 첫 앱 만들어보기
이제 진짜 만들어볼 차례예요. 오늘은 다 같이 같은 주제로 만듭니다. 아래 3개 중 하나를 골라 Claude에 붙여넣어보세요.
① 당직 스케줄 생성기
인원 이름을 입력하고 시작 날짜와 기간을 설정하면, 자동으로 당직 스케줄을 생성해서 캘린더로 보여주는 웹앱 만들어줘
② 반응속도 테스트 게임
화면이 빨간색일 때 기다리다가 초록색으로 바뀌면 최대한 빨리 클릭하는 반응속도 테스트 게임 만들어줘. 반응 시간을 밀리초로 보여주고, 5번 테스트해서 평균도 알려줘
③ 간단 가계부
수입과 지출을 입력할 수 있고, 카테고리별로 분류해서 파이차트로 보여주는 가계부 웹앱 만들어줘. 이번 달 총 수입, 총 지출, 잔액도 보여줘
만들어졌다면 — 이제 고쳐보세요
바이브 코딩의 진짜 실력은 "만들기"가 아니라 "고치기"에서 나옵니다. 아래처럼 요청해보세요.
💬 수정 요청 예시
"여기에 삭제 버튼을 각 항목 옆에 추가해줘"
"글씨가 너무 작아. 모바일에서 보기 좋게 키워줘"
"색상을 좀 더 차분한 톤으로 바꿔줘"
💡 애매하게 말하면 엉뚱하게 나와요
"삭제 기능 추가해줘"라고 하면 전체 삭제만 생길 수 있어요. "각 항목 오른쪽에 X 버튼을 만들고, 누르면 그 항목만 지워줘"처럼 구체적으로!
STEP 4 — 오늘 가장 중요한 시간
💡 내 문제 정의하기
다음 주부터는 이걸로 계속 만듭니다. 최종 발표까지 가져갈 앱이니 오늘 안에 정해야 해요. 집에서 생각해오는 게 아니라 지금 이 자리에서 정합니다.
1️⃣ "어떤 앱?"이 아니라 "무슨 문제?"
대부분 이렇게 시작합니다. "나 이런 앱 만들 거야." 그런데 여기엔 함정이 있어요. 만들 앱을 먼저 정해버리면 AI는 딱 내가 상상한 그만큼만 만들어줍니다. 내 상상력이 한계가 되는 거예요.
✕ 답을 정해놓고 시작
"당직 스케줄 앱 만들어줘"
이미 정한 답을 AI에게 코딩만 시키는 것. AI를 내 상상력 안에 가둡니다.
✓ 문제를 정해놓고 시작
"이 문제를 풀고 싶어"
문제를 명확히 주고 AI와 협업. AI가 진단하고 더 나은 해법을 설계할 여지가 열립니다.
2️⃣ 문제는 "맥락"이 있어야 살아납니다
누가 · 어떤 상황에서 겪는 불편인지를 구체적으로 적어야 해요. 여기서 대부분 너무 뭉뚱그립니다.
✕ 뭉뚱그린 상태
"당직 편성하는 게 매번 번거롭다."
누가? 무엇이 왜 번거로운지? 아무것도 없습니다. 이 상태로 주면 AI도 평균적인 답만 내놓아요.
✓ 맥락이 구체화된 상태
"인사 담당 3년차 김 중사는 매달 30여 명의 당직을 편성한다. 휴가·교육·훈련 일정을 각각 따로 확인해가며 엑셀로 짜는데, 중복 배정이 나면 전부 다시 맞춰야 해서 매번 두세 시간이 든다."
누가(김 중사), 어떤 맥락(30명·월 단위), 무엇이 왜 문제(중복 배정·재작업·시간)인지가 다 보입니다. 이 정도라야 AI가 정확히 진단하고 딱 맞는 해법을 설계해요.
3️⃣ 먼저 펼쳐보세요 (발산)
처음부터 완벽한 문제 하나를 찾으려 하지 마세요. 요령은 반대입니다. 누구의 · 어떤 상황의 어려움인지 최대한 많이 펼쳐보는 것이에요.
발산 프롬프트 — 혼자 짜내지 말고 AI와 함께
나는 부대에서 [내가 하는 업무]를 담당하고 있어.
우리 부서 사람들이 업무하면서 겪는 불편을
최대한 많이 같이 펼쳐보고 싶어.
"누가 · 어떤 상황에서 · 무엇이 불편한지" 형태로
10가지 정도 나열해줘.
아직 해결책은 말하지 말고, 문제만 펼쳐줘.
💡 펼치면 이런 일이 생깁니다
① 보지 못했던 문제까지 보이기 시작한다
② 문제들 사이에서 패턴이 보인다
③ 그 패턴에서 새로운 관점이 떠오른다
④ 무엇부터 풀어야 할지 우선순위가 판단된다
4️⃣ 펼친 문제를 POV 한 문장으로
이제 핵심 문제를 한 문장으로 언어화할 차례입니다. 그 도구가 POV(Point Of View)예요. 이 문제를 어떤 관점에서 봐야 하는지, 왜 풀어야 하는지를 한 문장에 담습니다.
WHO
누가 (구체적인 그 사람)
WHAT
무엇이 필요한가 (진짜 니즈)
WHY
왜 중요한가 (그 이유)
김 중사 사례를 POV로
WHO 매달 30여 명의 당직을 편성하는 인사 담당 김 중사는
WHAT 휴가·교육 일정을 일일이 대조하는 수작업을 덜어내고 싶다.
WHY 중복 배정이 날 때마다 전부 다시 짜야 해서, 정작 중요한 일이 밀리기 때문이다.
POV 정리 프롬프트
펼친 문제 중에서 [고른 문제]가 제일 와닿아.
이걸 POV 한 문장으로 정리해줘.
- WHO: 누가 (구체적인 그 사람)
- WHAT: 무엇이 필요한가
- WHY: 왜 중요한가
그리고 이 POV를 풀 수 있는 앱의 핵심 기능 3개도 뽑아줘.
5️⃣ 이 문제, 앱이 될까? — 4가지로 가늠하기
아래 질문에 하나라도 "그렇다"면 시작해도 좋습니다.
❓ 반복되는가
매일·매주 반복하는 일인가? 반복될수록 앱으로 만들 가치가 큽니다.
❓ 기록하거나 계산하는가
뭔가를 적어두거나, 세거나, 계산하는 일인가?
❓ 지금 불편한가
엑셀·수첩·머릿속으로 억지로 하고 있는 일인가?
❓ 화면으로 보면 나은가
눈으로 보이면 더 편해질 일인가?
⚠️ 여기에 더해 결제·회원가입·AI가 핵심이면 기간 안에 완성이 어렵습니다. 그런 기능은 빼고 접근하세요.
💡 80% 마음에 들면 그걸로 정하세요
완벽한 문제를 찾다가 시간을 다 씁니다. 만들면서 발전시키는 게 훨씬 빨라요. 3회차까지는 바꿀 수 있고, 4회차부터는 고정합니다.
✅ 오늘 나가기 전에 메모할 것
① POV 한 문장 (WHO·WHAT·WHY) ② 앱 이름 ③ 핵심 기능 3개
이 POV가 다음 주 PRD의 첫 줄이 됩니다. 그대로 이어집니다!
문제 해결
막히면 확인하세요
npm을 찾을 수 없다는 오류가 나요
Node.js가 없어서 그래요.
① nodejs.org → 왼쪽 LTS 버튼
② 기본값으로 설치
③ VS Code 완전 종료 후 재실행 (이게 중요!)
④ 터미널 새로 열고 다시 입력
⑤ 확인: node -v 입력 → v20.x.x 같은 버전이 나오면 정상
Claude Code에서 Git을 못 찾는다고 해요
환경 변수를 설정해야 합니다. 위의 1-3. 환경 변수 설정 A~E를 그대로 따라하세요. 특히 "사용자 변수"에 만들어야 하고(시스템 변수 아님), 설정 후 Claude 데스크탑을 트레이에서 완전 종료했다가 다시 켜야 적용됩니다.
GitHub 인증 메일이 안 와요
스팸함을 먼저 확인하세요. 그래도 없으면 "Resend code"를 누르거나, 구글 계정 가입 방식으로 바꿔보세요.
앱이 만들어지다가 중간에 멈춰요
채팅창에 "계속해줘" 또는 "이어서 완성해줘"라고 입력하면 이어서 작업합니다.
권한 허용 창이 계속 떠요
"항상 허용"을 선택하세요. 같은 종류의 작업은 그 뒤로 묻지 않습니다.
에러 메시지가 떴어요
에러는 적이 아니라 힌트예요. 메시지를 요약하지 말고 통째로 복사해서 "이런 에러가 났어. 고쳐줘."와 함께 Claude에게 보내면 됩니다.
수업이 끝나면
내일 준비 & 체크리스트
📝 내일(10/3 토)까지 준비할 것
딱 하나 — 오늘 정한 내 앱 아이디어를 잊지 않기.
메모장에 적어둔 앱 이름 · 한 문장 설명 · 핵심 기능 3개를 내일 가져오세요. 내일은 이걸로 바로 PRD를 쓰고 배포까지 갑니다!
⏰ 내일은 연속 수업입니다
10/3(토) 13:00~16:00. 오늘 설치한 환경 그대로 씁니다. 오늘 못 끝낸 설치가 있으면 내일 시작 전에 도와드릴게요.
오늘 배운 것 체크리스트
Claude 데스크탑을 설치하고 로그인했다
Git을 설치했다 (필요하면 환경 변수까지)
VS Code를 설치하고 Claude를 연결했다
GitHub 계정을 만들고 GitHub Desktop을 연결했다
Vercel에 가입했다
AI에게 요청해서 첫 앱을 만들어봤다
만든 앱을 한 번이라도 고쳐봤다
내 앱 아이디어를 정하고 메모했다
궁금한 것
자주 묻는 질문
Claude Pro 계정을 제공해주나요?
개인적으로 결제 후 비용을 지급합니다. 각자 본인 계정으로 Claude Pro를 결제해서 사용하시고, 결제 내역을 제출하면 비용을 지급해드립니다.
진짜 코딩을 몰라도 되나요?
네, 코드를 직접 쓰지 않습니다. AI에게 "이런 거 만들어줘"라고 말하면 AI가 코드를 만들어줘요. 여러분은 무엇을 만들지 생각하는 역할입니다.
왜 이렇게 설치할 게 많나요?
각 도구의 역할이 달라요.
· Claude — 코드를 만들어주는 AI
· Git — Claude Code가 작동하는 데 필요한 기반
· VS Code — 만들어진 파일을 보고 관리하는 편집기
· GitHub — 코드를 안전하게 저장하는 인터넷 저장소
· Vercel — 내 앱을 인터넷에 올려주는 서비스
오늘 한 번에 다 해두면, 다음부터는 만들기에만 집중할 수 있습니다.
오늘 만든 앱은 계속 쓰나요?
아니요. 오늘 만든 건 "이렇게 만들어지는구나"를 체험하는 연습이에요. 내일부터는 각자 정한 내 앱으로 처음부터 다시 시작합니다.
아이디어를 나중에 바꿔도 되나요?
3회차(10/9)까지는 가능합니다. 4회차부터는 본격적인 개발 구간이라 바꾸면 시간이 부족해져요. 80% 마음에 들면 일단 시작하면서 발전시키는 걸 권합니다.
다음 시간에는 뭘 하나요?
2회차(10/3 토)에는 오늘 정한 내 아이디어로 PRD를 쓰고, 개발해서, 인터넷에 배포까지 합니다. 내일 끝날 때 여러분 앱의 진짜 URL이 생겨요!