URL 쿼리스트링 빌더·파서 완벽 가이드
URL 쿼리스트링(Query String)은 ?key1=value1&key2=value2 형태로 웹 주소 뒤에 붙어 서버에 추가 정보를 전달하는 표준 규격입니다. 마케팅 UTM 파라미터를 조합하거나, API 요청 URL을 조립하거나, 이미 만들어진 링크에 어떤 값이 들어있는지 확인해야 할 때 매번 손으로 &와 %인코딩을 계산하는 것은 번거롭고 실수하기 쉽습니다. 이 도구는 두 가지 방향을 모두 지원하는 양방향 유틸리티입니다.
빌더 모드는 기본 URL과 키-값 쌍을 입력하면 URLSearchParams 방식과 동일한 로직으로 각 값을 encodeURIComponent()로 인코딩하여 완성된 URL을 즉시 만들어 줍니다. 인코딩 토글을 끄면 원본 문자열을 그대로 이어붙여 미리보기할 수 있어, 이미 인코딩된 값을 다시 이중 인코딩하는 실수를 방지할 수 있습니다. 파라미터 행은 자유롭게 추가·삭제할 수 있으며 같은 키를 여러 번 입력하면 a=1&a=2처럼 중복 키도 그대로 유지되어 배열형 파라미터를 표현할 수 있습니다.
파서 모드는 반대로 완성된 URL을 붙여넣으면 브라우저 내장 URL 객체로 origin(프로토콜+호스트)과 경로(pathname), 쿼리스트링을 분리한 뒤, 각 파라미터를 decodeURIComponent()로 디코딩하여 표로 정리합니다. 이 과정에서 동일한 키가 여러 번 등장하면 중복 표시를, 값이 비어있는 파라미터(key= 형태)는 빈 값 표시를 함께 보여주므로 실제 요청에 어떤 값이 담겨 전달되는지 빠르게 검증할 수 있습니다. 프로토콜이 없는 상대 경로나 ?query=only처럼 쿼리스트링만 붙여넣어도 파라미터 표는 정상적으로 분석됩니다.
모든 처리는 브라우저 안에서만 이루어지며 입력한 URL이나 파라미터 값은 외부 서버로 전송되지 않습니다. 복사 버튼으로 완성된 URL이나 분석 결과를 클립보드에 바로 담을 수 있고, 마지막 입력값은 브라우저에 자동 저장되어 다음 방문 시 이어서 작업할 수 있습니다.
자주 묻는 질문 (FAQ)
Q. 인코딩 토글을 끄면 어떻게 되나요?
A. 키와 값을 encodeURIComponent() 없이 원본 문자열 그대로 =와 &로만 연결합니다. 이미 퍼센트 인코딩(%XX)이 되어 있는 값을 다시 붙여넣어 이중 인코딩을 피하고 싶을 때 사용하세요. 단, 한글이나 특수문자를 인코딩 없이 넣으면 실제 브라우저 주소창에서 깨질 수 있으니 최종 사용 전에는 인코딩을 켜는 것을 권장합니다.
Q. 같은 키를 여러 번 입력하면 어떻게 처리되나요?
A. 빌더 모드에서는 중복 키를 그대로 유지해 tag=js&tag=css처럼 배열형 쿼리를 만들 수 있습니다. 파서 모드에서는 같은 키가 여러 번 나오면 결과 표에 "중복" 표시가 함께 붙어 몇 번 등장했는지 시각적으로 구분됩니다.
Q. 프로토콜(https://) 없이 path?query 형태만 붙여넣어도 분석되나요?
A. 네. 내부적으로 임시 origin을 붙여 파싱한 뒤 origin 항목에는 "origin 없음(쿼리스트링만 있는 경우)"으로 안내하고, 경로와 파라미터 표는 정상적으로 분석해 보여줍니다. 완전한 절대 URL을 붙여넣으면 실제 origin과 경로도 함께 표시됩니다.