본문으로 건너뛰기
Hooney
English

엔진과 모듈 · 제품에서 사용 중

chats

AI가 답을 실시간으로 써 내려가는 대화와 일반 채팅을 같은 입력창과 메시지 목록으로 그리는 채팅 화면 패키지입니다. 요청과 재시도는 쓰는 제품이 맡습니다.

기간
2025.09 ~ 현재
소속
Firstage
역할
설계와 구현 (1인)
chats Storybook의 영어 대화 패널 세 가지. 3페이지 캡션을 따뜻하게 바꿔 달라는 요청에 AI 응답이 진행 표시와 함께 스트리밍되고, 긴 대화를 위로 올려 읽는 동안 최신 메시지로 돌아가는 버튼이 뜨며, 변경 제안이 표로 요약된다.

핵심 가치

AI 대화를 넣는 제품은 편집 제안 카드 같은 자기 메시지만 더하면 되고, 실시간 답변 표시와 스크롤은 다시 만들지 않아도 됩니다.

성과

  • Journey와 홈페이지의 포토북 대화 화면에서 사용
  • 특정 통신 방식이나 서버에 묶이지 않음
  • 이전 기록을 불러와도 보던 위치 유지
  • 긴 대화도 화면에 보이는 메시지만 그려 가볍게 유지

기술 스택

  • React
  • TypeScript
  • Zod
  • TanStack Virtual

배경

chats는 Firstage에서 AI와 주고받는 흐름의 대화 화면을 맡는 패키지입니다. 포토북 편집기에서 AI와 대화하며 지면을 고치는 흐름이 대표적이며, 이 대화에는 편집 제안 카드, 확인 질문, 사용량 안내처럼 제품에 맞춘 메시지가 들어갑니다. 스트리밍 표시와 스크롤 같은 대화 화면의 기본 동작은 제품마다 다시 만들지 않도록 한 곳에 두었고, WebSocket, SSE, AI SDK 같은 전송 방식이나 특정 백엔드에는 묶이지 않게 했습니다.

결정과 구현

  • 입력기와 메시지 리스트를 독립된 부품으로 나눠, 둘 중 하나만 붙여 쓸 수도 있게 했습니다. AI 스트리밍 대화와 일반 채팅이 같은 부품을 조합해 씁니다.
  • 스트리밍 이벤트는 순수 함수가 메시지 노드에 반영하고, UI는 토큰 단위 렌더와 가상 스크롤을 맡습니다. 별도의 상태 기계는 두지 않았습니다.
  • 메시지 내용은 node.type별 렌더러 레지스트리로 그립니다. 제품은 편집 제안 같은 자기 노드를 등록하고, 호스트의 렌더러 목록은 그 제품의 노드 종류를 빠짐없이 다뤄야 합니다.
  • 요청, 재시도, 저장, 낙관적 상태는 사용하는 제품이 소유합니다. 메시지를 다시 그리거나 기록을 다시 불러오거나 복구 버튼을 눌러도 비용이 드는 요청이 반복되지 않도록 하는 책임을 호스트 쪽에 분명히 두었습니다.
  • 짧은 대화는 입력기 바로 위에 붙이고, 사람이 위로 스크롤하기 전까지는 길어지는 응답을 따라갑니다. 이전 기록을 앞에 불러와도 보고 있던 위치는 그대로 유지합니다.

현재 상태

Journey 앱 포토북 편집기의 AI 대화와 Firstage 홈페이지의 포토북 만들기 화면이 이 패키지로 대화를 그립니다. 현재 버전은 1.0.0-alpha.0이고, 1.0.0으로 올리기 전에 포토북 연동을 실서비스에서 처음부터 끝까지 검수하는 일이 남아 있습니다.