🛠 바이브코딩 수업
한 문단의 요구사항에서 12개 행성 페이지까지. 그 과정을 숨기지 않고 그대로 수업 자료로 만들었습니다. 바이브코딩이 무엇이고, 어떻게 배우고, 무엇을 조심해야 하는지 여기서 확인하세요.
1. 바이브코딩이 뭐야?
한 줄로 말하면
내가 만들고 싶은 것을 말로 자세히 설명해요. 그러면 AI가 코드를 써 줘요. 나는 결과를 보고 “여기를 바꿔 줘”라고 다시 말해요. 이것을 여러 번 하면 작품이 완성돼요.
그래서 무엇을 잘해야 할까
목표 · 같은 부탁을 다르게 말하면 결과가 얼마나 달라지는지 눈으로 확인한다
👩🏫 교사 팁만 14세 미만은 보호자 동의가 필요하므로 교사 계정 1대로 시연하고, 학생은 말할 문장만 설계하게 하면 안전합니다. 실명·사진은 넣지 않도록 먼저 약속합니다.
정의
바이브코딩은 사람이 무엇을 만들지와 어떤 조건을 지킬지를 자연어로 정하고, 실제 코드는 AI가 쓰는 작업 방식이야. 사람의 일이 없어지는 것이 아니라 위치가 옮겨진다. 타이핑에서 설계·판단·검수로 옮겨져.
사람이 계속 해야 하는 일
data/domains.json)에 인용된 역량 프레임은
WEF The Future of Jobs Report 2025 (Global Skills Taxonomy, Top 10 Core Skills)
이다. 그 목록 상위에는 분석적 사고, 창의적 사고, 기술 리터러시가 함께 들어 있다.
바이브코딩은 이 세 가지를 한 번에 쓰는 활동이다.
원문 보기 ↗(새 창으로 열림)
정의와 경계
바이브코딩의 핵심은 “코드를 안 쓴다”가 아니다. 의도(intent)를 검증 가능한 명세(spec)로 번역하고, 생성된 산출물을 재현·검수·수정 가능한 구조로 유지하는 일이다. 이 사이트는 그 구조를 세 가지 방식으로 확보했다. ① 내용과 표현을 분리해 데이터(JSON)를 단일 원본으로 두었고, ② 표현은 파이썬 생성기 한 곳에 모아 12개 페이지를 재생성 가능하게 만들었고, ③ 생성한 결과를 별도 검수 단계에서 점검하고 고치는 루프를 돌렸다.
수치·출처·신뢰등급을 데이터에 넣고 화면은 그것을 읽기만 한다. 수정 지점이 하나이므로 12개 페이지가 서로 어긋나지 않는다.
페이지는 손으로 고치지 않고 생성기를 고쳐 다시 만든다. 같은 입력이면 같은 결과가 나오므로 무엇 때문에 바뀌었는지 추적할 수 있다.
만든 주체와 점검하는 주체를 분리했다. 링크·접근성·색 대비·모바일·사실관계를 각각 점검하고 고친 뒤 다시 점검한다.
2. 제작 과정 해부
아래 그림은 이 사이트가 실제로 만들어진 순서입니다. 가장 중요한 것은 오른쪽에서 왼쪽으로 되돌아오는 점선 화살표입니다. 한 번에 완성된 것은 없었고, 검수에서 문제를 찾으면 데이터와 틀로 되돌아갔습니다.
핵심 기술 선택 두 가지 — ① 데이터(JSON)와 화면(HTML)을 분리했다. ② 파이썬 생성기로 12개 페이지를 찍어냈다. 손으로 12번 쓰지 않았다. 틀을 한 곳 고치면 12개가 함께 바뀐다.
“초중고에게 미래 신사업을 알려주고, 필요한 역량과 그것을 기르는 법을 알려주는 사이트. 학년별로 밀도를 다르게. 재미있게. 교사가 수업·특강·캠프에 그대로 쓸 수 있게.”
— 이 사이트의 첫 요구사항 (오늘과내일의학교 회장)
화면 설계도, 색, 페이지 개수, 문장 하나도 정해져 있지 않았습니다. 여기서부터 할 일을 쪼개는 것이 첫 단계였습니다.
디자인 토큰·배포 표준·법무 문서를 찾아 그대로 쓸 것을 가려낸다
12개 분야의 수치를 출처 URL과 함께 모은다
글로 된 조사 결과를 기계가 읽는 데이터로 바꾼다
색·글자·간격·컴포넌트 규칙을 CSS로 고정한다
데이터를 넣으면 페이지가 나오는 파이썬 코드를 쓴다
12개 행성으로 들어가는 입구를 만든다
수업 지도안·활동지·캠프 설계를 만든다
'나의 행성 찾기' 문항과 결과 화면을 만든다
약관·개인정보·저작권 고지와 검색 메타데이터를 만든다
링크·접근성·색 대비·모바일·사실관계를 점검한다
산출물을 폴더에 커밋하고 Netlify로 올린다
3. AI에게 잘 말하는 법
프롬프트는 부탁이 아니라 설계도입니다. 아래 다섯 가지는 이 사이트를 만들 때 실제로 지킨 조건입니다.
‘멋지게’ 같은 말은 기준이 없다. 화면 개수, 들어갈 요소, 글의 길이처럼 셀 수 있는 말로 적는다.
초등 5학년이 읽을 글과 고등학생이 읽을 글은 낱말부터 다르다. 읽는 사람을 먼저 말한다.
원하는 결과를 한 개만 직접 써서 보여 주면, 나머지를 그 모양에 맞춰 만들어 준다.
‘출처 없는 숫자는 쓰지 마’, ‘실명은 넣지 마’처럼 금지선을 미리 정한다. 결과가 가장 크게 달라지는 항목이다.
‘다 만들면 링크를 하나씩 눌러 보고 안 열리는 것을 알려 줘’처럼, 맞는지 판단할 기준을 함께 준다.
미래 직업 사이트 하나 멋지게 만들어 줘. 시장 규모도 넣어 줘.
무엇이 나와도 “틀렸다”고 말할 수 없습니다. 읽는 사람도, 개수도, 금지선도, 확인 방법도 없습니다.
초등 5~6학년이 읽을 '미래 직업 소개 페이지' 1장을 HTML 한 파일로 만들어 줘. [구성] 제목 1개 / 직업 카드 3개 / 카드마다 이름·한 줄 설명·필요한 능력 2개 [읽는 사람] 초등 5~6학년. 한 문장은 40자 이내, 어려운 낱말은 쉬운 말로 바꿔 줘. [예시] 카드 1개 예시: 이름 "돌봄 로봇 훈련사" / 설명 "로봇에게 사람을 돕는 방법을 가르쳐요." [하지 말 것] 출처 없는 숫자·통계는 넣지 마. 실제 사람 이름과 사진은 쓰지 마. [확인] 다 만들면 (1) 40자 넘는 문장, (2) 출처 없는 숫자를 목록으로 알려 줘.
구성·읽는 사람·예시·금지선·확인 방법이 모두 있습니다. 결과가 기준과 다르면 “다르다”고 말할 수 있습니다.
만든 다음이 진짜 시작입니다. 아래는 이 사이트의 검수 5항목을 그대로 프롬프트로 바꾼 것입니다. 복사해서 그대로 쓰세요.
아래 HTML을 다음 5가지로 점검해서 '문제 목록'만 알려 줘. 고치지는 마. (1) 눌러도 열리지 않는 링크 (2) 대체 텍스트(alt)가 없는 이미지 (3) 배경색과 글자색의 대비가 부족해 읽기 어려운 곳 (4) 좁은 화면(폭 360px)에서 넘치거나 겹치는 요소 (5) 출처 없이 적힌 숫자·통계 각 항목은 '어디에 / 무엇이 문제인지'를 한 줄로 써 줘. 문제가 없으면 '없음'이라고 써.
“고치지는 마”가 중요합니다. 문제 목록을 먼저 받고, 무엇을 고칠지는 사람이 정합니다. AI가 알아서 다 고치면 무엇이 왜 바뀌었는지 알 수 없게 됩니다.
4. AI가 틀렸을 때
가장 빠른 확인법 — AI가 준 링크를 직접 눌러 보세요. 열리지 않으면 그 문장 전체를 의심합니다.
검증 검증 — 출처 페이지에서 직접 확인한 수치. 기관명과 원문 URL을 함께 표기한다.
확인필요 확인필요 — 보도자료 제목·요약에서만 확인된 수치. 반드시 기관명과 함께 ‘전망’으로 표기한다.
구성 구성 — 산업 구조를 근거로 만든 교육용 항목. 통계 출처로 쓰지 않는다.
행성 페이지의 수치 옆에 이 뱃지가 붙어 있습니다. 출처를 못 찾은 항목은 데이터에서 빼고, 뺀 이유를 기록했습니다.
5. 무료로 연습할 수 있는 도구
전부 무료로 시작할 수 있습니다. 학교 기기에서 막히는 사이트가 있으면 선생님께 먼저 확인하세요.
Teachable Machine
코딩 없이 사진·소리로 나만의 AI 모델을 학습시켜 본다. ‘AI가 왜 틀리는지’를 눈으로 확인할 수 있다.
https://teachablemachine.withgoogle.com/ ↗(새 창으로 열림)Google Colab
설치 없이 브라우저에서 파이썬을 실행한다. 고등 미션의 생성기 코드를 여기서 돌릴 수 있다.
https://colab.research.google.com ↗(새 창으로 열림)6. 안전·윤리 수칙
참고 — 이 사이트는 회원가입이 없고 이름·연락처를 묻지 않습니다. 진단 결과와 뱃지는 이용자 기기(브라우저)에만 저장되며 지우면 사라집니다. 한국은 「인공지능 발전과 신뢰 기반 조성 등에 관한 기본법」에 생성형 AI 표시 의무를 담았고 2026년 1월 22일 시행되었습니다.
수업에 쓸 슬라이드와 학생용 실습 워크북이 준비되어 있습니다. 슬라이드는 풀스크린 발표와 인쇄(PDF)를 모두 지원합니다.