📢 핵심 30초 요약
"20년 뒤 나의 꿈이 현실로!" 구글 제미나이(Gemini)에 프롬프트를 입력하면, 학생 얼굴 사진을 첨부하는 것만으로 [미래 직업 유니폼 가상 착용 + 활동 모습 3컷 스토리보드 포스터 자동 조판 + TTS 미래 인터뷰 음성 + 복도 전시용 디지털 갤러리 슬라이드쇼]가 지원되는 단일 HTML 진로 웹앱이 완성됩니다.
선생님, 그리고 아이들의 가슴 속에 빛나는 꿈과 미래를 구체적인 모습으로 피워내고 싶으신 교육자 여러분 안녕하세요! 프롬프트로 배우는 바이브 코딩 블로그 에디터입니다. 😊
진로 교육 주간마다 "20년 뒤 나의 모습을 상상해서 글을 쓰거나 그림을 그려보자"라고 하면, "선생님, 저는 그림을 못 그려요", "어떤 옷을 입고 일하는지 잘 모르겠어요"라며 망설이던 아이들 모습 많이 보셨을 텐데요.
구글 제미나이(Gemini)용 바이브 코딩 프롬프트 하나면, 학생들이 자신의 얼굴 사진으로 소방관, 로봇 공학자, 우주비행사, 수의사 등 미래 유니폼을 가상 착용하고, 3컷짜리 직업 활동 스토리 포스터를 완성하여 교실 TV나 복도에 슬라이드쇼로 전시하는 '미래 직업 가상 피팅 갤러리'를 단 1분 만에 구축할 수 있답니다!
📊 제미나이 미래 직업 유니폼 갤러리의 3가지 핵심 기능
상상 속의 미래를 시각적 포스터와 디지털 갤러리로 생생하게 구현한 진로 교육 기능입니다.
| 무엇이 바뀌었나요? (영역) | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 🧑🚀 미래 직업 유니폼 피팅 (Canvas Career Fitting) |
학생 사진을 넣고 소방관 방화복, 우주복, 수의사 가운, 로봇 고글을 선택하면 얼굴 크기와 각도를 맞춰 완벽한 피팅 샷을 만듭니다. | 크롬북으로 찍은 내 얼굴이 미래 전문 직업인으로 변신하는 순간 체험 |
| 🎬 3컷 직업 활동 스토리보드 (3-Cut Story Poster) |
[1컷: 열정적인 연구/출동 ➔ 2컷: 사람들을 돕는 보람 ➔ 3컷: 성취의 순간] 3개 컷으로 구성된 완성형 진로 포스터를 자동 디자인합니다. | 20년 뒤 나의 하루를 스토리텔링하며 구체적인 진로 목표 설계 |
| 🖼️ 복도 전시용 디지털 갤러리 (Classroom Slideshow UI) |
학생들이 만든 포스터들을 모아 교실 TV나 복도 모니터에 '전체화면 슬라이드쇼'로 자동 롤링 전시하며 음악을 재생합니다. | 학부모 공개수업이나 학예회 때 우리 반 미래 직업 박람회 운영 |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
초보자도 에러 없이 바로 실행할 수 있도록 '에러 방지 기본 안전장치(Canvas CORS 오류 방지, 터치 핀치 줌, 카메라 권한 예외 처리)'가 내장되고, 우리 반 진로 탐색 주제에 맞게 조율하는 '거꾸로 프롬프트(Reverse Prompting)'가 적용된 제미나이 전용 만능 프롬프트입니다.
🪄 제미나이 전용 '미래 직업 유니폼 & 3컷 진로 갤러리' 만능 프롬프트
"당신은 초등 창의적 체험활동(진로) 및 HTML5 Canvas/웹앱 인터랙티브 디자인 전문 개발자입니다.
학생 사진을 미래 직업 유니폼과 합성하여 3컷 활동 포스터를 만들고 슬라이드쇼로 전시하는 '미래 직업 가상 피팅 갤러리 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. Canvas CORS 에러 방지: 모든 직업 유니폼 프레임(얼굴 투명 컷아웃)은 인라인 SVG 벡터 일러스트로 내장하여 외부 이미지 깨짐 오류를 원천 차단해 주세요.
2. 모바일/태블릿 터치 호환성: 터치 드래그로 얼굴 위치 이동 및 슬라이더로 크기/각도 조절 기능 보장
3. Web Audio 카메라 셔터 & 축하 팡파르: 찰칵 셔터 효과음 및 포스터 완성 축하음 자체 합성 재생
4. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 얼굴 등록 & 피팅 툴바:
- 웹캠 촬영 또는 파일 업로드로 학생 사진 등록 후 얼굴 위치/크기/좌우반전 미세 조정
2. 미래 직업 유니폼 프리셋 6종:
- 🚒 소방관(방화복&헬멧), 🤖 AI 로봇공학자(연구복&스마트고글), 🚀 우주비행사(우주복), 🐾 동물수의사(가운&청진기), 🎨 메타버스 크리에이터, 🧬 친환경 과학자
3. 3컷 진로 활동 스토리보드 포스터 조판:
- 1컷(연구/출동), 2컷(도움/협동), 3컷(성취) 장면 프레임과 함께 학생이 작성한 '20년 뒤 나의 다짐' 텍스트 렌더링
- 📥 'A4 포스터 이미지(PNG) 다운로드' 및 🖨️ 인쇄 기능 지원
4. 교실 TV용 '디지털 진로 갤러리 슬라이드쇼 모드':
- 상단 '🎬 학급 갤러리 상영' 클릭 시 전체화면으로 학생들의 완성 포스터가 5초마다 부드럽게 전환되는 전시 모드 지원
5. 디자인: 미래지향적이고 따뜻한 네온블루/화이트 톤 UI (크롬북, 스마트패드, 전자칠판 완벽 호환)
코드를 작성하기 전, 추가하고 싶은 미래 직업군(예: 스마트팜 전문가, 도심항공 UAM 조종사 등)이나 기본 학급 인원수를 나에게 2가지 질문을 먼저 물어봐줘."
학생 사진을 미래 직업 유니폼과 합성하여 3컷 활동 포스터를 만들고 슬라이드쇼로 전시하는 '미래 직업 가상 피팅 갤러리 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. Canvas CORS 에러 방지: 모든 직업 유니폼 프레임(얼굴 투명 컷아웃)은 인라인 SVG 벡터 일러스트로 내장하여 외부 이미지 깨짐 오류를 원천 차단해 주세요.
2. 모바일/태블릿 터치 호환성: 터치 드래그로 얼굴 위치 이동 및 슬라이더로 크기/각도 조절 기능 보장
3. Web Audio 카메라 셔터 & 축하 팡파르: 찰칵 셔터 효과음 및 포스터 완성 축하음 자체 합성 재생
4. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 얼굴 등록 & 피팅 툴바:
- 웹캠 촬영 또는 파일 업로드로 학생 사진 등록 후 얼굴 위치/크기/좌우반전 미세 조정
2. 미래 직업 유니폼 프리셋 6종:
- 🚒 소방관(방화복&헬멧), 🤖 AI 로봇공학자(연구복&스마트고글), 🚀 우주비행사(우주복), 🐾 동물수의사(가운&청진기), 🎨 메타버스 크리에이터, 🧬 친환경 과학자
3. 3컷 진로 활동 스토리보드 포스터 조판:
- 1컷(연구/출동), 2컷(도움/협동), 3컷(성취) 장면 프레임과 함께 학생이 작성한 '20년 뒤 나의 다짐' 텍스트 렌더링
- 📥 'A4 포스터 이미지(PNG) 다운로드' 및 🖨️ 인쇄 기능 지원
4. 교실 TV용 '디지털 진로 갤러리 슬라이드쇼 모드':
- 상단 '🎬 학급 갤러리 상영' 클릭 시 전체화면으로 학생들의 완성 포스터가 5초마다 부드럽게 전환되는 전시 모드 지원
5. 디자인: 미래지향적이고 따뜻한 네온블루/화이트 톤 UI (크롬북, 스마트패드, 전자칠판 완벽 호환)
코드를 작성하기 전, 추가하고 싶은 미래 직업군(예: 스마트팜 전문가, 도심항공 UAM 조종사 등)이나 기본 학급 인원수를 나에게 2가지 질문을 먼저 물어봐줘."
🏃 실전 적용 3단계 순서
- 1단계 (제미나이에 프롬프트 입력): 위 프롬프트를 복사하여 구글 제미나이에 전달하고, 우리 반 아이들의 관심 직업에 맞춰 AI 질문에 답합니다.
- 2단계 (HTML 파일 저장): 제미나이가 완성해 준 단일 HTML 코드를 메모장에 붙여넣고
future_career_gallery.html로 저장합니다. - 3단계 (진로 주간 갤러리 전시): 학생들이 크롬북으로 미래 유니폼을 입어보고 3컷 포스터를 만든 뒤, 교실 TV나 복도 화면에 슬라이드쇼를 띄워 신나는 미래 진로 페어를 엽니다!
🎯 에디터 한줄평
"꿈을 눈으로 보고 귀로 들을 때, 아이들의 눈빛은 미래를 향해 반짝입니다. 제미나이 바이브 코딩으로 아이들에게 20년 뒤 멋지게 활약할 자신의 미래 모습을 선물해 보세요!"
📌 구글 제미나이 웹 및 개발자 리소스
Google Gemini 공식 포털 바로가기 🔗
