📝 OCR 판독기가 필요한 이유

PDF 문서나 이미지에 포함된 텍스트를 추출하고 저장할 수 있는 앱이 필요했다.
이를 위해 OCR(Optical Character Recognition) 기술을 활용해야 한다.

🔎 OCR이란?

OCR(Optical Character Recognition)은 이미지나 PDF에서 텍스트를 인식하여 추출하는 기술이다.
하지만 기존의 OCR 판독 웹사이트는 한글을 제대로 인식하지 못하는 문제가 있었다.
따라서, 직접 Windows에서 실행 가능한 OCR 앱을 개발하기로 했다.

---

⚡ Windows에서 실행 가능한 OCR 앱 제작

🎯 Electron.js를 선택한 이유

Windows에서 실행하려면 GUI 기반 애플리케이션이 필요했고,
Electron.js는 Node.js를 활용하여 데스크톱 애플리케이션을 쉽게 만들 수 있는 프레임워크다.
필자는 Node.js 환경에 익숙하기 때문에 Electron.js를 선택하게 되었다.

🛠 OCR 기능 개발 과정

🛠 개발 구조

✅ Electron.js → 파일 탐색 기능 제공, 실행 파일(.exe) 제작
✅ Tesseract.js → 무료 OCR 모듈 활용하여 이미지에서 텍스트 추출
✅ 파일 탐색 기능 → Windows 환경에서 파일 선택 가능하도록 구현
✅ 텍스트 파일 저장 → OCR 결과를 .txt 형식으로 저장
✅ 다중 파일 지원 → 여러 개의 이미지 선택 가능, 각 이미지마다 개별 .txt 파일 생성
✅ 최소한의 UI → 별도 화면 없이 파일 선택 창만 표시

---

📂 파일 구조

/ocr-app
 ├── main.js  # Electron 앱의 핵심 로직
 ├── package.json  # 프로젝트 설정 파일
 ├── index.html  # Electron에서는 UI가 필요 없으므로 빈 파일
 ├── renderer.js  # 파일 탐색 기능 및 OCR 실행 로직
 ├── ocr.js  # OCR 처리 코드
 ├── assets/  # 이미지 파일이 저장될 폴더
 ├── output/  # OCR 결과가 저장될 폴더

---

🚀 코드 구성

🔹 1️⃣ Electron 앱 초기 설정 (main.js)

const { app, BrowserWindow, dialog } = require('electron');
const path = require('path');
const fs = require('fs');
const processOCR = require('./ocr'); // OCR 기능 모듈

app.whenReady().then(() => {
    const win = new BrowserWindow({
        width: 600,
        height: 400,
        webPreferences: { nodeIntegration: true }
    });

    // 파일 선택 창 열기
    dialog.showOpenDialog(win, {
        properties: ['openFile', 'multiSelections'],
        filters: [{ name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'pdf'] }]
    }).then(result => {
        if (!result.canceled) {
            result.filePaths.forEach(filePath => {
                processOCR(filePath); // OCR 실행
            });
        }
    });

    win.close(); // UI 없이 종료
});

🔹 2️⃣ OCR 기능 (ocr.js)

const Tesseract = require('tesseract.js');
const path = require('path');
const fs = require('fs');

const processOCR = (filePath) => {
    Tesseract.recognize(filePath, 'eng')
        .then(({ data }) => {
            const outputPath = path.join(path.dirname(filePath), path.basename(filePath, path.extname(filePath)) + '.txt');
            fs.writeFileSync(outputPath, data.text, 'utf8');
            console.log(`✅ OCR 완료: ${outputPath}`);
        })
        .catch(err => console.error(`❌ OCR 오류:`, err));
};

module.exports = processOCR;

---

🎯 실행 방법

1️⃣ Node.js & Electron 설치

npm install electron tesseract.js

2️⃣ 앱 실행

electron main.js

3️⃣ 파일 선택 후 자동으로 OCR 실행 & .txt 파일 생성

🔹 3️⃣ 실행 파일(.exe) 제작

Electron 앱을 터미널에서 실행할 수도 있지만,
최종적으로 Windows에서 클릭만으로 실행할 수 있도록 .exe 파일로 변환해야 한다.

이를 위해 electron-packager를 사용한다.

npm install electron-packager -g
electron-packager . OCR-App --platform=win32 --arch=x64 --out=dist/ --overwrite

이제 생성된 dist/OCR-App.exe 파일을 클릭하면 Windows에서 실행 가능하다! 🚀

---

🔥 결론

✔️ OCR 기능을 갖춘 Windows 애플리케이션을 개발 완료!
✔️ Electron.js와 Tesseract.js를 활용하여 PDF 및 이미지의 텍스트 추출 가능!
✔️ Windows에서 실행 파일(.exe)로 변환하여 사용자가 쉽게 접근할 수 있도록 최적화!

이제 OCR 판독기가 완성되었으니, 직접 사용해보고 개선할 부분을 찾아볼 수 있다.
AI와 자동화를 활용해 더 다양한 기능을 추가하는 것도 가능할 것이다.

🔥 앞으로도 OCR 및 자동화 시스템을 더 확장해 보자! 🚀

Creating an OCR Reader with Electron.js and Tesseract.js

Why an OCR Reader Was Needed

I needed an app that could extract text from PDF documents or images and save it as a .txt file.
For this purpose, OCR (Optical Character Recognition) technology was necessary.

What is OCR?

OCR (Optical Character Recognition) is a technology that recognizes and extracts text from images or PDFs.
However, existing OCR websites often failed to properly read Korean characters, which led me to develop my own Windows-based OCR application.

---

Developing a Windows-Compatible OCR Application

Why Choose Electron.js?

To run the app on Windows, a GUI-based desktop application was necessary.
Electron.js allows developers to use Node.js to create cross-platform desktop applications with ease.
Since I was familiar with Node.js, Electron.js was the ideal choice for this project.

---

OCR Feature Development Process

Development Structure

• Electron.js → Enables file selection and generates an executable (.exe) file
• Tesseract.js → Free OCR module to extract text from images
• File Selection → Allows users to select files via a dialog window in Windows
• Text File Output → Saves OCR results as .txt files
• Batch Processing → Supports multiple images, generating individual .txt files for each
• Minimal UI → No additional interface needed, only a file selection window

---

File Structure

/ocr-app
 ├── main.js  # Core logic of the Electron app
 ├── package.json  # Project configuration file
 ├── index.html  # Empty file since no UI is required
 ├── renderer.js  # File selection and OCR execution logic
 ├── ocr.js  # OCR processing script
 ├── assets/  # Folder for image files
 ├── output/  # Folder for extracted text files

---

Code Overview

1️⃣ Setting Up the Electron App (main.js)

const { app, BrowserWindow, dialog } = require('electron');
const path = require('path');
const fs = require('fs');
const processOCR = require('./ocr'); // OCR function module

app.whenReady().then(() => {
    const win = new BrowserWindow({
        width: 600,
        height: 400,
        webPreferences: { nodeIntegration: true }
    });

    // Open file selection dialog
    dialog.showOpenDialog(win, {
        properties: ['openFile', 'multiSelections'],
        filters: [{ name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'pdf'] }]
    }).then(result => {
        if (!result.canceled) {
            result.filePaths.forEach(filePath => {
                processOCR(filePath); // Run OCR
            });
        }
    });

    win.close(); // Close without UI
});

2️⃣ OCR Processing (ocr.js)

const Tesseract = require('tesseract.js');
const path = require('path');
const fs = require('fs');

const processOCR = (filePath) => {
    Tesseract.recognize(filePath, 'eng')
        .then(({ data }) => {
            const outputPath = path.join(path.dirname(filePath), path.basename(filePath, path.extname(filePath)) + '.txt');
            fs.writeFileSync(outputPath, data.text, 'utf8');
            console.log(`OCR completed: ${outputPath}`);
        })
        .catch(err => console.error(`OCR error:`, err));
};

module.exports = processOCR;

---

Running the Application

Install Node.js & Electron

npm install electron tesseract.js

Run the App

electron main.js

Select a file, and the app will automatically run OCR and generate a .txt file.

---

Creating an Executable (.exe)

Although the app can be run via the terminal,
it is preferable for users to simply click an icon to execute it in Windows.

To convert the app into an .exe file, electron-packager is used.

npm install electron-packager -g
electron-packager . OCR-App --platform=win32 --arch=x64 --out=dist/ --overwrite

Once the process is completed, clicking the dist/OCR-App.exe file will run the OCR reader directly in Windows.

---

Conclusion

• Successfully developed a Windows-compatible OCR application
• Used Electron.js and Tesseract.js to extract text from PDFs and images
• Converted the app into an executable file (.exe) for ease of use

Now, the OCR reader is complete. The next step could be improving accuracy, adding new features,
or leveraging AI for more automation and smarter text processing.

With this setup, anyone can easily extract text from images or PDFs with just a few clicks!