Base64 텍스트를 이미지 파일로 복원하는 방법 완벽 가이드

OpenAI 달리(DALL-E)나 스테이블 디퓨전 같은 생성형 AI API를 호출하거나, OCR 문자 인식 API, 또는 이메일 소스코드를 뜯어보다 보면 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...' 로 시작하는 수만 글자의 알 수 없는 텍스트 덩어리를 마주하게 됩니다.

이 긴 문자열은 단순한 오류 코드가 아니라, 이미지 파일 전체가 통째로 텍스트로 인코딩된 Base64 데이터입니다.

접두사(Prefix) 없는 순수 Base64 문자열에서 앞 몇 글자(매직 바이트)만으로 PNG/JPG 포맷을 식별하는 방법, 브라우저에서 1초 만에 실제 사진으로 미리 보고 파일(.png, .jpg)로 다운로드하는 디코딩 파이프라인을 완벽히 정리해 드립니다.

핵심 요약 ① 시작 글자로 포맷 판별: 'iVBORw0KG'는 PNG, '/9j/'는 JPEG, 'R0lGOD'는 GIF, 'UklGR'은 WebP 파일의 고유한 Base64 시그니처입니다. ② Data URI vs 순수 Base64: 'data:image/...;base64,' 접두사가 없어도 본 도구는 매직 바이트를 자동 분석하여 올바른 이미지 확장자로 복원합니다. ③ 줄바꿈·공백 자동 정제: API 응답 복사 시 섞여 들어간 줄바꿈( , )과 공백을 자동 제거하여 디코딩 에러를 원천 차단합니다. ④ 100% 로컬 Blob 생성: 서버 업로드 없이 브라우저 메모리 안에서 바이너리 Blob 객체를 생성하여 초고속으로 이미지 파일을 내려받습니다.

Base64 문자열의 시작 5글자로 이미지 포맷 판별하는 법

접두사(data:image/png;base64,)가 누락된 순수 Base64 문자열이라도, 첫 몇 글자만 보면 어떤 이미지 파일인지 0.1초 만에 알 수 있습니다. 모든 이미지 파일의 첫 2~4바이트에 고정된 **매직 넘버(Magic Bytes)**가 존재하기 때문입니다:

• iVBORw0KG... ➔ PNG 파일: PNG 파일의 매직 바이트 0x89 0x50 0x4E 0x47 (.PNG)이 Base64로 변환되면 항상 iVBOR로 시작합니다.
• /9j/... ➔ JPG / JPEG 파일: JPEG 파일의 시작 바이너리 0xFF 0xD8 0xFF (SOI)가 Base64로 인코딩되면 항상 /9j/로 시작합니다.
• R0lGOD... ➔ GIF 파일: GIF 헤더 문자열 GIF89a 또는 GIF87a가 Base64로 바뀌면 항상 R0lGOD로 시작합니다.
• UklGR... ➔ WebP 파일: RIFF 컨테이너 기반 WebP의 매직 바이트 RIFF가 Base64로 변환되면 UklGR로 시작합니다.

Base64 문자열을 이미지 파일로 복원하는 3가지 방법

1. 방법 1 (브라우저 주소창 붙여넣기): data:image/png;base64,... 전체를 크롬/엣지 주소창에 넣으면 즉시 이미지가 뜨며, 우클릭하여 '다른 이름으로 저장'할 수 있습니다. (단, 문자열이 수만 자 이상으로 너무 길면 주소창 길이 제한으로 잘릴 수 있습니다.)
2. 방법 2 (본 웹 복원기 이용 - 가장 안전): 문자열을 복사해 넣으면 포맷을 자동 감지하여 1초 만에 화면에 띄워주고 고화질 파일로 원클릭 다운로드합니다.
3. 방법 3 (터미널 CLI 명령어): 리눅스/맥OS 터미널에서 echo "iVBORw..." | base64 -d > result.png 명령어로 복원합니다.

직접 해보기 →

📖 AI 개발 및 웹 백엔드 실무에서 겪는 Base64 복원 사연

사연 1: 이미지 생성 AI API 결과값을 파일로 저장 못 해 쩔쩔맨 주니어 개발자

AI 챗봇 서비스를 개발하던 A씨는 Stability AI API로부터 이미지 생성 응답을 받았습니다. URL 링크가 올 줄 알았는데 수만 자의 Base64 텍스트만 JSON으로 날아와 화면에 띄우지 못하고 멘붕에 빠졌습니다. data:image/png;base64, Data URI 스키마를 붙여 브라우저 Blob으로 렌더링하는 법을 익힌 뒤 무사히 갤러리 다운로드 기능을 완성했습니다.

사연 2: 복사 중 공백이 섞여 "손상된 이미지" 에러로 밤샘한 퍼블리셔

B 퍼블리셔는 디자이너가 슬랙으로 보내준 Base64 문자열을 복사해 HTML에 넣었습니다. 이미지가 엑박으로 깨져 수 시간을 헤맸는데, 슬랙 메시지 복사 과정에서 76자마다 자동 개행(줄바꿈)과 공백이 삽입된 것이 원인이었습니다. 정규식 replace(/s/g, '')로 공백을 깨끗이 지우자마자 정상적인 로고가 출력되었습니다.

사연 3: DB에 저장된 유저 서명 Base64를 영수증 PDF로 출력한 ERP 개발팀

C 개발팀은 전자계약 시스템 DB에 텍스트로 저장된 수만 건의 고객 자필 서명(Base64)을 세금계산서 PDF에 인쇄해야 했습니다. 본 도구의 Blob 디코딩 로직을 백엔드 파이프라인에 적용하여 텍스트 서명을 고해상도 투명 PNG 파일로 실시간 변환해 인쇄 품질을 확보했습니다.

🔬 핵심 기술 메커니즘 — Base64 ➔ Uint8Array ➔ Blob 메모리 파이프라인

브라우저가 텍스트를 메모리 상의 실제 이미지 파일로 역변환하는 자바스크립트 내부 파이프라인입니다.

1. 6비트 역매핑 및 바이트 버퍼 복원

javascript function base64ToBlob(base64Data, contentType = "image/png") { // 1. Data URI 접두사 및 공백 제거 const cleanBase64 = base64Data.replace(/^data:image/w+;base64,/, "").replace(/s/g, "");

// 2. atob() 함수로 바이너리 문자열 디코딩 const byteCharacters = atob(cleanBase64); const byteNumbers = new Array(byteCharacters.length);

// 3. 8비트 부호 없는 정수 배열(Uint8Array) 생성 for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers);

// 4. 불변 바이너리 파일 객체(Blob) 생성 return new Blob([byteArray], { type: contentType }); }

2. 메모리 Object URL 생성 및 자동 다운로드

• 생성된 Blob 객체에 URL.createObjectURL(blob)을 부여하여 브라우저 가상 파일 경로(blob:https://...)를 만듭니다.
• 동적으로 태그를 생성해 클릭 이벤트를 발생시키면 서버 통신 없이 100% 로컬 파일 저장이 완료됩니다.