사실: 토큰 간의 연결 고리를 시각화하다

사용자가 생성된 토큰 위에 마우스를 올리거나 탭하면, 해당 토큰을 생성하는 데 영향을 준 과거 토큰들이 하이라이트되는 시각화 도구가 공개됐다. 이 도구는 트랜스포머 기반 LLM이 생성 단계에서 이전 토큰들 중 어떤 정보에 선택적으로 집중하는지 그 메커니즘을 시각적으로 보여준다. 구체적으로는 모든 어텐션 헤드(Attention Head)의 가중치를 합산하고, 이를 밸류 벡터(Value Vector)의 크기로 스케일링한 뒤 모든 레이어에 걸쳐 합산하는 방식을 사용했다. 이렇게 계산된 수치는 과거 토큰들의 불투명도(Opacity)를 조절하는 값으로 변환되며, 가장 영향력이 큰 토큰이 가장 선명하게 표시된다.

600M(6억) 파라미터 규모의 소형 모델을 사용한 실험에서 LLM의 '복사-붙여넣기' 능력이 단순한 확률적 예측이 아님이 확인됐다. 주소나 날짜처럼 원문을 그대로 옮겨 적어야 하는 작업에서, 모델은 내부 상태에 의존하기보다 소스 데이터의 특정 토큰을 직접적으로 강하게 참조하는 패턴을 보였다. 또한 "Existing employee access cards will work"와 "company phone numbers will stay the same"이라는 두 문장의 정보를 조합해 "remain"이라는 단어를 생성할 때, 각각의 문장에서 핵심이 되는 단어들을 동시에 참조하는 모습이 관찰됐다.

흐름: 브라우저 기반 LLM의 내부 상태 접근 방식

이번 구현의 핵심은 모델의 출력값뿐 아니라 내부 연산 과정에 있는 데이터를 어떻게 추출하느냐에 있다. 일반적으로 Transformers.js와 같은 라이브러리는 .onnx 파일을 통해 계산 그래프를 처리하며, 모델 로딩과 연산 로직이 WASM(WebAssembly)으로 구현되어 있다. 이 구조에서는 미리 정의된 출력값 외에 내부 텐서(Tensor) 데이터에 접근하는 것이 매우 까다롭다. 기존의 표준 생성 루프(Generation Loop)로는 시각화에 필요한 어텐션 가중치를 실시간으로 뽑아낼 수 없다는 제약이 있었다.

이를 해결하기 위해 개발자는 별도의 스크립트를 사용해 ONNX 파일을 수정함으로써 내부 값을 외부로 노출시키는 '인스트루먼트(Instrumented)' 모델을 만들었다. 수정된 모델을 Hugging Face 저장소에 따로 업로드하고, 앱이 이 커스텀 모델을 호출하도록 설계해 브라우저 환경에서도 내부 연산 그래프의 데이터를 추적할 수 있게 했다. 이는 LLM의 실행 환경을 서버에서 브라우저(Edge)로 옮기면서 발생하는 디버깅의 어려움을 모델 파일 자체의 수정으로 해결한 사례다.

관전 포인트: 확률적 예측과 직접 참조의 구분

AI 실무자와 개발자가 주목해야 할 지점은 LLM이 정보를 처리하는 두 가지 서로 다른 경로를 시각적으로 구분할 수 있다는 점이다. 모델이 단순히 다음 단어를 확률적으로 예측하는 것과, 과거의 특정 토큰을 '앵커' 삼아 정보를 직접 가져오는 과정의 차이를 확인하는 것은 프롬프트 엔지니어링의 정밀도를 높이는 데 도움이 된다. 특히 소형 모델에서도 특정 제약 조건(예: JS 함수 재현) 하에 높은 정확도를 보이는 이유가 강력한 어텐션 참조 덕분임을 시각적으로 검증할 수 있다.

기술적으로는 ONNX 모델의 내부 텐서를 노출시켜 브라우저에서 실시간으로 모니터링하는 워크플로우를 참고할 필요가 있다. 이는 모델의 블랙박스 특성을 완화하고, 특정 입력값에 대해 모델이 왜 그런 응답을 내놓았는지 분석하는 XAI(설명 가능한 AI)의 기초적인 구현 방식으로 활용 가능하다. 개발자는 공개된 GitHub 저장소의 코드를 통해 일반적인 .onnx 모델을 어떻게 수정하여 내부 값을 추출했는지, 그리고 이를 React 앱과 어떻게 연결했는지에 대한 구현 방식을 확인할 수 있다.