URL 인코더/디코더
🔐 인코딩URL 안의 특수문자를 퍼센트 인코딩(%XX)으로 바꾸거나 다시 복원합니다.
• encodeURIComponent: 쿼리 파라미터 값 인코딩에 적합
• encodeURI: 전체 URL 인코딩 (:/? 등 보존)
🔗 URL 인코딩이란?
URL 인코딩(Percent-encoding)은 URL이 허용하지 않는 문자를 %XX 형식으로 바꾸는 표준입니다. 1994년 RFC 1738에서 처음 규정되고 2005년 RFC 3986으로 정비되었습니다. 내부적으로는 입력을 UTF-8 바이트로 만들고 각 바이트를 2자리 16진수로 표현하기 때문에, 한글 한 글자(3바이트)는 %XX%XX%XX처럼 9문자로 늘어납니다. 공백을 비롯해 ?, #, &, =처럼 URL 구조에 의미가 있는 글자가 파라미터 값 안에 들어가야 할 때 반드시 거쳐야 하는 변환입니다.
⚙️ encodeURI vs encodeURIComponent
encodeURIComponent (권장)
쿼리 파라미터 값을 인코딩할 때 사용합니다. =, &, ?, /, : 등 URL 구분자까지 모두 인코딩하므로 파라미터 값에 특수문자가 포함되어도 안전합니다.
?name=encodeURIComponent("홍길동&친구")encodeURI (전체 URL)
전체 URL을 인코딩할 때 사용합니다. :, /, ?, #, & 등 URL 구조에 필요한 문자는 보존하고 나머지만 인코딩합니다.
encodeURI("https://example.com/검색?q=테스트")⚡ 실수하기 쉬운 포인트 3가지
- &를 인코딩하지 않음 — 검색어에 &가 들어가면 그 뒤가 다른 파라미터로 잘려나갑니다. 파라미터 값에는 항상
encodeURIComponent를 쓰세요. - 이중 인코딩 —
%20이%2520이 되어 서버가 공백 대신 "%20" 문자열을 받습니다.fetch나URL객체로 만든 URL을 다시 인코딩하지 마세요. - + 기호 처리 — 쿼리스트링의 +는 폼 인코딩 관습으로 공백을 의미합니다. 진짜 +를 보존하려면 추가로
%2B로 치환해야 합니다.
💡 알아두면 좋은 점
한글 URL이 길어 보이는 건 정상입니다. "가"는 UTF-8로 3바이트라 %EA%B0%80로 변환됩니다. 카카오톡·슬랙은 미리보기 단계에서 자동으로 다시 디코딩해 보여줍니다.
자주 묻는 질문
URL 인코딩은 왜 필요한가요?▼
URL은 RFC 3986이 정의한 안전한 ASCII 문자만 그대로 받습니다. 한글, 공백, &, =, # 같은 문자는 별도 의미를 가지거나 허용되지 않아 %XX 형식으로 바꿔야 브라우저와 서버가 같은 값으로 해석합니다.
공백은 +인가요, %20인가요?▼
둘 다 통할 때가 많지만 의미가 다릅니다. URL 경로와 쿼리에서는 %20이 정식이며 encodeURIComponent도 %20을 사용합니다. +는 application/x-www-form-urlencoded(HTML 폼 전송)에서만 공백을 뜻하므로 둘을 섞어 쓰면 디코딩이 어긋날 수 있습니다.
한글 URL이 깨져 보이는 이유는?▼
한글은 UTF-8로 한 글자당 3바이트라 인코딩하면 %XX%XX%XX 9문자로 늘어납니다. 예: "가"는 %EA%B0%80. 표시는 길어도 표준이며, 카카오톡이나 슬랙처럼 URL 미리보기를 만드는 서비스는 보통 자동으로 다시 디코딩해 사람이 읽을 수 있게 보여줍니다.