트랜스포머, 그림으로만 보다가 직접 만져보기
요즘 개발자라면 하루에 한 번은 LLM을 쓰잖아요. 그런데 '트랜스포머가 정확히 어떻게 다음 단어를 고르는 건데?'라고 물으면 대답이 막히는 분이 꽤 많아요. 논문은 수식투성이고, 블로그 그림은 정적이라 '그래서 실제 숫자가 어떻게 흐르는데?'가 안 보이거든요. 조지아텍의 Polo Club이 만든 Transformer Explainer는 이 답답함을 정면으로 해결한 도구예요. 브라우저 안에서 진짜 GPT-2 모델이 돌아가고, 여러분이 문장을 입력하면 그 문장이 토큰이 되고 벡터가 되고 어텐션을 거쳐 다음 단어 확률로 나오는 전 과정을 클릭하면서 따라갈 수 있어요. 설치도 없고 GPU도 필요 없어요.
무엇을 볼 수 있냐면
화면에 문장을 넣으면, 먼저 문장이 토큰으로 쪼개지는 걸 봐요. 이게 뭐냐면, 모델은 글자를 직접 못 읽어서 단어나 단어 조각을 번호표로 바꾸는 과정이에요. 그 번호표가 임베딩이라는 숫자 벡터로 바뀌고, 여기에 '이 토큰이 몇 번째 자리에 있는지'를 나타내는 위치 정보가 더해지는 것까지 시각적으로 보여줘요.
그다음이 핵심인 셀프 어텐션이에요. 이게 뭐냐면, 각 토큰이 문장 안의 다른 토큰들을 둘러보면서 '내가 지금 누구를 얼마나 참고해야 하지?'를 계산하는 단계예요. 도서관에 비유하면 Query는 내가 찾고 싶은 질문, Key는 책마다 붙은 색인 태그, Value는 책의 실제 내용이에요. 질문과 색인이 잘 맞는 책일수록 그 내용을 많이 가져오는 거죠. Transformer Explainer에서는 Q, K, V 행렬이 실제로 만들어지고 곱해지는 걸 펼쳐볼 수 있고, 어텐션 헤드마다 어떤 토큰이 어떤 토큰에 집중하는지 선의 굵기로 보여줘요. '멀티 헤드'라는 말이 왜 나오는지도 여기서 자연스럽게 이해돼요. 헤드마다 보는 관점이 다르거든요. 어떤 헤드는 바로 앞 단어를 보고, 어떤 헤드는 문장 처음의 주어를 보는 식이에요.
어텐션 다음엔 MLP 층이 나와요. 어텐션이 '정보를 모으는' 단계라면 MLP는 모은 정보를 각 토큰별로 '가공하는' 단계라고 보시면 돼요. 이런 블록이 GPT-2 small 기준 12층 쌓여 있고, 마지막에 나온 벡터를 전체 단어 사전 크기로 펼쳐서 softmax를 거치면 '다음 토큰이 될 확률'이 나와요. 이 확률 막대가 화면 오른쪽에 실시간으로 그려지는데, 문장 끝을 한 글자만 바꿔도 막대가 확 바뀌는 걸 보면 모델이 문맥을 진짜로 쓰고 있다는 게 실감이 나요.
온도 슬라이더가 진짜 재밌어요
제가 제일 추천하는 기능은 Temperature 슬라이더예요. 온도가 뭐냐면, 확률 분포를 얼마나 뾰족하게 혹은 평평하게 만들지 조절하는 값이에요. 온도를 낮추면 1등 후보 확률이 확 커져서 늘 같은 단어가 나오고, 높이면 확률이 평평해져서 엉뚱한 단어도 뽑히기 시작해요. API 파라미터로만 만지던 temperature가 실제로 확률 막대를 어떻게 바꾸는지 눈으로 보면, '왜 창의적인 답변엔 온도를 올리라고 하는지'가 설명 없이도 이해돼요. top-k 샘플링도 같은 방식으로 실험할 수 있어요.
비슷한 학습 자료와 비교하면
트랜스포머 학습 자료는 이미 많아요. Jay Alammar의 The Illustrated Transformer는 정적 그림으로 구조를 익히기에 최고고, 3Blue1Brown의 영상은 수학적 직관을 주는 데 강해요. Karpathy의 nanoGPT와 'Let's build GPT' 영상은 코드를 직접 짜면서 배우는 쪽이고, Brendan Bycroft의 LLM Visualization은 3D로 텐서 흐름을 보여줘요. Transformer Explainer의 차별점은 '내가 입력한 문장'으로 '실제 모델'이 계산하는 걸 '단계별로 클릭'하면서 본다는 세 가지가 동시에 된다는 거예요. 참고로 같은 팀이 CNN Explainer, GAN Lab, Diffusion Explainer도 만들었고, 이 도구는 시각화 학회 IEEE VIS에서 발표된 연구 결과물이라 설명의 정확도도 믿을 만해요.
한국 개발자에게는
세 가지 용도로 바로 쓸 수 있어요. 첫째, 팀 온보딩 교재예요. LLM 기능을 붙이는 팀인데 내부 원리를 모르는 신입이 있다면, 논문 던져주는 것보다 이 사이트에서 30분 같이 보는 게 훨씬 효과적이에요. 둘째, 면접 준비예요. 'attention이 뭔지 설명해 보세요'라는 질문에 Q, K, V를 손으로 그려가며 답할 수 있게 돼요. 셋째, 프롬프트 엔지니어링 감각이에요. 토큰이 어떻게 쪼개지는지, 앞쪽 토큰이 뒤쪽에 어떻게 영향을 주는지 보고 나면 '왜 한국어 프롬프트가 토큰을 더 많이 먹는지', '왜 중요한 지시를 앞에 두라고 하는지' 같은 실무 팁의 이유를 알게 되거든요.
정리하면
트랜스포머는 '읽어서' 이해하는 것보다 '만져서' 이해하는 게 훨씬 빠르고, 이 도구는 그걸 브라우저 하나로 가능하게 해줘요.
여러분은 트랜스포머를 처음 이해했을 때 어떤 자료가 결정적이었나요? 그리고 팀 신입한테 LLM 원리를 설명할 때 어디서부터 시작하시나요?
🔗 출처: Hacker News