수업용 슬라이드 · 전체 43장

바이브코딩으로 만드는 미래일터 탐험대

한 문단의 요구사항이 12개 행성 페이지가 되기까지 — AI와 함께 만든 과정 그대로

설명 페이지 학생 워크북

F 풀스크린 · S 발표자 노트 · O 개요 · P 인쇄(PDF) · ? 단축키. 학년급을 초등 축약으로 바꾸면 초등용 슬라이드만 순서대로 나옵니다.

표지· 1분

바이브코딩으로 만드는 미래일터 탐험대

AI와 함께 만든 사이트, 그 과정을 그대로 배웁니다

오늘과내일의학교 · 가르치는사람들

도식 화면 가운데 큰 제목, 배경은 밤하늘. 제목 주위로 12개 행성 아이콘이 둥근 궤도를 따라 놓임.

발표자 노트이 수업은 완성된 사이트를 구경하는 수업이 아니라, 그 사이트가 만들어진 과정을 그대로 따라가는 수업입니다. 한 문단의 요구사항이 어떻게 12개 행성 페이지가 되었는지 순서대로 봅니다. 마지막에는 학생이 직접 자기 페이지를 만드는 미션까지 갑니다.

핵심 정리· 2분

오늘 배울 것

  • ① 미래 일터에 어떤 행성이 있나
  • ② 바이브코딩이 무엇인가
  • ③ 이 사이트가 만들어진 순서
  • ④ AI에게 잘 말하는 방법
  • ⑤ 내 페이지를 직접 만들기

도식 1~5 번호가 붙은 다섯 개의 가로 카드. 진행에 따라 색이 채워지는 진행바가 아래에 붙음.

발표자 노트다섯 칸을 칠판에 적어 두고 하나씩 지워 가며 진행하면 학생이 현재 위치를 압니다. ①②는 이해, ③④는 방법, ⑤는 실습입니다. 시간이 부족하면 ③을 줄이고 ⑤를 반드시 남기세요.

핵심 정리· 3분

지금은 없는 직업

여는 질문

  • 10년 뒤, 나는 무슨 일을 할까?
  • 그 직업 이름이 지금 있을까?
  • 없던 일이 새로 생기는 곳이 있다
  • 그곳을 '미래 일터'라고 부른다

도식 물음표 하나가 크게 놓이고, 그 아래로 네 개의 질문이 말풍선으로 이어짐.

발표자 노트학생에게 먼저 답을 쓰게 하고 두세 명만 발표시킵니다. 정답을 정해 주지 말고 그대로 받아 적으세요. '지금 없는 이름이어도 괜찮다'는 말로 마무리하면 다음 슬라이드로 자연스럽게 넘어갑니다.

화면 보기· 2분

미래일터 탐험대에 들어가 보자

  • 행성 12개 = 미래 신사업 12개
  • 학년에 따라 설명이 달라진다
  • '나의 행성 찾기'로 시작한다

도식 브라우저 창 도식. 위에 학년급 전환 버튼 세 개, 아래에 행성 카드 12개가 3×4 격자로 놓임.

발표자 노트실제 사이트 홈 화면을 띄워 놓고 진행하면 가장 좋습니다. 홈에서 학년급 버튼(초·중·고)을 눌러 같은 내용이 다른 문장으로 바뀌는 것을 보여 주세요. 학생들은 이 한 번의 시연에서 '데이터는 하나, 화면은 여러 개'라는 뒤의 개념을 미리 체감합니다.

비교중등· 3분

12개 행성

미래일터 탐험대가 다루는 신사업 분야

행성 1–6

  • 1. 🤖 AI 에이전트 — 아겐토스
  • 2. 🦾 피지컬AI·로보틱스 — 메카노스
  • 3. 🧬 바이오·헬스테크 — 비오나
  • 4. 🚀 우주·항공 — 코스모라
  • 5. 🌱 기후·에너지전환 — 에오라
  • 6. ⚛️ 반도체·양자 — 퀀타실

행성 7–12

  • 7. 🚗 모빌리티·자율주행·UAM — 드라이브온
  • 8. 🌾 푸드테크·애그테크 — 그린파밍
  • 9. 🕶️ XR·크리에이터 — 이머시아
  • 10. 🧑‍🦳 실버케어·웰니스 — 케어리아
  • 11. 🛡️ 사이버보안·방위 — 실드폴
  • 12. ♻️ 순환경제·신소재 — 리사이클로

도식 좌우 두 열에 행성 목록. 각 줄 앞에 이모지, 뒤에 별칭. 선택된 한 줄만 강조색.

발표자 노트열두 개를 다 설명하지 마세요. 학생에게 '가장 궁금한 행성 하나'를 고르게 하고 그 행성만 사이트에서 함께 엽니다. 행성 이름(아겐토스, 비오나 같은)은 학생이 부르기 쉽게 붙인 별칭이고, 실제 산업명은 그 옆에 적혀 있습니다.

핵심 정리· 3분

바이브코딩이란?

  • 말로 설명해서 프로그램을 만든다
  • 코드는 AI가 대신 쓴다
  • 사람은 무엇을 만들지 정한다
  • 그리고 맞는지 확인한다

도식 왼쪽에 사람 아이콘(말풍선), 가운데 AI 아이콘(코드 블록), 오른쪽에 화면 아이콘. 화면에서 사람으로 '확인' 화살표가 되돌아옴.

발표자 노트핵심은 '말로 만든다'가 아니라 '정하고 확인하는 사람이 있다'입니다. 이 사이트도 사람이 목표와 원칙을 정했고, AI가 코드를 썼고, 다시 사람이 확인했습니다. 세 동작의 주인이 누구인지 학생에게 물어보세요.

비교· 3분

예전 코딩과 무엇이 다른가

예전 방식

  • 문법을 먼저 외운다
  • 한 줄씩 직접 타이핑한다
  • 오류가 나면 검색한다
  • 만들 수 있는 것 = 내 실력

바이브코딩

  • 만들 것을 말로 설명한다
  • AI가 초안 코드를 쓴다
  • 오류를 AI에게 보여 준다
  • 확인하는 힘 = 내 실력

도식 두 열 비교표. 각 행이 좌우로 마주 보고, 마지막 행만 굵게 강조.

발표자 노트예전 방식이 틀린 것이 아니라, 시작하는 지점이 달라진 것입니다. 문법을 몰라도 시작할 수 있지만, 결과를 읽지 못하면 고칠 수 없습니다. 그래서 마지막 줄이 오늘 수업의 진짜 주제입니다.

대조· 4분

바이브코딩은 이런 게 아니다

❌ 흔한 오해

  • AI가 다 해 준다
  • 한 번 시키면 완성된다
  • 구조를 몰라도 된다
  • 결과를 안 봐도 된다

✅ 실제로는

  • 사람이 목표를 정한다
  • 여러 번 고쳐 말한다
  • 구조를 알아야 고친다
  • 사람이 반드시 검수한다

도식 좌우 두 패널. 왼쪽은 붉은 톤에 ❌, 오른쪽은 초록 톤에 ✅. 같은 행끼리 짝을 이룸.

발표자 노트이 슬라이드는 오늘 수업에서 가장 오래 머물러야 하는 장입니다. 'AI가 다 해 준다'는 기대로 시작한 학생은 첫 실패에서 포기합니다. 이 사이트를 만들 때도 한 번에 된 것은 없고, 만든 뒤 검수하고 고치는 일을 반복했습니다.

섹션중등· 1분

왜 지금 배울까?

세계가 말하는 '앞으로 필요한 능력'과 이어 보기

도식 화면 전체를 채우는 섹션 표지. 큰 숫자 '1'과 섹션 제목.

발표자 노트여기서 수업의 무게가 한 단계 올라갑니다. 지금까지는 '재미'였고, 이제부터는 '근거'입니다. 다음 장의 출처는 사이트의 데이터 파일에 실제로 적혀 있는 것을 그대로 인용한 것입니다.

핵심 정리중등· 4분

앞으로 필요한 능력 (인용)

이 사이트 데이터 파일(meta.competencyFrame)에서 그대로 가져온 상위 6개

  • 분석적 사고
  • 회복탄력성·유연성·민첩성
  • 리더십과 사회적 영향력
  • 창의적 사고
  • 동기부여와 자기인식
  • 기술 리터러시
  • 출처 WEF The Future of Jobs Report 2025 (Global Skills Taxonomy, Top 10 Core Skills)

도식 역량 항목 6개가 2열로 놓이고, 마지막 줄에 출처 기관명이 작은 글씨로 붙음.

발표자 노트이 목록은 교사가 지어낸 것이 아니라 사이트의 data/domains.json 안 meta.competencyFrame 에서 그대로 가져온 것입니다. 출처와 원문 링크가 데이터에 함께 들어 있다는 점을 짚어 주세요. 같은 자료에서 가장 빠르게 수요가 커지는 능력으로 꼽은 것은 AI and big data, Networks and cybersecurity, Technological literacy 순이고, OECD 학습 순환은 Anticipation - Action - Reflection (예측-행동-성찰) 입니다. 바이브코딩은 이 목록의 '분석적 사고·창의적 사고·기술 리터러시'를 한 번에 쓰는 활동입니다.

섹션· 1분

이 사이트는 이렇게 만들어졌다

요구사항 한 문단 → 오케스트레이터 → 병렬 에이전트 → 생성기 → 검수 → 배포

도식 섹션 표지. 큰 숫자 '2'. 여섯 단계가 왼쪽에서 오른쪽으로 흐르는 화살표 띠와 작은 아이콘.

발표자 노트여기부터가 이 수업의 중심입니다. 화면에 보이는 여섯 단어가 앞으로 열 장의 목차입니다. 학생에게 '이 중에 무슨 말인지 모르는 단어'를 먼저 손들게 하면 집중도가 올라갑니다.

인용· 3분

시작은 한 문단이었다

초중고에게 미래 신사업을 알려주고, 필요한 역량과 그것을 기르는 법을 알려주는 사이트. 학년별로 밀도를 다르게. 재미있게. 교사가 수업·특강·캠프에 그대로 쓸 수 있게.

이 사이트의 첫 요구사항 (오늘과내일의학교 회장)

도식 큰 따옴표 안에 요구사항 한 문단. 아래에 '이게 전부였습니다' 한 줄.

발표자 노트이 문단이 전부였습니다. 화면 설계도, 색, 페이지 개수, 글자 하나도 정해져 있지 않았습니다. 학생에게 '이 문단만 받고 무엇부터 하겠느냐'고 물어보세요. 학생이 말한 순서와 실제 진행 순서를 뒤에서 비교하면 좋은 활동이 됩니다.

핵심 정리중등· 4분

한 문단을 '할 일'로 쪼개면

  • 무엇을 알려 줄까 → 산업 12개를 정하고 사실을 조사한다
  • 누구에게 → 초·중·고 세 가지 밀도로 문장을 나눈다
  • 어떻게 재미있게 → 행성 은유, 뱃지, 진단 도구를 만든다
  • 교사가 쓰게 → 지도안·활동지·슬라이드를 따로 만든다
  • 믿을 수 있게 → 모든 수치에 출처를 붙이고 등급을 표기한다

도식 왼쪽 요구사항 조각 → 오른쪽 실행 문장으로 이어지는 5개의 화살표 쌍.

발표자 노트요구사항을 쪼개는 이 단계가 프롬프트의 절반입니다. 왼쪽은 사람의 말이고 오른쪽은 AI가 실행할 수 있는 문장입니다. 학생 실습에서도 '내가 만들 것'을 이렇게 다섯 줄로 쪼개게 하면 결과가 훨씬 좋아집니다.

단계· 4분

오케스트레이터가 한 일

지휘자 역할의 AI 하나

  1. 읽기

    요구사항을 한 줄 목표로 정리한다

  2. 나누기

    조사·데이터·디자인·페이지·검수로 쪼갠다

  3. 동시에 시키기

    여러 에이전트에게 한꺼번에 맡긴다

  4. 합치기

    돌아온 결과를 하나의 사이트로 잇는다

도식 가운데 지휘자 노드에서 바깥쪽 여러 노드로 화살표가 동시에 뻗는 방사형 도식.

발표자 노트오케스트라 지휘자로 설명하면 초등도 바로 이해합니다. 지휘자는 악기를 연주하지 않고 순서와 크기를 정합니다. 이 사이트에서는 Claude Opus 가 그 자리에 있었고, 실제 페이지를 쓴 것은 다른 에이전트들이었습니다.

핵심 정리중등· 5분

일을 나눠 맡은 11개 역할

각 역할의 자세한 담당 범위는 /vibecoding/ 설명 페이지에 있습니다

  • 기존 모듈 조사
  • 산업 데이터 웹 리서치
  • 리서치 → JSON 변환
  • 디자인 시스템 작성
  • 행성 페이지 생성기
  • 홈 페이지
  • 교사 자료
  • 진단 도구
  • 법무·SEO
  • 검수
  • 배포

도식 11개 역할 이름이 2열로 놓인 목록. 각 줄 앞에 번호 배지.

발표자 노트한 사람이 다 하지 않고 역할을 나눈 것이 이 프로젝트의 핵심 선택입니다. 역할마다 '무엇을 끝내야 끝난 것인지'가 분명해서 동시에 진행할 수 있었습니다. 예를 들어 '산업 데이터 웹 리서치'는 출처 URL이 붙은 수치를 넘기는 것이 끝이고, '검수'는 링크·접근성·대비·모바일·사실관계 다섯 항목을 통과시키는 것이 끝입니다. 모둠 활동을 이 11개 역할 그대로 나눠서 진행해도 좋습니다.

비교· 3분

혼자 순서대로 vs 나눠서 동시에

혼자 순서대로

  • 조사 끝나야 데이터
  • 데이터 끝나야 화면
  • 앞이 막히면 다 멈춘다
  • 고칠 곳을 늦게 발견한다

나눠서 동시에

  • 조사·디자인·법무 함께
  • 각자 끝낸 것을 모은다
  • 하나 늦어도 나머지 진행
  • 문제를 일찍 발견한다

도식 위쪽은 한 줄로 늘어선 순차 막대, 아래쪽은 같은 길이 안에 나란히 놓인 병렬 막대.

발표자 노트이 사이트에서는 산업 조사, 디자인 시스템, 법무 문서를 같은 시간에 서로 다른 에이전트가 만들었습니다. 대신 '합칠 때 어긋나지 않도록' 데이터 형식과 디자인 토큰을 미리 정해 두었습니다. 동시에 일하려면 규칙을 먼저 정해야 한다는 점을 강조하세요.

핵심 정리중등· 4분

데이터와 화면을 나눈다

이 프로젝트의 가장 중요한 기술 선택

  • 내용은 JSON 파일 하나(data/domains.json)에 모았다
  • 화면은 HTML·CSS가 담당한다
  • 수치를 고칠 때 페이지를 열지 않는다 — 데이터만 고친다
  • 같은 데이터로 학년별 세 가지 문장을 만들 수 있다
  • 출처 URL도 데이터에 같이 들어 있어 화면에 자동으로 붙는다

도식 왼쪽 JSON 코드 블록의 한 줄에서 오른쪽 웹페이지의 한 칸으로 연결선이 이어짐.

발표자 노트교실에서 바로 보여 줄 수 있는 부분입니다. 행성 페이지의 수치 옆 출처 링크가 데이터 파일의 한 칸에서 나온 것이라고 알려 주세요. 내용과 모양을 나누면 고칠 때 한 곳만 고치면 됩니다. 이 원칙이 다음 장의 '생성기'를 가능하게 만듭니다.

단계· 4분

생성기 — 12번 쓰지 않았다

  1. 틀 하나

    행성 페이지의 모양을 파이썬 코드로 한 번만 쓴다

  2. 데이터 12개

    행성마다 이름·수치·직업·활동을 데이터로 넣는다

  3. 실행

    명령 한 줄로 12개 페이지가 한꺼번에 만들어진다

  4. 고칠 때

    틀을 고치면 12개가 함께 바뀐다

도식 왼쪽 '틀 1개' + '데이터 12칸' → 오른쪽으로 페이지 12장이 쏟아져 나오는 도식.

발표자 노트손으로 12번 쓰면 12번 다르게 틀립니다. 틀 하나를 고치면 12개가 같이 고쳐지는 것이 생성기의 힘입니다. 붕어빵 틀, 도장, 쿠키 커터로 비유하면 초등도 바로 이해합니다. 고등 실습 미션이 정확히 이 구조를 직접 해 보는 활동입니다.

핵심 정리중등· 4분

검수 에이전트가 보는 것

  • 링크 — 눌렀을 때 안 열리는 주소가 있는지
  • 접근성 — 키보드만으로 쓸 수 있는지, 대체 텍스트가 있는지
  • 색 대비 — 교실 프로젝터에서도 글씨가 읽히는지
  • 모바일 — 작은 화면에서 글자와 버튼이 깨지지 않는지
  • 사실관계 — 숫자와 출처가 실제 자료와 맞는지

도식 체크리스트 5줄. 각 줄 앞에 점검 아이콘, 오른쪽에 통과/수정 표시 자리.

발표자 노트만든 사람과 검수하는 사람을 나눈 것이 이 프로젝트의 두 번째 선택입니다. 다섯 가지를 동시에 서로 다른 에이전트가 점검했고, 사람이 그 결과를 다시 확인했습니다. 학생 실습에서도 짝끼리 이 다섯 줄로 서로의 결과를 점검하게 하세요.

단계중등· 3분

검수 루프 — 한 번으로 끝나지 않는다

  1. 만든다

    에이전트가 페이지를 생성한다

  2. 점검한다

    검수 에이전트가 다섯 항목을 병렬로 본다

  3. 고친다

    문제를 데이터나 틀에서 고친다

  4. 다시 점검한다

    고친 곳 때문에 다른 곳이 깨졌는지 본다

도식 네 단계가 원형으로 돌아가는 순환 화살표. 4→1 화살표만 굵게.

발표자 노트4번에서 1번으로 돌아가는 화살표가 이 슬라이드의 핵심입니다. 고치는 과정에서 새 문제가 생기기 때문에 다시 점검합니다. '한 번에 완성'이 아니라 '여러 번 좋아짐'이라는 감각을 심어 주세요.

핵심 정리고등· 3분

배포 — 만든 것을 세상에 올린다

  • 산출물을 로컬 폴더에 커밋한다 (기록이 남는다)
  • 정적 파일(HTML·CSS·JS)만 있으면 서버가 따로 필요 없다
  • Netlify 로 올리면 누구나 주소로 접속할 수 있다
  • 내려받기·인쇄용 자료도 같은 폴더에서 함께 나간다

도식 왼쪽 로컬 폴더 아이콘 → 커밋 → 클라우드 아이콘 → 오른쪽 여러 기기(노트북·태블릿·휴대폰) 도식.

발표자 노트'내 컴퓨터에서만 되는 것'과 '누구나 볼 수 있는 것'의 차이를 설명하는 장입니다. 이 사이트는 데이터베이스나 로그인 없이 파일만으로 동작하기 때문에 배포가 단순합니다. 단순한 구조를 고른 것 자체가 하나의 설계 결정이었습니다.

단계중등· 3분

전체 흐름을 한 장에

  1. 요구사항 한 문단

    사람이 무엇을 원하는지 말한다

  2. 오케스트레이터

    일을 쪼개 여러 에이전트에게 동시에 맡긴다

  3. 데이터 + 생성기

    JSON 을 만들고 파이썬으로 페이지를 찍어낸다

  4. 검수 루프

    점검하고 고치는 것을 반복한다

  5. 배포

    커밋하고 Netlify 로 올린다

도식 다섯 칸 가로 흐름도. 4번에서 3번으로 되돌아가는 점선 화살표 하나.

발표자 노트여기까지가 실제로 일어난 전부입니다. 이 다섯 칸을 학생 공책에 그대로 옮겨 적게 하세요. 학생 실습도 같은 다섯 칸을 따라가고, 규모만 작아집니다.

섹션· 1분

AI에게 잘 말하는 법

프롬프트는 '부탁'이 아니라 '설계도'다

도식 섹션 표지. 큰 숫자 '3'과 말풍선 아이콘.

발표자 노트이제 학생이 직접 쓸 도구를 다룹니다. 앞에서 본 제작 과정이 결국 '어떻게 말했는가'의 결과였다는 점을 이어 주세요.

핵심 정리· 5분

좋은 프롬프트 5가지 조건

  • ① 무엇을 만들지 정확히 쓴다
  • ② 누가 볼 것인지 알려 준다
  • ③ 예시를 하나 보여 준다
  • ④ 하지 말 것도 함께 말한다
  • ⑤ 확인 방법까지 정해 준다

도식 1~5 번호 카드 다섯 장. ④와 ⑤ 카드에만 강조 테두리.

발표자 노트다섯 조건을 외우게 하지 말고, 다음 두 장의 비교에서 스스로 찾게 하세요. 이 사이트를 만들 때 실제로 쓴 조건이기도 합니다. 특히 ④와 ⑤가 결과를 크게 바꿉니다. '출처 없는 숫자는 쓰지 마라'가 ④이고, '검수 에이전트가 점검한다'가 ⑤였습니다.

대조· 4분

나쁜 프롬프트 vs 좋은 프롬프트 ①

❌ 나쁜 말하기

  • "멋진 사이트 만들어 줘"
  • 무엇이 멋진지 안 정했다
  • 누가 볼지 안 알려 줬다
  • 결과를 확인할 기준이 없다

✅ 좋은 말하기

  • "초등 5학년이 볼 직업 소개 페이지"
  • "카드 3장, 각 카드에 그림 1개"
  • "어려운 낱말은 쓰지 마"
  • "다 만들면 낱말 수를 세 줘"

도식 좌우 대칭 패널. 왼쪽 붉은 톤, 오른쪽 초록 톤. 각 항목이 같은 행에서 짝을 이룸.

발표자 노트두 프롬프트를 실제로 같은 AI에 넣어 결과를 비교해 보이면 가장 효과가 큽니다. 왼쪽은 무엇이 나오든 받아들여야 하고, 오른쪽은 다른 결과가 나오면 '틀렸다'고 말할 수 있습니다. 확인 기준이 있는 말이 좋은 말이라는 결론으로 정리하세요.

대조중등· 4분

나쁜 프롬프트 vs 좋은 프롬프트 ② — 숫자

❌ 나쁜 말하기

  • "이 산업 시장 규모 알려 줘"
  • 출처를 요구하지 않았다
  • 확인할 방법을 안 줬다
  • 그럴듯한 숫자를 그대로 쓴다

✅ 좋은 말하기

  • "기관명·발표연도·원문 URL을 함께"
  • "원문에서 못 찾으면 '확인 못 함'이라고 써"
  • "추정치인지 확정치인지 구분해"
  • "출처 없는 숫자는 빼"

도식 좌우 패널. 오른쪽 항목마다 작은 링크 아이콘이 붙어 출처를 요구하는 형태.

발표자 노트이 사이트를 만들 때 실제로 쓴 원칙입니다. 출처를 찾지 못한 항목은 데이터 파일에서 아예 제외했습니다. '모르면 모른다고 쓰라'고 미리 말해 주면 AI는 빈칸을 지어내는 대신 비워 둡니다. 다음 섹션이 이 이야기입니다.

섹션· 1분

AI가 틀렸을 때

AI는 자신 있게 틀린다

도식 섹션 표지. 큰 숫자 '4'와 경고 삼각형 아이콘.

발표자 노트여기서 분위기를 한 번 바꿔 주세요. 앞까지는 AI가 잘하는 이야기였고, 이제는 AI를 믿으면 안 되는 지점입니다. 학생이 AI가 틀린 답을 준 경험을 먼저 말하게 하면 몰입도가 높습니다.

핵심 정리· 4분

환각 — 없는 것을 만들어 낸다

  • AI는 '모른다'고 말하기 어려워한다
  • 그럴듯한 이름과 숫자를 지어낸다
  • 없는 링크와 없는 책을 만든다
  • 말투가 자신 있어서 더 위험하다
  • 그래서 사람이 꼭 확인해야 한다

도식 AI 말풍선 안에 '95%'와 링크가 있고, 그 아래 확대경이 링크를 비추자 '없는 주소' 표시가 나타남.

발표자 노트이것을 환각(hallucination)이라고 부릅니다. 틀리는 이유가 '거짓말'이 아니라 '다음에 올 말을 잘 고르는 방식' 때문이라고 설명하세요. AI가 알려 준 링크를 실제로 눌러 보는 활동 한 번이 이 슬라이드보다 강합니다. 이 사이트에서도 확인되지 않은 링크는 전부 빼고 데이터 파일에 그 사실을 기록했습니다.

핵심 정리중등· 4분

출처 없는 숫자는 쓰지 않는다

  • 이 사이트의 규칙이었다 — 예외를 두지 않았다
  • 수치마다 기관명과 원문 URL을 옆에 적었다
  • 원문에서 못 찾은 항목은 데이터에서 뺐다
  • 뺀 이유도 데이터 파일에 남겼다 (excludedForUnknownSource)
  • 확인 못 한 것을 비워 두는 것이 정직한 자료다

도식 표 한 줄. 값 / 기관명 / 발표연도 / 원문 링크 / 등급 뱃지가 나란히 놓임.

발표자 노트행성 페이지의 수치 옆 작은 출처 링크를 실제로 눌러 보여 주세요. 데이터 파일에는 '왜 이 숫자를 뺐는지'까지 적혀 있습니다. 빼는 결정을 기록하는 것이 자료를 믿을 수 있게 만드는 방법입니다.

화면 보기중등· 4분

세 등급으로 표시했다

  • 검증 — 출처 페이지에서 직접 확인한 수치
  • 확인필요 — 보도자료 제목·요약에서만 본 수치, '전망'으로 표기
  • 구성 — 산업 구조를 근거로 만든 교육용 항목, 통계로 쓰지 않음

도식 초록 '검증', 노랑 '확인필요', 회색 '구성' 세 뱃지가 각각 예시 수치와 함께 카드로 놓임.

발표자 노트사이트의 모든 수치 옆에는 이 세 뱃지 중 하나가 붙어 있습니다. 학생에게 '검증'과 '구성'의 차이를 직접 찾아보게 하면 자료를 읽는 눈이 생깁니다. AI가 준 정보에 스스로 등급을 붙여 보는 활동으로 확장할 수 있습니다.

섹션· 1분

지켜야 할 약속

저작권 · 개인정보 · AI 표시

도식 섹션 표지. 큰 숫자 '5'와 방패 아이콘.

발표자 노트실습 전에 반드시 짚어야 하는 세 가지입니다. 규칙을 지키는 것이 실력의 일부라는 태도로 다루세요.

핵심 정리중등· 4분

저작권 — 가져다 쓸 때의 규칙

  • 남의 글·그림·음악을 그대로 올리지 않는다
  • 쓸 수 있는 자료인지 먼저 확인한다 (이용 조건 읽기)
  • 인용할 때는 만든 사람과 출처를 함께 적는다
  • AI가 만든 그림도 무엇을 참고했는지 알 수 없으므로 조심한다
  • 친구 얼굴 사진은 본인 허락 없이 쓰지 않는다

도식 체크리스트 형태. 각 줄 앞에 자물쇠/허가 아이콘.

발표자 노트이 사이트는 외부 이미지를 쓰지 않고 이모지와 직접 그린 SVG 도식만 씁니다. 그래서 저작권 문제가 처음부터 생기지 않는 구조를 골랐습니다. '문제가 생기지 않는 방법을 고르는 것'도 하나의 실력이라고 알려 주세요.

핵심 정리· 4분

이 사이트는 개인정보를 안 받는다

  • 회원가입이 없다
  • 이름·전화·이메일을 묻지 않는다
  • 진단 결과는 내 브라우저에만 남는다
  • 안 받으면 잃어버릴 것도 없다

도식 빈 입력 양식 위에 큰 ✕ 표시. 옆에 브라우저 안에만 데이터가 머무는 도식.

발표자 노트개인정보를 지키는 가장 확실한 방법은 처음부터 받지 않는 것입니다. 진단 도구의 결과와 뱃지는 서버가 아니라 학생 기기의 브라우저 저장소에만 남고, 지우면 사라집니다. 학생 실습에서도 본인·친구의 실명과 연락처를 넣지 않기로 약속하고 시작하세요.

핵심 정리중등· 4분

AI로 만들었다고 밝히기

  • AI가 만든 것은 만들었다고 적는다
  • 어디까지 AI가 했고 어디부터 내가 했는지 쓴다
  • 한국은 「인공지능 발전과 신뢰 기반 조성 등에 관한 기본법」에 생성형 AI 표시 의무를 담았다 (2026-01-22 시행)
  • 밝히는 것은 부끄러운 일이 아니라 신뢰를 만드는 일이다

도식 작품 카드 하단에 'AI와 함께 만들었습니다' 표시 배지가 붙은 도식.

발표자 노트법 이름과 시행일은 이 사이트의 데이터 파일에 출처 링크와 함께 기록되어 있는 내용입니다. 학생 작품에도 '이 부분은 AI와 함께 만들었습니다' 한 줄을 넣게 하세요. 그 한 줄이 오늘 배운 태도를 그대로 보여 줍니다.

섹션중등· 1분

이제 직접 만들어 보자

학년에 따라 미션이 다릅니다

도식 섹션 표지. 큰 숫자 '6'과 초·중·고 세 갈래 화살표.

발표자 노트다음 세 장 중 우리 반에 맞는 한 장만 쓰세요. 나머지는 넘기면 됩니다. 자세한 단계와 프롬프트 예시는 사이트의 학생 워크북(/vibecoding/lab/)에 있습니다.

실습 미션초등· 20분

초등 미션 — 말로 만드는 나만의 소개 페이지

  • ① 내가 좋아하는 것 3개 적기
  • ② 그것을 AI에게 말로 설명하기
  • ③ 페이지를 만들어 달라고 하기
  • ④ 색과 글자를 바꿔 달라고 하기
  • ⑤ 친구에게 보여 주고 한 곳 고치기

도식 다섯 개의 발자국 아이콘이 왼쪽에서 오른쪽으로 이어지고, 끝에 완성된 소개 페이지 미리보기.

발표자 노트종이에 먼저 세 가지를 쓰게 하고, 그 다음에 화면을 켜세요. 순서를 바꾸면 아무 말도 못 합니다. 완성이 목표가 아니라 '말을 바꾸면 결과가 바뀐다'를 느끼는 것이 목표입니다. 실명·주소·전화번호는 쓰지 않기로 먼저 약속합니다.

실습 미션중등· 30분

중등 미션 — 우리 반 미래직업 카드 사이트

  • ① 모둠마다 행성 하나를 고른다
  • ② 그 행성에서 직업 3개를 찾아 카드로 정리한다 (사이트에서 출처 확인)
  • ③ 카드 하나의 모양을 AI와 함께 만든다
  • ④ 같은 모양으로 나머지 카드를 채운다 — 틀을 재사용한다
  • ⑤ 짝 모둠과 서로 검수한다 (링크·오타·읽기 쉬움)
  • ⑥ 고친 내용을 기록하고 발표한다

도식 카드 1장을 확대한 뒤 같은 모양 카드 여러 장으로 복제되는 도식. 오른쪽에 짝 모둠 검수 화살표.

발표자 노트③④가 이 미션의 핵심입니다. 카드 하나를 잘 만들고 그 틀을 반복하는 것이 앞에서 본 '생성기' 원리입니다. ⑤에서 검수 항목을 세 개로 제한하면 시간 안에 끝납니다. 출처를 못 찾은 직업은 카드에 '확인 못 함'으로 적게 하세요.

실습 미션고등· 45분

고등 미션 — JSON 데이터와 생성기로 페이지 찍기

  • ① 주제를 정하고 필요한 항목(필드)을 설계한다
  • ② 항목마다 값·출처·신뢰등급을 넣어 JSON 3~5개를 만든다
  • ③ 값을 넣으면 HTML이 나오는 생성기 코드를 AI와 함께 쓴다
  • ④ 실행해서 페이지 3~5장을 한 번에 만든다
  • ⑤ 틀을 한 곳 고쳐 전체가 바뀌는지 확인한다
  • ⑥ 검수 항목 5가지로 점검하고 고친 기록을 남긴다
  • ⑦ 데이터 구조를 바꾸지 않고 새 항목을 추가해 본다

도식 JSON 파일 아이콘 → 파이썬 생성기 아이콘 → HTML 페이지 5장. 생성기에 렌치 아이콘을 얹어 '한 곳 수정' 표시.

발표자 노트이 미션은 이 사이트가 만들어진 방식을 그대로 축소한 것입니다. 목표는 예쁜 페이지가 아니라 '한 곳을 고치면 전체가 바뀌는 구조'입니다. ⑤에서 성공하면 개념을 이해한 것입니다. 무료 실행 환경으로 Google Colab 을 쓰면 설치 없이 파이썬을 돌릴 수 있습니다.

핵심 정리중등· 4분

이 사이트를 수업에 쓰는 법

  • 학생 동선: 나의 행성 찾기 → 행성 페이지 → 활동 → 나눔
  • 교사 동선: 교사·강사 실에서 지도안·활동지·슬라이드를 받는다
  • 화면 위 학년급 버튼으로 같은 내용의 밀도를 바꾼다
  • 교사 모드를 켜면 지도 팁과 유의점이 함께 보인다
  • 슬라이드는 이 페이지에서 바로 발표하거나 인쇄해 PDF로 나눈다

도식 위쪽에 학생 동선 4칸, 아래쪽에 교사 동선 4칸이 나란히 흐르는 두 줄 도식.

발표자 노트사이트를 처음 여는 교사에게 이 다섯 줄만 알려 주면 충분합니다. 학년급 버튼과 교사 모드는 페이지를 옮겨도 선택이 유지됩니다. 이 슬라이드 화면에서 P 를 누르면 인쇄용으로 바뀌어 발표자 노트까지 함께 나옵니다.

단계중등· 3분

45분 수업 한 편 만들기

  1. 진단 (5분)

    '나의 행성 찾기'로 각자 관심 분야를 찾는다

  2. 행성 (15분)

    나온 행성 페이지를 읽고 직업 하나를 고른다

  3. 활동 (15분)

    행성 페이지의 활동 카드 하나를 그대로 진행한다

  4. 나눔 (10분)

    고른 직업과 이유를 모둠에서 나눈다

도식 45분 타임라인 막대를 5/15/15/10 비율로 나눈 도식. 각 칸에 단계 이름.

발표자 노트바이브코딩 실습을 넣으려면 2차시로 늘리고 3번 자리에 워크북 미션을 넣으세요. 1교시는 이 흐름대로, 2교시는 실습으로 구성하면 가장 안정적입니다. 각 단계의 시간은 학급 상황에 맞게 조정하세요.

핵심 정리· 3분

오늘의 한 문장 · 다음 단계

AI가 만들고, 사람이 정하고 확인한다

  • 다음 단계 1 — 워크북에서 내 미션 끝내기
  • 다음 단계 2 — 행성 하나를 골라 끝까지 읽기
  • 다음 단계 3 — 출처 없는 숫자 찾아내기
  • 다음 단계 4 — 내가 쓴 프롬프트를 고쳐 다시 해 보기

도식 가운데 큰 문장 한 줄, 아래에 다음 단계 네 개가 체크박스로 놓임.

발표자 노트오늘의 한 문장을 학생이 소리 내어 함께 읽게 하세요. 네 가지 다음 단계 중 하나를 골라 공책에 적고 나가게 하면 수업이 이어집니다. 다음 시간 시작에 그 선택을 확인하면 자연스러운 복습이 됩니다.

나눔 질문· 5분

나눔 질문

  1. AI에게 맡기고 싶은 일과 절대 맡기고 싶지 않은 일은?
  2. 오늘 만든 것에서 '내가 정한 것'은 무엇이었나?
  3. AI가 준 답이 틀렸는지 어떻게 확인할 수 있을까?
  4. 10년 뒤 내 일에서 AI는 어떤 자리에 있을까?

도식 네 개의 말풍선이 서로 마주 보게 배치. 가운데는 비어 있음.

발표자 노트네 질문을 다 쓰지 말고 학급 분위기에 맞는 두 개만 고르세요. 첫 질문은 거의 모든 학년에서 이야기가 잘 나옵니다. 답을 정리해 주지 말고, 서로 다른 답이 나온 것을 그대로 남기고 끝내세요.

마무리· 1분

AI가 만들고, 사람이 정하고 확인한다

미래일터 탐험대 · 바이브코딩 수업

  • 슬라이드 · 워크북 · 행성 12개는 사이트에서
  • 오늘과내일의학교 · 가르치는사람들

오늘과내일의학교 · 가르치는사람들

도식 밤하늘 배경에 큰 한 문장. 아래에 사이트 주소와 기관명.

발표자 노트마지막 화면을 띄워 둔 채로 정리하세요. 학생이 사이트 주소를 적을 시간을 줍니다. 이 슬라이드 자체도 데이터 한 파일에서 생성된 것이라고 알려 주면 오늘 수업이 한 바퀴 닫힙니다.

슬라이드를 클릭하면 다음 장으로 넘어갑니다

이 슬라이드는 어떻게 만들어졌나

슬라이드 43장의 내용은 build/slides_data.py 파일 한 곳에 들어 있습니다. 이 페이지(HTML)와 발표용 PPTX 파일은 같은 데이터를 읽어 각자의 방식으로 그립니다. 글자를 하나 고치면 두 곳이 함께 바뀝니다. 이것이 이 사이트 전체를 만든 방식과 같습니다.

  • 내용 원본 : build/slides_data.py (발표자 노트·도식 설명 포함)
  • 화면 : /assets/vibe.css + /assets/slides.js (라이브러리 없음)
  • 역량 프레임 인용 : data/domains.json → meta.competencyFrame

바이브코딩이 뭐야? 학생 워크북 열기 교사·강사 실