URL 인코더·디코더란?
URL(웹 주소)에는 영문·숫자와 일부 기호만 안전하게 사용할 수 있습니다. 한글, 공백, &, ? 같은 문자가 주소에 그대로 들어가면 깨지거나 오작동할 수 있어 퍼센트 인코딩(%)으로 변환해야 합니다. 이 도구는 텍스트를 퍼센트 인코딩으로 바꾸거나(인코딩), 인코딩된 주소를 사람이 읽을 수 있는 원래 형태로 되돌립니다(디코딩).
사용법
- 두 칸이 양방향으로 연결되어 있습니다. 위 칸(원본)에 입력하면 아래에 인코딩 결과가, 아래 칸(인코딩된 값)에 입력하면 위에 디코딩 결과가 즉시 나타납니다.
- 인코딩 방식은 구성요소(encodeURIComponent), 전체 URL(encodeURI), 폼(x-www-form-urlencoded) 중에서 고를 수 있습니다.
- 폼 방식은 공백을
+로 인코딩해 HTML 폼 전송·쿼리스트링 형식과 동일하게 처리합니다. - 각 칸의 복사 버튼으로 결과를 바로 가져갈 수 있습니다.
퍼센트 인코딩 원리
URL 표준은 안전하게 쓸 수 있는 문자를 영문·숫자와 - _ . ~ 같은 일부 기호로 제한합니다. 그 밖의 문자는 UTF-8 바이트로 바꾼 뒤 각 바이트를 %와 두 자리 16진수로 표기하는데, 이것이 퍼센트 인코딩입니다. 예를 들어 '가'는 UTF-8로 세 바이트라서 %EA%B0%80가 됩니다. 공백은 방식에 따라 %20 또는 +로 표현돼요. 디코딩은 이 과정을 거꾸로 되돌려 사람이 읽을 수 있는 원래 문자로 복원합니다.
세 가지 방식의 차이
구성요소(encodeURIComponent)는 쿼리스트링의 값처럼 URL의 한 조각을 인코딩할 때 쓰며 ? & = / 같은 구분 기호까지 모두 변환합니다. 전체 URL(encodeURI)은 완성된 주소 전체를 다룰 때 쓰며 : / ? & # 등 URL 구조를 이루는 문자는 그대로 둬 링크가 깨지지 않게 합니다. 폼(x-www-form-urlencoded)은 HTML 폼 전송 규칙과 같아 공백을 +로 바꾸고 ! ' ( ) * ~까지 인코딩합니다. 파라미터 값 하나를 다룰 때는 구성요소를, 주소 전체를 다룰 때는 전체 URL을 고르면 됩니다.
실무 활용 예시
- 검색·쿼리 파라미터: 한글 검색어나 특수문자가 든 값을 URL에 안전하게 담아요.
- API 요청: 쿼리스트링에 넣을 값을 구성요소 방식으로 인코딩해 오작동을 막습니다.
- 로그·주소 해독:
%로 뒤덮인 인코딩된 주소를 디코딩해 실제 내용을 읽습니다.
자주 묻는 질문
URL 인코딩(퍼센트 인코딩)이란 무엇인가요?
한글이나 공백, 특수문자처럼 URL에 그대로 쓸 수 없는 문자를 %EA%B0%80처럼 퍼센트(%)와 16진수 코드로 바꿔 표현하는 방식입니다.
encodeURIComponent와 encodeURI(전체 URL)의 차이는 무엇인가요?
encodeURIComponent는 쿼리 값·파라미터 등 일부 조각을 인코딩하며 ? & = 같은 문자도 모두 변환합니다. encodeURI(전체 URL)는 완성된 주소 전체를 인코딩하며 : / ? & 같은 URL 구조 문자는 그대로 둡니다.
폼(x-www-form-urlencoded) 방식은 언제 쓰나요?
HTML 폼 전송이나 쿼리스트링 형식과 똑같이 처리해야 할 때 사용합니다. 이 방식은 공백을 +로 바꾸며, 디코딩 시에는 +를 다시 공백으로 되돌립니다.
한글도 정확하게 처리되나요?
네. 입력을 UTF-8 바이트로 인코딩하므로 한글·이모지 등도 % 16진수 형태로 정확히 변환되고, 디코딩하면 원래 글자로 복원됩니다.
디코딩이 실패하는 경우는 언제인가요?
입력한 문자열이 올바른 퍼센트 인코딩 형식이 아닐 때(예: % 뒤에 16진수가 아닌 문자가 오는 경우) 디코딩에 실패하며 오류 메시지가 표시됩니다.
입력한 내용이 서버로 전송되나요?
아니요. 모든 변환은 브라우저 안에서만 실행되며 입력한 내용은 서버로 전송되거나 저장되지 않습니다.