UX 기획자를 위한 URL 이해

이 링크, 공유하면 미리보기가 메인으로 나와요
이 링크는 공유하면 미리보기가 안나와요

 

 

 

비슷한 상품 상세 페이지 링크의 공유 예시

 

 

 

 

상품 상세 링크를 카카오톡에 공유했는데 미리보기 제목과 이미지가 메인 페이지의 것으로 나옵니다. 

 

또는 아예 아무 내용도 없이 딸랑 링크만 공유되는 케이스도 종종 발생합니다. 

 

마케팅팀은 캠페인 성과가 GA 리포트에서 조각나 있다고도 합니다.

 

이러한 문제의 공통 원인은

 

URL을 개발 산출물로만 여기고 기획 단계에서부터 꼼꼼하게 설계하지 못한 것에 있습니다.

 

기획자가 URL의 동작 원리를 알면 이런 이슈를 설계 단계에서 막고,

 

개발자와 같은 언어로 대화할 수 있을 것입니다. 

 

그렇다면, 위 문제는 기획에서 어떻게 해결해야 할까요?
아래 URL에 대한 이해를 바탕으로 상품 상세페이지가 어떠한 경로와 쿼리스트링으로 이루어질 것인지 대략적인 방향성을 잡고, 각 상품 상세페이지마다 페이지의 타이틀, 설명, 그리고 썸네일 이미지를 정의(BO에서 별도로 등록할 것인지 또는 상품 상페이지 내 어떤 출력값을 활용할 것인지)해야 할 것입니다.

 

 

 

 

주소창 속 URL 해부

URL은 크게 5가지 항목으로 구성되어 있습니다.

 

URL 구조 예시

 

이 항목들은 순차적으로 프로토콜, 도메인, 페이지 경로, 쿼리 문자열, 프래그먼트 입니다. 

 

그럼 각 항목들에 대해서 자세히 살펴보겠습니다.

 

프로토콜

브라우저와 서버가 데이터를 주고받기 위해 사용하는 통신 규약입니다. 

99.9%가 http 또는 https 이니 이부분은 크게 신경쓰지 않아도 괜찮습니다.

 

도메인

우리가 기획(또는 운영)하는 웹 서비스의 고유 주소입니다. 

이 역시 한번 정해놓으면 바뀔일은 거의 없으므로 크게 신경쓰지 않아도 괜찮습니다.

 

페이지 경로

우리의 웹사이트 내에서 구체적으로 어떤 페이지나 파일에 접근하고 있는지 나타내는 상세 위치로

컴퓨터로 따지면 '폴더 구조'와 비슷합니다. 

 

예를 들어 'plans/18885'를 받으면, 서버는 데이터베이스에서 'plans 테이블'에서 'id가 18885인 행'을 조회하는 식으로 동작하는 경우가 많습니다.  

 

 

쿼리 문자열

서버에 추가적인 조건이나 정보(파라미터)를 전달할 때 사용하는 문자열입니다. 

?로 시작하며 키(key)=값(value) 형태로 데이터를 표현합니다.

주로 검색어, 필터링, 유입 경로 등을 전달할 때 쓰입니다. 

 

페이지 경로에 이어서 '?clickedNavigation=search_plans'는 해당 상세페이지로 오기 전 클릭한 메뉴가 '상품 검색'이었다는 것을 알려주는 역할로 추정할 수 있습니다. 

 

이 경우 쿼리 문자열 키=값 구조는 마케팅 분석을 위해 활용되는 것이므로 마케팅팀 및 개발팀과 함께 구조를 설계해야 합니다.

 

다른 케이스로는 '?category=t-shirts&sort=price_asc&page=3' 과 같은 구조의 쿼리 문자열도 볼 수 있는데, 이는 마케팅적인 요소가 아닌 실제 DB 쿼리 조건(WHERE category='t-shirts'), 정렬(ORDER BY price), 페이지 위치를 의미한다고 할 수 있습니다.

 

이렇듯 URL 파라미터는 데이터 조회 조건과 짝을 이루며, DB 스키마와 자연스럽게 연결됩니다. 

 

 

 

추가로 호학당 블로그의 사례를 포함하여 주소창에서 가끔

 

'%ED%98%B8%ED%95%99%EB%8B%B9' 같은 이상한 문자열이 있는 경우도 있는데, 

 

이는 한글이나 공백 등이 URL에서 활용 가능하도록 인코딩된 값(URL에는 영문, 숫자 등 일부 문자만 허용되므로)이라고 보면 됩니다. 

 

즉, '%ED%98%B8%ED%95%99%EB%8B%B9'이란 값은 디코딩하게 되면 '호학당'이 됩니다. 

 

URL은 렌더링 방식(SSR, CSR, 그리고 혼합)과도 함께 고려된다면, UX 기획의 완성도가 더욱 올라갈 것입니다.
* SSR, Servier-Side Rendering
* CSR, Client-Side Rendering

 

 

프래그먼트

페이지가 로딩된 후, 특정 위치(HTML 요소)로 화면을 바로 스크롤 시키기 위해 사용합니다.

# 뒤에 해당 영역의 고유 id를 붙이며, 서버로 전송되지 않고 브라우저 내부에서만 동작합니다.

 

프래그먼트 역시 예를 들면, 

 

페이지 구조상 상세페이지 내 리뷰 영역의 id 값이 'reviews'라고 할 경우

 

URL 뒤에 '#reviews'를 붙여 해당 상세페이지 내 리뷰 영역으로 바로 이동할 수 있습니다. 

 

 

 

 

 

URL의 구조에 대해서 이해했다면,

 

UX 기획 실무에서는 구체적으로 어떻게 해야 할까요?

 

 

 

 

UX 기획 실무 체크 리스트

 

첫 번째,

화면 상태와 URL 매핑 - "필터·정렬·페이지가 쿼리 스트링에 담기는가?"

 

화면의 상태와 URL의 관계에 대한 판단 기준은

 

"다른 사람에게 해당 링크(URL)를 공유했을 때 같은 화면이 보여야 하는가"입니다.

 

즉, 필터, 탭, 검색어, 페이지 번호 등이 이에 해당되며, 

 

쿼리 스트링에 담으면 공유하기나 북마크, 뒤로가기 복원 등이 자연스럽게 해결됩니다.

 

 

 

두 번째

공유 미리보기 - "상세 페이지마다 OG 태그가 구성되는가?"

 

카카오톡, 페이스북 등 SNS의 미리보기 수집기는 자바스크립트를 실행하지 않으므로,

 

CSR로만 구성된 서비스는 상세 페이지를 공유하더라도 미리보기가 제대로 나오지 않습니다.

 

이에 따라 특정 링크 또는 상세 페이지 공유가 필요하다면, 

 

SSR 또는 다른 대응방식을 통해 공유 기능이 정상 작동될 수 있도록 개발팀과 협의해야 합니다.

 

 

 

세 번째

GA 친화적 URL - "DB의 구조가 URL 경로에 반영되는가?"

 

DB에 대분류 > 중분류 > 상품 스키마가 있다면, URL도 /clothes/t-shirts/hohak-001처럼 계층이 반영되는 것이 좋습니다.

 

GA4에서 "경로가 /clothes/로 시작" 필터만으로 카테고리 실적이 집계되기 때문입니다.

 

그렇지 않고 모든 상세가 /view?id=001 형태로 구성된다면,

 

마케팅팀에서 카테고리 분석에 별도 작업이 필요해지게 되고, 이는 업무의 비효율로 이어지게 됩니다.

 

 

 

이렇게 세 가지 실무 체크 리스트를 UX 기획 시 미리 고려한다면,

 

보다 완성도 있는 서비스를 만들 수 있을 것입니다.

 

추가로 URL과 관련하여

 

UX 실무에서 마케팅팀, 그리고 개발팀과 자주 이야기하게 되는 

 

주요 Tip은 아래와 같습니다.

 

마케팅팀과의 커뮤니케이션 Tip 

개발팀과 설계하는 URL 구조와는 별개로 마케팅팀에서는 UTM 컨벤션을 활용하는 것이 일반적인데,

이는 사전에 약속된 쿼리 스트링의 키값을 통해 마케팅 지표를 확인하도록 하는 것입니다. 

마케팅 실무에서 활용되는 UTM 컨벤션은 다음과 같습니다.

① source/medium/campaign 3종은 함께 사용(누락 시 GA4에서 (not set))
② GA4는 값의 대소문자 구분 → 소문자 통일
③ 자사 내부 이동 링크에 UTM 금지(세션 재시작·데이터 왜곡)

UTM 적용 예시)
domain.com/product/001?utm_source=naver&utm_medium=cpc&utm_campaign=202607_summer_sale&utm_content=main_banner_a

 

개발팀과의 커뮤니케이션 Tip

페이지 목록에서는 상세 페이지에서 뒤로 이동 시 URL 내 '?page=3' 같은 쿼리 스트링을 활용해 자연스럽게 이동할 수 있지만, 

무한 스크롤 목록에서 상세 페이지 진입 후 뒤로 갔을 때 보던 위치로 돌아가지 못하고 최상단으로 이동하는 경우가 종종 있습니다.

이는 URL만으로는 해결이 어렵고, 로드된 데이터와 스크롤 위치를 세션 스토리지 등에 별도로 저장 후 복원해야 합니다. 

 

 

 

 

이번 글에서는 

 

UX 기획자 관점에서 URL에 대해 파헤쳐보았는데,

 

이를 통해 

 

DB 구조를 반영한 경로로 잘 설계되고, 공유되어야 할 상태는 쿼리 스트링에 담아 

 

화면 설계서의 수준을 한 단계 더 높일 수 있기를 기대해봅니다!

 

 

 

 

# 참고자료 

• MDN, URIs
• Open Graph protocol
• Google Analytics, Collect campaign data with custom URLs
• web.dev, Back/forward cache