Skip to main content
이 문서는 GenAI 개념 섹션의 일부입니다.
Agent 추론 과정 시각화에 특화된 Chainlit과, 데이터 대시보드의 정석인 Dash를 다룹니다.

Chainlit — LangChain/LangGraph 전용 채팅 UI

등장 배경

2023년, LangChain의 인기와 함께 “Agent의 추론 과정을 사용자에게 투명하게 보여주는 전용 UI”의 필요성이 대두되었습니다. 기존의 Streamlit이나 Gradio는 범용 UI 프레임워크이므로, Agent의 Thought→Action→Observation 루프를 시각화하려면 상당한 커스텀 작업이 필요했습니다. Chainlit은 이 간극을 메우기 위해 만들어졌습니다.

핵심 기능

1. Agent 추론 과정 실시간 표시 Chainlit의 가장 큰 차별점은 Agent의 내부 동작을 Step-by-Step으로 보여주는 것입니다.
일반 채팅 UI에서는 최종 Answer만 보여주지만, Chainlit은 중간 과정을 접을 수 있는(collapsible) Step으로 표시합니다. 이는 Agent의 신뢰성을 검증하는 데 핵심적입니다. 2. 파일 업로드/다운로드 내장: 문서 분석 Agent에서 PDF 업로드 → 분석 → 보고서 다운로드 흐름을 자연스럽게 구현 3. 스트리밍 응답: LLM 응답을 토큰 단위로 실시간 표시 4. 인증 통합: OAuth, 헤더 기반 인증 등 다양한 인증 방식 지원

LangGraph 통합 예시

Step 시각화 상세 구현

장점과 한계

장점:
  • Agent 추론 과정을 가장 잘 시각화 — PoC 데모에서 “Agent가 어떻게 생각하는지” 보여주기에 최적
  • LangChain/LangGraph와의 깊은 통합 — 콜백 자동 연동
  • 비동기(async) 네이티브 — 스트리밍 응답이 자연스러움
  • 파일 처리 내장 — 문서 분석 Agent에 바로 적용 가능
한계:
  • 대시보드 기능 없음: 차트, 테이블, 사이드바 등의 대시보드 컴포넌트가 없음
  • 위젯 부족: Streamlit의 slider, selectbox, checkbox 같은 입력 위젯이 없음
  • Databricks Apps 미지원: 현재 Databricks Apps에서 Chainlit을 직접 호스팅할 수 없음 (FastAPI 래핑으로 우회 가능)
  • 생태계 규모: Streamlit/Gradio 대비 커뮤니티, 플러그인, 예제가 적음
주의 Databricks 환경에서의 Chainlit 사용: Chainlit은 Databricks Apps에서 직접 지원하지 않습니다. Databricks Apps 배포가 목표라면 Streamlit을 사용하고, Chainlit의 Step 시각화가 꼭 필요하다면 로컬 PoC 단계에서만 활용하는 것을 권장합니다.

Dash (Plotly) — 데이터 대시보드의 정석

등장 배경

2017년, Plotly 팀이 “Python으로 프로덕션 수준의 분석 대시보드를 만들자”는 목표로 Dash를 출시했습니다. Streamlit이 “빠른 프로토타입”에 초점을 둔다면, Dash는 “프로덕션 안정성과 커스텀 자유도”에 초점을 둡니다.

핵심 원리: 콜백(Callback) 패턴

Streamlit이 스크립트 전체를 재실행하는 반면, Dash는 콜백 함수 를 통해 특정 컴포넌트만 업데이트합니다. 이 방식은 React의 상태 관리와 유사합니다.

Dash의 포지션

한계

  • 채팅 UI 구현 복잡: 채팅 인터페이스를 만들려면 직접 HTML/CSS를 조합해야 함
  • 학습 곡선: 콜백 패턴, Input/Output/State 개념 학습 필요 (Streamlit 대비 러닝커브 2~3배)
  • 개발 속도 느림: 같은 기능을 Streamlit의 2~3배 코드로 구현
  • 채팅보다 대시보드: Agent 채팅 UI로는 비용이 높은, 모니터링/분석 대시보드에 특화
참고 적합 사례: 모델 모니터링 대시보드, A/B 테스트 결과 시각화, 비즈니스 KPI 대시보드 등 차트와 필터가 중심 인 앱에 Dash가 적합합니다. Agent 채팅이 주요 기능이라면 Streamlit이나 Chainlit을 선택하세요.

README로 돌아가기 | 다음: FastAPI 백엔드