안녕하세요. IT 엘도라도 에 오신 것을 환영합니다.
글을 쓰는 것은 귀찮지만 다시 찾아보는 것은 더 귀찮습니다.
완전한 나만의 것으로 만들기 위해 지식을 차곡차곡 저장해 보아요.   포스팅 둘러보기 ▼

웹, 앱 (Web, Application)

[Web] URL 인코딩/디코딩 (URL Encoding/Decoding)

피그브라더 2021. 5. 11. 21:08

이번 포스팅에서는 URL의 인코딩/디코딩에 대해 간단히 알아볼 것이다. 그런데 이것을 이해하려면 먼저 문자열 인코딩에 대한 배경지식이 있어야 한다. 만약 ASCII, UTF-8의 개념을 정확히 알고 있지 못하다면 이 포스팅을 읽어보고 오기를 바란다. URL 인코딩/디코딩은 이 두 가지의 인코딩 방식을 기반으로 하기 때문이다.

 

1. URL 인코딩/디코딩 (URL Encoding/Decoding)

먼저, URL 인코딩이란 URL에서 URL로 사용할 수 없는 문자 혹은 URL로 사용할 수 있지만 의미가 왜곡될 수 있는 문자들을 '%XX'의 형태로 변환하는 것을 말한다. 여기서 XX는 16진수 값이다. 그리고 URL 디코딩이란 변환된 URL을 다시 원래의 형태로 되돌리는 것을 말한다. URL 인코딩/디코딩 과정을 그림으로 나타내면 다음과 같다. 자세한 설명은 아래에서 진행하도록 하겠다.

 

 

그렇다면 URL 인코딩/디코딩은 왜 필요한 것일까? 이것을 이해하면 왜 URL 인코딩/디코딩이 위 그림과 같이 이뤄지는지 이해할 수 있게 될 것이다. 이 질문에 대한 답은 앞서 소개한 URL 인코딩의 정의에서 찾을 수 있다.

 

1) 먼저, 인터넷을 통해 전송할 수 있는 문자는 오로지 ASCII 문자이기 때문이다. 따라서 ASCII 문자가 아닌 문자는 인터넷을 통해 전송할 수 있는 형태로 변환해줘야 한다. 위 그림에서 빨간색으로 표시된 '피그'라는 문자와 파란색으로 표시된 '브라더'라는 문자가 바로 그 예시이다. 한글은 ASCII 문자가 아니므로 변환이 필요하다. 그리고 이때 변환하는 규칙은 UTF-8을 따른다. UTF-8에 따르면 한글 문자 1개는 3바이트로 인코딩 된다. 따라서 '피그'는 6바이트로, '브라더'는 9바이트로 인코딩 된 모습을 볼 수 있다.

 

2) 다음으로, 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

 

2-2. Python