LLM Attention Visualization Tool Shows How Tokens Influence Generation

빠른 요약

LLM Attention Visualizer는 생성된 토큰 위에 마우스를 올리면 해당 토큰에 기여한 과거 토큰들의 가중 맵을 즉시 확인할 수 있게 해주며, 모델의 복사-붙여넣기 행동과 다중 구문 합성 과정을 드러냅니다.

시각화 도구가 보여주는 내용

주의 집계: 생성된 각 토큰에 대해 도구는 주의 가중치(값 벡터 크기로 스케일링된)를 계산하고, 모든 헤드와 레이어를 통해 합산한 후, 각 과거 토큰에 대한 불투명도 값으로 매핑합니다.
불투명도 의미: 불투명도 1은 가장 강한 영향을 의미하며, 낮은 불투명도는 비례적으로 보간됩니다.
단순화 경고: 시각화 도구는 고차원의 주의 텐서를 과거 토큰당 하나의 스칼라로 축소하므로, 모델 내부 상태의 전체 미묘함을 포착하지는 못합니다.

"영향을 받았다"는 표현은 완전히 정확하지 않을 수 있습니다. 이 시각화는 매우 단순화된 것입니다. 주의 가중치를 계산하고, 값 벡터의 크기로 스케일링하며, 모든 주의 헤드를 통합하고, 모든 레이어에 걸쳐 합산하고 있습니다. – 저자 주석

왜 중요한가

복사-붙여넣기 직관: 정확한 문자열(예: 주소나 날짜) 위에 마우스를 올리면 원본 토큰이 강조되며, LLM이 확률적 성격에도 불구하고 거의 오류 없이 텍스트를 재생성할 수 있는 이유를 설명합니다.
구문 간 합성: "Office Move Summary" 예제에서 토큰 remain은 work ("Existing employee access cards will work")과 stay the same ("company phone numbers will stay the same") 양쪽에서 주의를 끌며, 모델이 별개의 절에서 정보를 어떻게 융합하는지 보여줍니다.
모델 크기의 중요성: 600M 파라미터 모델(Qwen‑3‑0.6B)조차도 자바스크립트 함수를 정확히 재현할 수 있어, 정밀한 복사가 수십억 파라미터를 필요로 하지 않음을 보여줍니다.

구현 세부 사항

프론트엔드: Transformers.js로 구동되는 React 앱이 브라우저 내에서 직접 추론을 수행합니다.
사용자 정의 생성 루프: 표준 생성 API는 중간 텐서를 노출하지 않기 때문에, 저자는 각 단계에서 주의 점수를 캡처하기 위해 맞춤형 루프를 작성했습니다.
모델 인스트루멘테이션: 원본 ONNX 그래프는 필요한 출력이 부족합니다. 저자는 ONNX 파일을 수정하여 내부 텐서를 노출한 후, 인스트루멘테이션된 모델을 개인 Hugging Face 저장소(ishamf/Qwen3-0.6B-ONNX-Instrumented)에 업로드했습니다.
미리 생성된 프롬프트: 모델(수백 MB)을 다운로드하는 데 시간이 걸리기 때문에, 앱은 즉시 로드되는 미리 계산된 생성 결과를 포함하고 있습니다.
소스 코드: GitHub 저장소 https://github.com/ishamf/llm-visualizer에서 확인할 수 있습니다.

커뮤니티 반응

학습자에게 명확함 – "이 주의 작동 방식에 대한 가장 명확한 예시입니다." (fuddle)
교육적 가치 – "이런 시각화 도구가 있으면 정말 도움이 됩니다. 저는 금요일에 이 주제를 가르칠 예정입니다." (MCP123)
기술적 호기심 – "더 나중 레이어의 주의가 더 많은 레이어가 기여하는 덕분에 더 앞선 레이어에 의해 희석되지 않을까 걱정되시나요?" (wopak)
단순화에 대한 비판 – "값 벡터 크기가 크면 영향력이 크다는 이 단순한 아이디어를 매우 의심스럽게 봅니다." (sva_)
성능 질문 – "즉, 컨텍스트 크기와 함께 N² 계산이 필요하다는 뜻인가요? 모든 토큰이 다른 모든 토큰과 어떻게 관련되어 있는지 추적해야 하니까요?" (ex‑aws‑dude)
UX 제안 – 한 사용자는 애니메이션이 너무 빠르다고 지적하고, 자세한 검토를 위해 일시정지/단계 조절 기능을 제안했습니다 (mncharity).

한계와 미해결 질문

스칼라 축소: 다중 헤드, 다중 레이어 주의를 단일 불투명도로 축소하면 방향성과 부호 정보가 소실됩니다.
레이어 가중치: 현재 합산은 모든 레이어를 동일하게 취급합니다. 다른 가중치 방식을 사용하면 일반적으로 둔화된 깊은 레이어 패턴을 드러낼 수 있습니다.
크기 편향: 값 벡터 크기로 스케일링하는 것은 더 큰 벡터가 더 큰 영향력을 가진다는 가정을 내포하지만, 일부 댓글 작성자들은 이 점을 논쟁의 대상으로 삼았습니다.
확장성: 매우 긴 컨텍스트(예: 2,000 토큰 이상)의 주의를 시각화하려면 여전히 O(N²) 계산이 필요하며, 브라우저에서 다루기 어려워질 수 있습니다.

사용 방법

https://ishamf.dev/p/llm-attention-visualizer/에서 시각화 도구를 엽니다.
생성된 텍스트의 어떤 토큰 위에 마우스를 올립니다.
과거 토큰들의 불투명도 기반 목록을 관찰하세요; 가장 밝은 토큰이 가장 큰 기여를 했습니다.
미리 생성된 프롬프트를 전환하여 다른 행동(복사, 합성, 함수 수정 등)을 탐색합니다.

핵심 메시지

LLM Attention Visualizer는 대규모 언어 모델이 정확한 문자열을 복사하고 서로 다른 구문의 정보를 융합하는 데 사용하는 주의 역학에 대한 즉각적이고 상호작용 가능한 창을 제공하며, 교육자, 연구자, 호기심 많은 개발자에게 추상적인 트랜스포머 내부를 구체적으로 보여줍니다.