우아한공방, RAG 챗봇으로 디자인 시스템 사용성 UP!
우아한공방은 디자인 시스템 사용성 향상을 위해 RAG(Retrieval-Augmented Generation) 기반 챗봇을 개발
AWS Bedrock Knowledge Bases를 활용하여 챗봇의 RAG 체인을 구축하고, Amazon OpenSearch Serverless(AOSS)를 벡터 스토어로 사용
챗봇은 스트리밍 응답(Streaming Response), 컴포넌트 추출(Component Extraction), Guardrail 설정 등을 통해 응답 품질과 안전성을 확보
챗봇 UI는 스토리북(Storybook)에 통합되어 전사적 접근성(Enterprise Accessibility)을 확보하고, MCP(우아한공방 MCP)와 연동하여 시너지 창출
챗봇 도입으로 반복적인 문의 감소, 개발 생산성 향상, GenUI 플랫폼으로의 확장 가능성을 열었음
RAG 기반 챗봇 아키텍처 심층 분석
우아한공방 챗봇은 AWS Bedrock Knowledge Bases를 활용하여 RAG(Retrieval-Augmented Generation) 시스템을 구축했다. 사용자 질문에 대해 관련 문서를 검색(Retrieval)하고, 검색된 문맥(Context)과 함께 LLM에 전달하여 응답을 생성하는 구조이다.
Amazon OpenSearch Serverless(AOSS)를 벡터 스토어로 사용하여 메타데이터 기반 필터링을 구현, 컴포넌트 단위 검색 가능
LangChain을 활용하여 RAG 체인을 구성하고, 스트리밍 응답(Streaming Response)을 통해 사용자 경험 개선
시스템 프롬프트(System Prompt)를 통해 디자인 시스템의 핵심 규칙과 답변 정책을 주입하여 응답 품질 향상
Retrieval 품질 개선을 위한 기술적 노력
챗봇은 Retrieval 품질 향상을 위해 사용자 질문에서 컴포넌트 정보를 추출(Component Extraction)하고, 이를 메타데이터 필터로 변환하는 과정을 거친다. 예를 들어, 'FilledButton 사용법'과 같은 질문에 대해 'FilledButton' 컴포넌트를 추출하여 해당 컴포넌트 관련 문서만 검색하도록 구성했다.
LLM을 활용한 컴포넌트 추출: 사용자의 질문에서 UI 컴포넌트 이름을 추출하는 분류기(Classifier)를 구현
메타데이터 기반 Retrieval: 추출된 컴포넌트 정보를 Knowledge Base의 메타데이터 필터로 활용
TopK 튜닝: 질문 유형과 문서 특성에 따라 적절한 topK 값을 적용하여 응답 정확도와 비용 효율성을 개선
Guardrail 설정을 통한 안전성 확보
우아한공방 챗봇은 AWS Bedrock Guardrails를 도입하여 부적절한 입력과 응답을 제한하고, 서비스의 안전성을 확보했다. 챗봇의 응답 범위를 디자인 시스템 관련 주제로 제한하여, 서비스의 목적에 부합하는 답변을 제공하도록 설계했다.
기본 Guardrail 기능 활성화: 유해 콘텐츠(Harmful Content) 필터링
추가 Guardrail 설정: 특정 개인 관련 정보 요청 및 디자인 시스템과 무관한 질문 차단
Output 검사 비활성화: Guardrail의 Output 검사로 인한 정상 응답 필터링 문제를 해결
비동기 스트리밍 처리: 스트리밍 응답의 자연스러운 흐름을 보장
스토리북(Storybook)에 챗봇 UI 통합
챗봇 UI는 스토리북(Storybook)에 통합되어 전사적으로 접근 가능한 환경을 제공한다. 챗봇 UI를 독립적인 npm 패키지로 분리하여, 다른 서비스에서도 쉽게 챗봇 서비스를 구축할 수 있도록 지원한다.
preview.tsx 활용: 스토리북 렌더링 전에 챗봇 UI를 주입하여 모든 문서에서 챗봇 접근 가능
독립적인 npm 패키지: 챗봇 UI와 비즈니스 로직을 분리하여 유연한 인터페이스 제공
유연한 인터페이스 설계: 챗봇 API 연결 및 다양한 라벨 커스터마이징 지원
실시간 스트리밍(SSE) 응답 처리: LLM의 스트리밍 응답을 UI에 자연스럽게 표시
RAG API를 활용한 MCP 응답 고도화
우아한공방은 챗봇 서비스를 위해 구축한 RAG API를 MCP(우아한공방 MCP)에도 활용하여, IDE 환경에서의 응답 품질을 향상시켰다. RAG API를 통해 웹 챗봇과 MCP가 동일한 Retrieval 결과를 공유하고, 일관된 설계 맥락을 제공한다.
RAG API 연동: MCP에서 관련 가이드 문서, 이슈 히스토리, 설계 규칙을 함께 Retrieval
코드 검사 기능 강화: 사용자의 코드와 디자인 시스템 설계 의도 간의 연결을 설명
중앙 집중 관리: Retrieval 정책 및 응답 품질 개선 작업을 중앙에서 일관되게 관리
GenUI 플랫폼 기반 마련: 챗봇 및 RAG 서버 구축 경험을 바탕으로 GenUI 플랫폼으로 확장
