바이브코딩으로 과학을 만드는
AI 메이커 프로젝트
홀로그램을 코드로 띄우고, 나만의 프로그램을 만들고, AI로 발표·홍보까지. 아래 안내만 따라가면 선생님께 묻지 않아도 끝까지 완성할 수 있어요.
로그인하기
학번·이름을 입력하면 진행상황이 내 기기에 저장돼요.
과제 4개 완성
홀로그램 · 나만의 프로그램 · 발표 자료 · AI 홍보물을 하나씩 만들어요.
길 잃으면 🗺️
오른쪽 아래 길찾기 버튼을 누르면 지금 할 일을 알려줘요.
먼저 로그인해 주세요 🔐
학번·이름을 입력하면 이 기기에 진행상황이 저장되고, 제출·전시도 학번·이름으로 올라가요.
⚠️ 매번 똑같은 학번·이름으로 로그인하세요. 다르게 적으면 다른 사람으로 인식돼 먼저 낸 과제가 안 보여요.
내가 완성해야 할 4가지
각 항목을 끝낼 때마다 오른쪽 동그라미를 눌러 체크하세요. 네 개를 모두 채우면 제출 준비 완료! 방법이 막히면 각 과제의 📖 자세한 방법 보기를, 모르는 말이 나오면 '코딩 기초' 탭의 용어 사전을 보세요.
플로팅 홀로그램 활동 보고서 완성
홀로그램 활동 페이지에서 기존처럼 로그인 → 🤖 바이브코딩 버전으로 4면 홀로그램 만들기 → 📝 활동 보고서 작성 → 💾 보고서 저장 → 📄 보고서를 PDF로 내보내기. 이 PDF는 '제출' 탭에서 직접 올려요.
필수 · 홀로그램 활동나만의 프로그램 만들기
바이브코딩으로 내가 만들고 싶은 프로그램을 만듭니다. 게임, 과학 시뮬레이션, 모의 투자 계산기 등 무엇이든 좋아요. ⚠️ 생기부에 들어가니 이름·내용을 진지하게! 이 프로그램이 발표 작품이 돼요.
필수 · 발표할 프로그램발표 자료 만들기
과제 2에서 만든 '나만의 프로그램'으로 발표 자료를 만듭니다. (플로팅 홀로그램 ❌) 코드 3장(HTML·CSS·JS)과 어려웠던 점 등 꼭 넣을 내용은 '발표 가이드'에 정리해 뒀어요.
필수 · 발표용AI 홍보물 만들기
ChatGPT(이미지 생성)를 활용해 내가 만든 프로그램을 홍보하는 이미지 한 장을 만듭니다. 포스터처럼 사람들이 써 보고 싶게!
필수 · ChatGPT 활용막힐 땐 여기서 도움 받기
과제를 하다 막히면 아래 자료를 열어 보세요. 만드는 방법, 인터넷에 올리는 방법, 코딩 기초가 모두 들어 있어요.
HTML · CSS · JavaScript 기초
발표 자료에 필요한 세 가지 언어가 무엇인지, 예시와 함께 쉽게 설명해 둔 코너예요. 코드 3장을 찾기 전에 꼭 읽어봐요.
자료 열기플로팅 홀로그램 활동
기존에 로그인했던 그대로 로그인 → 🤖 바이브코딩 버전 → 📝 활동 보고서 작성 → 💾 보고서 저장 → 📄 보고서를 PDF로 내보내기. 제출은 '제출' 탭에서 파일로 올려요!
활동 열기GitHub Pages 배포하기
내가 만든 프로그램을 인터넷 주소로 만들어 친구에게 공유하는 방법이에요. 발표·홍보할 때 꼭 필요해요.
매뉴얼 열기웹앱은 세 가지 언어로 만들어요
발표 자료에 내 코드의 HTML·CSS·JavaScript 예시를 각각 넣어야 해요. 그러려면 셋이 무슨 역할인지 알아야겠죠? 집 짓기에 비유하면 이렇게 나뉘어요.
HTML
뼈대 · 구조웹페이지에 "무엇이 있는지"를 정해요. 제목·글·버튼·이미지를 어디에 놓을지 짜는 골조예요. 사람으로 치면 뼈대!
CSS
꾸미기 · 디자인웹페이지가 "어떻게 보이는지"를 정해요. 색·크기·글꼴·위치·배경을 꾸며요. 사람으로 치면 옷과 머리 스타일!
background: violet;
}
JavaScript
움직임 · 기능버튼을 누르면 "무슨 일이 일어나는지"를 정해요. 클릭·계산·애니메이션처럼 살아 움직이게 해요. 사람으로 치면 행동!
alert('안녕!');
}
이 셋이 합쳐지면 우리가 보는 웹앱이 완성돼요!
<button id="hi"> 눌러줘 </button>
#hi {
background: violet;
color: white;
}hi.onclick = () => {
alert('안녕!');
}hi가 뭐예요?
셋 다 같은 버튼의 '이름표(id)'예요. HTML에서 id="hi"로 이름을 붙이면, CSS는 #hi로, JavaScript는 hi로 그 버튼을 불러와요. 이름은 hi 말고 다른 걸로 바꿔도 돼요 — 단, 세 곳을 똑같이!
() => { } 랑 alert 는?
() => { ... } 는 "버튼을 눌렀을 때 할 일"을 적는 부분이고, alert('안녕!') 는 '안녕!'이라고 알림 창을 띄워라는 뜻이에요.
발표 자료에 코드 3장을 넣어야 하는데, 어디가 어디인지 헷갈리죠? 내 웹앱은 보통 파일 하나(.html) 안에 셋이 모두 들어 있어요. 위치는 이렇게 정해져 있어요 👇
<body> <h1>내 게임</h1> <button>시작</button> </body>
<style>
button { background: violet; }
</style><script>
버튼.onclick = () => { ... }
</script>- 내
.html파일을 메모장(또는 코드 편집기)으로 열어요. (파일 우클릭 → 연결 프로그램 → 메모장) <style>와</style>사이 = CSS 🎨<script>와</script>사이 = JavaScript ⚡- 그 밖에 화면을 만드는 부분(특히
<body>안) = HTML 🦴 - 각 부분을 드래그해 캡처(Win + Shift + S) 또는 복사해서 발표 자료에 붙여요.
- 찾기 어렵거나 헷갈리면 AI에게 물어보면 돼요! 막혔다고 멈추지 말기.
- 아래 문장을 복사해서 AI(Claude·ChatGPT 등) 채팅창에 붙여넣어요.
- 맨 끝 [내 코드] 자리에 내
.html파일 내용을 전부 붙여넣고 보내요. - AI가 HTML·CSS·JS 부분과 예시, 설명을 정리해 주면 그대로 발표에 넣어요.
아래는 내가 만든 웹앱 코드야. 발표 자료에 넣을 거라서, 이 코드에서 ① HTML 부분 ② CSS 부분 ③ JavaScript 부분이 각각 어디인지 알려줘. 그리고 각각 발표에 보여주기 좋은 짧은 예시를 한 토막씩 골라서, "이 부분은 무슨 역할인지"도 초등학생도 알 수 있게 쉽게 설명해줘. 내 코드: [여기에 내 .html 파일 내용을 전부 붙여넣기]
AI가 코드를 만들어줬는데 어떻게 실행하는지 모르겠다고요? 여기서 제일 많이 막히니까 천천히 따라와요.
.html로 끝내기파일 이름을 내프로그램.html 처럼 .html로 끝나게 적어요.내프로그램.html로 적어도 실제로는 내프로그램.html.txt로 저장돼서 실행이 안 돼요. 저장 창에서 '파일 형식 → 모든 파일'을 꼭 확인하세요.AI에게 우리말로 원하는 걸 설명해 코드를 만들고, "이렇게 바꿔줘"를 반복해 완성하는 방식이에요.
AI에게 보내는 명령(부탁하는 말)이에요. 자세하게 적을수록 결과가 좋아져요.
화면에 무엇이 있는지(제목·버튼·그림) 정하는 뼈대예요.
어떻게 보이는지(색·크기·위치) 꾸미는 부분이에요.
누르면 무슨 일이 일어나는지(움직임·기능) 정하는 부분이에요.
요소(버튼 등)에 붙이는 이름표예요. CSS·JS가 같은 걸 가리킬 때 써요. (예: id="hi")
웹앱이 담기는 파일이에요. 더블클릭하면 브라우저에서 실행돼요.
내가 만든 걸 인터넷 주소로 만들어 남들도 볼 수 있게 올리는 거예요.
내 웹앱을 무료로 인터넷에 올려주는 곳이에요. 배포할 때 써요.
화면을 그림으로 찍는 거예요. 윈도우는 Win + Shift + S, 맥은 ⌘ + Shift + 4.
빛이 반사돼 허공에 떠 보이는 가짜 상이에요. 플로팅 홀로그램의 원리예요.
오른쪽 아래 버튼이에요. 누르면 지금 내가 할 일을 알려줘요.
발표 자료에 꼭 넣을 10가지
아래 순서대로 만들면 발표 자료가 완성돼요. HTML·CSS·JavaScript가 헷갈리면 '코딩 기초' 탭을 먼저 보고 와요.
발표하는 작품은 플로팅 홀로그램이 아니라, 따로 개발한 '나만의 프로그램'이에요. 과제 2번에서 만든 내 프로그램 하나를 골라 발표 자료를 만듭니다.
그래서 프로그램 이름을 장난스럽게 짓거나, 장난스러운 프로그램을 만들어 넣으면 본인이 불이익을 받을 수 있어요. 진지하게, 자신 있게 보여줄 수 있는 작품으로 준비하세요.
여기서 4가지를 직접 제출해요
파일을 올리거나 링크를 붙여넣고 제출하기를 누르면 끝! 다 못 했어도 먼저 낸 뒤 나중에 이어서 제출할 수 있어요.
여기까지 왔다면, 너는 이제 AI 메이커야 ✨
코드로 빛을 띄우고 나만의 프로그램을 세상에 내놓은 경험. 끝까지 완성한 스스로를 칭찬해 주세요!
친구들의 작품 아카이브 🖼️
제출하면 여기에 작품이 전시돼요. 친구들이 만든 프로그램과 홍보물을 구경하고 직접 실행해 봐요. 마음에 들면 ❤️ 좋아요도 눌러요!
제출 현황 대시보드
학생들의 제출 상태를 한눈에 보고, 파일·링크를 열거나 CSV로 내려받을 수 있어요.