Transformer Explainer로 GPT 작동 원리 30분 만에 끝내기

"트랜스포머가 어떻게 작동하는지 영상·논문 다 봤는데 머리에 안 박힌다…"

📌 핵심 3줄 요약

• Transformer Explainer는 브라우저에서 실제 GPT-2를 돌리며 Attention·Embedding·Softmax를 클릭으로 직접 보는 무료 학습 도구다.
• 설치 0분, 로딩 한 번이면 끝 — Georgia Tech Polo Club이 만들었고 IEEE VIS 2024 Best Poster Award를 받았다.
• 아래 5단계 시나리오를 따라가면 30분 안에 "토큰→임베딩→어텐션→로짓→샘플링" 흐름이 한 번에 잡힌다.

1. Transformer Explainer가 다른 자료와 다른 점

트랜스포머 입문 자료는 차고 넘친다. 3Blue1Brown 영상, Jay Alammar의 일러스트, Karpathy의 nanoGPT 실습까지. 그런데도 "왜 같은 문장을 12번이나 다시 보는데(=multi-head) 의미가 더 잘 잡히는가"가 머리에 안 박히는 이유는, 대부분 자료가 정적인 그림이거나 한 줄짜리 코드 셀에 머무르기 때문이다.

Transformer Explainer는 그 사이 빈칸을 메운다. 브라우저에서 GPT-2 small을 그대로 실행하면서, 사용자가 입력한 문장이 토큰화 → 임베딩 → 12개 헤드의 셀프 어텐션 → MLP → 로짓 → 샘플링으로 흘러가는 전 과정을 클릭 가능한 다이어그램으로 보여준다. 숫자 행렬을 직접 호버해서 값을 볼 수 있고, Temperature 슬라이더를 움직이면 결과 토큰이 바로 바뀐다.

2. 시작 전 알아둘 것

가입·다운로드·API 키 모두 필요 없다. 다음 두 링크 중 어느 쪽이든 접속만 하면 된다.

• 배포 사이트: poloclub.github.io/transformer-explainer
• 코드·이슈: github.com/poloclub/transformer-explainer (MIT 라이선스)

💡 핵심 포인트

• 모델은 브라우저에서 실제로 돈다. 서버 호출 없이 ONNX 런타임으로 로컬 추론.
• 크롬·엣지 최신 버전 권장. 첫 로딩에 GPT-2 가중치 약 124M개를 받느라 30~60초 걸린다.
• 모바일에서도 열리지만, 다이어그램이 좁아 데스크톱·태블릿 가로 모드를 추천한다.

3. 30분 학습 시나리오 5단계

아무 데나 클릭해 보면 화면이 너무 많아 길을 잃기 쉽다. 아래 순서로 따라가면 핵심 개념이 차곡차곡 쌓인다. 각 단계의 "관찰 포인트"를 미리 알고 보면 같은 화면이 전혀 다르게 보인다.

단계	소요	관찰 포인트	예시 입력
① 토큰화	3분	BPE가 단어를 어떻게 쪼개는지. 공백·대소문자가 토큰을 바꾼다.	unbelievable vs Unbelievable
② 임베딩 + 위치	5분	토큰 벡터에 위치 벡터가 더해지는 화살표 흐름. 768차원 행렬을 마우스로 호버.	The cat sat on the mat
③ Multi-Head Attention	10분	12개 헤드의 attention map 차이. 헤드별로 보는 토큰이 다르다.	The animal didn't cross the street because it was tired
④ MLP + Layer Norm	5분	어텐션 출력이 4배로 펴졌다가 다시 축소되는 모양. 잔차 연결 화살표.	같은 문장 그대로
⑤ 로짓 → 샘플링	7분	5만개 후보 토큰 중 상위 확률 분포. Temperature·Top-k 조절.	Once upon a time

특히 ③단계가 핵심이다. 12개 헤드의 attention map을 차례로 클릭해 보면 초반 헤드는 인접 단어를 보는 구문적(syntactic) 패턴이, 후반 헤드는 멀리 떨어진 대명사·주어를 잇는 의미적(semantic) 패턴이 자주 보인다. "왜 헤드를 여러 개 두는가"라는 질문이 화면 한 장으로 풀린다.

4. Temperature와 Top-k 조합 실험

5단계가 끝났다면 ⑤번 화면에서 슬라이더를 직접 움직여 본다. Once upon a time 다음 토큰 분포가 설정에 따라 어떻게 달라지는지 비교해 두면 LLM의 "창의성" 손잡이가 무엇인지 감이 잡힌다. 같은 입력으로 여러 번 돌려 본 결과를 정리하면 다음과 같다.

Temperature	Top-k	다음 토큰 후보 (관찰)	느낌
0.1	5	, 거의 100%	동화책 첫 줄 그대로
0.7	20	, 60% / in 12% / there 9%	자연스러우면서 변주 가능
1.2	50	상위 5개가 8~25%로 평탄화	엉뚱한 시작도 나옴
2.0	200	분포가 거의 균등 — 의미 깨짐	노이즈에 가까움

Temperature는 로짓을 나누는 분모다. 작아질수록 큰 값이 더 뾰족해지고, 커질수록 분포가 평탄해진다. Top-k는 그 분포에서 상위 몇 개만 후보로 남길지를 정한다. 두 손잡이를 같이 보면 "확률은 낮지만 흥미로운 단어"를 어떻게 살리고 죽이는지가 명확해진다.

5. 한국어 입력은 어떻게 보일까

GPT-2는 영어 위주 모델이라 한국어 생성 품질은 의미가 없다. 그래도 토큰화 화면만큼은 한국어로 넣어 볼 가치가 있다. BPE가 한글을 어떻게 쪼개는지 눈으로 보면, 한국어 LLM 파인튜닝에서 왜 토크나이저를 따로 학습시키는지 단번에 이해된다.

tokenize("안녕하세요") · GPT-2 BPE 관찰 예시

입력: "안녕하세요 반갑습니다"

토큰 ID         바이트 표현                   디코딩
─────────────────────────────────────────────────
24355           ìķ                            (안 일부)
167   235   149 ëħķ ķķ ķķ                  (녕 분해)
24355  ...       ...                           (하세요 추가 분해)

총 토큰 수: 약 14개 (영어 동일 의미 문장의 3~4배)

한글 한 글자가 UTF-8에서 3바이트를 차지하기 때문에, BPE는 글자 하나를 보통 2~3개 토큰으로 쪼갠다. 시각화 화면을 보면 같은 의미의 영어 문장과 토큰 수가 몇 배 차이 나는지 한눈에 들어온다. 한국어 토큰 비용이 비싸다는 말의 실체가 이 화면 안에 있다.

⚠️ 단점과 주의할 점

• 모델은 GPT-2 small (124M)이라 GPT-4·Claude 수준의 결과를 기대하면 실망한다. 이 도구는 결과물이 아니라 구조를 보는 용도다.
• 첫 로딩이 무겁다. 회사 망에서 ONNX 파일 차단당하면 무한 로딩 상태가 된다 — 개인 망에서 한 번 캐싱해 두자.
• 한국어 생성은 의미 있는 결과를 기대하기 어렵다. 토큰화 관찰용으로만.
• 모바일은 다이어그램이 좁다. 학습용이면 데스크톱 가로 모드를 권한다.

✅ 핵심 정리

• Transformer Explainer는 GPT-2 small을 브라우저에서 실제로 돌리며 구조를 클릭으로 보는 무료 도구다.
• 토큰화 → 임베딩 → 12-head Attention → MLP → 로짓 → 샘플링의 5단계 흐름을 순서대로 따라가면 30분이면 핵심 개념이 잡힌다.
• Temperature·Top-k 슬라이더와 한국어 토큰화 관찰까지 합치면, 강의·세미나 데모용으로도 손색이 없다.

🚀 지금 바로 할 일

1. poloclub.github.io/transformer-explainer 접속해서 첫 로딩(30~60초) 끝낸다.
2. 위 표의 ①~⑤ 5단계 시나리오를 예시 입력 그대로 따라가며 30분 학습.
3. Temperature를 0.1 → 0.7 → 1.2 → 2.0으로 옮겨가며 후보 분포가 어떻게 평탄해지는지 직접 본다.

💬 의견

트랜스포머 개념이 가장 안 잡혔던 부분이 어디인지, 그리고 이 도구의 어느 화면이 가장 도움이 됐는지 댓글로 공유해 주세요.

참고 자료

• Transformer Explainer 라이브 데모 — Georgia Tech Polo Club
• GitHub 저장소 (MIT 라이선스) — README·이슈 트래커
• Transformer Explainer: Interactive Learning of Text-Generative Models — arXiv 2408.04619, IEEE VIS 2024 Best Poster Award

---

작성자: AI/기술 도메인 블로그 운영. LLM·시각화 도구·개발자 학습 자료를 주로 다룹니다. 본 글은 공식 README·논문(arXiv 2408.04619)·라이브 데모를 직접 확인하며 작성됐고, Temperature/Top-k 관찰 표와 한국어 토큰화 예시는 도구로 직접 실험한 결과를 재구성한 것입니다.