대부분의 제품 팀은 AI 인용(citation)을 생성된 텍스트 옆에 깔끔하게 놓인 작은 파란색 숫자로 설계합니다. 빠른 연결 환경에서 한 번 구현해 보고, 0.5초 만에 미리보기가 뜨는 것을 확인한 뒤 다음 작업으로 넘어갑니다. 스테이징 환경에서는 잘 작동하겠지만, 실제 인터넷 환경에서는 버티기 어렵습니다.
소스는 깨집니다. 기업은 블로그 포스트를 삭제하고, 정부 포털은 리다이렉트 없이 URL 구조를 변경합니다. 유료 결제창(paywall)이 생기기도 하고, CDN에 오류가 발생하기도 합니다. AI가 3개월 전에 스캔한 문서가 어제 다시 작성되었을 수도 있습니다. 만약 인용 컴포넌트가 모든 것이 완벽할 때만 예쁘게 보이도록 설계되었다면, 상황이 잘못되었을 때 사용자에게 거짓 정보를 전달하게 됩니다. 더 나쁜 것은, 사용자가 근거 자체가 존재했었는지조차 의심하게 만든다는 점입니다.
신뢰할 수 있는 인용 시스템은 상태(state)를 전달해야 합니다. 단순한 하이퍼링크나 툴팁만으로는 부족합니다. 근거 데이터에 지금 어떤 일이 일어나고 있는지 실시간으로 독자에게 알려주어야 합니다.
네 가지 실제 상태를 고려한 설계
인용을 하나의 작은 상태 머신(status machine)으로 생각하세요. AI가 제시하는 모든 소스는 네 가지 상태 중 하나에 놓일 수 있으며, 인터페이스는 각 상태를 정직하게 처리해야 합니다.
로딩 중(Loading). 사용자가 위첨자 숫자를 클릭하면 시스템은 미리보기, 스니펫 또는 원본 페이지를 가져옵니다. 그 공백기 동안 무언가 진행 중임을 보여주어야 합니다. 스켈레톤 플레이스홀더, 깜빡이는 발췌문 프레임, 또는 "소스 가져오는 중..."이라는 단순한 텍스트라도 보여주는 것이 아무것도 안 하는 것보다 낫습니다. 침묵은 사용자로 하여금 클릭이 제대로 작동했는지 의심하게 만듭니다. 모델이 사고하는 대로 소스가 전달되는 스트리밍 인터페이스에서, 로딩 상태는 텍스트 생성을 방해하지 않으면서 링크를 해결할 시간을 벌어줍니다.
사용 가능(Available). 모두가 설계 목표로 삼는 상태입니다. 링크가 정상적으로 연결되고, 텍스트가 모델이 확인한 내용과 일치하며, 사용자는 명확한 발췌문과 직접 링크를 받습니다. 하지만 단순히 URL만 던져주는 것으로 끝내서는 안 됩니다. 제목, 도메인, 그리고 관련 구절을 보여주세요. 독자가 페이지를 떠날지 결정할 수 있도록 충분한 맥락을 제공해야 합니다. 괄호 안에 생(raw) href 링크만 적는 것도 기술적으로는 인용이지만, 좋은 사용자 경험은 아닙니다.
변경됨(Changed). 이 상태는 뼈아픕니다. 페이지는 로드되지만, 콘텐츠에 AI가 인용한 문구나 통계가 더 이상 포함되어 있지 않은 경우입니다. 발행인이 기사를 업데이트했을 수도 있고, AI 학습 스냅샷이 찍혔던 헤드라인이 나중에 바뀌었을 수도 있습니다. 컴포넌트는 모든 것이 일치하는 척하는 대신, 이러한 불일치를 표시해야 합니다. "이 소스는 인덱싱된 이후 업데이트되었습니다"와 같은 작은 메모는 사용자가 더 이상 존재하지 않는 문장을 찾느라 10분을 허비하는 것을 막아줍니다. 또한 신뢰를 유지해 줍니다. 불일치를 숨기면 사용자는 결국 제품이 말을 지어낸다고 생각하게 될 것입니다.
누락됨(Missing). 404 오류, 타임아웃, 유료 결제창, 혹은 200 상태 코드를 보내면서도 정작 내용은 "콘텐츠 삭제됨"이라는 일반적인 페이지를 보여주는 서버 등이 여기에 해당합니다. 링크가 작동하는 것처럼 파란색으로 그대로 방치하지 마세요. "페이지 삭제됨", "링크를 사용할 수 없음" 또는 "소스 오프라인"과 같은 명확한 언어로 대체하세요. 실패 원인을 안다면 알려주세요. Internet Archive나 캐시된 복사본이 있다면 그것을 제공하세요. 목표는 독자를 길을 잃게 만드는 것이 아니라, 상황을 매듭짓는 것입니다.
접근성은 타협할 수 없는 요소입니다
인용 컴포넌트는 UI에서 트래픽이 많고 중요한 위치에 자리 잡습니다. 결제 양식이나 항공권 예약 프로세스만큼이나 엄격하게 다뤄져야 합니다.
상태를 나타내기 위해 텍스트를 사용하세요. 색약 사용자는 초록색 점이나 빨간색 테두리만으로는 판단할 수 없습니다. "사용 가능", "수정됨", "사용 불가"와 같이 지표에 단어를 결합하세요. 이 작은 라벨은 시력이 있는 모든 사용자에게도 도움이 됩니다. 상태 색상은 문화나 제품에 따라 의미가 다른 경우가 많기 때문입니다.
스크린 리더를 위해 설명적인 이름을 작성하세요. 스크린 리더 사용자가 유용한 정보를 들을 수 있도록 링크에 라벨을 붙이세요. 단순히 "링크"라고 읽어주는 대신 "소스 3: 감사 로그 보관 정책"이라고 읽어주어야 합니다. 이렇게 하면 사용자가 링크를 열기 전에 무엇을 보게 될지 정확히 알 수 있습니다.
흐름을 보호하세요. 인용을 클릭한다고 해서 AI가 생성한 답변이 사라져서는 안 됩니다. 패널, 모달 또는 인라인 확장 방식을 사용하세요. 독자는 특정 주장을 확인하기 위해 소스를 열었습니다. 만약 인터페이스가 방금 읽던 주장을 지워버린다면, 사용자는 증거를 찾는 동안 그 내용을 작업 기억(working memory)에 억지로 붙들고 있어야 합니다. 이는 불필요한 인지 부하를 유발합니다.
포커스를 의도적으로 관리하세요. 사용자가 인용을 열면 키보드 포커스를 새 패널이나 팝업으로 이동시키세요. 닫을 때는 다시 트리거(클릭했던 요소)로 포커스를 돌려주세요. 스트리밍이 페이지에 소스를 계속 쓰고 있는 동안 포커스를 가로채지 마세요. 사용자가 제어권을 유지할 수 있도록 하세요.
스트리밍을 주의 깊게 다루세요. 생성형 인터페이스가 인용이 도착하는 대로 추가하고 있다면, 새로운 윗첨자 숫자가 나타날 때마다 스크린 리더 사용자에게 알림을 쏟아붓지 마세요. 묶어서 처리하세요. 두세 개가 쌓였을 때 "두 개의 출처가 추가되었습니다"와 같이 정중한 요약을 알리세요. 끊임없는 방해는 보조 공학 기술 사용자가 결과물을 읽기 어렵게 만듭니다.
인용이 무엇을 증명하는지 기억하세요
이 점은 아무리 강조해도 지나치지 않습니다. 인용은 출처를 보여줄 뿐, 진실을 보여주는 것이 아닙니다.
AI가 출처를 인용할 때, 그것은 "여기서 이 문구를 찾았습니다"라고 말하는 것입니다. "이 전문가가 옳습니다"라고 말하는 것이 아닙니다. "이 연구는 잘 수행되었습니다"라고 말하는 것도 아닙니다. 심지어 "내가 맥락을 정확히 이해했습니다"라고 말하는 것도 아닙니다. 인용은 원래의 증거로 되돌아가는 지도입니다. 독자는 여전히 그 길을 따라가서 그 증거가 타당한지 직접 판단해야 합니다.
디자인을 통해 이러한 차이를 명확히 해야 합니다. 사용자가 관련 문장을 훑어볼 수 있도록 발췌문을 사용하세요. 독자가 증거가 얼마나 최신인지 알 수 있도록 발행일을 표시하세요. 출처가 포럼, 보도 자료 또는 1차 연구라면, 독자가 이를 적절히 판단할 수 있도록 해당 맥락을 명시하세요. 인터페이스를 인간의 판단을 대체하는 것이 아니라 지원하도록 구축하세요.
현실에 비추어 테스트하세요
시각적 검토를 통과한 인용 컴포넌트는 절반만 완성된 것입니다. 당신은