SPA 환경에서의 버전 업데이트를 위한 모두싸인의 최신 버전 업데이트 기능 구현기

모두싸인이 React + Vite + AWS S3 + CloudFront 기반 SPA 환경에서 배포된 신 버전을 이미 접속 중인 사용자에게 안전하게 전달하기 위해 구현한 자동 버전 업데이트 감지 기능을 다룬다. SPA의 특성상 초기 index.html을 한 번만 로드하면 같은 세션에서 새 버전이 반영되지 않는 문제를 version.json 폴링 방식으로 해결했다.

핵심 포인트

SPA는 초기 index.html 한 번만 로드하기 때문에 배포 후에도 기존 사용자는 구 버전을 계속 사용하는 문제가 있다.
version.json 파일을 1분 간격으로 폴링해 클라이언트 버전과 서비스 최신 버전을 비교하는 방식으로 해결했다.
버전 상태에 따라 세 가지 분기: 이용 금지 버전(강제 새로고침), 구 버전이지만 최소 지원 이상(선택적 새로고침), 최신 버전(정상 동작)으로 처리한다.
이용 금지 버전은 10분 유예 시간을 주어 사용자가 작업을 마무리할 수 있게 한 뒤 자동 새로고침을 안내한다.
기능 도입 후 구 버전에서 최신 버전으로의 전환율이 지속적으로 증가했다.

상세 정리

기술 스택: React + Vite 빌드 + AWS S3 정적 파일 호스팅 + CloudFront CDN 기반 SPA 구조다.
배포 구조: 버전별로 격리된 배포 구조를 운영해 각 버전의 정적 파일이 독립적으로 S3에 저장된다.
근본 문제: SPA는 첫 접속 시 index.html을 단 한 번만 받아오고, 이후 페이지 이동은 클라이언트 라우팅으로 처리하기 때문에 새 버전이 배포돼도 기존 세션 사용자에게는 반영되지 않는다.
해결 접근: version.json 파일에 현재 배포 버전과 최소 지원 버전, 이용 금지 버전 목록을 담고, 클라이언트가 1분 간격으로 이를 폴링해 자신의 버전과 비교한다.
분기 1 — 이용 금지 버전: 심각한 버그나 보안 이슈로 강제 전환이 필요한 버전이면 10분 유예 시간을 주고 자동 새로고침을 안내한다. 사용자가 작업 중인 내용을 저장할 시간을 확보한다.
분기 2 — 구 버전(최소 지원 이상): 최신 버전은 아니지만 최소 지원 버전 이상이면 사용자가 선택적으로 새로고침할 수 있도록 안내 배너를 표시한다.
분기 3 — 최신 버전: 이미 최신 버전을 사용 중이면 별도 알림 없이 정상 동작한다.
결과: 기능 도입 후 구 버전에서 최신 버전으로의 전환율이 지속적으로 증가했다.