친구들의 숨은 매력을 찾아라! — 우리 반 얼굴 & 장점 매칭 롤링페이퍼 웹 게임
🫶 초등 3~6학년 도덕 '이웃과 더불어 사는 삶' 및 미술 '느낌을 표현하는 활동' 융합 — 우리 반 친구들의 얼굴 일러스트(캔바 아바타)를 클릭하면 해당 친구의 숨겨진 3가지 장점 키워드 카드가 나타나고, 맞추는 순간 롤링페이퍼에 그 친구를 위한 칭찬 문장이 서명되어 쌓이는 게이미피케이션 관계 존중 게임입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 아는 친구 ➔ 더 깊이 아는 친구 | 눈으로 보던 친구의 이름표 대신, 아바타 클릭으로 그 친구가 자랑하는 3가지 장점 키워드를 찾아내는 퀴즈 형식입니다. | 캔바에서 그린 친구별 얼굴 일러스트를 이모지나 Base64 이미지로 내장. |
| 막연한 칭찬 ➔ 키워드 기반 구체적 칭찬 | '성실해요', '배려해요'처럼 막연히 쓰던 칭찬을 특정 사건과 짝짓어 구체적인 문장으로 자동 조립합니다. | '마음', '성실', '밝음', '성실', '배려', '배려' 같은 9개 키워드 버튼 조합 지원. |
| 한 번 쓰고 끝나는 글 ➔ 계속 쌓이는 롤링페이퍼 | 종이 포스트잇 떨어져 걷기 전까지 파블로가 아니라, 계속 위로 새로 올라오는 무한 롤링 웹 게시판입니다. | 쌓인 롤링 데이터는 세션 내에서 유지되며 인쇄도 가능합니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
제미나이(Gemini)에 아래 프롬프트를 붙여넣으면 복잡한 웹 서버나 로그인 없이 완결됩니다.
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 반 인원과 롤링 애니메이션 속도에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
롤링페이퍼.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 소셜 로그인, DB 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 학생 데이터 심기 모드: const FRIENDS = [{ nick: "별이", emoji: "🌟", strengths: ["성실", "배려", "창의"] }, ...] 상수에 4~6명의 닉네임과 3가지 장점을 내장한다(실명 절대 금지).
3. 3D 플립 인터랙션: 아바타 카드 클릭 시 CSS 3D rotateY(180deg) 속성으로 뒷면 장점 키워드 카드가 뒤집혀 나타난다.
4. 롤링페이퍼 타임라인: 아래쪽 화면에 새로 쓴 칭찬 문장이 위로 부드럽게 떠오르며 무한 롤링되는 CSS 애니메이션 구현.
5. 개인정보 0: 학생 실명을 일절 입력받지 않으며, 캔바에서 만든 이모지 아바타만 사용한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 롤링페이퍼에 서명하는 친구 이름은 어떻게 처리할까요? (기본: 닉네임 입력)
2. 캔바(Canva)에서 만든 친구 얼굴 일러스트를 Base64 이미지로 파일 안에 심을까요? (기본: 이모지로 대체)
3. 칭찬 문장 조립 시 문장 톤을 '존댓말 고급형'과 '친구 말투 편안형' 중 무엇으로 할까요?🎯 에디터 한줄평
"아이들은 친구를 알아가는 일을 숙제가 아니라 퀴즈로 해내고, 칭찬받은 친구는 자신의 장점이 화면 위에 떠오르는 것을 보며 웃습니다. 이 웹 게임은 '우리 반은 서로를 알아가는 안전한 공간'이라는 정체성을 하루아침에 구축해 주는 가장 가벼운 가위, 바위, 보 형태의 도구입니다."
📚 기술·교육 참고 링크
- CSS 3D rotateY 플립 카드 및 무한 롤링 애니메이션 설계 가이드
- 교육과정 연계: 초등 3~6학년 도덕(이웃과 더불어 사는 삶), 미술(느낌을 표현하는 활동)
