"브라우저는 웹페이지를 보여주는 프로그램"이라는 인식이 있습니다. 하지만 현대 브라우저는 그 이상입니다. 서버 없이 브라우저만으로 할 수 있는 것들을 정리해봤습니다.
이미지 처리 — Canvas API
Canvas API는 브라우저에 내장된 이미지 처리 엔진입니다. JavaScript로 픽셀 단위까지 조작할 수 있습니다.
할 수 있는 것들:
- 이미지 크기 조절
- 형식 변환 (JPG → WEBP 등)
- 밝기·대비 조절
- 필터 적용
- 워터마크 추가
- 여러 이미지 합성
서버 없이 브라우저에서 이미지를 편집하는 도구들이 Canvas API를 기반으로 합니다.
동영상 처리 — FFmpeg.wasm
FFmpeg는 동영상 처리의 업계 표준 소프트웨어입니다. 원래 서버에서 실행하는 프로그램이지만, WebAssembly 기술 덕분에 브라우저에서도 실행할 수 있게 됐습니다.
FFmpeg.wasm으로 브라우저에서 할 수 있는 것들:
- 동영상 압축 (용량 줄이기)
- 포맷 변환 (MP4, MOV, AVI, WebM 등)
- 동영상 자르기
- GIF 변환
- 오디오 추출
단점은 처리 속도입니다. 서버에서 실행할 때보다 느립니다. 하지만 파일이 서버로 전송되지 않으니 개인 동영상도 안전하게 처리할 수 있습니다.
PDF 처리 — pdf-lib
pdf-lib은 JavaScript로 PDF를 조작하는 라이브러리입니다. 브라우저에서 실행되며 서버가 필요 없습니다.
할 수 있는 것들:
- PDF 여러 개 합치기
- PDF 특정 페이지 분리
- 페이지 회전
- PDF 압축
기업용 PDF 편집 프로그램과 완전히 같은 기능은 아니지만, 일상적인 작업은 충분히 처리할 수 있습니다.
3D 파일 뷰어 — Three.js
Three.js는 브라우저에서 3D 그래픽을 렌더링하는 라이브러리입니다. WebGL을 더 쉽게 쓸 수 있도록 만들어졌습니다.
Three.js로 브라우저에서 할 수 있는 것들:
- OBJ, FBX, GLB, STL, PLY 파일 열기
- 3D 모델 회전, 확대, 이동
- 조명 조절
- 애니메이션 재생
설치 없이 브라우저에서 3D 파일을 확인할 수 있습니다.
암호화 — Web Crypto API
브라우저에 내장된 암호화 API입니다. 별도 라이브러리 없이 사용할 수 있습니다.
할 수 있는 것들:
- SHA-256 해시 생성
- AES 암호화·복호화
- 랜덤 비밀번호 생성
- 디지털 서명
파일 시스템 접근 — File System Access API
최신 브라우저에서는 사용자의 파일 시스템에 직접 접근할 수 있습니다. 로컬 파일을 읽고 수정하고 저장하는 것이 브라우저에서 가능해졌습니다.
브라우저가 이렇게 강력해진 이유
WebAssembly: C, C++, Rust 같은 네이티브 언어로 작성된 코드를 브라우저에서 실행할 수 있게 됩니다. FFmpeg, 이미지 처리 라이브러리 같은 기존 소프트웨어를 브라우저로 가져올 수 있었습니다.
Web API의 확장: 구글, 모질라, 애플, 마이크로소프트가 웹 표준을 계속 발전시키면서 브라우저가 할 수 있는 것들이 계속 늘어나고 있습니다.
JavaScript 엔진 성능: V8(크롬), SpiderMonkey(파이어폭스) 같은 JavaScript 엔진이 빨라지면서 복잡한 연산도 브라우저에서 처리할 수 있게 됐습니다.
정리
현대 브라우저는 이미지 편집, 동영상 처리, PDF 조작, 3D 렌더링, 암호화까지 할 수 있습니다. 서버 없이 브라우저만으로 처리하면 파일이 외부로 나가지 않고, 서버 비용도 없으며, 인터넷 없이도 동작합니다. 웹 기술의 발전이 브라우저를 하나의 운영체제에 가깝게 만들고 있습니다.
'Dev' 카테고리의 다른 글
| 무료로 웹서비스를 운영하는 방법 — Vercel Next.js 조합 (0) | 2026.09.29 |
|---|---|
| 동영상 압축을 브라우저에서 구현한 이야기 — FFmpeg.wasm 적용기 (0) | 2026.09.25 |
| PDF가 편집하기 어려운 이유 — 어도비가 PDF를 만든 방식 (0) | 2026.09.24 |
| 웹서비스 처음 만들면서 놀란 것 5가지 (0) | 2026.09.21 |