URL 하는법을 검색했다면 상황은 대체로 둘 중 하나입니다. 붙여 넣은 링크가 중간에서 잘려 열리지 않거나, 지나치게 길어진 주소를 정리해 공유해야 하는 경우입니다. 이 글에서는 주소의 구조를 먼저 뜯어본 뒤 인코딩, 단축, 파라미터 관리까지 실무에서 쓰는 순서대로 다룹니다.
1단계: URL 구조부터 정확히 파악하기
주소가 깨지는 문제의 절반 이상은 구조를 모른 채 문자열을 이어 붙였기 때문에 생깁니다. 하나의 URL은 다음 다섯 덩어리로 나뉩니다.
| 구성 요소 | 예시 | 역할 |
|---|---|---|
| 프로토콜 | https:// | 통신 방식을 지정합니다 |
| 호스트 | example.com | 접속할 서버 주소입니다 |
| 경로 | /blog/post | 서버 내부의 문서 위치입니다 |
| 쿼리 문자열 | ?id=10&page=2 | 서버에 전달하는 추가 값입니다 |
| 프래그먼트 | #section2 | 문서 내부의 특정 위치로 이동합니다 |
쿼리 문자열은 물음표로 시작하고, 두 번째 값부터는 앰퍼샌드로 연결합니다. 값 안에 앰퍼샌드나 물음표가 그대로 들어가면 브라우저가 이를 구분자로 오해해 값이 잘려 나갑니다. 프래그먼트는 서버로 전송되지 않고 브라우저 안에서만 처리된다는 점도 기억해 두면 좋습니다.
2단계: URL 인코딩 하는 방법
URL에는 영문, 숫자, 그리고 하이픈이나 마침표 같은 일부 기호만 안전하게 쓸 수 있습니다. 그 외의 문자는 퍼센트 인코딩이라는 규칙으로 바꿔야 합니다. UTF-8 바이트 값을 16진수로 표기하고 앞에 퍼센트 기호를 붙이는 방식입니다.
| 원래 문자 | 변환 결과 | 변환이 필요한 이유 |
|---|---|---|
| 공백 | %20 | 주소가 공백에서 끊깁니다 |
| & | %26 | 파라미터 구분자와 충돌합니다 |
| # | %23 | 프래그먼트 시작으로 인식됩니다 |
| + | %2B | 공백으로 해석될 수 있습니다 |
| 한글 한 글자 | %EC%95%88 형태 | 한 글자가 3바이트로 표현됩니다 |
직접 처리할 때는 자바스크립트의 두 함수 차이를 구분해야 합니다. encodeURI는 전체 주소를 넘길 때 쓰고 콜론이나 슬래시는 그대로 둡니다. 반면 encodeURIComponent는 파라미터 값 하나를 넘길 때 쓰며 슬래시와 앰퍼샌드까지 모두 변환합니다. 검색어나 리디렉션 주소처럼 값 자체에 URL이 들어가는 경우에는 반드시 후자를 써야 합니다.
여러 링크를 한꺼번에 점검하거나 한글이 섞인 주소가 제대로 변환됐는지 확인할 때는 URL 인코더를 활용하면 변환 전후를 나란히 비교할 수 있어 실수를 줄일 수 있습니다.
3단계: 긴 주소를 단축해서 공유하기
추적 파라미터가 붙은 주소는 200자를 넘기기 쉽습니다. 이런 링크는 메신저나 문자에서 줄바꿈되며 잘리고, 인쇄물에서는 옮겨 적기가 사실상 불가능합니다. 단축 링크가 필요한 대표적인 상황은 다음과 같습니다.
- 문자 메시지처럼 글자 수 제한이 명확한 채널에 링크를 보낼 때
- 오프라인 인쇄물이나 QR 코드에 주소를 넣을 때
- 어떤 채널에서 몇 번 클릭됐는지 유입 경로를 확인하고 싶을 때
- 캠페인 종료 후 도착 페이지를 다른 곳으로 바꿔야 할 가능성이 있을 때
마지막 항목이 특히 중요합니다. 단축 링크는 원본 주소를 나중에 교체할 수 있는 구조여서, 이미 배포한 인쇄물을 다시 찍지 않고도 연결 대상을 바꿀 수 있습니다.
4단계: 유입 경로 파라미터 붙이기
어느 채널에서 방문자가 들어왔는지 구분하려면 주소 뒤에 UTM 파라미터를 붙입니다. 작성 순서는 다음과 같습니다.
- 도착 페이지의 기본 주소를 준비합니다. 예를 들어 https://example.com/event 입니다.
- 물음표를 붙이고 utm_source에 유입처를 적습니다. 네이버, 인스타그램처럼 매체 이름을 씁니다.
- 앰퍼샌드로 연결해 utm_medium에 형태를 적습니다. cpc, sns, email 등이 흔히 쓰입니다.
- utm_campaign에 캠페인 이름을 적습니다. 공백 대신 하이픈이나 밑줄을 쓰는 편이 안전합니다.
- 완성된 주소를 새 탭에서 열어 파라미터가 빠짐없이 유지되는지 확인합니다.
값에 한글이나 공백을 넣어야 한다면 앞서 설명한 인코딩을 거쳐야 합니다. 통계 도구에서 하나의 캠페인이 여러 줄로 쪼개져 보이는 문제는 대소문자나 공백 처리가 제각각일 때 발생하므로, 표기 규칙을 문서로 정해 두는 편이 좋습니다.
자주 생기는 문제와 해결 순서
링크가 동작하지 않을 때는 아래 순서로 좁혀 나가면 원인을 빠르게 찾을 수 있습니다.
- 주소 뒤가 잘린 경우: 값에 공백이나 앰퍼샌드가 인코딩되지 않은 채 들어갔는지 확인합니다.
- 한글 페이지에서 404가 뜨는 경우: 문자 인코딩이 UTF-8이 아닌 다른 방식으로 처리됐을 가능성이 큽니다.
- 메신저에서만 깨지는 경우: 앱이 주소 끝의 마침표나 괄호까지 링크에 포함시킨 것은 아닌지 살펴봅니다. 주소 뒤에는 한 칸을 띄우는 편이 안전합니다.
- 일부 파라미터만 사라지는 경우: 중간에 리디렉션이 끼어 있을 때 파라미터가 유실될 수 있으므로 최종 도착 주소를 직접 확인합니다.
구조를 이해하고, 값은 인코딩하고, 배포 전에 한 번 열어 본다는 세 가지 원칙만 지켜도 링크 문제의 대부분은 사전에 걸러집니다.