한글 블로그 URL 인코딩: 전체 주소와 검색 값에 같은 함수를 쓰지 않는 이유
한글 링크를 영문 기호로 바꾸려다가 https://까지 https%3A%2F%2F로 바뀌었다면, 전체 주소를 ‘값 하나’처럼 처리했는지 살펴보세요. JavaScript의 encodeURI와 encodeURIComponent는 같은 역할이 아닙니다. 완성된 URL인지, URL 안에 넣을 값인지 먼저 구분합니다.
편집기 링크 칸에는 공개된 전체 URL을 보존합니다. 코드로 URL을 조립할 때는 구조와 값의 범위를 따로 확인하세요.
1. 전체 주소의 구조와 값의 내용 구분
MDN은 encodeURI가 URI 구조에 쓰이는 일부 문자를 보존하고, encodeURIComponent는 개별 동적 부분에 쓰는 방식을 설명합니다. 이미 올바르게 구성된 전체 주소와 그 안에 추가할 검색어 같은 값은 처리 대상이 다릅니다. MDN encodeURI 설명(영어)
| 대상 | 질문 | 주의할 문자 |
|---|---|---|
| 완성된 전체 주소 | 주소 구조를 보존했나? | : / ? & = # |
| 검색어 등 하나의 값 | 값 안의 기호가 구조로 읽히나? | & 같은 구분 문자 |
| 이미 인코딩된 주소 | 추가 변환이 정말 필요한가? | %를 다시 처리하는지 |
이 글은 JavaScript 함수의 용도 구분입니다. 일반 블로그 편집기의 링크 칸에 함수 이름이나 변환 코드를 넣으라는 뜻이 아닙니다.
2. 가상의 검색 값에 &가 들어 있을 때
연습용 검색 값을 사과&배라고 하겠습니다. 이것을 q=사과&배처럼 그대로 연결하면 &가 검색 값의 일부인지 새 매개변수의 경계인지 모호해집니다. MDN 예시도 값 안의 &가 주소 구조로 읽히는 문제를 보여 줍니다.
const term = "사과&배";
const value = encodeURIComponent(term);
// value: %EC%82%AC%EA%B3%BC%26%EB%B0%B0위 결과는 검색 값 하나의 변환 결과입니다. 전체 링크 대신 이 문자열만 붙여넣으면 호스트와 경로가 없으므로 방문할 목적지가 되지 않습니다. 공개 URL을 추출한 작업과 새 검색 URL을 코드로 조립하는 작업을 섞지 마세요.
3. 이미 공개된 링크는 복사·클릭 결과로 점검
| 점검 | 보존할 것 | 문제가 보일 때 |
|---|---|---|
| 공개 글에서 주소 복사 | 호스트·전체 경로·필요한 쿼리 | 홈페이지로 잘리지 않았는지 확인 |
| 링크 칸 저장 | URL 전체 | 제목 문구와 주소를 구분 |
| 실제 클릭 | 의도한 글의 내용 | 중간 변환·최종 목적지 비교 |
한글이 화면에서 퍼센트 기호로 보이는지보다 실제로 원하는 상세 글에 도착하는지가 중요합니다. 이미 변환된 주소에 또 함수를 적용하면 문자열이 달라질 수 있으므로 필요 없이 여러 번 변환하지 않습니다.
개인 메모는 복사한 URL ___ / 저장한 URL ___ / 실제 열린 URL ___ / 상세 제목 ___로 남깁니다. 주소가 다른 형태로 표시됐다는 이유만으로 중복 글이라고 확정하지 말고 최종 내용도 비교하세요. 로그인 토큰이나 비공개 공유 값을 공개 목록에 남기지 않습니다.
4. 자주 묻는 질문
encodeURIComponent로 전체 URL을 바꾸면 더 안전한 링크인가요?
주소 구조 문자도 변환되므로 그 결과를 일반 링크의 전체 주소로 그대로 쓰는 것은 목적에 맞지 않을 수 있습니다. 처리 범위를 먼저 구분하세요.
한글 주소가 %로 보이면 깨진 건가요?
그 표시만으로 판단하지 않습니다. 전체 주소가 보존됐는지와 클릭 후 의도한 상세 내용이 열리는지를 확인하세요.
MDN 전체 URI·개별 값 인코딩 비교(영어)확인 기준일: 2026년 10월 4일.
대표 이미지의 주소창과 책상은 이해를 돕기 위한 AI 삽화이며 실제 서비스 화면이 아닙니다.
