AI 생성 코드 시대에 나는 인간의 최고 타이핑 속도를 기록하기 위해 타이핑 게임을 만들었다

Source: Dev.to

I built DevType – 프로그래머를 위한 타이핑 게임을 만들었습니다.
Python, JavaScript, TypeScript, Go, Rust와 같은 실제 코드를 입력하고, WPM을 측정하며, 전 세계 순위에서 경쟁하세요.

👉 지금 플레이하세요:

왜 이것을 만들었는가

인류의 코딩 속도는 이미 정점을 찍었을지도 모른다

GitHub Copilot, ChatGPT, Claude는 근본적으로 우리가 코드를 작성하는 방식을 바꾸고 있다.

어느 날 문득 생각했다:

이 순간이 인류가 역사상 가장 빠르게 코드를 타이핑하고 있는 순간일지도 모른다.

몇 년 후 AI가 대부분의 코드를 작성하게 되면, 개발자는 “타이핑하는 사람”에서 “AI를 지시하는 사람”으로 변모할 것이다. 검토하고, 지시하고, 미세 조정한다. 키보드를 두드리는 데 쓰는 시간은 필연적으로 줄어들 것이다.

그래서 나는 다음을 하고 싶다:

• 기록 – 인류의 최고 타이핑 속도 포착
• 축하 – 수년간 쌓아온 근육 기억을 기리기
• 보존 – 이 순간을 사라지기 전에 저장하기

일반적인 타이핑 테스트가 부족한 이유

표준 타이핑 테스트는 영어 문장을 입력하도록 합니다. 하지만 프로그래머는 다릅니다.

타이핑

const handler = async (req, res) => { …

는 “The quick brown fox.”를 입력하는 것과 완전히 다릅니다.

프로그래밍에는 다음이 필요합니다:

• 특수 문자: [], {}, =>, ::, &&
• 정확한 들여쓰기
• 언어별 구문 패턴

DevType은 실제 코드를 입력하는 능력을 테스트합니다.

DevType이란?

프로그래머를 위한 코드‑타이핑 연습 게임.

🎮 핵심 기능

📊 성장 시각화

• WPM 및 정확도 – 타이핑 속도와 정밀도 측정
• 점수 시스템 – 속도, 정확도, 난이도, 콤보를 기반으로 계산
• 활동 히트맵 – GitHub‑스타일 활동 그래프
• 진행 차트 – 시간에 따른 점수 / WPM / 정확도 / 최대 콤보 추적

🌍 전 세계와 경쟁

• 글로벌 랭킹 – 전 세계 프로그래머와 경쟁
• 국가 플래그 – 리더보드에 국가를 표시
• 공개 프로필 – 성과를 공유

🌐 지원 언어 8가지

English, Japanese, Chinese, Spanish, Portuguese, German, French, Italian.

기술 스택

프론트엔드

백엔드 및 인프라

개발 도구

아키텍처

┌─────────────────────────────────────────────────────┐
│                     AWS Amplify                     │
├─────────────────────────────────────────────────────┤
│  Next.js 15 (App Router)                             │
│   ├─ Server Components (RSC)                       │
│   ├─ Client Components ("use client")               │
│   └─ API Routes                                     │
├─────────────────────────────────────────────────────┤
│  Supabase                                           │
│   ├─ PostgreSQL (problems, game_results, profiles) │
│   ├─ Auth (GitHub, Google OAuth)                    │
│   └─ Storage (avatars)                              │
└─────────────────────────────────────────────────────┘

Source: …

도전 과제 및 해결 방안

1️⃣ 자연스러운 타이핑 엔진 구축

도전 과제 – 자동 들여쓰기, 특수 문자, 다중 라인 입력 등 코드 전용 패턴을 처리하는 타이핑 경험을 만드는 것.

해결 방안 – 다음과 같은 맞춤형 타이핑 엔진을 구축함:

• 선행 들여쓰기를 자동으로 채워줌 (사용자가 직접 입력할 필요 없음)
• 커서 위치를 문자 단위로 추적
• “5자 = 1단어” 규칙을 사용해 WPM을 계산
• 탭과 스페이스와 같은 엣지 케이스 처리

// Simplified typing‑engine snippet
const handleKeyPress = (key: string) => {
  const expected = code[currentIndex];

  if (key === expected) {
    // Correct
    combo++;
    correctCount++;
  } else {
    // Mistake
    combo = 0;
    mistakeCount++;
  }

  currentIndex++;
  updateStats();
};

2️⃣ 고품질 코드 문제 생성

도전 과제 – 다섯 가지 언어에 걸쳐 수백 개의 현실적인 코드 스니펫을 만들고, 난이도와 테스트 가능한 패턴을 다양하게 제공해야 함.

해결 방안 – Claude API를 활용해 문제를 자동 생성하고, 품질과 적합성을 보장하기 위해 일부를 직접 선별함. 파이프라인:

1. Claude에게 짧고 독립적인 코드 스니펫(5 – 30 줄)을 요청.
2. 간단한 설명과 난이도 평가를 함께 요청.
3. 결과를 Supabase에 저장하고, 린터를 실행해 문법을 검증.

3️⃣ 국제화 (i18n)

도전 과제 – UI와 문제 설명을 일관되게 유지하면서 8개 언어를 지원해야 함.

해결 방안 – next‑intl과 로케일별 JSON 파일을 사용. 모든 정적 UI 문자열을 추출하고, 동적 문제 내용은 영어로 생성한 뒤 Claude의 번역 기능으로 번역하여 각 로케일별로 캐시함.

4️⃣ 실시간 리더보드 성능

도전 과제 – 데이터베이스에 과부하를 주지 않으면서 전 세계 순위를 즉시 업데이트해야 함.

해결 방안 – 새로운 점수를 가벼운 leaderboard 테이블에 기록하고 PostgreSQL LISTEN/NOTIFY 채널을 트리거하는 Supabase Edge Function을 구현. 프론트엔드는 WebSocket을 통해 구독하여 실시간으로 업데이트를 수신함.

직접 체험해 보기!

1. 사이트 방문하기
2. 언어와 난이도 선택하기
3. 실제 코드를 입력하면서 WPM을 확인하고 전 세계 순위표를 올리세요

행복한 타이핑 되세요! 🚀

Source: …

5개 언어, 5단계 난이도 코딩 챌린지

Solution: Claude API를 사용해 자동 생성

• 난이도별 목표 문자 수 설정
• 구문적으로 올바르고 컴파일 가능한 코드 생성
• 각 문제에 간단하고 교육적인 설명 추가

// Problem generation script with Claude API
const prompt = `Generate a ${language} code snippet at difficulty ${level}.
Requirements:
- Approximately ${targetLength} characters
- Compilable / executable
- Brief explanation included
- Use patterns developers actually write`;

1. 문제 생성

각 문제에는 코드를 이해하는 데 도움이 되는 설명이 포함됩니다:

2. 실시간 점수 계산

Challenge: 속도와 정확성을 공정하게 평가하는 점수 시스템 설계.

Solution: 다중 요소 점수 계산

• Speed (WPM) – 빠를수록 점수 상승
• Accuracy – 실수는 패널티
• Difficulty – 높은 난이도는 더 많은 점수
• Combo – 연속 정답은 보너스

3. 8개 언어 국제화

Challenge: 복수형 및 날짜 형식 등 언어별 차이점 처리.

Solution: next‑intl 채택

• 로케일 기반 라우팅 (/en/, /ja/, /zh/, …)
• 언어별 JSON 메시지 파일
• 브라우저에서 자동 로케일 감지

4. 진행 상황 시각화 차트

Challenge: 사용자가 개선을 눈에 보이게 함.

Solution: 여러 시각화 구현

• Activity Heatmap – GitHub 스타일 재생 기록
• Progress Charts – 점수 / WPM / 정확도 / 콤보 추세
• Improvement Indicators – 기간 시작과 종료를 ↑ / ↓ 로 비교

시각적 일관성을 위해 Dracula 테마 색상과 일치하는 Recharts 사용.

5. 점수 시스템

리듬 게임에서 영감을 받은 순위 시스템:

Future Plans

Planned Features

• Additional languages (Java, C++, PHP, Ruby)
• Badge & achievement system
• Multiplayer battle mode
• Custom problem creation

한번 시도해 보세요!

🎮 Play DevType:

Perfect for:

• 타이핑 속도를 벤치마크하고 싶은 시니어 엔지니어
• 실습을 통해 문법을 배우고자 하는 초보자
• 그냥 타이핑 게임을 즐기는 모든 사람

높은 점수를 노려보세요!

피드백 환영

이 프로젝트는 취미 개발이며, 사용자 피드백을 기반으로 개선하고 있습니다.

• 앱 내 피드백 버튼
• 이 글에 대한 댓글

모든 형태의 피드백을 환영합니다!

최종 생각

우리는 AI가 코딩을 변화시키는 흥미로운 시대에 살고 있습니다. AI‑지원 개발로 완전히 전환하기 전에, 인간이 할 수 있는 일을 기념하고 기록합시다.

오늘 당신의 타이핑 속도는 인류가 코드를 작성하는 가장 빠른 순간일지도 모릅니다.

그 기록을 보존합시다. 🚀

당신의 최고 점수는? 댓글로 알려 주세요!