투더제이 코딩 클래스
첫 번째 데스크톱 앱
일렉트론으로 타이핑 앱 만들기
프로그램 개발 4-2 · 실습편
학습 목표

이 강을 다 들으면

1Electron 프로젝트를 생성 · 실행한다
2타수 · 정확도를 보여주는 타이핑 앱을 만든다
3설치 파일(.exe / .dmg)로 빌드한다
1. 완성 모습

무엇을 만드나

제시 문장 표시
→
사용자 입력
→
타수 · 정확도 실시간 계산
💡 작지만 화면 · 로직 · 빌드를 모두 거치는 — 판매용 프로그램의 축소판.
2. 프로젝트 생성

터미널 3줄이면 시작

mkdir typing-tool && cd typing-tool
npm init -y
npm install --save-dev electron
package.json 에 추가
"main": "main.js",
"scripts": { "start": "electron ." }
3. 파일 구조

파일 4개의 역할

typing-tool/ ├── package.json ← 앱 이름 · 버전 · 실행 명령 ├── main.js ← Main: 창 만들기 ├── preload.js ← Main ↔ 화면 연결 통로 (지금은 비워둠) ├── index.html ← 화면 └── renderer.js ← 타수 · 정확도 계산
4. main.js

창을 띄우는 코드

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 900,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});
5. index.html

화면은 평범한 웹페이지

<h1>타이핑 연습</h1>
<p id="target">오늘도 한 줄씩 코드를 쌓아 올린다</p>
<input id="input" placeholder="위 문장을 따라 입력하세요" />
<div>
  타수: <b id="cpm">0</b> · 정확도: <b id="acc">100</b>%
</div>
<script src="renderer.js"></script>
💡 스타일(CSS)은 자유롭게 — 웹에서 하던 그대로 꾸미면 됩니다.
6. renderer.js

타수 · 정확도 계산

const target = document.getElementById('target').textContent;
const input = document.getElementById('input');
let start = null;

input.addEventListener('input', () => {
  if (!start) start = Date.now();
  const typed = input.value;
  const min = (Date.now() - start) / 60000;

  let ok = 0;
  for (let i = 0; i < typed.length; i++) {
    if (typed[i] === target[i]) ok++;
  }
  document.getElementById('cpm').textContent =
    Math.round(typed.length / Math.max(min, 1 / 60));
  document.getElementById('acc').textContent =
    typed.length ? Math.round((ok / typed.length) * 100) : 100;
});
7. 실행

내 PC에서 띄워보기

npm start
✔ 확인할 것
  • 창이 뜨고 문장이 보인다
  • 입력하면 타수가 올라간다
  • 틀리면 정확도가 떨어진다
🔧 개발자 도구

창에서 Ctrl+Shift+I (Mac: ⌥⌘I)
— 크롬과 똑같이 디버깅

8. 빌드

고객에게 줄 설치 파일 만들기

npm install --save-dev electron-builder
package.json
"build": {
  "appId": "com.ttj.typingtool",
  "productName": "TypingTool",
  "win": { "target": "nsis" },
  "mac": { "target": "dmg" }
},
"scripts": { "start": "electron .", "dist": "electron-builder" }
9. 결과물

npm run dist → dist 폴더

OS결과 파일빌드 위치
🪟 WindowsTypingTool Setup 1.0.0.exeWindows PC에서 빌드
🍎 MacTypingTool-1.0.0.dmgMac에서 빌드
💡 각 OS용 파일은 해당 OS에서 빌드하는 것이 가장 안전합니다.
10. 상품으로 키우기

판매용으로 발전시키려면

📚 문장 세트

업종별 · 난이도별
연습 문장 추가

💾 기록 저장

Main에서 파일 저장
→ 성장 그래프

🔄 업데이트

새 기능을 고객 PC에
자동 배포 (다음 강)

🎬 NEXT

다음 강 예고

4-3 — 자동 업데이트
기능 탑재하기

프로그램 개발 4-2 · 실습편