성경 타자연습기 만들기
랜덤 성경구절로 타자연습 & 정확도 측정
🎯 학습 목표
- ✓HTML/CSS/JavaScript 기본 구조 이해하기 (코드를 몰라도 OK!)
- ✓Cursor에게 단계별로 기능을 요청하는 프롬프팅 연습
- ✓브라우저에서 즉시 실행되는 앱의 원리 체험
- ✓첫 번째 완성작 만들어보기!
🔧 사용 기술
HTML
화면 구조 만들기
(버튼, 텍스트 등)
CSS
예쁘게 꾸미기
(색상, 크기, 배치)
JavaScript
동작하게 만들기
(타자 체크, 점수 계산)
💡 중요: 이 기술들의 문법을 외울 필요 없습니다! Cursor에게 한국어로 말하면 Cursor가 알아서 코드를 작성합니다.
💻 실습: 단계별 진행
STEP 1프로젝트 시작하기 (5분)
📁 폴더 준비
- 바탕화면에
bible-typing폴더 생성 - Cursor 실행 → File → Open Folder → 방금 만든 폴더 선택
- 왼쪽 사이드바 빈 공간에 마우스 올리기 → [New File] 버튼 클릭
- 파일명 입력:
index.html
🤖 첫 번째 프롬프트
방금 만든 index.html 파일 안에서 Cmd/Ctrl + K 누르기
성경 타자연습 앱을 만들고 싶어요. 먼저 기본 HTML 구조를 만들어주세요. 제목은 "성경 타자연습", 부제는 "말씀을 타이핑하며 암송해보세요"로 해주세요. 타이핑할 성경 구절을 보여줄 영역과, 사용자가 입력할 텍스트 박스, 시작 버튼을 만들어주세요.
→ Cursor가 코드를 생성하면 Accept 버튼 클릭 또는 Tab 키
👀 결과 확인하기
파일 저장 (Cmd/Ctrl + S) → 파일 탐색기에서 index.html 더블클릭 → 브라우저에서 열림!
STEP 2성경 구절 데이터 추가하기 (5분)
📖 성경 구절 배열 만들기
JavaScript에서 여러 성경 구절을 배열로 저장합니다.
🤖 두 번째 프롬프트
Cmd/Ctrl + K 눌러서
JavaScript로 성경 구절 배열을 만들어주세요. 요한복음 3장 16절, 시편 23편 1절, 잠언 3장 5-6절 등 5개 정도의 유명한 구절을 포함해주세요. 각 구절은 {verse: "성경 위치", text: "본문 내용"} 형태로 만들어주세요. 그리고 "시작" 버튼을 누르면 랜덤으로 하나를 선택해서 화면에 보여주도록 해주세요.
🎯 프롬프팅 포인트
- ✓ "5개 정도" → 구체적인 숫자
- ✓ {verse, text} → 데이터 구조를 명시
- ✓ "시작 버튼을 누르면" → 동작 시점 명확히
- ✓ "랜덤으로" → 어떻게 선택할지 지정
STEP 3타자 체크 기능 만들기 (10분)
🤖 세 번째 프롬프트
Cmd/Ctrl + K 눌러서
사용자가 텍스트 박스에 입력할 때마다 실시간으로 정답과 비교해주세요. 맞게 입력한 글자는 초록색으로, 틀린 글자는 빨간색으로 표시해주세요. 입력한 글자 수와 정확도(%)를 실시간으로 계산해서 보여주세요. 성경 구절을 다 입력하면 "완료! 정확도: XX%" 메시지를 알림창으로 띄워주세요.
🔍 동작 원리 설명 (선택사항)
1. 이벤트 리스너: 사용자가 키보드를 누를 때마다 감지
2. 문자열 비교: 입력한 텍스트 vs 정답 텍스트를 한 글자씩 비교
3. 스타일 적용: 맞으면 초록색, 틀리면 빨간색
4. 정확도 계산: (맞은 글자 수 / 전체 글자 수) × 100
⚠️ 만약 Cursor가 잘 이해하지 못한다면?
프롬프트를 더 작게 쪼개기:
- "먼저 사용자가 입력할 때마다 console.log로 출력해줘"
- "이제 입력한 텍스트와 정답을 비교해줘"
- "비교 결과에 따라 색깔을 바꿔줘"
- "정확도를 계산해서 보여줘"
STEP 4타이머와 WPM 기능 추가하기 (10분)
⏱️ 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디자인 개선하기 (10분)
🎨 이제 예쁘게 꾸며볼까요?
기능은 완성했으니, 이제 사용자 경험(UX)을 높여봅시다.
🤖 다섯 번째 프롬프트
앱을 더 아름답게 만들어주세요: - 전체 배경에 은은한 그라데이션 추가 - 카드 형태의 컨테이너로 내용 감싸기 - 버튼에 호버 효과와 그림자 추가 - 성경 구절 텍스트는 크고 읽기 편한 폰트로 - 정확도가 90% 이상이면 금색 별 이모지 표시
🔥 도전 과제 (시간이 남는다면)
- ✨ 키보드 누를 때마다 소리 효과 추가
- 🏆 최고 기록을 localStorage에 저장하여 표시
- 📊 진행률을 프로그레스 바로 시각화
- 🎯 난이도 선택 (짧은 구절 / 긴 구절)
✅ 완성 체크리스트
💎 이 실습에서 배운 프롬프팅 원칙
1. 작은 단계로 쪼개기
"타자연습기 만들어줘" (X)
→ HTML 구조 → 데이터 → 타자 체크 → 타이머 → 디자인 (O)
2. 구체적인 숫자/색상 제시
"성경 구절 몇 개" (X)
→ "5개 정도", "초록색", "90% 이상" (O)
3. 예시 제공하기
{verse: "성경 위치", text: "본문"} 형태로
→ AI가 정확히 이해하고 따라함
4. 즉시 테스트하기
각 단계마다 브라우저에서 확인
→ 문제 발견 시 바로 수정 요청
🔧 자주 발생하는 문제와 해결법
Q: 코드를 수정했는데 브라우저에 반영이 안 돼요!
A: 파일을 저장(Cmd/Ctrl + S) 후 브라우저 새로고침(F5 또는 Cmd/Ctrl + R)
Q: Cursor가 내가 원하는 대로 안 만들어줘요!
A: 더 구체적으로 설명하거나, 잘못된 부분만 콕 집어서 "이 부분을 이렇게 바꿔줘" 요청
Q: 에러 메시지가 뜨는데 무슨 뜻인지 모르겠어요!
A: Cmd/Ctrl + L로 Cursor 채팅 열고 "이 에러가 무슨 뜻이고 어떻게 고쳐야 해?" 물어보기
🚀 다음 세션 예고
📖 안식일학교 성경퀴즈 앱
방금 만든 타자연습기에서 한 단계 더 나아가, JSON 파일에서 문제를 읽어오는 퀴즈 앱을 만들어봅니다.
- ✓ JSON 형식의 데이터 구조 이해
- ✓ 객관식 문제와 정답 체크 로직
- ✓ 점수 계산 및 결과 화면
- ✓ 문제 은행을 쉽게 수정하는 방법
👨🏫 강사 노트
⏰ 시간 배분: 기능 구현 30분, 디자인 & 마무리 10분. 시간이 부족하면 디자인은 과제로
🎯 핵심 메시지: "여러분이 방금 한국어로 말한 게 그대로 앱이 되었어요!"
💬 참여 유도: 중간중간 "지금까지 잘 따라오고 계신가요?" 확인. 손들어 보기
🔄 에러 대응: 에러는 자연스러운 것! 함께 Cursor에게 물어보며 해결하는 과정 보여주기
📸 완성 공유: 완성한 분들 화면 캡처해서 단톡방에 공유 → 동기부여
🏠 과제 안내: 성경 구절을 자신의 교회에 맞게 바꿔보기 (암송 구절 등)