URL 인코딩 디코딩 차이 완벽 정리 - 웹 개발자 필수 개념
URL 인코딩과 디코딩의 차이를 모르면 한글 깨짐, API 오류가 반복됩니다. 원리부터 실전 활용까지 한번에 정리해 드립니다.
브라우저 주소창에 한글을 입력했더니 %ED%95%9C%EA%B8%80 같은 이상한 문자열로 바뀐 경험, 한 번쯤 있으실 겁니다. API를 호출했는데 파라미터가 깨져서 에러가 나거나, 공유한 링크가 제대로 열리지 않는 상황도 마찬가지입니다. 이 모든 문제의 핵심에 URL 인코딩 디코딩 차이를 이해하지 못한 것이 있습니다.
이 글에서 URL 인코딩과 디코딩의 원리, 둘의 차이점, 그리고 실무에서 마주치는 오류 해결법까지 깔끔하게 정리해 드리겠습니다.
URL 인코딩이란 무엇인가
URL 인코딩(URL Encoding)은 URL에서 사용할 수 없는 문자를 퍼센트(%) 기호와 16진수 코드로 변환하는 과정입니다. 공식 명칭은 퍼센트 인코딩(Percent-Encoding)이며, RFC 3986 표준에 정의되어 있습니다.
왜 인코딩이 필요한가
URL은 ASCII 문자 집합만 허용합니다. 영문 알파벳, 숫자, 그리고 일부 특수문자(- _ . ~)만 그대로 사용할 수 있습니다. 그 외의 문자는 반드시 인코딩해야 합니다.
- 한글, 일본어, 중국어 등 비ASCII 문자
- 공백 - %20 또는 +로 변환
- 특수문자 - &, =, ?, # 등 URL에서 구분자로 사용되는 문자
- 예약 문자 - 데이터로 사용할 때는 인코딩 필수
인코딩 변환 예시
"한글 테스트"라는 문자열을 URL 인코딩하면 다음과 같이 변환됩니다.
- 한 →
%ED%95%9C(UTF-8 기준 3바이트) - 글 →
%EA%B8%80 - 공백 →
%20
최종 결과: %ED%95%9C%EA%B8%80%20%ED%85%8C%EC%8A%A4%ED%8A%B8
URL 디코딩이란 무엇인가
URL 디코딩(URL Decoding)은 인코딩의 역방향 과정입니다. 퍼센트 인코딩된 문자열을 원래의 사람이 읽을 수 있는 문자로 복원합니다.
디코딩 과정
디코딩은 단순합니다. %XX 형태의 코드를 찾아 해당하는 바이트 값으로 변환한 뒤, 문자 인코딩(보통 UTF-8)에 따라 원래 문자로 조합합니다.
%ED%95%9C→ 한%20→ 공백%40→ @%26→ &
브라우저 주소창에 인코딩된 URL을 붙여넣으면 자동으로 디코딩해서 보여주는 것도 이 원리입니다. 크롬 브라우저는 2019년부터 주소창에서 디코딩된 형태를 기본으로 표시하고 있습니다.
URL 인코딩 디코딩 차이 비교표
URL 인코딩 디코딩 차이를 한눈에 파악할 수 있도록 표로 정리했습니다.
| 구분 | URL 인코딩 | URL 디코딩 |
|---|---|---|
| 방향 | 원문 → 퍼센트 코드 | 퍼센트 코드 → 원문 |
| 목적 | 안전한 URL 전송 | 원래 데이터 복원 |
| 사용 시점 | 데이터를 URL에 포함시킬 때 | URL에서 데이터를 추출할 때 |
| 대상 문자 | 비ASCII, 예약 문자, 공백 | %XX 형태의 인코딩 문자 |
| JavaScript | encodeURIComponent() | decodeURIComponent() |
| Python | urllib.parse.quote() | urllib.parse.unquote() |
| Java | URLEncoder.encode() | URLDecoder.decode() |
| 실패 시 결과 | URL 깨짐, 서버 오류 | 글자 깨짐(mojibake) |
URL 인코딩과 디코딩은 동전의 양면입니다. 인코딩은 기계가 안전하게 처리할 수 있는 형태로 바꾸는 것이고, 디코딩은 사람이 읽을 수 있는 형태로 되돌리는 것입니다. 둘 중 하나만 알면 반드시 문제가 생깁니다.
실제로 인코딩 디코딩이 필요한 상황
이론은 알겠는데, 실무에서는 언제 직접 인코딩하고 디코딩해야 할까요? 가장 흔한 5가지 상황을 정리했습니다.
1. API 쿼리 파라미터 전달
검색 API에 한글 키워드를 보낼 때 인코딩하지 않으면 서버에서 파라미터를 제대로 파싱하지 못합니다. ?query=서울 맛집은 반드시 ?query=%EC%84%9C%EC%9A%B8%20%EB%A7%9B%EC%A7%91으로 변환해야 합니다.
2. 리다이렉트 URL 처리
OAuth 인증이나 결제 콜백에서 redirect_uri를 파라미터로 넘길 때, URL 안에 URL이 들어가는 구조가 됩니다. 내부 URL의 ?, &, = 문자가 외부 URL의 구분자와 충돌하지 않도록 반드시 인코딩해야 합니다.
3. 파일명에 특수문자가 포함된 다운로드
"보고서 (최종).pdf" 같은 파일명을 Content-Disposition 헤더에 넣을 때, 괄호와 공백을 인코딩하지 않으면 다운로드 파일명이 깨집니다.
4. 소셜 미디어 공유 링크
한글 제목이 포함된 페이지 URL을 카카오톡이나 슬랙에 공유할 때 링크가 잘리는 문제의 원인도 대부분 인코딩입니다.
5. 데이터베이스 저장값 복원
서버 로그나 DB에 인코딩된 상태로 저장된 URL 파라미터를 분석할 때 디코딩이 필요합니다. 로그에서 %3D를 보고 =임을 바로 파악해야 디버깅 속도가 빨라집니다.
자주 발생하는 인코딩 오류와 해결법
URL 인코딩 디코딩 차이를 이해했더라도 실수는 발생합니다. 현업에서 가장 많이 마주치는 오류 3가지를 짚어 드리겠습니다.
이중 인코딩(Double Encoding)
이미 인코딩된 문자열을 한 번 더 인코딩하면 %25가 양산됩니다. 예를 들어 %20이 %2520으로 변합니다. 프레임워크가 자동 인코딩하는데 개발자가 수동으로 한 번 더 인코딩하는 경우가 대부분입니다.
- 증상: URL에 %25가 보이면 이중 인코딩 의심
- 해결: 프레임워크의 자동 인코딩 여부를 먼저 확인하고, 수동 인코딩을 제거
인코딩 방식 불일치
서버는 UTF-8로 디코딩하는데 클라이언트가 EUC-KR로 인코딩하면 한글이 깨집니다. 레거시 시스템에서 자주 발생합니다.
- 증상: 한글이 ???????? 또는 깨진 글자로 표시
- 해결: 양쪽 모두 UTF-8로 통일. Content-Type 헤더에 charset=utf-8 명시
encodeURI vs encodeURIComponent 혼동
JavaScript에서 가장 흔한 실수입니다. encodeURI()는 전체 URL을 인코딩하되 : / ? # & 등 URL 구조 문자는 보존합니다. encodeURIComponent()는 모든 특수문자를 인코딩합니다.
- 파라미터 값에는
encodeURIComponent() - 전체 URL에는
encodeURI() - 잘못 사용하면 URL 구조가 깨지거나, 반대로 파라미터 값이 URL 구분자로 해석됩니다
실무에서 바로 쓰는 인코딩 도구와 팁
브라우저 개발자 도구 활용
크롬 개발자 도구 콘솔에서 바로 테스트할 수 있습니다.
encodeURIComponent('한글 테스트')→ 인코딩 결과 확인decodeURIComponent('%ED%95%9C%EA%B8%80')→ 디코딩 결과 확인
프로그래밍 언어별 함수 정리
| 언어 | 인코딩 함수 | 디코딩 함수 | 비고 |
|---|---|---|---|
| JavaScript | encodeURIComponent() | decodeURIComponent() | 파라미터용. 전체 URL은 encodeURI() |
| Python 3 | urllib.parse.quote() | urllib.parse.unquote() | 기본 UTF-8 |
| Java | URLEncoder.encode(s, "UTF-8") | URLDecoder.decode(s, "UTF-8") | charset 명시 필수 |
| PHP | urlencode() / rawurlencode() | urldecode() / rawurldecode() | 공백 처리 방식 차이 |
| Go | url.QueryEscape() | url.QueryUnescape() | net/url 패키지 |
보안 관점에서의 인코딩
URL 인코딩은 보안과도 밀접합니다. XSS 공격에서 악성 스크립트를 인코딩해 필터를 우회하는 사례가 있으므로, 서버 측에서 디코딩 후 반드시 입력값을 검증해야 합니다. URL 파라미터에 비밀번호나 토큰을 포함시키는 것은 피해야 하며, 민감한 정보는 POST 요청 본문으로 전달하는 것이 안전합니다. 보안이 중요한 서비스라면 API 키나 토큰 외에도 접근 비밀번호 자체를 충분히 강력하게 설정하는 것이 기본입니다. 비밀번호 생성기를 활용하면 무작위 고강도 비밀번호를 빠르게 만들 수 있습니다.
URL 인코딩 디코딩 차이는 웹 개발의 가장 기초적이면서도 끊임없이 문제를 일으키는 영역입니다. 지금 바로 실행할 수 있는 두 가지를 권해 드립니다.
- 프로젝트의 API 호출 코드를 점검하세요. 파라미터에 한글이나 특수문자가 포함될 가능성이 있다면 인코딩이 제대로 적용되어 있는지 확인합니다.
- 브라우저 콘솔에서 직접 테스트하세요.
encodeURIComponent()와decodeURIComponent()를 몇 번 실행해 보면 감이 잡힙니다.
