LLM 블루프린트 (LLM Blueprint)

LLM은 안이 안 보이는 블랙박스처럼 느껴집니다. LLM 블루프린트는 질문 하나가 답이 되기까지 그 안에서 실제로 무슨 일이 벌어지는지를, 스크롤을 내리며 한 단계씩 따라가는 인터랙티브 사이트입니다. 질문을 하나 고르면 화면 중앙의 토큰 블록이 처음부터 끝까지 같은 오브젝트로 살아 있고, 스크롤에 따라 형태만 바뀝니다. 입력 → 토큰화 → 임베딩 → 위치 인코딩 → 어텐션 → FFN → 층 반복 → softmax → 샘플링 루프 → 답변 문장이 잘려 토큰이 되고, 뒤집혀 숫자가 되고, 서로를 바라보며(어텐션) 정보를 주고받고, 층을 통과해, 마지막에 답으로 조립됩니다. 위로 스크롤하면 전 과정이 역재생됩니다. · 공정마다 쉬운 설명 + DEEP DIVE(BPE, QKV, softmax, KV cache 같은 심화) · UI 한국어, 일본어, 영어 토글 (질문 프리셋도 언어별) · 청사진 스타일 디자인, 데스크톱과 모바일 대응 · 가입도 설치도 없이 링크만 열면 바로 시작 프리셋 질문 말고 내 문장으로도 볼 수 있습니다. 주소 끝에 ?custom=1을 붙이면(https://llm-blueprint.han-co.com/?custom=1) 인트로에 직접 입력 칸이 생기고, 넣은 문장이 그대로 파이프라인을 통과합니다. 한 가지는 분명히 해둡니다. 이건 교육용 개념 재구성입니다. 화면에 나오는 어텐션 가중치나 확률값은 실제 모델 내부값이 아니라 이해를 돕기 위해 그럴듯하게 만든 예시이고, 페이지에도 그 고지를 함께 띄웁니다. 정확한 척하지 않으면서 감을 잡게 하는 게 목표입니다. 그리고 이 웹페이지 자체가 공개된 코드로 만든 결과물입니다. 코드는 GitHub에 MIT로 열려 있어서, 받아서 질문 목록에 원하는 문장을 넣으면 실제 토큰화까지 거쳐 여러분만의 버전을 그대로 만들 수 있습니다. 설정은 파일 하나만 건드리면 됩니다. 저는 일본에서 신용·금융 데이터 사이언티스트로 일하며 han-co.com에 실무 지식을 연재하고 있고, 이건 LLM을 처음 들여다보는 분께 도움이 될까 해서 따로 만들었습니다. 피드백 환영합니다. 🔗 사이트: https://llm-blueprint.han-co.com 💻 코드: https://github.com/HangilKim11/llm_blueprint