Show DEV: 차분한 타이핑 연습 앱을 ambient soundscapes와 함께 만들었습니다

Source: Dev.to

대부분의 타이핑 앱은 게임처럼 보입니다—리더보드, 아바타, 연속 기록, XP 바 등—참여를 유도하도록 최적화돼 있어 집중 연습에 초점이 맞춰져 있지 않죠. 저는 다른 종류의 도구가 필요했습니다: 마치 집중 블록처럼 느껴지는 타이핑 세션. 그 결과가 LoKey Typer 입니다.

Overview

LoKey Typer는 타이핑 연습을 위한 프로그레시브 웹 앱(PWA)으로, 선별된 연습문제와 분위기 사운드스케이프를 결합합니다. 브라우저에서 완전히 실행됩니다: 계정 없이, 클라우드 동기화 없이, 추적 없이.

Try it live:

Features

• Focus‑oriented exercises – 리듬과 정확성을 키우는 선별된 텍스트.
• Real‑life content – 실제로 입력하게 될 이메일, 코드 스니펫, 일상 텍스트.
• Competitive mode – 개인 최고 기록을 추적하는 타임드 스프린트(30 초 / 60 초 / 120 초).
• Daily set – 최근 성과에 맞춰 매일 새롭게 제공되는 연습문제.

Technical Details

• Stack: Vite + React + TypeScript (빠른 빌드, 엄격한 타입)
• PWA: 서비스 워커가 첫 로드 이후 완전 오프라인 사용을 가능하게 함
• Audio engine: 교차 페이딩 및 레이어링을 지원하는 Web Audio API
• Persistence: localStorage에 모든 통계와 진행 상황을 로컬에 저장
• Hosting: GitHub Actions를 통한 GitHub Pages(무상)

Ambient Audio

• 42개의 비리듬 사운드스케이프 트랙(비, 바람, 깊은 윙윙소리, 공간 톤)으로, 타이핑에 방해되지 않도록 설계됨.
• 엔진은 교차 페이딩, 볼륨 정규화, 매끄러운 루프를 처리함.
• 선택 가능한 기계식 타자기 키소리 효과가 실제 키 입력에 매핑됨.

Privacy & Offline Use

• 오프라인에서도 작동(비행기, 카페, 어디서든).
• 모든 플랫폼에서 네이티브 앱처럼 설치 가능.
• 서버 비용 제로, 쿠키 제로, 분석 제로, 제3자 스크립트 제로.
• 개인정보 보호정책: “우리는 아무것도 수집하지 않습니다.”

앱은 또한 Microsoft Store에서 가벼운 MSIX 패키지 형태로 제공되며, 호스팅된 PWA를 가리킵니다.

Availability

• Live app:
• Source code:

Feedback

피드백을 환영합니다—특히 타이핑 감각, 연습 내용, 그리고 분위기 오디오가 집중에 도움이 되는지 혹은 방해가 되는지에 대해 알려 주세요. 읽어 주셔서 감사합니다!