실시간 스트리밍 채팅

실무에서 AI 응답 스트리밍 UI를 다루면서, 잘 만들어진 오픈소스 채팅 UI(OpenWebUI)는 이 문제를 어떻게 풀었는지 궁금했습니다. 다만 Svelte로 작성되어 있어 코드를 그대로 가져올 수 없었고, “프레임워크가 달라도 UX는 이식할 수 있는가”를 확인하고 싶었습니다.

코드 이식이 아니라 동작 분석을 택했습니다. 화면과 네트워크 동작을 관찰해 명세로 옮긴 뒤 — SSE 수신과 렌더링을 분리해 수신은 누적하고 표시는 requestAnimationFrame 타이핑으로 따라가게 하는 구조 — 제 주력 스택인 Next.js로 처음부터 구현했습니다. 플로우 단계 표시, 후속 질문, 자동 스크롤, 스트리밍 중 입력 잠금 같은 UX 요소도 같은 방식으로 재구현했습니다.

채팅 인터페이스 전체를 Next.js로 재구현했고, 여기서 얻은 스트리밍 처리 감각은 실무 AI 플랫폼의 응답 UI에도 그대로 쓰였습니다. 이 데모는 그 프로젝트의 화면 중 핵심인 수신→타이핑 파이프라인을 재현한 것입니다.

낯선 코드베이스는 코드가 아니라 동작부터 읽어야 한다는 것, 그리고 프레임워크가 달라도 좋은 UX 패턴은 명세화하면 이식된다는 것을 배웠습니다.