피드로 돌아가기
Show GN: MMRequest - 혹시 vision LLM API 부를 때마다 손으로 base64 변환하시나요 - 빡쳐서 만든 Chrome 확장
GeekNewsGeekNews
Frontend

Show GN: MMRequest - 혹시 vision LLM API 부를 때마다 손으로 base64 변환하시나요 - 빡쳐서 만든 Chrome 확장

Client-side Base64 자동화로 Payload 크기를 300KB에서 1KB로 최적화한 LLM 요청 워크플로

acerghjk2026년 6월 1일2intermediate

Context

Multi-modal LLM API 호출 시 이미지 및 오디오 파일을 Base64로 수동 변환하여 Postman에 입력하는 반복적 프로세스 발생. 대용량 문자열 삽입으로 인한 에디터 성능 저하와 컬렉션 파일 크기 증가라는 구조적 한계 직면.

Technical Solution

  • FileReader API 기반의 브라우저 내부 처리 로직을 통해 외부 서버 전송 없는 보안성 확보
  • {{base64Image}}, {{base64Audio}} 변수 바인딩 방식을 통한 JSON 본문 추상화
  • Send 시점의 Network Boundary에서 변수를 실제 데이터로 치환하는 Late Binding 전략 채택
  • NDJSON, SSE, JSON array를 자동 감지하여 Chunk 단위 응답을 통합하는 Stream Aggregator 구현
  • 필드 단위 접기(Collapsible) 기능을 통한 대규모 Base64 Echo 응답의 렌더링 최적화
  • Postman Collection v2.1 표준 호환성을 통한 외부 도구 전송 가능성 유지

Impact

  • 컬렉션 파일 크기 300KB에서 1KB로 감소

Key Takeaway

데이터 전송 시점에 치환을 수행하는 Late Binding 설계를 통해 저장 공간의 효율성과 에디터 성능을 동시에 확보하는 최적화 패턴 도출.


- 대용량 바이너리 데이터를 JSON으로 다룰 때 저장소와 렌더링 영역을 분리하는 추상화 계층 검토 - 클라이언트 사이드 API 요청 도구 설계 시 데이터 바인딩 시점을 Network Layer로 지연시켜 UX 성능 개선

원문 읽기