타자연습기 만들기
완성 앱 미리보기속도 측정, 정확도 체크 기능이 있는 타자 연습 앱
"사용자의 입력에 실시간으로 반응하는 인터랙티브한 웹앱을 만들어봅니다."
세션 개요
학습 목표
동작 원리
실습 단계
📁 폴더 준비
바탕화면에 typing-practice 폴더 생성 Cursor 실행 → File → Open Folder → 방금 만든 폴더 선택 파일명: index.html 생성
🤖 첫 번째 프롬프트 (구조)
Cmd/Ctrl + K 누르기
타자연습 앱을 만들고 싶어요. 기본 HTML 구조를 만들어주세요. 제목은 "타자 연습", 부제는 "빠르고 정확하게!"로 해주세요. 연습할 텍스트를 보여줄 영역과, 사용자가 입력할 큰 텍스트 박스, 시작 버튼을 만들어주세요.
🤖 두 번째 프롬프트 (데이터)
연습 문장 데이터 추가
자바스크립트 배열에 비즈니스 격언이나 IT 용어 문장 10개를 넣어주고, 랜덤하게 하나씩 보여줘.
🤖 세 번째 프롬프트 (로직)
실시간 타자 체크 및 피드백
사용자가 입력할 때마다 글자 단위로 비교해서 맞으면 초록색, 틀리면 빨간색으로 표시해줘. 다 치면 다음 문장으로 넘어가게 해줘.
🤖 네 번째 프롬프트 (기능)
타이머와 통계
입력을 시작하면 타이머가 돌고, 완료하면 걸린 시간과 WPM(분당 타자수), 정확도를 계산해서 모달창으로 보여줘.
완성 체크리스트
- 제시어가 랜덤하게 표시됨
- 입력 시 오타가 붉은색으로 표시됨
- 완료 시 정확도와 속도가 계산됨
- 다시하기 버튼으로 게임을 리셋할 수 있음
자주 묻는 질문 (FAQ)
Q.한글 입력 시 오류가 있어요.
A.한글은 조합형 문자라 입력 중(composing) 상태 처리가 필요할 수 있습니다. "compositionstart", "compositionend" 이벤트를 활용하거나, 단순 비교 로직을 보완해야 합니다.
Q.타이머가 멈추지 않아요.
A.clearInterval 함수가 제대로 호출되었는지 확인하세요. 게임이 끝나는 조건문 안에 타이머 정지 코드가 있어야 합니다.
준비사항
- •Session 2 완료
- •새로운 프로젝트 폴더 생성
사용 기술
💎 프롬프팅 핵심 원칙
- •A. 작은 단계로 쪼개기: "타자연습기 만들어줘" (X) → HTML 구조 → 데이터 → 타자 체크 → 타이머 → 디자인 (O)
- •B. 구체적인 숫자/색상 제시: "몇 개의 문장" (X) → "5개 정도", "초록색", "90% 이상" (O)
- •C. 실시간 피드백 요청: "입력할 때마다", "실시간으로" → AI가 이벤트 리스너를 자동으로 구현
- •D. 즉시 테스트하기: 각 단계마다 브라우저에서 확인 → 문제 발견 시 바로 수정 요청
전화번호부 검색 앱
다음 단계로 넘어가기
Instructor Notes (강사 노트)
시간 배분
기능 구현 25분, 디자인 5분. 속도 차이가 크므로 빠른 분들은 도전 과제(타자 게임 등)를 제시하세요.
핵심 메시지
"실시간 피드백"이 사용자 경험의 핵심입니다! 사용자의 행동에 즉각 반응하는 앱을 만드는 즐거움을 느끼게 해주세요.
참여 유도
완성한 분들끼리 WPM 경쟁 유도 → 재미 + 동기부여
에러 대응
색깔이 안 바뀌는 경우 가장 많음. 이벤트 리스너(input event) 개념을 간단히 설명해주세요.
과제 안내
업무 관련 전문 용어나 자주 쓰는 문장으로 연습 텍스트 바꿔보기