1 회 차 가 이 드

바이브 코딩 첫 만남

코드를 쓰지 않고, AI에게 말해서 앱을 만드는 경험

📅 5/9(토) 오전 9:00~12:00  |  충경 AI Lab실
← 전체 프로그램

오늘 뭘 하나요?

🎯 오늘의 목표

AI에게 말로 설명해서 앱을 만드는 "바이브 코딩"을 처음 체험합니다. 코딩 지식은 전혀 필요 없어요.

🔧 바이브 코딩이 뭔가요?

"이런 앱 만들어줘"라고 AI에게 말하면, AI가 알아서 코드를 짜주는 개발 방식이에요. 여러분은 무엇을 만들지만 생각하면 됩니다.

📦 준비물

없습니다! 전산실 PC를 사용하고, 필요한 도구는 수업 시간에 함께 설치해요.

💡 미리 생각해오면 좋은 것

"앱이 있으면 좋겠다" 싶은 것 아무거나! 크든 작든 상관없어요. 없어도 괜찮아요, 수업 시간에 함께 찾습니다.

이렇게 진행됩니다

9:00 ~ 9:20
📋 설문 & 서로 알아가기
간단한 설문에 응답하면 결과가 실시간으로 화면에 나타나요
👉 설문 참여하기
9:20 ~ 9:25
🗳️ 시연 앱 투표
3개 앱 중 하나를 골라요. 멘토가 눈앞에서 만듭니다
📌 시연 앱 프롬프트 보기 →
9:25 ~ 9:55
🔥 라이브 시연
멘토가 AI에게 한 줄 입력 → 앱이 뚝! → 써보고 문제 발견 → 고치는 과정까지
📌 시연 앱 프롬프트 보기 →
9:55 ~ 10:10
☕ 쉬는 시간
10:10 ~ 10:25
💻 Claude 데스크탑 설치
AI 도구를 설치합니다. 화면 보고 따라하면 끝!
📌 설치 방법 보기 →
10:25 ~ 10:30
🎲 챌린지 주제 선택
5개 주제 중 팀별로 하나를 골라요
📌 챌린지 프롬프트 보기 →
10:30 ~ 10:50
🚀 직접 만들기 챌린지 (20분)
드디어 내가 직접! AI에게 말해서 앱을 만들어봅니다
📌 챌린지 프롬프트 보기 →
10:50 ~ 11:00
🔄 옆 팀 테스트 & 수정
옆 팀이 써보고 피드백 → 바로 고쳐보기
11:00 ~ 11:10
📢 팀별 공유
뭘 만들었고, 뭐가 어려웠는지 한마디씩
11:10 ~ 11:25
💡 아이디어 & 마무리
"앞으로 뭘 만들고 싶은지" 아이디어 적기

직접 만들어보세요

수업 시간에 멘토가 시연한 앱들이에요. 아래 프롬프트를 Claude에 붙여넣고 직접 만들어보세요. 수정 요청을 반복하면서 "질문의 기술"을 연습해보세요!

📅
당직 스케줄 생성기
인원 이름과 기간을 입력하면 자동으로 당직을 배정해주는 앱이에요.
시작 프롬프트
인원 이름을 입력하고 시작 날짜와 기간을 설정하면, 자동으로 당직 스케줄을 생성해서 캘린더로 보여주는 웹앱 만들어줘
  • 기본 결과가 나오면 "토요일, 일요일은 제외해줘"를 요청해보세요
  • "한 사람이 연속 2일 이상 배정되지 않게 해줘"도 시도해보세요
  • 애매하게 요청하면 AI가 엉뚱하게 만들어요. 구체적으로 요청할수록 결과가 좋아집니다!
💰
가계부 앱
수입과 지출을 입력하면 카테고리별 차트로 한눈에 보여주는 앱이에요.
시작 프롬프트
수입과 지출을 입력할 수 있고, 카테고리별로 분류해서 파이차트로 보여주는 가계부 웹앱 만들어줘. 이번 달 총 수입, 총 지출, 잔액도 보여줘
  • "각 항목 옆에 삭제 버튼을 추가해줘"를 요청해보세요
  • "카테고리를 직접 추가할 수 있게 해줘"도 시도해보세요
  • 처음에 "삭제 기능 추가해줘"라고 하면 전체 삭제만 생길 수 있어요. 어디에 어떤 삭제인지 구체적으로!
반응속도 테스트
화면이 초록색으로 바뀌면 최대한 빨리 클릭! 반응 속도를 측정하는 게임이에요.
시작 프롬프트
화면이 빨간색일 때 기다리다가 초록색으로 바뀌면 최대한 빨리 클릭하는 반응속도 테스트 게임 만들어줘. 반응 시간을 밀리초로 보여주고, 5번 테스트해서 평균도 알려줘
  • "빨간색일 때 클릭하면 '너무 일찍 눌렀습니다!' 메시지를 보여줘"를 요청해보세요
  • "최고 기록을 저장해서 보여줘"도 시도해보세요
  • "부정행위 방지해줘"처럼 애매하게 하면 AI가 헷갈려요. 정확히 어떤 상황에서 어떻게 처리할지 말해주세요
📌 연습의 핵심

처음 프롬프트로 만들어진 결과를 써보고 → 부족한 점을 찾고 → 구체적으로 수정 요청하는 과정을 반복해보세요. 이 과정 자체가 바이브 코딩의 핵심 실력이에요!

Claude 데스크탑 설치하기

수업 시간에 함께 하지만, 미리 해보고 싶다면 아래 순서대로 따라해보세요!

1
Claude 홈페이지 접속
아래 링크를 클릭해서 Claude 다운로드 페이지로 이동하세요.
https://claude.ai/download
2
내 컴퓨터에 맞는 버전 다운로드
Windows 컴퓨터라면 "Download for Windows" 버튼을 클릭하세요. Mac이라면 "Download for Mac"을 클릭하세요. 전산실 PC는 대부분 Windows입니다.
3
설치 파일 실행
다운로드된 파일을 더블클릭하면 설치가 시작됩니다. 특별한 설정 없이 "다음", "설치" 버튼만 눌러주세요. 1~2분이면 끝납니다.
4
로그인하기
설치가 완료되면 Claude 데스크탑이 자동으로 열립니다. 각자 개인 계정으로 로그인하세요. 구글 계정이나 이메일로 가입할 수 있습니다.
⚠️ 아직 계정이 없다면 미리 claude.ai에서 가입해두면 수업 시간에 바로 시작할 수 있어요!
5
Claude Code를 선택하면 Git 설치가 필요해요
Claude 데스크탑에서 "Claude Code"를 선택하면 "Git이 설치되어 있지 않습니다"라는 메시지가 나타날 수 있어요. 당황하지 마세요! 아래 순서대로 따라하면 됩니다.
5-1
Git 다운로드
아래 링크를 클릭해서 Git 다운로드 페이지로 이동하세요. "64-bit Git for Windows Setup"을 클릭하면 다운로드가 시작됩니다.
https://git-scm.com/download/win
5-2
Git 설치
다운로드된 파일을 더블클릭하면 설치 화면이 나타납니다. 모든 설정을 기본값 그대로 두고 "Next" → "Next" → ... → "Install"을 눌러주세요. 중간에 여러 옵션이 나오는데 아무것도 바꾸지 않아도 됩니다!
⚠️ 설치 중 "Adjusting your PATH environment" 화면이 나오면 기본 선택된 "Git from the command line and also from 3rd-party software"를 그대로 두세요.
5-3
환경 변수 설정 (Git이 인식이 안 될 때)
Git을 설치했는데도 Claude Code에서 "Git을 찾을 수 없다"고 나오면, 환경 변수를 직접 설정해야 합니다. 아래 순서를 정확히 따라해주세요.
A
시스템 속성 열기
키보드에서 Windows키(⊞) + R을 동시에 누르세요. "실행" 창이 나타납니다. 아래 텍스트를 복사해서 붙여넣고 확인을 누르세요.
sysdm.cpl
"시스템 속성" 창이 열립니다.
B
환경 변수 창 열기
시스템 속성 창에서 상단 탭 중 "고급" 탭을 클릭하세요. 그 다음 하단의 "환경 변수(N)..." 버튼을 클릭하세요.
C
새 사용자 변수 만들기
환경 변수 창에서 위쪽에 있는 "사용자 변수" 영역을 보세요. (아래쪽 "시스템 변수"가 아닙니다!) "새로 만들기(N)..." 버튼을 클릭하세요.
⚠️ 반드시 위쪽 "사용자 변수"에서 새로 만들기를 눌러주세요! 아래쪽 "시스템 변수"가 아닙니다.
D
변수 이름과 값 입력
"새 사용자 변수" 창이 열리면 두 칸에 아래 내용을 정확히 복사해서 붙여넣으세요.
변수 이름
CLAUDE_CODE_GIT_BASH_PATH
변수 값
C:\Program Files\Git\bin\bash.exe
두 칸 모두 입력했으면 "확인""확인""확인"을 눌러 모든 창을 닫아주세요.
⚠️ 오타가 나면 작동하지 않아요! 반드시 복사 버튼(📋)을 눌러서 붙여넣으세요.
E
Claude 데스크탑 재시작
환경 변수 설정이 끝나면 Claude 데스크탑을 완전히 종료했다가 다시 실행하세요. 이제 Claude Code가 정상적으로 작동합니다!
💡 Claude 데스크탑을 그냥 닫는 것이 아니라, 작업표시줄 트레이(화면 오른쪽 하단 ▲)에서 Claude 아이콘을 우클릭 → "종료"를 눌러 완전히 종료해야 합니다.
6
첫 대화 시작!
로그인이 되면 대화창이 나타납니다. 여기에 원하는 것을 입력하면 됩니다. 예를 들어 이렇게 입력해보세요:
안녕? 나는 바이브 코딩을 처음 배우는 사람이야. 간단한 인사 웹페이지를 만들어줘
결과가 나오면 성공! 🎉 설치가 잘 된 거예요.
🛠️ 설치가 안 될 때

설치 중 문제가 생기면 수업 시간에 멘토가 도와드립니다. 미리 못 해도 전혀 걱정하지 마세요! 웹 버전(claude.ai)으로도 동일하게 사용할 수 있습니다.

챌린지 주제별 시작 프롬프트

팀에서 고른 주제의 프롬프트를 복사해서 Claude에 붙여넣으세요. 여기서 시작하면 됩니다!

1. 디지털 명함 앱
내 이름, 직책, 연락처를 입력하면 예쁜 명함 카드가 나오는 웹앱 만들어줘
2. 오늘 뭐하지 앱
선택지를 직접 등록할 수 있고, 버튼 누르면 랜덤으로 하나 골라주는 앱 만들어줘
3. 가위바위보 대전
AI와 가위바위보 대결하는 앱 만들어줘. 내 선택이랑 AI 선택이랑 결과를 보여주고, 전적도 기록해줘
4. 숫자 야구
3자리 숫자를 맞추는 숫자 야구 게임 만들어줘. 숫자를 입력하면 스트라이크랑 볼 개수를 알려줘
5. 두더지 잡기
화면에 랜덤으로 나타나는 두더지를 클릭하면 점수가 올라가는 게임 만들어줘. 제한시간은 30초
📌 이 프롬프트는 "시작점"이에요

이걸로 시작하면 기본은 나옵니다. 거기서 더 원하는 게 있으면 AI에게 추가로 요청하세요. "색깔 바꿔줘", "애니메이션 넣어줘", "기능 추가해줘" 처럼요!

AI에게 잘 요청하는 법

❌ 이렇게 하지 마세요

"좀 더 예쁘게 해줘" → AI가 뭘 어떻게 바꿔야 할지 몰라요

✅ 이렇게 해보세요

"배경색을 파란색으로 바꾸고, 글씨 크기를 더 크게 해줘" → AI가 정확히 알아들어요

🔄 에러가 났을 때

당황하지 마세요! 에러 메시지를 그대로 복사해서 AI에게 보내면 됩니다. "이런 에러가 나는데 고쳐줘"라고요.

🤔 뭘 추가할지 모르겠을 때

AI에게 물어보세요! "이 앱에 어떤 기능을 추가하면 좋을까?" → AI가 아이디어도 줍니다.

오늘의 과제 & 복습

📝 이번 주 과제

Claude 데스크탑으로 아무 앱이나 1개 더 만들어오기. 주제는 완전 자유! 성공하든 실패하든 상관없어요. 다음 시간에 같이 얘기합니다.

오늘 배운 것 체크리스트

더 해보고 싶다면

🔥 도전 프롬프트 — 나만의 타이머
집중 시간과 휴식 시간을 설정할 수 있는 뽀모도로 타이머 앱 만들어줘. 타이머가 끝나면 알림 소리가 나게 해줘
🔥 도전 프롬프트 — 나만의 계산기
할인율을 입력하면 원래 가격에서 할인된 최종 가격을 계산해주는 앱 만들어줘. 부가세 포함 여부도 선택할 수 있게 해줘

자주 묻는 질문

Claude Pro 계정을 제공해주나요?
네! 모든 참가자에게 Claude Pro 계정을 제공하고 있습니다. 수업 시간에 안내해드릴 예정이니 별도로 결제하실 필요 없어요.
진짜 코딩을 몰라도 되나요?
네, 코드를 직접 쓰지 않습니다. AI에게 "이런 거 만들어줘"라고 말하면 AI가 코드를 만들어줘요. 여러분은 무엇을 만들지 생각하는 역할입니다.
만든 앱이 저장되나요?
Claude 데스크탑에서 만든 앱은 대화 내에 남아있어요. 3주차부터는 VS Code로 파일을 관리하고, 4주차에 인터넷에 배포까지 합니다.
수업 외 시간에도 연습할 수 있나요?
물론이요! 제공된 Claude Pro 계정으로 언제든 연습할 수 있습니다. 많이 해볼수록 AI에게 요청하는 실력이 빠르게 늘어요. 이 가이드의 프롬프트를 활용해서 자유롭게 만들어보세요.
다음 시간에는 뭘 하나요?
2주차(5/13 수)에는 "기획서(PRD)"를 배웁니다. 오늘 만들면서 "왜 자꾸 꼬이지?" 했던 이유를 알게 되고, 그걸 해결하는 방법을 익혀요. 기획서가 있으면 결과가 확 달라집니다!
6주 전체 일정이 궁금해요
1주차 5/9(토) — 바이브 코딩 첫 만남 (오늘!)
2주차 5/13(수) — 바이브 코딩을 위한 PRD
3주차 6/13(토) — 나만의 앱 만들기 시작
4주차 6/24(수) — 앱 완성 & 인터넷에 공개
5주차 7/22(수) — 피드백 반영 & 최종 마무리
6주차 8/1(토) — 발표 & 회고

6주 후에는 실제 URL로 접속 가능한 나만의 웹앱을 갖게 됩니다!