LLM 내부 동작 인터랙티브 시각화

LLM Visualization

Sep 4, 2025•gmays•View Original

Transformer 기반 LLM이 토큰을 처리하는 전 과정을 단계별로 인터랙티브하게 시각화한 웹 사이트로, 코드 없이 LLM 내부 구조를 직관적으로 이해할 수 있다.

LLM 구조를 개념적으로는 알지만 실제 연산 흐름이 잘 안 잡히는 개발자, 또는 팀원이나 학습자에게 Transformer를 설명해야 하는 ML 엔지니어.

bbycroft.net/llm은 GPT 계열 LLM의 토큰 임베딩 → 어텐션(Attention) → FFN → 출력 확률 분포까지의 전 과정을 인터랙티브 3D 시각화로 보여준다.
Attention 메커니즘이 각 토큰 간 관계를 어떻게 계산하는지, Q/K/V 행렬 연산이 어떤 식으로 진행되는지를 레이어별로 단계 추적할 수 있다.
시각화는 실제 모델 가중치가 아닌 구조 설명용 소형 예시 모델 기반이라 '전체 과정의 흐름'을 이해하는 데 초점이 맞춰져 있다.
Andrej Karpathy가 유튜브 영상(youtu.be/7xTGNNLPyMI)에서 이 시각화를 직접 워크스루(walk-through)하며 설명해 학습 자료로서의 가치가 더 높아졌다.
Georgia Tech의 Transformer Explainer(poloclub.github.io/transformer-explainer), Jay Alammar의 Illustrated Transformer 등 유사 학습 자료들과 함께 교육 자료 생태계를 이루고 있다.
댓글에서 지적된 한계: '전 과정을 시각화할 수 있지만, 왜 특정 결정을 내리는지(해석 가능성)는 여전히 블랙박스'라는 점이 AI 해석가능성(interpretability) 연구의 미해결 과제로 언급됐다.
입력 텍스트를 직접 바꿔가며 어텐션 흐름이나 임베딩 공간 변화를 실시간으로 확인하는 기능은 아직 없어, 실제 모델 가중치 기반 커스텀 입력 지원이 향후 개선 요청으로 나왔다.

Karpathy의 유튜브 워크스루 영상(youtu.be/7xTGNNLPyMI)이 이 시각화와 함께 보기 좋은 자료로 여러 댓글에서 추천됐다. 시각화만으로는 이해가 어려운 수식 흐름을 영상이 보완해준다는 평.
'전체 연산을 볼 수 있는데 왜 이런 답을 내는지는 모른다'는 역설적 상황을 지적하는 댓글이 공감을 받았다. 시각화가 곧 해석 가능성은 아니라는 점을 짚은 것.
실제 가중치와 커스텀 입력을 지원하면 좋겠다는 의견이 여럿 나왔다. 3Blue1Brown의 LLM 영상에서 임베딩 벡터가 '의미'를 표현하는 방식을 탐색했던 것처럼, 의미 공간 탐색 기능도 요청됐다.
HN 특유의 '댓글이 적은 고품질 기술 글' 패턴이라는 메타 댓글이 있었다. 읽는 데 시간이 오래 걸리는 글은 앞에 달린 댓글만 보고 참여하거나, 다 읽고 나면 이미 프런트 페이지에서 내려가 있어서 토론이 활성화되기 어렵다는 구조적 문제 지적.
5살 아이 코딩 클럽에 보여주겠다는 댓글과 대학 강의 보조 자료로 쓰겠다는 댓글이 있었다. 비전공자나 입문자에게 LLM 구조를 설명하는 교육 도구로서의 가치가 높게 평가됐다.

LLM 구조를 팀에 설명해야 하는 상황이라면, 이 시각화를 슬라이드 대신 라이브 데모로 활용하면 어텐션 레이어가 어떻게 쌓이는지 직관적으로 전달할 수 있다. Karpathy 영상과 함께 보여주면 효과가 배가된다.
Transformer 논문('Attention is All You Need')을 읽다가 Q/K/V 연산이나 포지셔널 인코딩 개념이 추상적으로 느껴진다면, 이 시각화에서 해당 레이어를 직접 탐색하며 수식과 연결 짓는 식으로 활용한다.
LLM 파인튜닝이나 프롬프트 엔지니어링 작업 중 모델 동작이 예상과 다를 때, 이 시각화로 토큰 처리 흐름 전체를 재점검하면 '어느 단계에서 무슨 일이 일어나는지'에 대한 멘탈 모델을 교정할 수 있다.

Attention트랜스포머의 핵심 연산으로, 입력 토큰들이 서로 '얼마나 관련 있는지'를 계산해 중요한 토큰에 더 집중하게 만드는 메커니즘. 문장에서 대명사가 무엇을 가리키는지 파악하는 과정과 비슷하다.

Q/K/VAttention 연산에서 쓰이는 세 행렬. Query(무엇을 찾는지), Key(각 토큰의 식별자), Value(실제 전달할 정보)로, 도서관에서 검색어(Q)로 책 목록(K)을 뒤져 내용(V)을 가져오는 것에 비유할 수 있다.

임베딩(Embedding)단어나 토큰을 수백~수천 차원의 숫자 벡터로 변환한 것. 의미가 비슷한 단어는 이 벡터 공간에서 가까이 위치한다.

FFNFeed-Forward Network. Attention 연산 이후 각 토큰의 표현을 비선형 변환으로 정제하는 레이어. Attention이 '토큰 간 관계'를 보는 반면, FFN은 '토큰 자체의 표현'을 변환한다.

포지셔널 인코딩(Positional Encoding)Transformer는 순서를 자체적으로 모르기 때문에, 각 토큰에 위치 정보를 숫자로 덧붙여 넣는 방식. '이 단어는 문장의 3번째 위치'라는 정보를 벡터에 추가하는 것.

해석가능성(Interpretability)모델이 왜 특정 답을 냈는지를 사람이 이해할 수 있도록 내부 작동을 분석하는 연구 분야. 현재는 연산 흐름을 시각화할 수는 있어도 '왜 이 결정을 했는지'까지 설명하기는 매우 어렵다.