Base64 및 URL 인코딩 완벽 이해하기

인코딩과 암호화의 차이

개발자들이 흔히 저지르는 실수 중 하나는 '인코딩'과 '암호화'를 혼동하는 것입니다. 이 둘은 데이터를 변환한다는 점에서는 같지만, 그 목적과 작동 방식은 완전히 다릅니다.

인코딩(Encoding)은 데이터를 다른 시스템이나 프로토콜에서 안전하게 처리하고 전송할 수 있도록 형태를 바꾸는 과정입니다. 인코딩된 데이터는 변환 규칙만 안다면 누구나 원래의 데이터로 복구(디코딩)할 수 있습니다. 데이터를 숨기거나 보호하기 위한 것이 아니라, 시스템 간의 호환성을 보장하는 것이 주 목적입니다.

반면, 암호화(Encryption)는 데이터를 허가되지 않은 사용자로부터 보호하기 위해 설계되었습니다. 암호화된 데이터를 복원하려면 데이터를 변환할 때 사용된 특정 '키(Key)'가 반드시 필요합니다. 비밀번호나 개인정보와 같은 민감한 데이터는 반드시 암호화를 거쳐야 합니다.

Base64: 텍스트 채널에서 바이너리 다루기

Base64는 말 그대로 64진법을 의미하며, 컴퓨터 분야에서 8비트 이진 데이터(바이너리)를 텍스트로 변환하기 위해 가장 널리 사용되는 인코딩 방식입니다.

왜 Base64가 필요한가?

초기 이메일 시스템(SMTP)이나 HTTP 프로토콜은 본래 텍스트(주로 7비트 ASCII)를 전송하도록 설계되었습니다. 이러한 텍스트 기반 채널을 통해 이미지나 압축 파일 같은 이진 데이터를 전송하려고 하면, 제어 문자로 인식되어 데이터가 손상되거나 전송이 실패하는 문제가 발생합니다. Base64는 이진 데이터를 영문 알파벳, 숫자 및 몇 가지 안전한 기호(+, /)로만 이루어진 텍스트 문자열로 변환하여, 어떠한 텍스트 프로토콜을 통과하더라도 데이터가 원형 그대로 유지되도록 해줍니다.

작동 원리

Base64는 입력된 8비트 데이터 바이트를 3개씩 묶어 총 24비트의 블록을 만듭니다. 이 24비트를 6비트씩 4개의 그룹으로 쪼갠 다음, 각각의 6비트 값을 미리 정의된 64개의 문자 목록에 매핑합니다. 6비트는 0부터 63까지의 값을 가질 수 있기 때문에 64개의 문자로 충분히 표현할 수 있습니다. 입력 데이터가 3바이트로 나누어떨어지지 않을 때는 등호(=) 기호를 패딩으로 사용하여 길이를 맞춥니다.

주요 사용 사례

이미지 Data URI: HTML이나 CSS 내부에 작은 크기의 이미지를 텍스트로 직접 삽입하여 추가적인 HTTP 요청을 줄일 때 사용됩니다.
JWT(JSON Web Tokens): 사용자 인증에 널리 사용되는 JWT는 헤더와 페이로드를 Base64 URL Safe 인코딩 형식으로 저장하여 웹 전송을 용이하게 합니다.
이메일 첨부 파일: MIME 프로토콜을 통해 이미지나 문서를 전송할 때 본문 내에 인코딩되어 포함됩니다.
API 기본 인증: HTTP Basic Authentication에서는 아이디와 비밀번호를 콜론(:)으로 묶어 Base64로 인코딩한 후 Authorization 헤더로 전송합니다.

URL 인코딩 (Percent-encoding)

URL은 인터넷 상의 리소스 위치를 나타내기 위한 규약입니다. URL에는 영문 알파벳과 숫자, 그리고 특수한 의미를 갖는 소수의 문자(?, &, =, /, : 등)만이 예약되어 사용됩니다. 그 외의 문자들, 예를 들어 한글, 띄어쓰기, 예약된 특수 기호를 URL 데이터로 전달하기 위해서는 정해진 규칙에 따라 안전한 형태로 변환해야 합니다. 이를 URL 인코딩 또는 퍼센트 인코딩이라고 합니다.

인코딩 방식은 대상 문자의 바이트 값을 16진수로 변환하고 그 앞에 퍼센트 기호(%)를 붙이는 방식입니다. 예를 들어 공백은 %20으로 변환되고, 한글 '가'는 UTF-8 기준으로 %EA%B0%80로 인코딩됩니다.

encodeURI vs encodeURIComponent

자바스크립트 환경에서 웹 개발을 진행하다 보면 이 두 함수의 차이를 명확히 아는 것이 중요합니다.

encodeURI: 완전한 URL 전체를 인코딩할 때 사용합니다. 프로토콜이나 도메인, 경로를 구분하는 데 필요한 문자들(:, /, ?, &, = 등)은 인코딩하지 않고 그대로 둡니다.
encodeURIComponent: URL의 일부분, 특히 쿼리 스트링의 파라미터 값 하나를 인코딩할 때 사용합니다. ?나 & 같은 문자까지 모두 인코딩하기 때문에, 파라미터 안에 또 다른 URL을 넣거나 특수 문자가 포함된 검색어를 넘길 때 안전하게 사용할 수 있습니다.

자주 발생하는 문제 및 주의사항

인코딩 기술을 다룰 때 개발자들이 자주 겪는 몇 가지 문제가 있습니다.

가장 치명적인 실수는 Base64를 암호화로 착각하는 것입니다. 가끔 데이터베이스에 비밀번호를 저장할 때 Base64로 인코딩만 해서 넣는 경우가 있는데, 이는 사실상 평문으로 저장하는 것과 다름없습니다. Base64는 디코딩 툴만 있으면 누구나 단 1초 만에 원본 데이터를 볼 수 있습니다. 민감한 정보는 반드시 단방향 해시 함수를 사용하거나 안전한 암호화 알고리즘(AES 등)을 사용해야 합니다.

또한 프론트엔드와 백엔드 간에 데이터를 주고받을 때 이중 인코딩 혹은 디코딩 누락이 발생하곤 합니다. 클라이언트에서 인코딩한 데이터를 서버에서 읽어들일 때 자동으로 디코딩이 되는 프레임워크인지 확인하고, 중복으로 처리하지 않도록 아키텍처를 점검해야 합니다.