* 목차 *

2026년 4월 9일 목요일

[COSTAR] 초등 국어 '문장의 짜임' 수수께끼 생성 프롬프트

 

[COSTAR] 초등 국어 '문장의 짜임' 수수께끼 생성 프롬프트



이 프롬프트는 초등학생의 문해력 향상과 문장의 구조(어찌하다, 어떠하다, 무엇이다)를 학습시키기 위한 전용 도구입니다.

1. Context (배경)

  • 당신은 초등학교 저학년 국어 교육 전문가이자 창의적 사고를 돕는 퀴즈 설계자입니다.

  • 현재 학생들은 '누가/무엇이' + '어찌하다(동작)', '어떠하다(상태)', '무엇이다(정체)'라는 세 가지 문장 틀을 배우고 있습니다.

2. Objective (목표)

  • 학생들이 세 문장의 설명을 듣고 사물이나 생물의 정체를 유추할 수 있는 수수께끼를 생성합니다.

  • 각 수수께끼는 반드시 지정된 3단계 문장 구조를 엄격히 따라야 합니다.

3. Style (스타일)

  • 문장 1 (어찌하다): 동작과 움직임을 생생한 동사로 표현 (예: 하늘을 날아다닙니다, 꼬리를 흔듭니다).

  • 문장 2 (어떠하다): 성질과 상태를 묘사하는 형용사 위주 표현 (예: 털이 보들보들합니다, 색깔이 아주 화려합니다).

  • 문장 3 (무엇이다): 정체나 범주를 정의하는 명사형 표현 (예: 사람의 친구인 동물입니다, 겨울에 쓰는 방한 도구입니다).

4. Tone (톤앤매너)

  • 친절하고 따뜻하며, 학생들의 호기심을 자극하는 교육적인 어조를 유지합니다.

  • 설명(e) 부분은 학생이 정답을 맞혔을 때 칭찬해주거나 추가적인 지식을 전달하는 다정한 선생님의 목소리로 작성합니다.

5. Audience (타겟)

  • 초등학교 1~3학년 학생들 (어휘 수준을 이에 맞춤).

6. Response (응답 형식)

  • 결과물은 웹 애플리케이션의 데이터 배열에 즉시 추가할 수 있도록 아래의 JSON 객체 리스트 형식으로만 출력하세요.

[출력 예시]

[
  { 
    "s": "밤하늘에서 밝게 빛납니다. 모양이 동그랗고 노랗습니다. 밤을 비춰 주는 자연 위성입니다.", 
    "t": "달", 
    "e": "지구 주위를 도는 유일한 위성인 달을 잘 맞혔어요!" 
  }
]

7. 요청 사항

  • 위의 모든 규칙을 준수하여 새로운 수수께끼 **[숫자 입력, 예: 20]**개를 생성해 주세요.

  • 일상 속 사물, 곤충, 과일, 자연물 등 아이들이 친숙해하는 소재를 골고루 섞어주세요.

문장의 짜임 학습 웹앱 제작 프롬프트 (COSTAR Framework)

 

문장의 짜임 학습 웹앱 제작 프롬프트 (COSTAR Framework)


https://gemini.google.com/share/050f53e2ed3b


1. Context (배경)

초등학생들이 국어 시간에 배우는 '문장의 짜임(어찌하다, 어떠하다, 무엇이다)'을 재미있게 복습할 수 있는 교육용 도구가 필요합니다. 학생들은 문장의 마지막 서술어의 성격에 따라 세 가지 유형을 구분하는 법을 배워야 합니다.

2. Objective (목표)

  • 사용자가 접속할 때마다 전체 문제 은행(약 100개 권장)에서 무작위로 10문제를 추출하여 출제하는 퀴즈 앱을 제작합니다.

  • 10문제를 모두 풀면 즉시 점수를 산출합니다.

  • 마지막 화면에서는 모든 문제에 대한 정답 여부와 상세 해설을 보여주는 '오답 풀이' 기능을 포함합니다.

  • '다시 시작' 버튼을 누르면 새로운 10문제 세트가 무작위로 생성되어야 합니다.

3. Style (스타일)

  • 현대적인 웹 UI/UX: Tailwind CSS를 사용하여 깔끔하고 부드러운 디자인(라운드 코너, 그림자 효과 등)을 적용하세요.

  • 반응형 디자인: 모바일, 태블릿, PC 어디서든 최적화된 화면을 보여주세요.

  • 시각적 요소: Lucide-React 같은 아이콘 라이브러리를 사용하여 직관적인 인터페이스를 만드세요.

4. Tone (어조)

  • 초등학생이 대상이므로 친절하고 격려하는 어조를 사용하세요. (예: "와우! 문장의 달인이시네요!")

  • 퀴즈 진행 중에는 긴장감보다는 즐거움을 줄 수 있는 밝은 톤을 유지하세요.

5. Audience (대상)

  • 주 타겟은 초등학교 저학년 및 중학년 학생입니다.

  • 글자 크기는 충분히 커야 하며, 복잡한 메뉴 대신 직관적인 버튼 위주로 구성하세요.

6. Response (응답 형식)

  • 단일 파일 React 컴포넌트(One-file Component)로 작성하세요.

  • 데이터 구조는 masterData라는 이름의 배열 안에 객체 형태 { s: "문장", t: "유형", e: "해설" }로 포함하세요.

  • 모든 주석과 화면 표시 텍스트는 한국어로 작성하세요.

핵심 기능 요구사항

  1. 상태 관리: 시작 화면, 퀴즈 진행 화면, 결과 화면(오답 풀이 포함)의 3단계 상태를 관리할 것.

  2. 랜덤 로직: sort(() => Math.random() - 0.5) 등을 활용하여 문제 은행에서 10개를 무작위로 추출할 것.

  3. 오답 풀이: 사용자가 선택한 답과 실제 정답을 비교하여 시각적으로 구분(초록/빨강)해 보여줄 것.

  4. 해설 데이터: 각 문제 객체에 포함된 해설(e 필드)을 결과 화면에서 팁 형태로 노출할 것.

2026년 4월 8일 수요일

3학년 1학기 1단원 평가 웹앱 제작을 위한 CO-STAR 프롬프트

 

3학년 1학기 1단원 평가 웹앱 제작을 위한 CO-STAR 프롬프트



Context (배경) 너는 초등학교 3학년 과학 교육 전문가이자 웹 개발자야. 현재 3학년 1학기 과학 1단원 학습을 마친 학생들이 자신의 실력을 점검할 수 있는 재미있고 직관적인 단원평가 웹 애플리케이션을 만들려고 해.

Objective (목표) 학생들이 10개의 문제를 풀고, 즉시 점수를 확인하며, 틀린 문제를 다시 복습할 수 있는 단일 파일(HTML/JS/Tailwind CSS) 기반의 웹앱을 제작해줘.

Style (스타일)

  • 디자인: 초등학생의 눈높이에 맞춰 파스텔 톤의 밝은 색상(주황, 하늘색)을 사용하고, 둥근 모서리와 큰 버튼을 배치해줘.

  • 말투: "안녕 친구들!", "정말 잘했어!"와 같이 친근하고 격려하는 한국어 어조를 사용해줘.

Tone (어조) 학습 동기를 유발하는 긍정적이고 활기찬 분위기여야 해. 틀렸을 때도 "다시 한번 생각해보자!"와 같이 부드럽게 안내해줘.

Audience (청중) 태블릿이나 PC를 사용하는 초등학교 3학년 학생들과 이를 지도하는 교사.

Response (응답 형식 및 요구사항)

  • 파일 구조: 모든 HTML, CSS(Tailwind CSS 라이브러리 사용), JavaScript를 하나의 .html 파일에 담아줘.

  • 문제 구성: 교과서 및 실험 관찰 내용과 유사한 4지 선다형 객관식 10문제 (힘의 작용, 지레의 원리, 과학적 관찰/분류/측정, 지구의 모습 등 포함).

  • 기능:

    1. 인트로 화면: 시작 버튼과 단원명이 보임.

    2. 퀴즈 화면: 한 번에 한 문제씩 보여주며, 진행 바(Progress Bar)를 상단에 배치.

    3. 결과 화면: 100점 만점 기준 점수 표시, "참 잘했어요!" 등 점수별 칭찬 문구.

    4. 복습 기능: '틀린 문제 다시 보기' 버튼을 통해 틀린 문제의 지문과 정답, 해설(Rationale)만 모아서 보여줌.

  • 에셋: 아이콘은 이모지(Emoji)를 적극 활용하고, 수식이나 과학 기호가 필요하면 LaTeX 형식을 사용해줘.

주사위 & 계산기 웹앱 제작 프롬프트 (CO-STAR 기법)

 

주사위 & 계산기 웹앱 제작 프롬프트 (CO-STAR 기법)


https://gemini.google.com/share/ef7159f7ce1a


1. Context (배경)

초등학교 수학 수업 시간(3학년 1학기 덧셈과 뺄셈 단원)에 학생들이 게임판 위에서 주사위를 던져 이동하고, 그 과정에서 발생하는 복잡한 연산을 도와줄 수 있는 디지털 도구가 필요합니다. 교실의 스마트 패드 환경에서 학생들이 쉽고 재미있게 사용할 수 있어야 합니다.

2. Objective (목표)

화면이 왼쪽과 오른쪽으로 2분할된 단일 파일(HTML/JS/CSS) 기반 웹 애플리케이션을 제작하십시오. 왼쪽에는 인터렉티브한 주사위가, 오른쪽에는 사용하기 쉬운 계산기가 배치되어야 합니다.

3. Style (스타일)

  • UI 디자인: 깔끔하고 현대적인 스타일. Tailwind CSS를 사용하여 시각적 완성도를 높입니다.

  • 색상 대비: 왼쪽(주사위)은 밝은 배경(White/Blue-50)을 사용하여 학습지의 느낌을 주고, 오른쪽(계산기)은 어두운 배경(Dark Slate/Black)을 사용하여 기계적인 계산기 느낌을 강조하십시오.

  • 애니메이션: 주사위를 던질 때 실제 굴러가는 듯한 0.5초 내외의 부드러운 회전 효과를 적용하십시오.

4. Tone (어조)

  • 친근하고 명확하며, 초등학생이 보기에 직관적이어야 합니다.

  • 복잡한 텍스트보다는 아이콘(Emoji)과 큰 버튼을 활용하여 "도구"로서의 목적에 충실하십시오.

5. Audience (대상)

  • 주 사용자: 초등학교 3학년 학생 (터치 조작이 미숙할 수 있음).

  • 환경: 학교에서 사용하는 태블릿 PC 또는 스마트 패드 (반응형 레이아웃 필수).

6. Response (핵심 요구 사항)

[기술적 명세]

  • 단일 파일: 모든 HTML, CSS, JavaScript 로직을 하나의 .html 파일 안에 포함하십시오.

  • 2분할 레이아웃: flex를 사용하여 화면을 정확히 세로로 2분할합니다. (모바일/세로 모드 대응 포함)

[주사위 기능]

  • 비주얼: 실제 주사위와 동일한 점(Dot) 배열(1~6)을 SVG 또는 CSS로 구현하십시오.

  • 로직: Math.random()을 사용하여 1부터 6까지의 숫자가 균등한 확률로 나오게 설정하십시오.

  • 상호작용: '던지기' 버튼은 누르기 쉽게 크게 배치하십시오.

[계산기 기능]

  • 기본 연산: 사칙연산(+, -, ×, ÷)과 소수점 입력을 지원해야 합니다.

  • 기록 기능: 현재 계산 중인 수식(예: 125 + 34)을 결과값 위에 작은 글씨로 표시하는 '히스토리' 영역을 만드십시오.

  • 편의성: 큰 숫자 버튼, 'C'(초기화), 'DEL'(한 글자 삭제) 버튼을 포함하십시오.

[가이드라인]

  • 외부 이미지 링크를 사용하지 말고, 아이콘은 이모지나 CSS로 대체하십시오.

  • 가독성이 좋은 폰트(Pretendard 등)를 기본으로 설정하십시오.

2026년 4월 7일 화요일

COSTAR 기반 주간 일정 브리핑 최적화 프롬프트

 

COSTAR 기반 주간 일정 브리핑 최적화 프롬프트

[Context: 맥락]

당신은 최고 경영진이나 전문직 종사자를 보좌하는 15년 경력의 베테랑 수석 비서입니다. 당신의 상사(사용자)는 바쁜 비즈니스 일정, 개인적 자산 관리, 그리고 소중한 가족 및 개인 일정을 동시에 관리하고 있습니다. 당신의 임무는 흩어진 일정들을 하나로 모아 완벽한 우선순위를 제안하는 것입니다.

[Objective: 목표]

사용자의 연동된 모든 캘린더 데이터를 분석하여, 향후 7일간의 일정을 전략적으로 브리핑하십시오. 단순한 정보 전달을 넘어 자산 관리의 기회 포착, 업무 리스크 방지, 중요한 개인사(기념일 등) 챙기기를 위한 비서의 제언이 반드시 포함되어야 합니다.

[Style: 스타일]

  • 격조 있고 정중한 말투: "사장님" 또는 사용자가 지정한 호칭을 사용하며, 격조 있는 비즈니스 화법을 구사하십시오.

  • 분석적이고 세심한 시각: 일정 간의 이동 시간, 준비물, 마감 기한 등을 날카롭게 짚어내십시오.

[Tone: 톤]

  • 신뢰감 있고 든든한 톤을 유지하십시오. 아침의 여유를 주는 따뜻한 인사와 더불어, 업무 보고 시에는 오차 없는 명확함을 유지하십시오.

[Audience: 대상]

  • 시간 효율성을 최우선으로 하며, 다방면의 일정을 한눈에 파악하여 전략적 의사결정을 내리고자 하는 바쁜 현대인.

[Response: 응답 형식 및 규칙]

  1. 품격 있는 인사: 요일, 계절, 날씨에 어울리는 정중한 첫 마디.

  2. 주간 흐름 요약: 이번 주의 성격을 정의하는 한 문장(예: "중요 계약이 집중된 결실의 주간입니다").

  3. 데일리 상세 브리핑: (오늘부터 7일간) 요일별 일정을 비서가 보고하듯 대화체로 정리.

  4. 전략적 비서의 조언:

    • 비즈니스/금융: 회의 준비물, 마감 기한, 투자 관련 이슈 등.

    • 개인/가족: 기념일, 건강 관리, 가족 행사 등 비서의 센스 있는 제언.

  5. 응원의 마무리: 활기찬 성취를 기원하는 마무리 인사.

  6. 주의사항: 가독성을 위해 굵게 표시와 불렛 포인트를 적극 활용할 것.


[실행 명령]

"위 가이드라인에 따라 연결된 내 모든 달력 정보를 분석하여 오늘부터 1주일간의 주간 브리핑을 시작해 주세요." 

2026년 4월 3일 금요일

용수철저울 눈금 읽기 시뮬레이터 제작을 위한 COSTAR 프롬프트

 

용수철저울 눈금 읽기 시뮬레이터 제작을 위한 COSTAR  프롬프트 


https://gemini.google.com/share/67442dc3d3d3


1. 개요 (Context)

  • 대상: 초등학교 3학년 과학 '1. 힘과 우리 생활' 단원 학습자

  • 학습 목표: 1. 물체의 무게에 따라 용수철이 일정하게 늘어나는 규칙성을 관찰한다. 2. 용수철저울의 작은 눈금 한 칸이 의미하는 무게(20g)를 이해하고 정확히 읽는다.

  • 핵심 교구: 500g 용수철저울, 120g 장난감 자동차

2. 시각적 요구사항 (Visuals)

  • 디자인: 파스텔톤의 부드러운 실험실 느낌 (Tailwind CSS 활용).

  • 저울 구조: - 0g~500g 범위의 눈금.

    • 100g 단위마다 숫자가 써진 큰 눈금.

    • 큰 눈금 사이를 5등분하는 작은 눈금 (즉, 한 칸 = 20g).

  • 애니메이션: 물체를 고리에 거는 순간 용수철이 반동을 주며 부드럽게 늘어나는 물리 효과 적용.

  • 눈금 확대경: 바늘이 멈춘 위치를 우측에 크게 보여주어 학생들이 작은 눈금 칸수를 직접 셀 수 있게 함.

3. 기능적 요구사항 (Functionality)

  • 인터랙티브 드래그: 하단의 실험 물체들을 드래그하여 저울 고리에 도킹(Docking)하는 기능.

  • 눈금 계산 가이드: - 예: 장난감 자동차(120g) 측정 시 -> "100g(큰 눈금)에서 한 칸(20g) 더 내려왔어요!"라고 단계별로 안내.

  • 원리 설명창: "100g을 5칸으로 나누었으므로 한 칸은 20g입니다"라는 설명을 시각적(나눗셈 도식)으로 제시.

  • 영점 조절: 실제 저울처럼 사용 전 영점을 맞추는 듯한 인터랙션 포함.

4. 기술적 사양 (Technical)

  • 단일 HTML 파일 (JS 기반 SVG 동적 생성).

  • 터치 환경(태블릿)에서도 원활한 드래그 앤 드롭 지원.

  • 모든 텍스트는 초등학교 3학년 수준의 쉬운 용어 사용.

2026년 4월 2일 목요일

빗면 시뮬레이터 제작을 위한 COSTAR 프롬프트

 

빗면 시뮬레이터 제작을 위한 COSTAR 프롬프트

https://gemini.google.com/share/3d21c2728e1b

1. Context (맥락)

  • 대상: 초등학교 3학년 학생 (과학 '힘과 우리 생활' 단원 학습 중)

  • 주제: 빗면을 이용할 때의 이점 (힘의 크기 변화)

  • 배경 지식: 직접 들어 올리는 것보다 빗면을 이용하면 더 적은 힘이 든다는 원리를 실험으로 증명해야 함.

2. Objective (목표)

  • 사용자가 빗면의 높이를 조절함에 따라 변화하는 힘의 크기를 시각적·수치적으로 보여주는 시뮬레이터 제작.

  • '직접 들어 올리기'와 '빗면 이용하기'의 힘(g)을 실시간으로 비교함.

  • 자동차가 아래에서 위로 이동하는 애니메이션을 통해 실험의 과정을 생생하게 재현함.

3. Style (스타일)

  • 비주얼: 'Jua' 폰트를 사용한 귀엽고 친근한 디자인. 장난감 자동차(🚗)와 용수철저울 이모지 및 그래픽 활용.

  • 물리적 사실성: 실제 실험처럼 용수철저울이 자동차의 진행 방향(빗면과 평행)으로 배치되어야 하며, 힘이 클수록 용수철이 더 길게 늘어나는 애니메이션 포함.

4. Tone (톤)

  • 호기심을 자극하고 실험 결과를 명확하게 칭찬해주는 긍정적인 톤.

  • "와! 힘이 아주 조금 들어요!", "경사가 가파르면 힘이 더 필요해요!" 등의 구어체 피드백.

5. Audience (청중)

  • 복잡한 삼각함수(sin, cos)를 모르는 10세 어린이.

  • 따라서 물리 법칙은 내부 로직으로만 처리하고, 겉으로는 '높이'와 '힘(g)'의 상관관계만 직관적으로 노출함.

6. Response (응답 형식 및 요구사항)

  • 기술적 사양: 단일 HTML 파일 (Tailwind CSS, SVG 애니메이션, Vanilla JS).

  • 필수 기능:

    1. 높이 슬라이더: 빗면의 기울기를 실시간으로 변경.

    2. 실험 시작 버튼: 클릭 시 자동차가 빗면 하단에서 상단으로 스르륵 이동.

    3. 수치 표시: 직접 들기(120g 고정) 대비 빗면의 힘을 'g' 단위 숫자로 실시간 표시.

    4. 동적 게이지: 힘의 크기에 따라 색상이 변하는(초록-파랑-주황) 막대 그래프.

    5. 반응형 레이아웃: 모바일과 데스크톱에서 모두 잘 보이도록 설계

지레 시뮬레이터 제작을 위한 COSTAR 프롬프트

 

지레 시뮬레이터 제작을 위한 COSTAR 프롬프트

https://gemini.google.com/share/4358e34b34d4

1. Context (맥락)

  • 대상: 초등학교 3학년 학생 (과학 '힘과 우리 생활' 단원 학습 중)

  • 상황: 학생들이 지레의 원리(받침점의 위치에 따른 힘의 크기 변화)를 실험실 밖에서도 직관적으로 체험할 수 있는 디지털 학습 도구가 필요함.

  • 기존 배경: 수평 잡기 원리는 이미 학습했으나, 받침대를 움직여 물체를 들어 올리는 도구로서의 '지레' 개념에 집중해야 함.

2. Objective (목표)

  • 사용자가 받침대의 위치를 자유롭게 조절할 수 있는 인터랙티브 시뮬레이터를 제작함.

  • 받침대가 물체에 가까워질수록 필요한 힘이 줄어든다는 핵심 원리를 시각적으로 증명함.

3. Style (스타일)

  • 디자인: 초등학생 눈높이에 맞춘 밝고 친근한 테마. (예: Jua 폰트, 파스텔톤 배경, 이모지 활용)

  • 어조: 친절하고 격려하는 말투. (예: "와! 아주 가벼워요!", "조금 더 힘을 내봐요!")

  • 시각화: 수치보다는 직관적인 '게이지'와 '아이콘 크기 변화'를 우선시함.

4. Tone (톤)

  • 재미있고 탐구 중심적인 분위기.

  • 복잡한 물리 공식보다는 "움직이면 변한다"는 현상에 집중하게 함.

5. Audience (청중)

  • 과학적 용어(작용점, 힘점 등)가 아직 낯선 10세 어린이.

  • 따라서 '물체', '받침점', '누를 때 드는 힘'과 같은 쉬운 용어를 사용함.

6. Response (응답 형식 및 요구사항)

  • 기술 스택: 단일 HTML 파일 (Tailwind CSS, Vanilla JS 포함).

  • 핵심 UI 요소:

    • 삼각형 모양의 명확한 '받침점'.

    • 무게를 나타내는 '물체(📦)'와 힘을 나타내는 '손(✋)'.

    • 실시간으로 변하는 '힘 게이지'와 큰 숫자 표시.

  • 인터랙션 규칙:

    • 슬라이더로 받침대 위치 조절.

    • 필요한 힘의 크기에 따라 '손(✋)' 아이콘의 크기를 비례적으로 확대/축소.

    • 힘의 크기에 따라 게이지 색상 변경 (초록-노랑-빨강).

    • 학습 효과를 높이는 실시간 메시지 창 포함.

평면도형 개념 확인 퀴즈 생성 프롬프트

 

평면도형 개념 확인 퀴즈 생성 프롬프트

https://gemini.google.com/share/86c08bcf3750

1. Context (배경)

초등학교 3학년 1학기 1단원 '평면도형' 단원을 마친 학생들의 성취도를 확인하려고 합니다. 학생들은 선분, 직선, 반직선의 용어 정의와 각, 직각, 직각삼각형, 직사각형, 정사각형의 성질을 혼동하지 않고 구분할 수 있어야 합니다.

2. Objective (목표)

교과서의 '배운 내용을 확인해요' 코너와 유사한 수준의 객관식 10문제를 생성하십시오.

3. Style (스타일)

  • 형식: 객관식 4지 선다형.

  • 구성: 각 문제마다 질문, 선택지 4개, 정답, 그리고 오답/정답에 대한 상세한 '설명(Rationale)'과 '힌트'를 포함하십시오.

4. Tone (어조)

  • 초등학생이 이해하기 쉬운 친절하고 평이한 구어체를 사용하십시오.

  • "무엇일까요?", "~해 보아요"와 같은 부드러운 말투를 유지하십시오.

5. Audience (대상)

초등학교 3학년 학생입니다.

6. Response (핵심 요구 사항)

[문제 구성 내용]

  1. 선분, 직선, 반직선 (3문제): 각각의 정의와 차이점(끝점이 있는지, 어느 방향으로 늘어나는지)을 묻는 문제.

  2. 각과 직각 (2문제): 각의 정의(한 점, 두 반직선)와 종이를 접었을 때 생기는 직각의 특징.

  3. 직각삼각형 (2문제): 직각삼각형의 정의와 도형 판별.

  4. 직사각형과 정사각형 (3문제): 네 각이 모두 직각인 성질, 네 변의 길이가 모두 같은 성질을 비교하여 묻는 문제.

[기술적 가이드]

  • 개념 설명이 필요한 경우 LaTeX 기호(예: $\angle$, ㄱㄴㄷ 등)를 적절히 활용하십시오.

  • 힌트는 정답을 바로 알려주지 않고, 교과서에서 배운 핵심 단서를 상기시키도록 작성하십시오.

2026년 4월 1일 수요일

세 자리 수 세로셈 뺄셈 학습 웹앱 제작 프롬프트

 

세 자리 수 세로셈 뺄셈 학습 웹앱 제작 프롬프트

https://gemini.google.com/share/200447f5f685


1. Context (배경)

초등학교 3학년 1학기 2단원 '세 자리 수의 덧셈과 뺄셈'을 학습하는 학생들을 위한 교구입니다. 학생들은 특히 '받아내림'이 있는 뺄셈에서 자릿수를 헷갈려 하는 경우가 많으므로, 시각적으로 자릿수가 완벽하게 정렬된 세로셈 환경에서 연습이 필요합니다.

2. Objective (목표)

사용자가 세 자리 수 뺄셈 문제를 세로셈 형식으로 풀고, 정확한 자릿수에 숫자를 입력하며 즉각적인 피드백을 받을 수 있는 단일 파일(HTML/JS/CSS) 웹 앱을 제작하십시오.

3. Style (스타일)

  • 디자인: 따뜻하고 차분한 붉은색/분홍색 톤(빨간색 포인트)의 친근한 UI를 적용하십시오. Tailwind CSS를 사용하여 둥근 레이아웃과 부드러운 버튼을 구현하십시오.

  • 레이아웃: 숫자들이 오른쪽 끝(일의 자리)을 기준으로 수직으로 완벽하게 정렬되어야 합니다.

  • 폰트: 숫자는 가독성과 정렬을 위해 고정 폭 폰트(Courier New 등)를 사용하고, 안내 문구는 귀여운 손글씨체를 사용하십시오.

4. Tone (어조)

  • 친절하고 격려하는 선생님의 말투를 사용하십시오.

  • 특히 낮은 점수를 받은 학생에게는 "괜찮아, 다시 해보자"와 같은 따뜻한 위로를 건네고, 높은 점수에는 "뺄셈 박사님"과 같은 극찬을 해주십시오.

5. Audience (대상)

초등학교 3학년 학생 및 세 자리 수 연산 기초가 필요한 어린이입니다.

6. Response (핵심 요구 사항)

[기능적 요구 사항]

  1. 난이도별 문제 생성 (10문제):

    • 1~3번: 받아내림이 없는 쉬운 문제.

    • 4~7번: 받아내림이 1회 있는 보통 문제.

    • 8~10번: 받아내림이 2회(연속) 있는 어려운 문제.

    • 항상 첫 번째 수 > 두 번째 수가 되도록 설정하여 음수가 나오지 않게 하십시오.

  2. 세로셈 인터페이스:

    • 두 숫자 사이에 빼기(-) 기호를 적절히 배치하십시오.

    • 숫자 아래에 계산 결과를 입력할 수 있는 4개의 개별 입력 칸을 배치하십시오.

  3. 스마트 입력 시스템:

    • 사용자가 일의 자리부터 입력하도록 유도하십시오.

    • 한 칸에 숫자 하나를 입력하면 자동으로 왼쪽 자릿수로 포커스가 이동해야 합니다.

    • 백스페이스 입력 시 오른쪽 자릿수로 포커스가 돌아가야 합니다.

  4. 결과 및 오답 노트:

    • 10문제 종료 후 점수와 맞춤형 격려 멘트를 표시하십시오.

    • '오답 풀이' 화면에서 사용자가 입력한 값과 실제 정답을 세로셈 형식으로 비교해 보여주십시오.

[기술적 요구 사항]

  • HTML, CSS(Tailwind CSS), JavaScript를 하나의 .html 파일에 포함하십시오.

  • 별도의 이미지 파일 없이 이모지(Emoji)와 인라인 스타일만 사용하십시오.

  • 다양한 화면 크기(태블릿, 모바일, PC)에서 깨지지 않는 반응형 디자인을 적용하십시오.