초등학교 5학년 학생들이 사용할 수 있는 교육용 웹앱 「우리 반 칭찬 우체통」을 제작해 주세요.

목적

학생들이 친구의 좋은 점을 발견하고 칭찬하는 문화를 형성하여 긍정적인 학급 분위기와 인성 교육을 지원한다.

대상

• 초등학교 5학년

• 태블릿 및 PC 사용

• 로그인 없이 간단하게 사용 가능

주요 기능

1. 칭찬 작성하기

• 칭찬받을 친구 이름 입력

• 칭찬 내용 작성 (최대 200자)

• 칭찬 유형 선택

  • 친절해요

  • 배려심이 있어요

  • 책임감이 있어요

  • 협동을 잘해요

  • 노력해요

  • 창의적이에요

  • 기타

2. 익명/실명 선택

• 익명으로 보내기

• 실명으로 보내기

• 실명 선택 시 작성자 이름 입력

3. 칭찬 카드 자동 생성

• 제출 버튼 클릭 시 예쁜 칭찬 카드 생성

• 카드에 포함할 요소

  • 칭찬받는 학생 이름

  • 칭찬 내용

  • 칭찬 유형 아이콘

  • 작성자 정보(익명 또는 이름)

  • 생성 날짜

• 카드 색상은 랜덤으로 생성

• 다운로드(PNG) 기능 제공

4. 칭찬 게시판

• 작성된 칭찬 카드 모아보기

• 최신순 정렬

• 친구 이름 검색 가능

• 칭찬 유형별 필터 기능 제공

5. 학급 칭찬 랭킹

• 가장 많은 칭찬을 받은 학생 TOP 10

• 칭찬 유형별 통계 제공

• 막대그래프 및 원형그래프로 시각화

• 긍정적인 분위기를 위해 순위보다 칭찬 횟수 중심으로 표현

6. 오늘의 칭찬왕

• 매일 랜덤으로 1명 선정

• 해당 학생의 칭찬 카드 강조 표시

7. 교사용 대시보드

• 전체 칭찬 개수 확인

• 학생별 칭찬 통계

• 칭찬 유형 통계

• CSV 다운로드 기능

• 부적절한 게시물 삭제 기능

디자인 요구사항

• 밝고 따뜻한 초등학생 친화적 디자인

• 파스텔톤 색상 사용

• 반응형 웹 디자인 적용

• 큰 버튼과 쉬운 인터페이스

• 귀여운 우체통 및 편지 아이콘 활용

기술 요구사항

• HTML, CSS, JavaScript 기반

• LocalStorage를 활용한 데이터 저장

• 외부 데이터베이스 없이 동작 가능

• Chart.js를 활용한 통계 시각화

• html2canvas를 활용한 칭찬 카드 이미지 저장 기능

추가 기능

• 칭찬 작성 시 응원 애니메이션 표시

• "오늘 친구를 칭찬해 볼까요?" 랜덤 문구 제공

• 학생들이 사용하기 쉽도록 모든 버튼에 아이콘 추가

첫 화면 문구

"우리 반의 따뜻한 마음을 전해보세요! 💌"
"친구의 좋은 점을 발견하면 칭찬 편지를 보내주세요."

완성된 웹앱은 하나의 HTML 파일로 실행 가능하도록 제작해 주세요.

[ 핵심 AI 프롬프트 정리 (Core Prompts) ]

이 프로그램의 '마법' 같은 순간들을 만들어내는 Gemini API 시스템 프롬프트(System Instruction)입니다. 다른 생성형 AI(ChatGPT, Claude 등)에 이 프롬프트를 입력하여도 동일하게 훌륭한 교실 도구로 활용할 수 있습니다.

[프롬프트 ①] 타고난 기질(사주+MBTI) 및 친해지는 비법 분석

이 프롬프트는 전통 철학과 현대 심리학을 재치 있게 융합하여, 학생들에게 다정한 격려와 맞춤형 관계 가이드를 전달하도록 설계되었습니다.

[역할 정의]
당신은 유머러스하고 다정한 동양 철학 카운셀러 및 청소년 심리상담가입니다. 

[입력 변수]
- 학생 이름
- 생년월일 및 태어난 시간
- MBTI 성향 (선택 입력)

[임무 지침]
1. 입력된 정보들을 종합적으로 활용해 아주 따뜻하고 희망적이며 재미있게 분석해 주세요.
2. 반드시 동양 철학적 표현(오행인 목, 화, 토, 금, 수의 기운 중 하나를 짚어서)과 MBTI적 성향을 재미있게 매칭하여 설명해 주어야 합니다.
3. 성향 분석 도중 단점이 언급될 수 있으나, 그것마저도 엄청난 매력적 강점으로 재치 있게 포장해 주세요.
4. 이 친구와 다른 친구들이 급속도로 친해질 수 있는 구체적이고 귀여운 맞춤 행동 가이드 또는 팁 2~3가지를 친절하고 따스한 존댓말로 제안해 주세요.

[출력 형식]
반드시 아래의 JSON 포맷으로만 답변을 작성하세요 (백틱 ``` 기호 없이 순수 JSON만 반환).
{
  "analysis": "해당 학생의 타고난 성격을 사주와 MBTI에 근거하여 분석한 3~4문장의 다정하고 긍정적인 단락.",
  "tips": "친해질 수 있는 구체적인 팁 2~3가지 (줄바꿈 \n 사용, 마크다운 기호 자제)"
}

[프롬프트 ②] 인지적 재구성(Cognitive Reframing) 피드백 변환

학생들이 쓴 날 것 그대로의 평가나 불평을 가치 있는 칭찬으로 변환하는 이 프로그램의 핵심 알고리즘입니다.

[역할 정의]
당신은 친구의 모든 부정적인 언어, 단점, 불평을 듣고, 그것이 가진 무한한 긍정적 강점과 이면을 아름답게 찾아내어 재해석(Reframing)해 주는 '긍정 마법 치료사'입니다.

[인지적 재구성 가이드라인]
- "너무 늦고 게으르다" -> "시간에 쫓기기보다 신중하고 확실하게 일을 매듭짓는 완벽주의자 성향"
- "너무 시끄럽고 말이 많다" -> "주변에 에너지를 불어넣고 사람들을 행복하게 만드는 유쾌한 활력소이자 인사이더"
- "사사건건 참견이 심하다" -> "주변 사람들에 대한 따뜻한 관심과 뛰어난 공감 능력이 있어 늘 도움을 베풀고자 하는 수호천사 기질"

[임무 지침]
1. 작성자가 보낸 날 것의 관찰 내용을 분석하여, 불평이나 부정적인 뉘앙스가 있다면 이를 찬란한 칭찬과 멋진 가능성의 문장으로 재해석(Reframing)하세요.
2. 만약 입력 내용이 이미 칭찬이나 긍정적인 글이라면, 그 장점을 더욱 크게 공감하고 화려하게 격려하며 힘을 북돋아 주는 아름다운 문장으로 확장하세요.
3. 작성자의 원본 불평 투덜거림은 최종 출력에서 완전히 세탁되어 보이지 않아야 합니다.
4. 아주 친근하고 따스한 존댓말(~해요, ~랍니다, ~입니다)을 사용하여 '한 문장 또는 짧은 두 문장'으로 응답하십시오.

[출력 언어] 한국어 (친근하고 행복한 에너지 충만)

3. 학급 내 사회정서적 기대효과 (Educational Value)

1. 학급 내 언어 순화 및 긍정적 시선 훈련:

   • "쟤는 저래서 싫어"가 아니라 "저 행동 뒤에는 저런 강점이 숨어있구나"를 시각적으로 경험하며 인지 왜곡을 교정합니다.

2. 안전한 피드백 공간:

   • 원본 불평이 노출되지 않아 학급 폭력이나 갈등 유발 없이 평소 서운했던 감정을 건설적인 에너지로 정화시킵니다.

3. 학급 공동체 연대감 강화:

   • 서로의 기질(사주/MBTI) 카드를 보며 친해지는 팁을 실천하는 과정을 통해 자연스럽게 학기 초/말 상호 존중 분위기가 형성됩니다.

## 학교급식api를 이용

### 학교검색창 추가

## 학생 정보입력창

### 알러지, 싫어하는 음식, 좋아하는 음식 정보 저장 후 표기

## 하루 메뉴 안내, 일주일 메뉴 안내 탭

### 초등학생에 맞게 메뉴에 적당한 일러스트 추가

### 교사용 앱으로 한 반의 모든 학생들의 정보를 입력할 수 있어야 합니다.

### 알러지가 없거나 좋아하는/싫어하는 음식이 없다면 입력하지 않고 넘어가도록 합니다.

### 화면 상단에 학교 검색창이 학생정보입력은 따로 메뉴를 만들어 입력할 수 있도록 해주세요.

학생들이 자기가 쓴 독서감상문을 아카이빙 할 수 있는 웹앱을 만들고싶어. +버튼을 누르면 그 책의 제목, 지은이, 감상문내용을 작성할 수 있었으면 해. 디자인은 책장에 빈 책 모양이 다다다다다 있었음 좋겠어. 거기에 +버튼이 있고. 그리고 책 이미지도 복사붙여넣기 해서 아이들이 표지 이미지도 첨부할 수 있었으면 좋겠어 html로 공유할 수 있게 해줘

✨ 핵심 기능

• 스마트 밸런스 모둠 편성: 누적된 승률 데이터와 남녀 성비를 바탕으로 스네이크 드래프트 알고리즘이 팀 전력을 자동으로 균등하게 분배합니다.

• 초간편 명단 등록: 나이스(NEIS)나 엑셀의 학생 명단을 그대로 복사해 붙여넣기만 하면 즉시 데이터베이스가 구축됩니다.

• 원클릭 참관자 제외: 당일 결석하거나 다친 학생을 터치 한 번으로 모둠 편성에서 즉시 제외할 수 있습니다.

• 레트로 전광판 UI: 체육관이나 운동장에서 학생들이 멀리서도 점수를 명확히 볼 수 있도록, 군더더기를 없앤 다크 모드 기반의 전체화면 전광판을 제공합니다.

• 자동 결과 누적: 경기가 끝나면 승패 결과가 학생 개인 데이터에 자동으로 누적되어, 다음 체육 시간의 모둠 편성을 더욱 정교하게 만듭니다.

📖 사용 방법 안내

처음 세팅부터 경기 종료까지 흐름에 따라 그대로 따라 하시면 됩니다.

1.학생 명단 일괄 등록 (최초 1회):

[명렬표 관리] 탭의 '일괄 등록' 입력창에 학생 이름과 성별을 입력합니다. 나이스(NEIS) 화면이나 엑셀에서 명단을 드래그하여 복사한 뒤 그대로 붙여넣고 명단 일괄 추가 버튼을 누르세요. (예: 홍길동 남)

2.결석 및 참관 학생 제외:수업 당일 확인.

등록된 명단 리스트에서 오늘 체육 활동에 참여하지 못하는 학생을 확인합니다. 이름 옆의 녹색 참여중 버튼을 터치하여 붉은색 제외됨 상태로 변경하면 이번 모둠 편성에서 빠지게 됩니다.

3.경기 정보 설정:

상단의 [경기 설정] 탭으로 이동합니다. 오늘 진행할 체육 활동 내용(예: 3학년 팝스 측정, 피구 결승전 등)을 입력하고, 몇 개의 모둠(팀)으로 나눌지 숫자를 지정합니다.

4.모둠 편성 및 전광판 실행:

스마트 밸런스 모둠 편성 & 경기 시작 버튼을 누릅니다. 시스템이 자동으로 성비와 실력을 고려해 팀을 나누고, 화면이 어두운 전광판 모드로 즉시 전환됩니다. 화면 상단의 전체화면 ⛶ 버튼을 눌러 화면을 꽉 채워주세요.

5.경기 진행 및 점수 기록:

경기가 진행되는 동안 각 팀의 [+] 또는 [-] 버튼을 터치하여 실시간으로 점수를 기록합니다. 큼직한 버튼으로 설계되어 태블릿을 든 상태에서도 조작이 쉽습니다.

6.경기 종료 및 데이터 누적:종료 후 필수 작업.

수업이 끝나면 화면 하단의 붉은색 경기 종료 및 결과 저장 버튼을 누릅니다. 가장 점수가 높은 팀의 학생들에게 1승이, 나머지 학생들에게 1패가 자동으로 기록되며 다음 체육 시간에 반영됩니다.

# 코드를 좀 더 세련되게 수정할거야.

- 퀴즈를 다 풀면, 본인의 이름(닉네임)을 적을 수 있게 해줘.

- 몇개 맞았는지 알려주고, 랭킹 순위도 나오게 해줘.

- 다 맞으면 전문가

- 1개 틀리면, 달인, 2개 틀리면 보통 이라고 알려줘.

첫 페이지에, 모두 맞히면, 맞힌개수 페이지 캡쳐해서 이미지를 전송하면 추첨을 해서 상품을 준다는 문구를 적어줘.

그리고, 맨 마지막 페이지에 이미지를 전송할 수 있는 링크를 하나 만들어줘

활용

학생들이 우리 동네의 명소를 직접 등록

사진, 설명, 음성 첨부

QR코드 생성

기능

위치 클릭

사진 업로드

별점

추천 장소

AI 활용

AI가 소개글 작성

AI가 역사 이야기 생성

## 1. 프로젝트 개요

초등학교 교실(9명)에서 운영되는 학급 화폐 경제 금융 교육용 웹 앱입니다. 학생들이 직접 설립한 기업의 IR(기업 설명회)과 IPO(상장)를 진행하고, 이후 가상 시드머니를 통해 해당 주식과 기존 상장 주식을 거래할 수 있는 플랫폼을 구축합니다.

## 2. 데이터베이스 및 시스템 제약 사항

- 격리된 환경: 기존 '마전 월스트리트' 및 '동심 팩토리' 등 다른 앱의 실제 데이터, API, Firebase/Supabase 환경에 절대 영향을 주지 않도록 완전히 독립된 Isolated DB(LocalLedger_now)로 구축합니다.

- 확장성: 향후 기존 마전 월스트리트 API 및 잔액(Majeon Bridge)과 연동할 수 있도록 데이터 구조를 설계하되, 현재는 격리된 로컬 지갑(WalletService) 모드로 작동합니다.

## 3. 사용자 및 인증 체계 (Auth)

- 대상: 학생 9명 + 게스트 1명 (총 10개 계정)

- 로그인 방식: 직접 타이핑하지 않고, 화면에서 스크롤하여 자신의 '번호+이름'을 선택(Login UI)하는 방식.

- 비밀번호: 초기 비밀번호는 모두 `1234`로 설정. 학생 로그인 후 본인이 직접 수정 가능.

- 교사(관리자) 권한: 학생들의 비밀번호 조회 및 초기화 기능 포함.

## 4. 재화 및 지갑 시스템 (WalletService)

- 가상 시드머니: 최초 계정 생성 시 학생마다 1,000,000원의 가상 화폐(로컬 잔액)가 지급됩니다.

- 교사 권한: 교사 계정에서만 학생의 잔액을 임의로 충전하거나 회수할 수 있습니다.

## 5. 핵심 기능 및 화면 플로우 (App_UI)

최초 접속 시 [IR], [IPO], [주식 거래] 3가지 모드 중 하나를 선택하여 진입합니다 (Home_mode_select).

### A. IR 모드 (기업 설명회)

- 사업자(학생): 자신의 기업에 대한 '기업 소개 및 투자 설명서' 작성 후 제출 (Write_prospectus).

- 교사(관리자): 학생들이 제출한 IR 내역 검토 (Teacher_review). 승인(Approve) 또는 반려(Reject) 처리. 필요 시 교사가 직접 내용 수정 및 삭제 가능.

- 학생 수정: 반려된 경우 학생이 내용을 수정하여 재제출 (Student_revise).

### B. IPO 모드 (공모주 청약)

- 진행: 교사의 승인이 완료된 기업은 IPO 준비 상태(IPO_ready)가 되며 공모를 시작.

- 투자자(학생): 공모 기간 중 해당 기업의 설명서를 읽고 가상 시드머니로 투자금 지급 및 공모주 매수 신청.

- 배정: IPO 기간이 끝나면 청약된 기준에 따라 주식 배정 (Allotment) 및 학급 상장 완료 (Classroom_listed).

### C. 주식 거래 모드 (Stock_trading)

- 거래 대상:

1. IPO를 거쳐 상장된 '교실 주식 (Classroom_stocks)'

2. 시스템에 기본으로 등록된 '기존 마전 상장 주식 (Mirrored_majeon_stocks)'

- 거래 로직: 주식을 매수/매도할 수 있는 호가 창 및 차트 기능(간이 형태). 기존 마전 상장주는 읽기 전용(Read-only) 데이터로 가져와 이 앱 내에서만 독립적으로 거래됩니다.

## 6. 초기 등록 데이터 (기존 마전 상장 주식 리스트)

앱 배포 시 초기 Seed 데이터로 다음 8개의 종목을 DB에 등록해 주세요.

1. DB제약 (심볼: DBPH)

- 최초가: 24,000원

- 기업 소개: 우리 반의 위생과 보건을 책임지는 바이오 제약사입니다. 학생들의 면역력이 곧 기업의 기술력입니다.

- 주가 상승 조건: 1) 급식실 가기 전 모든 학생 손 씻기 2) 급식 잔반 제로 3) 교실 내 감기 환자 감소

- 투자 팁: 환절기에는 손 씻기가 중요! 반이 건강할수록 경쟁력이 높아집니다.

2. 마전력솔루션 (심볼: MPWR)

- 최초가: 36,200원

- 기업 소개: 교실 내 전력을 효율적으로 관리하는 에너지 기업. 낭비되는 전기를 줄여 지구와 반을 살립니다.

- 주가 상승 조건: 1) 1등 등교생 교실 불 켜기 2) 교실 이동 시 문 단속 3) 하교 시 소등 완벽

- 투자 팁: 전기 절약이 곧 영업이익! 문 단속과 소등을 잘할수록 주가에 긍정적입니다.

3. MJ생활건강 (심볼: MJLH)

- 최초가: 11,200원

- 기업 소개: 우리 반 환경을 쾌적하게 개선하는 홈케어 기업. 교실의 청결도가 브랜드 가치입니다.

- 주가 상승 조건: 1) 방과 후 바닥 쓰레기 제로 2) 완벽한 분리수거 3) 사물함 주변 먼지 제거 및 정리

- 투자 팁: 깨끗한 환경에서 공부가 잘되는 법! 쾌적할수록 업계 1위로 올라섭니다.

4. 마전자 (심볼: MJE)

- 최초가: 42,950원

- 기업 소개: 교실 내 IT 기기 솔루션을 제공하는 기술 기업. 태블릿이 안전하고 깨끗할수록 가치가 상승합니다.

- 주가 상승 조건: 1) 태블릿 충전함 완벽 정리 2) 9명 모두 전원 종료 후 정리 3) 주간 기기 분실 및 파손 제로

- 투자 팁: 디지털 수업이 많아질수록 마전자의 책임이 커집니다.

5. 동반 자동차 (심볼: DBC)

- 최초가: 32,150원

- 기업 소개: 복도와 교실 내 안전한 이동을 책임지는 모빌리티 기업. '무사고 교실'이 최대 실적입니다.

- 주가 상승 조건: 1) 우측통행 준수 및 뛰지 않기 2) 교실 내 충돌 주의 3) 이동 수업 시 질서유지

- 투자 팁: 안전사고는 기업에 큰 손해! 천천히 걸으면 주가는 고속도로처럼 오릅니다.

6. MAGLE (심볼: MAGLE)

- 최초가: 63,900원

- 기업 소개: 인공지능 시대의 올바른 활용법과 정보 윤리를 선도하는 플랫폼. AI를 현명하게 쓸 때 가치가 증명됩니다.

- 주가 상승 조건: 1) AI 답변과 자신의 생각 융합 2) 저작권/정보 윤리 준수 3) 프롬프트 능력 향상으로 우수 결과물 도출

- 투자 팁: AI 리터러시를 갖춘 학생이 많아질수록 상한가를 기록합니다.

7. DONGBAN 200 (심볼: DB200)

- 최초가: 43,000원

- 기업 소개: 교실 내 주요 기업 성과를 종합하여 투자하는 ETF. 반의 전체적인 협동심과 점수가 높을 때 수익을 줍니다.

- 주가 상승 조건: 1) 학급 자치 회의 결정 준수 2) 마전 상장주 전반적 우상향 3) 학급 공동 목표 달성

- 투자 팁: 개별 주식이 어렵다면 학급 잠재력에 투자하세요. 협동 주간에 안정적 수익 보장.

8. 마팡 (심볼: MAPANG)

- 최초가: 38,700원

- 기업 소개: 마전 월스트리트 최대 물류 기업. 과제와 가정통신문을 수거해 선생님(중앙정부)께 전달하는 '로켓 수거' 운영.

- 주가 상승 조건: 1) 1교시 전 지연 없는 제출 2) 부모님 서명 및 구겨짐 없는 S급 상태 3) 배송 누락(분실/두고 옴) 인원 제로

- 투자 팁: 수행평가 주간에 변동성이 큽니다. 서로 챙겨주는 '협력 물류' 시 주가가 폭등합니다.

위 명세서를 바탕으로 React(또는 선호하는 프레임워크) 및 Firebase/Supabase 환경을 가정하여, 프로젝트의 전체 디렉토리 구조와 주요 데이터베이스 스키마(사용자, 기업 정보, 주식 거래 내역)를 먼저 제안해 주세요.

각자 스마트폰 화면에 카드 뒷장 모습이 있고, 터치하면 랜덤으로 할리갈리 과일이 나와

5명이서 모여서 한다고 했을 때, 같은 과일이 3개 모이면 가운데 물리적인 종을 칠 수 있도록 하고 싶어

할리갈리 종이가 없더라도 휴대폰만 있으면 아이들이 할리갈리 게임을 할 수 있는 게임을 만들어줘

html로 공유할 수 있도록 

# 초등학생들은 mbti 가 무엇인지 알아야 해서 설명해 주는 인트로를 만들어줘.

챗봇 형식이야.

학생이 자신의 학년을 선택하고 책 제목을 넣으면 채팅이 시작돼

챗봇이 질문하고 학생이 답을 한다.

질문의 의도는 크게 두가지다.

학생이 책의 내용이나 자신의 감상을 설명하도록 하기

챗봇이 책의 내용을 파악하기

몇 가지의 질문을 단계적으로 한다.

예시

주인공의 친구나 가족에 대해 알려줄래?

숨겨진 반전이 있었어?

책 표지의 내용을 설명해줘. 어떤 사건이 있었던거야?

책 제목이 내용과 어떤 관련이 있어?

가장 기뻤거나 웃겼던 내용이 뭐야?

등

질문을 최대한 많이 만들어놔야겠지.

챗봇은 미리 정해놓은 질문 다섯개를 할 수도 있고

학생의 대답에 따라 연계된 질문을 던질 수도 있어.

둘다 가능해?

이렇게 다 만든 다음에는 독서기록장 예시문을 작성해서 보여주도록 해.

학생의 학년을 고려해 작성해

그런데 전부 보여주지는 마. 일부는 가려줘

학생들이 참고해서 작성할 수 있도록

포인트를 지불하면 가려진 것을 보여주는 기능도 추후 넣을거야.

이 프롬프트는 초등학교 저학년(1~2학년)이 1교시 시작 전 대형 스마트보드나 태블릿을 보며 화면 터치 없이(Hands-free) 눈과 몸으로 따라 할 수 있는 5분 자동 명상 웹앱을 생성하기 위한 지침서입니다.

[1] 서비스 개요 (Service Overview)

• 어플리케이션 명: 하루 시작, 마음 반짝! 아기 공룡 포포몽과 함께하는 아침 명상

• 대상 연령: 초등학교 1~2학년 (만 6~8세)

• 핵심 콘셉트:

  • 선생님이 시작 버튼을 한 번 누르면 모든 과정이 터치 없이 자동으로 흘러가는 완전 자동 진행형(Auto-play) 시스템.

  • 귀여운 아기 공룡 캐릭터 '포포몽'의 동작을 직관적으로 따라 하는 신체 활동 및 호흡 유도.

  • 지루함을 느끼지 않도록 10~15초 단위의 아주 짧고 명확한 미션 단위로 구성.

[2] 화면 및 레이아웃 제약 (UI/UX Constraints)

• 완벽한 화면 맞춤 (Fit-to-Screen): 교실 스마트보드, 모바일, 태블릿 등 어떠한 기기 비율에서도 세로 스크롤이 생기지 않도록 100vh/100dvh 높이를 기준으로 레이아웃을 고정하고 넘치는 콘텐츠를 숨김(overflow-hidden).

• 반응형 컴팩트 디자인: 브라우저 창 높이가 낮아지면 내부의 캐릭터 일러스트(SVG) 크기와 상하단 마진이 동적으로 축소되도록 Flexbox(min-h-0, flex-grow)와 비율 단위(vw, vh)를 활용해 컴팩트하게 구성.

• 따뜻한 비주얼 톤: 파스텔톤의 분홍, 초록, 푸른빛 그라데이션 배경을 적용해 교실 분위기를 평온하고 아늑하게 연출.

[3] 마스코트 캐릭터 설계: 아기 공룡 '포포몽' (Mascot Character)

• 비주얼 레퍼런스 (image_d42585.png 스타일):

  • 머리 위의 어색한 뿔이나 분리된 관절을 모두 없애고, 단 하나의 외곽선(Continuous Outline Path)으로 부드럽고 유기적으로 연결된 일체형 초록색 아기 공룡으로 디자인.

  • 동글동글한 민머리 두상, 뚜렷하고 동그란 검은 눈동자, 맑은 분홍빛 볼터치, 수줍은 미소를 가진 사랑스러운 얼굴 표현.

  • 아이들이 동작을 모방하기 쉽도록 기존보다 다소 길쭉하고 직관적인 팔과 다리, 그리고 몸체 뒤쪽에 자연스럽게 이어져 있는 귀여운 공룡 꼬리 장착.

• 애니메이션 원칙 (Soft-body Animation):

  • 팔다리 파츠가 뼈 부위별로 뚝뚝 끊어져 기괴해 보이는 물리 리깅을 지양하고, 몸체 전체가 젤리처럼 늘어나고(Stretch) 찌그러지며(Squash) 유연하게 기우뚱거리는 유기적 움직임 구현.

  • 캐릭터가 직접 기지개, 좌우 옆구리 기울이기, 어깨 으쓱하기 동작을 부드럽게 시연하여 거울(Mirroring) 효과 유도.

[4] 3단계 자동 명상 시퀀스 구성 (5분 코스)

■ 1단계: 포포몽 기지개 체조 (신체 이완 - 1분 30초)

• 목적: 밤새 굳어있던 몸을 가볍게 스트레칭하고 잠을 깨움.

• 구성: 10초 단위의 매우 짧은 5가지 세부 미션이 가속도 애니메이션과 함께 교체됨.

  1. 하늘 높이 기지개 쭉!: 캐릭터가 양손을 하늘로 뻗고 몸을 세로로 길게 늘림.

  2. 왼쪽으로 기우뚱~: 캐릭터가 부드럽게 왼쪽으로 기울어지며 옆구리를 늘림.

  3. 오른쪽으로 기우뚱~: 캐릭터가 부드럽게 오른쪽으로 기울어지며 밸런스를 맞춤.

  4. 날개 어깨 으쓱 으쓱: 캐릭터가 어깨를 으쓱으쓱 위아래로 털어내는 바운스 모션 시연.

  5. 목을 둥글게 천천히: 캐릭터가 목을 왼쪽, 오른쪽으로 둥글게 굴림.

■ 2단계: 요술 구름 호흡 (호흡 조절 - 1분 30초)

• 목적: 뇌에 산소를 공급하고 흥분된 마음을 차분하게 가라앉힘.

• 어린이 맞춤형 안전 호흡 주기 (3-1-3초 법):

  • 저학년 아이들의 작은 폐활량을 고려하여 숨이 가쁘거나 가슴이 답답하지 않도록 주기를 대폭 단축.

  • 마시기 (3초): 코로 깊게 숨을 들이마심. 화면의 구름 구체가 크게 팽창하며 포포몽이 부풀어 오름.

  • 참기 (1초): 가볍게 1초간 멈춤. 구름 구체의 크기가 유지되며 노란 빛을 띰.

  • 내쉬기 (3초): 입으로 바람 소리를 내며 후~ 내쉼. 구름 구체가 작아지며 포포몽도 원래 크기로 이완되고 주변에 이쁜 꽃가루 파티클 효과 방출.

• 진행: 총 8회 반복 진행.

■ 3단계: 마법 마음 나무 (긍정 심상화 - 1분 30초)

• 목적: 긍정적인 가치(사랑, 행복, 용기 등)를 마음에 새기며 행복감 증진.

• 구성: 10초 단위로 6가지 고운 생각들이 캐릭터의 TTS 음성 가이드와 함께 제공됨.

  • 사랑 / 행복 / 용기 / 지혜 / 우정 / 감사

• 비주얼 연출:

  • 화면 하단에서 각 생각의 키워드에 맞는 다채로운 색감의 과일(딸기, 오렌지, 매실, 별, 포도, 하트) 에너지가 비눗방울처럼 둥실 떠올라 중앙의 '마법 나무' 안으로 '퐁당' 날아감.

  • 과일이 도달할 때마다 나무에 실물 과일 아이콘이 대롱대롱 매달리고, 나무의 크기가 눈으로 보이게 조금씩 더 풍성하게 자라나는 직관적인 성장 피드백 연출.

[5] 집중도 유지를 위한 실시간 시각적 장치 (Progress Indicators)

• 실시간 에너지 충전 바 (Subtask Gauge):

  • 각 10~15초 단위의 세부 미션이 진행될 때마다, 하단에서 우측으로 부드럽고 실시간으로 차오르는 게이지 바를 배치하여 아이들이 "이 동작을 몇 초나 더 유지해야 하는지" 직관적으로 인지할 수 있게 유도.

• 진도표 스탬프 도크 (Progress Stamps):

  • 각 단계 상단에 미션을 완수할 때마다 회색 씨앗/구름 아이콘이 컬러풀한 별이나 완성된 이모티콘으로 채워지도록 설계하여 성취감 부여.

[6] 사용자 제어 및 조작 도구 (Navigation & Sound Controls)

• 올인원 퀵 제어판 (상단 바 고정):

  • 처음으로 (⏪): 모든 상태값, 생성된 나무 열매, 타이머를 완벽히 초기화하고 대기 첫 화면으로 즉시 귀환.

  • 다음 단계로 (⏩): 현재 단계가 길거나 특정 단계만 집중 훈련하고 싶을 때, 진행 중인 타이머를 즉시 이월시키고 다음 단계로 부드럽게 도약.

• 사운드 및 음성 시스템 (Audio Control):

  • 배경 음악 토글: Tone.js 라이브러리를 활용해 맑은 오르골/실로폰 톤의 편안한 배경 코드가 5.5초 간격으로 실시간 생성되게 제어 (오프라인 사용성 고려).

  • 소리안내 토글 (TTS): Web Speech API를 연동하여 어린아이들의 눈높이에 맞춘 쾌활하고 다정한 1.3배 고음역대 하이톤 목소리로 친근한 구어체 가이드 출력 ("첫 번째 기지개 체조! 포포몽과 함께~").

[7] 기술적 구현 규칙 (Technical Implementation Rules)

1. 단일 HTML 파일 구성: CSS(Tailwind CSS 가급적 활용) 및 JavaScript 비즈니스 로직 전체가 하나의 .html 파일 안에 완벽히 내장될 것. 외부 자산 연결 없이 100% 자립 구동되어야 함.

2. 라이브러리 외부 CDN 의존성 제한:

   • CSS: <script src="https://cdn.tailwindcss.com"></script>

   • 오디오: Tone.js (https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js)

   • 아이콘: Lucide Icons (https://unpkg.com/lucide@latest)

3. No Native Popups: alert() 이나 confirm() 등의 화면을 끊는 고유 브라우저 창은 일절 배제하고, 모든 안내는 전용 오버레이나 말풍선 등을 통해 시각화할 것.

1. 사칙연산 문제를 제시하면 먼저 학생이 수모형(천, 백, 십 일)로 숫자에 따라 수모형을 만들고, 수모형을 직접 합치기도 분리도 하면서 문제를 해결할 수 있음 좋겠어.

2. 수모형을 사용해서 충분히 문제를 해결할 있으면 사칙연산을 숫자를 입력하면서 문제 풀수 있도록 넘어가게 하면 좋겠어.

3. 코너에는 1) 예제를 함께 먼저 튜토리얼형태로 해보기 2) 문제를 제시하면 학생이 수모형으로 문제 풀기 3) 문제를 직접 사칙연산으로 풀어보기 로 제시되면 좋겠어

4. 수준은 덧셈, 뺼셈, 곱셈, 나눗셈 나눠서 초1부터 초6까지 모두 커버될 수 있으면 좋겠어 연산별로 단계를 세부적으로 나눠서 제시되면 좋겠네. 교육과정 내용은 2022 개정 교육과정 수학과 내용의 체계를 참고하면 좋겠어.

5. 사칙연산이 익숙해지면 게임으로 문제 해결해보는 코너도 따로 있음 좋겠어. 문제가 내려오는데 맞추면 대포쏴서 없애는 게임도 좋고, 혹은 낚시 게임도 좋고, 게임 종류는 4가지 정도 제시해주고 해볼 수 있음 좋겠어.

6. 튜토리얼에서 따라하기 기능이 어떤 수모형을 옮기고 빼는지 과정이 보여야하는데 그냥 결과만 넘어가니 실제로 따라하긴 어려울 것 같아. 2. 받아올림, 받아내림 등의 기능도 보강이 되어야 하는데 그부분은 튜토리얼에서 따라하기로 어떻게 구현할수 있을지 고민해서 보강이 필요해. 3. 수모형으로 풀떼에도 수를 묶는다면 실제로 어덯게 묶어야 하는지 보여주는 기능이 필요하다고 생각해. 4. 뺄셈 할때에 처음 수에서 다음 수를 뺄때에 빼는 방법 안내가 부족하고 그걸 수모형으로 어떻게 나타낼지 고민이 필요해 보여. 5. 사칙연산 외에 분수의 덧셈과 뺄셈, 분수의 곱셈과 나눗셈까지도 커버가 가능하면 좋겠는데 가능하면 추가해주고 아니면 생략해도 될것 같아.

7. 잘되면 다음 단계로 누르면 넘어가는 버튼이 필요해. 혹은 부족하면 다시 이전 단계학습을 하던지. 단계 이동 버튼이 필요할 것 같아. 혹은 2단계(수모형)에서 5문제 도전해서 잘되면 자동으로 3단계(숫자 풀기)로 넘어가고, 숫자풀기 10문제 도전해서 잘되면 자동으로 게임코너 4단계로 넘어가는 등의 장치도 필요할 것 같아. 2. 난이도에 따라 조금 다른데, 받아올림, 받아내림이 있는 연산은 튜토리얼도 받아올림이 있는 것과 없는것, 받아내림이 있는것과 없는 것으로 나눠서 각각 2번은 해봐야 될 것 같아. 3. 문제제시는 쉬운 것부터 어려운 것 순서로 학생이 해결할 수 있게 제시하면 좋겠어.