View JS N

JSON API 응답에서 Base64 이미지를 디버깅하는 방법

2026년 2월 22일 · 5분 읽기

JSON 속 Base64의 문제점

멀티모달 AI API — 이미지 생성, OCR, 텍스트 음성 변환 — 는 일반적으로 JSON 응답 안에 미디어를 Base64 인코딩 문자열로 포함하여 반환합니다. 기존 JSON 뷰어는 이를 일반 텍스트로 처리하기 때문에, 끝없는 인코딩 문자의 벽만 보이고 실제 내용은 확인할 수 없습니다.

일반적인 해결 방법은 여러 단계가 필요합니다: Base64 필드를 찾고, 문자열을 복사하고, 별도의 디코더 웹사이트를 열고, 붙여넣고, 디코딩하고, 다운로드합니다. 필드가 하나라면 번거로운 수준이지만, Base64 값이 여러 개인 응답의 경우 심각한 병목이 됩니다.

일반적인 AI API 응답의 형태

다음은 여러 이미지 변형이 포함된 DALL·E 이미지 생성 응답의 간략한 예시입니다:

{
  "created": 1709055842,
  "data": [
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgAAA...",
      "revised_prompt": "A serene mountain landscape at sunset"
    },
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgBBB...",
      "revised_prompt": "A serene mountain landscape at sunrise"
    },
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgCCC...",
      "revised_prompt": "A serene mountain landscape at noon"
    }
  ]
}

"b64_json" 필드에는 Base64로 인코딩된 완전한 PNG 이미지가 들어 있습니다. 일반 JSON 뷰어에서는 세 개의 긴 텍스트 벽이 보일 뿐입니다. 각각을 개별적으로 디코딩하지 않고는 내용을 확인하거나 비교하거나 유효한 이미지인지 판단할 수 없습니다.

더 나은 방법: 자동 감지 및 인라인 미리보기

ViewJSON은 JSON 속 Base64 인코딩 미디어를 자동으로 감지하여 인라인 미리보기를 렌더링합니다 — 이미지는 썸네일로, 오디오는 재생 가능한 클립으로, 동영상은 내장 플레이어로, PDF는 문서 미리보기로 표시됩니다.

데모: Base64 콘텐츠가 포함된 JSON을 ViewJSON에 붙여넣으면 인라인 미디어 미리보기가 표시됩니다

감지 원리는 무엇인가요?

ViewJSON은 필드 이름이나 문자열 길이로 추측하지 않습니다. 대신 운영체제가 파일 유형을 식별할 때 사용하는 것과 동일한 기법인 매직 넘버 감지를 사용합니다.

처리 과정은 다음과 같습니다:

  1. JSON의 각 문자열 값에 대해 ViewJSON은 Base64 콘텐츠의 처음 64바이트만 디코딩합니다
  2. 해당 바이트를 알려진 파일 형식 시그니처(매직 넘버) 라이브러리와 비교합니다
  3. 일치하는 항목이 발견되면(예: PNG의 경우 89 50 4E 47, JPEG의 경우 FF D8 FF) 해당 미리보기를 렌더링합니다

이 방식은 빠릅니다. 감지를 위해 처음 64바이트만 디코딩하기 때문에 100MB Base64 문자열도 1밀리초 이내에 식별됩니다. 전체 콘텐츠는 실제로 미리보기를 펼칠 때만 디코딩됩니다.

지원 형식

ViewJSON은 현재 15개 이상의 미디어 형식을 감지하고 미리볼 수 있습니다:

🖼️ 이미지

PNG, JPEG, GIF, WebP, BMP, ICO

🎵 오디오

MP3, WAV, OGG, M4A, FLAC

🎬 동영상

MP4, WebM, AVI, MOV

📄 문서

PDF

단계별 가이드: API 응답 디버깅

  1. ViewJSON 열기viewjson.net에 접속합니다
  2. JSON 붙여넣기 — 터미널, Postman 또는 코드에서 전체 API 응답을 복사하여 편집기에 붙여넣습니다. 잘못된 형식의 JSON(후행 쉼표, 주석, 따옴표 없는 키)은 자동으로 복구됩니다.
  3. 미리보기 확인 — Base64 필드가 자동으로 감지됩니다. 감지된 미디어 필드 옆의 눈 아이콘(👁)을 클릭하면 인라인 미리보기를 토글할 수 있습니다.
  4. 출력 비교 — 모든 미리보기를 표시한 상태에서 JSON을 스크롤하면 여러 이미지를 나란히 비교할 수 있습니다. 추가 도구가 필요 없습니다.
  5. 팀과 공유 — 공유 버튼을 사용하여 JSON 구조가 포함된 압축 URL을 생성합니다. 매우 큰 Base64 페이로드는 URL 길이 제한으로 인해 공유 링크에서 잘릴 수 있습니다.

어떤 경우에 가장 유용한가요?

  • DALL·E / Stable Diffusion 출력 검증 — 이미지 생성 API는 여러 Base64 변형을 반환하는 경우가 많습니다. ViewJSON을 사용하면 각각을 개별 디코딩하지 않고도 모든 이미지를 나란히 보고 최적의 결과를 선택할 수 있습니다.
  • OCR 크롭 영역 검사 — 배치 OCR 파이프라인은 수십 개의 크롭된 이미지 영역을 Base64로 반환합니다. 인라인으로 확인하면 정렬이 틀리거나 잘못 크롭된 영역을 즉시 발견할 수 있습니다.
  • TTS 음성 변형 비교 — 음성 합성 API에서 다양한 목소리나 발화 스타일을 테스트할 때 JSON 안에서 각 오디오 클립을 직접 재생하여 비교할 수 있습니다.
  • HTTP 캡처 리뷰 — Postman이나 Fiddler 요청 기록의 JSON을 붙여넣어 인코딩된 문자열을 스크롤하는 대신 실제 전송되거나 수신된 미디어를 확인하세요.

개인정보 보호

모든 처리는 브라우저에서 이루어집니다. JSON 및 Base64 데이터는 어떤 서버로도 전송되지 않으므로 독점 API 응답이나 민감한 콘텐츠에도 안전하게 사용할 수 있습니다.

지금 바로 사용해 보세요

Base64 콘텐츠가 포함된 JSON을 붙여넣으면 모든 이미지를 보고, 모든 오디오를 듣고, 모든 동영상을 재생할 수 있습니다. 즉시.

ViewJSON 열기 →