웹사이트에 사진을 올리면 무조건 서버로 전송될까?

💻 브라우저에서 이미지 파일을 처리하면 서버에 업로드될까?

이미지를 압축하거나 다른 형식으로 변환하는 웹툴을 만들려고 하면 기능보다 먼저 고민하게 되는 부분이 있습니다.

사용자가 이미지를 선택한 다음, 그 이미지를 어디에서 처리할 것인가입니다.

저 역시 웹서비스에서 이미지를 처리하려면 일단 서버로 보낸 후, 서버에서 압축이나 변환을 한 뒤 다시 결과물을 사용자한테 제공하는 방식만을 알고 있었습니다.

다만, 개인적인 사진을 외부 서버에서 작업하는 것은 찝찝할 수 있기에, 다음과 같은 의문이 생겼습니다.

이미지 압축이나 변환을 꼭 서버에서 해야 할까?

이러한 의문에 대해 이미지 처리 시 서버로 전송하지 않는 방법을 공부해봤습니다.

지금부터 브라우저와 서버의 이미지 처리 방식과, 웹사이트에서 업로드한 사진이 어떻게 처리되는지 확인하는 방법에 대해 공유해 드리겠습니다.

📂 파일을 선택했다고 서버에 올라가는 것은 아닙니다

웹페이지에서 이미지를 선택하면 화면에 썸네일이나 파일명이 나타나기 때문에, 이미지가 웹사이트로 전송된다고 느껴질 수 있습니다.

하지만 파일을 선택하는 것과 서버에 파일을 업로드하는 것은 서로 다른 과정입니다.

파일 선택: 내 PC나 스마트폰에 있는 파일을 브라우저에서 사용할 수 있게 하는 과정

파일 업로드: 브라우저가 파일 데이터를 네트워크를 통해 서버로 전송하는 과정

사용자가 이미지를 선택하면 브라우저는 해당 파일을 읽고 필요한 작업을 수행할 수 있습니다. 이 단계만으로 원본 이미지가 서버로 전송되는 것은 아닙니다.

서버에서 이미지를 처리하려면 선택한 파일을 서버로 보내는 과정이 추가로 필요합니다. 반대로 브라우저에서 직접 처리하도록 만들면 파일을 서버로 보내지 않고도 이미지 압축이나 변환을 수행할 수 있습니다.

따라서 이미지 처리 웹툴을 사용할 때는 “이미지를 선택했다”는 사실만으로 서버에 원본 파일이 올라갔다고 판단할 수 없습니다.

결국 확인해야 할 것은 파일을 선택한 이후 실제로 어디에서 이미지 처리가 이루어지는가입니다.

🖼️ 브라우저 안에서도 이미지 처리가 가능합니다

그렇다면 서버로 보내지 않고 브라우저에서 이미지의 크기를 줄이거나 형식을 바꾸는 것은 어떻게 가능할까요?

브라우저에는 사용자가 선택한 파일을 웹페이지의 동작을 제어하는 JavaScript로 읽고 처리할 수 있는 기능이 있습니다.

이미지를 선택하면 JavaScript가 브라우저에서 파일을 읽고, 브라우저가 제공하는 Canvas 기능을 이용해 이미지를 그리거나 크기와 품질 등을 조절할 수 있습니다.

💡 참고

Canvas는 웹페이지에서 이미지나 그래픽을 그릴 수 있도록 브라우저가 제공하는 기능입니다. 이를 활용하면 이미지를 원하는 형태로 조절한 뒤 새로운 이미지 파일로 만들 수 있습니다.

전체적인 과정은 생각보다 단순합니다.

이미지 선택
   ↓
브라우저에서 이미지 읽기
   ↓
Canvas에 이미지 그리기
   ↓
이미지 크기·품질·형식 등을 변경
   ↓
새로운 이미지 데이터 생성
   ↓
다운로드

핵심은 이 과정에서 서버를 거치지 않고 브라우저에서 이미지 처리가 이루어질 수 있다는 점입니다.

예를 들어 JPG 이미지를 선택한 뒤 크기를 줄이거나 WebP으로 변환하는 작업도 서버에 보내지 않고 브라우저에서 처리하도록 만들 수 있습니다.

즉, 이미지 압축이나 포맷 변환처럼 사용자의 기기에서 처리할 수 있는 작업이라면 서버 없이도 기능을 구현할 수 있습니다.

그렇다면 여기서 또 하나의 의문이 생깁니다.

🧩 그렇다면 서버는 필요 없을까?

꼭 그렇지는 않습니다.

브라우저에서 이미지 처리가 가능하다는 것과 모든 이미지 처리를 브라우저에서 하는 것이 적합하다는 것은 다른 이야기입니다.

어떻게 처리할 지에 대해서는 이미지의 크기와 작업의 종류, 처리해야 하는 정보의 양, 추가적으로 필요한 서버 기능이 있는지 등을 종합적으로 살펴봐야 합니다.

결국 브라우저와 서버 중 어느 한쪽이 무조건 더 좋은 것은 아닙니다.

중요한 것은 만들려는 기능을 살펴보고 어디에서 처리하는 것이 사용자와 서비스에 더 적합한지를 결정하는 것입니다.

💡 기획 단계에서 확인할 것

① 이미지가 서버로 이동해야 하는가?

② 사용자의 기기에서 처리하기에 작업이 적절한가?

③ 서버에서 처리하거나 저장해야 할 기능이 있는가?

저 역시 용량·포맷·규격·여백·파일명 등을 일괄적으로 변환할 수 있는 ImagePrep 웹툴을 기획하면서 위 내용을 고민했었습니다. 다만, 별도의 서버를 두지 않는 정적 웹사이트 구조였기에, 웹 브라우저 내부에서 안전하게 처리하는 방향으로 개발을 진행했었습니다.

⚠️ 브라우저에서 처리할 때도 고려할 것이 있습니다

브라우저에서 처리하면 서버로 원본 이미지를 보내지 않아도 된다는 장점이 있지만, 모든 상황에서 더 좋은 것은 아닙니다.

가장 큰 차이는 처리하는 기기가 사용자의 기기이기에 처리 성능도 사용자의 기기에 영향을 받는다는 점입니다.

같은 이미지를 처리하더라도 고성능 PC와 오래된 스마트폰에서 처리 속도가 같을 수는 없습니다.
특히 이미지 크기가 크거나 한 번에 처리하는 파일이 많아지면 브라우저가 사용하는 메모리와 CPU 부담도 커질 수 있습니다.

따라서 브라우저 방식은 무조건 좋은 방법이라기보다 처리하려는 작업의 크기와 복잡도에 맞춰 선택해야 합니다.

간단한 이미지 압축·변환 → 브라우저 처리

무거운 연산·저장·서버 연동 → 서버 처리 고려

🔎 내 사진이 서버로 전송되는지 직접 확인하는 방법

웹툴에 사진을 선택했다고 해서 그 사진이 반드시 서버로 전송되는 것은 아닙니다.

그렇다면 내가 사용하는 웹툴이 사진 파일을 어떻게 처리하는지 직접 확인할 수 있을까요?

PC에서 Chrome이나 Edge를 사용한다면 F12를 눌러 개발자 도구를 열었을 때 Network 탭을 통해 확인할 수 있습니다.

사진을 선택했을 때, 사진 파일을 서버로 보내는 요청이 새로 생기는지만 확인하면 됩니다.

① 서버로 사진을 보내는 경우

사진을 선택한 뒤 Network 목록에 새로운 요청이 나타나고, 그 요청을 열었을 때 사진 파일이나 업로드 데이터가 포함되어 있다면 서버로 파일을 전송하는 방식일 가능성이 높습니다.

특히 POST나 PUT 요청이 나타나면서 Request / Payload 부분에 파일이 포함되어 있는지 확인하면 됩니다.

사진 선택
   ↓
서버로 파일 전송  ← Network에서 업로드 요청 확인
   ↓
서버에서 이미지 처리
   ↓
처리된 이미지 전달

② 브라우저에서 처리하는 경우

반대로 사진을 선택하고 압축이나 변환을 실행했는데 사진 파일을 서버로 보내는 업로드 요청이 보이지 않는다면, 브라우저에서 직접 처리하는 구조일 가능성이 높습니다.

이때 blob:으로 시작하는 항목이 나타날 수도 있습니다.

blob:은 서버에 있는 파일 주소가 아니라 브라우저에서 만들어진 데이터를 브라우저 안에서 사용하기 위해 만들어지는 주소입니다.

이에 대해 제가 만든 브라우저 기반의 이미지 일괄 변환 웹툴인 ImagePrep에서 직접 확인해봤을 때, blob:https://.. 형태의 항목과 0B의 전송량을 확인할 수 있습니다.

따라서 현재 확인한 ImagePrep의 이미지 처리 과정은 다음과 같이 볼 수 있습니다.

사진 선택 → 브라우저에서 이미지 처리 → 압축된 결과 생성 → 다운로드

즉, 사진을 서버로 보내 처리하는 방식인지, 브라우저에서 처리하는 구조인지 확인하려면 개발자 도구 Network탭을 이용하면 됩니다.

다만, 모든 경우에서 웹페이지 내 다른 네트워크 요청이 발생하지 않는다는 뜻은 아닙니다.

웹사이트는 이미지 처리와 별개로 웹페이지를 구성하는 파일이나 통계 기능 등을 위해 서버와 통신할 수 있습니다.

따라서 Network 탭을 확인할 때는 “요청이 하나라도 있는가?”가 아니라 “내가 선택한 사진을 서버로 보내는 요청이 있는가?”를 보는 것이 핵심입니다.

🎯 결국 중요한 것은 ‘처리 위치를 결정하는 것’입니다

이미지 압축이나 변환은 겉으로 보면 단순한 기능처럼 보이지만, 실제로 웹툴을 만들 때는 이미지를 어디에서 처리할지부터 결정해야 합니다.

브라우저에서 처리할 수 있는 작업이라면 굳이 원본 이미지를 서버로 보내지 않는 구조를 만들 수 있고, 반대로 저장이나 서버 연산처럼 서버가 필요한 기능이라면 파일을 전송하는 방식이 필요합니다.

결국 중요한 것은 브라우저와 서버 중 어느 한쪽을 선택하는 것 자체가 아닙니다.

💡 기능에 맞는 처리 위치를 선택하는 것

파일이 어디로 이동해야 하는지 → 어디에서 처리해야 하는지 → 서버가 정말 필요한지

이 순서로 생각해보면 이미지 처리 기능을 기획할 때도 훨씬 명확해집니다.

저 역시 이번 기능을 만들면서 단순히 “이미지를 압축하는 방법”만 고민했던 것이 아니라, 사용자가 선택한 사진이 어디에서 처리되고 어디로 이동하는지까지 기능의 일부로 생각해야 한다는 점을 알게 되었습니다.

결국 웹툴을 하나 만든다는 것은 화면에 기능을 추가하는 것만이 아니라, 사용자의 파일이 어떤 과정을 거쳐 결과물이 되는지까지 설계하는 일이었습니다.