말로 설명하면
내 진로 수업 도구가
생깁니다
1부 Google AI Studio로 만들고, AI가 만든 결과를 따져 보기
2부 파일 한 장 웹앱을 만들어 검증하고 링크로 나누기
설명보다 먼저, 써 보세요
학생이 된 것처럼 2분 동안 눌러 보세요.
이 세 개를 만드는 데 몇 분 걸렸을까요?
코드는 한 줄도 쓰지 않았습니다. 말로 설명하고, 눌러 보고, 고쳐 달라고 했을 뿐입니다.
오늘 2시간이 끝나면 손에 쥐는 것
직접 만든 앱 2개, 검증을 거친 대시보드 링크 1개, 다음 주에 만들 도구 설계서 1장
미션 1. 진로 질문 카드 (모두)
미션 2. 장바구니와 퀴즈 (짝꿍)
데이터 도구 시연과 예측
미션 3. AI 함정 찾기
미션 4. 대시보드 만들기와 파일 점검
미션 5. 버그 수사
미션 6. 우리 학교 것으로 바꾸기
미션 7. 링크로 나누기, 그리고 설계서
여섯 도구는 진로체험 흐름을 따라갑니다
해마다 하는 진로체험 업무의 장면마다 도구가 하나씩 놓입니다.
체험 전
체험 당일
체험 후
만들기 전에 지킬 것 세 가지
미션 3에서 이 세 가지를 어긴 앱을 직접 찾아봅니다.
실제 학생 정보는 넣지 않습니다
이름, 연락처, 성적, 상담 내용, 검사 결과는 가상 자료로 바꿉니다.
판단은 선생님이 합니다
직업 추천, 적성 판정, 합격 예측은 앱에 맡기지 않습니다.
공유 전에 먼저 열어 봅니다
내용과 공개 범위를 확인한 뒤에 링크를 보냅니다.
시작 준비: 실습 화면, 짝꿍, 포스트잇
- 노트북에서 오른쪽 QR이나 아래 주소를 엽니다. 오늘 쓸 문장은 전부 실습 화면에 있습니다.
주소 준비 중 - 크롬 새 탭에서 aistudio.google.com/apps 에 로그인합니다.
- 옆자리와 짝꿍이 되어 A와 B를 정합니다.
주세요
다 됐으면 초록, 막히면 빨강을 모니터에 붙입니다.
만들고, 따져 보기
AI Studio에서 앱 만드는 화면 열기
- aistudio.google.com/apps 접속
- 왼쪽 메뉴의 Build 화면인지 확인
- 가운데 입력창에 요청을 붙여 넣고 실행
- 오른쪽 미리보기에서 바로 눌러 보기
Build
Gallery
화면 구성은 자주 바뀝니다. 메뉴 이름이 달라도 순서는 같습니다.
한 줄로 부탁하면, AI가 빈칸을 마음대로 채웁니다
이름 입력칸, 적성 판정, 출처 없는 연봉 숫자, AI 상담 버튼까지 붙은 앱이 나오기 쉽습니다.
세 줄 공식
AI는 아주 성실하지만, 우리 학교 사정을 모르는 신규 선생님입니다.
| 줄 | 묻는 것 | 진로 질문 카드의 예 |
|---|---|---|
| 1 | 누가 쓰나 | 중학생이 진로 수업 시간에 쓴다 |
| 2 | 무엇을 하나 | 카드를 한 장씩 넘기며 생각을 정리한다 |
| 3 | 화면에 무엇이 있나 | 묶음 버튼 네 개, 큰 카드, 다음, 섞기 |
| + | 지킬 것 | 입력, 저장, 로그인, AI 호출 기능은 넣지 않는다 |
미션 1. 모두 함께 진로 질문 카드
- 실습 화면 P1을 복사해 Build 입력창에 붙여 넣고 실행
- 짝꿍과 확인 포인트 다섯 개 체크
- 고치기 두 번 채팅으로 한 번, 화면을 짚어서 한 번
- 빨리 끝나면 도전 카드 한 장
확인 포인트
- 네 묶음 버튼이 보인다
- 카드가 한 장씩 넘어간다
- 섞기를 누르면 순서가 바뀐다
- 입력하거나 저장하는 칸이 없다
- 카드 아래 안내 문구가 보인다
고쳐 달라고 말하는 두 가지 방법
채팅으로 말하기
앱 전체에 대한 부탁은 채팅창에 씁니다.
화면을 짚어서 말하기
주석 모드로 바꿀 부분을 선택하고 내용을 적습니다.
미션 2. 짝꿍이 나눠 만들고, 서로 고쳐 주기
내 과목 장바구니
시뮬레이터. 실습 화면 P2
어떤 직업 이야기일까?
게임. 실습 화면 P3
| 시간 | 할 일 |
|---|---|
| 29~36분 | 각자 만들고 확인 포인트 체크 |
| 36~39분 | 자리를 바꿔 짝의 앱을 학생처럼 써 보고, 처방전 한 장 써서 건네기 |
| 39~43분 | 받은 처방전을 그대로 채팅창에 넣어 고치고 다시 눌러 보기 |
"안 돼요" 대신 처방전을 씁니다
실습 화면의 처방전 작성기에 칸만 채우면 문장이 완성됩니다.
맞혀 보세요. 추첨이 필요한 프로그램은 몇 개?
프로그램 신청 점검표(데이터 분석). 정원보다 신청이 많으면 추첨 필요, 50% 미만이면 홍보 보강
| 프로그램 | 정원 | 신청 | 신청률 | 표시 |
|---|---|---|---|---|
| 드론 조종 체험 | 20 | 31 | 155.0% | 추첨 필요 |
| 간호사 직업인 대화 | 25 | 22 | 88.0% | 정상 |
| 웹툰 작가 특강 | 30 | 41 | 136.7% | 추첨 필요 |
| 지역 기업 탐방 | 24 | 10 | 41.7% | 홍보 보강 |
| 반려동물 관리사 체험 | 15 | 13 | 86.7% | 정상 |
체험 만족도 평균은 4점보다 높을까요?
체험 후 설문 한눈에(데이터 시각화). 가상 익명 설문 60명
미션 3. AI가 만든 진로 앱에서 함정 찾기
"진로 앱 만들어 줘" 한 줄로 나올 법한 앱입니다. 지킬 것 세 가지를 어긴 곳을 찾아 눌러 보세요.
- 실습 화면 미션 3을 엽니다
- 문제라고 생각하는 부분을 눌러 봅니다. 괜찮은 부분도 섞여 있습니다
- 함정 다섯 개를 모두 찾으면 고치는 한 문장이 모입니다
찾아야 할 함정
괜찮은 부분 3개가 섞여 있습니다
다섯 함정과, 고치는 한 문장
괜찮은 부분: 관심 분야 고르기, 다시 하기, 커리어넷 링크. 학생을 알아볼 수 없고, 판단을 대신하지 않기 때문입니다.
방금 하신 일이 바이브 코딩의 전부입니다
함정을 따지고
말하기
5분 쉬어 갑니다
빨간 포스트잇이 붙은 자리는 지금 찾아갑니다.
아래 시간 버튼을 누르면 타이머가 시작됩니다.
검증하고, 나누기
1부 앱은 식당 요리, 2부 앱은 도시락
식당 요리
- 생김새
- 여러 파일이 AI Studio 안에서 함께 돌아갑니다
- 여는 곳
- AI Studio 안
- 나누는 법
- AI Studio 공유 기능 (받는 사람이 코드도 봅니다)
도시락
- 생김새
- 화면, 꾸밈, 동작이 index.html 하나에 다 들어 있습니다
- 여는 곳
- 어느 컴퓨터든 더블클릭
- 나누는 법
- Netlify Drop에 올리면 링크가 생깁니다
지금 보고 계신 이 발표 화면도 도시락 하나입니다.
미션 4. 채팅 AI에게 대시보드 코드 받기
- Gemini, ChatGPT, Claude 중 하나를 엽니다
- 실습 화면 P6을 복사해 붙여 넣습니다
- 코드의 첫 줄과 끝 줄을 짝꿍이 소리 내어 확인합니다
- 코드 블록의 복사 버튼을 누릅니다
<html lang="ko">
...
...
</html>
정답 숫자는 일부러 프롬프트에 넣지 않았습니다. 숫자는 사람이 확인합니다.
파일로 저장하고, 점검기에 넣어 보기
방법 1. 점검기에서 바로 내려받기 (권장)
- 실습 화면 미션 4의 코드 붙여 넣기 칸에 붙여 넣기
- 점검을 누르고 모두 통과인지 확인
- index.html 내려받기를 눌러 진로대시보드 폴더로
방법 2. 메모장에 저장
저장한 파일을 점검기에 끌어다 놓으면 .txt 함정, 한글 깨짐, 외부 전송 코드를 바로 알려 줍니다.
미션 5. 버그 수사: 둘 다 그럴듯해 보입니다
같은 데이터로 만든 대시보드 두 개에 버그가 하나씩 숨어 있습니다. 계산기로 직접 따져 보세요.
전체 참여율 81.3%
네 활동의 인원으로 직접 계산해 보면?
점검 후보 3개
기준은 "80% 미만, 70% 미만"입니다. 들어가면 안 되는 활동은?
실습 화면 미션 5에서 답을 고르고, 처방전을 쓰면 정답이 공개됩니다.
수사 결과
비율의 평균을 냈습니다
(80 + 75 + 90 + 80) ÷ 4 = 81.3%
바른 계산: 참여 81명 ÷ 예정 99명 = 81.8%. 활동마다 인원이 달라서 비율의 평균은 틀립니다.
80%를 "미만"에 넣었습니다
디지털 직업인 인터뷰: 참여율 80.0%, 회고율 80.0%
80%는 "80% 미만"이 아닙니다. 후보는 지역기관 탐방, 모의 면접 체험 두 개뿐입니다.
미션 6. 우리 학교 것으로 바꾸기
실습 화면 P7의 빈칸을 채우면 요청 문장이 완성됩니다. 숫자는 그대로, 이름만 우리 학교로.
활동 이름 네 개: [우리 학교 진로활동]
전체 색: [원하는 색] 계열
새 코드를 받으면 점검기에 붙여 넣고 다시 내려받습니다. 메모장을 쓴다면
미션 7. Netlify Drop으로 링크 만들기
- 올리기 전에 한 번 더. 학생 정보 없나요?
- 로그인한 뒤 app.netlify.com/drop
- 진로대시보드 폴더를 통째로 점선 상자에 끌어다 놓기
- 다 올라가면 공개(Public)로 바꾸기
- 짝꿍의 휴대폰으로 열어 보기
왜 공개로 바꾸나요?
2026년 7월 28일 이후 새로 만든 무료 Netlify 팀은 새 프로젝트가 처음에 비공개입니다. 비공개 사이트는 로그인한 팀원만 열 수 있어서, 공개로 바꿔야 학생 휴대폰에서 열립니다.
이런 화면이 나와도 실패가 아닙니다
비밀번호를 묻는 화면
로그인하지 않고 올린 경우입니다. 로그인해서 프로젝트를 가져오면 풀립니다.
"접근 권한 없음"이나 Netlify 로그인 화면
프로젝트가 비공개 상태입니다. 공개 설정을 Public으로 바꿉니다.
어느 경우든 사이트는 올라갔습니다. 내 컴퓨터에서 대시보드가 열렸다면 오늘의 목표는 이미 이룬 셈입니다.
링크 갤러리
- QR로 링크 게시판을 엽니다
- 내 Netlify 주소와 "무엇을 바꿔 달라고 했는지" 한 줄을 올립니다
- 동료의 링크 두 개를 휴대폰으로 열어 보고 댓글을 남깁니다
같은 방법으로 만든 진로진학 도구
세 줄 공식으로 요청하고, 숫자와 글자를 직접 확인해서 만들었습니다. 요청 문장은 실습 화면에 있습니다.
네 도구 모두 학생 정보를 받지 않고, 판단을 대신하지 않습니다. 오늘 지킨 세 가지가 그대로 들어 있습니다.
다음 주에 만들 내 도구 설계서
처음에 포스트잇에 적은 도구를 세 줄 공식으로 다듬어 가져갑니다.
- 실습 화면의 도구 설계서에서 업무 장면과 아이디어를 고릅니다
- 누가, 무엇을, 화면 세 칸을 우리 학교에 맞게 고칩니다
- 완성된 요청 문장을 복사하거나 설계서를 인쇄합니다
출구 카드, 세 줄
1. 다음 주에 만들 도구 1개
2. 오늘 찾은 함정이나 버그 1개
3. 개인정보 없이 우리 학교에 맞게 바꿀 내용 1개
연수가 끝나도 이어서 만드는 곳
위쪽의 플레이그라운드에서 요청하고, 눌러 보고, 고쳐 달라고 말하는 과정을 한 화면에서 반복합니다.
- 오픈라우터 API 키를 넣습니다
- 요청 문장이나 연수 미션으로 시작합니다
- 눌러 보고, 처방전으로 고칩니다
- 점검하고 내려받아 링크로 나눕니다
오늘 실습과 이렇게 이어집니다
노란 요청 상자마다 플레이그라운드에서 만들기가 있습니다. 미션 3의 한 줄 요청을 실제 AI로 보내 보고, 미션 4의 코드는 연수 점검기로 바로 보냅니다.
여기에도 실제 학생 정보는 넣지 않습니다. 입력한 문장은 AI 회사로 전송됩니다.
오늘 만든 도구는 모두
선생님의 말에서 나왔습니다
학생 정보는 넣지 않고
판단은 선생님이 하고
숫자와 출처는 직접 확인하기
이 세 가지만 지키면 내일부터 혼자서도 만들 수 있습니다.