HTML 우선 웹사이트, 사용자 경험을 혁신하다!
HTML 우선 접근 방식으로 유틸리티 회사 웹사이트 사용자 수가 하룻밤 사이에 두 배 증가함
React 앱의 실패 경험을 바탕으로, JavaScript 없이도 작동하는 웹사이트 구축을 목표로 함
점진적 향상(Progressive Enhancement)을 통해 오래된 브라우저 및 저사양 기기에서도 안정적인 서비스 제공
데이터 유실 방지를 위한 백엔드 세션 저장 및 WCAG AA 접근성 준수 강조
JavaScript 중심 개발에 대한 비판
커뮤니티에서는 과도한 JavaScript 사용이 오히려 사용자 경험을 저해한다는 의견이 지배적입니다. 특히 클라이언트 측 렌더링(Client-Side Rendering)과 거대한 번들 크기(Large Bundle Sizes)는 저사양 기기나 불안정한 네트워크 환경에서 심각한 성능 저하를 유발한다고 지적합니다. 과거 PSP(PlayStation Portable) 브라우저에서도 작동했던 GOV.UK 사례처럼, HTML 우선 접근 방식(HTML-First Approach)이 더 많은 사용자에게 정보를 전달하는 데 효과적이라는 주장이 제기됩니다.
Astro와 HTMX를 활용한 현대적 HTML 우선 개발
Astro와 HTMX를 활용하여 서버 중심의 웹 애플리케이션(Server-Centric Web Applications)을 구축하는 사례가 공유되었습니다. 특히 Go와 SQLite를 백엔드로 사용하고, S3 및 Cloudflare를 통한 효율적인 정적 자산 캐싱(Efficient Static Asset Caching) 전략은 대규모 트래픽에서도 비용 효율성을 높인다고 언급됩니다. 이는 점진적 향상(Progressive Enhancement) 원칙을 현대적으로 재해석한 결과로 평가됩니다.
웹 컴포넌트(Web Components)의 역할과 한계
본문에서 언급된 웹 컴포넌트는 JavaScript 없이도 작동하는 기본 HTML 기능 위에 사용자 경험을 향상(Enhance User Experience)시키는 역할을 합니다. 특히 1KB 미만의 작은 크기로 구현된 폼 유효성 검사(Form Validation) 웹 컴포넌트는 브라우저 내장 기능의 한계를 보완하며 현대적인 UI를 제공합니다. 다만, PSP와 같은 매우 오래된 브라우저에서의 호환성 여부는 여전히 논의 대상입니다.
데이터 유실 방지 및 접근성 확보 전략
유틸리티 회사의 규제 환경을 고려할 때, 백엔드 세션 기반 데이터 저장(Backend Session-Based Data Storage)은 필수적이었습니다. 이는 사용자가 중간에 양식을 이탈하더라도 데이터를 안전하게 보존하여 데이터 유실(Data Loss)을 방지하는 핵심 전략입니다. 또한, WCAG AA 수준의 접근성 준수는 모든 사용자가 서비스에 접근할 수 있도록 보장하는 중요한 요소로 강조됩니다.
SPA의 대안으로서의 서버 렌더링 및 리디렉션
커뮤니티에서는 Remix와 같은 프레임워크가 재조명하는 폼 제출(Form Submission) 및 리디렉션(Redirection) 패턴이 SPA의 대안으로 제시됩니다. 각 단계별로 데이터를 제출하고 API 검증 후 다음 페이지로 이동하는 방식은 클라이언트 측 JavaScript 의존도를 낮추고 안정성을 높입니다. 이는 특히 복잡한 양식 처리 시 개발 복잡성(Development Complexity)을 줄이는 데 기여한다는 의견이 있습니다.
