Blob(Binary Large Object)

 

Blob이란?

• Blob(Binary Large Object) : 브라우저에서 로컬 파일을 메모리에 저장한 상태로 다루는 방식
• 이미지, 비디오 등 대용량 바이너리 데이터를 임시로 다룰 때 사용 됨.
• 일반적인 URL이 아닌 blob:으로 시작하는 임시 URL(blob URL)을 가짐

 

Blob이 사용되는 주요 프로세스 (이미지 업로드 기준)

(1) 파일 업로드 시 Blob URL 생성

• 사용자가 파일을 업로드하면 브라우저에서 해당 파일을 Blob 형태로 메모리에 저장.
• URL.createObjectURL(file)을 사용해 blob URL을 생성하여 UI에서 미리보기 가능

(2) Blob URL을 사용하여 UI에 미리보기 표시

• Blob URL을 <img> 태그에 적용하여 사용자가 업로드한 이미지를 미리볼 수 있음.
• 하지만 Blob URL은 임시 URL이므로, 새로고침하거나 세션이 변경되면 사라짐

(3) Blob 데이터를 서버에 업로드 (AWS 등 저장소에 저장)

• Blob 자체는 임시 객채이므로, 업로드 API를 사용해 서버에 저장해야 함
• 서버에 업로드가 성공하면 정식 URL(AWS S3, CDN 등)로 변환됨

(4) 서버에서 정식 URL 반환 후, Blob URL 대체

• 업로드가 성공하면 서버에서 제공하는 정식 URL을 UI에 반영하고, 기존 Blob URL을 대체
• 업로드 실패 시, 기존 Blob URL이 그대로 남거나 기본 이미지로 대체해야 함

(5) Blob URL 해제 (메모리 정리)

• 사용이 끝난 Blob URL은 URL.revokeObjectURL(blockURL)을 호출하여 메모리에서 해제

 

Blob을 사용하는 이유

Blob은 빠른 미리보기, 성능 최적화, 대용량 파일 처리, 보안 보호를 위해 사용된다. 사용자 경험과 시스템 성능을 동시에 개선하는 핵심 기술이라고 할 수 있다.

 

(1) 브라우저에서 로컬 파일을 다룰 수 있도록 하기 위해

• Blob은 사용자의 로컬 파일을 브라우저에서 직접 미리보기할 수 있도록 함
• 일반적으로 웹에서 이미지를 표시하려면 서버에 업로드된 URL이 필요하지만, Blob을 사용하면 업로드하지 않아도 브라우저에서 바로 미리보기 가능.
• 사용자에게 빠른 피드백을 제공하므로 UXUI 측면에서 사용성 증가

(2) 네트워크 부하를 줄이기 위해 (즉시 미리보기 & 불필요한 업로드 방지)

• Blob을 사용하면 불필요한 네트워크 요청 없이 파일을 브라우저에서 처리 가능
• 네으쿼으 요청 없이 로컬에서 미리보기 가능하여 속도를 개선할 수 있음
• 사용자가 여러 개의 파일을 선택한 후 최종적으로 업로드할 파일을 고를 수 있음 → 불필요한 업로드 방지

(3) 대용량 파일을 효율적으로 처리하기 위해

• Blob을 사용하면 대용량 파일을 부분적으로 다룰 수 있음
• 비디오, 오디오, 이미지 등의 대용량 데이터를 스트리밍 형태로 처리 가능
• 예를 들어, 파일을 조각(chunk) 단위로 나누어 업로드하거나 다운로드할 수 있음
• 대용량 파일을 한 번에 업로드하면 네트워크 오류가 발생할 수 있으며, Blob을 사용하면 대용량 데이터를 부분적으로 다루면서 성능을 최적화할 수 있는 것.

(4) 보안 및 프라이버스 보호 (로컬 파일 직접 접근 방지)

• Blob은 브라우저 내에서만 접근 가능하고, 외부에서 직접 접근할 수 없음
• blob: URL은 로컬에서만 유효하며, 다른 웹사이트나 서버에서 직접 액세스 불가
• 사용자의 파일이 외부에 유출되지 않도록 보호

(5) 데이터를 로컬에서 다운로드할 때 용이

• Blob을 사용하면 JavaScript에서 바로 파일을 생성하여 다운로드 가능
• 예를 들어, 사용자가 작성한 데이터를 CSV, PDF 등의 파일로 변환하여 제공할 때 유용

 

Blob 기술의 등장과 역사

Blob(Binary Large Object) 개념

• 원래는 데이터베이스(DB)에서 대용량 바이너리 데이터를 저장하는 개념에서 출발
• 웹에서는 HTML5의 File API와 함께 등장하여 브라우저 내에서 바이너리 데이터를 다룰 수 있는 방식으로 발전

Blob URL(blob: 스킴)의 등장

• 2011년 HTML File API가 등장하면서 브라우저에서 지원되기 시작
• 크롬, 파이어폭스, 사파리, 엣지 등 대부분의 브라우저에서 지원.
• 기존에는 파일을 업로드하기 전에 미리보기하거나, 바이너리 데이터를 조작하는 것이 어려웠지만, Blob이 등장하면서 가능해짐

 

관련 이슈와 해결 방안

Blob URL이 그래도 남아 있음 (정식 URL 대체 실패 시 발생 가능)

• 브라우저에서 생성된 Blob URL은 임시 URl이며, 서버에 업로드한 후 정식 URL로 대체되어야 함
• 하지만 정식 URL로 변경하는 과정에서 실패하면 Blob URL이 그대로 남고, 페이지가 새로고침 되면 Blob URL은 더 이상 유효하지 않기 때문에 썸네일이 깨지는 문제가 발생

해결 방안

• 정식 URL 대체가 실패하면 URL을 기존 이미지로 자동 대체하는 로직 적용
• 업로드 프로세스에서 Blob URL을 정식 URL로 대체하는 과정이 정상적으로 실행되었는지 검증하는 로깅 추가

 

Blob을 사용하지 않는 것이 좋은 경우 (비효율적인 경우)

(1) 서버에서 직접 제공하는 정적 파일이 있는 경우

• Blob URL은 브라우저 내에서만 유효하고, 외부 서버에서 직접 접근할 수 없음
• 서버에 있는 정적 이미지, PDF, 비디오 등을 그대로 제공할 수 있다면 굳이 Blob을 사용하지 않고 정식 URL을 사용하는 것이 효율적임

(2) 장기적으로 데이터를 유지해야 하는 경우

• Bloc URL은 브라우저 세션이 종료되면 유효하지 않음.
• 데이터를 장기적으로 유지하려면 서버에 저장하는 것이 필요.