타자연습기 만들기
재미있는 타이핑 게임을 직접 만들어봅니다
⌨️ HTML 파일 하나로 작동하는 타자연습기를 만들고 점점 발전시켜봅니다
📋 실습 개요
타자연습기를 단계별로 발전시켜봅니다. 처음에는 간단하게 시작하고, 점점 게임성과 재미 요소를 추가합니다.
1단계
기본 타자연습
2단계
시간제한 + 점수
3단계
게임화
1기본 타자연습기 만들기
💬 요청 메시지
"간단한 한글 타자연습기를 만들어주세요.
기능:
- 화면에 연습할 문장 표시
- 입력창에 타이핑
- 맞으면 초록색, 틀리면 빨간색으로 표시
- 다음 문장 버튼
연습 문장 10개 정도 포함해주세요.
HTML 파일 하나로 만들어주세요."
🔧 개선 요청 예시
"글씨 크기를 더 크게 해주세요"
"입력창을 화면 중앙에 배치해주세요"
"틀린 글자에 밑줄 효과 추가해주세요"
🎨 예상 결과물
연습할 문장
빠른 갈색 여우가 뛰어넘는다
2시간제한 & 점수 시스템 추가
💬 요청 메시지
"타자연습기에 게임 요소를 추가해주세요.
추가 기능:
- 60초 타이머
- 타자 속도 측정 (타/분)
- 정확도 표시 (%)
- 점수 시스템
- 시작/재시작 버튼
상단에 타이머, 속도, 정확도를 표시해주세요."
🔧 개선 요청 예시
"시간이 10초 남으면 타이머를 빨간색으로 바꿔주세요"
"타자 속도에 따라 등급을 보여주세요 (초급/중급/고급)"
"결과 화면을 더 화려하게 만들어주세요"
⏱️ 추가되는 요소들
60초
타이머
350타/분
타자 속도
98.5%
정확도
1,250점
점수
3완전한 게임으로 발전!
💬 요청 메시지
"타자연습기를 완전한 게임으로 만들어주세요!
추가 기능:
- 난이도 선택 (쉬움/보통/어려움)
- 떨어지는 단어 잡기 모드
- 레벨 시스템
- 콤보 보너스
- 효과음 (웹 오디오 API)
- 랭킹 저장 (로컬스토리지)
게임처럼 재미있게 만들어주세요!"
🔧 개선 요청 예시
"단어가 떨어지는 속도를 레벨에 따라 조절해주세요"
"10콤보 달성하면 화면에 이펙트 보여주세요"
"목숨 3개 시스템 추가해주세요"
"배경 음악 추가해주세요"
🎮 게임 요소들
떨어지는 단어 모드
콤보 & 레벨 시스템
📝 연습 문장 아이디어
쉬움 (짧은 문장)
- • 오늘 날씨가 좋습니다
- • 안녕하세요 반갑습니다
- • 커피 한 잔 주세요
보통 (일반 문장)
- • 빠른 갈색 여우가 게으른 개를 뛰어넘는다
- • 타자 연습을 열심히 하면 실력이 늡니다
- • 오늘 하루도 행복한 하루 되세요
어려움 (긴 문장)
- • 프로그래밍은 문제를 해결하는 창의적인 활동입니다
- • 인공지능 기술이 빠르게 발전하고 있습니다
특수 (영어/특수문자)
- • The quick brown fox jumps!
- • Hello, World! 123
- • email@example.com
🏆 추가 도전 과제
도전 1: 영어 타자연습 모드
한글/영어 전환 기능을 추가해보세요!
도전 2: 멀티플레이어
친구와 대결할 수 있는 2인 모드를 추가해보세요!
도전 3: 코드 타이핑
프로그래밍 코드를 따라 치는 모드를 추가해보세요!
💡 실습 팁
작게 시작하기
처음부터 완벽한 기능을 넣지 말고, 기본부터 시작하세요
자주 테스트하기
기능 추가할 때마다 브라우저에서 확인하세요
에러는 AI에게
에러가 나면 그대로 복사해서 AI에게 보여주세요