하이퍼미디어 시스템으로 돌아가기: HTML로 JavaScript 대체하기

현대 웹 개발 환경은 브라우저를 문서 뷰어가 아니라 애플리케이션 런타임으로 취급하는 복잡한 클라이언트 사이드 프레임워크에 의해 지배되어 왔습니다. 그러나 웹의 원래 의도인 하이퍼미디어 시스템으로 돌아가자는 움직임이 점점 커지고 있습니다. HTML을 JavaScript보다 우선시함으로써 개발자는 복잡성을 줄이고 초기 로드 시간을 개선하며, 수십 년 동안 웹을 확장 가능하게 만든 아키텍처 패턴과 맞출 수 있습니다.

HTML-First 개발의 사례

핵심적으로, 웹은 하이퍼미디어 시스템입니다. 무거운 JavaScript 번들에서 벗어나 서버 사이드 렌더링(SSR)과 네이티브 HTML 전환으로 돌아가면, 현대 SPA(Single Page Applications)의 소음에 자주 묻혀버리는 'blazing fast' 성능과 단순함을 다시 발견하게 됩니다.

커뮤니티 멤버들이 언급한 바와 같이 Go와 같은 백엔드를 사용하여 사전 렌더링된 HTML을 제공하면, 브라우저가 가장 잘 하는 일인 문서 파싱과 렌더링을 할 수 있게 됩니다. 이 접근 방식은 서버가 단일 진실의 공급원이므로 클라이언트와 서버 간의 복잡한 상태 동기화가 필요 없게 됩니다.

단순함과 성능의 균형

HTML-first 개발로의 전환은 매력적이지만, trade-off가 전혀 없는 것은 아닙니다. 주요 긴장은 서버 중심 접근 방식의 단순함과 클라이언트 사이드 인터랙티비티의 최적화된 사용자 경험 사이에 있습니다.

네트워크 왕복 문제

HTML-first 접근 방식에 대한 주요 비판 중 하나는 네트워크 요청에 대한 의존도가 증가한다는 것입니다. 전통적인 SPA에서는 작은 JavaScript 조각이 서버에 접근하지 않고 UI 요소의 크기나 가시성을 변경하기 위해 로컬 상태 변수를 업데이트할 수 있습니다. 엄격한 HTML-driven 모델에서는 뷰 상태를 변경하려면 전체 페이지 새로 고침이나 서버에서의 프래그먼트 업데이트가 필요할 수 있습니다.

"변경 사항으로 인해 현재 페이지에서 동일한 콘텐츠의 새로운 크기를 얻기 위해 추가적인 네트워크 왕복 요청이 필요해졌는데, 이는 단지 몇백 바이트의 JavaScript로도 수행할 수 있었던 작업입니다.

대체 중간 접근 방식

• CSS Variables: 레이아웃이나 크기를 제어하는 CSS 변수를 토글하기 위해 JavaScript만을 사용함으로써 전체 서버 왕복을 피하면서 관심사의 깨끗한 분리를 유지할 수 있습니다.
• Web Components: 무거운 프레임워크 없이 동작을 캡슐화하기 위해 네이티브 브라우저 구성 요소를 활용합니다.
• View Transitions API: CSS 전환과 View Transitions API의 사용은 간극을 메워서 서버 사이드 탐색이 클라이언트 사이드 전환처럼 원활하게 느껴지도록 도와주지만, 브라우저 지원(특히 Firefox)은 여전히 제한 요소로 남아 있습니다.

하이퍼미디어 시스템의 미래

웹 플랫폼은 더욱 강력한 하이퍼미디어 시스템으로 진화하고 있습니다. 단순한 HTML을 넘어, 일반 트랜스클루전과 기타 아키텍처 개선을 제안하여 "JS-everything" 패러다임에 의존하지 않고 웹을 더욱 표현력 있게 만들 수 있도록 개발되고 있습니다.

궁극적인 목표는 JavaScript를 완전히 제거하는 것이 아니라, 올바른 작업에 올바른 도구를 찾는 것입니다. HTML을 애플리케이션 상태의 주요 동력으로 취급하고 JavaScript를 점진적 향상으로 사용함으로써 개발자는 더 접근성이 높고 회복력이 있으며 유지 관리가 훨씬 쉬운 애플리케이션을 만들 수 있습니다.