타자연습을 작은 도구가 아니라 하나의 연습 공간으로 만든 기록

처음에는 타자연습을 사이트 안의 작은 부가 기능 정도로 생각했다. 글자 몇 개를 보여주고, 사용자가 입력하면 속도와 정확도를 계산하는 정도라면 금방 만들 수 있을 것 같았다. 하지만 실제로 한국어 타자연습을 써보는 흐름을 따라가다 보니, 단순한 입력창과 결과 화면만으로는 연습이라는 감각이 거의 생기지 않았다. 한 문장을 끝낼 때마다 화면이 끊기거나, 첫 키를 누르자마자 카운트다운이 뜨거나, 다음 지문으로 넘어갈 때 입력창 포커스가 풀리는 순간 사용자는 연습을 멈추게 된다.

이 글은 Zero Human Studio의 타자연습 레이어를 만들며 어떤 문제를 발견했고, 어떤 원칙으로 다시 설계했는지 정리한 회고다. 특정 서비스를 복제하려는 목적이 아니라, 한국어 입력이라는 특수한 사용 경험을 웹에서 자연스럽게 다루기 위해 어떤 결정을 했는지 기록해두려 한다.

왜 타자연습이 필요했나

Zero Human Studio는 생활 계산기, 개발자 도구, 파일 변환 도구처럼 바로 쓸 수 있는 웹 유틸리티를 모으는 방향으로 출발했다. 그런데 도구만 나열한 사이트는 쉽게 얇아진다. 사용자가 한 번 계산하고 떠나는 페이지는 만들 수 있지만, 다시 찾아오게 만드는 반복 사용의 이유는 약하다.

타자연습은 그 반대에 가깝다. 매일 짧게 반복할 수 있고, 결과가 숫자로 남고, 사용자가 자기 기록을 다시 확인하고 싶어 한다. 특히 한국어 타자연습은 영어 WPM 계산만 가져와서는 부족하다. 한글은 자모가 조합되어 한 글자가 되고, IME 조합 중인 글자는 아직 완성된 입력이 아니다. 그래서 단순 문자 비교보다 더 조심스러운 처리와 피드백이 필요했다.

기획의 핵심: 연습은 끊기면 안 된다

초기 구현에서 가장 크게 드러난 문제는 흐름이었다. 기능은 있었지만, 연습이 이어지지 않았다. 한 문장을 끝낸 뒤 결과 패널이 커다랗게 나타나고, 다음 지문으로 가려면 버튼을 누르거나 화면을 다시 봐야 했다. 사용자는 손을 키보드에서 떼고, 시선을 옮기고, 다시 시작해야 했다.

그래서 원칙을 바꿨다.

• 첫 입력은 방해받지 않아야 한다.
• 카운트다운은 기본 흐름이 아니라 선택 기능이어야 한다.
• 한 지문을 끝내면 같은 자리에서 다음 지문이 나와야 한다.
• 입력창은 disabled 상태를 거치지 않아야 한다.
• 결과는 별도 화면보다 작은 인라인 피드백으로 충분해야 한다.
• 지문은 화면 밖으로 밀리지 않고, 긴 문장도 읽을 수 있어야 한다.

이 원칙을 적용하자 타자연습은 단순한 폼에서 조금씩 연습 공간에 가까워졌다.

구현에서 가장 많이 본 부분

기술적으로는 Next.js App Router 위에 클라이언트 컴포넌트로 입력 경험을 구성했다. 지문 공급, 세션 상태, 설정, 기록 저장, 입력 메트릭을 분리해두고, 모드별로 같은 무대 컴포넌트를 공유하는 방식이다.

핵심은 한국어 기준의 타수 계산이었다. 영어권 타자 사이트에서 흔히 쓰는 WPM은 한국어 사용자가 기대하는 타자연습 감각과 다르다. 그래서 내부 메트릭은 자모 단위의 정타 수를 기준으로 분당 타수를 계산하도록 했다. 완성된 글자만 보는 것이 아니라, 입력된 내용과 목표 지문을 비교해 정타 자모 수, 오타 자모 수, 정확도, 경과 시간을 함께 계산한다.

입력 상태에서는 React state 타이밍도 중요했다. 빠르게 한 문장을 붙여넣거나 마지막 글자를 입력하는 순간, 화면의 typed state가 아직 최신 값으로 반영되기 전 완료 로직이 실행될 수 있었다. 이 문제는 완료 함수가 이전 state를 읽지 않고, 방금 잘라낸 입력값을 직접 전달받도록 바꾸면서 해결했다.

지문과 단계 설계

연습 모드는 자리연습, 낱말연습, 단문연습, 장문/필사, 속도측정으로 나누었다. 하나의 랜덤 문장만 반복해서 보여주는 방식은 금방 지루해진다. 그래서 모드와 단계에 따라 콘텐츠 풀을 나누고, 섞인 순서를 커서로 따라가며 다음 지문을 공급하도록 했다. 사용자는 무작위 반복이 아니라 이어지는 연습처럼 느낄 수 있다.

도전단계는 200타부터 1200타까지의 목표를 시각적으로 비교할 수 있게 만들었다. 숫자 버튼만 나열하면 목표와 현재 성취가 잘 보이지 않는다. 그래서 목표 타수와 달성 타수를 뱃지로 표시하고, 전체 구간을 그라데이션 막대로 보여주며, 목표선과 현재 달성치를 한눈에 비교하도록 했다. 이 UI는 단순 장식이 아니라 사용자가 자신의 위치를 빠르게 이해하게 만드는 피드백 장치다.

가장 신경 쓴 UX 디테일

타자연습에서 작은 방해는 크게 느껴진다. 특히 다음 세 가지는 실제 사용감을 좌우했다.

첫째, 카운트다운이다. 준비 후 시작하는 흐름을 좋아하는 사용자도 있지만, 기본값으로 켜두면 첫 키를 누른 사람에게 갑자기 오버레이가 뜬다. 이건 연습을 돕는 기능이 아니라 방해가 된다. 그래서 카운트다운은 기본값을 끄고, 사용자가 명시적으로 켰을 때만 동작하게 했다.

둘째, 완료 후 전환이다. 문장 하나가 끝났다고 결과 화면으로 이동하면 연습 리듬이 끊긴다. 자동 다음 지문이 켜져 있을 때는 완료 상태로 전환하지 않고 즉시 다음 지문을 같은 위치에 넣었다. 입력창 포커스도 유지한다. 결과는 작은 배너로만 표시한다.

셋째, 지문 표시 영역이다. 긴 문장이나 낱말 묶음이 화면 밖으로 밀리면 사용자는 입력창보다 레이아웃 문제를 먼저 보게 된다. 그래서 지문 영역은 카드 안에 고정하고, 필요한 경우 내부 스크롤과 줄바꿈 규칙을 적용했다. 한국어 문장은 단어 단위 줄바꿈과 긴 문자열 대응이 모두 필요했다.

복제보다 중요한 것

타자연습이라는 분야에는 이미 익숙한 패턴이 많다. 단계, 자리연습, 낱말연습, 속도 측정, 기록 비교 같은 요소는 사용자가 기대하는 기본 문법이다. 하지만 웹에서 새로 만드는 서비스가 해야 할 일은 기존 경험을 그대로 베끼는 것이 아니라, 사용자가 왜 그 패턴에 익숙한지 이해하고 현재 제품의 맥락에 맞게 다시 구현하는 것이다.

Zero Human Studio의 타자연습은 캐릭터나 랭킹, 커뮤니티보다 로컬 기록과 반복 연습 흐름을 먼저 선택했다. 아직 공개 랭킹이나 로그인 기능은 없다. 대신 지금 단계에서는 익명 사용자도 바로 쓸 수 있고, 브라우저 안에서 기록을 남기며, 복잡한 가입 절차 없이 기본 연습을 할 수 있는 상태가 더 중요하다고 판단했다.

아직 개선할 점

현재 구현은 출발점에 가깝다. 앞으로 개선하고 싶은 부분은 분명하다.

• 최근 기록을 시간 흐름 그래프로 보여주기
• 정확도와 속도 균형에 따른 코칭 문구 제공
• 자주 틀리는 키나 자모를 기반으로 약점 연습 추천
• 장문/필사 콘텐츠의 분량과 카테고리 확장
• 모바일 입력 환경에서의 별도 UX 검증
• 선택적 로그인과 동기화, 공개 기록 제출 구조 검토

다만 이런 기능은 한 번에 넣기보다, 현재의 핵심 흐름이 안정된 뒤 쌓아가는 편이 낫다. 타자연습은 기능 수보다 매일 쓰는 흐름이 더 중요하기 때문이다.

마무리

이번 타자연습 구현에서 얻은 가장 큰 교훈은 간단하다. 입력 도구는 사용자의 손을 멈추게 하면 안 된다. 멋진 결과 화면보다 중요한 것은 다음 글자를 바로 칠 수 있는 상태다. 작은 웹 도구라도 실제 사용자의 리듬을 기준으로 다시 보면, 생각보다 많은 설계가 필요하다.

Zero Human Studio의 타자연습은 아직 완성된 제품이라기보다 계속 다듬는 연습장에 가깝다. 하지만 이 사이트가 단순 도구 목록을 넘어 반복해서 사용할 수 있는 작은 제품들을 품는 방향으로 가고 있다는 점에서, 중요한 기준점이 되었다.