LiteLLM과 Mermaid.js를 활용한 인터랙티브 AI 시스템 설계 코치 구현

I Built an AI System Design Coach — Clone It, Try It, Break It

Nithin Pradeep2026년 6월 14일4분intermediate

AI 요약

Context

시스템 디자인 연습 과정에서 발생하는 피드백 부재와 단방향 설계의 한계를 극복하기 위한 도구 필요성 대두. 정적 설계에서 벗어나 실시간 질의응답과 아키텍처 수정이 가능한 인터랙티브 환경 구축을 목표로 함.

LiteLLM 도입을 통한 LLM 추상화 계층 구축으로 모델 종속성 제거 및 Claude, GPT-4o, Ollama 간의 유연한 스위칭 구현
Mermaid.js DSL을 활용하여 LLM이 생성한 텍스트 기반 다이어그램을 실시간 렌더링하는 구조 설계
FastAPI의 SSE(Server-Sent Events) 스트리밍을 적용하여 토큰 단위의 실시간 응답으로 사용자 경험(UX) 최적화
Describe → Clarify → Design → Refine → Review로 이어지는 5단계 파이프라인을 통해 인터뷰 프로세스의 논리적 흐름 강제
Next.js 16 App Router와 Zustand를 활용한 상태 관리로 다이어그램 수정 및 챗 인터페이스의 반응성 확보

실천 포인트

1. LLM 서비스 구축 시 특정 모델 종속성을 피하기 위해 LiteLLM과 같은 추상화 레이어 검토

2. 복잡한 그래프 라이브러리 대신 LLM이 직접 생성 가능한 DSL(Mermaid.js 등)을 활용한 시각화 구현

3. 정적 응답 대신 SSE 스트리밍을 적용하여 대규모 언어 모델의 추론 대기 시간에 따른 체감 지연 시간 감소

태그