LLM 스트리밍 기반 웹페이지 실시간 생성 시의 플리커링 해결 및 편집 기능 구현 방법

핵심 요약

LLM이 생성하는 웹페이지를 스트리밍 방식으로 실시간 렌더링할 때 발생하는 화면 깜빡임 문제를 해결하고 사후 편집 기능을 유지하기 위한 아키텍처 설계 방안을 논의한다.

배경

LLM이 웹페이지를 생성하는 과정을 실시간으로 보여주는 시스템을 구축 중이나, 토큰 스트리밍 시마다 DOM이 재구축되어 화면이 깜빡이는 현상이 발생했다. 이를 해결하면서도 생성 완료 후 사용자가 직접 편집할 수 있는 인터랙티브한 환경을 유지하기 위한 기술적 대안을 모색하고 있다.

커뮤니티 반응

작성자는 실시간 스트리밍의 매끄러움과 사후 편집의 유연성을 모두 확보해야 하는 기술적 난제에 직면해 있으며, 현대적인 AI UI 빌더들이 채택하는 아키텍처 패턴에 대해 커뮤니티의 조언을 구하고 있다.

주요 논점

01중립다수

실시간 스트리밍의 시각적 안정성과 생성 후 편집 가능성을 동시에 확보할 수 있는 아키텍처 설계가 필요하다.

합의점 vs 논쟁점

합의점

단순한 HTML 전체 교체 방식은 프로덕션 수준의 AI UI 도구에 부적합하다.
렌더링 성능과 사용자 인터랙션 유지를 위해 증분 업데이트 방식이 필수적이다.

실용적 조언

전체 HTML을 다시 그리는 대신 가상 DOM 디핑 라이브러리를 사용하여 변경 사항만 반영할 것
보안과 격리를 위해 iframe 샌드박스 내에서 렌더링을 수행하고 메인 창과 메시지로 통신할 것
LLM 출력을 직접 HTML로 받기보다 구조화된 JSON으로 받아 UI 렌더러를 통해 그리는 방식을 고려할 것

언급된 도구

React중립

프론트엔드 UI 라이브러리

섹션별 상세

실시간 스트리밍 렌더링 시 발생하는 DOM 재구축과 플리커링 문제에 대해 논의했다. 현재 React 프론트엔드에서 HTML 출력을 실시간으로 반영할 때마다 전체 DOM이 다시 그려지면서 사용자 경험을 저해하는 시각적 깜빡임이 발생하고 있다. 이를 방지하기 위해 전체 렌더링 대신 변경된 부분만 업데이트하는 증분 업데이트 방식의 필요성이 제기됐다.

생성된 페이지의 사후 편집 가능성과 렌더링 충실도 유지라는 제약 조건을 검토했다. 단순한 정적 렌더링을 넘어 CSS와 자바스크립트가 포함된 전체 기능을 보존해야 하며, 생성이 끝난 후에도 사용자가 요소를 수정할 수 있는 인터랙티브한 상태를 유지해야 한다는 점이 핵심 과제로 꼽혔다.

문제 해결을 위한 네 가지 주요 아키텍처 접근 방식이 제안됐다. 증분 DOM 패칭(Incremental DOM Patching), 가상 DOM 디핑(Virtual DOM Diffing), iframe 샌드박스를 활용한 메시지 업데이트, 그리고 구조화된 JSON 스키마를 UI 렌더러로 변환하는 방식 등이 구체적인 대안으로 논의됐다.

실무 Takeaway

LLM 스트리밍 UI 구현 시 전체 DOM 재구축은 화면 깜빡임을 유발하므로 지양해야 한다.
실시간 렌더링과 사후 편집 기능을 동시에 만족시키기 위해서는 상태 관리와 렌더링 로직의 분리가 필수적이다.
구조화된 데이터(JSON)를 기반으로 UI를 렌더링하는 방식이 정적 HTML 생성보다 확장성과 제어 측면에서 유리할 수 있다.