SMARTACT
바이브코딩 6종 시리즈
시리즈 2/6

바이브코딩 ② 예제수업

완성된 AI 웹앱 예제를 AI와 함께 뜯어보며 읽는 눈 기르기

4~6차시준비수업 수료자 · 코드 처음 읽는 사람🔍 AI 해설자
체험 실습3스텝 인터랙티브
지금 바로 손으로 해보기 →
입력 → AI 프롬프트 자동 완성 → 복사 · 결과물은 마이페이지에 저장
선수 수업 · 바이브코딩 ① 준비수업 을 먼저 들으시면 흐름이 매끄러워요.

이 수업이 끝나면

완성된 웹앱이 어떤 조각들로 이뤄져 있는지 "구조"가 보인다
모르는 코드 한 줄을 AI에게 설명 받는 습관이 생긴다
기획·실전 수업으로 가기 전에 "이 정도면 나도 만들 수 있다"는 감이 잡힌다

수강생이 손으로 하는 것

1예제 저장소를 내려받아 로컬에서 실행해보기
2선택한 코드 블록을 "해설자 AI"에게 붙이고 설명 받기
3읽은 내용을 독해 노트(마크다운)로 정리

차시 구성

1
웹앱의 4조각
HTML/CSS/JS, 데이터, API, 배포 — 화면 하나가 어떻게 만들어지는지
2
첫 예제 뜯어보기
자기소개 카드 같은 작은 예제를 한 줄씩 읽으며 질문
3
데이터가 들어간 예제
JSON 데이터를 읽어 카드 여러 장을 그리는 예제 해부
4
AI 붙은 예제
AI API를 호출하는 예제에서 요청·응답이 어디서 오가는지 찾기

AI 역할 — 🔍 해설자

수강생이 선택한 코드 블록을 보고 "왜 이렇게 썼는지", "다르게 쓰면 어떻게 되는지"를 구어체로 설명하는 해설자. 수강생은 직접 코드를 짜지 않습니다.

사용 도구

VS CodeGit예제 저장소AI 해설자

바이브코딩 ② 예제수업 수강 · 기관 출강 문의

바이브코딩 6종 시리즈 통합 수강(28~38차시 (통합 수강 시)) 또는 이 수업 단독 수강 모두 가능합니다.

궁금한 점이 있으시면
카카오톡으로 문의하세요!