[웹 지식] Blob 개념 + 실제 프로젝트 적용 예시

[Blob 개념 두 줄 요약] 브라우저에서 녹음하면 처음부터 파일이 Blob 형태로 존재한다. 그리고 이 Blob 형태를 통해서 안전하게 서버로 전송하고 서버는 이 Blob 형태를 받으면 mp3, wav 등 원하는 파일 포맷으로 저장하거나 변환이 가능하다!

 

 

웹에서 대용량 데이터를 다룰 때 자주 등장하는 개념이 바로 Blob(블롭)이다. 특히 오디오, 비디오, 이미지와 같은 비정형 대용량 파일을 다룰 때 필수적인 개념이다. 본 글에서는 Blob의 개념을 설명하고, 실제로 Blob이 어떻게 활용되는지를 AI 면접관 프로젝트 사례를 중심으로 설명하고자 한다!(SK AXIS 프로젝트)

블롭의 영단어 뜻을 직역하면 얼룩, 방울, 몰캉몰캉한 것을 의미한다

 

 

ㅁBlob(Binary Large Object): 큰 이진 객체 데이터

이는 텍스트가 아닌 다양한 멀티미디어 데이터를 저장하거나 전송할 때 사용되는 대표적인 데이터 형식이다

 

특징

• 크기 제한이 없다: 수백 MB~GB 단위의 데이터를 다룰 수 있다.
• 텍스트가 아닌 이진(binary) 형태이다.
• 브라우저에서 파일처럼 다룰 수 있다 - 다운로드, 업로드, URL 생성 등 가능하다

 

Blob은 언제 사용되는가?

1. 웹캠 녹화 데이터 저장

영상/음성 스트림을 Blob으로 저장해 서버에 업로드

 

2. 이미지 업로드

<input type="file">로 받은 이미지 파일도 내부적으로 Blob

 

3. 백엔드와 파일 통신

서버로 파일을 전송하거나 다운로드할 때 Blob 형태를 사용

 

4. 오프라인 저장소

IndexedDB, localStorage에 파일을 저장할 때 Blob 활용 가능

 

 

JavaScript에서의 Blob 생성 예시

const blob = new Blob(["Hello world!"], { type: "text/plain" });

 

 

위 코드는 단순한 텍스트를 Blob으로 감싼 예시이다 (실제 웹캠 녹화 등에서는 Blob에 음성/영상 데이터가 담기게 된다)

 

 

 

+ AI 면접관 프로젝트에서의 실전 적용

우리 팀은 AI 면접관 도우미 시스템에서 30분 분량의 면접 영상과 음성 데이터를 녹화하고 실시간으로 분석하는 기능을 개발하고 있다. 이 과정에서 Blob은 핵심적인 역할을 한다!

 

🎥 시스템 구조 요약

MediaRecorder → Blob 청크 생성 → 서버 전송 → Redis 저장 + STT 분석

 

실제 코드 예시 (MediaRecorder)

let chunks = [];

const mediaRecorder = new MediaRecorder(stream);

mediaRecorder.ondataavailable = (e) => {
  chunks.push(e.data); // e.data는 Blob이다
};

mediaRecorder.onstop = () => {
  const fullBlob = new Blob(chunks, { type: 'audio/webm' });

  const formData = new FormData();
  formData.append('file', fullBlob, 'interview_audio.webm');

  fetch('/api/upload', {
    method: 'POST',
    body: formData,
  });
};

 

위 구조는 면접 도중 실시간으로 Blob 청크를 수집하여 서버에 전송하는 방식이다

이렇게 하면 면접이 끝나는 즉시 PDF 리포트를 생성할 수 있도록 분석을 미리 병렬 처리할 수 있다.

 

 

Blob 활용의 장점 정리

• 실시간 처리 가능 (chunk 단위로 전송)
• 브라우저 친화적 (JavaScript에서 쉽게 사용 가능)
• 서버와 연동이 간편 (FormData와 함께 전송하면 끝)

 

마무리

Blob은 단순한 브라우저 API가 아니라, 실제 웹 기반 시스템에서의 실시간 데이터 처리의 핵심 기술 요소이다. 특히 AI 면접관 프로젝트처럼 음성/영상 데이터를 다루는 시스템에서는 Blob을 기반으로 실시간 스트리밍, STT 분석, 리포트 자동 생성 등 다양한 기능이 구현된다.

실무에서 대용량 데이터를 다룰 때에는 반드시 Blob 개념을 정확히 이해하고, 적절한 단위로 나누어 전송 및 처리하는 전략이 필요하다!