🤖 AI · IT 교육
바이브 코딩 입문 — AI로 코딩 없이 웹사이트 만들기
4시간 뒤, 본인 이름이 붙은 웹사이트 주소를 들고 나갑니다 — 코딩 지식 0, 필요한 건 노트북과 한국어뿐. 화면 제작부터 데이터 저장·인터넷 배포까지 전원 완주가 목표
⏱ 교육 시간4시간
🏢 교육 방식기업 출강 · 맞춤 설계
👤 담당 강사김종혁
✅ 핵심 성과외주 한 건 값이면 도구 74개월 — 견적 받는 부서에서 직접 만드는 부서로
코딩을 한 줄도 몰라도, 한국어로 말하면 AI가 코드를 짭니다. 수강생 전원이 클로드(Claude)와 클로드 코드로 자기 웹사이트를 직접 만들고, 파이어베이스(Firebase)로 방문자 입력이 실제 저장되는 기능을 연결하고, 깃허브 페이지(GitHub Pages)로 전 세계에 배포하는 것이 완주 조건인 4시간 실습형 교육입니다. 간단한 웹사이트 외주가 최소 200만 원인데 이 과정에서 쓰는 도구는 월 2만 7천 원 — 외주 한 건 값이면 도구를 74개월 쓸 수 있습니다. KPI는 만족도가 아니라 배포 완료율입니다. 8개 관문(Gate)마다 전원 통과를 확인한 뒤에만 다음 단계로 넘어가고, 프롬프트 카드 6종 · 진행표 · 용어사전을 제공해 복귀 후에도 같은 방식을 반복할 수 있게 합니다. 배포 후에는 2인 1조 팀 미션과 발표로 마무리합니다. 준비물은 프로그램 설치가 가능한 노트북과 한국어뿐입니다. (총 4시간, 휴식 2회 포함)
💻 이 주제, 온라인 강의로 먼저 배워보기 →누구를 위한 과정인가요?
코딩 경험이 전혀 없는 기업 실무자를 위한 과정입니다. 기획 · 마케팅 · 운영 · 인사 등 비개발 직군이 주 대상이며, 준비할 코딩 지식은 없습니다. 필요한 것은 프로그램 설치가 가능한 개인 노트북과 한국어뿐입니다. 실습 순회 지도가 가능한 규모로 정원을 권장하며, 2인 1조 짝꿍 운영을 병행합니다.
무엇을 배우나요?
- 내 이름이 붙은 실제 웹사이트 주소(github.io)를 직접 만들어 인터넷에 배포한다 — 명함에 적을 수 있는 결과물
- 방문자가 입력한 데이터가 실제로 저장되는 기능을 파이어베이스(Firebase)로 직접 연결하고 저장 여부를 검증한다
- 'AI에게 시켜서 만든다'는 재현 가능한 작업 방식을 프롬프트 카드 6종으로 익혀, 교육이 끝난 뒤에도 혼자 반복할 수 있게 한다
- LLM · 코딩 에이전트 · Git · 배포 등 오늘 실습에 등장한 핵심 개념 24개의 실전 감각을 갖춘다 (연결형 용어사전 제공)
- 팀 미션으로 배운 방식을 실제 업무 아이디어에 적용해 만들어 보고, 발표로 서로의 결과물을 공유한다
커리큘럼
모듈1 : AI가 코드를 짜는 원리와 도구 준비 (1시간)
- 오프닝 — 외주 200만 원 vs 월 2.7만 원, '기획자가 곧 제작자'가 되는 시대 · 만들고 싶은 사이트 인터뷰
- LLM은 두뇌, 코딩 에이전트는 손발 — 과거엔 왜 어려웠고 지금은 왜 대화창 하나로 되는가
- 클로드(Claude) 다운로드 → 로그인 → 코드 탭 열기 전원 실습 · ✅ Gate 1 : 「코드」 탭이 보인다
- Git·GitHub — 게임 세이브 파일과 인터넷 창고 · 설치와 연동 · ✅ Gate 2 : 재시작해 인식 확인 · ✅ Gate 3 : "GitHub에 올려줘" 실행
모듈2 : 내 소개 사이트 만들기 — 말로 만들고, 말로 고친다 (1시간)
- 웹의 구조 — 보이는 화면(프론트엔드)과 태엽(백엔드), 오늘 만들 것의 3단계 지도
- 프롬프트 카드를 그대로 입력해 내 소개 사이트 제작
- "제목을 더 크게", "배경색을 바꿔 줘" — 한국어로 말해서 수정하는 연습
- ✅ Gate 4 : 브라우저에 내 소개 화면이 보인다 · ✅ Gate 5 : 내 GitHub 저장소에 코드가 올라갔다
모듈3 : 데이터 저장과 배포 — 기능 있는 사이트를 세상에 공개 (1시간)
- '매니저 두 명' 비유 — 데이터는 어디에, 어떻게 저장되는가
- 쓰던 구글 계정 그대로 파이어베이스(Firebase) 프로젝트 생성 → 내 사이트와 연결 → 입력값 저장 검증 · ✅ Gate 6 : 대시보드가 보인다 · ✅ Gate 7 : 입력한 값이 데이터베이스에 찍혔다
- 깃허브 페이지(GitHub Pages)로 전 세계 공개 · 이후 수정하면 자동 반영되는 업데이트 구조
- ✅ Gate 8 : 내 github.io 주소가 나왔다 — 완주, 진행표에 내 사이트 주소를 직접 기록
모듈4 : 팀 미션과 발표 — 배운 방식을 우리 일에 적용 (1시간)
- 2인 1조 팀 미션 — 오늘 배운 방식으로 실제 업무 아이디어(팀 소개 · 행사 안내 · 간단한 접수 화면 등)를 사이트로 구현
- 팀별 발표와 상호 피드백 — 만든 것을 보여 주며 '어떻게 시켰는지' 프롬프트를 공유
- 마무리 — 3줄 요약과 전체 지도 복습 · 1주일 후속 과제 · 다음 단계 안내(API로 확장하는 바이브 코딩, 실무형 8시간 심화) · Q&A
기대 효과 / 수료 후
- 외주 한 건 값이면 도구 74개월 — 견적 받는 부서에서 직접 만드는 부서로
- 산출물이 보장되는 교육 — Gate 8단계를 전원이 통과해야 다음 단계로 넘어가는 운영 방식으로, 교육이 끝나는 시점에 참가자 손에 실제 배포된 웹사이트 주소가 남는다
- 재현 가능한 역량 — 프롬프트 카드 · 진행표 · 용어사전이 함께 제공되어, 교육장에서 한 번 해 본 경험이 아니라 복귀 후에도 반복 가능한 업무 방식이 된다
추천 온라인 강의
온라인 강의로 먼저 배워보기
출강 도입 전에, 이 주제의 핵심을 온라인 강의로 미리 경험해 보세요.
자주 묻는 질문
코딩 경험이 전혀 없는 기업 실무자를 위한 과정입니다. 기획 · 마케팅 · 운영 · 인사 등 비개발 직군이 주 대상이며, 준비할 코딩 지식은 없습니다. 필요한 것은 프로그램 설치가 가능한 개인 노트북과 한국어뿐입니다. 실습 순회 지도가 가능한 규모로 정원을 권장하며, 2인 1조 짝꿍 운영을 병행합니다.
네. 한국어로 말하면 AI가 코드를 짭니다. 실습은 책상에 놓인 프롬프트 카드를 그대로 입력하는 방식으로 진행되고, 수정도 "제목을 더 크게 해 줘"처럼 말로 합니다. 8개 관문(Gate)마다 전원이 통과했는지 확인한 뒤에만 다음 단계로 넘어가므로, 중간에 막혀서 혼자 뒤처지는 구조가 아닙니다.
네. 실습에 쓰는 클로드의 「코드」 기능은 무료 계정에서 열리지 않아, 클로드 Pro 구독(월 $20 ≈ 2만 7천 원)이 필요합니다. 교육 전에 구독하고 교육 후 해지해도 됩니다. GitHub와 Firebase는 무료 계정으로 충분합니다. ※ 클로드 요금제는 Anthropic 정책에 따라 변동될 수 있습니다. (2026년 8월 기준 Pro 월 $20)
프로그램 설치 권한이 있는 계정이면 가능합니다. 설치가 막혀 있는 경우가 있으니 사전에 확인이 필요하며, 사내망에서 claude.ai · github.com · firebase.google.com 접속이 되는지도 미리 확인해 주세요. 설치나 접속이 어려운 환경이면 사전 협의로 대안을 안내드립니다. 담당자용 사전 안내문(발송용 템플릿 · 강의장 체크리스트 포함)은 계약 시 별도 제공합니다.
교육비는 인원 · 시간 · 지역에 따라 별도 견적으로 안내드립니다. 페이지에 나오는 '월 2.7만 원'은 교육비가 아니라 수강생이 실습에 쓰는 도구(클로드 Pro)의 구독료입니다. 문의를 남겨 주시면 24시간 안에 회신드립니다.
표준은 팀 미션과 발표까지 포함한 4시간입니다. 팀 미션을 제외하고 개인 사이트 배포까지 완주하는 3시간 집중형, 핵심 흐름만 시연 중심으로 다루는 2시간 축약형으로도 운영합니다. 조직의 목표와 일정에 맞춰 조정해 드립니다.
바이브 코딩 입문 — AI로 코딩 없이 웹사이트 만들기
4시간 뒤, 본인 이름이 붙은 웹사이트 주소를 들고 나갑니다 — 코딩 지식 0, 필요한 건 노트북과 한국어뿐. 화면 제작부터 데이터 저장·인터넷 배포까지 전원 완주가 목표
교육 목표
- 내 이름이 붙은 실제 웹사이트 주소(github.io)를 직접 만들어 인터넷에 배포한다 — 명함에 적을 수 있는 결과물
- 방문자가 입력한 데이터가 실제로 저장되는 기능을 파이어베이스(Firebase)로 직접 연결하고 저장 여부를 검증한다
- 'AI에게 시켜서 만든다'는 재현 가능한 작업 방식을 프롬프트 카드 6종으로 익혀, 교육이 끝난 뒤에도 혼자 반복할 수 있게 한다
- LLM · 코딩 에이전트 · Git · 배포 등 오늘 실습에 등장한 핵심 개념 24개의 실전 감각을 갖춘다 (연결형 용어사전 제공)
- 팀 미션으로 배운 방식을 실제 업무 아이디어에 적용해 만들어 보고, 발표로 서로의 결과물을 공유한다
기대 효과
- 외주 한 건 값이면 도구 74개월 — 견적 받는 부서에서 직접 만드는 부서로
- 산출물이 보장되는 교육 — Gate 8단계를 전원이 통과해야 다음 단계로 넘어가는 운영 방식으로, 교육이 끝나는 시점에 참가자 손에 실제 배포된 웹사이트 주소가 남는다
- 재현 가능한 역량 — 프롬프트 카드 · 진행표 · 용어사전이 함께 제공되어, 교육장에서 한 번 해 본 경험이 아니라 복귀 후에도 반복 가능한 업무 방식이 된다
커리큘럼
Module 1모듈1 : AI가 코드를 짜는 원리와 도구 준비 (1시간)
- 오프닝 — 외주 200만 원 vs 월 2.7만 원, '기획자가 곧 제작자'가 되는 시대 · 만들고 싶은 사이트 인터뷰
- LLM은 두뇌, 코딩 에이전트는 손발 — 과거엔 왜 어려웠고 지금은 왜 대화창 하나로 되는가
- 클로드(Claude) 다운로드 → 로그인 → 코드 탭 열기 전원 실습 · ✅ Gate 1 : 「코드」 탭이 보인다
- Git·GitHub — 게임 세이브 파일과 인터넷 창고 · 설치와 연동 · ✅ Gate 2 : 재시작해 인식 확인 · ✅ Gate 3 : "GitHub에 올려줘" 실행
Module 2모듈2 : 내 소개 사이트 만들기 — 말로 만들고, 말로 고친다 (1시간)
- 웹의 구조 — 보이는 화면(프론트엔드)과 태엽(백엔드), 오늘 만들 것의 3단계 지도
- 프롬프트 카드를 그대로 입력해 내 소개 사이트 제작
- "제목을 더 크게", "배경색을 바꿔 줘" — 한국어로 말해서 수정하는 연습
- ✅ Gate 4 : 브라우저에 내 소개 화면이 보인다 · ✅ Gate 5 : 내 GitHub 저장소에 코드가 올라갔다
Module 3모듈3 : 데이터 저장과 배포 — 기능 있는 사이트를 세상에 공개 (1시간)
- '매니저 두 명' 비유 — 데이터는 어디에, 어떻게 저장되는가
- 쓰던 구글 계정 그대로 파이어베이스(Firebase) 프로젝트 생성 → 내 사이트와 연결 → 입력값 저장 검증 · ✅ Gate 6 : 대시보드가 보인다 · ✅ Gate 7 : 입력한 값이 데이터베이스에 찍혔다
- 깃허브 페이지(GitHub Pages)로 전 세계 공개 · 이후 수정하면 자동 반영되는 업데이트 구조
- ✅ Gate 8 : 내 github.io 주소가 나왔다 — 완주, 진행표에 내 사이트 주소를 직접 기록
Module 4모듈4 : 팀 미션과 발표 — 배운 방식을 우리 일에 적용 (1시간)
- 2인 1조 팀 미션 — 오늘 배운 방식으로 실제 업무 아이디어(팀 소개 · 행사 안내 · 간단한 접수 화면 등)를 사이트로 구현
- 팀별 발표와 상호 피드백 — 만든 것을 보여 주며 '어떻게 시켰는지' 프롬프트를 공유
- 마무리 — 3줄 요약과 전체 지도 복습 · 1주일 후속 과제 · 다음 단계 안내(API로 확장하는 바이브 코딩, 실무형 8시간 심화) · Q&A
강사소개
김종혁 대표강사
현업 경력 10년 / 강의 경력 15년 (3,000여회 강의)
학력
ㆍ고려대 경영전문대학원 MBA (졸업 ) 경영학 석사 (심화전공 - 마케팅)
ㆍ성균관대 컨설턴트 과정 (수료)
ㆍ서강대 경영전문대학원 단기 MBA (수료)
ㆍ서울대 평생교육 강사육성과정 (수료)
ㆍ중앙대 영어영문학과 (졸업) 영문학 학사
경력
ㆍ(現) 나눔경영컨설팅 (NANUM Consulting) 대표
ㆍ(前)(주)효성, (주)대덕전자, (주)신한다이아몬드 해외주재원, 전략기획 담당 (10年↑)
ㆍ(現) 엑스퍼트컨설팅 협력강사
ㆍ(現) PSI컨설팅 협력강사
ㆍ(現) 중소기업청, 중소기업연수원 협력강사
자격 · 저서
ㆍ컨설턴트 자격증 보유
ㆍ교사자격증 보유
ㆍIDEO 디자인씽킹 공식교육 수료
ㆍB2B 마케팅 설계 (2025.4.1)
ㆍ중국 다이아몬드 공구시장 현황과 미래 (한국 공구협회 공저)
ㆍ역사를 바꾼 전투와 혁신적인 무기 (집필중)