실시간 WPM 측정과 통계 그래프를 갖춘 타자 연습 웹 앱을 개발할 때 활용합니다.
Build an interactive typing speed test using HTML5, CSS3, and JavaScript. Create a clean interface with text display and input area. Implement WPM and accuracy calculation in real-time. Add difficulty levels with appropriate text selection. Include error highlighting and correction tracking. Implement test history with performance graphs. Add custom test creation with text import. Include virtual keyboard display showing keypresses. Support multiple languages and keyboard layouts. Create a responsive design for all devices. Add competition mode with leaderboards.
HTML5, CSS3, JavaScript를 사용하여 대화형 타자 속도 측정 앱을 제작하세요. 텍스트 표시 영역과 입력 영역이 있는 깔끔한 인터페이스를 생성하세요. 실시간으로 WPM(분당 단어 수) 및 정확도 계산을 구현하세요. 적절한 텍스트 선택이 가능한 난이도를 추가하세요. 오타 강조 표시 및 수정 추적 기능을 포함하세요. 성과 그래프가 포함된 테스트 기록을 구현하세요. 텍스트 가져오기 기능이 있는 사용자 지정 테스트 생성 기능을 추가하세요. 키 누름을 보여주는 가상 키보드 디스플레이를 포함하세요. 다국어 및 다양한 키보드 레이아웃을 지원하세요. 모든 기기에 대응하는 반응형 디자인을 만드세요. 순위표가 있는 경쟁 모드를 추가하세요.
출처 · prompts.chat · Typing Speed Test — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
실시간 타수(CPM)·WPM·정확도 측정, 가상 키보드 자판 동기화, 맞춤 문장 등록, 연습 기록 그래프 및 가상 리더보드를 갖춘 웹 타자 측정 플랫폼 TPI 타자 연습을 제작하였습니다. 모바일 390px 환경에서도 가로 스크롤 넘침 없이 안정적으로 동작하며, 한글 두벌식과 영문 자판 배치를 정확하게 반영하였습니다.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
Build an interactive typing speed test using HTML5, CSS3, and JavaScript. Create a clean interface with text display and input area. Implement WPM and accuracy calculation in real-time. Add difficulty levels with appropriate text selection. Include error highlighting and correction tracking. Implement test history with performance graphs. Add custom test creation with text import. Include virtual keyboard display showing keypresses. Support multiple languages and keyboard layouts. Create a responsive design for all devices. Add competition mode with leaderboards.
실시간 타수(CPM)·WPM·정확도 측정, 가상 키보드 자판 동기화, 맞춤 문장 등록, 연습 기록 그래프 및 가상 리더보드를 갖춘 웹 타자 측정 플랫폼 mopick 타자 연습을 제작하였습니다. 모바일 390px 환경에서도 가로 스크롤 넘침 없이 안정적으로 동작하며, 한글 두벌식과 영문 자판 배치를 정확하게 반영하였습니다.
mopick 개선안
원문을 그대로 넣으면 AI 가 매번 다르게 답하거나 중요한 부분을 빠뜨릴 수 있습니다. 개선안은 원문의 뜻과 언어는 그대로 두고 역할 · 바꿔 넣을 입력 칸 · 결과 형식 · 지킬 조건을 보완해 다시 쓴 버전입니다. 원문과 같은 곳(ChatGPT · Claude 등)에 그대로 붙여 넣어 쓰면 됩니다.
AI 평가 점수 — 명확성 · 구체성 · 결과 형식 · 재사용성 기준(100점)
AI 역할레슨 01 배우기 ›
원문 · 없음AI 에게 맡길 역할이 정해져 있지 않아 답의 관점 · 수준이 그때그때 달라질 수 있었습니다.
개선 · 역할을 정함Act as an expert Frontend Developer. Build a fully functional, responsive typing speed tes
입력 칸레슨 05 배우기 ›
원문 · 없음바꿔 넣을 자리가 표시돼 있지 않아 쓸 때마다 원문을 직접 고쳐야 했습니다.
개선 · 2개[Easy/Medium/Hard] · [e.g., QWERTY/DVORAK]
결과 형식레슨 03 배우기 ›
원문 · 정해지지 않음결과를 어떤 모양으로 낼지 정해져 있지 않아 답 모양이 매번 달라질 수 있었습니다.
개선 · 형식을 지정함3. Output Format: Provide complete, modular, and well-commented code divided into index.ht
작업 순서레슨 07 배우기 ›
원문 · 없음작업 순서가 정해져 있지 않아 AI 가 순서를 스스로 정해야 했습니다.
개선 · 3단계
이 개선안에 쓰인 기법 — 프롬프트 클래스에서 배우기
원문
Build an interactive typing speed test using HTML5, CSS3, and JavaScript. Create a clean interface with text display and input area. Implement WPM and accuracy calculation in real-time. Add difficulty levels with appropriate text selection. Include error highlighting and correction tracking. Implement test history with performance graphs. Add custom test creation with text import. Include virtual keyboard display showing keypresses. Support multiple languages and keyboard layouts. Create a responsive design for all devices. Add competition mode with leaderboards.
개선안 · 색칠한 [칸]에 내 내용을 넣어 쓰세요
Act as an expert Frontend Developer. Build a fully functional, responsive typing speed test application using semantic HTML5, CSS3, and vanilla JavaScript (ES6+). Key Requirements: 1. UI/UX: Clean text display, input area, real-time WPM & accuracy metrics, real-time error highlighting, and a virtual keyboard displaying keypresses. 2. Features: Difficulty levels ([Easy/Medium/Hard]), correction tracking, test history with performance graphs (e.g., Chart.js), custom text import, multi-language/layout support ([e.g., QWERTY/DVORAK]), and a leaderboard competition mode. 3. Output Format: Provide complete, modular, and well-commented code divided into `index.html`, `styles.css`, and `script.js`.