이번 포스팅에서는 URL의 인코딩/디코딩에 대해 간단히 알아볼 것이다. 그런데 이것을 이해하려면 먼저 문자열 인코딩에 대한 배경지식이 있어야 한다. 만약
ASCII
, UTF-8
의 개념을 정확히 알고 있지 못하다면 이 포스팅을 읽어보고 오기를 바란다. URL 인코딩/디코딩은 이 두 가지의 인코딩 방식을 기반으로 하기 때문이다.1. URL 인코딩/디코딩 (URL Encoding/Decoding)
먼저, URL 인코딩이란 URL에서 URL로 사용할 수 없는 문자 혹은 URL로 사용할 수 있지만 의미가 왜곡될 수 있는 문자들을
%XX
의 형태로 변환하는 것을 말한다. 여기서 XX
는 16진수 값이다. 그리고 URL 디코딩이란 변환된 URL을 다시 원래의 형태로 되돌리는 것을 말한다. URL 인코딩/디코딩 과정을 그림으로 나타내면 다음과 같다. 자세한 설명은 아래에서 진행하도록 하겠다.그렇다면 URL 인코딩/디코딩은 왜 필요한 것일까? 이것을 이해하면 왜 URL 인코딩/디코딩이 위 그림과 같이 이뤄지는지 이해할 수 있게 될 것이다. 이 질문에 대한 답은 앞서 소개한 URL 인코딩의 정의에서 찾을 수 있다.
- 먼저, 인터넷을 통해 전송할 수 있는 문자는 오로지
ASCII
문자이기 때문이다. 따라서ASCII
문자가 아닌 문자는 인터넷을 통해 전송할 수 있는 형태로 변환해줘야 한다. 위 그림에서 빨간색으로 표시된피그
라는 문자와 파란색으로 표시된브라더
라는 문자가 바로 그 예시이다. 한글은ASCII
문자가 아니므로 변환이 필요하다. 그리고 이때 변환하는 규칙은UTF-8
을 따른다.UTF-8
에 따르면 한글 문자 1개는 3바이트로 인코딩 된다. 따라서피그
는 6바이트로,브라더
는 9바이트로 인코딩 된 모습을 볼 수 있다.
- 다음으로,
ASCII
문자라 하더라도 예약된 의미를 가지고 있는 문자의 경우, 그 문자 자체의 의미를 전달하고 싶은 경우에는 이스케이프 처리가 필요하기 때문이다. 이러한 문자의 대표적인 예시로는/
,&
,=
등이 있다./
은 URL의 각 레벨을 구분해주는 역할을 맡고,&
는 쿼리 파라미터들을 구분해주는 역할을 맡으며,=
은 쿼리 파리미터의 값을 지정해주는 역할을 맡는다. 이처럼 이러한 문자들은ASCII
문자이지만 URL 내에서 특별한(예약된) 의미를 가지고 있다. 따라서 이러한 문자들을 문자 그 자체의 의미로서 전달하고 싶다면 이스케이프 처리가 필요하다. 위 그림에서keyword
라는 쿼리 파라미터의 값으로피그&브라더
를 보내고 싶은 경우가 바로 그 예시이다. 여기서&
를 이스케이프 해주지 않으면 쿼리 파라미터의 구분자로 인식이 되어 왜곡된 의미가 전달이 될 것이다. 따라서&
를%26
으로 인코딩을 하여 문자 그대로의&
을 전달하고자 한다는 것을 나타내야만 한다.
참고로, URL에서는 공백 문자가 허용되지 않기 때문에 공백 문자는
%20
혹은 +
로 인코딩이 된다.URL 인코딩/디코딩을 해볼 수 있는 온라인 사이트는 구글에 검색하면 엄청 많이 나온다. 대표적인 사이트 하나를 여기에 링크해 둘 테니, 한 번 직접 사용해보기를 바란다.
URL 인코딩/디코딩 온라인 툴: https://meyerweb.com/eric/tools/dencoder/
2. JavaScript, Python에서의 URL 인코딩/디코딩 라이브러리
대부분의 프로그래밍 언어에서는 URL 인코딩/디코딩을 위한 라이브러리를 기본적으로 제공하고 있다. 필자는 JavaScript와 Python에 익숙한 개발자이기 때문에 두 언어에서 제공하는 URL 인코딩/디코딩 라이브러리를 정리해보도록 하겠다. 이러한 라이브러리들을 사용할 때 주의해야 할 점을 하나 얘기한다면, 인코딩하는 대상은 (일반적으로) 쿼리 스트링에서 쿼리 파라미터 부분이지 URL 전체가 아니라는 것이다. 이것만 주의한다면 사용에 큰 어려움은 없을 것이다.
2-1. JavaScript
- URL 인코딩:
encodeURIComponent(인코딩할 문자열)
- URL 디코딩:
decodeURIComponent(디코딩할 문자열)
2-2. Python
- URL 디코딩:
urllib.parse.unquote(디코딩할 문자열)