~/csslab.dev/notes $ ls

// note

분석 응답을 단계로 쪼개기 — 태그 기반 스트림 프로토콜

  • 분석 플랫폼의 채팅. 프론트 아키텍처와 백엔드 코어를 함께 담당 — 사용자가 요청하면 AI가 여러 단계를 거쳐 수행

증상

  • 단계가 늘어날수록 응답이 커져 오류 발생
  • 화면은 "다 끝났는지"만 알 뿐, 지금 몇 번째 단계인지를 표현할 방법이 없었음

원인

  • 단계별 진행 상태를 API 응답에 전부 담아 한 번에 반환하는 구조
  • 응답이 평문 덩어리라 어디까지가 한 단계인지 프론트가 알 수 없음

조치

  • 서버가 스트림 안에 단계 경계를 표시하는 태그를 함께 실어 보내고, 프론트는 태그를 만나는 지점에서 단계를 끊어 렌더 — 프로토콜을 양쪽에서 함께 설계
  • 스트림 도중에도 단계가 확정되는 즉시 화면에 추가 → 전체 완료를 기다리지 않음
  • 저장된 대화 내역과 스트리밍 화면이 같은 형식을 쓰도록 맞춰, 다시 열었을 때도 동일하게 재구성
  • 단계가 많아지면 화면이 길어져 현재 위치를 찾기 어려움 → 목록을 기본 접힘으로 두고 진행 중인 단계 제목만 헤더에 노출

결과

  • 응답 크기 한계로 실패하던 구간이 스트림 전송으로 바뀌어 단계 수에 영향받지 않게 됨
  • 프론트가 문자열을 재해석해 단계를 추측할 필요가 없어짐 — 경계를 서버가 알려줌

같은 패턴을 다른 제품에서 → 스트리밍 커스텀 태그 렌더