자바스크립트로 만든 퍼센트 인코더 & 디코더

입력창에 한글 등을 써 넣은 뒤 Encode 버튼을 누르면 퍼센트 인코딩된 문자들이 아래 출력창에 나오고 반대로 입력창에 퍼센트 인코딩된 문자들을 넣은 뒤 해당 Decode 버튼을 누르면 원래의 문자가 나오게 된다. - UTF-8 방식 인코딩의 경우(%xx 형태) UTF-8 Decode 버튼을, UTF-16 방식 인코딩(%uxxxx 형태)의 경우 UTF-16 Decode 버튼을 눌러야 한다. 원래 Decode 버튼도 한 개로 모두 동작하게 하려 했으나 UTF-16 방식으로 인코딩된 문자를 UTF-8 방식으로 디코딩하려 할 경우 충돌해서 실행이 안되는 버그가 있어서 별개의 버튼으로 만듦.

ex)
%EA%BD%83%20%E8%8A%B1%20%E3%81%AF%E3%81%AA%20%D8%B2%D9%87%D8%B1%D8%A9%20%E0%B2%B9%E0%B3%82%E0%B2%B5%E0%B3%81
위 문자열을 복사해 맨 윗쪽 입력창에 붙여넣고 UTF-8 Decode 버튼을 눌러보자. 출력창 1과 2에 각 나라 언어로 꽃이라는 단어가 나타난다. 16진수로 각국 언어를 재현하는 유니코드의 위력이랄까.

퍼센트 인코딩(Percent-Encoding), 혹은 URL 인코딩이란 URL(쉽게 말해 주소창)에 영어 알파벳, 숫자와 몇가지 특수문자(- _ . ~)만 사용할 수 있기 때문에 만들어진 것 이라고 한다. URL, 크게는 URI(URL + URN)에 유니코드를 표현하는 문자 인코딩 방법으로 영어 알파벳, 숫자와 몇가지 특수문자(- _ . ~)를 제외한 값은 8bit 단위로 묶어서(UTF-8 방식) 16진수 값으로 인코딩 한다.

영문일 경우에는 상관없지만 영문을 제외한 2바이트 문자, 즉 한글, 일본어, 중국어 같은 경우는 퍼센트 인코딩을 해주어야 하는데 한글, 일본어 등 2바이트 문자를 %기호와 16진수로 표현하여 %가 붙으면 뒤 두 자리가 16진수 코드라고 인식하는 규약을 정해 놓은 것이다.(utf-8 방식)
utf-16 방식은 %u가 붙으면 뒤 네 자리가 16진수 코드라고 인식하는 형태.

해당 코드값을 처리하는 것은 서버의 몫이라고 하며 URL을 통해 GET 요청의 파라메터로 보낼 때는 반드시 퍼센트 인코딩을 거쳐야 하며 받는 쪽에서는 다시 디코딩을 할 필요는 없다고.

1994년에 발표된 RFC 1738에서는 URL Character Encoding이라고 칭하고 있으며 2005년에 발표된 표준인 RFC 3986에서는 Percent-Encoding이라 부르고 있다.

뭐 활용할 일은 거의 없으리라 생각되지만 어쨋건 한 때 꽤나 궁금했던 퍼센트 인코딩에대해 대충이나마 알게되고 자바스크립트의 escape(), unescape(), encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent() 함수를 배운 기념으로 만들어 봤다.

escape() 함수는 utf-16 방식 인코딩으로 프로그램들에서 주로 쓰이는 듯.
encodeURI() 함수와 encodeURIComponent() 함수는 utf-8 방식 인코딩으로 문자를 인코딩하는 것은 똑같지만 문자 이외의 , / = \ ? 등 특수문자들을 인코딩하느냐 그냥 놔두느냐의 차이인 듯.

참고링크:
Percent-encoding(wiki)
RFC 1738
RFC 3986
유닉스/리눅스 사용자를 위한 UTF-8 및 유니코드 관련 FAQ
Unicode TN12: UTF-16 for Processing
www.decodeunicod.org -Unicode 5.0의 utf-16방식 모든 캐릭터 셋

-2009.11.01에 몇몇 내용 수정.