URL은 곧 상태다 (Your URL is Your State)

✨ URL은 단순 주소가 아니다 — 상태(State)를 담는 컨테이너다

웹에서 우리가 흔히 보는 URL은 단순히 “어디로 갈지 알려주는 주소”가 아니다.
URL 안에는 애플리케이션의 상태, 사용자 의도, 필터/설정 등 유의미한 정보가 담겨 있고, 이를 잘 설계하면 상태 관리 도구처럼 활용할 수 있다.

🔥 왜 URL이 중요할까?

프런트엔드 개발에서는 상태 관리에 Redux, Zustand, Context 같은 도구를 자주 쓰지만, URL 자체가 오래전부터 존재해 온 가장 기본적인 상태 저장·공유 수단이라는 사실을 종종 잊는다.

URL이 가진 본질적인 기능

✅ 공유 가능성 — 누군가에게 링크를 보내면 같은 상태를 재현할 수 있다.
✅ 북마크 가능성 — 사용자가 나중에 동일한 상태로 돌아올 수 있다.
✅ 히스토리 (뒤로/앞으로) — 브라우저 내비게이션 자체가 상태 기록이다.
✅ 딥 링크 — 앱의 특정 상태로 곧바로 접근하게 해 준다.

🔍 URL의 구성 요소와 상태 의미

URL은 구조적으로 다음과 같은 부분으로 나뉜다:

📌 1) Path (경로)

자원 또는 화면 구조를 의미한다.

/users/123/posts  
/docs/api/authentication  
/dashboard/analytics

📌 2) Query Parameters (쿼리 파라미터)

필터, 옵션, 정렬, 페이지네이션 등 상태를 저장한다.

?theme=dark&lang=en  
?status=active&sort=date  
?page=2&limit=20

📌 3) Hash/Fragment (앵커)

페이지 내부 위치 또는 특정 뷰 상태를 나타낸다.

#features  
#/dashboard  

이렇게 URL의 각 부분은 애플리케이션의 중요 상태를 그대로 드러낼 수 있는 그릇인 셈이다.

💡 URL 상태 관리의 실제 예
🎯 UI 설정 유지 & 공유

PrismJS 다운로드 페이지에서 선택한 옵션 상태가 URL에 저장되어 동일한 설정을 다시 불러올 수 있었다.

🗺 Google Maps

좌표, 줌 레벨, 뷰 타입까지 URL 안에 담겨 있어 같은 지도로 동일 위치로 공유 가능.

🛍 E-commerce 필터

브랜드, 가격, 정렬 옵션 등이 URL로 저장되어 북마크 및 공유 가능.

🧠 URL 상태 디자인 가이드
✔ URL에 넣어야 할 상태

검색 쿼리 & 필터

페이지네이션, 정렬

뷰 모드 (리스트/그리드, 테마)

날짜 범위

선택된 탭/보기 옵션

❌ URL에 넣지 말아야 할 것

비밀번호, 토큰 같은 민감 정보

일시적 UI 상태 (예: 모달 열림/닫힘)

너무 크거나 복잡한 상태

⚙️ URL로 상태 다루는 법 (예시 코드)
// 기본 URL 파라미터 읽기
const params = new URLSearchParams(window.location.search);
const page = params.get('page') || 1;
const sort = params.get('sort') || 'date';

// URL 업데이트 함수
function updateFilters(filters) {
  const params = new URLSearchParams(window.location.search);
  params.set('sort', filters.sort);
  
  // history API로 URL만 바꿔 상태 반영
  history.pushState({}, '', `${window.location.pathname}?${params.toString()}`);
}

React에서도 useSearchParams 같은 훅을 써서 쉽게 상태를 동기화할 수 있다.

🧩 URL 상태 설계 모범 사례

📌 기본값은 URL에 넣지 않기

// 실제로 보여지는 상태만 URL에 포함
?theme=dark

📌 URL 변경은 디바운스 처리

지나치게 자주 바뀌면 히스토리가 복잡해질 수 있음

📌 pushState vs replaceState

내비게이션으로 되돌릴 필요 있으면 pushState

단순 설정 변경이면 replaceState

🔚 정리 — URL은 계약이다

URL은 그 자체로 애플리케이션과 사용자 사이의 계약이다.
좋은 URL은 사람, 개발자, 검색 엔진 모두에게 명확한 기대를 제공하며,
단순 주소가 아닌 상태를 유지·공유·재현하는 핵심 도구이다.