Base64 문자열을 이미지 파일로 복원하는 방법
API 응답이나 이메일 소스, 브라우저 개발자도구 어딘가에서 data:image/png;base64,iVBORw0KGgo... 처럼 시작하는 긴 문자열을 본 적이 있을 것입니다. 이 문자열 자체는 사람이 읽을 수 없는 형태라서, 실제로 어떤 그림이 담겨 있는지 확인하려면 원래 이미지 파일로 되돌리는 과정이 필요합니다. 이 글은 그 이유와 되돌리는 방법을 정리합니다.
요약 ① JSON·XML 같은 텍스트 포맷은 바이너리를 직접 담을 수 없어서 이미지를 base64 문자열로 인코딩해 필드 하나에 넣습니다 ② data:image/png;base64,로 시작하는 문자열은 브라우저 주소창에 그대로 붙여넣으면 바로 렌더링됩니다 ③ 접두어 없는 순수 base64 문자열은 앞 몇 글자로 원본 포맷을 유추한 뒤 디코딩해야 파일로 열립니다
API 응답에 이미지가 파일 대신 base64 문자열로 오는 이유
개발자도구 네트워크 탭이나 API 응답 로그를 보다가 이미지 필드에 실제 URL이 아니라 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA... 처럼 시작하는 긴 문자열이 들어있는 걸 본 적이 있을 것입니다. OCR 결과, 이미지 생성 API, 이메일 HTML 소스 등에서 특히 자주 나타납니다. 문제는 이 문자열만으로는 실제로 어떤 그림이 담겨 있는지 눈으로 확인할 방법이 없다는 것입니다.
JSON이나 XML 같은 텍스트 기반 포맷은 원래 이미지 같은 바이너리 데이터를 그대로 담을 수 없습니다. 그래서 바이너리를 영문 대소문자, 숫자, 몇 개의 기호만으로 표현하는 base64 인코딩을 거쳐 텍스트로 바꾼 뒤 문자열 필드 하나에 밀어 넣는 방식을 씁니다. 받는 쪽에서는 이 문자열을 다시 원래 바이너리로 되돌려야 이미지로 볼 수 있습니다.
이 문자열은 수백에서 수만 자에 달해서 메모장에 붙여넣어도 의미 없는 글자 뭉치로만 보이고, 확장자도 없어서 더블클릭으로 열 수도 없습니다. 결국 코드를 짜서 디코딩하거나, 브라우저나 도구의 도움을 받아야 실제 이미지를 확인할 수 있습니다.
Base64 문자열을 이미지로 되돌리는 방법
문자열이 data:image/png;base64,로 시작하는 데이터 URI 형태라면 가장 빠른 방법은 크롬이나 엣지 주소창에 전체 문자열을 그대로 붙여넣는 것입니다. 대부분의 최신 브라우저는 주소창에 입력된 데이터 URI를 즉시 해석해 이미지를 렌더링해 보여줍니다. 파일로 저장하려면 렌더링된 이미지를 우클릭해 이미지를 다른 이름으로 저장을 선택하면 됩니다.
접두어 없이 순수 base64 문자열만 가지고 있다면 원래 이미지 포맷부터 알아내야 합니다. 문자열의 맨 앞 몇 글자만 봐도 포맷을 유추할 수 있는데, iVBORw0KG로 시작하면 PNG, 슬래시9제이슬래시(/9j/)로 시작하면 JPEG, R0lGOD로 시작하면 GIF입니다. 포맷을 알았다면 macOS·리눅스 터미널의 base64 디코딩 명령이나 파이썬의 base64 모듈로 디코딩한 뒤, 알아낸 확장자를 붙여 저장하면 이미지 파일이 됩니다.
다만 이 방법은 문자열 복사 과정에서 줄바꿈이나 공백이 섞여 들어가면 디코딩이 통째로 깨지기 쉽고, 확인할 때마다 터미널을 여는 것도 번거롭습니다.
저희 도구로 확인하기. 문자열을 입력창에 붙여넣기만 하면 형식을 자동으로 인식해 이미지를 미리 보여주고 파일로 저장할 수 있습니다.
가입 없이 무료로, 문자열만 붙여넣으면 이미지 미리보기부터 다운로드까지 한 번에 끝납니다.
자주 막히는 지점
| 상황 | 왜 그런지 |
|---|---|
| data:image/png;base64,로 시작하는데 주소창에 붙여도 안 열림 | 복사 과정에서 문자열 중간에 줄바꿈이나 공백이 섞여 들어가 문자열이 깨진 경우가 많습니다 |
| 접두어 없이 순수 base64 문자열만 있음 | 앞 몇 글자로 포맷을 유추할 수 있습니다 (iVBORw0KG는 PNG, 슬래시9제이슬래시는 JPEG, R0lGOD는 GIF) |
| 디코딩했는데 파일이 안 열림 | 확장자를 실제 포맷과 다르게 붙였거나 문자열 일부가 잘려서 복사된 경우입니다 |
| 원본 이미지보다 문자열이 유난히 김 | base64는 바이너리를 텍스트로 바꾸면서 용량이 원본보다 약 33퍼센트 늘어나는 인코딩 방식이라 원래 그렇습니다 |
정리
data:image로 시작하는 문자열은 브라우저 주소창에 그대로 붙여넣으면 바로 확인할 수 있습니다. 접두어 없는 순수 base64 문자열은 앞 글자로 포맷을 유추한 뒤 디코딩해야 파일이 됩니다. 줄바꿈이나 공백이 섞이면 디코딩이 깨지므로 문자열을 통째로 복사했는지 먼저 확인합니다. 매번 터미널을 열기 번거롭다면 붙여넣기 한 번으로 형식 인식과 미리보기, 다운로드까지 끝내는 편이 빠릅니다.
가입 없이 무료로, 문자열만 붙여넣으면 이미지 미리보기부터 다운로드까지 한 번에 끝납니다.
자주 묻는 질문
data:image/png;base64,... 문자열을 브라우저 주소창에 붙여넣으면 바로 열리나요?
네, 크롬이나 엣지 등 대부분의 최신 브라우저는 주소창에 데이터 URI를 붙여넣으면 즉시 해석해 이미지를 렌더링합니다. 다만 파일로 저장하려면 렌더링된 이미지를 우클릭해 다른 이름으로 저장해야 합니다.
접두어 없이 base64 문자열만 있으면 어떻게 확인하나요?
문자열 앞부분을 보고 포맷을 유추한 뒤(예를 들어 iVBORw0KG는 PNG) 그에 맞는 접두어를 붙여 디코딩하거나, 도구에 원본 포맷을 지정해 바로 디코딩하면 됩니다.
API는 왜 이미지를 파일 대신 base64 문자열로 응답하나요?
JSON은 텍스트 기반 포맷이라 바이너리 데이터를 그대로 담을 수 없기 때문입니다. 이미지 같은 바이너리를 안전한 텍스트로 바꾸는 base64 인코딩을 거쳐야 응답 안의 문자열 필드 하나에 포함시킬 수 있습니다.