Base64란?

Base64는 바이너리 데이터를 ASCII 문자열로 인코딩하는 방식입니다. 64개의 인쇄 가능한 문자(A-Z, a-z, 0-9, +, /)만을 사용하여 모든 종류의 데이터를 안전하게 텍스트로 표현할 수 있습니다.

왜 Base64를 사용하나요?

1. 이메일 전송

SMTP 프로토콜은 7비트 ASCII만 지원하므로, 바이너리 첨부 파일을 전송할 때 Base64가 필수입니다.

2. HTML/CSS 임베딩

Data URI를 사용하여 이미지를 HTML이나 CSS에 직접 포함할 수 있습니다.

<img src="data:image/png;base64,iVBORw0KG..." alt="이미지">

3. API 통신

JSON은 바이너리 데이터를 직접 지원하지 않으므로, Base64로 인코딩하여 전송합니다.

Base64 인코딩 과정

Base64 인코딩은 다음과 같은 단계로 이루어집니다:

원본 데이터를 8비트 바이트로 분할
6비트 단위로 재그룹화
각 6비트 값을 Base64 문자표에서 해당하는 문자로 변환
필요시 패딩(=) 추가

JavaScript에서 Base64 사용하기

인코딩 예제

// 인코딩
const encoded = btoa('Hello, World!');
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="

// 디코딩
const decoded = atob('SGVsbG8sIFdvcmxkIQ==');
console.log(decoded); // "Hello, World!"

한글 처리하기

btoa()는 Latin1 문자만 지원하므로, 한글은 별도 처리가 필요합니다:

// 한글 인코딩
function encodeKorean(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

// 한글 디코딩
function decodeKorean(str) {
  return decodeURIComponent(escape(atob(str)));
}

const korean = '안녕하세요';
const encoded = encodeKorean(korean);
console.log(encoded);

주의사항

데이터 크기 증가

Base64로 인코딩하면 데이터 크기가 약 33% 증가합니다. 원본 데이터 3바이트가 Base64에서는 4문자(4바이트)로 표현되기 때문입니다.

암호화가 아닙니다

Base64는 단순한 인코딩 방식입니다. 누구나 쉽게 디코딩할 수 있으므로, 보안이 필요한 경우 별도의 암호화를 사용해야 합니다.

성능 고려사항

큰 파일을 Base64로 인코딩하면 메모리 사용량이 크게 증가할 수 있습니다. 대용량 파일은 Web Worker를 사용하는 것이 좋습니다.

실제 사용 예시

이미지를 Base64로 변환

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

// 사용 예
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const base64 = await imageToBase64(file);
  console.log(base64);
});

마치며

Base64는 웹 개발에서 매우 유용한 도구입니다. 데이터 전송, 이미지 임베딩, API 통신 등 다양한 상황에서 활용할 수 있습니다.

당사의 Base64 변환 도구를 사용하면 텍스트, 이미지, 파일을 쉽게 Base64로 변환할 수 있습니다.

Base64란 무엇인가? 완벽 가이드