메인으로 돌아가기

강의 · AI 디지털 배움터

바이브코딩 강사

AI와 함께 만드는 첫 번째 웹서비스 — 3주 과정 설계와 강의

코드를 몰라도 시작할 수 있게, 그러나 마지막 결정은 사람이 하도록 가르쳤습니다.

2026.07 – 2026.08주강사 · 커리큘럼 설계 · 강의안 제작
  • Codex
  • AI Agent
  • AGENTS.md
  • PRD
  • MCP
  • GitHub
  • HTML · CSS · JS

Brief

어디서, 누구에게, 무엇을.

기관
AI 디지털 배움터 · 경기도 안산시 상록구
과정명
AI와 함께 만드는 첫 번째 웹서비스 (Codex 바이브코딩)
대상
코딩 경험이 없는 일반 학습자 · 회당 정원 10명 · 집합 교육
내 역할
주강사. 3주 과정의 커리큘럼을 설계하고 강의안 268장과 강사 대본, 실습 예제를 직접 만들었습니다
기간
2026.07 – 2026.08 · 총 6회 · 회당 3시간
같은 시기
마지막 회차(08.14)가 있던 주에 멋쟁이사자처럼 중앙 해커톤 GO. 개발을 시작했습니다

By the numbers

강의의 규모.

0회

주강사로 진행한 강의 · 회당 3시간

0장

1주차 75 · 2주차 112 · 3주차 81장, 전부 직접 제작

0시간

3주 과정 · 회당 정원 10명 집합 교육

How I taught

과정을 그렇게 짠 이유.

  1. 01

    도구 사용법보다 판단 기준을 먼저

    에이전트가 코드를 대신 써 주는 시대에 초보자에게 필요한 것은 문법이 아니라 무엇을 맡기고 무엇을 직접 정할지입니다. 세 주 내내 같은 문장을 반복했습니다. AI가 작성하고, 사람이 검토하고, 사람이 결정합니다.

  2. 02

    AI의 한계를 첫 주에 가르쳤다

    긴 요청의 중간이 흐려지는 현상과 사용자 말에 맞춰 주는 아첨 현상을 첫 주에 다뤘습니다. 잘 되는 시연만 보여주면 수강생은 결과가 틀렸을 때 자기 탓을 합니다. 왜 틀리는지 알아야 요청을 고칠 수 있습니다.

  3. 03

    매 교시를 실습으로 닫았다

    개념 설명 뒤에는 반드시 자기 폴더에서 직접 해 보는 실습을 붙였습니다. 2주차는 실습만 여덟 개입니다. 한 번에 하나만 바꾸고, 고치기 전에 마지막 작동 상태를 지키는 습관을 실습 순서 자체에 넣었습니다.

  4. 04

    현업에서 쓰는 방식을 그대로 낮췄다

    prd.md, design.md, AGENTS.md, 담당을 나눈 에이전트 팀, 근거 기반 판정, GitHub 기록과 배포는 제가 프로젝트에서 실제로 쓰는 방식입니다. 장난감 예제로 바꾸지 않고 같은 구조를 초보자가 따라올 수 있는 크기로 줄였습니다.

Curriculum

실제 수업에 쓴 강의안입니다. 열기를 누르면 그 자리에서 넘겨 볼 수 있습니다.

  1. WEEK 01자기소개 웹페이지 한 장

    AI와 함께 만드는 나의 첫 웹사이트

    AI 코딩 에이전트와 협업해 자기소개 페이지를 만들고 직접 고쳐 보는 주차입니다. 바이브코딩이 무엇인지, LLM과 에이전트가 맡는 일이 어떻게 다른지에서 출발해 안전한 연습 폴더를 만들고, 첫 제작 요청을 완성하고, 남길 것과 바꿀 것을 나눠 한 가지씩 수정합니다. 화면이 깨졌을 때 확인할 순서까지 다루고 끝납니다.

    수업 구성

    1. 01바이브코딩이란?
    2. 02안전한 연습 공간 만들기
    3. 03요청 잘하는 법과 첫 페이지 만들기
    4. 04그대로 둘 것과 바꿀 것
    5. 05오류 대응과 마무리
    6. 06직접 만들어 보기

    짚은 개념

    • LLM과 에이전트의 역할 차이
    • 토큰 — AI가 글을 읽는 단위
    • Lost in the Middle · 중간 유실
    • Sycophancy · 아첨 현상
    • 개인정보는 성격과 노출 위험으로 판단
    • 마지막 결정은 사람이 한다

    75 slides

    새 탭에서 열기
  2. WEEK 02prd.md · design.md와 첫 MVP

    내 아이디어를 작동하는 작은 웹으로

    만드는 법에서 무엇을 만들지로 넘어가는 주차입니다. 내 불편을 한 문장으로 적는 것에서 시작해 타깃을 좁히고, 기능을 하나 덜어내 MVP를 정하고, 사용 흐름을 3~5단계와 완료 기준으로 씁니다. 그 내용을 prd.md와 design.md로 남겨 에이전트에게 넘기고, 핵심 기능을 한 단계씩 만들어 확인합니다. 마지막 교시에는 프롬프트, 컨텍스트, 하네스의 차이와 AGENTS.md를 다뤘습니다.

    수업 구성

    1. 01사용자와 문제 정의
    2. 02MVP와 사용 흐름
    3. 03기획 문서와 첫 작동
    4. 04화면과 핵심 기능
    5. 05AI 작업 시스템
    6. 06내 프로젝트 시작하기

    짚은 개념

    • MVP는 대충 만든 것이 아니다
    • PRD라는 개념과 prd.md라는 파일의 구분
    • 완료 기준과 테스트의 차이
    • 레퍼런스는 복사가 아니라 관찰
    • Workflow와 Agent · 하네스 엔지니어링
    • 규칙과 권한은 다르다

    112 slides

    새 탭에서 열기
  3. WEEK 03GitHub 기록과 공개 URL

    에이전트 팀과 함께, 오늘 세상에 내놓습니다

    AI를 한 명이 아니라 팀으로 쓰는 주차입니다. 고치기 전에 백업부터 만들고, 싱글·서브·멀티 에이전트의 차이를 본 뒤 HTML, CSS, JS, QA 담당으로 팀을 나눠 규칙을 다시 씁니다. 담당별 병렬 검토 결과를 다수결이 아니라 근거로 판정하고, 고친 담당이 아닌 다른 담당에게 확인을 맡깁니다. 이후 MCP 연결과 권한, GitHub 기록, 배포와 공유 범위 점검을 거쳐 3주를 회고합니다.

    수업 구성

    1. 01백업과 첫 움직임
    2. 02싱글 · 서브 · 멀티 에이전트
    3. 03담당 나누기와 팀 규칙
    4. 04병렬 검토 · 결과 판정 · 구현
    5. 05플러그인 · MCP · GitHub 기록
    6. 06배포와 공유 범위

    짚은 개념

    • 고친 사람은 자기 실수를 못 본다
    • 다수결이 아니라 근거로 판정
    • MCP — 연결했다고 다 허락한 것은 아니다
    • "완료했습니다"보다 GitHub 화면
    • 저장소에 있는 것과 열리는 것은 다르다
    • 공개 URL 자가 점검

    81 slides

    새 탭에서 열기

Looking back

가르치려면 제가 감으로 하던 일을 순서와 이유로 풀어야 했습니다. 왜 문서를 먼저 쓰는지, 왜 한 번에 하나만 바꾸는지, 왜 고친 사람이 아닌 다른 눈이 확인해야 하는지를 말로 설명할 수 있게 된 것이 이 강의에서 제가 얻은 것입니다. 강의 끝자락에 시작한 GO. 개발에서 문서를 코드보다 먼저 쓰고 에이전트 작업 규칙을 먼저 정한 것도 이 과정을 정리하며 굳어진 방식입니다.

메인으로 돌아가기