Spring Boot와 Vue.js를 활용한 Base64 이미지 처리

이미지 파일을 웹 클라이언트에 전송하는 방법에는 여러 가지가 있습니다. 그중 Base64 인코딩을 활용한 이미지를 전송하고 처리하는 방식은 간단하면서도 효율적인 경우가 많습니다. 이 글에서는 Spring Boot WAS(웹 애플리케이션 서버)에서 Base64로 인코딩된 이미지를 제공하고, Vue.js 기반 웹 서버에서 이를 처리해 웹 브라우저에 이미지를 표시하는 방법을 자세히 설명하겠습니다.

Base64 인코딩이란?

Base64는 바이너리 데이터를 텍스트로 변환하는 인코딩 방식입니다. 이미지 파일을 Base64로 변환하면 텍스트 문자열 형태로 전송할 수 있기 때문에 REST API 응답 본문에 포함하거나 JSON 형식으로 데이터를 주고받기에 유용합니다. 다만, Base64는 바이너리 데이터보다 약 33% 더 많은 용량을 차지한다는 점을 고려해야 합니다.

Spring Boot에서 Base64 이미지 제공하기

Spring Boot에서 이미지 파일을 읽고 Base64로 인코딩한 문자열로 반환하는 방법을 살펴보겠습니다.

1. 이미지 파일 읽기 및 Base64 인코딩

import org.springframework.core.io.ClassPathResource;
import org.springframework.util.Base64Utils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

@RestController
@RequestMapping("/api/images")
public class ImageController {

    @GetMapping("/base64")
    public String getImageAsBase64() throws IOException {
        // 이미지 파일 경로 설정 (예: resources/static/images/sample.jpg)
        Path imagePath = Paths.get(new ClassPathResource("static/images/sample.jpg").getURI());
        byte[] imageBytes = Files.readAllBytes(imagePath);
        return Base64Utils.encodeToString(imageBytes);
    }
}

위 코드는 sample.jpg 파일을 읽어 Base64 문자열로 변환한 후 반환합니다. 이 문자열은 JSON 응답으로 클라이언트에 전달됩니다.

Vue.js에서 Base64 이미지 처리

Vue.js에서 Spring Boot API로부터 전달받은 Base64 이미지를 처리하고 웹 브라우저에 표시하는 방법은 다음과 같습니다.

1. Base64 문자열 요청 및 처리

<template>
  <div>
    <h1>Base64 이미지 표시</h1>
    <img v-if="imageSrc" :src="imageSrc" alt="Base64 이미지" />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageSrc: ''
    };
  },
  mounted() {
    this.fetchImage();
  },
  methods: {
    async fetchImage() {
      try {
        const response = await axios.get('/api/images/base64');
        this.imageSrc = `data:image/jpeg;base64,${response.data}`;
      } catch (error) {
        console.error('이미지 로드 오류:', error);
      }
    }
  }
};
</script>

2. Blob URL로 변환하여 처리 (선택 사항)

Base64 대신 Blob 객체로 변환하여 이미지 URL을 생성할 수도 있습니다. 이는 메모리 사용량을 줄이고 더 효율적으로 이미지를 렌더링할 수 있습니다.

async fetchImageAsBlob() {
  try {
    const response = await axios.get('/api/images/base64');
    const base64String = response.data;
    const binary = atob(base64String);
    const array = new Uint8Array(binary.length);
    for (let i = 0; i < binary.length; i++) {
      array[i] = binary.charCodeAt(i);
    }
    const blob = new Blob([array], { type: 'image/jpeg' });
    this.imageSrc = URL.createObjectURL(blob);
  } catch (error) {
    console.error('Blob 이미지 로드 오류:', error);
  }
}

Base64와 Blob URL 비교

Base64는 텍스트 형태로 데이터를 전송하기 때문에 API 간 데이터 교환에 편리하지만, 이미지 크기가 커질수록 성능 이슈가 발생할 수 있습니다. 반면, Blob URL은 브라우저의 메모리에 객체를 저장해 더 효율적으로 이미지 파일을 관리할 수 있습니다.

장단점 요약

방식	장점	단점
Base64	데이터 전송이 간단하고 JSON과 호환 가능	데이터 크기가 증가하고 메모리 부담
Blob URL	브라우저 메모리 사용으로 성능이 더 우수	Blob 객체 생성 및 관리 코드가 필요

결론

Spring Boot와 Vue.js를 활용하여 Base64 이미지를 처리하는 방법은 간단한 설정과 코드로 빠르게 구현할 수 있는 장점이 있습니다. 그러나 성능과 데이터 크기를 고려하여 적합한 방식(Base64 또는 Blob)을 선택하는 것이 중요합니다. 이 글의 내용을 바탕으로 여러분의 프로젝트에서 효율적으로 이미지를 전송하고 표시할 수 있기를 바랍니다.