📢 핵심 30초 요약
복잡한 3D 코딩 툴이나 유료 클라우드 계정 없이도 나만의 가상 미술관을 열 수 있어요! 구글 제미나이(Gemini)에 프롬프트를 전달하면, [Three.js 기반 3D 가상 전시관 워크스루 + 사진·성취물 업로드 모달 + 액자 줌인 해설 + Web Audio 전시관 효과음]이 모두 내장된 단일 HTML 3D 진로 포트폴리오 웹앱이 단 1분 만에 완성됩니다.
선생님, 그리고 아이들의 꿈과 소중한 성장 기록을 특별하게 빛내주고 싶으신 교육자 여러분 안녕하세요! 프롬프트로 배우는 바이브 코딩 블로그 에디터입니다. 😊
초등 6학년 실과, 진로, 도덕 융합 단원에서 1년간의 학습 산출물과 꿈을 정리하는 포트폴리오를 만들 때, "종이 클리어파일에 인쇄물을 끼워 넣거나 평면적인 슬라이드 발표에 머물러 아쉬웠던 적" 많으셨죠?
해외 유료 코딩 플랫폼 없이 구글 제미나이(Gemini)용 바이브 코딩 프롬프트 하나면, 학생들이 자신의 장래희망, 강점 키워드, 대표 작품 사진을 직접 등록하고 키보드나 터치로 가상 갤러리를 걸어 다니며 관람하는 '메타버스형 3D 진로 갤러리 웹앱'을 손쉽게 구현할 수 있답니다!
📊 제미나이 3D 진로 포트폴리오의 3가지 핵심 차별화 요소
평면적인 문서나 슬라이드를 넘어선 몰입형 3D 인터랙티브 가상 갤러리 기능입니다.
| 무엇이 바뀌었나요? (영역) | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 🏛️ 3D 가상 전시관 이동 (First-Person Walkthrough) |
Three.js 기반의 세련된 3D 미술관 내부를 방향키(WASD)나 마우스 드래그로 자유롭게 걸어 다니며 관람할 수 있습니다. | 전자칠판이나 크롬북에서 메타버스 게임처럼 가상 갤러리 둘러보기 |
| 🖼️ 액자 클릭 줌인 & 음성 (Interactive Art Frame) |
벽면의 액자(나의 꿈, 나의 강점, 올해의 베스트 작품 등)를 클릭하면 카메라가 부드럽게 줌인되며 상세 설명과 음성 안내가 팝업됩니다. | 자신의 목소리나 TTS로 작품 설명 오디오 가이드 재생 |
| ✏️ 간편한 내 정보 편집 (Zero-Code Customizer) |
복잡한 코드 수정 없이, '내 전시관 꾸미기' 버튼을 눌러 사진 업로드와 텍스트 입력만으로 즉시 나만의 3D 갤러리가 완성됩니다. | 완성된 단일 HTML 파일을 학급 패들렛에 공유하고 상호 댓글 감상회 진행 |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
학생들의 자아존중감과 디지털 창작 효능감을 극대화하는 제미나이 전용 완성형 바이브 코딩 프롬프트입니다. AI가 전시관 테마(모던 화이트, 우주 테마, 자연 숲속 등)를 먼저 조율하도록 '거꾸로 프롬프트(Reverse Prompting)'가 내장되어 있습니다.
🪄 제미나이 전용 '나만의 3D 진로 포트폴리오 갤러리' 만능 프롬프트
"당신은 초등 실과·진로 융합 교육 및 3D WebGL(Three.js) 인터랙티브 웹앱 전문 개발자입니다.
초등학교 6학년 학생들이 자신의 꿈과 1년간의 성취 산출물을 가상 전시하는 '나만의 3D 진로 포트폴리오 갤러리 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장, Three.js CDN 포함)로 제작해 주세요.
[핵심 요구 기능 및 기술 사양]
1. Three.js 3D 가상 전시 공간 구축:
- 모던하고 밝은 미술관 갤러리 룸 (바닥 원목 텍스처, 은은한 스포트라이트 조명 렌더링)
- 키보드(W, A, S, D / 방향키) 및 마우스/터치 드래그로 1인칭 자유 이동(Walkthrough) 및 시점 회전 지원
2. 벽면 인터랙티브 4대 전시 액자:
- [1구역] 🌟 나의 꿈과 미래 목표 (장래희망 및 롤모델)
- [2구역] 💎 나의 핵심 강점 3가지 (자신감, 끈기, 창의성 등 키워드)
- [3구역] 🏆 1년간 가장 자랑스러운 학습 산출물 (그림, 글, 코딩 캡처 등)
- [4구역] 💌 나에게 보내는 응원 메시지 & 친구들의 칭찬 한마디
3. 액자 인터랙션 & 상세 모달 (Web Audio 효과음):
- 액자 가까이 다가가서 클릭 시 카메라가 액자 앞으로 부드럽게 줌인(Tween)되며 상세 팝업창 오픈 (클릭 시 맑은 핑- 사운드)
4. 실시간 '전시관 편집기(Modal Form)':
- 상단 '⚙️ 내 전시관 꾸미기' 버튼 클릭 시 학생 이름, 장래희망, 사진 파일 첨부(로컬 FileReader로 즉시 액자 텍스처 교체) 지원
5. 디자인: 누구나 렉 없이 부드럽게 실행되는 경량화된 3D 렌더링 (크롬북, 스마트패드, PC 완벽 호환)
코드를 작성하기 전, 전시관 벽면 액자 개수(예: 4개 vs 6개)나 전시관 분위기 테마(예: 화이트 모던 vs 우주 갤러리)를 조정할지 나에게 2가지 질문을 먼저 물어봐줘."
초등학교 6학년 학생들이 자신의 꿈과 1년간의 성취 산출물을 가상 전시하는 '나만의 3D 진로 포트폴리오 갤러리 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장, Three.js CDN 포함)로 제작해 주세요.
[핵심 요구 기능 및 기술 사양]
1. Three.js 3D 가상 전시 공간 구축:
- 모던하고 밝은 미술관 갤러리 룸 (바닥 원목 텍스처, 은은한 스포트라이트 조명 렌더링)
- 키보드(W, A, S, D / 방향키) 및 마우스/터치 드래그로 1인칭 자유 이동(Walkthrough) 및 시점 회전 지원
2. 벽면 인터랙티브 4대 전시 액자:
- [1구역] 🌟 나의 꿈과 미래 목표 (장래희망 및 롤모델)
- [2구역] 💎 나의 핵심 강점 3가지 (자신감, 끈기, 창의성 등 키워드)
- [3구역] 🏆 1년간 가장 자랑스러운 학습 산출물 (그림, 글, 코딩 캡처 등)
- [4구역] 💌 나에게 보내는 응원 메시지 & 친구들의 칭찬 한마디
3. 액자 인터랙션 & 상세 모달 (Web Audio 효과음):
- 액자 가까이 다가가서 클릭 시 카메라가 액자 앞으로 부드럽게 줌인(Tween)되며 상세 팝업창 오픈 (클릭 시 맑은 핑- 사운드)
4. 실시간 '전시관 편집기(Modal Form)':
- 상단 '⚙️ 내 전시관 꾸미기' 버튼 클릭 시 학생 이름, 장래희망, 사진 파일 첨부(로컬 FileReader로 즉시 액자 텍스처 교체) 지원
5. 디자인: 누구나 렉 없이 부드럽게 실행되는 경량화된 3D 렌더링 (크롬북, 스마트패드, PC 완벽 호환)
코드를 작성하기 전, 전시관 벽면 액자 개수(예: 4개 vs 6개)나 전시관 분위기 테마(예: 화이트 모던 vs 우주 갤러리)를 조정할지 나에게 2가지 질문을 먼저 물어봐줘."
🏃 실전 적용 3단계 순서
- 1단계 (제미나이에 프롬프트 입력): 위 프롬프트를 복사하여 구글 제미나이에 전달하고, 원하는 전시관 분위기나 액자 수에 맞춰 AI 질문에 답합니다.
- 2단계 (HTML 파일 저장): 제미나이가 완성해 준 단일 HTML 코드를 메모장에 붙여넣고
dream_gallery3d.html로 저장합니다. - 3단계 (나만의 전시회 발표): 브라우저에서 파일을 열고 '내 전시관 꾸미기'로 자신의 사진과 꿈을 채운 뒤, 전자칠판이나 모둠 발표에서 친구들을 나만의 3D 미술관으로 초대해 보세요!
🎯 에디터 한줄평
"아이들의 꿈은 평면적인 종이에 갇혀 있기엔 너무나 입체적이고 아름답습니다. 제미나이 바이브 코딩으로 아이들에게 세상에서 단 하나뿐인 자신만의 3D 가상 전시관을 선물해 보세요!"
📌 구글 제미나이 웹 및 개발자 리소스
Google Gemini 공식 포털 바로가기 🔗
