설명
Perplexity와 ChatGPT Search, Bing Copilot이 자리 잡게 만든, LLM 답변에 출처를 붙이는 방식입니다. 본문 안 작은 위첨자 번호(¹²³)로 어느 문장이 어떤 출처에서 왔는지 표시하고, 번호를 클릭하면 사이드바나 답변 하단에 출처 카드가 펼쳐져요. 카드에는 제목과 도메인, favicon, 발췌 1~2줄, 전체 URL이 들어갑니다. 사용자는 답변뿐 아니라 그 주장이 어디서 왔는지 그 자리에서 곧바로 확인할 수 있어요.
🖼️ 미니어처
💬 AI에게 이렇게 말하세요
- LLM 답변에 인라인 인용 번호를 붙여 주세요. 본문 문장 끝에 작은 superscript 번호(¹²³)로 표시하고, 클릭하면 우측 사이드에 출처 카드 패널이 열립니다.
- 출처 카드는 favicon + 도메인 + 제목(굵게) + 발췌 2줄 + '전체 보기' 링크로 구성합니다.
- 같은 번호가 본문 여러 곳에서 등장할 수 있어야 하고(같은 출처 재인용), 사이드 패널의 해당 번호 위로 호버하면 본문 인용 위치가 하이라이트되도록 처리.
인용 카드 5요소
- favicon(16~20px)으로 한눈에 출처를 식별할 수 있게 해요.
- 도메인은 작은 회색 텍스트(예: example.com)로 둡니다.
- 제목은 굵게, 1~2줄로 처리해요.
- 발췌는 해당 인용을 뒷받침하는 원문 1~2줄을 보여줍니다.
- 전체 URL 또는 '전체 보기' 링크를 함께 두면 좋아요.
⚡ 사용 예 (한 줄)
<sup className="text-xs cursor-pointer text-blue-600" onClick={() => openSource(idx)}>{idx}</sup>🧩 컴포넌트 매핑
react-markdown의 remarkPlugins로 [^1] 형태를 위첨자로 변환해요. 사이드 패널은 자체 컴포넌트로 만들고, 모바일에서는 shadcn/ui Sheet(side='right')로 분기합니다. Vercel AI SDK의 generative UI 패턴과 결합하면 자연스럽게 묶입니다.
답변 끝에 'Sources: 1, 2, 3' 같은 별도 섹션만 두고 본문에는 표시하지 않으면, 사용자는 어떤 문장이 어느 출처에서 왔는지 매핑할 수 없어요. 인라인으로 본문에 번호를 붙여 두는 방식이 훨씬 친절합니다.
한국어 본문에 위첨자 숫자를 붙이면 한자식 각주처럼 보여서 사용자에게 학술적이고 믿음직한 인상을 줍니다. 다만 폰트에 따라 한글 라인하이트와 어긋나서 본문 정렬이 흔들릴 수 있어요. line-height: 1.7과 vertical-align: super 정렬을 함께 쓰면 안전합니다.
<sup>은 <button>이나 <a>로 감싸 키보드 포커스가 가능하게 만듭니다. aria-describedby로 출처 카드 ID를 연결하고, 출처 카드는 role="region"과 aria-labelledby로 묶어요. 시각만으로 의미가 전달되지 않도록 스크린리더가 '출처 1'이라고 읽어 주게 처리해야 합니다.