어텐션을 눈으로 본다: 브라우저에서 돌아가는 LLM 시각화 실험

트랜스포머 기반 대규모 언어모델(LLM)이 텍스트를 생성할 때 가장 핵심적인 동작 중 하나는, 앞서 등장한 모든 토큰에서 필요한 정보를 끌어올 수 있다는 점이다. 다만 모든 토큰이 다음 토큰에 똑같이 영향을 준다면 모델은 제대로 작동하지 못한다. 그래서 어떤 과거 토큰을 얼마나 참고할지 선택하는 장치가 필요한데, 그것이 바로 어텐션(attention) 메커니즘이다. 개발자 ishamf가 Show HN에 공개한 'LLM Attention Visualization'은 이 추상적인 과정을 브라우저 화면 위에서 직접 보여주려는 시도다. 생성된 토큰을 누르거나 마우스를 올리면, 그 토큰을 만들어내는 데 영향을 준 과거 토큰들이 밝기로 강조된다.

하나의 숫자로 압축된 어텐션

제작자는 여기서 '영향을 줬다'는 표현이 엄밀하지 않다는 점을 분명히 밝힌다. 실제 시각화는 상당히 단순화된 값을 쓴다. 어텐션 가중치에 밸류 벡터의 크기를 곱하고, 모든 어텐션 헤드에 걸쳐 합산한 뒤, 다시 모든 레이어에 걸쳐 더한 값을 과거 토큰의 불투명도로 변환한다. 가장 큰 값은 불투명도 1로 고정하고 나머지는 그 사이 값으로 보간하는 방식이다. 결국 과거 토큰 하나당 숫자 하나로 압축하는 과정에서 방대한 정보가 버려진다. 제작자 스스로도 구현을 시작할 때는 이렇게 뭉갠 값이 과연 의미 있게 읽힐지 의심스러웠다고 한다. 그런데 막상 만들어 보니 흥미로운 패턴이 드러났다.

대표 예시인 'Office Move Summary' 프롬프트에서 주소나 날짜처럼 원문을 그대로 옮겨 적은 부분에 마우스를 올리면, 원본 데이터가 뚜렷하게 강조되는 모습을 볼 수 있다. 생성된 토큰이 원본 정보를 크게 참고하고 있다는 뜻이다. 이 장면은 LLM에 대한 오래된 의문 하나를 자연스럽게 풀어 준다. 다음 토큰을 확률적으로 예측하는 모델이 어떻게 주소나 코드를 정확히 '복사'해 낼까, 확률에 기대는 이상 언젠가는 무작위로 틀리지 않을까 하는 의문이다.

확률 예측인데 왜 복사는 정확한가

시각화가 보여 주는 답은, 모델이 제한된 내부 상태만으로 전체 문장을 통째로 예측하는 게 아니라는 점이다. 모든 과거 토큰에 접근할 수 있기 때문에, 무언가를 옮겨 적을 때는 어떤 과거 토큰을 가져올지 고르기만 하면 된다. 그래서 오류 확률이 매우 낮아진다. 'Debugging an Average Function' 예시에서는 6억 파라미터에 불과한 비교적 작은 모델이 자바스크립트 함수 전체를 의도한 수정 부분만 빼고 그대로 재현해 낸다. 다만 이 모델이 스스로 문제를 찾아내지는 못해 힌트가 필요했다는 점도 함께 기록돼 있어, 작은 모델의 한계를 솔직하게 드러낸다.

또 다른 흥미로운 지점은 정보를 결합하는 장면이다. 'Existing access cards and phone numbers remain'에서 'remain'에 마우스를 올리면, 앞선 문장의 'Existing employee access cards will work'의 'work'와 'company phone numbers will stay the same'의 'stay the same'을 함께 참고하는 것이 보인다. 서로 다른 두 구절의 의미를 하나의 단어로 엮어 내는 셈인데, 제작자는 이 대목을 특히 인상적으로 꼽았다.

브라우저에서 내부 값을 꺼내기까지

구현 자체는 Transformers.js로 텍스트를 생성하는 평범한 React 앱이다. 문제는 시각화를 위해 일반적인 생성 루프가 내보내지 않는 내부 값까지 꺼내야 한다는 데 있었다. 그래서 제작자는 생성 루프를 직접 작성해 시각화에 필요한 값을 추적했다. 모델은 작은 축에 속해도 수백 메가바이트에 달해, 다운로드가 끝날 때까지 기다리게 하는 방식은 현실적이지 않았다. 이에 여러 프롬프트를 미리 생성해 두고 즉시 불러와 볼 수 있게 했다.

가장 까다로웠던 부분은 모델 내부 값에 접근하는 일이었다. 파이썬 ML 라이브러리라면 손쉽게 꺼낼 수 있는 값이지만, Transformers.js는 연산 그래프 전체를 담은 .onnx 파일을 쓰고 실제 계산은 wasm으로 처리해, 미리 정의된 출력 외에는 접근할 방법이 마땅치 않았다. 결국 제작자는 별도 스크립트로 onnx 파일을 최소한으로 수정해 필요한 내부 값을 출력으로 노출시켰다. 다만 이렇게 손댄 모델은 표준 .onnx가 아니어서, 브라우저 기반 생성 기능을 유지하려면 계측된 모델을 자신의 허깅페이스 저장소에 따로 올리고 앱이 그쪽을 가리키도록 해야 했다.

실무자 관점에서 이 프로젝트의 가치는 두 가지다. 하나는 어텐션이라는 개념을 손으로 만지듯 체감하게 해 준다는 교육적 효과이고, 다른 하나는 wasm 위에서 도는 onnx 모델의 내부를 들여다보려면 어떤 우회가 필요한지 구체적인 사례를 남겼다는 점이다. 물론 여러 헤드와 레이어의 정보를 숫자 하나로 뭉갠 만큼, 이 화면을 모델의 실제 판단 근거로 곧이곧대로 받아들여서는 안 된다. 어디까지나 직관을 돕는 단순화된 렌더링이라는 전제를 잊지 않는다면, 확률 모델이 왜 복사에 강한지 같은 질문에 대한 감각을 얻기에는 충분히 쓸모 있는 도구다. 코드는 깃허브에 공개돼 있다.