로컬 처리 가이드

파일 업로드 없이 브라우저에서 미디어를 처리하는 원리

핵심 답변

로컬 미디어 도구는 사용자가 파일 선택 창에서 직접 허용한 파일을 브라우저 메모리로 읽고, Canvas·Web Audio API·ffmpeg.wasm 같은 브라우저 기술로 변환합니다. 원본을 전송하는 업로드 요청이나 백엔드 변환 서버가 필요하지 않습니다.

로컬 처리가 곧 기기 전체에 접근한다는 뜻은 아닙니다. 페이지는 선택한 파일만 읽을 수 있고, 결과도 사용자가 다운로드하거나 저장 위치를 승인할 때만 남습니다. 페이지를 닫으면 메모리의 작업 상태는 사라지는 것이 기본 동작입니다.

실제 상황: 가족 영상을 온라인 서비스에 맡기고 싶지 않을 때

휴대전화로 찍은 90초 영상을 자르려 하지만 얼굴과 집 내부가 담겨 있어 업로드를 피하고 싶은 상황입니다. 파일 선택 후 주소창과 개발자 도구의 Network 항목에 업로드 요청이 없는지 확인할 수 있습니다.

판단 결과: 원본은 Object URL로 video 요소에 연결되고, 변환은 지연 로드된 Worker에서 진행됩니다. 완성된 Blob을 직접 내려받으면 사이트가 결과물을 보관할 단계가 생기지 않습니다.

단계별로 적용하는 방법

  1. 파일 선택 버튼을 누르면 브라우저의 운영체제 파일 선택기가 열리고, 사용자가 지정한 항목만 File 객체로 전달됩니다.
  2. 미리보기에는 파일 경로 대신 탭 안에서만 유효한 Object URL이 만들어집니다. 이 주소는 일반 웹 주소처럼 외부에서 접근할 수 없습니다.
  3. 이미지는 Canvas, 오디오 분석은 Web Audio, 영상·오디오 변환은 Worker의 ffmpeg.wasm이 우선 담당합니다.
  4. 처리가 끝나면 결과 Blob으로 다운로드 링크를 만들고, 파일 교체·초기화·페이지 종료 시 Object URL과 메모리 참조를 해제합니다.

비교해서 선택하기

로컬 처리와 서버 처리의 데이터 흐름
구분로컬 브라우저 처리일반적인 서버 변환
원본 이동선택한 탭의 메모리에 머묾네트워크를 통해 서버로 복사
처리 자원사용자 기기의 CPU·메모리서비스 제공자의 서버 자원
결과 보관사용자가 직접 저장서버 임시 저장 후 다운로드할 수 있음
큰 파일기기 메모리에 크게 좌우됨업로드 시간과 서버 제한에 좌우됨
오프라인성코어가 준비된 뒤 일부 가능대체로 인터넷 연결 필요

주의할 점

  • 브라우저 확장 프로그램, 악성 운영체제 소프트웨어, 화면 녹화 같은 사용자 환경까지 사이트가 통제할 수는 없습니다.
  • 탭을 새로고침하거나 닫으면 진행 중인 작업과 아직 저장하지 않은 결과가 사라질 수 있습니다.
  • 분석·광고 스크립트를 활성화할 때에도 파일 이름, 형식, 크기, 길이와 편집값이 이벤트에 섞이지 않는지 운영자가 별도로 검토해야 합니다.

기술적 한계와 브라우저 차이

  • ffmpeg.wasm 코어는 첫 작업 때 내려받으므로 네트워크가 느리면 준비 시간이 생기며, 코어를 받은 적 없는 완전한 오프라인 환경에서는 시작할 수 없습니다.
  • 모바일 브라우저는 백그라운드 탭의 CPU를 제한하거나 메모리가 부족한 탭을 예고 없이 종료할 수 있습니다.
  • File System Access API가 없는 Safari와 Firefox에서도 Blob 다운로드는 가능하지만 저장 위치 선택 경험은 브라우저마다 다릅니다.
FAQ

파일 업로드 없이 브라우저에서 미디어를 처리하는 원리 FAQ

파일 선택만 해도 자동으로 업로드되나요?

아닙니다. 이 사이트에는 미디어 업로드 API가 없으며 선택은 로컬 미리보기를 준비할 뿐입니다. 편집도 사용자가 처리 버튼을 눌러야 시작합니다.

파일 이름도 운영자가 볼 수 없나요?

사이트 구현은 파일 이름을 화면 표시와 결과 이름 생성에만 사용하고 분석 도구나 서버 요청에 넣지 않습니다. 다만 설치된 확장 프로그램 등 기기 환경은 별개의 권한을 가질 수 있습니다.

페이지를 닫은 뒤 결과를 다시 받을 수 있나요?

서버나 IndexedDB에 작업 파일을 보관하지 않으므로 다시 받을 수 없습니다. 닫기 전에 결과 다운로드가 끝났는지 확인해야 합니다.

인터넷 연결 없이도 사용할 수 있나요?

페이지 코드와 필요한 처리 코어가 이미 캐시에 있다면 일부 기능은 가능할 수 있지만 완전한 오프라인 동작을 보장하는 PWA는 아닙니다.

개발자 도구에서 로컬 처리 여부를 확인할 수 있나요?

Network 패널을 연 뒤 파일을 선택하고 처리해 보세요. 앱 자산이나 ffmpeg 코어 다운로드 외에 선택한 미디어가 요청 본문으로 전송되지 않아야 합니다.