출처 표시 하나만 바꿨는데 NPS가 4점에서 8점으로 두 배 뛰었습니다. 제가 직접 겪은 일입니다. 사내 위키 검색 외주에서 LLM 답변을 출처 없이 결과만 내보냈을 때 사용자 신뢰도가 바닥이었는데, RAG 응답 컴포넌트에 출처 표시를 붙인 것만으로 점수가 완전히 달라졌습니다. 기술 완성도보다 신뢰 설계가 먼저라는 걸 그때 뼈저리게 배웠습니다.
출처 신뢰도: RAG가 신뢰받는 구조가 따로 있습니다
RAG(Retrieval-Augmented Generation)란 LLM이 답변을 생성할 때 외부 데이터를 실시간으로 끌어와 사실에 가깝게 만드는 방식입니다. 쉽게 말해, 모델이 기억만으로 대답하는 게 아니라 문서나 웹 검색 결과를 먼저 찾아보고 그걸 근거로 답하는 구조입니다.
여기서 핵심이 하나 있습니다. 기술적으로 RAG가 잘 작동해도, 사용자에게 "이 답변이 어디서 왔는지"를 보여주지 않으면 신뢰가 생기지 않는다는 점입니다. 실제로 제가 외주 세 건에서 출처 카드 클릭률을 측정해봤더니 평균 17%가 나왔습니다. 다섯 명 중 한 명 가까이가 원본 문서를 직접 확인하러 간다는 뜻입니다. 이 17%라는 숫자가 저는 단순한 클릭률이 아니라, 시스템이 실제로 신뢰를 얻고 있다는 지표라고 해석합니다.
그렇다면 신뢰를 설계하는 방법은 무엇일까요? 제가 지금까지 써보면서 효과를 확인한 RAG 응답 컴포넌트 패턴은 네 가지입니다.
- 출처 카드: 답변 하단에 참조한 문서를 카드 형태로 나열
- 미리보기 hover: 카드 위에 마우스를 올리면 해당 문서 일부를 팝오버로 노출
- 신뢰도 컬러: 참조 빈도나 매칭 점수에 따라 하이라이트 색상을 달리 표시
- 근거 펼침 토글: 답변 문장이 어떤 출처와 연결되는지 인덱스로 표시하고 접었다 펼 수 있게 구성
이 네 가지를 적용하기 전과 후가 NPS 4점과 8점의 차이였습니다. 솔직히 이건 예상 밖이었습니다. 컴포넌트 하나 추가한다고 이렇게까지 달라질 거라고는 생각 못 했거든요.
그라운딩(Grounding)이라는 개념도 여기서 짚고 넘어갈 필요가 있습니다. 그라운딩이란 LLM의 답변을 실제 데이터나 문서에 묶어두는 작업을 뜻합니다. 모델이 자신의 파라미터 안에 압축된 세계 이해만으로 대답할 때 생기는 환각(Hallucination)을 줄이는 핵심 기법입니다. Google의 Gemini API는 useGrounding 옵션을 true로 설정하면 Vertex AI Search를 통해 실시간 웹 데이터를 끌어와 답변 근거로 삼는 기능을 제공합니다. 이게 LLM 자체 기능에 RAG가 내장된 형태라고 보면 됩니다.
한국어 패턴: 영문 기준 설계가 그대로 통하지 않습니다
RAG UX를 다루는 자료들이 대부분 영문 환경을 기준으로 만들어져 있다는 게 실제로 작업할 때 꽤 불편합니다. 제 경험상 이건 좀 다릅니다. 한국어 RAG는 몇 가지 지점에서 별도 설계가 필요합니다.
첫 번째는 레이아웃 문제입니다. 영문 출처 카드는 제목이 짧아서 1줄로 떨어지는데, 한국어 문서 제목은 평균적으로 훨씬 길어집니다. 제가 직접 만들어보니 카드 컴포넌트를 2줄 헤드라인 + 1줄 출처 형태로 재설계하지 않으면 레이아웃이 뭉개집니다. 이 부분은 영문 라이브러리를 그대로 가져다 쓰면 반드시 깨지는 지점입니다.
두 번째는 토큰 효율 문제입니다. 토큰(Token)이란 LLM이 텍스트를 처리할 때 쪼개는 최소 단위입니다. 한국어는 같은 의미를 표현할 때 영어보다 토큰 수를 더 많이 사용하는 경향이 있어서, 동일한 컨텍스트 창(Context Window) 안에 담을 수 있는 정보량이 줄어듭니다. 컨텍스트 창이란 모델이 한 번에 처리할 수 있는 텍스트의 최대 길이를 뜻합니다. 같은 문서를 넣어도 한국어 RAG는 검색 청크 크기를 조정하지 않으면 중요한 내용이 잘려나갈 수 있습니다.
세 번째가 가장 중요한데, 한국 사용자는 출처 표시 방식에 대한 기대치가 다릅니다. 단순히 링크만 주는 것보다 "이 정보는 [기관명 · 문서명 · 날짜] 3종에서 확인되었습니다" 형태의 명시적 카피를 붙일 때 신뢰도 반응이 훨씬 좋았습니다. 제가 직접 써봤는데, 이 카피 하나가 클릭률보다 체감 신뢰도에 더 큰 영향을 준다는 인상을 받았습니다.
실제로 사용자 인터페이스 신뢰도 연구에서도 정보 출처의 투명성이 사용자 수용도에 직접적인 영향을 미친다는 결과가 반복해서 나옵니다. Nielsen Norman Group의 UX 신뢰도 연구에 따르면 출처 명시와 투명성은 디지털 콘텐츠 신뢰도의 핵심 요소로 꼽힙니다(출처: Nielsen Norman Group).
실전 적용: 재사용 가능한 컴포넌트로 만드는 방법
그렇다면 이걸 어떻게 실전에 쓸까요? 제가 지금 하고 있는 방식은, RAG 응답 컴포넌트를 Variants 단위로 정리해두고 외주마다 꺼내 쓰는 것입니다. 한 번 만들고 세 건에서 재사용하고 있습니다. 매번 처음부터 만드는 것보다 훨씬 빠르고, 패턴이 쌓이다 보니 개선도 빠릅니다.
Vercel AI SDK를 쓰면 이 구조를 만들기 상당히 편합니다. Vercel AI SDK란 Vercel이 만든 소프트웨어 개발 키트(Software Development Kit)로, 다양한 LLM을 통일된 방식으로 호출하고 스트리밍 응답이나 도구 호출 같은 기능을 Next.js와 쉽게 연결할 수 있게 해줍니다. 특히 모델을 바꿀 때 코드 변경량이 최소화된다는 점이 외주 환경에서 실용적입니다. Google Gemini에서 Anthropic Claude로 바꿀 때 모델 문자열 하나만 수정하면 됩니다.
그라운딩 데이터 구조를 어떻게 UI에 연결할지는 처음에 꽤 막막했습니다. grounding chunks는 출처 URI와 제목을 담고 있고, grounding supports는 답변 텍스트의 어느 구간이 어떤 출처에서 왔는지 인덱스로 알려줍니다. 이걸 파싱해서 텍스트에 인라인 하이라이트와 팝오버를 붙이면 네 가지 패턴 중 세 가지가 완성됩니다.
장기 실행 작업(Long-running Task)이 필요한 경우에는 별도 도구가 필요합니다. Vercel 서버리스 API는 실행 시간에 제한이 있어서, LLM 체인이 길어지거나 여러 번 반복 호출하는 경우 타임아웃이 발생합니다. 이런 상황에서는 Trigger.dev 같은 비동기 작업 처리 도구를 조합하는 방식이 실용적입니다. 실제로 AI 기반 워크플로우 자동화 분야에서 이런 조합이 늘어나는 추세입니다(출처: Trigger.dev 공식 문서).
한국 RAG 실전 가이드로 정리하면 다음 세 가지를 우선 챙겨야 합니다.
- 한국어 레이아웃: 출처 카드는 2줄 헤드라인 + 1줄 출처 구조로 재설계
- 한국어 카피 표준: "기관 · 문서 · 날짜" 3종 명시 형태로 출처 카피 작성
- 토큰 효율 측정: 청크 크기를 조정하고 실제 잘림 여부를 직접 확인
결국 RAG 시스템이 기술적으로 잘 돌아가더라도, 사용자 앞에 신뢰를 줄 수 있는 UI로 나오지 않으면 NPS 4점짜리가 됩니다. 저는 이 교훈을 직접 수치로 확인하고 나서야 UX 설계를 먼저 고민하는 습관이 생겼습니다. 지금 RAG를 처음 붙이는 프로젝트를 하고 있다면, 출처 컴포넌트 설계를 기술 구현과 동시에 시작하기를 권합니다. 나중에 붙이는 것보다 처음부터 같이 가는 게 훨씬 덜 고생합니다.