TokenTown: LLM 동작을 도시로 보여주는 시각화

트랜스포머를 도시로 그려, 토큰 하나가 도는 과정을 브라우저에서 본다

LLM API는 쓰지만 내부에서 토큰이 어떻게 처리되는지 감이 없는 백엔드 개발자

트랜스포머를 도시로 옮겼다
- 구역 하나가 트랜스포머의 한 단계다.
- 토큰화, 임베딩, 위치 인코딩, 레이어 링, 샘플러 순으로 차량이 이동한다.
레이어 링을 레이어 수만큼 돈다
- 어텐션, 잔차(residual), 피드포워드, 잔차 순서로 한 바퀴를 돈다.
- 마지막에 확률 분포를 만들고 토큰 하나를 뽑아 다시 처음으로 돌아간다.
실제로 계산되는 부분이 있다
- 토크나이저 분할, 임베딩 조회, 인과 마스크 어텐션, GELU 피드포워드, temperature/top-p 샘플링이 브라우저에서 실제로 돈다.
- 성장하는 KV cache 위에서 어텐션이 계산된다.
- prefill은 프롬프트 토큰을 한꺼번에, decode는 한 토큰씩 처리한다.
규모는 크게 줄였다
- 차원은 수천 대신 12, 어텐션 헤드는 수십 대신 2개다.
- 레이어는 80 대신 2~12개, 어휘는 100k+ 대신 수백 단어다.
일부러 가짜로 만든 부분도 있다
- 가중치는 랜덤이고 학습은 하지 않았다.
- 읽을 만한 출력을 위해 로짓에 작은 코퍼스의 bigram 사전분포를 섞었다.

어텐션 시각화는 다른 도구가 낫다는 의견
- Brendan Bycroft의 LLM visualiser(bbycroft.net/llm)가 이해에 가장 도움이 됐다는 댓글이 있었다.
- 3Blue1Brown 스타일의 인터랙티브 버전이면 좋겠다는 의견도 있었다.
설명문 품질에 대한 비판
- 설명이 Claude가 뽑은 듯한 두루뭉술한 문장이고 전문 용어가 많다는 의견이 있었다.
- 사전 지식이 꽤 필요하니 선행 지식을 안내하라는 의견이 있었다.
내용 오류 지적
- "루프가 아니라 별개 블록의 스택"이라는 설명인데 화면에서는 6번 순환한다는 지적이 있었다.
사용성 불만
- 모바일 지원이 필요하다는 의견이 있었다.
- 도움이 안 된다는 짧은 반응과 바이브 코딩 프로젝트를 걸러 달라는 의견도 있었다.

TokenTown으로 prefill과 decode 직접 보기
- 프롬프트를 넣고 Run을 눌러 prefill에서 토큰이 한꺼번에 처리되는 모습을 본다.
- decode에서 한 토큰씩 처리되는 모습을 비교한다.
- 긴 프롬프트가 첫 응답을 늦추는 이유를 팀에 설명할 때 쓴다.
Temperature와 Top-p 슬라이더로 샘플링 감 잡기
- 같은 프롬프트로 Temperature를 바꿔 돌려 본다.
- 출력 다양성이 어떻게 달라지는지 확인한 뒤 API 파라미터 기본값을 정한다.
신입 온보딩 자료로 쓰되 보조 자료를 붙이기
- TokenTown을 먼저 보여 준다.
- 설명이 부족하니 bbycroft.net/llm을 함께 붙인다.

KV cache이미 읽은 토큰의 key/value를 저장해 둔 메모. 다음 토큰을 만들 때 앞 내용을 다시 계산하지 않고 꺼내 쓴다.

prefill / decodeprefill은 프롬프트 전체를 한꺼번에 읽는 단계다. decode는 답변 토큰을 하나씩 만드는 단계다.

residual stream레이어를 지나는 동안 값을 계속 이어 나르는 통로. 각 블록은 여기에 결과를 더해 넣는다.

top-p 샘플링확률 높은 후보를 합해 p가 될 때까지만 남기고 그 안에서 뽑는 방식이다.

attention sink어텐션이 첫 토큰에 유독 많이 몰리는 현상.