전체 디자인

• HTML, CSS, JavaScript를 하나의 파일에 작성한다.

• 캔바에서 바로 실행 가능한 완성형 코드로 만든다.

• 모바일과 PC 모두 사용 가능하게 반응형으로 만든다.

• 밝고 귀여운 초등학생 스타일.

• 큰 버튼과 큰 글씨 사용.

• 애니메이션 효과를 넣어 재미있게 만든다.

시작 화면

제목

🎯 구구단 마스터

설명

"단을 선택하고 시작하세요!"

버튼

2단
3단
4단
5단
6단
7단
8단
9단

또는

🎲 랜덤

게임 규칙

선택한 단에서

문제를 10개 출제한다.

예)

7 × 8 = ?

곱하는 수는 1~9 사이에서 랜덤.

입력 방법

숫자 입력칸

정답 확인 버튼

정답 처리

맞으면

✅ 정답!

초록색 효과

별이 반짝이는 애니메이션

점수 +10점

틀리면

❌ 다시 생각해보세요!

빨간색 효과

정답은 알려주지 않는다.

다시 입력할 수 있게 한다.

점수

오른쪽 위에 항상 표시

⭐ 점수 : 0점

10점씩 증가

총점은 100점

진행 표시

현재 문제

예)

3 / 10

프로그레스 바도 표시

마지막

10문제를 모두 맞히면

🎉 축하합니다!

100점 만점!

또는

80점입니다!

처럼 결과 화면을 보여준다.

다시하기

처음으로 버튼

다른 단 선택 버튼

효과

버튼을 누르면 살짝 커지는 애니메이션

정답이면 폭죽 효과

틀리면 입력창이 살짝 흔들린다.

문제 전환은 부드럽게 Fade 효과

배경

하늘색 그라데이션

별과 구름 장식

추가 기능

학생이 문제를 푸는 시간을 측정한다.

화면 위에

⏱ 01:25

형태로 표시한다.

보너스 기능

100점을 맞으면

🏆 구구단 마스터!

배지를 화면 중앙에 크게 보여준다.

반짝이는 애니메이션을 넣는다.

접근성

Enter 키를 누르면 정답 확인

숫자만 입력 가능

입력 후 자동으로 포커스 유지

코드

반드시

HTML

CSS

JavaScript

를 하나의 파일 안에 작성한다.

외부 라이브러리는 사용하지 않는다.

오류 없이 캔바에서 바로 실행 가능한 완성형 코드로 작성한다.

HTML, CSS, JavaScript를 하나의 파일에 모두 포함한 완성형 웹앱을 만들어줘.

앱 이름은 "우리 반 고민 제출함"이다.

전체 디자인은 따뜻하고 편안한 느낌의 파스텔톤으로 만들어주고, 초등학생도 쉽게 사용할 수 있도록 버튼과 글씨를 크게 만들어줘.

모든 기능은 하나의 HTML 파일 안에서 동작하도록 만들어줘.

[학생 화면]

상단 제목
우리 반 고민 제출함

부제목
"혼자 고민하지 말고 선생님께 이야기해 보세요."

① 학생 이름 선택

드롭다운으로 선택

학생 목록

• 1번 김민준

• 2번 이서연

• 3번 박지후

• 4번 최윤아

• 5번 정도윤

선택하지 않으면 제출되지 않게 해줘.

② 고민 종류 선택

드롭다운

항목

• 친구 관계

• 학습 고민

• 가족 고민

• 진로 고민

• 마음/감정 고민

• 기타

③ 고민 내용 입력

큰 textarea를 사용한다.

placeholder는

"선생님께 전하고 싶은 고민이나 마음을 적어 주세요."

로 한다.

중요

placeholder 방식으로 구현하여

학생이 입력창을 한 번 클릭하거나 키보드를 입력하는 순간

안내 문구가 한 번에 완전히 사라져야 한다.

입력 중 다시 나타나면 안 된다.

절대로 textarea 안에 실제 텍스트를 넣지 말고 placeholder 속성으로 구현한다.

④ 제출 버튼

버튼 이름

"고민 제출"

클릭하면

다음을 저장한다.

• 제출시간

• 학생 이름

• 고민 종류

• 고민 내용

제출시간은 현재 날짜와 시각을 자동 기록한다.

예시

2026-06-28 14:31:08

제출 후

초록색 알림창으로

"선생님께 고민이 전달되었습니다."

를 보여준다.

그 후

• 이름 초기화

• 고민 종류 초기화

• 고민 내용 비우기

를 자동 수행한다.

[교사용 보기]

학생 화면 오른쪽 위에

"교사용 보기"

버튼을 만든다.

아무나 볼 수 없도록 한다.

버튼을 누르면

비밀번호 입력창(modal)을 띄운다.

비밀번호는

0000

으로 한다.

비밀번호가 맞으면

교사용 화면으로 이동한다.

틀리면

"비밀번호가 올바르지 않습니다."

라는 메시지를 보여준다.

[교사용 화면]

상단 제목

교사용 화면

그 아래 빨간 안내문

"교사만 확인하는 자료입니다."

상단에

데이터 연결 버튼

을 만든다.

데이터 연결 버튼을 눌러야

학생들이 제출한 고민 목록이 나타난다.

표 항목

• 제출 시간

• 학생 이름

• 고민 종류

• 고민 내용

최신 제출이 가장 위에 오도록

제출 시간 기준 내림차순 정렬한다.

필터 기능

① 학생 이름

드롭다운

"전체"

포함

② 고민 종류

드롭다운

"전체"

포함

선택하면 즉시 필터링된다.

통계 기능

표 위에

전체 제출 건수

예)

전체 제출 : 15건

을 표시한다.

그 아래

고민 종류별 제출 건수를

막대그래프로 표시한다.

그래프는 Chart.js를 사용한다.

항목

• 친구 관계

• 학습 고민

• 가족 고민

• 진로 고민

• 마음/감정 고민

• 기타

디자인

학생 화면

• 둥근 카드

• 큰 버튼

• 큰 글씨

• 따뜻한 색감

• 그림자 효과

교사용 화면

• 흰색 표

• 헤더 고정

• 스크롤 가능

• 필터는 상단 배치

• 표는 읽기 쉽게 줄무늬 스타일

기술 요구사항

반드시 HTML, CSS, JavaScript를 하나의 파일에 작성한다.

외부 서버 없이 동작하도록 한다.

학생 제출 데이터는 JavaScript 배열(localStorage 사용 가능)에 저장하여 새로고침 후에도 유지되도록 한다.

Chart.js CDN을 사용하여 그래프를 구현한다.

코드는 바로 실행 가능한 완성형 코드만 출력한다.

중간 생략 없이 전체 코드를 작성한다.

주석을 충분히 작성하여 수정하기 쉽게 만들어준다.