웹사이트 주소를 복사했는데 %ED%95%9C%EA%B8%80 같은 코드가 잔뜩 나왔다. 한글이 포함된 URL을 메신저에 붙여넣으면 이렇게 변환되는 경우가 많다. 반대로, 인코딩된 URL을 원래 한글로 되돌리고 싶을 때도 있다. 이걸 URL 인코딩과 디코딩이라고 한다.
왜 한글이 %코드로 바뀌는가
URL에는 영문 알파벳, 숫자, 일부 특수문자만 사용할 수 있다는 규약이 있다(RFC 3986). 한글이나 공백처럼 허용되지 않는 문자가 포함되면, 브라우저가 자동으로 퍼센트 인코딩(Percent Encoding)을 적용한다.
예시 "안녕" →%EC%95%88%EB%85%95
UTF-8로 인코딩된 각 바이트 앞에 %가 붙는 구조다. 한글 한 글자가 3바이트이므로 %가 3개씩 나온다.
브라우저 주소창에서는 한글이 정상적으로 보여도, 주소를 복사해서 다른 곳에 붙여넣으면 인코딩된 형태로 나오는 이유가 이것이다.
인코딩과 디코딩, 언제 뭘 쓰나
- 인코딩 (Encoding)
- 한글이나 특수문자를 %XX 형태로 변환한다. API 호출, 쿼리 파라미터 구성, 리다이렉트 URL 생성 시 필요하다.
- 디코딩 (Decoding)
- %XX 코드를 원래 문자로 복원한다. 로그 분석, 인코딩된 URL 확인, 디버깅 시 사용한다.
encodeURIComponent는 뭐가 다른가
일반 인코딩은 URL 구조 문자(콜론, 슬래시, 물음표, 앰퍼샌드)를 그대로 둔다. encodeURIComponent는 이 문자들까지 전부 변환한다. 쿼리 파라미터 값에 URL이 포함될 때는 후자를 써야 안전하다.
인코딩과 디코딩 하는 법
개발 도구 콘솔에서 JavaScript로 처리할 수도 있지만, 간단한 확인 작업에 매번 콘솔을 열기엔 번거롭다. URL 인코딩 변환기에 텍스트를 넣고 변환 버튼을 누르면 결과가 바로 나온다. encodeURIComponent 옵션도 체크 하나로 전환할 수 있다.
- 한글 URL을 메신저나 이메일에 깨지지 않게 보내고 싶을 때
- 로그에 찍힌 %코드를 원래 한글로 확인하고 싶을 때
- API 요청 URL에 한글 파라미터를 넣어야 할 때
- 인코딩된 URL이 제대로 변환됐는지 검증할 때
입력한 텍스트는 서버로 전송되지 않고 브라우저에서만 처리된다. 내부 API 주소나 민감한 파라미터를 넣어도 외부 유출 걱정이 없다.
%코드가 잔뜩 붙은 URL을 보고 당황할 필요 없다. 디코딩 한 번이면 원문이 바로 보인다.