개발도구 · 2026년 7월 6일 · 읽는 시간 3분

URL 쿼리스트링 한눈에 보고 싶어서 만든 것

URL이 길어지면 어떤 파라미터가 들어있는지 한눈에 파악이 안 된다.

URL 쿼리스트링 파싱이 필요한 상황

이런 상황들:

API 디버깅 → 요청 URL의 파라미터 확인
광고/마케팅 UTM 파라미터 분석 → utm_source, utm_medium 등 확인
OAuth 콜백 URL → code, state 파라미터 추출
URL 인코딩된 파라미터 → %EB%A7%88%EC%BC%80 같은 거 디코딩
QA 테스트 → 링크의 파라미터 값 검증
구글 애널리틱스 URL → 긴 추적 파라미터 파악

특히 UTM 파라미터가 5~6개 달린 마케팅 링크나, 인코딩된 값들이 섞인 URL은 보기가 진짜 힘들다.

URL 쿼리스트링 구조

https://example.com/search?q=검색어&sort=date&page=2&filter=true
                          ↑ ? 이후가 쿼리스트링

파라미터: q = 검색어
파라미터: sort = date
파라미터: page = 2
파라미터: filter = true

URL 인코딩된 경우:

?q=%EA%B2%80%EC%83%89%EC%96%B4&category=%EA%B0%9C%EB%B0%9C

→ 디코딩하면
q = 검색어
category = 개발

기존 방법의 문제

브라우저 개발자 도구 Network 탭 → Headers에서 찾아야 하는데 번거로움
JavaScript 콘솔 → new URLSearchParams(...) 직접 입력
온라인 URL 디코더 → 인코딩만 풀어주고 파라미터 분리는 안 해줌
수동 파싱 → & 기준으로 눈으로 분리해서 읽기

그냥 URL 붙여넣으면 파라미터별로 테이블로 정리됐으면 했다.

그래서 만들었음

주요 기능:

URL 전체 붙여넣기 → 파라미터별로 분리해서 테이블로 출력
URL 인코딩된 값 자동 디코딩
각 파라미터 키/값 개별 복사 가능
URL 구성 요소 분리 (프로토콜, 도메인, 경로, 쿼리, 해시)
파라미터 수정 후 URL 재조합

추가 기능:

중복 파라미터 키 감지 (배열 파라미터)
빈 값 파라미터 표시
JSON 형태로 파라미터 내보내기

UTM 파라미터 예시

https://toolpiki.com/?utm_source=newsletter&utm_medium=email&utm_campaign=summer2026&utm_content=cta_button&utm_term=개발도구

→ 파싱 결과
utm_source   = newsletter
utm_medium   = email
utm_campaign = summer2026
utm_content  = cta_button
utm_term     = 개발도구

마케팅 팀에서 공유한 링크의 UTM이 제대로 달렸는지 확인할 때도 유용하다.

실제로 써보니

좋은 점:

긴 URL도 파라미터별로 깔끔하게 정리됨
인코딩된 한국어도 자동으로 디코딩
URL 전체를 붙여넣어도 되고 쿼리스트링만 넣어도 됨
파라미터 수정 후 URL 다시 만들기 가능

한계:

중첩된 객체 파라미터 (qs 라이브러리 스타일) 완전 파싱은 안 될 수 있음
매트릭스 파라미터 (;key=value) 방식은 지원 안 함

사용법

URL 전체 또는 쿼리스트링 부분 붙여넣기
파라미터 목록 확인
필요한 값 복사

3초면 됨.

써보기

👉 URL 쿼리스트링 파서 바로 가기

API 디버깅이나 마케팅 링크 확인할 때 편하다.

#URL파싱 #쿼리스트링 #URLDecoder #UTM파라미터 #API디버깅