타자 연습 웹 애플리케이션 기획안

프로젝트 개요

• 프로젝트명: DevTyper
• 목적: 사용자가 실전 코드를 통해 타이핑 실력을 키울 수 있는 웹 애플리케이션을 제공
• 주요 타겟 사용자: 타자 실력을 향상하고자 하는 초급 및 중급 개발자, 코딩 초보자

목표

1. 실전 코드를 기반으로 한 타자 연습을 통해 개발자들에게 유익한 연습 환경 제공
2. 타이핑 정확도 및 속도를 측정하여 사용자의 실력 향상 여부를 객관적으로 확인할 수 있도록 지원
3. 반복된 연습을 기록하여 사용자 스스로 타자 실력을 체계적으로 관리 가능하게 함

주요 기능

• 랜덤 코드 제공: GitHub API를 통해 JavaScript 레포지토리에서 코드 조각을 무작위로 가져와 연습에 활용
• 타이핑 연습 기능: 사용자가 코드를 따라 입력할 수 있는 텍스트 영역 제공
• 정확도 및 WPM 측정: 사용자가 입력한 코드와 제공된 코드의 정확도를 분석하고, 타이핑 속도(WPM)를 계산
• 타이머: 타이핑 시작 시 타이머가 자동으로 작동하며 일시 정지/재개 가능
• 로컬 스토리지 기록 관리: 로컬 스토리지에 타이핑 연습 결과를 저장하고, 사용자가 연습 기록을 확인할 수 있도록 함

기술 스택

• 프론트엔드: React
• 스타일링: CSS
• API: GitHub API
• 데이터 저장: 로컬 스토리지

화면 구성

1. 홈 화면

   • 타이핑 연습 기능 설명 및 사용법
   • "시작하기" 버튼으로 타자 연습 페이지로 이동

2. 타자 연습 화면

   • 랜덤으로 제공되는 코드가 표시되는 영역
   • 사용자가 입력하는 텍스트 영역
   • 타이머 및 정확도, WPM 표시
   • 새로운 코드 가져오기 및 타이머 일시 정지 기능 제공

3. 기록 조회 화면

   • 타자 연습 결과 기록을 보여주는 테이블 형태로 구성
   • 날짜, 정확도, WPM을 표시하여 연습 진행 상황을 한눈에 확인할 수 있도록 함

기대 효과

• 실제 코드 기반 학습: 단순 타이핑 연습이 아닌 실전 코드 타이핑을 통해 학습 효과 증대
• 자기 관리 지원: WPM 및 정확도를 기록하여 실력 향상 여부를 지속적으로 파악 가능
• 편리한 접근성: 웹 브라우저만 있으면 언제 어디서든 사용 가능