미니 타이핑 레이싱 타수 측정 수식과 WPM CPM 계산 가이드

직접 해보기 →

한글 및 영문 타자 속도를 향상시키고 키보드 오타율을 줄이는 연습에서, 단순하고 지루한 반복 훈련을 탈피하여 게이밍 요소(Gamification)를 결합한 최고의 연습 도구가 바로 **미니 타이핑 레이싱 게임(Mini Typing Racer)**입니다.

화면 하단의 제시어를 키보드로 타이핑함과 동시에 WPM(Minute Word Count)과 CPM(Character Count) 수치를 실시간 연산하고, 정확도(Accuracy) 비율에 따라 화면 상단의 픽셀 레이싱카 트랙을 전진시키는 인터랙티브 타자 트레이닝 구조로 설계되어 있습니다. 본 글에서는 WPM/CPM 실시간 타수 측정 수식과 키보드 입력 동기화 알고리즘을 해설합니다.

---

1. WPM 및 CPM 실시간 타수 산출 수식 공식

타이핑 연습 시 분당 입력 글자 수(CPM)와 단어 수(WPM)를 소요 시간 t(초)와 올바르게 입력된 총 획수 N_char를 기반으로 산출하는 표준 공식은 다음과 같습니다:

[ \text{CPM} = \left( \frac{N_{\text{char}}}{t} \right) \times 60, \quad \text{WPM} = \frac{\text{CPM}}{5} ]

정확도(Accuracy) 및 레이싱 트랙 전진 수식:

• 정확도 (Accuracy %): 전체 입력 키 스트로크 N_total 중 백스페이스 수정을 포함한 오타 횟수 N_error를 차감한 비율 ((N_total - N_error) / N_total) * 100%로 계산합니다.
• 레이싱카 위치 X(%): 전체 예문 문장 길이 L 대비 현재 완료된 글자 수 i의 비율 (i / L) * 100%에 따라 픽셀 자동차 레이아웃의 left 좌표를 동적으로 갱신합니다.

---

2. 순수 자바스크립트 타자 레이서 엔진 소스

다음은 입력 문자를 비교하고 WPM 수치 및 레이싱카 위치를 갱신하는 타자 연습기 소스 코드입니다:

let startTime = null;
let totalTyped = 0;
let errorCount = 0;

function handleTypingInput(inputElement, targetText) {
  if (!startTime) startTime = Date.now();
  const currentVal = inputElement.value;
  const elapsedSeconds = Math.max(1, (Date.now() - startTime) / 1000);

  // 1. CPM / WPM 연산
  const typedLength = currentVal.length;
  const cpm = Math.round((typedLength / elapsedSeconds) * 60);
  const wpm = Math.round(cpm / 5);

  // 2. 레이싱카 이동 비율 계산
  const progressPercent = Math.min(100, (typedLength / targetText.length) * 100);
  document.getElementById('racing-car').style.left = progressPercent + '%';

  // 3. 정확도 계산
  let correctChars = 0;
  for (let i = 0; i < typedLength; i++) {
    if (currentVal[i] === targetText[i]) correctChars++;
    else errorCount++;
  }
  const accuracy = Math.round((correctChars / typedLength) * 100) || 100;

  return { cpm, wpm, accuracy, progressPercent };
}

[!NOTE] 매번 복잡한 타자 측정 로직을 직접 스크립팅할 필요 없이, 미니 타이핑 레이싱 게임 도구를 직접 플레이해 보세요. 한글 명언, 영문 문장 예문 선택과 함께 내 타자 속도(WPM/CPM)와 오타율을 측정하며 레이싱카를 트랙 끝까지 주행시킬 수 있습니다.

---

3. 타자 연습 시 속도 향상을 위한 퍼블리싱 지침

1. 한글 자음/모음 조합형 IME(Input Method Editor) 처리 주의: 한글 입력 시 글자 하나가 완성되기 전 초성/중성 결합 과정에서 keydown 이벤트가 중복 발행되는 현상이 생길 수 있습니다. isComposing 상태 플래그를 체크하거나 input 이벤트를 추적하여 매끄러운 한글 타수 측정을 보장해야 합니다.
2. 트랙 이동 CSS transform: translateX() 가속: 자동차 요소의 위치를 left 대신 transform: translateX() 속성으로 조절하면 하드웨어 GPU 가속이 적용되어 긴 문장을 빠르게 타격할 때도 60fps 프레임 저하 없이 매끄러운 자동차 애니메이션을 연출할 수 있습니다.