내가 Vanilla JS와 Serverless를 사용해 PDF 편집기를 만든 방법 (클라우드 비용 $0)

Source: Dev.to

우리는 모두 그런 순간을 겪습니다. 두 개의 PDF 계약서를 합치거나 비디오 파일을 압축해야 할 때 구글에 검색을 합니다. 도구를 찾고 파일을 업로드한 뒤… 기다리게 되죠.

그리고 나서 생각하게 됩니다: “잠깐, 방금 내 세금 신고서를 발음도 할 수 없는 나라의 무작위 서버에 올린 건가?”

그런 불안감이 바로 제가 DuneTools 를 만든 이유입니다 – PDF, 비디오, 이미지 도구를 브라우저에서 100 % 실행하도록 만든 스위트. 업로드도 없고, 프라이버시 위험도 없습니다. 순수 JavaScript만 사용합니다.

1. 아키텍처: 클라이언트‑사이드가 왕이다 👑

대부분의 PDF 도구는 다음과 같이 동작합니다:

User -> Upload -> Server processes (Python/PHP) -> Download

DuneTools는 이렇게 동작합니다:

User -> Browser (WASM + JS) processes -> Done

pdf-lib 같은 라이브러리와 FFmpeg용 WebAssembly 래퍼를 사용하면 최신 브라우저만으로도 무거운 미디어 편집을 처리할 수 있습니다. 이에는 두 가지 큰 장점이 있습니다:

• 프라이버시: 파일이 사용자의 기기를 떠나지 않습니다.
• 비용: 서버 비용이 고정됩니다 – 사용자가 10명이든 10 000명 이든 CPU 처리 시간에 대한 비용을 지불하지 않아요.

2. 왜 Vanilla JS인가? (React도, Vue도 안 씀) 🍦

알아요, 알아요. 지금은 2025년이니까요. 왜 Next.js를 안 쓰나요?

이런 도구에서는 성능이 곧 기능입니다. “Merge PDF” 버튼 하나를 렌더링하기 위해 200 KB의 하이드레이션 스크립트를 전송하고 싶지 않았습니다.

3. 나만의 “하이브리드” 빌드 워크플로우

무거운 JS 프레임워크 대신 Python을 정적 사이트 생성기로 사용합니다:

• 순수 Vanilla JS로 로직을 작성합니다.
• Python + Jinja2 템플릿을 이용해 각 도구에 대한 HTML 페이지를 생성합니다 (SEO가 중요합니다).
• Python 스크립트가 모든 것을 하나의 정적 폴더로 컴파일해 배포 준비를 마칩니다.

결과

• Lighthouse 점수: 100/100 🟢
• 로드 시간: 즉시.

4. 배포: Vercel (Zero Config) ▲

앱이 완전히 클라이언트‑사이드이고 백엔드 데이터베이스가 없으니 서버, SSH 키, Docker 컨테이너를 관리하고 싶지 않았습니다. 그래서 Vercel을 선택했어요. “게으른 개발자” 철학에 딱 맞거든요:

• Git 연동: 생성된 정적 파일을 GitHub에 푸시하면 Vercel이 변화를 감지하고 자동으로 배포합니다.
• 글로벌 CDN: 정적 자산(JS/WASM)이 엣지에 캐시돼 전 세계 어디서든 도구가 즉시 로드됩니다.
• 비용: 무료. 처리에 Serverless Functions를 사용하지 않으니 무료 티어 한도 내에서 충분히 운영됩니다.

즉, “설정하고 잊어버리면 되는” 최고의 셋업입니다.

5. 결과: DuneTools 🏜️

프로젝트가 이제 라이브이며 포함 내용은 다음과 같습니다:

• PDF 도구: 병합, 분할, 압축.
• 비디오: 변환기, GIF 메이커.
• 이미지: 압축, 리사이징.

빠르고, 무료이며, 무엇보다 프라이버시가 보장됩니다.

코드에 대한 비판이나 UX 피드백을 언제든 환영합니다.

👉 여기서 사용해 보세요: DuneTools.com

(P.S. 프라이버시‑우선 iLovePDF 대안을 찾는 Indie Hacker라면, 여러분을 위해 만들었습니다!)