(작성 중)Typing Game 만들기
💡 활용 팁
• 아래 프롬프트에서 핵심 키워드나 문구 등 조건을 바꿔서 사용해 보세요.
• 활용한 AI 도구 및 학습 정도에 따라 결과물은 다르게 생성됩니다. 원하는 결과물이 나올 때까지 AI에게 추가적인 조건을 제시하며 대화를 이어가 보세요.
📌 Tip 1. 어휘 엑셀만 있으면 우리 교재 맞춤 게임을 만들 수 있습니다.
기본 프롬프트에 교재명, 레슨 목록이 함께 정리된 어휘 Excel 파일만 첨부하면 됩니다. 컬럼 구성(레슨번호 / 영단어 / 한국어뜻 / 예문 / 음원 경로 등)에 맞춰 데이터를 넣으면 AI가 단일 HTML 파일로 완성된 게임을 만들어줍니다. 배경 이미지·효과음·이모지 등 기본 에셋은 별도로 제공하니 처음 만드는 분도 바로 시작할 수 있습니다.
📌 Tip 2. 만들어진 게임, 부분 수정은 프롬프트 따로 씁니다.
게임을 한 번 만든 뒤 수정이 필요할 때는 목적에 따라 프롬프트를 구분해서 쓰면 좋습니다.
배경 이미지나 효과음처럼 에셋만 바꿀 때는 🔵 에셋 교체 프롬프트를,
낙하 속도·점수 체계·콤보 기준 같은 게임 로직을 바꿀 때는 🟡 로직 수정 프롬프트를 씁니다. 하나의 프롬프트로 모든 걸 하려다가 원하지 않는 부분까지 바뀌는 경우를 방지할 수 있습니다.
📌 Tip 3. 변수명 목록을 참고하면 수정 지시가 훨씬 정확해집니다.
문서 하단의 내장 에셋 변수명 목록(BG_IMAGES, SFX_CORRECT, EMOJIS.happy 등)을 보면 어떤 요소가 어떤 이름으로 관리되는지 한눈에 파악하실 수 있습니다. 수정 프롬프트 작성 시 이 변수명을 직접 언급하면 AI가 정확하게 해당 요소만 찾아서 바꿔주기 때문에, 특히 같은 HTML 파일을 여러 교재 버전으로 파생시킬 때 유용합니다.
<기본 프롬프트>
아래 사양으로 영어 타이핑 게임을 단일 HTML 파일로 만들어줘.
파일은 더블클릭으로 로컬 브라우저에서 바로 실행 가능해야 해.
▣ 교재 정보
- 교재명: [예: 동아출판 초등학교 영어 5학년]
- 레슨 수: [예: 12개]
- 레슨 제목 목록:
Lesson 1. [제목]
Lesson 2. [제목]
... (전체 목록)
▣ 어휘 데이터
첨부한 Excel 파일 기준으로 추출해줘.
컬럼 구성: 레슨번호 / 영단어 / 한국어뜻 / 예문(영어) / 예문(한국어) / 단어음원경로 / 예문음원경로
▣ 게임 구조
화면 3개: 홈(설정) → 게임 → 결과
[홈 화면]
- 좌측: 녹색 세로 패널 (게임 타이틀 + 교재 정보)
- 우측: 단원 선택(2열 그리드), 학습 모드, 연습 개수, 세션 기록, START 버튼
- 레슨 버튼: 번호(녹색)와 제목을 2행으로 표시
- 학습 모드: 단어 모드 / 문장 모드
- 연습 개수: 슬라이더 + 숫자 입력 (10~100, 기본 20)
[게임 화면]
- 상단 HUD: 점수 / 진행(n/목표) + 모드 / 나가기 버튼
- 게임 배경: 랜덤 배경 이미지 + 반투명 딤처리(rgba 0,0,0,0.38)
- 단어/문장 카드가 위에서 아래로 낙하
· 단어 모드: 최대 3개 동시, 18초 낙하
· 문장 모드: 최대 2개 동시, 30초 낙하
· 카드는 서로 겹치지 않게 x좌표 분산 배치
· 낙하 72% 지점: 카드 빨간 테두리 + focus 음원 재생(볼륨 0.35)
· 낙하 85% 지점: DEADLINE 라인, 여기 도달 시 miss 처리
- 카드 디자인: 흰 배경(rgba 255,255,255,0.93), 2.5px 테두리, 그림자
· 단어: 영어(굵게 크게) + 한국어뜻(작게 회색)
· 문장: 영어(굵게) + 한국어 번역(작게 회색)
- 하단 입력창(큰 폰트 bold) + 입력 버튼, Enter로도 제출
- 점수 체계: 시작 1000점, 정답 +50, 오답/미스 -30
· 5연속 정답마다 배율 +1 (×2, ×3...)
- 정오답 플래시: 우상단 크게 표시 (+50, -30 등)
[결과 화면]
- 최종점수, 정답수, 오답/미스수, 최대콤보 표시
- 다시하기 / 레슨선택으로 버튼
▣ 이모지 피드백 (첨부 이미지 base64 내장)
- 게임 첫 정답: emoji14_wink_sparkle.png (1.6초)
- 연속 3정답 이상(매번): emoji1, emoji6, emoji9, emoji20 중 랜덤 (1.8초)
- 연속 3오답 이상(매번): emoji22, emoji5, emoji15, emoji4 중 랜덤 (1.8초)
- 새 이벤트 발동 시 이전 이모지 즉시 교체
- 결과 화면에서는 이모지 표시 없음
▣ 오디오
- 정답 효과음: correct.mp3 (볼륨 0.8) — base64 내장
- 오답 효과음: incorrect.mp3 (볼륨 0.8) — base64 내장
- deadline 경고음: focus.mp3 (볼륨 0.35) — base64 내장
- 정답 시 TTS: Web Speech API (en-US, rate 0.85)
· 정답 처리 시점에 텍스트를 capturedText로 즉시 고정 후 발화
· onvoiceschanged 전역 할당 금지 → setInterval 재시도 방식 사용
▣ 기술 규칙 (필수 준수)
1. 단일 .html 파일, 외부 CDN/서버 없이 로컬 실행 가능
2. 이미지·음원 전부 base64로 HTML에 내장
3. 모든 CSS는 .wd-app 래퍼 클래스로 스코핑
4. 금지: position:fixed, z-index>100, innerHTML/outerHTML,eval, fetch, XMLHttpRequest, tag selector(*{} html{} body{})
5. DOM 조작: createElement + textContent/appendChild만 사용
6. 스크롤 방지: .wd-app에 overflow:hidden, width:100%, height:100% 적용.
<body> 태그는 인라인 스타일로
margin:0; padding:0; overflow:hidden; width:100%; height:100%; 처리
(태그 셀렉터 html{} body{} CSS 작성 금지)
7. 카드 겹침 방지: 스폰 시 기존 카드 x좌표와 카드폭+여백 이상 차이 확인,
50회 시도 후 균등분할 fallback
▣ 첨부 파일 목록(예시)
- 어휘 Excel 파일
- 배경 이미지 5장 (bg_1.png ~ bg_5.png)
- 이모지 이미지 10장
- 효과음 3개 (correct.mp3, incorrect.mp3, focus.mp3)
<🔵 에셋만 교체할 때, 프롬프트>
첨부한 word_dash.html 에서 [항목]을 첨부한 [파일명]으로 교체해줘.
교체 항목 예시:
- "배경 2번(설원)을 첨부한 new_bg.png로 바꿔줘"
- "correct 효과음을 첨부한 new_correct.mp3로 바꿔줘"
- "emoji11_heart_eyes를 첨부한 new_emoji.png로 바꿔줘"
- "Lesson 3 단어 목록을 아래 내용으로 수정해줘: ..."
<🟡 게임 로직만 수정할 때, 프롬프트>
첨부한 word_dash.html 에서 아래 항목을 수정해줘.
수정 예시:
- "정답 점수를 +50 → +100으로 변경"
- "낙하 속도를 단어 18초 → 15초로 변경"
- "콤보 배율 기준을 5연속 → 3연속으로 변경"
- "문장 모드 최대 동시 낙하 개수를 2 → 3으로 변경"
- "DEADLINE 위치를 85% → 80%로 변경"
참고: 내장 에셋 변수명 목록
변수 내용
BG_IMAGES[0~4] 배경 이미지 5장
SFX_CORRECT 정답 효과음
SFX_INCORRECT 오답 효과음
SFX_FOCUS deadline 경고음
EMOJIS.wink 첫 정답 이모지
EMOJIS.happy[0~3] 연속 정답 이모지 4종
EMOJIS.wrong[0~3] 연속 오답 이모지 4종