본문으로 건너뛰기
Hooney
English
프로덕트

모듈

chats

일반 채팅과 AI 대화에 쓰는 입력창과 메시지 목록을 만들었습니다.

기간
2025.09 ~ 현재
소속
Firstage
역할
설계와 구현 (1인)
지원 환경
프론트엔드 · 백엔드
핵심 기능
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으로 올리기 전에 포토북 연동을 실서비스에서 처음부터 끝까지 검수하는 일이 남아 있습니다.