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