HTML 우선 사이트를 구축해 하룻밤 사이 사용자를 두 배로 늘린 방법

HTML 우선 사이트 설계 — Astro 기반 다중 페이지 폼 마법사

HTML 우선 사이트를 구축해 하룻밤 사이 사용자를 두 배로 늘린 방법

웹 개발에서 새로운 접근이 화제를 모으고 있습니다. 자바스크립트 없이도 동작하는 폼을 만들어 사용자가 공공 서비스를 신청할 수 있게 한 사례이며, 출시 후 신청자 수가 두 배로 뛰었습니다. 단순한 HTML과 점진적 향상이 가져온 변화입니다.

왜 HTML 우선 접근이 주목받는가

공공 서비스 신청은 시민 모두가 접근할 수 있어야 합니다. 저사양 기기, 낡은 브라우저, 불안정한 네트워크 환경을 가진 사용자도 신청을 마칠 수 있어야 하며, HTML 우선 방식이 이를 가능하게 합니다.

영국 GOV.UK의 사례는 시사점이 큽니다. 단순 HTML로 만든 페이지가 2005년 출시된 PlayStation Portable 브라우저에서도 주거 급여 정보를 읽을 수 있게 했습니다. 30년 뒤에도 동작하는 웹이 가능하다는 것을 보여주는 예시입니다.

이번 영국 유틸리티 회사의 사례는 동일한 철학에서 출발합니다. 자바스크립트는 웹 컴포넌트 안에서만 제한적으로 사용됐고, 자바스크립트 없이도 정상 작동하는 사이트를 점진적으로 개선하는 역할을 맡았습니다.

실패한 React 앱이 남긴 교훈

이전 시도는 해외 외주팀이 만든 React 앱이었습니다. 출시 3일 만에 고객 불만으로 내려갔는데, 원인은 다음과 같았습니다.

• 로딩 스피너가 반복 노출되며 체감 속도가 느렸습니다

• 전역 자바스크립트 상태가 복잡하게 얽혀 디버깅이 어려웠습니다

• 접근성 기준을 충족하지 못했습니다

• 핵심 기능인 이미지 업로드가 localStorage 5MB 한계에 걸려 실패했습니다

반면 새 구현은 Astro 기반의 정적 사이트 생성을 채택했습니다. 자바스크립트 번들 크기는 1KB 미만으로 줄었고, 폼 마법사의 각 단계를 별도 페이지로 분리해 20MB 자바스크립트를 미리 보내는 방식을 회피했습니다.

폼 데이터 손실을 막는 세션 설계

HTML 우선 접근의 핵심은 데이터 보존입니다. 폼의 각 세션은 고유 ID를 가지며, 모든 단계에서 제출 데이터와 업로드 파일은 백엔드 세션에 저장됩니다. 사용자가 다음 버튼을 누르면 폼이 제출되고, API가 데이터를 검증한 뒤 다음 단계로 리디렉션합니다.

이 방식의 강력함은 사용자가 한 달에 걸쳐 신청을 완료한 사례에서 드러납니다. 첫 단계에서 작성한 정보가 한 달 뒤 단계에서도 그대로 유지되어, 자바스크립트 기반 분석 패키지에는 잡히지 않던 사용자도 무사히 신청을 마칠 수 있었습니다.

폼 제출과 리디렉션 패턴은 1990년대 웹의 기본이었습니다. Remix의 등장으로 작은 현대적 부흥을 겪었으며, 이 프로젝트는 그 흐름을 따랐습니다. 큰 폼을 다루는 서비스에서 20MB 자바스크립트를 렌더링 전에 보내는 건 명백한 부적절함입니다.

1KB 미만으로 구현한 폼 검증

검증 영역에서 React는 팀이 여러 인월을 쓰는 비용 구간이었습니다. 브라우저에는 이미 검증 시스템이 내장돼 있어, 이를 활용하는 편이 라이브러리 관리 비용을 들이지 않고도 안정적입니다.

구현된 HTML 웹 컴포넌트는 기존

태그를 감싸는 단순한 커스텀 요소였습니다. 섀도 DOM을 쓰지 않았고, 자바스크립트 안에서 HTML을 거의 렌더링하지 않았습니다. 입력 중 유효한 상태가 되면 검증을 지우고, blur와 제출 시점에 다시 평가하는 방식이었습니다.

검증 메시지는 필드와 연결된 aria-describedby 요소 안에 배치해 접근성을 확보했습니다. 이 사용자 경험은 1KB 미만으로 제공됐고, 자바스크립트가 실패하면 브라우저 기본 검증으로, 그것마저 실패하면 백엔드 API 검증으로 이어지는 점진적 향상 구조를 채택했습니다.

누구나 접근 가능한 설계가 가져온 결과

출시 후 폼을 완료한 사람 수가 정확히 두 배가 됐습니다. 분석 담당자들은 이 사용자들이 어디서 왔는지 알지 못했는데, 자바스크립트 기반 분석 패키지는 자바스크립트 실패로 이탈한 사용자를 추적하지 못했기 때문입니다.

오래된 브라우저 사용자, 나쁜 네트워크 연결 사용자, 보조 기술 사용자를 배제하는 것은 독점 공공 서비스에서 받아들일 수 없는 선택이었습니다. 후임자가 작업량을 늘린다고 반발했지만, 단순한 방식이 결국 더 많은 사용자에게 도달하게 만들었습니다.

계약 업무가 끝난 뒤 남긴 메시지는 분명합니다. PlayStation Portable과 3G 연결에서도 작동하는 웹 애플리케이션을 만들면 모든 사용자에게 작동하고, 30년 뒤에도 작동할 수 있다는 것입니다.

그래서 우리도 따라 할 수 있는가

HTML 우선 접근은 만능이 아닙니다. 풍부한 UI 요소를 npm 패키지로 즉시 가져다 써야 하는 상황에서는 개발 속도가 느려질 수 있고, 인터랙티브한 대시보드나 실시간 데이터 시각화에는 SPA가 여전히 적합합니다. 단순한 폼과 정적 콘텐츠 중심 사이트에서 진가를 발휘합니다.

우리 프로젝트에 적용할지를 판단할 때는 세 가지를 따져보면 됩니다. 첫째, 콘텐츠가 큰 폼인가 아니면 실시간 앱인가. 둘째, 네트워크가 불안정한 환경의 사용자가 중요한가. 셋째, 자바스크립트 실패 시 데이터 손실이 허용되는가. 세 질문 모두에 옳다면 HTML 우선을 진지하게 검토할 가치가 있습니다.

---

📚 출처

• https://news.hada.io/topic?id=30372