아카이브사이트맵
© 2026 Rayon. All rights reserved.
DevDay
아티클랭킹스페이스채용
우아한형제들 favicon우아한형제들

우아한공방, RAG 챗봇으로 디자인 시스템 사용성 UP!

by DD
2026-05-22
1개월 전
조회수 66

우아한공방은 디자인 시스템 사용성 향상을 위해 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 플랫폼으로 확장

우아한공방의 새로운 동료, 시스템 맥락을 가진 챗봇서비스 개발기(feat. RAG)
중급
아키텍처
RAG
AWS Bedrock
LangChain
React
JavaScript
AI/ML
DevOps
Frontend
원문 읽기
원문 읽기

댓글 0

첫 번째 댓글을 남겨보세요!

관련 추천 글

카카오페이, AI 컨시어지 '페이지니' 출시! 맞춤형 금융 서비스 경험 제공

카카오페이 로고

AI ENGINEER NIGHT Q&A: RAG, 에이전트 설계 인사이트 총정리

채널톡 로고

React 19.2, LLM 백도어, Vite+ 등 프론트엔드 최신 소식!

네이버 D2 로고

RAG 시스템, 문서 전처리가 성능을 좌우한다!

데보션 로고

1인 창업의 모든 것, 바이브 코딩 라이브!

조코딩 로고

LangChain으로 CS 업무 자동화! 개발 생산성 UP!

무신사 로고
우아한형제들 favicon우아한형제들
중급
아키텍처
RAG
AWS Bedrock
LangChain
React
JavaScript
AI/ML
DevOps
Frontend

관련 추천 글

카카오페이, AI 컨시어지 '페이지니' 출시! 맞춤형 금융 서비스 경험 제공

카카오페이 로고

AI ENGINEER NIGHT Q&A: RAG, 에이전트 설계 인사이트 총정리

채널톡 로고

React 19.2, LLM 백도어, Vite+ 등 프론트엔드 최신 소식!

네이버 D2 로고