사용 방법
“방향”에서 “인코딩”과 “디코딩” 중 하나를 고릅니다.
- 인코딩: “입력 종류”가 “텍스트”이면 “원문 텍스트”에 넣은 글이 “Base64 결과”로 나옵니다.
Hello는SGVsbG8=,café는Y2Fmw6k=입니다. “파일”로 바꾸면 파일을 올리는 칸이 나옵니다. - 디코딩: “Base64 문자열”에 Base64나
data:URL을 넣으면 “디코딩 결과”에 원래 글이 나옵니다.
결과 옆의 “결과를 디코딩 입력으로”와 “결과를 인코딩 입력으로”는 방금 나온 결과를 반대 방향의 입력으로 옮겨 줍니다. 인코딩한 것을 바로 되돌려 원문과 같은지 확인할 때 씁니다.
“URL-safe (-_, 패딩 없음)” 체크박스는 텍스트 인코딩과 디코딩에 함께 적용됩니다. 파일 인코딩에는 이 옵션이 없습니다.
글자가 아니라 바이트를 옮깁니다
Base64는 바이트 3개를 글자 4개로 바꾸는 표기법입니다. 그래서 텍스트를 인코딩하려면 먼저 글자를 바이트로 바꿔야 하고, 이 도구는 그때 항상 UTF-8을 씁니다. UTF-8에서 €는 3바이트이므로 Base64로는 정확히 4글자인 4oKs가 됩니다.
바이트 수가 3의 배수가 아니면 끝에 =를 붙여 4글자 단위를 채웁니다. 이것이 패딩입니다.
| 원문 | 바이트 수 | Base64 결과 |
|---|---|---|
a |
1 | YQ== |
ab |
2 | YWI= |
abc |
3 | YWJj |
€ |
3 | 4oKs |
😀 |
4 | 8J+YgA== |
바이트 3개가 글자 4개가 되므로 결과는 원본보다 3분의 1쯤 길어집니다. 파일을 data URL로 바꿔 HTML이나 CSS에 넣을 때 용량이 그만큼 늘어난다는 뜻입니다.
브라우저의 기본 함수 btoa는 코드 포인트 0 ~ 255 범위의 글자만 받기 때문에 €나 이모지처럼 그 범위를 벗어난 글자가 들어간 문자열에서는 오류를 냅니다. 이 도구는 그 함수를 쓰지 않고 UTF-8 바이트를 직접 변환하므로 어떤 글자든 인코딩하고, 디코딩에서도 UTF-8로 되돌립니다.
URL-safe 옵션이 바꾸는 것
표준 Base64는 영문 대소문자와 숫자 외에 +와 / 두 글자를 쓰고 패딩으로 =를 씁니다. 셋 다 URL에서 다른 뜻으로 쓰이는 글자여서, 주소나 쿼리 값, 파일 이름에 넣으려면 “URL-safe (-_, 패딩 없음)“을 켭니다. JWT(JSON Web Token)가 이 표기를 씁니다.
| 원문 | 옵션 끔 | 옵션 켬 |
|---|---|---|
>>>??? |
Pj4+Pz8/ |
Pj4-Pz8_ |
a |
YQ== |
YQ |
디코딩할 때 옵션을 맞춰야 하는 것은 문자열에 +, /나 -, _가 들어 있을 때입니다. Pj4-Pz8_를 옵션을 끈 채 넣으면 쓸 수 없는 문자 -가 있다는 오류가 나고, Pj4+Pz8/를 옵션을 켠 채 넣으면 +에서 같은 오류가 납니다. 네 글자가 하나도 없는 SGVsbG8= 같은 문자열은 어느 쪽으로도 디코딩됩니다. 패딩은 옵션과 상관없이 있어도 되고 없어도 됩니다(SGVsbG8도 Hello로 읽습니다).
파일을 data URL로, Base64를 다시 파일로
“입력 종류”를 “파일”로 바꾸면 파일 하나를 끌어다 놓거나 고를 수 있습니다. 형식은 가리지 않고 크기는 10MB까지입니다. 결과는 data:image/png;base64,iVBORw0KG...처럼 파일 형식이 앞에 붙은 data URL이며, HTML의 img 태그나 CSS의 url()에 그대로 넣을 수 있습니다. 브라우저가 형식을 알아내지 못한 파일은 application/octet-stream으로 표시됩니다. data URL은 URL-safe 표기를 쓰면 브라우저가 읽지 못하므로 항상 표준 표기와 패딩으로 만듭니다.
반대 방향은 디코딩에서 합니다. Base64나 data URL을 넣으면 결과 옆에 다운로드 버튼이 생기고, 텍스트가 아닌 내용도 파일로 받을 수 있습니다.
- data URL을 넣으면
base64,뒤쪽만 읽고, 이때는 URL-safe 체크박스가 켜져 있어도 표준 표기로 해석합니다. - 파일 이름은
decoded에 확장자가 붙습니다. data URL의 형식이 PNG, JPEG, GIF, WebP, SVG, ICO, PDF, TXT, CSV, JSON, ZIP, MP3, MP4 중 하나이면 그에 맞는 확장자(decoded.png등)가 됩니다. - 그 밖의 형식이거나 형식 정보가 없는 순수 Base64이면
decoded.bin으로 받습니다. 원래 형식을 알고 있다면 받은 뒤 확장자를 바꾸면 됩니다. data:text/plain,hello처럼;base64가 없는 data URL은 Base64가 아니므로 쓸 수 없는 문자:가 있다는 오류가 납니다.
디코딩 오류 세 가지
| 오류 안내 | 이런 입력에서 | 뜻 |
|---|---|---|
| Base64에 쓸 수 없는 문자가 있습니다 | Pj4-Pz8_ (옵션 끔) |
지금 고른 표기에 없는 글자가 있습니다. 안내에 그 글자가 표시됩니다. |
| Base64 길이나 패딩(=)이 올바르지 않습니다 | SGVsb, SGVsbG8== |
글자 수가 맞지 않거나 =가 너무 많거나 중간에 있습니다. 복사하다 끝이 잘렸을 때 흔합니다. |
| 디코딩한 바이트가 올바른 UTF-8 텍스트가 아닙니다 | iVBORw0KGgo= |
Base64로서는 정상이지만 내용이 글이 아닙니다. |
셋째 경우에는 결과 옆에 “16진수로 보기”가 나타납니다. 누르면 바이트를 두 자리 16진수로 나열하고, “텍스트로 보기”를 누르면 되돌아갑니다. iVBORw0KGgo=의 16진수는 89 50 4e 47 0d 0a 1a 0a이고, 둘째부터 넷째 바이트(50 4e 47)가 글자 PNG여서 PNG 파일의 첫머리임을 알 수 있습니다. 이 오류가 떠 있어도 다운로드 버튼은 그대로 쓸 수 있습니다.