AI 요약
웹소켓(WebSockets) 기반으로 서버가 완성된 HTML을 실시간 양방향 채널을 통해 클라이언트에 전송하는 'HTML over WebSockets' 패턴을 소개하는 기사다. 기존 SPA 개발의 복잡성(프론트엔드 프레임워크, JSON API, 계약 관리)을 제거하고, 렌더링 로직을 백엔드 단일 언어로 통합하는 접근법이다. 2019년 ElixirConf에서 크리스 맥코드가 발표한 Phoenix LiveView에서 시작되어 다양한 언어로 확산됐다. 클라이언트의 JavaScript는 렌더링이 아닌 통신 채널 생성과 HTML 배치 역할만 담당한다.
핵심 포인트
- HTML 전송 방식은 HTTP(htmx, Unicorn), SSE(Datastar), WebSockets(Phoenix LiveView, Django LiveView)의 3가지 변형이 있으며, 채널 특성이 애플리케이션 아키텍처를 결정함
- 크리스 맥코드가 2019년 ElixirConf에서 15분 만에 실시간 트위터 클론을 JavaScript 렌더링 없이 구현해 주목받음
- 서버가 이미 조립된 HTML을 전송하므로 JSON 계약이나 별도 API가 불필요하며, 렌더링 부하와 로직이 모두 백엔드에 집중됨
- 클라이언트 JavaScript의 역할은 WebSocket 채널 생성, 수신 HTML 배치, 애니메이션 및 이벤트 처리 등 부수적 작업에 국한됨
향후 전망
- 단일 언어·단일 렌더링 엔진으로 SPA를 구현할 수 있는 대안으로서, 실시간성이 중요한 서비스에서 채택이 늘어날 가능성이 높음
- HTTP/SSE 방식과의 비교를 통해 사용 사례별 최적의 통신 패턴 선택이 중요해질 것