마인크래프트 스킨 제작 메뉴얼 및 사회정서학습(SEL) 활용 방안

1. 마인크래프트 스킨 제작 메뉴얼

이 매뉴얼은 별도의 가입이나 로그인 없이 나만의 마인크래프트 스킨을 제작하고 다운로드하여 게임에 적용하는 전체 과정을 안내합니다.

1단계: 영감 얻기 (다른 사람의 스킨 참고하기)

스킨을 만들기 전에 먼저 다른 사람들이 만든 멋진 스킨들을 둘러보며 아이디어를 얻어보세요.

• 플래닛 마인크래프트 갤러리(https://www.planetminecraft.com/skins/)를 참고하여 나만의 캐릭터에 적용할 디자인을 구상해 봅니다.

2단계: 스킨 에디터 접속 (Advanced Editor 선택 필수)

플래닛 마인크래프트 에디터(https://www.planetminecraft.com/skin-editor/)에 접속합니다.

• 접속 시 나타나는 시작 화면에서 반드시 ADVANCED EDITOR(고급 에디터)를 선택해야 합니다.

• 주의: Basic Editor(기본 에디터)로 접속할 경우 캐릭터의 자세를 변경할 수 있는 '포즈 메뉴'와 결과물을 사진으로 저장하는 '스크린 샷 메뉴'가 보이지 않으니 꼭 Advanced Editor를 클릭하세요.

3단계: 나만의 스킨 디자인 및 핵심 메뉴 활용

좌측의 색상 팔레트와 픽셀 브러시를 이용해 캐릭터를 꾸밉니다. 우측 메뉴 바에 있는 핵심 기능들을 적극적으로 활용하세요.

주요 메뉴	기능 설명 및 활용법
포즈 메뉴 (Pose)	오른쪽 상단. 캐릭터가 걷거나 달리는 자세 등 다양한 포즈를 취하게 할 수 있습니다. 3D 화면을 돌려가며 내가 만든 스킨이 여러 자세에서 어떻게 보이는지 점검할 때 매우 유용합니다.
다운로드 (Download)	화면 오른쪽 하단의 다운로드 버튼을 눌러 완성된 스킨을 .png 형태의 이미지 파일로 내 컴퓨터에 저장합니다.
스크린 샷 (Screenshot)	화면 오른쪽 중간, 카메라 아이콘 선택. 현재 3D 에디터 화면에 보이는 배경과 캐릭터의 모습을 하나의 사진(이미지)으로 저장해 줍니다. 클래스룸 과제 제출 시 이 메뉴를 통해 받은 이미지를 사용합니다.

4단계: 스킨 팩 만들기 및 마인크래프트에 적용하기

저장한 스킨 이미지(.png)를 게임에 쉽게 적용할 수 있는 패키지(.mcpack)로 변환하고 게임에 적용합니다.

1. 스킨 패커(https://mattheffnt.github.io/skin-packer/) 사이트에 접속합니다.

2. 
   

3. 에디터에서 다운로드한 .png 파일을 업로드하고 패키지 이름을 정한 뒤 ‘Download Pack' 버튼을 눌러 .mcpack 파일을 생성합니다.

4. 다운로드 받은 .mcpack 파일을 더블클릭하면 마인크래프트가 실행되며 스킨이 자동으로 적용됩니다.

5단계: 클래스룸 게시판 업로드 과제 

완성된 캐릭터를 친구들과 공유하기 위해 클래스룸에 과제를 제출합니다.

1. 스킨 에디터 우측의 스크린 샷 메뉴를 클릭하여 완성된 내 캐릭터의 멋진 이미지를 다운로드합니다.

2. 구글 클래스룸의 과제 게시판에 접속하여 새 게시글을 작성합니다.

3. 방금 다운로드한 스크린 샷 이미지를 게시글의 첨부 파일로 업로드합니다.

4. 게시글 본문에는 "이 캐릭터를 왜 이렇게 만들었는지", "나의 어떤 점을 표현하고 싶었는지" 등 제작 의도와 설명을 자세히 작성하여 등록합니다.

2. 사회정서학습(SEL) 활용 방안

본 스킨 제작 활동은 학생들의 자기 인식(Self-Awareness) 및 감정 표현 능력을 함양하는 것을 최우선 목표로 합니다.

활동 주제: 나를 표현하는 캐릭터 만들기

단순히 예쁘고 멋진 게임 캐릭터를 만드는 것을 넘어, 학생 개인의 고유한 성향, 숨겨진 장점, 그리고 현재 마음속의 감정 상태를 시각적 매체를 통해 투영하는 활동입니다.

세부 활동 단계 및 기대 효과

활동 단계	주요 내용	SEL 교육 효과
1. 내면 탐색하기	스킨 디자인 전, 활동지나 노트를 활용해 '내가 가장 좋아하는 색', '나를 동물이나 사물로 비유한다면?', '요즘 내가 가장 자주 느끼는 감정' 등을 짧게 적어봅니다.	자신의 내면을 언어화하며 명확한 자기 이해와 긍정적 자아 개념을 형성합니다.
2. 시각적 표현하기	탐색한 내용을 바탕으로 색상과 장비를 선택하여 캐릭터를 만듭니다. (예: 열정을 표현하기 위해 붉은 망토를 입히거나, 남을 돕는 것을 좋아해 방패를 그리기)	자신의 추상적인 생각과 감정을 시각적 요소(픽셀 아트)로 안전하게 표현하는 방법을 배웁니다.
3. 공유 및 상호작용	클래스룸에 업로드된 서로의 스크린 샷 이미지와 설명을 읽고, 긍정적이고 지지하는 내용의 댓글을 남깁니다.	타인의 감정과 개성을 이해하고 존중하며, 공감에 기반한 사회적 관계 형성 기술을 증진합니다.

 

[프롬프트 공유] 난산증 아동을 위한 맞춤형 수학 웹앱, AI로 뚝딱 만들기

안녕하세요! 교실에서 아이들을 만나다 보면, 유독 숫자를 두려워하고 연산을 힘들어하는 친구들을 보게 됩니다. 특히 '난산증(Dyscalculia)'을 겪는 아이들에게는 단순한 반복 학습이나 문제 풀이보다, 숫자의 크기를 눈으로 확인하는 시각적 직관과 끊임없는 격려가 훨씬 더 중요하죠.

오늘은 AI를 활용해 이런 아이들을 도울 수 있는 '맞춤형 덧셈 웹앱' 제작용 COSTAR 프롬프트를 공유해 보려고 합니다.

복잡한 코딩 지식이 없어도, 이 프롬프트를 챗GPT나 클로드 같은 AI에 복사해 붙여넣기만 하면 브라우저에서 즉시 실행되는 훌륭한 교육용 소프트웨어 코드를 얻으실 수 있습니다. 특수학급 선생님이나 학부모님, 그리고 에듀테크에 관심 있는 모든 분들께 유용한 자료가 되길 바랍니다.

💡 왜 이 프롬프트가 특별할까요?

단순히 "수학 게임을 만들어줘"라고 하는 대신, COSTAR 프롬프트 프레임워크를 사용하여 AI에게 명확한 역할과 제약 사항을 부여했습니다.

• 시각적 보조 수단: 수 모형(Base-10 Blocks)을 색상별로 구현해 양적 크기를 직관적으로 인지하도록 했습니다.

• 세심한 난이도 조절: 처음엔 받아올림이 없는 쉬운 문제로 성취감을 주고, 점진적으로 난이도를 높입니다.

• 따뜻한 피드백: "틀렸어"라는 말 대신, 우주 테마에 맞춘 긍정적인 은유(예: "우주선 연료가 조금 더 필요해!")를 사용하여 아이들의 수학 불안도를 낮춥니다.

📋 복사해서 바로 쓰는 COSTAR 프롬프트 템플릿

아래의 내용을 그대로 복사하여 AI 채팅창에 입력해 보세요. 필요에 따라 대상 학년이나 테마를 자유롭게 수정하셔도 좋습니다.

[Context]

• 대상 사용자는 초등학교 3학년 학생으로, 수학 학습 장애인 '난산증(Dyscalculia)'을 겪고 있습니다.

• 이 학생은 특히 '100의 자리 세 자릿수 덧셈'에서 큰 어려움을 겪고 있으며, 숫자의 크기를 직관적으로 인지하지 못하고 자릿수를 맞춰 더하는 세로셈 개념이 약합니다.

• 학생이 숫자에 대한 공포를 줄이고, 수의 양적 크기(수량)를 시각적으로 이해하며, 성취감을 느낄 수 있도록 돕는 연산 보조 소프트웨어가 필요합니다.

[Objective] 다음 기능들을 완벽하게 갖춘 인터랙티브 교육용 단일 파일 웹앱(HTML/JS)을 제작해 주세요.

1. 세션당 총 10문제를 제공하며, 매 세션마다 무작위로 새로운 문제가 생성되어야 합니다.

2. 난이도 조절:

   • 1~4번 문제: 받아올림이 전혀 없는 기초 100의 자리 덧셈 (예: 123 + 245)

   • 5~10번 문제: 일의 자리 혹은 십의 자리 중 '단 한 곳에서만' 받아올림이 발생하는 점진적 난이도 덧셈

3. 핵심 학습 보조 도구 (수 모형 시각화):

   • 문제로 출제된 두 숫자를 100의 판, 10의 막대, 1의 낱개 블록 모양(Base-10 Blocks)으로 시각화하여 보여줍니다.

   • 각 블록은 자릿수별로 명확히 다른 색상으로 구분되어야 합니다. (예: 100=파랑, 10=초록, 1=빨강)

4. 세로셈 입력 가이드:

   • 세로셈 판을 제공하고, 자릿수(백/십/일의 자리)를 세로선과 블록 색상에 맞춰 줄정렬하여 보여줍니다.

   • 사용자가 백/십/일의 자리 입력 칸에 각각 한 자릿수씩 정답을 입력할 수 있도록 독립된 입력 창을 제공합니다.

   • 숫자가 입력되면 일의 자리 -> 십의 자리 -> 백의 자리 순서로 포커스가 자연스럽게 이동하도록 돕습니다.

5. 게이밍 및 피드백 요소:

   • 친근한 가이드 캐릭터(예: 우주 요정 큐비)가 등장하여 따뜻하고 구체적인 피드백을 줍니다.

   • 정답 시에는 축하 효과음과 이펙트, 오답 시에는 틀린 자릿수 블록을 다시 세어보라는 구체적인 힌트(예: "빨간색 1의 자리 블록을 다시 세어볼까?")를 제공합니다.

   • 2회 이상 연속 오답 시에는 아이의 좌절을 막기 위해 정답과 해설(모형 매칭 설명)을 친절하게 보여줍니다.

6. 진행 상황바(Progress Bar)와 최종 결과 카드(미션 완료 및 맞춘 개수)를 구현해 주세요.

[Style]

• 디자인 테마: 아이들이 몰입하기 좋은 '우주 모험' 또는 '마법 판타지' 테마 (어두운 배경에 야광/네온 컬러 포인트 추천)

• UI/UX: 아주 직관적이고 여백이 넓어야 합니다. 텍스트 크기는 크게 하고 눈이 편안한 둥근 폰트 스타일을 적용하세요.

• 스타일 라이브러리: 외부 CSS 파일 없이 작동할 수 있도록 Tailwind CSS CDN을 사용하고, 아이콘은 Font Awesome CDN을 활용하세요.

• 기술 제한: HTML, CSS, JavaScript가 오직 하나의 파일(index.html) 안에 완벽히 통합되어 있어야 합니다. 외부 자바스크립트 모듈이나 별도의 CSS 파일은 생성하지 마세요.

[Tone]

• 어조: 초등학교 3학년 아동에게 맞춘 극도로 친근하고, 다정하며, 끊임없이 격려하는 어조.

• "틀렸어" 대신 "다시 한번 세어보자!", "우주선 연료가 조금 더 필요해!" 같은 긍정적이고 은유적인 표현을 사용해 주세요.

[Audience]

• 주 사용자는 수학에 극심한 불안감과 난산증을 겪는 10세 어린이입니다.

• 보조 사용자는 치료 놀이를 지도하는 특수학급 교사 또는 학부모입니다. 따라서 복잡한 설정 없이 브라우저에서 '더블클릭'만으로 실행 가능해야 합니다.

[Response]

• 완성도 높고 즉시 브라우저에서 실행 가능한 한 장의 HTML 코드로 응답해 주세요.

• 코드 내 가이드 텍스트와 모든 다이얼로그, 피드백 메시지는 한글로 정성스럽게 작성해 주세요.

• 코드 내부에는 각 연산 제어 로직과 난산증 보조 기법에 대한 주석을 상세하게 달아주세요.

업무 메신저 폭탄 속에서 '일정·할 일' 3초 만에 자동 정리하는 법 (feat. 제미나이 프롬프트)

 

업무 메신저 폭탄 속에서 '일정·할 일' 3초 만에 자동 정리하는 법 (feat. 제미나이 프롬프트)

아침에 출근하자마자 슬랙, 잔디, 카카오톡, 혹은 사내 메신저로 쏟아지는 장문의 공지사항과 업무 지시 때문에 정신없으신 적 많으시죠?

"ㅇㅇ 대리님, 이번 주 목요일 오후 2시까지 기획서 초안 공유해 주시고, 다음 주 월요일 미팅 일정 잡힌 것도 체크해 주세요. 아 참, 오늘 퇴근 전까지 지출 증빙 서류 제출하는 것도 잊지 마시고요!"

이런 메시지를 받으면 메모장 켜고, 구글 캘린더 열고, 할 일 목록에 일일이 받아 적느라 정작 중요한 업무는 시작도 못 하곤 합니다.

오늘은 메신저로 받은 복잡하고 긴 텍스트를 AI(제미나이)가 알아서 분석해 구글 캘린더(일정)와 구글 태스크(할 일)로 자동 분류 및 등록해 주는 마법 같은 프롬프트를 소개합니다!

한 번만 세팅해 두면 나만의 '스마트한 디지털 비서'를 고용한 효과를 누릴 수 있습니다.

🛠️ 3단계 초간단 세팅 방법

1단계. 제미나이에 '업무 비서' 영혼 불어넣기

구글 제미나이(Gemini)에 접속해 새 채팅을 열고, 아래의 프롬프트를 복사해서 그대로 붙여넣으세요. (일반 직장인 버전에 맞게 튜닝된 프롬프트입니다.)

Plaintext

O (Objective): 아래 붙여넣는 비정형 업무 메신저 텍스트를 분석해서, 특정 일시가 지정된 업무는 'Google Calendar'에 등록할 일정으로, 오늘이나 당장 처리해야 할 액션 플랜은 'Google Tasks'에 등록할 할 일로 정확히 분류해서 정리해 줘.
S (Style): 군더더기 없이 깔끔하고 명확한 프로 직장인의 업무 지시 스타일.
T (Tone): 철저하고 빠릿빠릿한 전문 비서 톤.
A (Audience): 효율적인 업무 처리가 필요한 직장인(나)
R (Response): 
1) [구글 캘린더 등록용] 일정/시간/내용 요약
2) [구글 태스크 등록용] 오늘 바로 처리해야 할 일 브리핑

2단계. 이 채팅창 '고정'하기 (가장 중요!)

매번 프롬프트를 복사하기 귀찮으시죠? 딱 한 번만 고정해 두면 됩니다.

• 제미나이 화면 왼쪽 사이드바(또는 채팅창 오른쪽 상단 점 3개 버튼)에서 [고정(Pin)]을 클릭합니다.

• 채팅방 이름은 '메신저 업무 자동 정리 비서' 정도로 바꿔두면 찾기 편합니다.

3단계. 실전 활용하기

이제 세팅은 끝났습니다! 앞으로 슬랙이나 카카오톡으로 장문의 업무 지시나 공지사항이 오면, 내용을 통째로 복사해서 방금 고정해 둔 제미나이 채팅창에 툭 던지듯 붙여넣기만 하세요.

실제로 사용하면 어떻게 나올까?

메신저로 온 두서없는 글을 넣으면, 제미나이가 다음과 같이 칼같이 정리해 줍니다.

🤖 제미나이 비서의 답변 예시:

1) 🗓️ Google Calendar 등록 내역 (일정)

• 일시: 2026년 O월 O일 (목) 14:00

• 내용: 기획서 초안 공유 및 피드백

• 일시: 2026년 O월 O일 (월) 시간 미정

• 내용: 팀 주간 정기 미팅

2) 📝 Google Tasks 등록 내역 (오늘의 할 일)

• [ ] 금일 퇴근 전까지 지출 증빙 서류 제출 완료하기

출근 후 메신저 텍스트 복사 ➡️ 제미나이 붙여넣기 ➡️ 정리된 내용을 구글 달력과 태스크에 슥슥 등록하기만 하면 오늘 업무 세팅 끝!

[에듀테크] 구구단 패턴 암기는 그만! 초등 3학년 무한 나눗셈 학습기 웹앱 만들기 (ft. COSTAR 프롬프트)

[에듀테크] 구구단 패턴 암기는 그만! 초등 3학년 무한 나눗셈 학습기 웹앱 만들기 (ft. COSTAR 프롬프트)

교실에서 아이들과 수학 3학년 1학기 4단원 '나눗셈'을 시작할 때면 늘 비슷한 고민이 생깁니다. 구구단의 역연산 개념을 처음 접하는 아주 중요한 시기인데, 시중의 고정된 학습지 문항만 반복해서 풀다 보면 어느새 진정한 연산이 아니라 문제의 '패턴'만 외워버리는 경우가 많기 때문입니다.

요즘 교실 혁명은 정교한 프롬프트에서 시작된다는 말이 있죠. 학생들이 매일 완전히 새로운 문제로 완전 학습을 달성할 수 있도록, 2~9단 범위의 무작위 나눗셈 수식을 무제한 생성하는 웹앱을 기획해 보았습니다.

제가 AI에게 웹앱 개발을 지시할 때 사용한 COSTAR 프롬프트 전문과 설계 구조를 블로그에 공유합니다. 학급에서 바로 활용할 수 있는 개별화 학습 도구가 필요하셨던 분들께 도움이 되길 바랍니다!

💡 COSTAR 프롬프트 설계서

AI가 단번에 완벽한 결과물을 낼 수 있도록, COSTAR 프롬프트 프레임워크에 맞춰 구체적으로 지시했습니다.

1. Context (배경: 왜 필요한가?)

• 핵심 문제: 고정된 문항 세트는 학생들의 패턴 암기를 유발하여 진정한 연산 훈련을 방해합니다.

• 솔루션: 2~9단 곱셈구구 범위를 조합하여 무작위로 수식을 생성하는 도구를 통해 매일 색다른 수학 탐험을 제공합니다.

2. Objective (목표: 무엇을 만들 것인가?)

• 중복 없는 무작위 10문항: 시작할 때마다 $A \div B = C$ (단, $B, C \in [2, 9]$ 이며 $A = B \times C$) 조건에 맞는 새로운 수식을 생성합니다.

• 집중력 UP, 피로도 DOWN: 한 화면에 한 문제만 보여주어 학습 피로도를 최소화합니다.

• 실시간 내비게이션 동기화: 1~10번 이동 노드를 만들어 푼 문제와 안 푼 문제, 채점 후 정오답 상태를 한눈에 볼 수 있게 합니다.

• 고품질 해설 제공: 교사가 옆에서 알려주는 것처럼, 몫에 대응하는 나누기 이모지(●) 시각 자료와 상세한 힌트를 동적으로 제공합니다.

3. Style & Tone (디자인과 어조: 어떤 느낌으로?)

• UI/UX 디자인: 아이들의 눈 피로를 덜어주는 산뜻한 민트와 테알(Teal) 컬러를 메인으로 하고, 둥근 모서리와 부드러운 그림자를 사용해 따뜻하고 안전한 느낌을 주었습니다.

• 단일 파일 구성: 복잡한 설치 없이 브라우저만 있으면 어디서든 열리도록 HTML, CSS(Tailwind CSS), JS를 index.html 파일 하나에 묶었습니다.

• 따뜻한 격려 중심: '시험'이나 '채점'이라는 딱딱한 말 대신 '탐험'이라는 친근한 단어를 쓰고, 점수에 따라 맞춤형 칭찬 문구와 💮 스탬프 이펙트가 나오도록 했습니다.

  • 100점: "퍼펙트! 정말 최고예요! 나눗셈의 완벽한 박사이시군요!"

  • 80점 이상: "참 잘했어요! 아쉽게 놓친 부분만 다시 읽어 보아요."

4. Audience (대상: 누가 사용할 것인가?)

• 주 사용층: 나눗셈 개념과 계산력 향상이 필요한 초등학교 3학년 학생

• 활용 대상: 스마트 기기를 활용해 형성평가나 개별화 학습을 진행하는 초등학교 교사, 자녀의 기초 연산을 돕는 학부모

⚙️ Response: 핵심 구조적 설계 명세

단일 페이지 애플리케이션(SPA)으로 부드럽게 작동하도록 아래와 같은 흐름으로 로직을 설계했습니다.

Plaintext

[ 인트로 화면 (홈) ] 
       │ (탐험 시작! ▶ 10문제 무작위 빌드)
       ▼
[ 학습 진행 화면 (SPA) ] ──────► 상단 네비게이션 도트 맵 실시간 갱신
       │                             - 활성 문제: 테알(Teal) 하이라이트
       ├─ 다음 문제 / 이전 문제        - 정답 입력 완료: 연한 하늘색
       │                             - 미입력 문항: 흰색
       ▼
[ 채점 및 평가 엔진 실행 ] ────► 정오답 시각 피드백
       │                             - 정답: 초록색 도트 / 오답: 빨간색 도트
       ▼
[ 결과 보고서 화면 노출 ] ────► 점수별 스탬프(💮) 및 맞춤형 피드백
                                     - 오답 문항 클릭 시 개별 해설로 순간 이동

특히 generateRandomQuestions() 함수를 통해 나누는 수와 몫을 난수로 완벽히 조합하고, 초기화 시 브라우저 내의 기입 상태를 완벽히 청소하는 세밀한 세팅을 추가해 앱의 안정성을 높였습니다.

🔗 나눗셈 학습기 웹앱 바로가기 

프롬프트를 통해 실제 구현된 웹앱의 작동 모습이 궁금하시다면 아래 링크를 클릭해 주세요. 웹 브라우저에서 바로 실행되므로 스마트 기기를 활용한 형성평가나 개별화 학습 시간에 우리 반 아이들에게 바로 적용해 보실 수 있습니다! 

👉 초등 3학년 나눗셈 탐험 웹앱 실행하기

[에듀테크] 초등학생 눈높이에 딱! AI 프롬프트로 저작권 교육 퀴즈 웹앱 만들기 

"이 사진 제 블로그 숙제에 써도 돼요?", "이 음악 유튜브 브이로그에 그냥 올려도 되나요?"

교실에서 아이들과 지내다 보면 정말 자주 듣는 질문 중 하나입니다. 스마트폰, 유튜브, 카카오톡이 일상이 된 우리 아이들은 종종 자신도 모르게 다른 사람의 저작권을 침해하곤 합니다.

하지만 아이들에게 '저작권법 위반', '불법 다운로드', '손해 배상' 같은 딱딱한 단어로 가르치자니, 아이들이 지루해하거나 지레 겁을 먹기 일쑤입니다. 어떻게 하면 아이들이 스스로 올바른 인터넷 사용 습관을 기를 수 있게 도울 수 있을까요?

그래서 AI 프롬프트 엔지니어링을 활용해, 아이들의 눈높이에 맞춘 '다정하고 재미있는 저작권 퀴즈 웹앱'을 만들어 보았습니다.

🛠️ 기획 의도: COSTAR 프레임워크로 정교해진 AI 프롬프트

단순히 AI에게 "초등학생용 저작권 퀴즈 내줘"라고 하면, 너무 어른스럽거나 교과서적인 문제만 나오게 됩니다. 원하는 교육적 결과물을 정확히 얻기 위해 COSTAR 프레임워크를 활용하여 프롬프트를 꼼꼼하게 설계했습니다.

제가 퀴즈 데이터를 생성하기 위해 사용한 프롬프트를 공유합니다.

[Context] (배경) 최근 초등학생들이 스마트폰, 유튜브, SNS를 일상적으로 사용하면서 자신도 모르게 다른 사람의 저작권을 침해하는 사례가 늘고 있습니다. 아이들이 일상 속에서 저작권의 중요성을 스스로 깨닫고 올바른 인터넷 사용 습관을 기를 수 있도록 돕는 쉽고 친근한 퀴즈 콘텐츠가 필요합니다.

[Objective] (목표) 초등학생들이 일상생활(유튜브 편집, 단톡방 공유, 학교 숙제, 캐릭터 그리기, 게임 다운로드 등)에서 겪을 수 있는 구체적인 상황을 예시로 든 4지선다형 퀴즈 10문제를 제작해 주세요.

[Style] (스타일)

• 대상 연령: 초등학교 3~6학년의 눈높이에 맞춘 친근한 구어체

• "피고소", "형사 처벌" 같은 딱딱한 법률 용어 대신 "원작자의 허락", "올바른 약속" 등 순화된 표현 사용

• 가상의 인물이 등장하는 스토리텔링 형식 (예: "지우는 유료 게임을...")

[Tone] (어조)

• 혼내는 어조가 아닌, 친절하게 타이르는 '다정하고 교훈적인 톤'

• 아이들이 "나도 앞으로 저작권을 잘 지켜야지!" 하고 긍정적인 도덕심을 가지도록 격려

[Audience] (대상)

• 주 청중: 초등학교 중·고학년(만 9세~12세)

• 법률 암기가 아닌, 일상적인 '도덕과 상식' 선에서 판단할 수 있는 난이도

[Response] (응답 형식)

• 웹앱 시스템에 바로 입력할 수 있도록 엄격한 JSON 구조로 출력할 것 (question, answerOptions, isCorrect, rationale, hint 포함)

✨ 프롬프트 설계의 3가지 핵심 포인트

1. 스토리텔링과 일상 예시: 가상의 친구들이 등장하여 게임 다운로드, 단톡방 밈 공유 등 아이들이 매일 겪는 상황을 문제로 만들었습니다.

2. 다정하고 따뜻한 피드백: 오답을 고르더라도 혼내지 않고, "왜 창작자에게 상처를 주는지", "왜 규칙을 지켜야 모두가 즐거운지" 따뜻하게 알려주는 해설과 힌트를 넣었습니다.

3. 웹앱 연동을 위한 JSON 출력: 교사가 데이터를 일일이 옮겨 적을 필요 없이, 생성된 데이터를 웹앱이나 퀴즈 프로그램에 즉시 적용할 수 있도록 개발 친화적인 JSON 형태로 지정했습니다.

🚀 완성된 결과물 확인하기

이렇게 잘 짜인 프롬프트를 통해 생성된 퀴즈 데이터와 웹앱 결과물은 아래 링크에서 바로 확인해 보실 수 있습니다!

🔗 초등학생 저작권 퀴즈 제작 프롬프트 및 결과 확인하기

프롬프트를 조금만 다듬어도 우리 교실에 꼭 필요한 맞춤형 에듀테크 도구가 탄생합니다. 아이들의 올바른 인터넷 습관을 길러주는 다정한 저작권 퀴즈, 여러분도 직접 활용해 보시는 건 어떨까요? 😊

초등 수학의 고비 '받아올림', 스마트한 세로셈 웹앱으로 해결하기! (CO-STAR 프롬프트 공유)

초등 수학의 고비 '받아올림', 스마트한 세로셈 웹앱으로 해결하기! (CO-STAR 프롬프트 공유)

안녕하세요! 오늘은 초등학교 수학 과정 중 아이들이 처음으로 어려움을 겪는 복병인 '세 자리 수 덧셈과 받아올림(Carry)'을 재미있게 마스터할 수 있는 인터랙티브 수학 학습 웹앱 제작기를 공유하려고 합니다.

기존의 디지털 문제집이나 덧셈기들은 대개 가로로 숫자를 입력하거나, 왼쪽에서 오른쪽 방향으로 타이핑하게 되어 있어 아이들이 실제 종이에 세로셈을 풀 때의 연산 흐름(일의 자리 → 십의 자리 → 백의 자리)과 맞지 않아 혼란을 주곤 했습니다.

이러한 문제를 해결하기 위해, 실제 교실과 가정에서 아이들이 직관적으로 연산 흐름을 익힐 수 있는 '세 자리 수 덧셈 모험' 웹앱을 기획했습니다. 생성형 AI를 활용해 단일 HTML 파일로 뚝딱 만들어낼 수 있는 완성형 프롬프트도 함께 공개하니 꼭 활용해 보세요!

💡 '세 자리 수 덧셈 모험' 앱의 핵심 기능 (기획 검증)

이 앱은 철저히 어린이의 인지 발달과 연산 습관에 맞추어 설계되었습니다.

1. 수학적 직관을 돕는 '우좌(오른쪽에서 왼쪽) 스마트 입력'

   • 하단의 일반적인 입력창 대신, 세로셈 정답 줄의 일의 자리부터 직접 터치하여 입력합니다.

   • 숫자가 입력되면 자동으로 왼쪽(상위 자릿수)으로 커서가 이동하고, 오타가 나서 백스페이스를 누르면 다시 우측(하위 자릿수)으로 포커스가 복귀하는 스마트 백트래킹 기능을 탑재했습니다.

2. 시각적 힌트 '받아올림 도우미 버튼'

   • 아이들이 받아올림 수 '1'을 머릿속으로만 기억하다가 자주 틀리곤 합니다. 십의 자리와 백의 자리 위에 점선 동그라미 토글 버튼을 배치해, 아이가 직접 터치하여 핑크색 불을 켜고 숫자 '1'을 표시할 수 있게 돕습니다.

3. 성취감을 자극하는 확실한 피드백

   • 문제를 맞힐 때마다 "딩동댕! 정말 멋져!" 같은 생생한 피드백과 함께 실시간으로 점수가 오릅니다.

   • 총 10문제를 완주하면 커다란 왕관 팝업과 함께 환호하는 연출로 학습 성취감을 극대화합니다.

4. 엄선된 받아올림 문제 생성 알고리즘

   • 무작위 숫자가 아니라, 일의 자리나 십의 자리 중 최소 한 곳 이상에서 반드시 받아올림이 발생하는 문제만 10개 골라 출제되므로 밀도 높은 훈련이 가능합니다.

🛠️ 개발자를 위한 프리미엄 디자인 & 안정성 설계

• 따뜻한 스케치 스타일 테마: 구글 'Gaegu' 폰트와 앰버(Amber), 핑크, 블루 계열을 믹스하여 딱딱한 공부 느낌이 아닌 친근한 놀이처럼 느껴지게 디자인했습니다.

• 완벽한 격자 정렬: 세로셈의 생명은 칼 같은 자릿수 정렬입니다. CSS Grid 시스템을 활용해 흐트러짐 없는 시각 구조를 유지합니다.

• 에러 없는 안정성: window.onload를 기점으로 자바스크립트가 실행되도록 하여 DOM 에러를 원천 차단하고 단 하나의 .html 파일로 구동되도록 제작했습니다.

🚀 완성된 웹앱 만나보기

위의 정밀한 기획 요소를 모두 반영하여 완성된 인터랙티브 웹앱을 아래 링크에서 바로 확인하고 체험해보실 수 있습니다. 아이들과 함께 혹은 학생들과 함께 수업 시간에 활용해보세요! 

📋 AI로 똑같이 만들 수 있는 'CO-STAR 프롬프트' 공유

나만의 교육용 앱을 직접 제작해보고 싶으신 분들을 위해, 제가 사용한 CO-STAR 프롬프트를 그대로 공유합니다. 생성형 AI(예: Gemini 등)에 아래 내용을 그대로 복사·붙여넣기 하시면 멋진 단일 HTML 파일 코드를 얻으실 수 있습니다.

Markdown

[Context]
학습 대상: 세 자리 수 덧셈과 받아올림(Carry) 개념을 한창 익히고 있는 초등학생 어린이
현상: 기존의 단순 텍스트 입력형 덧셈기는 실제 연산 흐름(우측에서 좌측 자릿수 순서로 풀기)과 맞지 않아 혼란을 줄 수 있음.
해결책: 가독성이 뛰어난 세로셈 그리드 판을 제공하고, 일의 자리부터 직접 탭하여 숫자를 적어나갈 수 있는 '직접 입력 그리드' 수학 학습 앱이 필요함.

[Objective]
세 자리 수 더하기 세 자리 수 연산을 수행할 수 있는 인터랙티브 웹앱 제작.
어린이가 계산할 때 받아올림 수(1)를 직접 켜고 끌 수 있는 '받아올림 도우미 버튼' 구현.
사용자가 하위 자릿수(일의 자리)부터 상위 자릿수(천의 자리) 순서로 답을 입력하면 포커스가 자동으로 왼쪽으로 이동하는 스마트 입력 인터페이스 제공.

[Style]
서체: 따뜻하고 친근한 분위기를 위해 구글 'Gaegu' 폰트를 우선 적용.
디자인 테마: 따뜻한 앰버(Amber)와 핑크, 블루 계열을 활용한 프리미엄 스케치 스타일.
자릿수 정렬: 세로셈의 기하학적 정렬이 자릿수별로 칼같이 맞아야 함 (Grid 시스템 사용 권장).
입력 박스: 일반 테두리가 아닌 예쁜 점선 및 그라데이션이 들어간 동글동글한 상자(Rounded corners) 적용.

[Tone]
친근함과 격려: 어린이가 한 문제를 해결할 때마다 "딩동댕! 정말 멋져!", "우와, 최고야!" 등의 즉각적이고 생생한 감정적 피드백 제공.
성취감: 점수가 오르는 모습을 실시간으로 보여주고, 10문제를 완주하면 커다란 팝업(왕관 이모지 포함)과 함께 환호하는 연출.

[Audience]
주요 사용자: 일의 자리, 십의 자리에서 일어나는 받아올림의 의미를 스스로 깨닫고 시각적 힌트를 필요로 하는 아동.
보조 사용자: 어린이의 학습 과정과 성취도(점수)를 실시간으로 간편하게 모니터링하려는 학부모 및 교사.

[Response - 핵심 요구사항 & 구현 기능]
1. 문제 생성 알고리즘:
- n1, n2는 (100~899) 범위 내의 세 자리 수 무작위 추출.
- 단, 어린이가 받아올림 개념을 충분히 훈련할 수 있도록 일의 자리 또는 십의 자리 중 적어도 한 곳 이상에서 반드시 받아올림이 발생하는 문제만 10개 엄선하여 출제할 것.
2. 자릿수 입력 장치:
- 하단 입력 창을 완전히 없애고, 세로셈 판 정답 줄의 일의 자리(inp-one), 십의 자리(inp-ten), 백의 자리(inp-hundred), 천의 자리(inp-thousand) 빈칸에 직접 타이핑하도록 설계.
- 숫자가 한 글자 입력되면 자동으로 왼쪽(상위 자릿수) 입력칸으로 커서가 넘어가는 oninput 체인 로직 구현.
- 오타 수정을 위해 백스페이스(Backspace)를 누르면 자동으로 우측(하위 자릿수) 입력칸으로 포커스가 복귀하는 스마트 백트래킹 기능 탑재.
3. 받아올림 가이드:
- 십의 자리 위, 백의 자리 위에 점선 모양의 동그라미 토글 버튼 배치. 터치하면 핑크색 불이 켜지며 숫자 '1'이 활성화되어 계산을 보조함.
4. 예외 처리 및 안전성:
- window.onload를 기점으로 자바스크립트가 실행되어 DOM null 포인터 예외를 원천 차단할 것.
- 정답 확인을 누르면 각 자릿수 칸이 맞았는지 검증하여 맞으면 '초록색 테두리 및 팝 애니메이션', 틀리면 '빨간색 테두리 및 흔들기(Shake) 애니메이션'을 개별 부여할 것.

[Constraint]
- 무조건 HTML, CSS, JavaScript가 한 개의 파일 안에 담긴 단일 .html 파일로 완성할 것.
- 외부 이미지 소스 주소(URL)를 절대 사용하지 말고, 아이콘 및 시각적 장치는 Tailwind CSS 클래스, 자체 SVG 또는 이모지(🎉, 🏆, ☀️)로 대체할 것.

디지털 기술이 교육 환경에 자연스럽게 스며들 때 아이들의 학습 효율은 배가 됩니다. 오늘 소개해 드린 프롬프트 구조를 활용해 여러분만의 개성 넘치는 교육 도구를 만들어보시는 건 어떨까요?  

AI로 하루 만에 만드는 초등 수학 교구: "구구단 딸기 모험" 웹앱 제작기 (프롬프트 공유)

 AI로 하루 만에 만드는 초등 수학 교구: "구구단 딸기 모험" 웹앱 제작기 (프롬프트 공유)

안녕하세요! 오늘은 초등학생 아이들이 구구단의 원리를 시각적으로 자연스럽게 이해할 수 있도록 돕는 반응형 교육 웹앱, '구구단 딸기 모험'의 기획 및 개발 과정을 공유합니다.

복잡한 코딩 지식 없이도 생성형 AI(Gemini 등)를 활용해 단번에 완성도 높은 결과물을 도출해낼 수 있는 CO-STAR 프롬프트 작성 사례를 함께 살펴보겠습니다.

1. 단순 암기를 넘어 '원리'로 접근하는 구구단

초등학교 수학 과정에서 구구단은 종종 단순 주입식 암기로 이어지기 쉽습니다. 하지만 구구단의 진짜 핵심은 같은 수를 여러 번 더하는 '동수누가(同數累加)'의 개념과 묶음의 원리를 깨닫는 데 있습니다.

이번 프로젝트는 수학 수식을 만났을 때, 이를 '바구니(묶음) N1개에 각각 딸기(개수) N2개씩 들어있는 구조'로 화면에 즉시 시각화하여, 아이들이 눈으로 수량 감각을 확인하며 바로 정답을 입력할 수 있도록 설계했습니다. 딸기를 하나하나 터치하며 세는 번거로운 단계는 과감히 생략하고 직관적인 사고를 돕는 데 집중했습니다.

2. 완벽한 웹앱을 위한 'CO-STAR' 프롬프트 설계

AI에게 무작정 "구구단 앱 만들어줘"라고 요청하면 기획 의도와 맞지 않거나 모바일에서 화면이 깨지는 코드가 나오기 십상입니다. 이를 방지하기 위해 6가지 구조로 정교하게 작성한 프롬프트의 핵심 기획 사양은 다음과 같습니다.

• Context (배경): 구구단 기초 암기와 동수누가 원리를 학습 중인 초등학생을 타겟으로 명확한 문제점과 해결책 제시.

• Objective (목표): 2단~9단 범위의 무작위 10문제 생성, 비대화형(Static) 시각 자료 즉시 렌더링, 상시 활성화된 모바일 터치 인터페이스 구현.

• Style (스타일): 아동 친화적인 구글 'Gaegu' 폰트 및 로즈 핑크(Rose Pink)·옐로우(Warm Amber) 테마의 스케치북 아트 스타일 적용.

• Tone (어조): 성취감을 자극하는 즉각적이고 밝은 피드백("딩동댕! 아주 멋지게 해결했어!") 및 완주 시 왕관(🏆) 동적 팝업 연출.

• Response (핵심 기능): inputmode="numeric"을 통한 모바일 키보드 최적화 및 window.onload 이벤트를 사용한 Null 포인터 예외 원천 차단.

• Constraint (제약 사항): 외부 이미지 링크 없이 이모지(🍓, 🧺)와 Tailwind CSS만 사용하여 단 1개의 HTML 파일로 모든 로직 구현.

💡 개발 팁: 특히 DOM 요소가 완벽히 로드된 후 스크립트가 실행되도록 한 에러 핸들링과, 입력창 자동 포커스 처리는 모바일 UX를 획기적으로 높여주는 핵심 엔지니어링 조건입니다.

3. 프롬프트 원문 공유 (바로 복사해서 사용해 보세요!)

아래 프롬프트를 복사하여 AI(Gemini, ChatGPT 등)에 그대로 입력하시면, 별도의 서버나 이미지 호스팅 없이 브라우저에서 즉시 실행 가능한 나만의 구구단 웹앱 코드를 얻으실 수 있습니다.

Plaintext

[구구단 딸기 모험 CO-STAR 프롬프트]

1. Context (배경)
- 학습 대상: 구구단 2단에서 9단까지의 기초 암기와 곱셈의 기본 원리인 "동수누가(같은 수 여러 번 더하기)"를 익히고 있는 초등학생 어린이 
- 현상: 단순 주입식 암기는 구구단 뒤에 숨겨진 곱하기의 원리(묶음과 총합)를 이해하기 어렵게 만듦.
- 해결책: 곱셈의 개념인 N1 * N2 (바구니 N1개에 딸기 N2개씩)를 깔끔한 시각 자료로 화면에 즉시 보여주고, 어린이가 머릿속으로 계산하거나 눈으로 보면서 바로 정답을 입력할 수 있도록 구성함. (딸기를 일일이 터치해서 세는 번거로운 단계는 생략)

2. Objective (목표)
- 구구단 2단에서 9단(2 <= N1, N2 <= 9) 범위의 10문제를 랜덤하게 중복 없이 생성하는 반응형 웹앱 제작.
- 어린이가 문제의 수식을 직관적으로 이해할 수 있도록 바구니(묶음)와 바구니 속 딸기(개수)의 이미지를 static(비대화형) 시각 자료로 즉시 렌더링.
- 처음부터 정답을 바로 입력할 수 있도록 하단 입력 인터페이스를 항상 활성화하며, 모바일 터치 조작이 원활하게 작동해야 함.

3. Style (스타일)
- 서체: 아동 친화적인 맑고 둥글둥글한 구글 'Gaegu' 손글씨 폰트를 적극 활용.
- 디자인 테마: 로즈 핑크(Rose Pink)와 옐로우(Warm Amber) 테마의 스케치북 북아트 아트 스타일.
- 정렬 및 레이아웃: 바구니들은 flex-wrap 혹은 grid를 활용해 화면 너비에 맞게 흐트러짐 없이 정돈되어 나열되어야 함. 바구니 내부의 딸기(🍓)들 역시 격자(Grid) 구조로 엉키지 않고 가독성 있게 배치될 것.

4. Tone (어조)
- 감성 피드백: "딩동댕! 아주 멋지게 해결했어! 🎉"와 같은 즉각적이고 밝은 피드백으로 어린이의 수학 효능감 극대화.
- 최종 환호: 10문제를 무사히 완주하면 커다란 🏆(왕관) 이모지와 함께 "친구야, 최고야!"라며 성취감을 크게 북돋아 주는 동적 팝업창 연출.

5. Audience (청중)
- 주요 사용자: 곱하기 수식을 바구니 묶음과 딸기의 시각적 수량 구조를 통해 직관적으로 받아들이고 싶어 하는 아동.
- 보조 사용자: 어린이의 구구단 복습 활동을 실시간 점수(0~100점) 및 진행 상태(상단 Dots)로 모니터링하려는 학부모 및 교사.

6. Response (핵심 요구사항 & 기능 사양)
- 문제 생성 알고리즘: 구구단 2단~9단 범위에서 중복되지 않는 10문제 자동 엄선. 상단 진행도 표시(Dot 10개) 및 실시간 점수(Score) 대시보드 연동.
- 비개입형 시각 교구 기능: N1 * N2 수식이 주어지면, 화면에 바구니 N1개를 그리고 각 바구니마다 딸기 N2개를 정렬하여 배치할 것. 딸기는 사용자가 터치하여 지우는 동작 없이 고정된 시각적 참조(Scaffolding) 자료로만 제공됨.
- 입력 흐름: 문제 로드와 동시에 입력 박스(ans-input)에 자동 포커스 처리. 모바일 수월성을 위해 inputmode="numeric" 및 확인 버튼 구성.
- 채점 및 에러 핸들링: window.onload 이벤트를 포함하여 DOM 요소가 완벽히 로드된 후 스크립트가 로딩되도록 null 포인터 예외 원천 차단. 정답 시 녹색 스타일 적용 및 다음 문제 자동 로드, 오답 시 빨간색 흔들기(Shake) 효과 및 유도 힌트 텍스트 제공.

7. Constraint (제약 사항)
- 모든 HTML, CSS(Tailwind CSS 내장), JavaScript가 반드시 단 한 개의 .html 파일에 구현되어야 함.
- 외부 이미지 URL을 일절 사용하지 않고, 이모지(🍓, 🧺) 및 Tailwind CSS 디자인만으로 시각적 풍부함을 연출할 것.

AI 기술을 활용해 아이들을 위한 나만의 교육용 도구를 손쉽게 만들어 보는 경험, 지금 바로 시작해 보세요!