Transformer를 시각적으로 설명하기

AI 요약

Transformer Explainer는 텍스트 생성 모델의 내부 계산을 단계별로 탐색하는 인터랙티브 웹 도구입니다. 설명 대상은 최신 모델이 아니라 GPT-2 small이지만, 오늘날 Transformer 계열 모델을 이해하는 데 필요한 구성 요소를 한 화면에서 연결해 보여줍니다. 입력 문장을 넣으면 토큰화부터 다음 토큰 확률 계산까지 수치와 시각화가 함께 갱신됩니다.

입력을 임베딩으로 바꾸는 과정

예시 문장인 “Data visualization empowers users to”를 먼저 token으로 나눕니다. GPT-2의 vocabulary는 50,257개 token으로 구성되며, 단어 전체가 아니라 subword 단위로 쪼개지기도 합니다. GPT-2 small은 각 token을 768차원 vector로 바꿉니다. token embedding matrix의 크기는 50,257×768이고 약 3,900만 개 parameter를 차지합니다.

여기에 token의 순서를 나타내는 positional encoding을 더합니다. GPT-2는 위치 정보를 학습 가능한 matrix로 훈련합니다. token 의미와 위치 정보를 더한 값이 Transformer block으로 들어가는 최종 embedding입니다.

Transformer block과 attention

GPT-2 small은 Transformer block 12개를 순서대로 통과합니다. 각 block에는 multi-head self-attention과 MLP가 들어갑니다. self-attention은 token 사이의 정보를 섞습니다. MLP는 각 token을 독립적으로 처리하면서 표현을 변환하고 확장합니다.

Attention에서는 각 token의 embedding을 Query(Q), Key(K), Value(V) vector로 투영합니다. Q는 어떤 정보를 찾는지, K는 어떤 token이 그 질문에 관련되는지, V는 실제로 전달할 정보인지 나타내는 검색 비유로 설명합니다. GPT-2 small은 12개 attention head로 Q, K, V를 나눠 서로 다른 관계를 병렬로 계산합니다.

각 head는 Q와 K의 dot product로 token 간 attention score를 계산합니다. 이후 score를 scaling하고 미래 token에 해당하는 영역을 mask 처리해 다음 token을 미리 보지 못하게 합니다. softmax를 거치면 각 행의 값이 확률로 바뀌고, 이 확률 matrix를 V와 곱해 정보가 섞인 결과를 얻습니다. 12개 head의 결과를 이어 붙인 뒤 linear projection을 적용합니다.

이후 MLP는 768차원 표현을 3,072차원으로 네 배 확장하고 GELU를 적용한 다음 다시 768차원으로 줄입니다. attention이 token 사이의 정보를 결합한다면 MLP는 각 token의 표현을 별도로 변환하는 역할을 합니다. Layer Normalization, Dropout, Residual Connection도 함께 설명합니다. Layer Normalization은 학습을 안정화하고, Dropout은 훈련 중 일부 경로를 끄며, Residual Connection은 입력을 다음 출력에 더해 깊은 네트워크에서 gradient가 흐르도록 돕습니다.

다음 token 확률과 sampling

12개 block을 모두 통과한 마지막 표현은 50,257개 vocabulary 각각에 해당하는 logit으로 투영됩니다. softmax는 logit을 확률 분포로 바꾸고, 모델은 이 분포에서 다음 token을 선택합니다. temperature가 1보다 낮으면 분포가 뾰족해져 더 결정적인 출력이 나오고, 1보다 높으면 확률이 평평해져 무작위성이 커집니다. top-k는 확률이 높은 k개 token만 남기며, top-p는 누적 확률이 p를 넘는 최소 후보 집합을 사용합니다.

브라우저에서 실행하는 구현

이 도구는 GPT-2 small을 사용자 브라우저에서 직접 실행합니다. 모델은 Andrej Karpathy의 nanoGPT에 기반한 PyTorch 구현에서 가져왔고, ONNX Runtime 형식으로 변환했습니다. 화면은 JavaScript와 Svelte로 구성했으며, D3.js로 attention map과 중간 계산을 그립니다. 입력 문장을 바꾸면 embedding, attention weight, 중간 결과, 최종 확률이 실시간으로 업데이트됩니다. 예제 영역에는 약 600MB의 GPT-2 모델을 다운로드한다는 안내가 있습니다.

설명은 Transformer의 주요 계산을 한 번에 연결한다는 장점이 있지만, GPT-2의 설계를 현대 모델 전체의 표준으로 받아들이면 안 된다는 지적도 나왔습니다. 특히 GPT-2의 absolute positional encoding은 최신 모델에서 널리 쓰이는 방식과 다를 수 있습니다. 댓글에서는 교육을 위해 단순화한 설명이라는 의견과 함께, 어떤 설계 요소를 선택해 보여주느냐가 모델 표현을 이해하는 데 큰 영향을 준다는 반론이 이어집니다.

Hacker News 반응

• @tanseydavid — attention의 작동 원리에 대한 제 부족한 이해를 키우는 데 이 도구가 정말 도움이 됐습니다. 좋은 작업입니다.
• @jwpapi — 그 페이지를 열었더니 Chromebook이 다운됐습니다. 전에는 이런 일이 한 번도 없었습니다.
  • @jwpapi — 두 번이나 그랬습니다.
  • @shagie — Examples 섹션 아래에 GPT-2 모델을 다운로드하는 동안 예제를 실행해 보라는 문구가 있습니다. 다운로드 용량이 600MB나 되고, 필요한 연산량도 상당할 가능성이 큽니다.
• @utopcell — 훌륭한 사이트이고 설명이 직관적입니다. 예전에 https://bbycroft.net/llm도 매우 유용하게 봤습니다.
  • @gyanchawdhary — 정말 멋집니다. 공유해줘서 고맙습니다.
• @esseph — 제가 기대했던 것과는 전혀 달랐습니다. Unicron이 훨씬 많이 나올 줄 알았습니다.
  • @whycome — 확실히 Transformers보다는 더 많이 나옵니다.
  • @esseph — 늦게 이해했습니다.
• @andblac — attention head에서 가장 흥미로운 부분은 attention matrix가 이미 계산된 뒤 Value vector와 곱해지는 지점입니다. 이 과정은 일반적인 네트워크의 Dense layer에 Value vector를 통과시키는 것과 정확히 같은 방식으로 작동하며, attention matrix가 그 layer의 weight 역할을 합니다. 따라서 attention head는 추론 중에 Key와 Query를 바탕으로 작은 단일 layer network를 동적으로 구성하도록 훈련됩니다. 이 부분은 LLM architecture 설명에서 거의 강조되지 않지만, 어떻게 이렇게 잘 작동하는지 보여주는 놀라운 지점입니다. 이 시각화에서 클릭하며 쉽게 관찰할 수 있습니다.
  • @bilsbie — 조금 더 쉽게 설명해줄 수 있나요? 중요한 내용처럼 들리지만 attention 부분이 아직 잘 이해되지 않습니다.
  • @andblac — 일반적인 Dense layer에서는 y=Wx를 계산합니다. x는 입력이고 y는 출력이며, W는 보통 훈련 과정에서 만들어지는 weight matrix입니다. Attention에서 A와 V를 곱하는 Av도 Wx와 같은 선형 변환처럼 작동합니다. 차이는 A가 일반적인 W처럼 미리 직접 훈련된 값이 아니라, 추론 중에 네트워크가 만들어내는 값이라는 점입니다. 네트워크는 추론 중 A를 생성하도록 훈련됩니다. https://www.welchlabs.com/store/mladeepseek-attention-poster의 포스터와 https://www.youtube.com/watch?v=0VLAoVGf_74 영상도 참고할 만합니다.
  • @encrux — Welch Labs의 Vision Language Action Models 영상에는 prompt의 attention을 matrix 중 하나에서 이미지 속 실제 원본 pixel까지 추적하는 아름다운 시각화가 나옵니다.
  • @bonoboTP — 많은 입문 설명에 들어가는 내용이지만, MLP를 잘 알아야 하고 Transformer는 아직 잘 몰라야 의미가 생기는 이상한 위치에 있습니다. 요즘은 MLP와 Transformer를 모두 모르는 초보자이거나 둘 다 아는 사람인 경우가 많아서, 초보자용 Transformer 설명에서 MLP에 대한 깊은 이해를 전제로 삼기 어렵습니다. 그래도 Transformer block을 입력에 따라 Dense layer의 weight vector를 결정하는 구조로 볼 수 있다는 설명은 맞습니다. 고전적인 MLP 계열 네트워크에서는 입력에 따라 달라지는 값끼리 곱하는 일이 거의 없었습니다. Transformer의 attention은 입력에 따라 달라지는 activation 사이에 많은 곱셈 상호작용을 제공합니다. 물론 Schmidhuber가 오래전에 이 내용을 이야기했다는 점도 덧붙이고 싶습니다.
• @E-Reverance — GPT-2를 설명하는 목적이라는 점은 이해합니다. 다만 일반 독자가 현대 모델이 작동하는 방식의 예로 받아들이지 않았으면 합니다. absolute positional encoding은 더 이상 쓰이지 않기 때문입니다. 최신 방식이 아니라는 점을 적어두었다는 건 알지만, 이런 구체적인 오래된 세부 사항은 모델이 학습할 수 있는 표현에 큰 영향을 줍니다.
  • @foobazgt — 교육은 무언가를 단순화해야 성립합니다.
  • @E-Reverance — 특정한 오래된 세부 사항을 가져오는 문제를 말하는 것이지, 단순화 자체를 말하는 게 아닙니다.
  • @ViscountPenguin — 더 나은 단순화는 positional encoding을 아예 빼고 Transformer를 set model로만 설명하는 방식일 수 있습니다.
  • @ViscountPenguin — 동의합니다. RoPE가 개념적으로는 훨씬 단순하다고 생각합니다.
• @bilsbie — key, query, value matrix를 따로 두는 이유를 전혀 이해하지 못했습니다. 각각 정확히 무엇을 하나요?
  • @kingstnap — embedding은 latent space에 있습니다. Wq는 embedding을 query 공간으로 투영합니다. 즉 이 token이 어떤 질문을 하는지 나타냅니다. Wk는 key 공간으로 투영합니다. 어떤 질문에 이 token이 답하는지 나타냅니다. Wv는 value 공간으로 투영합니다. 그 답이 무엇인지 나타냅니다. 물론 이 설명은 matrix가 하는 일을 나중에 해석한 비유입니다. 실제로는 attention이 least squares를 계산하거나, 숫자를 정렬하거나, gradient descent step을 계산하도록 weight를 구성하는 등 이상한 동작도 만들 수 있습니다. 데이터에 적용할 함수를 표현하는 데 매우 유연해 보입니다.
• @robrenaud — temperature 설명에서 “확률이 가장 높은 token을 고르는 대신 안전성과 창의성 사이의 균형을 맞춘다”는 표현을 봤습니다. 여기서 안전성은 확실히 잘못된 단어입니다. temperature 0으로 생성한 텍스트는 이상하게 놀라움이 없는 느낌을 주며 인공적으로 보입니다. 높은 확률의 텍스트는 지루하거나 반복적일 수 있습니다. 사람은 정보를 전달할 때 효율적이면서 오류를 줄이는 방향으로 언어를 사용하고, 심리언어학 연구에서도 사람이 이런 목적을 무의식적으로 고려해 각 단어를 선택한다는 결과가 있습니다. Dropout 설명은 완전히 빼는 편이 좋겠습니다. 제가 아는 한 현대적인 방식에서는 더 이상 주요 구성 요소가 아닙니다. 하나의 인터랙티브 시각화로 Transformer를 설명하려는 야심찬 목표도 이해하기 어렵습니다. 한 사람이 word embedding과 attention을 모두 새롭게 이해하게 되리라고 상상하기 힘듭니다. 저는 Deep Learning Study Group 발표를 위해 Full Bandwidth Transformers 시각화를 만들고 있습니다. 독립적인 설명이나 맥락 없는 자료를 목표로 하지는 않지만, 의견을 듣고 싶습니다. https://rrenaud.github.io/fullbandwidth_transformer_viz/
• @throw0101a — EE 학위가 있는 사람으로서, 지금도 sysadmin으로 일하고 있지만 transformer라는 용어가 계속 헷갈립니다. cryptocurrency를 cryptography가 아니라 crypto라고 부르는 것도 그렇습니다.
  • @kQq9oHeAz6wLLS — 정말 그렇습니다. Optimus Prime이 더 많이 나올 줄 알았습니다.
  • @cobbzilla — transformer는 service, template, zone과 함께 가장 많이 중복되는 용어 목록에 올라갈 자리를 다투고 있습니다.
• @jasonjmcghee — 입문자라면 The Illustrated Transformer를 강력히 추천합니다. https://jalammar.github.io/illustrated-transformer/
  • @hangonhn — 저자의 책도 아주 좋습니다.
  • @misiti3780 — 동의합니다. 책이 정말 좋습니다.
  • @neilv — Kindle DRM을 합법적으로 피하기 위해 두 배를 지불할 사람이라면 DRM 없는 EPUB과 PDF를 이용할 수 있습니다. https://www.ebooks.com/en-us/book/211460386/hands-on-large-l...
  • @israrkhan — 초보자에게 훌륭한 자료입니다.
• @ftumminello — 왜 EE를 공부한 제 내면은 이 글이 전력용 transformer에 관한 내용이라고 생각했을까요?
  • @jaggederest — 직접 transformer를 감는 천재적이고 미친 사람들이 있다는 걸 알고 있어서, 오히려 그 내용이었다면 매우 흥미로웠을 것 같습니다.
  • @CTDOCodebases — CRT forum에서 사람들이 그런 작업을 한다는 이야기를 듣기 전까지는 그런 일이 있는 줄도 몰랐습니다. flyback transformer를 점점 구하기 어려워지면서 더 인기를 얻을 것 같습니다.
  • @jaggederest — 저는 여기서 처음 들었습니다. https://ludens.cl/paradise/turbine/turbine.html의 transformer 부분을 찾아보면 됩니다. 흥미로운 DIY 중거리 전력 전송 프로젝트입니다.
  • @Vaslo — 자동차가 로봇으로 변신하는 Transformer를 뜻했을 수도 있습니다.
• @dionian — UI가 훌륭하고, 입문자인 저에게 큰 도움이 됐습니다.

원문: Polo Club Transformer Explainer / 번역·요약: Trawling