차분하게 타자를 연습하고 싶은 사람을 위한 문장형 타자 웹앱입니다.
복잡한 기능보다, 입력 흐름과 감각을 편안하게 만드는 데 집중했습니다. ☕
ttalkkak은 문장을 따라 입력하면서 속도와 정확도를 함께 확인할 수 있는 작은 타자 연습 도구입니다.
- 무작위 문장 제시
- 실시간 CPM/정확도 계산
- 한글 자모 단위 오타 확인
- 폰트/테마 커스터마이징
짧게 켜고 연습하기 좋은, 가벼운 리듬의 웹앱을 목표로 만들었습니다.
- 문장 기반 타자 연습
public/phrase.json에 있는 문구를 랜덤으로 불러와 현재 문장과 다음 문장을 보여줍니다. - 실시간 지표 확인 현재 CPM, 정확도(%), 최고 CPM을 즉시 확인할 수 있습니다.
- 한글 입력에 맞춘 오타 판정
hangul-js를 활용해 자모 단위로 비교하기 때문에, 한글 입력 중 발생하는 미세한 오타도 자연스럽게 감지합니다. - 설정 저장
선택한 폰트와 테마, 최고 기록은
localStorage에 저장되어 다음 접속에서도 이어집니다. - 키보드 중심 사용성
문장 이동(
PgUp/PgDn)과 선택자 조작 등 자주 쓰는 동작을 키보드로 편하게 다룰 수 있습니다. ⌨️
- 깨지지 않는 한글 폰트
- 다크/라이트/시스템/터미널/텔넷 테마
- 기록 초기화 컨텍스트 메뉴
- React
- Vite
- hangul-js
- gh-pages
Node.js 환경에서 아래 순서로 실행할 수 있습니다.
- 의존성 설치
pnpm install- 개발 서버 실행
pnpm dev- 프로덕션 빌드
pnpm build- 빌드 결과 미리보기
pnpm preview- 배포
pnpm run deploysrc/App.jsx: 타자 로직, 점수 계산, 선택 UIsrc/App.css: 테마/레이아웃/상호작용 스타일public/phrase.json: 연습 문장 데이터public/manifest.json: PWA 메타 정보