Base64에 대한 가벼운 고찰

base64로 인코딩된 이미지를 가지고 놀다가 문득 이 문자열이 어떻게 이미지로써 우리 눈에 보여지는지 궁금해져서 관련 자료를 찾아보았다.

Base64란 무엇인가?

Base64는 바이너리 데이터를 텍스트로 변환하는 인코딩 방식이다. 64개의 안전한 문자(A-Z, a-z, 0-9, +, /)를 사용하여 어떤 형태의 데이터도 일련의 문자열로 표현할 수 있게 해준다.

Base64의 작동 원리

1. 바이너리 데이터를 6비트씩 나눈다
2. 각 6비트를 Base64 문자표에 따라 해당하는 문자로 변환한다
3. 3바이트(24비트)마다 4개의 Base64 문자가 생성된다

M (77) : 01001101
a (97) : 01100001
n (110): 01101110

=> 010011 010110 000101 101110
=> T      W      F      u

결과: "Man" -> "TWFu"

프론트엔드에서의 Base64 활용

1. 이미지 인라인 처리
   작은 이미지를 Base64로 인코딩하여 HTML이나 css에 직접 삽입이 가능하다.
   http 요청을 줄인다는 장점이 있지만 파일 크기는 33% 정도 증가한다.

.logo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==');
}

2. 파일 업로드 미리보기
   사용자가 선택한 이미지를 서버에 업로드하기 전에 Base64로 인코딩하여 썸네일을 제공할 수 있다.

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onloadend = () => {
    const base64String = reader.result;
    document.getElementById('preview').src = base64String;
  };
  reader.readAsDataURL(file);
});

여담

Base64는 인코딩 방식일 뿐이라 암호화에는 적합하지 않다.
누구나 쉽게 디코딩을 할 수 있기 때문에 쉽게 원래 형태로 복원이 가능하다.

Base64로 인코딩된 데이터는 네트워크 전송 시 안정성이 높고, 데이터 손실을 방지하는 장점이 있기에 사용한다.

상황에 따라 적절하게 사용하는게 좋겠다~