최근 웹 개발 분야에서 싱글 페이지 애플리케이션(SPA)을 구축하는 새로운 접근 방식인 'HTML 오버 웹소켓(HTML over WebSockets)'이 주목받고 있습니다. 이 방식은 서버에서 HTML을 완전히 렌더링하여 웹소켓을 통해 클라이언트에 직접 전송함으로써, 브라우저에서 자바스크립트(JavaScript)로 HTML을 조립하는 기존 방식의 복잡성을 크게 줄이는 것이 핵심입니다. 이를 통해 개발자는 단일 언어로 백엔드(Back-End)에서 모든 렌더링 로직을 처리하고, API 구축 없이 실시간 상호작용이 가능한 애플리케이션을 만들 수 있습니다.
이 아이디어는 2019년 엘릭서(Elixir) 생태계의 피닉스(Phoenix) 프레임워크 개발자인 크리스 맥코드(Chris McCord)가 '라이브뷰(LiveView)'를 선보이면서 큰 반향을 일으켰습니다. 그는 15분 만에 트위터(Twitter) 클론을 실시간으로 구현하며, 프론트엔드(Front-End) 렌더링 자바스크립트 프레임워크 없이도 백엔드만으로 생산성과 성능을 동시에 잡을 수 있음을 증명했습니다. HTML 오버 웹소켓은 클라이언트의 자바스크립트가 웹소켓 통신 채널을 설정하고, 서버로부터 받은 HTML을 적절한 위치에 배치하는 역할만 수행하게 합니다. 서버는 데이터베이스(DB)를 조회하고, 템플릿 엔진으로 HTML을 렌더링한 후, 이를 웹소켓을 통해 클라이언트에 즉시 전달합니다. 이 영구적인 양방향 채널 덕분에 서버는 클라이언트의 요청 없이도 변경 사항을 푸시(push)할 수 있어, 실시간 채팅이나 대시보드 같은 기능을 쉽게 구현할 수 있습니다.
이러한 방식은 여러 가지 장점을 제공합니다. 우선, 단일 렌더링 엔진을 사용하므로 전체 시스템의 복잡성이 줄어들고, 별도의 API를 구축할 필요가 없어 개발 시간을 단축할 수 있습니다. 또한, 클라이언트의 상태(state) 관리가 서버에서 이루어지기 때문에 개발 편의성이 높아지며, 데이터베이스와의 직접적인 연결로 중간 계층 없이 빠르게 데이터를 처리할 수 있습니다. 가장 큰 장점 중 하나는 진정한 실시간(real-time) 상호작용이 가능하다는 점입니다. 서버가 모든 연결된 클라이언트에 변경 사항을 동시에 브로드캐스트(broadcast)할 수 있어, 실시간 협업 도구나 멀티플레이어 게임 개발에 특히 유리합니다. TCP 핸드셰이크(handshake)와 HTTP 헤더(header) 반복을 피하는 영구적인 연결 덕분에 트래픽과 지연 시간(latency)도 줄어듭니다. 이는 기존 SPA 개발의 복잡성과 성능 문제를 해결하고, 개발자가 백엔드에 집중하면서도 풍부한 사용자 경험을 제공할 수 있는 강력한 대안이 될 것입니다.