파일을 올리지 않는 온라인 도구는 어떻게 동작할까?

파일을 올리지 않는 온라인 도구는 처리 프로그램을 브라우저로 받아 와서, 내 기기 안에서 파일을 읽고 결과를 만듭니다. 페이지는 화면과 처리 엔진 같은 파일을 받지만, 파일 내용과 파일 이름은 보내지 않습니다. 이 글에서는 그 구조와 함께, 브라우저 개발자 도구로 직접 확인하는 방법을 설명합니다.

브라우저 안에서 처리하는 구조

서버에서 처리하는 도구는 파일을 서버로 보내고, 서버가 만든 결과를 다시 내려받습니다. 브라우저에서 처리하는 도구는 반대로 처리 프로그램이 브라우저로 옵니다. 파일은 기기에 그대로 있고, 페이지의 코드가 그 자리에서 파일을 읽어 결과를 만듭니다.

웹 페이지는 사용자가 파일 선택 창이나 끌어 놓기로 건넨 파일만 읽을 수 있습니다. 파일을 골랐다고 해서 그 파일이 어딘가로 전송되지는 않습니다. 전송하려면 페이지 코드가 따로 네트워크 요청을 보내야 하고, 이런 요청은 개발자 도구에 기록됩니다.

브라우저 안 처리를 가능하게 하는 기술은 주로 세 가지입니다.

기술	하는 일 (MDN 설명 요약)	ZEKILO Studio에서 쓰는 곳
WebAssembly	C·C++·Rust 같은 언어로 만든 프로그램을 브라우저에서 네이티브에 가까운 성능으로 실행	이미지 압축 엔진(MozJPEG·OxiPNG 등), MP3 인코더(LAME), 동영상 대체 엔진(FFmpeg)
Web Worker	화면을 담당하는 메인 스레드와 분리된 백그라운드 스레드에서 스크립트를 실행해, 무거운 작업 중에도 화면이 멈추지 않게 함	이미지·PDF·동영상 처리
WebCodecs	브라우저에 내장된 코덱으로 동영상·오디오를 프레임 단위로 인코딩·디코딩 (하드웨어 가속 활용)	동영상 압축, MP4 변환, 동영상 GIF 변환, 동영상 MP3 변환

메인 스레드와 Worker는 메시지로 데이터를 주고받습니다. 이것은 같은 브라우저 안에서 일어나는 전달이라 네트워크 요청이 아닙니다. PDF 합치기는 pdf-lib라는 JavaScript 라이브러리를 Worker 안에서 실행합니다.

페이지가 받는 것과 보내지 않는 것

구분	내용
받는 것: 페이지 파일	HTML·CSS·JavaScript·이미지 등 화면을 그리는 정적 파일
받는 것: 처리 엔진	도구마다 필요한 엔진을 처음 쓸 때 받습니다. 브라우저가 다루지 못하는 동영상 코덱이면 대체 엔진(FFmpeg, 약 31 MB)을 처음 한 번 받아 브라우저 캐시에 보관합니다
받고 보내는 것: 광고·방문 통계	광고가 게재되는 페이지의 광고 스크립트와 Google 방문 통계 스크립트. 방문 통계에는 페이지 주소와 함께 어떤 도구를 썼는지, 파일 형식, 대략적인 크기 구간 같은 사용 정보가 기록될 수 있습니다
보내지 않는 것	파일 내용, 파일 이름, 정확한 파일 크기, 결과 파일

처리 엔진은 사이트와 같은 주소에서 받습니다. 엔진을 받는 것은 처리 프로그램을 내려받는 일이며, 내 파일을 보내는 일이 아닙니다.

네트워크 탭에서 무엇을 보면 될까

Chrome 기준입니다. 다른 브라우저의 개발자 도구에도 비슷한 기능이 있습니다.

• 여는 법: Windows는 F12 또는 Ctrl+Shift+I, Mac은 Cmd+Option+I로 개발자 도구를 열고 Network(네트워크) 탭을 고릅니다. 개발자 도구는 열려 있는 동안의 요청만 기록하므로 파일을 고르기 전에 열어 둡니다.
• Method 열: 요청 표의 머리글을 오른쪽 클릭하면 Method 열을 켤 수 있습니다. 파일을 받아 오는 요청은 대개 GET이고, 데이터를 실어 보내는 요청은 POST 같은 방식으로 표시됩니다.
• 필터: 필터 칸에 method:POST를 입력하면 POST 요청만 볼 수 있습니다. 유형 버튼의 Wasm을 누르면 WebAssembly 엔진 파일만 보입니다.
• Payload 탭: 요청을 누르고 Payload 탭을 열면 그 요청이 보낸 값을 볼 수 있습니다.
• Size 열: 서버에서 받은 응답의 크기입니다. 이 값이 크다고 해서 무언가를 보냈다는 뜻은 아닙니다.

ZEKILO Studio로 하기

1. 이미지 압축 페이지를 열고 개발자 도구의 Network 탭을 연 다음, Clear(지우기) 버튼으로 목록을 비웁니다.
2. [파일 선택]으로 사진을 고릅니다. 이미지 압축은 넣는 즉시 압축이 시작되며, 결과가 나오면 [다운로드]로 저장합니다.
3. 새로 생긴 요청을 확인합니다. 엔진 파일을 받아 오는 요청이 보일 수 있고, 방문 통계 요청은 POST로 보일 수도 있습니다. 그런 요청을 눌러 Payload를 열어 보면 파일 내용이나 파일 이름이 들어 있지 않은 것을 확인할 수 있습니다.

PDF 합치기와 동영상 압축도 같은 방법으로 확인할 수 있습니다. 두 도구는 파일을 넣은 뒤 [시작]을 눌러야 처리가 시작됩니다. 동영상 압축에서 대체 엔진이 필요한 파일을 넣고 [시작]을 누르면 진행 표시에 「처리 엔진 준비 중 · 최초 1회 약 31 MB」가 나타나고, 처음 한 번은 네트워크 탭에 엔진 파일을 받는 요청이 나타납니다.

브라우저 안 처리의 한계

• 기기 성능과 메모리: 처리는 내 기기의 CPU와 메모리로 하므로 처리 시간은 기기에 따라 다릅니다. 도구마다 권장 용량이 있고, 넘으면 경고가 표시됩니다. 메모리가 모자라면 「기기 메모리가 부족해 멈췄습니다」가 나올 수 있습니다.
• 브라우저 지원: MDN은 기기와 브라우저에 따라 WebCodecs가 지원하는 코덱이 일부일 수 있다고 설명합니다. 필요한 기능이 없는 브라우저에서는 「이 브라우저에서는 이 도구를 쓸 수 없습니다」라는 안내가 표시됩니다.
• 처음 한 번의 다운로드: 대체 엔진은 크기가 커서, 모바일 데이터를 쓰고 있다면 Wi-Fi 연결을 권장합니다.
• 페이지 닫기: 처리는 이 페이지 안에서 일어나므로, 처리 중에 페이지를 닫으면 작업도 멈춥니다.

정리

• 파일을 올리지 않는 도구는 WebAssembly·Web Worker·WebCodecs로 브라우저 안에서 파일을 처리합니다.
• 페이지는 화면 파일, 처리 엔진, 광고·방문 통계 스크립트를 받습니다. 파일 내용·파일 이름·정확한 크기는 보내지 않습니다.
• 개발자 도구 Network 탭에서 Method 열과 Payload 탭으로 무엇이 오가는지 직접 확인할 수 있습니다.
• 처리 속도와 처리할 수 있는 파일 크기는 기기 성능과 브라우저에 따라 달라집니다.