이메일 첨부파일이 어떻게 전송되는지, 웹페이지에 이미지를 직접 삽입하는 Data URI가 뭔지, API 인증 토큰은 왜 이상하게 생겼는지. 이 모든 것의 배경에 Base64 인코딩이 있다. Base64 인코더로 텍스트나 파일을 변환해볼 수 있다.
Base64란 무엇인가
컴퓨터 데이터는 0과 1의 이진수(바이너리)로 저장된다. 하지만 이메일이나 웹 환경에서는 텍스트 형태로 데이터를 전송해야 할 때가 있다. Base64는 바이너리 데이터를 텍스트로 표현하는 인코딩 방식이다. A-Z, a-z, 0-9, +, / 총 64개의 문자만 사용한다.
사용 방법
companys.kr/base64-encoder에 텍스트를 입력하면 Base64로 인코딩된 문자열이 출력된다. 반대로 Base64 문자열을 입력하면 원본 텍스트로 디코딩할 수 있다. 파일을 업로드해서 Base64로 변환하는 것도 가능하다.
이미지를 Data URI로 변환
작은 이미지를 Base64로 인코딩하면 HTML이나 CSS에 직접 삽입할 수 있다. 별도 이미지 파일 없이 코드 안에 이미지 데이터를 포함시키는 방식이다. 아이콘이나 로고 같은 작은 이미지에 유용하다. 단, Base64는 원본보다 약 33% 크기가 증가하므로 큰 이미지에는 적합하지 않다.
이메일 첨부파일
이메일 프로토콜(SMTP)은 원래 텍스트만 전송할 수 있었다. 그래서 이미지나 문서 같은 바이너리 파일을 첨부하려면 Base64로 인코딩해서 텍스트 형태로 보낸다. 받는 쪽에서 다시 디코딩해서 원본 파일로 복원한다.
API 인증
HTTP Basic 인증에서 사용자명과 비밀번호를 Base64로 인코딩해서 전송한다. JWT(JSON Web Token)도 Base64url 인코딩을 사용한다. API 키나 토큰이 이상하게 긴 문자열인 이유가 여기에 있다.
암호화가 아니다
중요한 점은 Base64는 암호화가 아니라는 것이다. 인코딩일 뿐이다. 누구나 Base64 문자열을 디코딩하면 원본 데이터를 볼 수 있다. 비밀번호나 민감한 정보를 Base64로 인코딩해서 숨길 수 있다고 생각하면 안 된다. 보안이 필요하면 별도의 암호화를 해야 한다.
Base64url
일반 Base64에서 +와 /는 URL에서 특별한 의미를 가진다. 그래서 URL에 사용할 때는 +를 -, /를 _로 바꾼 Base64url을 쓴다. JWT 토큰이 이 방식을 사용한다.
활용 예시
프론트엔드 개발에서 작은 SVG 아이콘을 인라인으로 삽입할 때, 서버에서 생성한 PDF를 브라우저에 바로 보여줄 때, 파일 업로드 없이 이미지 미리보기를 구현할 때 Base64가 사용된다.