헤드리스 채팅 UI 킷 — 어댑터로 백엔드 포맷과 UI를 분리

• 여러 앱·화면에서 반복 쓰이는 LLM 채팅 UI를 사내 공용 패키지로 추출

증상

• 입력창·메시지 목록·스트리밍 출력·중단을 앱마다 처음부터 다시 짜고 있었음
• 같은 수정이 앱 수만큼 반복됨

원인

• 백엔드마다 스트리밍 포맷·엔드포인트가 조금씩 달라, 전송·파싱이 UI에 붙어 있으면 다른 앱으로 옮길 수 없었음
• 스타일도 앱마다 달라야 하는데 UI에 고정 스타일이 박혀 있으면 그대로는 못 씀

조치

• 어댑터 계층으로 백엔드를 가림 — UI는 "메시지 보내기 → 청크 스트림 받기" 한 가지 계약만 알고, 전송·포맷 파싱은 어댑터 안에 갇힘. 백엔드가 바뀌면 어댑터만 새로 씀
• 헤드리스로 로직만 제공 — 상태와 동작은 hook으로 노출하고 마크업·스타일은 쓰는 쪽이 결정. 제공하는 컴포넌트는 뼈대만 두고 각자 디자인시스템으로 감쌈
• LLM 토큰은 뭉텅이로 도착해 그대로 그리면 끊겨 보임 → 출력 페이싱을 모드로 제공(즉시 · 일정 간격 배치 · 프레임 기반 부드럽게)
• 생성 중 응답을 사용자가 중단하면 어댑터와 렌더러를 함께 정리
• 상태 로직과 어댑터 파싱은 단위 테스트로, 컴포넌트는 상태별 스토리로 확인

결과

• 백엔드 스트리밍 포맷이 달라도 같은 UI가 그대로 붙음
• 앱마다 반복하던 채팅 UI 구현이 패키지 설치로 대체됨