Base64 디코더

Base64란?#

Base64는 바이너리 데이터를 64개의 ASCII 문자(A–Z, a–z, 0–9, 그리고 + 와 /)만으로 이루어진 일반 텍스트로 표현하는 방법입니다. 이미지, 키, 이메일 첨부파일 같은 바이너리를 텍스트용으로 만들어진 시스템에서도 안전하게 전송할 수 있게 해줍니다. 이는 암호화가 아니라 인코딩입니다.

Base64는 64개 문자로 이루어진 고정된 알파벳을 사용합니다. 0부터 63까지의 각 값이 그중 정확히 한 문자에 대응하며, 이를 통해 임의의 3바이트 바이너리가 4개의 읽을 수 있는 문자가 됩니다:

거의 틀림없이 이미 본 적이 있을 것입니다. Base64는 바이너리를 텍스트 안에 실어 보내야 하는 곳이라면 어디에나 등장합니다:

• 작은 이미지나 아이콘을 HTML이나 CSS에 직접 삽입하기
• JSON API 응답 안에 바이너리 덩어리를 담아 반환하기
• 이메일 첨부파일 인코딩하기(MIME)
• 키와 인증서를 PEM 파일에 저장하기

그 data URI 기법은 이렇게 생겼습니다. 긴 문자열이 이미지 전체입니다:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Base64는 왜 존재하나요?#

초기 네트워크 프로토콜은 원시 바이트가 아니라 텍스트를 위해 만들어졌습니다. ASCII는 7비트와 128개 문자를 사용했는데, 영어에는 충분했지만 바이너리에는 그렇지 않았습니다. 일부 시스템은 제어 문자를 망가뜨리거나 줄바꿈 문자를 바꿔(LF를 CR + LF로) 전송 중에 이미지와 오디오를 조용히 손상시켰습니다.

Base64는 모든 시스템이 이미 공통으로 인정하는 문자만 내보냄으로써 이런 문제를 전부 피해 갑니다. Base16과 Base32도 더 작은 알파벳으로 같은 일을 하지만, Base64는 안전성을 유지하면서 문자당 더 많은 데이터를 담습니다. 그래서 널리 쓰이게 되었습니다.

Base64 인코딩의 작동 원리#

전체 방식은 하나의 아이디어를 반복하는 것입니다. 3바이트(24비트)를 가져와 6비트씩 4개의 그룹으로 다시 나누고, 각 그룹을 알파벳에서 찾는 것이죠. "Logto"라는 단어를 손으로 직접 인코딩해 보겠습니다.

1. 각 문자를 ASCII 코드를 이용해 8비트 2진수로 적습니다.
2. 3바이트씩 묶습니다. 이것이 24비트입니다.
3. 같은 24비트를 6비트씩 4개의 그룹으로 다시 나눕니다.
4. 각 6비트 그룹을 0부터 63까지의 숫자로 읽습니다.
5. 그 숫자를 알파벳에서 찾아 한 문자를 얻습니다.
6. 마지막 바이트 묶음이 3에 못 미치면, 남은 비트를 0으로 채우고 "="를 더해 모든 블록을 4문자로 유지합니다.

1단계. 각 문자를 8비트 2진수로 바꿉니다:

2단계. 처음 3바이트 "Log"를 가져와 그 같은 24비트를 6비트씩 4개의 그룹으로 다시 나눕니다:

3단계. 각 6비트 그룹을 숫자로 읽고, 그 숫자를 알파벳에서 찾습니다:

"Logto"는 5바이트로 3의 배수가 아닙니다. 마지막 두 바이트 "to"는 6 + 6 + 4로 나뉩니다. 마지막 4비트를 0으로 채워 6비트 그룹을 만들고, "="를 하나 더해 4문자 블록을 완성합니다:

블록을 이어 붙이면:

"Logto"  →  TG9ndG8=

모든 언어에 기본으로 내장되어 있습니다. Node.js에서는:

const text = 'Logto';
const base64 = Buffer.from(text).toString('base64');
console.log(base64); // TG9ndG8=

이 과정에서 기억해 둘 만한 세 가지 규칙이 나옵니다:

• 3개 들어가서 4개 나온다: 출력 길이는 입력을 4문자의 배수로 올림한 값입니다. 그래서 인코딩된 데이터는 항상 약 33% 더 큽니다.
• "="는 패딩을 뜻한다: 입력이 3바이트의 배수가 아닐 때만 나타납니다.
• 패딩은 남은 양을 알려준다: "=" 없으면 3바이트의 배수, "=" 하나면 남은 2바이트, "=" 둘이면 남은 1바이트를 뜻합니다.

Base64는 언제 사용해야 하나요?#

바이너리가 텍스트만 다루는 경로를 지나야 할 때 Base64를 사용하세요:

• 에셋 인라인 삽입: 작은 이미지나 폰트를 HTML/CSS에 삽입해 요청을 하나 줄입니다.
• 텍스트 전용 전송: 바이너리를 JSON, XML, 또는 URL 쿼리 파라미터 안에 넣습니다.
• 문자가 제한된 환경: 제어 바이트에서 막히는 시스템을 통해 데이터를 보냅니다.

그 대가로 얻는 것:

• 어디서나 동작한다: ASCII를 다룰 수 있는 시스템이라면 문자셋 협상 없이 읽을 수 있습니다.
• 아무것도 손상되지 않는다: 원시 바이트라면 망가질 경로에서도 출력은 그대로 살아남습니다.

URL 안전 Base64 (Base64URL)#

표준 Base64는 URL, 쿼리 문자열, 파일 이름의 동작 방식과 충돌하는 세 문자, 즉 +, /, 그리고 = 패딩에 의존합니다. 일반 Base64 문자열을 그대로 링크에 넣으면 눈에 띄지 않게 깨질 수 있습니다:

• +가 공백으로 바뀐다。쿼리 문자열에서 많은 서버가 +를 공백으로 읽습니다. 그래서 ?data=ab+cd가 조용히 "ab cd"로 도착해 바이트가 잘못됩니다.
• /는 경로 구분자다。값 안의 /는 새로운 경로 구간으로 읽힐 수 있고, 대부분의 파일 시스템은 파일 이름에 그대로 쓰는 것을 거부합니다.
• =도 예약되어 있다。쿼리 문자열에서 키와 값을 구분하는 문자라, 끝에 붙는 = 패딩은 잘리거나 잘못 읽힙니다.

퍼센트 인코딩으로 처리할 수도 있지만(+는 %2B, /는 %2F, =는 %3D), 문자열이 길어지고 실수로 이중 인코딩하기 쉽습니다.

Base64URL(RFC 4648 §5)은 이 문제를 근본에서 해결합니다. +를 -로, /를 _로 바꾸고 = 패딩을 없앱니다. 그 결과 아무것도 이스케이프하지 않고 URL, 쿼리 파라미터, 파일 이름에 그대로 넣을 수 있습니다. URL과 파일 이름, 많은 웹 API에서 볼 수 있습니다.

const base64 = 'TG9ndG8=';
const urlSafe = base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
console.log(urlSafe); // TG9ndG8

한계(그리고 한 가지 큰 오해)#

Base64는 표현 방식일 뿐, 공짜 점심이 아닙니다. 세 가지를 기억하세요:

• 약 33% 더 크다: 3바이트가 4문자가 되므로 인코딩된 데이터는 대략 3분의 1만큼 늘어납니다.
• CPU를 쓴다: 대량으로 처리하거나 큰 페이로드에서는 인코딩과 디코딩이 공짜가 아닙니다.
• 사람이 읽을 수 없다: 불투명한 문자열은 로그와 디버깅을 더 어렵게 만듭니다.

자주 묻는 질문#