🦉

말로 만드는
나만의 교육 웹앱

바이브 코딩 2시간 특강
AI 교육 강사를 위한 맞춤 참여형 콘텐츠 제작
챗GPT 코덱스 실습
바이브 코딩 2시간 특강
진행 안내
미래이음연구소

오늘 2시간, 이렇게 진행합니다

구간시간내용
도입10분아이스브레이킹 · 바이브 코딩이 뭐길래?
파트 115분개념 — 말로 만드는 프로그램, 인간과 AI의 역할
파트 220분좋은 프롬프트 쓰기(R·C·T·F) + 내 프롬프트 작성
실습 130분챗GPT 코덱스로 '오늘의 운세' 웹앱 만들기
휴식5분— 잠깐 쉬어가기 —
파트 315분완성물 공유 · HTML 다운로드 · 데이터 저장
실습 220분'디지털 역량 자가진단 앱' 과제 착수
마무리5분정리 · 형성평가 · 과제 제출 안내
바이브 코딩 2시간 특강
학습 목표
미래이음연구소

학습 목표

  • 바이브 코딩의 개념과 특징을 이해하고, AI를 활용한 웹앱 제작 과정을 설명할 수 있다.
  • 효과적인 프롬프트를 작성하여 원하는 기능의 웹앱을 생성할 수 있다.
  • 생성된 웹앱을 수정·보완하고 실생활·교육 현장에 활용할 수 있다.
바이브 코딩 2시간 특강
PART 1
미래이음연구소
PART 01

말로 만드는
나만의 프로그램

01
바이브 코딩 2시간 특강
01 말로 만드는 프로그램
미래이음연구소

말만 해도 프로그램이 만들어진다고요?

📺 함께 보기 — 코딩 몰라도, AI로 10여 분 만에 앱 개발
  • 전문 개발자가 아닌 사람이 AI로 앱을 만드는 '시민 개발자' 흐름
  • 필요한 건 코딩 실력이 아니라 "무엇을 만들지 설명하는 힘"
  • 오늘 우리도 같은 방식으로 나만의 교육 웹앱을 직접 만들어 봅니다
🔗 영상 출처 : youtube.com/watch?v=oZZoMwwD3zM
바이브 코딩 2시간 특강
01 말로 만드는 프로그램
미래이음연구소
💬 바이브 코딩이란?
  • 인공지능(AI)의 도움을 받아 코드를 생성하는 방식
  • 사용자가 자연어로 프롬프트를 작성해 전달하면 AI가 코드를 생성
  • 퀴즈·게임·시뮬레이션 등 교육 콘텐츠 제작에 특히 유용
  • 코딩 몰라도 OK : 프로그래밍 지식이 없어도 말로 설명하면 AI가 대신 작성합니다.
  • 맞춤형 제작 : 내 수업, 내 학습자에 꼭 맞는 콘텐츠를 직접 만들 수 있습니다.
바이브 코딩 2시간 특강
01 말로 만드는 프로그램
미래이음연구소
💬 웹앱은 어떤 언어로 만들어질까요?

우리가 배울 필요는 없습니다. AI가 이 언어들로 대신 작성해 준다는 것만 기억하세요.

HTML

웹페이지의 뼈대와 구조를 만드는 언어

CSS

구조에 색·크기·모양 등 스타일을 입히는 언어

JavaScript

버튼 클릭·계산 등 동작과 상호작용을 담당하는 언어

바이브 코딩 2시간 특강
01 말로 만드는 프로그램
미래이음연구소
챗GPT 코덱스란 무엇인가요?

시각화 & 맞춤

아이디어를 앱·게임·퀴즈·웹페이지로 변환해 눈으로 확인

프롬프트로 생성

설명만 하면 코덱스가 실행 가능한 코드를 만들어 줌

초안 작성 & 수정

미리보기로 바로 확인하고 대화로 계속 다듬기

💡 오늘의 도구는 챗GPT 코덱스 하나입니다. 챗GPT 계정만 있으면 됩니다.
바이브 코딩 2시간 특강
01 말로 만드는 프로그램
미래이음연구소

우리의 역할 — 나는 '관리자'입니다

🧑‍💼
인간의 역할

관리자(Manager)
무엇을 만들지 결정하고, 결과물이 의도와 맞는지 확인하고, 방향을 수정합니다.

🤖
AI의 역할

실무자(Worker)
사람의 지시를 받아 실제 코드를 작성하고, 오류를 수정하고, 실행합니다.

바이브 코딩 2시간 특강
01 말로 만드는 프로그램
미래이음연구소
🛠️ 말 몇 마디로 만드는 교육자료
  • 퀴즈 앱 : 학습자가 직접 풀어보는 객관식·OX 퀴즈 웹앱
  • 설문·체크리스트 : 수업 만족도 조사, 사전 진단 설문 웹페이지
  • 안내 웹페이지 : 수업 자료·일정을 정리한 미니 홈페이지
🎯 기존 PPT·인쇄물이 '보여주는' 자료였다면, 바이브 코딩 결과물은 학습자가 직접 누르고 답하는 참여형 자료입니다.
바이브 코딩 2시간 특강
01 말로 만드는 프로그램
미래이음연구소
활동 ①

📋 만들고 싶은 콘텐츠 정하기

아래 질문에 답하며 오늘 만들 콘텐츠를 구상해 봅니다.

어디에서 사용할 콘텐츠인가요?
퀴즈·설문·안내 중 어떤 형태가 좋을까요?
학습자가 이 자료로 무엇을 하길 바라나요?
✏️ 만들고 싶은 자료를 한 문장으로 요약해 보세요. 완벽한 기획이 아니어도 괜찮습니다.
바이브 코딩 2시간 특강
PART 2
미래이음연구소
PART 02

좋은 프롬프트가
좋은 앱을 만든다

02
바이브 코딩 2시간 특강
02 좋은 프롬프트 쓰기
미래이음연구소

고성능 프롬프트의 4요소 — R·C·T·F

R

Role · 역할
AI에게 전문가 페르소나 부여

C

Context · 배경
작업 목적과 대상·상황 설명

T

Task · 과제
수행할 작업과 산출물 구체화

F

Format · 형식
출력 형태·길이·톤 지정

💡 네 가지 빈칸만 채워도 결과가 확 달라집니다. 대괄호 [ ] 안을 내 상황에 맞게 바꿔 넣으세요.
바이브 코딩 2시간 특강
02 좋은 프롬프트 쓰기
미래이음연구소
🧩 기본 프롬프트 템플릿
너는 [역할]이다. 나는 [상황/업무]를 수행해야 한다.
아래 [자료]를 바탕으로 [산출물]을 만들어 줘. 대상은 [학습자]이다.
톤은 [정중하게/간결하게]로, 형식은 [표/목록/웹앱]으로 작성해 줘.
반드시 지켜야 할 조건은 [제약조건]이다.
💡 이 템플릿은 학습을 도와주는 '비계(Scaffolding)' 역할을 합니다. 빈칸만 채워도 절반은 완성됩니다.
바이브 코딩 2시간 특강
02 좋은 프롬프트 쓰기
미래이음연구소
📝 프롬프트 작성 4단계
1
역할 : 너는 [교육 콘텐츠 제작자]이다
2
상황 : 나는 [수업 이름]을 위한 자료가 필요하다
3
산출물 : [퀴즈/설문/안내페이지]를 만들어 줘
4
대상·형식·조건을 차례로 채워 문장을 완성한다
예시 : "너는 교육 콘텐츠 제작자다. 나는 성인 대상 스마트폰 활용 수업의 마무리 퀴즈가 필요하다. 문제 5개짜리 객관식 퀴즈 웹앱을 만들어 줘. 대상은 40~60대 학습자이며, 문장은 쉽고 친근하게 써 줘."
바이브 코딩 2시간 특강
02 좋은 프롬프트 쓰기
미래이음연구소
🔍 입력 전, 프롬프트 점검 체크리스트
역할과 산출물이 명확한가?
대상 학습자를 구체적으로 적었는가?
형식(퀴즈/설문/웹페이지 등)을 지정했는가?
학생 이름 등 민감정보를 넣지 않았는가?
💡 불확실한 내용은 AI에게 "확인 필요라고 표시해 줘"라고 요청해도 좋습니다.
바이브 코딩 2시간 특강
02 좋은 프롬프트 쓰기
미래이음연구소
활동 ②

✍️ 내 프롬프트 한 문장 완성하기

활동①에서 정한 아이디어를 템플릿(역할·상황·산출물·대상·형식·조건)에 맞춰 한 문장으로 적어 봅니다.

너는 [________]이다. 나는 [________]가 필요하다.
[________]을 만들어 줘. 대상은 [________]이고, 톤은 [________], 형식은 [________]으로 해 줘.
바이브 코딩 2시간 특강
PART 3 · 실습 1
미래이음연구소
실습 1

바이브 코딩으로
나만의 웹앱 만들기

03
바이브 코딩 2시간 특강
03 웹앱 제작 실습
미래이음연구소

먼저, 챗GPT 코덱스를 엽니다

1
브라우저 주소창에 chatgpt.com 입력 → 챗GPT 접속
2
챗GPT 계정으로 로그인한다
3
왼쪽 사이드바에서 코덱스(Codex)를 선택한다
4
준비 완료! 이제 프롬프트를 입력하면 됩니다
💡 코덱스에서 만들면 '미리보기'로 바로 실행되는 웹앱을 확인할 수 있습니다.
바이브 코딩 2시간 특강
03 웹앱 제작 실습
미래이음연구소
🔮 실습 1 — '오늘의 운세' 웹앱 프롬프트
너는 [AI 교육 강사 앱 개발자]이다. 나는 [40~60대 성인 학습자 대상 실습 수업]을 진행해야 한다. 아래 [사용자가 자신의 '띠'와 '생년월일'을 선택하면, 그에 맞는 오늘의 총운·건강운·재물운을 계산해 보여주는 기능]을 바탕으로 [오늘의 운세 확인용 웹앱]을 만들어 줘. 대상은 [스마트폰에 익숙해지려는 40~60대 학습자]이다. 톤은 [친근하고 따뜻하면서 보기 쉽게], 형식은 [브라우저에서 바로 실행 가능한 참여형 웹앱]으로 작성해 줘. [제약조건] : 글자 크기는 크고 시원하게, 버튼은 직관적으로, 모든 안내 문구는 한국어로.
바이브 코딩 2시간 특강
03 웹앱 제작 실습
미래이음연구소

미리보기로 테스트하고, 대화로 보완합니다

① 테스트
  • '미리보기'에서 직접 눌러 본다
  • 어색하거나 부족한 점을 찾는다
② 추가 프롬프트로 보완
  • "글자를 더 크게 해 줘"
  • "결과에 응원 한마디를 추가해 줘"
🔁 한 번에 완성이 아니라, 테스트 → 수정을 반복하는 것이 바이브 코딩입니다.
바이브 코딩 2시간 특강
03 웹앱 제작 실습
미래이음연구소

막힐 때는 이렇게 — 실습 트러블슈팅

코드만 나와요

"미리보기로 실행되게 만들어 줘"라고 이어서 요청하세요.

한국어가 깨져요

"모든 문구를 한국어로만 작성해 줘"를 추가 입력합니다.

미리보기가 안 떠요

우측 상단 '미리보기' 탭 확인 → 새로고침(↻) 버튼을 누릅니다.

💡 결과가 이상하면 처음부터 다시 쓰지 말고, "이 부분만 이렇게 바꿔 줘"라고 이어서 요청하세요.
바이브 코딩 2시간 특강
잠깐 쉬어가기
미래이음연구소
☕

5분 휴식

만든 웹앱은 그대로 두세요 — 이어서 공유하는 법을 배웁니다.

바이브 코딩 2시간 특강
PART 4
미래이음연구소
PART 03

완성 후
활용 · 심화하기

04
바이브 코딩 2시간 특강
04 완성 후 활용
미래이음연구소

완성한 결과물, 링크로 공유하기

1
코덱스 우측 상단 공유( ↥ ) 버튼 클릭
2
공개 링크를 복사해 카톡·문자로 전달
3
브라우저만 있으면 언제든 접속 가능
⚠️ 단, 챗GPT 링크로 공유하면 여는 사람도 챗GPT 로그인을 해야 웹앱을 쓸 수 있습니다.
바이브 코딩 2시간 특강
04 완성 후 활용
미래이음연구소

로그인 없이 쓰게 하려면? HTML로 저장

1
코덱스 우측 상단 다운로드( ↓ ) 버튼 클릭
2
웹앱 이름.html 파일이 저장됨
3
이 파일을 브라우저로 열면 챗GPT 로그인 없이 바로 실행
💡 오늘 과제도 이 HTML 파일 방식으로 제출합니다. 꼭 기억하세요.
바이브 코딩 2시간 특강
04 완성 후 활용
미래이음연구소

입력받은 데이터를 저장할 순 없을까? (심화)

방법 1

Firebase
구글의 데이터 저장 서비스와 연결

방법 2

Google Sheets + Apps Script
입력값을 시트에 자동 저장

💡 오늘은 개념만 알아둡니다. 응답 수집·설문 결과 저장이 필요할 때 심화로 활용하세요.
바이브 코딩 2시간 특강
실습 2 · 과제
미래이음연구소
실습 2

내 손으로 만드는
디지털 역량 진단 앱

05
바이브 코딩 2시간 특강
실습 2 · 과제
미래이음연구소

[과제] 스마트폰 수업용 '디지털 역량 진단기'

목적

AI 교육 강사가 현장에서 시니어 학습자를 만났을 때, 스마트폰을 얼마나 잘 쓰는지 터치 몇 번으로 간단히 진단하는 앱입니다.

기능

'카톡 사진 전송 가능', '유튜브 검색 가능' 등의 문항을 체크하면 "당신의 디지털 지수는 OO점! 기본반 수업을 추천합니다" 같은 결과가 나오는 화면.

바이브 코딩 2시간 특강
실습 2 · 과제
미래이음연구소

난이도를 골라 도전하세요

하 · 기본형
자가진단 앱(기본)
  • 역량 체크 문항 5개 이상
  • 예/아니오·체크박스 응답
  • 결과 보기 버튼
  • 점수 계산 + 3단계 결과
중 · 실전형
자가진단 앱(실전)
  • 질문 10개
  • 단답형·객관식 포함
  • 자동 채점 후 결과 공개
  • 진행률 표시
  • 결과에 맞는 교육 추천
상 · 활용형
자가진단 앱(활용)
  • 사용 전 로그인 기능
  • 역량 판단 기능(질문)
  • 부족한 역량 사용법 제시
  • 영역별 역량 결과 제시
HTML로 다운로드한 뒤, 결과물 링크를 ‘과제 제출하기’ 웹사이트에 제출!
바이브 코딩 2시간 특강
실습 2 · 과제
미래이음연구소

완성 예시 미리 보기 (활용형)

smartphone_digital_competency_app.html — 클릭해서 실제 열어 함께 확인합니다.
  • 이름·비밀번호 로그인 → 총 12문항 자가진단
  • 6개 영역별 점수 + 종합 등급(4단계) 링 차트로 표시
  • 점수 낮은 기능은 단계별 사용법을 자동 안내
  • 결과 인쇄·PDF 저장, 기기에 이력 저장(localStorage)
💡 이 정도가 '상' 수준입니다. 오늘은 '하'부터 시작해도 충분합니다.
바이브 코딩 2시간 특강
실습 2 · 과제
미래이음연구소
활동 ③ · 핸즈온

🚀 지금 바로 만들어 봅시다

난이도(상·중·하)를 하나 골라, 배운 템플릿으로 '디지털 역량 진단 앱'을 직접 생성해 보세요.

1
R·C·T·F 템플릿으로 진단 앱 프롬프트 작성
2
챗GPT 코덱스에 입력 → 미리보기로 테스트
3
부족한 부분을 대화로 보완 → HTML 다운로드
바이브 코딩 2시간 특강
마무리
미래이음연구소

📌 오늘 배운 것을 정리합니다

  • 01 말로 만드는 프로그램 — 바이브 코딩의 개념과 활용 사례를 이해했습니다.
  • 02 좋은 프롬프트 — R·C·T·F로 효과적인 프롬프트를 작성했습니다.
  • 03 웹앱 제작 — 챗GPT 코덱스로 나만의 웹앱을 직접 만들었습니다.
  • 04 활용·심화 — 공유·다운로드·데이터 저장 방법을 알아봤습니다.
💡 좋은 웹앱은 코딩 실력이 아니라, 좋은 아이디어와 좋은 프롬프트에서 시작됩니다.
바이브 코딩 2시간 특강
형성평가
미래이음연구소
✏️ 형성평가 · 문제 1 (객관식)

Q. 다음 중 바이브 코딩(Vibe Coding)에 대한 설명으로 가장 알맞은 것은?

① 반드시 HTML, CSS, JavaScript를 모두 배워야 사용할 수 있다.
② AI에게 자연어로 요구사항을 설명하여 프로그램을 제작하는 방식이다.
③ 완성된 프로그램은 수정할 수 없다.
④ 전문가만 사용할 수 있는 개발 방식이다.
👆 정답이라고 생각하는 보기를 눌러 보세요.
✅ 정답 ② — 사용자가 자연어로 원하는 기능을 설명하면 AI가 코드를 생성해 제작하는 방식입니다.
바이브 코딩 2시간 특강
형성평가
미래이음연구소
✏️ 형성평가 · 문제 2 (객관식)

Q. 다음 중 좋은 프롬프트 작성 방법으로 가장 적절한 것은?

① "좋은 거 만들어 줘."
② "예쁘게 만들어 줘."
③ "40~60대가 쓸 오늘의 운세 웹앱을 만들어 줘. 글자는 크게, 버튼은 직관적으로 구성해 줘."
④ "알아서 다 해 줘."
👆 정답이라고 생각하는 보기를 눌러 보세요.
✅ 정답 ③ — 프롬프트는 대상·목적·기능·형식·조건을 구체적으로 제시할수록 원하는 결과를 얻습니다.
바이브 코딩 2시간 특강
형성평가
미래이음연구소
✏️ 형성평가 · 문제 3 (OX 퀴즈)

Q. 프롬프트는 짧고 모호하게 쓸수록 AI가 알아서 더 좋은 결과를 만들어 준다.

⭕  O (맞다)
❌  X (아니다)
👆 O 또는 X를 눌러 보세요.
✅ 정답 X — 모호한 요청은 엉뚱한 결과로 이어집니다. 역할·대상·형식·조건을 구체적으로 줘야 합니다.
바이브 코딩 2시간 특강
형성평가
미래이음연구소
🏁 형성평가 결과

결과. 오늘 직접 풀어 본 형성평가 점수예요!

0 / 3
아직 푼 문제가 없어요.
앞 슬라이드에서 보기를 눌러 문제를 풀어 보세요.
바이브 코딩 2시간 특강
형성평가 · 실시간 현황
미래이음연구소
📊 실시간 응답 현황 ● LIVE
참여자 0명 · 응답 0건
아직 응답이 없습니다. 청중이 문제를 풀면 여기에 실시간으로 나타납니다.
바이브 코딩 2시간 특강
 
미래이음연구소
모두를 위한 AI 리터러시 교육

THANK YOU

오늘 만든 웹앱을 수업 현장에서 직접 활용해 보세요.
미래이음연구소
1 / 38
← → 이동 · G 전체보기 · N 강사노트 · F 전체화면
강사 진행안 · N 키로 숨기기