스캐너 지원이 포함된 무료 웹 기반 문서 변환기 구축

발행: 3일 전 (2025년 12월 2일 오후 04:45 GMT+9)

5 min read

Source: Dev.to

개요

오늘날 디지털 환경에서는 다양한 출처의 문서를 변환, 병합 및 편집해야 할 일이 많습니다. PDF, 워드 문서, 휴대폰으로 촬영한 이미지, 물리적 스캐너로 스캔한 문서 등을 다룰 때, 이러한 모든 형식을 한 번에 처리할 수 있는 통합 도구는 매우 유용합니다.

데모:
Free Online Document Converter with Scanner Support – Live Demo

이 도구가 유용한 이유

실제 사용 시나리오

홈 오피스 문서 관리

여러 장의 영수증을 하나의 PDF로 병합하여 비용 보고서 작성
지원서 제출 전에 워드 문서를 PDF로 변환
손글씨 사진과 타이핑된 문서를 결합

원격 근무 및 협업

클라우드 서비스에 업로드하지 않고 빠르게 문서를 편집·병합 (프라이버시 중심)
카메라, 스캐너, 파일 등 다양한 출처의 문서 패키지 생성
브라우저에서 직접 워드 문서 편집 (Microsoft Office 필요 없음)

교육

학생들이 강의 노트, 스크린샷, 스캔 자료를 병합 가능
교사가 다양한 출처의 자료를 하나의 학습 자료로 제작
학교 컴퓨터에 별도 소프트웨어 설치 불필요

소규모 비즈니스

스캐너를 이용해 물리적 문서(청구서·영수증) 처리
혼합 미디어로 전문 PDF 포트폴리오 제작
고가 소프트웨어 없이 계약서 편집·병합

주요 장점

100% 브라우저 기반: 서버 업로드 없음, 프라이버시 걱정 없음
무료 핵심 기능: 문서 보기, 편집, 병합, 내보내기
다중 포맷 지원: PDF, Word, 이미지, TIFF, 텍스트 파일
물리적 스캐너 지원: TWAIN/WIA/SANE/ICA 스캐너와 선택적 연동
오프라인 사용 가능: 최초 로드 후 인터넷 없이 동작

무료 vs. 유료 기능

완전 무료 기능 (라이선스 불필요)

파일 업로드 및 보기 (PDF, DOCX, 이미지, TIFF, TXT)
카메라 캡처
문서 편집 (텍스트 및 이미지)
이미지 편집 (자르기, 회전, 필터, 크기 조정)
드래그‑앤‑드롭 재정렬
문서 병합
PDF 및 워드로 내보내기
실행 취소/다시 실행
썸네일 네비게이션
확대·축소 및 팬

스캐너 연동

Dynamic Web TWAIN 체험판 라이선스가 필요합니다.

사용 기술 개요

라이브러리	용도
PDF.js	PDF 렌더링
Mammoth.js	DOCX → HTML 변환
jsPDF	PDF 생성
html-docx-js	워드 문서 생성
html2canvas	HTML → 이미지 렌더링
UTIF.js	TIFF 디코딩
Dynamic Web TWAIN	스캐너 연동

단계 1: HTML 구조

index.html 파일을 기본 구조로 생성합니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Reader & Editor</title>
    <link rel="stylesheet" href="style.css">
    <script src="lib/pdf.js"></script>
    <script>
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'lib/pdf.worker.min.js';
    </script>
</head>
<body>
    <header>
        <h1>Document Converter & Gallery</h1>
        <p>Convert Word/PDF/Images, Merge, and Save.</p>
    </header>

    <!-- Controls -->
    <section id="controls">
        <button id="uploadBtn">Upload</button>
        <button id="cameraBtn">Camera</button>
        <button id="scannerBtn">Scanner</button>
        <!-- Additional controls -->
    </section>

    <!-- Thumbnails panel -->
    <aside id="thumbnails"></aside>

    <!-- Viewer panel -->
    <main id="viewer"></main>

    <!-- Loading overlay -->
    <div id="loadingOverlay">Processing Document...</div>
</body>
</html>

핵심 요소

파일 업로드용 입력
이미지 캡처용 카메라 버튼
물리적 문서 스캔용 스캐너 버튼
썸네일 패널(네비게이션)
선택 페이지를 표시하는 뷰어 패널
DOCX 처리 중 피드백을 제공하는 로딩 오버레이

단계 2: CSS 스타일링

현대적이고 반응형 인터페이스를 위한 style.css를 작성합니다:

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f9;
    color: #333;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

header {
    background-color: #fff;
    border-bottom: 1px solid #dde3e8;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 1.8rem;
    color: #007bff;
}

/* Additional styling for controls, workspace, thumbnails, viewer, etc. */