URL을 통해 웹 앱 상태 공유 — 백엔드 없이

Source: Dev.to

문제

클라이언트‑사이드 도구를 만들었습니다. 사용자는 설정을 구성하고, 데이터를 입력하고, 옵션을 조정합니다. 그런 다음 정확한 구성을 팀원과 공유하고 싶어합니다.

전통적인 해결책: 데이터베이스 + 사용자 계정 + 공유 엔드포인트. 하나의 기능을 위해 전체 백엔드가 필요합니다.

해결책: URL 상태 인코딩

function shareURL() {
  // Collect current state
  const state = {
    groups: getKeywordGroups(),
    match: currentMatchType,
    separator: document.getElementById("separator").value
  };

  // Encode as base64 URL parameter
  const encoded = btoa(JSON.stringify(state));
  const url = `${location.origin}${location.pathname}?q=${encoded}`;

  navigator.clipboard.writeText(url).then(() => {
    showToast("Shareable link copied!");
  });
}

페이지 로드 시 파라미터를 확인하고 복원합니다:

const params = new URLSearchParams(location.search);
const shared = params.get("q");

if (shared) {
  try {
    const state = JSON.parse(atob(shared));
    restoreState(state);
  } catch (e) {
    loadDefaults();
  }
}

그게 전부입니다. 약 20줄의 코드. 서버도, 데이터베이스도, 인증도 필요 없습니다.

왜 잘 작동하는가

• 인프라 제로 — URL 자체가 저장소
• 즉시 공유 — 링크 복사 → 붙여넣기 → 완료
• 북마크 가능 — 사용자가 특정 구성을 저장할 수 있음
• 디버깅 용이 — 지원 티켓에 정확한 상태가 포함됨
• 오프라인 친화 — 네트워크 없이도 작동

주의점

• URL 길이 제한 — 대부분의 브라우저는 2,000자 이상을 처리하지만 상태를 간결하게 유지하세요.
• Base64 부피 증가 — JSON + base64는 약 33 %의 오버헤드를 추가합니다. 큰 상태의 경우 pako(gzip) 사용을 고려하세요.
• 버전 호환성 — 상태 형식에 버전을 붙이거나 폴백 파싱을 추가하세요.
• 민감한 데이터 — Base64는 인코딩일 뿐 암호화가 아닙니다. URL에 비밀 정보를 넣지 마세요.

영구 프리셋 추가 (보너스)

파워 유저를 위해 URL 공유와 localStorage 프리셋을 결합합니다:

function savePreset(name) {
  const presets = JSON.parse(localStorage.getItem("presets") || "{}");
  presets[name] = getCurrentState();
  localStorage.setItem("presets", JSON.stringify(presets));
}

function loadPreset(name) {
  const presets = JSON.parse(localStorage.getItem("presets") || "{}");
  if (presets[name]) restoreState(presets[name]);
}

이제 사용자는:

• 저장: 로컬에 구성 저장(페이지 새로고침에도 유지)
• 공유: URL을 통해 구성 공유(기기 간 동작)
• 로드: 저장된 구성을 즉시 불러오기

API 호출 하나 없이 모두 가능합니다.

실제 예시

저는 이 패턴을 Keyword Mixer에 적용했습니다 — PPC 키워드 조합 도구입니다. 사용자는 키워드 그룹, 매치 타입, 제외 키워드를 설정하고, 팀과 정확한 설정을 단일 URL로 공유합니다.

?q= 파라미터에 모든 것이 담깁니다. 공유 링크를 클릭하면 도구가 정확한 구성으로 열리고, 즉시 조합을 생성합니다.

언제 사용하면 좋은가

• ✅ 설정‑중심 도구(설정, 필터, 프리셋)

• ✅ 소규모‑중간 상태(< 1 KB JSON)

• ✅ 공유 = 협업이 필요한 도구

• ❌ 대용량 데이터셋(대신 IndexedDB + export 사용)

• ❌ 민감한 데이터(암호화 또는 서버‑사이드 저장 필요)

• ❌ 빈번히 변하는 상태(웹소켓 또는 SSE 사용)

이 “URL을 데이터베이스처럼 쓰는” 패턴은 제가 탐구하고 있는 여러 제로‑백엔드 기법 중 하나입니다. 브라우저 전용 도구 구축에 관심이 있다면 DonFlow도 확인해 보세요 — 모든 것을 IndexedDB로 처리하고 네트워크 요청이 전혀 없는 예산 추적기입니다.