받아쓰기 연습 웹 애플리케이션 제작을 위한 COSTAR 프롬프트

1. Context (배경)

초등학교 학생들을 위한 '받아쓰기 연습'용 웹 도구입니다. 학생들은 화면을 보며 정답을 입력하는 것이 아니라, 실제 종이 공책(10칸 공책)에 연필로 직접 쓰는 아날로그 방식의 학습을 수행합니다. 웹앱은 문제를 읽어주는 '도우미' 역할을 하며, 학습 후 스스로 정답을 확인할 수 있는 환경을 제공해야 합니다.

2. Objective (목표)

다음 기능을 포함한 단일 파일 React 애플리케이션을 생성하십시오:

• 급수별 데이터: 총 1회차부터 15회차까지, 각 회차당 10개의 문항을 포함합니다.

• 음성 재생(TTS): 문장을 클릭하면 한국어 음성으로 읽어줍니다. 띄어쓰기 단위로 약간의 휴지(pause)를 주어 아이들이 받아쓰기 편하게 합니다.

• 정답 확인 로직: 학생이 종이에 다 쓴 후 버튼을 눌러 정답을 확인합니다. 정답은 '10칸 공책' 디자인의 칸 안에 한 글자씩 배치되어 시각적으로 보여야 합니다.

• 학습 흐름: 문제를 듣고 -> 종이에 쓰고 -> 정답을 확인하고 -> 다음 문제로 넘어가는 직관적인 흐름을 유지합니다.

3. Style (스타일)

• UI 디자인: 밝은 파스텔톤(Sky blue, Emerald)을 사용하며, 아이들의 눈높이에 맞춘 둥근 버튼과 큰 아이콘(Lucide-react 활용)을 사용합니다.

• 공책 레이아웃: 정답 표시 시 빨간색 점선 가이드가 있는 10칸 공책 칸을 구현하여 시각적 흥미를 유발합니다.

• 반응형: 모바일과 태블릿에서도 잘 보이도록 Tailwind CSS를 활용한 반응형 레이아웃을 적용합니다.

4. Tone (어조)

• 친절하고 격려하는 어조의 텍스트를 사용합니다 (예: "정답을 확인해보세요!", "스스로 채점하기").

5. Audience (대상)

• 주 사용자: 초등학교 3학년 학생.

• 관리자: 가정에서 지도하는 학부모 혹은 교사.

6. Response (응답 형식)

• 단일 .jsx 파일로 작성하며 App을 기본 export로 설정합니다.

• 아래의 [DICTATION_DATA]를 소스 코드 내에 포함하십시오.

[DICTATION_DATA]

1회: ["생생하게 표현해요.", "꿀벌은 꽃송이를 돌아다니며", "터질 듯 말 듯 웃음보따리", "한나절만 더 간질이면", "간질간질 봄 햇살이", "마구 터트려 놓겠다.", "흠흠, 이게 무슨 냄새지?", "산속 그득 출렁이는", "어? 어느새 산꼭대기잖아?", "사뿐사뿐 땅을 밟자"] 2회: ["어머, 쟤는 꿈이 없나 봐.", "난생처음 마법의 숲에", "마법사에게 데려다주겠니?", "만들어 달라고 졸랐습니다.", "깊은 고민에 빠졌습니다.", "물에 젖으면 사라질 테니", "말도 잊지 않았습니다.", "가짜라는 걸 알았습니다.", "물로 녹여 없애 버렸습니다.", "더 높이 날아올랐습니다."] 3회: ["내 사연이 소개되면 좋겠다.", "집에서 겪었던 일이네요.", "문장을 알맞게 띄어 읽어야", "오랜만에 날씨가 맑습니다.", "하늘은 파랗습니다.", "꽃밭에 도착합니다.", "나비를 보며 손을 뻗습니다.", "빙그레 웃으십니다.", "햇볕이 따뜻합니다.", "부채를 주고받았습니다."] 4회: ["나쁜 기운을 없앨 수 있다.", "창포를 삶은 물에", "잘 익은 앵두는 빨갛습니다.", "바퀴 모양과 닮았습니다.", "단오날 풍습에는", "지혜가 담겨 있습니다.", "예절을 잘 지켜야 합니다.", "꼼꼼하게 살펴본 뒤에", "차례차례 발표하면", "딴생각을 하지 않습니다."] 5회: ["계획을 하나 세웠어요.", "우리만의 세계여행인 셈이죠.", "사진도 꼭 찍을 거예요.", "넘어져 울긴 했지만 말이죠.", "걱정은 잊고 느긋한 하루를", "음식을 갖다 주는 사이예요.", "입이 옆으로 벌어져", "밤하늘 어딘가에서", "저절로 웃게 되는 이름이죠.", "“카프카”를 외쳐요."] 6회: ["다리를 치료해 준 부분에서", "처마 밑에 집을 짓는지", "짜임새 있게 연결되지 않은", "마음이 느껴졌기 때문이다.", "중심 문장과 뒷받침 문장", "발명한 인공 재료입니다.", "녹이 슬지 않습니다.", "환경을 해치기도 합니다.", "널리 사용되기도 하지만", "덧붙여 설명하거나"] 7회: ["읽는 사람이 이해하기 쉽다.", "눈부신 토요일 오후였습니다.", "기분까지 상쾌했습니다.", "사고 싶은 게 많겠는걸.", "행사를 주최한 여러 단체", "천막 안과 밖에는", "팻말에 쓰인 글씨", "수많은 물건을 훑어보느라", "나 어때? 어른 같지 않아?", "어깨를 축 늘어뜨린 채"] 8회: ["빌려주는 건 무료거든.", "저는 돈이 한 푼도 없어요.", "무척이나 북적였습니다.", "저희를 믿으셔도 돼요.", "제자리에 서 있었습니다.", "잔뜩 들뜬 목소리였습니다.", "땀으로 범벅이 되어", "신발은 금세 버려졌습니다.", "웬일이냐? 새것만 좋아하더니", "딴청을 피웠습니다."] 9회: ["탐방 계획을 세워 볼까?", "새롭게 안 내용을 정리", "매미가 내뿜는 액체", "나무 밑에서 맞는 물방울", "볏짚으로 묶어 띄울 준비를", "꾸덕꾸덕할 때까지 말립니다.", "재료를 정성껏 손질하고", "햇볕과 바람을 쐬어", "고추와 숯은 잡균을 없애고", "냄새를 제거하는 역할"] 10회: ["감자 꽃이 하얗게 피었어요.", "고개를 갸웃했어요.", "감자 캐러 가자고 졸랐어요.", "감자가 수북이 쌓였어요.", "하나를 홱 던졌어요.", "두더지를 쫓아갔어요.", "깜짝 놀라 소리쳤어요.", "감자 밭을 휘둘러 보았어요.", "감자를 포기째 뽑았어요.", "주렁주렁 딸려 나왔어요."] 11회: ["햇볕이 쨍쨍 내리쬐는", "바짝바짝 말라버렸어요.", "물이 닿지 않았거든요.", "곰곰이 생각에 잠겼어요.", "작은 돌멩이를 하나씩", "물을 실컷 마실 수 있었다.", "단단한 껍데기를 까먹었지.", "땅속 보금자리에", "그냥 썩을 수도 있거든.", "이해가 되지 않았어."] 12회: ["까먹어도 괜찮으니까", "빠짐없이 찾아냈지.", "꽃망울이 맺힌 이른 봄날.", "자기 몫을 먹을 수 있어요.", "백 번씩 말했으니까.", "뺏기지 않으니까", "이런저런 걸 해 보았어.", "이게 웬일이야.", "등을 쓰다듬어 줬지.", "봄을 견디면 된다."] 13: ["위험에 처하게 되었다.", "다람쥐들이 힘을 합쳐", "다시 한번 정말 죄송해요.", "열 골을 넣은 적은 없었어.", "내 장미는 멀쩡하단다.", "잘 자라도록 가지치기하는", "우리 집에 와 보렴.", "여덟 살이 돼요.", "몇 살이세요?", "옮겨 심는 게 좋겠구나."] 14회: ["공이 계속 빗나가서", "한쪽 다리를 든 채", "까닭을 알아보고 싶다.", "기억이 떠오를 거예요.", "소화액을 만드는 데 쓰여요.", "몸속에 소금이 없다면", "생명을 유지할 수 없어요.", "얼지 않게 해주는 거예요.", "먼지가 날리지 않게", "하찮게 여겨서는 안 돼요."] 15회: ["한 걸음 더 가까워진", "아이스크림뿐만 아니라", "부딪칠 수 있기 때문이다.", "눈이 동그랗게 커진", "이 말이 튀어나왔다.", "쭈뼛쭈뼛 움직이며", "직접 주든 놓고 오든", "더욱 흐트러뜨리며", "물건을 떨어뜨려서", "쫓아오는 바람에"]