타자연습기 만들기
속도 측정, 정확도 체크 기능이 있는 타자 연습 앱
🎯 학습 목표
- ✓텍스트 비교 및 실시간 피드백 구현하기
- ✓타이머와 통계 계산 로직 이해하기
- ✓사용자 경험(UX)을 고려한 인터페이스 디자인
- ✓두 번째 완성작 만들기!
🔧 사용 기술
HTML
텍스트 영역과
입력 필드 구성
CSS
색상으로 피드백
(초록색/빨간색)
JavaScript
타이머, 정확도
계산 로직
💡 중요: 계산기보다 조금 더 복잡하지만, Cursor에게 단계별로 요청하면 쉽게 완성할 수 있습니다!
💻 실습: 단계별 진행
STEP 1프로젝트 시작하기 (5분)
📁 폴더 준비
- 바탕화면에
typing-practice폴더 생성 - Cursor 실행 → File → Open Folder → 방금 만든 폴더 선택
- 파일명:
index.html생성
🤖 첫 번째 프롬프트
Cmd/Ctrl + K 누르기
타자연습 앱을 만들고 싶어요. 기본 HTML 구조를 만들어주세요. 제목은 "타자 연습", 부제는 "빠르고 정확하게!"로 해주세요. 연습할 텍스트를 보여줄 영역과, 사용자가 입력할 큰 텍스트 박스, 시작 버튼을 만들어주세요.
STEP 2연습 텍스트 데이터 추가하기 (5분)
📝 텍스트 배열 만들기
업무에 자주 쓰이는 문장이나 전문 용어를 배열로 저장합니다.
🤖 두 번째 프롬프트
JavaScript로 연습 텍스트 배열을 만들어주세요. "삼육대학교는 1906년에 설립된 기독교 종합대학교입니다.", "건강한 영성, 탁월한 지성, 책임 있는 인성을 갖춘 인재 양성을 목표로 합니다." 등 5개 정도의 문장을 포함해주세요. 시작 버튼을 누르면 랜덤으로 하나를 선택해서 화면에 보여주도록 해주세요.
STEP 3실시간 타자 체크 기능 (10분)
🤖 세 번째 프롬프트
사용자가 텍스트 박스에 입력할 때마다 실시간으로 정답과 비교해주세요. 맞게 입력한 글자는 초록색으로, 틀린 글자는 빨간색으로 표시해주세요. 입력한 글자 수와 정확도(%)를 실시간으로 계산해서 보여주세요. 연습 텍스트를 다 입력하면 "완료! 정확도: XX%" 메시지를 알림창으로 띄워주세요.
🔍 동작 원리 설명
1. 이벤트 리스너: 키보드를 누를 때마다 감지
2. 문자열 비교: 입력 텍스트 vs 정답을 한 글자씩 비교
3. 스타일 적용: 맞으면 초록색, 틀리면 빨간색
4. 정확도 계산: (맞은 글자 수 / 전체 글자 수) × 100
STEP 4타이머와 WPM 기능 추가하기 (5분)
⏱️ WPM이란?
Words Per Minute = 1분당 타자 수
타자 속도를 측정하는 국제 표준 단위
🤖 네 번째 프롬프트
시작 버튼을 누르면 타이머가 시작되도록 해주세요. 화면에 경과 시간을 초 단위로 표시해주세요. 완료했을 때 WPM(분당 타자 수)을 계산해서 함께 표시해주세요. WPM 계산식: (입력한 글자 수 / 5) / (소요 시간(초) / 60)
💡 실제 예시
• 50글자 입력, 30초 소요
• WPM = (50 / 5) / (30 / 60) = 10 / 0.5 = 20 WPM
평균 타자 속도: 40-60 WPM / 전문 타자수: 80-120 WPM
STEP 5디자인 개선하기 (5분)
🎨 이제 예쁘게 꾸며볼까요?
기능은 완성했으니, 이제 사용자 경험(UX)을 높여봅시다.
🤖 다섯 번째 프롬프트
앱을 더 아름답게 만들어주세요: - 전체 배경에 은은한 그라데이션 추가 - 카드 형태의 컨테이너로 내용 감싸기 - 버튼에 호버 효과와 그림자 추가 - 연습 텍스트는 크고 읽기 편한 폰트로 - 정확도가 90% 이상이면 금색 별 이모지 표시
✅ 완성 체크리스트
💎 이 실습에서 배운 프롬프팅 원칙
1. 작은 단계로 쪼개기
"타자연습기 만들어줘" (X)
→ HTML 구조 → 데이터 → 타자 체크 → 타이머 → 디자인 (O)
2. 구체적인 숫자/색상 제시
"몇 개의 문장" (X)
→ "5개 정도", "초록색", "90% 이상" (O)
3. 실시간 피드백 요청
"입력할 때마다", "실시간으로"
→ AI가 이벤트 리스너를 자동으로 구현
4. 즉시 테스트하기
각 단계마다 브라우저에서 확인
→ 문제 발견 시 바로 수정 요청
🔧 자주 발생하는 문제와 해결법
Q: 타자를 쳐도 색깔이 안 바뀌어요!
A: "입력할 때마다 실시간으로"라는 키워드를 꼭 넣어서 다시 요청
Q: 정확도 계산이 이상해요!
A: "정확도 = (맞은 글자 수 / 전체 글자 수) × 100 으로 계산해줘" 명시
Q: 타이머가 멈추지 않아요!
A: "입력을 완료하면 타이머를 멈춰줘" 추가 요청
🚀 다음 세션 예고
📇 전화번호부 검색 앱
지금까지는 단순한 데이터였다면, 이제는 배열과 객체를 활용한 복잡한 데이터 구조를 다뤄봅니다.
- ✓ 배열에 여러 사람의 정보 저장하기
- ✓ 이름/부서로 검색하는 필터 기능
- ✓ 카드 형태의 UI 컴포넌트
- ✓ 실제 업무에 활용 가능한 전화번호부
👨🏫 강사 노트
⏰ 시간 배분: 기능 구현 25분, 디자인 5분. 속도 차이가 크므로 빠른 분들은 도전 과제 제시
🎯 핵심 메시지: "실시간 피드백"이 사용자 경험의 핵심!
💬 참여 유도: 완성한 분들끼리 WPM 경쟁 유도 → 재미 + 동기부여
🔄 에러 대응: 색깔이 안 바뀌는 경우 가장 많음. 이벤트 리스너 개념 간단히 설명
🏠 과제 안내: 업무 관련 전문 용어나 자주 쓰는 문장으로 연습 텍스트 바꿔보기