# data[].attributes.attachment_link.description
Signup to get started and create a design.

# data[].attributes.body
https://docs.google.com/forms/d/e/1FAIpQLSeVAsmd_ZhjPtvV6f9Gw-cnL99PqGHCwbSYLiGUcC6piRfQRQ/viewform

# data[].attributes.headline
6. 상담앱(캔바)_데이터 연결

# data[].attributes.subject
6. 상담앱(캔바)_데이터 연결

# data[].attributes.body
Canva Code 프롬프트

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을 사용하여 그래프를 구현한다.

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

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

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

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.body
초등학생이 사용할 구구단 연습 웹앱을 만들어줘.

전체 디자인

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

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

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

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

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.body
mbti 앱 만들어줘

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.body
구구단 앱 만들어줘

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.headline
2. 동물분류앱(캔바)

# data[].attributes.subject
2. 동물분류앱(캔바)

# data[].attributes.body
동물 분류하기 앱을 만들어줘. 마우스 동물그림을 끌어다가 사는 곳으로 놓으면 맞으면 정답 틀리면 화면이 흔들리면서 그림이 다시 원위치로 돌아가게 해줘. 사는 곳은 하늘/ 수중/ 육지로 해주고 동물은 강아지, 고양이, 비둘기, 물고기, 거북이, 메뚜기로 해줘

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.body
출석앱을 만들어줘. 출석한 친구 이름을 클릭하면 색이 다르게 표기되게 그리고 출석이라는 글자가 표기되게. 이름은 장원영 아이유 변우석 용복이 이영지 박보검 이야

# data[].attributes.attachment_link.description
This website has been created with Canva, but the content is User Content that is subject to our Terms of Use. If you see anything that breaches our acceptable use policy, please report it to our content review team.

# data[].attributes.attachment_link.description
도서, 티켓, 음반, 굿즈, 커뮤니티까지 문화 전반을 아우르는 국내 대표 문화콘텐츠 플랫폼, 아낌없는 혜택과 총알배송을 경험해보세요.

# data[].attributes.body
교실에서 사용할 수 있는 칭찬 웹앱을 만들어줘. 앱 이름은 "칭찬톡톡! 우리 반 칭찬왕"이야. 기능은 다음과 같아. 1. 화면에 아이 이름 목록을 카드 형태로 보여줘. 2. 교사가 아이 이름을 클릭하면 그 아이가 선택되게 해줘. 3. 선택된 아이는 테두리 색이 바뀌고, 화면 위에 "지금 선택된 친구: 이름"이라고 표시해줘. 4. 아래에는 칭찬 버튼을 만들어줘. 5. 칭찬 버튼은 정리왕, 발표왕, 배려왕, 인사왕, 도움왕, 집중왕, 용기왕, 웃음왕으로 만들어줘. 6. 칭찬 버튼을 누르면 선택된 아이 이름 옆에 해당 칭찬 뱃지가 추가되게 해줘. 7. 칭찬 버튼을 누르면 음성으로 "OO이, 정말 멋진 정리왕이에요!"처럼 말소리가 나오게 해줘. 8. 칭찬을 받을 때마다 귀여운 캐릭터와 별 효과가 잠깐 나타나게 해줘. 9. "오늘 칭찬 기록 지우기" 버튼을 만들어 모든 칭찬 기록을 초기화할 수 있게 해줘. 10. 디자인은 유치원 교실에 어울리게 귀엽고 밝은 파스텔톤으로 만들어줘. 11. 버튼과 글씨는 크게 만들어서 전자칠판에서도 잘 보이게 해줘. 12. 아이 이름은 나중에 쉽게 수정할 수 있도록 코드 맨 위에 배열로 정리해줘. HTML, CSS, JavaScript가 한 파일에 들어간 완성형 코드로 만들어줘.

# data[].attributes.attachment_link.title
MediaPipe Solutions guide | Google AI Edge | Google for Developers

# data[].attributes.attachment_link.description
MediaPipe Solutions provides a suite of libraries and tools for you to quickly
apply artificial intelligence (AI) and machine learning (ML) techniques in your
applications. You can plug these solutions into your applications immediately,
customize them to your needs, and use them across multiple development
platforms. MediaPipe Solutions is part of the MediaPipe open source
project, so you can further customize the
solutions code to meet your application needs. The MediaPipe Solutions suite
includes the following:

# data[].attributes.attachment_link.description
Make learning feel like play. Create interactive learning games in seconds with AI.

# data[].attributes.attachment_link.description
Create lesson plans, presentations, quizzes, worksheets and more with AI powered apps for teachers. 

# data[].attributes.attachment_link.description
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.

# data[].attributes.attachment_link.title
사이버폭력 피해학생, 겉으론 괜찮아도 외상 후 스트레스 직격

# data[].attributes.attachment_link.description
사이버폭력 피해 학생이 즉각적으로 고통을 호소하지 않더라도 외상 후 스트레스로 직결될 수 있다는 연구 결과가 19일 나왔다. 피해자의 감정 표현 정도만으로 심리적 내상의 심각성을 가늠하기 어렵다는 의미다. BTF푸른나무재단 학교폭력문제연구소 연구진은 학술지 ‘한국청소년연구’ 최신호에 게재한 논문을 통해 이같이 밝혔다.

# data[].attributes.attachment_link.description
Brisk is the best AI for teachers and schools, offering free AI tools for education that fit seamlessly into your routine. With an AI lesson plan generator and tools for instruction, feedback, and differentiation, Brisk helps lighten your workload. Grade essays before the bell or create lesson plans in seconds. Install now and thank yourself all year!