PRACTICE 01
바이브코딩 기초 웹앱
AI에게 원하는 기능을 설명하고 첫 웹앱을 구현합니다.
간단한 랜덤 점심 메뉴 추천기를 만들면서 화면 구성, 사용자 입력, 조건 처리, 결과 출력, 오류 수정의 기본 원리를 배웁니다.
처음부터 어려운 코딩 문법을 외울 필요는 없습니다. AI에게 어떻게 요청하고 결과를 검증해야 하는지 경험하는 것이 목표입니다.
01 · OVERVIEW
과정 개요
라이브 퀴즈, 음악 퀴즈, 업무 관리 도구, 팔로워십 진단까지. 평소 사용하던 프로그램을 직접 만들 수 있다면 어떨까요?
바이브코딩은 AI와 대화하며 필요한 기능을 구현하고, 결과물을 확인하고, 수정하는 새로운 개발 방식입니다.
이번 과정에서는 단순히 AI에게 코드를 작성해 달라고 요청하는 데서 끝나지 않습니다. 내가 해결하고 싶은 문제를 정의하고, 필요한 기능과 화면을 설계하고, Claude Code를 활용해 실제 작동하는 웹앱을 만들어봅니다.
교육을 마친 뒤에는 자신만의 웹앱 프로젝트에 도전할 수 있도록 기획 방법과 개발 과정을 익힙니다.
과정명
코딩 몰라도 시작하는 바이브코딩
교육 대상
코딩 비전공자, HR·HRD 담당자, 일반 직장인 등
교육 방식
Zoom 온라인 실시간 실습
기본 교육시간
8시간
평일반
2시간 × 4회
주말반
4시간 × 2회
선택 프로그램
오프라인 데모데이 4시간 (희망자, 추가 참가비 없음)
참가비
330,000원 (VAT 포함)
운영 방식
소수 인원 실습형
강사
DK Culture Lab 이동관 대표
평일반과 주말반은 학습목표, 공통 실습 내용, 기본 결과물 기준이 동일합니다.
02 · PRACTICE
4가지 공통 실습 상세
PRACTICE 02
라이브 퀴즈 & 음악 퀴즈앱
사람들이 함께 참여하고 즐길 수 있는 웹앱을 만듭니다.
교육이나 행사에서 활용할 수 있는 라이브 퀴즈와 음악 퀴즈 기능을 구현합니다.
- QR코드 또는 참여 코드로 접속
- 퀴즈 문항과 정답 처리
- 점수 계산과 순위 표시
- 음악 재생과 곡명 맞히기
- 제한시간, 힌트 등 게임 규칙 변경
사전에 준비된 공통 템플릿을 활용해 핵심 기능을 구현하고, 교육 시간에 맞춰 직접 수정해봅니다.
PRACTICE 03
업무용 신청·접수·관리 웹앱
엑셀과 반복 수작업으로 처리하던 업무를 웹앱으로 바꿔봅니다.
교육 신청 관리 앱을 예시로 입력부터 저장, 조회, 관리까지 연결되는 웹앱을 구현합니다.
- 사용자 신청 화면
- 신청 정보 저장
- 관리자 목록 조회
- 신청 상태 변경
- 검색 및 필터링
- 간단한 통계와 CSV 다운로드
인사담당자는 교육 신청이나 워크숍 운영 업무에, 일반 학습자는 모임·행사·예약 관리 등에 응용할 수 있습니다.
PRACTICE 04
팔로워십 진단 웹앱
질문에 대한 응답을 분석하고 개인별 결과를 보여주는 진단 도구를 만들어봅니다.
팔로워십을 사례로 진단 문항, 점수 계산, 결과 리포트를 하나의 웹앱으로 구현합니다.
- 진단 영역과 문항 설계
- 5점 척도 응답 화면
- 영역별 점수 계산
- 결과 시각화
- 개인별 결과 설명
- 자기성찰 질문과 행동 제안
앞선 회차에서 배운 사용자 입력, 데이터 처리, 결과 화면 구성 방법을 종합하는 실습입니다.
※ 팔로워십 진단은 개발 학습을 위한 자기점검용 프로토타입이며, 별도의 검증을 거친 공식 심리진단이나 인사평가 도구로 제공되지 않습니다.
03 · HOW IT WORKS
바이브코딩 핵심 5단계
웹앱 개발에 필요한 기본 흐름을 다섯 단계로 반복 학습합니다.
STEP 1문제와 아이디어 정의하기누가 어떤 문제를 해결하기 위해 사용할 웹앱인지 정리합니다.
STEP 2PRD와 화면 흐름 설계하기필요한 기능, 사용자 동선, 입력 정보, 결과 화면을 구조화합니다.
STEP 3AI 개발 프롬프트 작성하기원하는 기능을 AI가 이해할 수 있는 구체적인 개발 지시문으로 바꿉니다.
STEP 4Claude Code로 구현하기화면과 기능을 구현하고, 필요한 데이터 저장 및 프로젝트 관리 방법을 익힙니다.
STEP 5실행·검증·개선하기앱을 직접 사용하면서 오류를 수정하고 필요한 기능을 확장합니다.
수업 이후에도 활용할 수 있도록 바이브코딩 실습 템플릿과 실습 영상을 제공합니다.
04 · TIMETABLE
회차별 시간표
평일 저녁반
Zoom 온라인 · 목요일 19:00~21:00 · 2시간 × 4회
1회
11월 12일(목)
바이브코딩 기초 및 첫 웹앱
2회
11월 26일(목)
라이브 퀴즈·음악 퀴즈앱
3회
12월 3일(목)
업무용 신청·관리 웹앱
4회
12월 17일(목)
팔로워십 진단 웹앱
회차 사이 1~2주 간격을 두고 운영하여 복습과 개인 프로젝트 기획을 진행할 수 있습니다.
주말 집중반
Zoom 온라인 · 토요일 10:00~15:00 · 4시간 × 2회
1회
11월 21일(토)
기초 웹앱 + 퀴즈앱
2회
12월 5일(토)
업무 관리 앱 + 진단 앱
10:00~12:00 / 13:00~15:00 실습
12:00~13:00 점심시간 제외
교육시간 안내
- 온라인 과정만 참여: 총 8시간
- 온라인 + 오프라인 데모데이 참여: 최대 총 12시간
오프라인 데모데이는 필수 수업이나 수료 요건이 아닙니다.
05 · YOUR OWN PROJECT
개인 프로젝트
네 가지 공통 실습 외에도 수강생이 만들고 싶은 웹앱을 직접 기획하고 구현 방향을 정리합니다.
학습 단계
개인 프로젝트 활동
1회차
만들고 싶은 웹앱 아이디어 선정
2회차
핵심 기능과 사용자 정의
3회차
화면 흐름과 데이터 구조 설계
4회차
MVP 구현 착수 및 후속 개발 계획
교육 이후
희망자에 한해 제작·개선 및 데모데이 발표
개인 웹앱 구조화 시트
다음 다섯 가지 항목을 정리합니다.
- 1내가 만들고 싶은 웹앱과 해결할 문제
- 2이 앱을 사용할 사람
- 3사용자가 입력하거나 관리할 정보
- 4웹앱 또는 AI가 처리할 핵심 기능과 결과물
- 5결과를 확인하고 관리할 화면
개인 프로젝트 예시
인사·HRD·조직문화
교육 신청 관리 앱, 신입사원 온보딩 체크리스트, 조직문화 캠페인 운영 앱, 팀 회고 관리 앱, 역량 자기점검 및 결과 리포트 앱
일반 업무·생산성
일정 관리 앱, 고객 상담 기록 관리 앱, 독서 기록 앱, 모임 운영 앱, 업무 현황 대시보드
AI·콘텐츠
뉴스레터 생성 앱, 블로그 콘텐츠 관리 앱, 강의자료 제작 보조 앱, 콘텐츠 캘린더, Content Loom형 AI 콘텐츠 작업실
개인 프로젝트는 핵심 기능 1~3개를 갖춘 작은 웹앱부터 시작하도록 안내합니다.
개인 프로젝트는 온라인 교육의 응용 활동이며, 완성된 앱 제출이 필수 수료 조건은 아닙니다.
06 · OPTIONAL
오프라인 프로젝트 데모데이 (선택)
내가 만든 웹앱을 발표하고 전문가 피드백을 받는 후속 프로그램입니다. 참여를 희망하는 수강생만 신청하며, 추가 참가비는 없습니다.
① 개인 프로젝트 발표
자신이 해결하고 싶은 문제와 직접 구현한 웹앱을 소개합니다.
② 실제 웹앱 시연
주요 기능을 직접 실행하면서 구현 결과를 공유합니다.
③ 참가자 상호 피드백
다른 참가자가 만든 웹앱을 사용해보고 개선 아이디어를 나눕니다.
④ 전문가 프로젝트 클리닉
기능 구현, 오류, 사용자 경험, 데이터 구조, 배포 및 운영 방향 등을 점검합니다.
⑤ 개선 로드맵 작성
추가로 구현할 기능과 다음 개발 단계를 정리합니다.
프로그램 운영 예시총 4시간 / 오프라인
오프닝 및 발표 안내15분
개인 프로젝트 발표 및 피드백120분
휴식 및 자유 체험15분
전문가 프로젝트 클리닉65분
개선 로드맵 및 네트워킹20분
마무리5분
합계240분
참가 인원과 발표 신청자 수에 따라 발표 시간과 컨설팅 방식은 조정됩니다.
참여 안내
- 참여 대상
- 평일반·주말반 수강생 중 희망자
- 참여 방식
- 별도 사전 신청
- 참여 시간
- 총 4시간
- 추가 참가비
- 없음
- 개인 발표
- 희망자 중심으로 운영
- 일정
- 평일반 온라인 과정 종료 이후 별도 확정
- 장소
- 추후 안내
데모데이에 참여하지 않아도 온라인 과정 수료에 불이익이 없으며, 온라인 수업과 제공 자료, 기본 교육 혜택은 동일합니다.
07 · OUTCOMES
학습 산출물과 추천 대상
온라인 공통 실습 결과물
- 1기초 웹앱 실습 결과물
- 2라이브 퀴즈·음악 퀴즈앱 기본 버전
- 3업무용 신청·접수·관리 웹앱 초기 버전
- 4팔로워십 진단 웹앱 초기 버전
개인 프로젝트 및 학습 자료
- 5개인 웹앱 아이디어 구조화 시트
- 6개인 프로젝트 개발 계획
- 7바이브코딩 실습 영상
- 8Claude Code 실습 가이드
- 9웹앱 기획·구현 프롬프트 템플릿
- 10Firebase·GitHub 기본 활용 자료
실습 결과물의 완성 범위는 제공된 템플릿, 개인별 진도, 사용 가능한 서비스 환경에 따라 달라질 수 있습니다.
이런 분께 추천합니다
코딩을 배운 적은 없지만 직접 웹앱을 만들어보고 싶은 분
ChatGPT나 Claude를 사용해봤지만 개발 경험은 없는 분
인사·HRD·조직문화 업무에 활용할 도구를 만들고 싶은 분
엑셀이나 수작업으로 관리하는 업무를 개선하고 싶은 분
강의·워크숍에서 활용할 퀴즈나 진단 앱을 만들고 싶은 분
자신만의 서비스 아이디어를 작은 제품으로 구현해보고 싶은 분
개발자에게 의뢰하기 전에 자신의 아이디어를 검증하고 싶은 분
AI와 함께 기획부터 구현, 오류 수정까지 경험하고 싶은 분
코딩 경험은 필수가 아닙니다. 다만 PC의 기본적인 사용과 AI 도구 활용에 익숙하다면 더욱 수월하게 참여할 수 있습니다.
08 · PREPARATION
실습 도구와 사전 준비
실습 도구별 활용
Claude Code — 웹앱 기능 구현 및 코드 수정
Firebase — 데이터 저장 및 배포 실습
GitHub — 프로젝트 저장 및 변경 이력 관리
사전 환경설정 안내
Zoom을 활용한 온라인 실습형 교육입니다. 별도의 사전 오리엔테이션은 진행하지 않으며, 수업 전 설치 가이드와 준비 자료를 제공합니다.
참가자 준비사항
- 프로그램 설치가 가능한 PC 또는 노트북
- 안정적인 인터넷 환경
- Claude Code 이용이 가능한 유료 구독 또는 API 이용 환경
- Google 계정
- GitHub 계정
- 개인 웹앱 아이디어 1개(권장)
Firebase는 개인 Google 계정으로 실습하며, 별도 공용 실습 계정을 제공하지 않습니다.
일부 AI 기능에는 별도 API Key 및 사용료가 필요할 수 있습니다. 각 도구의 무료 이용 범위, 유료 구독 조건, 추가 비용 가능성은 사전 자료에서 안내합니다.
실습은 공통 템플릿을 기반으로 진행하여 초보자의 개발 환경 설정 및 구현 부담을 줄입니다.
09 · SUPPORT
제공 자료와 후속 지원
제공 사항
- Zoom 실시간 온라인 교육 8시간
- 기초·퀴즈·업무 관리·진단 웹앱 실습 템플릿
- 실습 교안 및 Claude Code 가이드
- 바이브코딩 실습 영상
- Firebase·GitHub 기본 활용 자료
- 개인 희망 웹앱 구조화 시트
- 개인 프로젝트 기획 및 구현 방향 Q&A
- 희망자 대상 오프라인 데모데이 참여 기회
- 수료증 발급 (온라인 과정 수료 기준 별도 안내)
- 교육 후 오픈채팅방 운영 (공지·업데이트·기본 질의응답)
교육 이후에도 이어지는 프로젝트 지원
개인 프로젝트를 혼자 진행하다 막히는 부분이 있어도 계속 질문하고 방향을 점검할 수 있습니다.
오픈채팅방 운영
교육 후에도 오픈채팅방을 통해 개인 프로젝트 진행 중 궁금한 점을 문의하고, 공지·업데이트·참고 자료를 함께 공유합니다.
오프라인 커피챗
개인 프로젝트에 대해 더 깊은 문의나 컨설팅을 희망하는 경우, 오프라인 커피챗으로 기능 구현·서비스 구조·다음 개발 방향을 함께 점검합니다.
커피챗 일정과 진행 방식은 희망자와 개별 협의 후 안내드립니다.
10 · POLICY
참가비·수료·취소 등 운영 안내
참가비
330,000원 VAT 포함 · 평일·주말 동일
- 온라인 실습 8시간과 공통 실습 자료, 개인 프로젝트 구조화 활동이 포함됩니다.
- 오프라인 데모데이는 희망자에 한해 추가 참가비 없이 참여합니다.
- Claude Code 등 AI 서비스 이용료, 별도 API 사용료, 개인 교통비 등은 포함되지 않습니다.
입금 계좌
하나은행 145-910462-09807
예금주: 디케이컬처랩
모집·수료·취소
- 소수 인원 실습형으로 운영하며 정원 충원 시 조기 마감될 수 있습니다.
- 신청 + 입금 완료 순으로 참여가 확정됩니다.
- 수업 전 프로그램 설치와 계정 준비가 필요하므로, 신청 후 제공되는 사전 준비 자료를 확인해 주세요.
- 수료증은 온라인 과정 수료 기준으로 발급하며, 세부 기준은 별도 안내합니다.
- 데모데이 참여 여부와 개인 프로젝트 완성은 수료 조건이 아닙니다.
- 개강 최소 인원, 취소 및 환불 기준은 신청 안내에서 별도로 제공할 예정입니다.
11 · FACILITATOR & CASES
강사 소개와 참고 사례
FACILITATOR
DK Culture Lab 이동관 대표
HRD, 조직문화, 리더십, 팀빌딩, AI 활용 교육을 연결해 실무자가 직접 사용할 수 있는 교육 프로그램과 업무 도구를 개발하고 있습니다.
이번 과정에서는 AI 코딩 도구의 사용법뿐 아니라, 아이디어를 웹앱으로 구조화하고 실제 작동하는 기능으로 구현하는 전체 과정을 함께 경험합니다.
교육 이후에도 스스로 작은 프로젝트를 기획하고 개선해볼 수 있도록 실습 중심으로 진행합니다.
바이브코딩 웹앱 참고 사례
바이브코딩으로 구현한 웹앱의 활용 방향을 보여주는 참고 사례입니다.
모든 참고 사례를 수업에서 제작하는 것은 아니며, 본 과정은 기초·퀴즈·업무 관리·팔로워십 진단 실습을 중심으로 진행합니다.
참여 후기 전체 확인하기