아키텍처로 완성하는 프라이버시: 서버 없는 브라우저 로컬 PDF 및 미디어 처리

매일 전 세계 수백만 명의 사용자들이 통장 거래 내역서, 의료 기록, 신분증 스캔본, 기밀 계약서, 가족 사진을 ‘무료’ 온라인 변환 사이트에 업로드합니다. 두 개의 PDF를 하나로 합치거나 취업 포털에 올릴 사진 용량을 줄이는 식의 지극히 평범한 일상을 위해서입니다.

대부분의 사람들은 다운로드가 끝나면 파일이 흔적도 없이 사라질 것이라 믿습니다. 하지만 엔지니어링 관점에서 볼 때 파일이 원격 서버의 하드디스크에 닿는 순간 그 약속은 매우 취약해집니다. 시스템 백업이 생성되고, 임시 폴더 삭제가 지연되며, 접근 로그에 메타데이터가 남고, 외부 클라우드 환경의 오설정으로 유출 사고가 발생할 수 있기 때문입니다.

LadeStack 생태계의 일부로 LS PDF (pdf.ladestack.in) 와 LS Image Compressor (img.ladestack.in) 를 설계하면서 저는 확고한 아키텍처적 원칙을 세웠습니다. 바로 **「사용자의 데이터를 지키는 가장 완벽한 방법은, 처음부터 그 데이터를 서버로 받지 않는 것」**입니다.

클라이언트 연산으로의 패러다임 전환

과거의 웹 브라우저는 PDF 같은 복잡한 바이너리 구조를 파싱하거나 대용량 픽셀 데이터를 다룰 만한 연산 능력이 부족했습니다. 그래서 ImageMagick이나 Ghostscript 같은 서버 바이너리에 작업을 맡길 수밖에 없었습니다.

하지만 오늘날 일상적인 유틸리티 작업에서 이러한 서버 의존적 방식은 구시대의 유물입니다. 고도로 최적화된 자바스크립트 엔진의 TypedArray, 네이티브에 준하는 속도로 실행되는 WebAssembly, 하드웨어 가속을 받는 HTML5 Canvas API 덕분에 브라우저는 기기 내부에서 모든 문서 작업을 거뜬히 수행할 수 있습니다.

[전통적인 클라우드 방식]
사용자 파일 -> 인터넷 업로드 -> 원격 서버 디스크 -> 백엔드 연산 -> 인터넷 다운로드
(느린 속도, 네트워크 대역폭 낭비, 심각한 개인정보 유출 위험)

[LadeStack의 로컬 아키텍처]
사용자 파일 -> 브라우저 RAM의 ArrayBuffer -> Web Worker / Canvas -> 로컬 Blob URL
(업로드 제로, 즉각적인 처리, 완전한 프라이버시 보장)

LS PDF의 내부 구조: 메모리에서 끝내는 17가지 기능

LS PDF는 전적으로 브라우저 내부에서 실행되는 두 가지 핵심 라이브러리를 바탕으로 구축되었습니다. 화면 렌더링과 텍스트 추출을 담당하는 PDF.js, 그리고 PDF 바이트 스트림을 조작하고 병합·분할·생성하는 pdf-lib입니다.

1. 네트워크를 전혀 거치지 않는 병합과 분할

LS PDF에서 세 개의 PDF 문서를 합칠 때 일어나는 과정은 다음과 같습니다:

1. 표준 HTML5 File API를 통해 파일을 선택합니다.
2. FileReader.readAsArrayBuffer()를 통해 파일이 브라우저의 RAM 메모리에 ArrayBuffer 형태로 직접 적재됩니다.
3. PDFDocument.load()가 메모리 안에서 PDF의 계층 구조를 분석합니다.
4. newDoc.copyPages(sourceDoc, pageIndices)를 호출하여 필요한 페이지만 새로운 문서 객체로 복사합니다.
5. 병합된 결과물이 Uint8Array로 직렬화된 뒤 URL.createObjectURL(new Blob([...]))를 통해 로컬 주소로 변환되어 즉시 기기로 저장됩니다.

일반적인 컴퓨터에서 이 과정은 0.2초도 걸리지 않습니다. 네트워크 망을 타고 이동하는 데이터양은 완전히 ’0’입니다.

2. Web Workers를 통한 화면 멈춤 방지

수백 개의 벡터 패스와 고화질 이미지가 포함된 대용량 PDF를 파싱하면 브라우저의 메인 스레드가 순간적으로 포화 상태에 이릅니다. 메인 스레드가 50밀리초 이상 멈추면 클릭이 씹히고 화면 스크롤이 끊기며 브라우저에 경고창이 뜹니다.

언제나 60fps의 매끄러운 반응성을 유지하기 위해 LS PDF는 무거운 작업을 백그라운드의 Web Workers로 철저히 위임합니다:

// 메모리 복사 없이 백그라운드 스레드로 바이너리 소유권 이전
const worker = new Worker('/workers/pdf-worker.js');
const buffer = await file.arrayBuffer();

worker.postMessage({ action: 'EXTRACT_TEXT', buffer }, [buffer]);

buffer를 ’전송 가능 객체(Transferable Object)’로 전달함으로써 메모리를 중복 복사하지 않고도 소유권만 초고속으로 넘깁니다. 작업이 완료되면 가공된 결과 텍스트만 메인 UI로 깔끔하게 돌아옵니다.

LS Image Compressor의 내부 구조: Canvas API 직접 제어

LS Image Compressor는 외부 압축 서버에 사진을 보내는 대신 브라우저의 하드웨어 가속을 받는 HTML5 Canvas API를 적극 활용합니다.

1. 해상도 리샘플링과 목표 용량 자동 계산

이미지를 드래그하여 올려놓으면:

1. 메인 스레드 바깥에서 파일이 ImageBitmap으로 디코딩됩니다.
2. 사용자가 지정한 가로·세로 한도에 맞춰 비율을 계산합니다.
3. OffscreenCanvas 위에 고품질 바이큐빅 보간법을 적용하여 축소된 이미지를 그립니다.
4. .convertToBlob({ type: 'image/webp', quality })를 실행해 최적화된 결과물을 추출합니다.

“공공기관 제출용으로 이 4MB 사진을 200KB 이하로 맞춰달라”와 같이 구체적인 용량 한도가 주어지면, 압축기는 빠른 이진 탐색(Binary Search) 알고리즘을 사용합니다. 0.1부터 1.0 사이의 품질 계수를 3~4회 빠르게 조정하여 사용자가 원하는 용량 범위에 정확히 수렴시킵니다.

2. 클립보드 직통 처리로 유출 차단

많은 온라인 서비스가 이미지 업로드를 요구합니다. 반면 기기 내 처리를 기본으로 삼는 본 도구에서는 캡처한 신분증이나 업무 기획 화면을 클립보드(Ctrl+V)에서 직접 붙여넣어 안전하게 크기를 줄이고 변환할 수 있습니다.

경제적 지속성과 윤리적 가치

소프트웨어를 브라우저 내부에서 실행되도록 설계하는 것은 제작자와 사용자 모두에게 강력한 이점을 선사합니다:

• 서버 비용 제로: 연산이 사용자의 로컬 CPU에서 일어나기 때문에 LadeStack은 막대한 클라우드 서버 요금이나 네트워크 대역폭 비용을 낼 필요가 없습니다. 덕분에 모든 기능을 영구적으로 무료로 서비스할 수 있습니다.
• 증명 가능한 안전함: “우리는 사용자의 파일을 들여다보지 않습니다”라는 수십 쪽짜리 개인정보처리방침을 내세울 필요가 없습니다. 아키텍처 자체가 사용자의 파일을 저희가 볼 수 없도록 물리적으로 차단하고 있기 때문입니다.
• 오프라인 동작 지원: 웹 프로그램이 브라우저 캐시에 저장되므로, 인터넷이 끊긴 비행기 안이나 시골 현장에서도 도구가 그대로 작동합니다.

프라이버시는 고가의 엔터프라이즈 구독제에만 포함되어야 하는 특권이 아닙니다. 브라우저의 잠재력을 신뢰하고 정직하게 설계할 때, 우리는 모두를 위해 더 빠르고, 더 저렴하며, 근본적으로 안전한 도구를 만들 수 있습니다.