새로고침 없는 콘텐츠 업데이트: SSE의 원리와 활용

 이번 KRCLUB 기술 노트에서는 페이지를 새로고침하지 않고 정보를 갱신하는 서버 전송 이벤트(SSE)를 살펴봅니다. 경기 문자 중계나 콘텐츠 처리 상태처럼 새로운 정보를 순서대로 보여줘야 하는 화면을 설계할 때 검토할 수 있는 방식입니다.

SSE의 기본 구조

SSE는 서버에서 브라우저로 데이터를 보내는 단방향 통신입니다. 브라우저는 EventSource 인터페이스로 연결을 만들고, 서버는 text/event-stream 형식으로 메시지를 전달합니다. 따라서 같은 연결을 통해 사용자의 메시지를 서버로 보내는 양방향 채팅과는 구분해야 합니다.

개발자는 도착한 이벤트를 받아 화면의 필요한 부분만 갱신하도록 구현할 수 있습니다. 예를 들어 처리 상태가 바뀔 때마다 상태 문구를 수정하고, 전체 페이지는 그대로 유지하는 식입니다.

연결이 끊겼을 때

기본적인 EventSource 동작에는 연결이 끊겼을 때 다시 연결을 시도하는 기능이 포함됩니다. 또한 서버가 이벤트 식별자를 제공하면 재연결 시 마지막 식별자를 전달하는 구조를 사용할 수 있습니다. 다만 누락된 정보를 실제로 복구하려면 서버의 재전송 처리도 설계해야 합니다.

실무에서는 정상 연결, 연결 중단, 복구 완료 상태를 각각 시험해 보는 것이 좋습니다. 새 메시지가 오지 않는 이유가 실제 변화 없음인지 연결 문제인지 사용자에게 구분해서 보여주는 화면도 검토할 만합니다.

화면 설계에서 확인할 점

샘플 화면에는 마지막 갱신 시각과 연결 상태를 표시해 보세요. 업데이트가 너무 잦다면 여러 변경을 모아서 표시하는 방법도 시험할 수 있습니다. 핵심은 움직이는 화면을 만드는 것이 아니라 필요한 변화를 알아보기 쉽게 전달하는 것입니다.

결론

실시간 기능을 선택할 때는 데이터의 방향과 복구 방법부터 정리해야 합니다. KRCLUB 기술 노트의 핵심도 같습니다. 빠른 갱신만큼 정확하고 이해하기 쉬운 정보 전달이 중요합니다.