How LLMs work for Web Devs: GPT in 600 lines of Vanilla JS - Ishan Anand

영상 링크: How LLMs work for Web Devs: GPT in 600 lines of Vanilla JS - Ishan Anand
채널명: AI Engineer

웹 개발자를 위한 LLM의 원리: GPT를 600줄의 바닐라 JS로 구현하기 핵심 요약

• 영상 제목: 웹 개발자를 위한 LLM의 원리: GPT를 600줄의 바닐라 JS로 구현하기
• 주최자는 머신러닝 배경지식이 없는 웹 개발자도 LLM(대형 언어 모델)의 구조와 작동원리를 이해할 수 있도록 8시간 분량 강의를 2시간에 압축해 설명함.
• Excel 함수만으로 GPT-2 small 모델 전체를 구현한 경험을 소개하며, 올해는 자바스크립트(바닐라 JS)로 브라우저에서 완전히 동작하는 GPT-2 small 모델 실습 환경 제공.
• LLM, 특히 GPT-2의 입력부터 출력까지 핵심 과정을 토큰화, 임베딩, 언어 헤드 3단계로 나누어 상세히 설명함.
• 토큰화에는 BPE(병합 기반 인코딩) 알고리즘 이유와 실제 동작 방식, 단어/문자 기반 대안 및 한계, 토큰화가 초래하는 실질적 문제(예: strawberry 토큰이 다양해지는 현상)까지 실습 예시와 함께 다룸.
• 임베딩 값이 어떻게 의미를 표현하고 단어 간 유사도 판단(코사인 유사도 활용) 및 통계적 근거(분포 가설)에 기반해 학습되는지, 그리고 임베딩 행렬이 실제로 어떻게 매핑되는지 구체적으로 시연함.
• 포지션 임베딩이 왜 필요한지(자연어에서 순서의 중요성), 수식적/학습 기반 차이, GPT-2의 포지션 임베딩 구현 방식을 실 데이터로 설명.
• 어텐션 메커니즘과 MLP 구조(블록=레이어)의 수차례 반복 연산 방식, 수치 예시와 디버깅 예제를 통해 심층 해설.
• GPT-2와 ChatGPT의 차이는 구조적·알고리즘 변경이 아니라 학습/훈련 파이프라인에 있음: RLHF(인간 피드백 강화학습) 등 구체적 훈련 방식, 데이터의 종류 변화 등을 테이블, 추가 예시(폴더 디버깅, 어텐션 매트릭스 등)로 비교.
• 전체 변환과정(토큰화→임베딩→포지션 임베딩→어텐션/MLP 반복→언어 헤드→출력) 및 각 단계의 입력/출력 구조, 실 소스코드 흐름까지 실제 JS 코드 또는 테이블 단위로 상세히 안내.
• 마지막으로 SOA(혼합 전문가, MoE), 최신 추세(ROPE 포지션 임베딩, RLHF, reasoning 모델 등)와 현업 적용상의 유의점, 실제 프롬프트/실험 설계에 관해 Q&A로 심화 설명.

세부 요약 - 주제별 정리

LLM(대형 언어 모델)의 작동 원리는 사실 복잡한 수학이 아닌, 직관적 구조의 반복적 계산으로 설명될 수 있음

• 머신러닝, AI 배경지식이 없어도 모델 구조의 주요 연산(곱셈·덧셈 등)과 핵심 컨셉만 이해하면 LLM의 작동방식 전체를 파악할 수 있음을 강조.
• 전통적 LLM 설명이 추상적이거나 고급 수학 중심임을 지적하며, 이를 실습 가능한 자바스크립트 및 테이블로 풀어서 안내.
• 실제로 작년 Excel 함수 기반 쉬트로, 올해는 Vanilla JS 구현체를 활용해, 참가자가 직접 모델 파이프라인을 단계별로 트레이스하고 수정·디버깅할 수 있도록 유도.
• 학습의 본질은 “복잡한 마법”이 아니라, 대규모 반복과 최적화, 그리고 단순 수치 연산임을 주요 메시지로 전달.

600줄의 바닐라 자바스크립트와 CSV 파일로 GPT-2 모델 파라미터를 로컬 브라우저에서 완전히 실행 및 디버깅 가능

• 구현 환경: https://spreadsheetsareallyouneed.ai/gpt2 에서 JS 기반 GPT-2 구현체 및 지엽 CSV 파라미터(1.5GB)를 다운로드 받아 브라우저 로컬 인덱스DB에 적재.
• 모든 연산은 완벽하게 클라이언트 내에서 이루어짐(인터넷 끊겨도 동작) 및 각 단계별로 JS 코드를 수정·실행·콘솔/디버거 이용 실시간 결과 확인 가능.
• 두 가지 셀 타입: 순수 자바스크립트 셀과 테이블(수식) 셀 제공, 전자는 JS 코드 실행, 후자는 입력값 참조·결과 스프레드시트식 즉시 확인 형태.
• 실제 예제(토큰 나누기·콘솔 로그·디버거 세팅)를 통해 기존 코드/모델 이해 없이도 각 변수와 처리 과정을 눈으로 즉시 추적 가능함을 시연.

LLM의 근본적 과제는 “주어진 문맥에서 다음 토큰(단어)의 확률 분포를 예측”하는 일이 핵심임

• 모델의 입력은 일련의 텍스트(마이크는 빠르다. 그는 …), 출력은 그 맥락상 가장 확률 높은 단어(보통 “빠르게”, “신속하게” 등).
• 실제로 모델이 한 번에 만들어내는 출력은 한 토큰뿐이며, 이를 반복(생성된 토큰을 입력에 덧붙여 재호출)하여 전체 문장·문단을 생성함(이를 “오토리그레시브” 방식이라 부름).
• 실제 자바스크립트 앱에서 사용자 프롬프트를 받아 토큰화→모델 적용→다음 토큰 예측 과정을 한 번씩 실습으로 시연함.
• 근본적으로 “문제(문장 완성)를 숫자계산 문제로 바꿔 푸는 것”이 전부임을 수식적/구조적으로 설명.

토큰화: BPE(병합 기반 인코딩)로 서브워드 단위로 입력을 분해, 어휘 크기·일반화·메모리 효율 문제를 최적으로 해결함

• 단어 기반, 문자 기반 토큰화의 한계(미지의 단어/오타 대응, 어휘/시퀀스 길이 급증, 문맥 정보 부족 등)를 실제 사례와 수치(영어 단어만 17만, GPT-2는 약 5만 토큰)로 비교.
• 운영 예시: 동일한 “reinjury”와 “reindeer”는 공통적으로 “re”로 시작하나, 서로 다른 토큰 집합으로 분리됨(공백, 접두사, 단어 단위 등), 동적 병합 과정 시각적으로 시연.
• BPE 병합/학습 과정: 모든 문자 단위에서 가장 자주 동시 등장하는 ‘쌍’을 합쳐 단일 토큰으로, 빈도순 반복 압축—논문·페이퍼에서 실제 예시(‘low’, ‘lowest’, ‘widest’ 등) 따라가며 단계별 토큰·의미 변화 도식으로 제시.
• 실제 토큰화 코드에는 OpenAI 공개 소스에서 가져온 정규식 활용, 토크나이저가 어떻게 반복적으로 최적의 쌍을 병합해 결과 토큰을 얻는지 JS 코드/테이블로 디버깅하며 시연.
• strawberry 예시 등, 대소문자·공백·따옴표 등 “토큰화 패턴”별로 실제로 서로 다른 토큰 시퀀스가 만들어지는 실 연구 사례(Riley Goodside 인용)도 설명.
• 토큰화 논의 확장을 위해 비전(이미지) Transformer: 이미지 조각(Patch), 또는 움직임 궤적 등 비텍스트 입력도 토큰화 가능한 범위임을 추가 언급.

임베딩: 하나의 토큰(문자열)을 768차원의 실수 벡터로 바꿔, 의미·유사성·통계적 관계를 담는 공간으로 변환함

• 각 토큰(단어)마다 768차원의 임베딩이 정해짐(GPT-2 small 기준), 실제 OpenAI가 제공한 임베딩 행렬(CSV)에서 토큰ID별 임베딩 추출 시연.
• 임베딩은 단순 ID(주소/위치 정보)가 아닌, 단어의 “의미”와 “문맥상 유사도”를 반영하는 실수값 벡터임을, 부동산(주소 vs. 실내 정보) 비유로 직관화.
• 워드투벡 예시: 벡터 연산으로 “king - man + woman = queen” 등 아날로지(유추) 관계가 구체적 수치조작만으로도 드러남.
• 임베딩 각 차원의 실제 “의미”는 인간이 해석 불가(해당 차원=성별·권위 등 구분 불분명)하지만, 벡터 간 코사인 각도(코사인 유사도)로 유사용어 판별 가능.
• 통계적 맥락 동시 등장 빈도(분포 가설: “그 단어가 함께 등장하는 단어를 보면 의미를 알 수 있다”)에 기반해, 실제로는 대형 “동시 등장 행렬”을 저차원으로 압축한 것이 임베딩 행렬임을 표·벤다이어그램으로 해설.
• 실제 코드에서는 모델이 제공하는 임베딩 테이블(50,257개 토큰 x 768차원 행렬)을 배치해 하나의 토큰ID가 행 인덱스, 열은 벡터값.
• 임베딩이 텍스트 외에 이미지-텍스트(Clip 등) 등 멀티모달로 확장될 수 있음을 사례로 추가.

포지션 임베딩은 단어의 “순서” 정보를 부가해, 문법 파괴 없이 자연어 시퀀스를 올바르게 인코딩하게 함

• “the dog chases the cat” vs. “the cat chases the dog” 등, 단순 임베딩+수치 연산만으로는 순서 정보가 훼손된다는 문제 지적.
• 해법: 임베딩 값에 별도의 포지션 오프셋 벡터(어디에 나타났는지)를 더하는 방식(수식 설명, 예시 그림 등).
• 원래 트랜스포머(Attention is all you need)는 sine·cosine 함수 기반 위치 정보 부여(0~-1~1 내 순환), GPT-2는 위치 벡터 자체를 학습 파라미터로 두어 백프로파게이션으로 획득.
• 실제 OpenAI의 포지션 임베딩 테이블(1024행 x 768열, 최대 시퀀스 길이)의 행별 오프셋을 토큰별로 단순 요소단위 덧셈 수행 JS 코드 예제.
• 최근 LLM(RoPE 등)은 포지션 임베딩 방식을 새롭게 변경, 현재 GPT-2와 최신 모델의 주요 차이점임을 시사.

어텐션: 각 토큰 간 “맥락적 대화”를 통해 단어의 의미를 문장 내 위치, 용법에 따라 동적으로 업데이트함

• 어텐션 블록에서는 “다중 헤드(Head)“가 각 토큰끼리 서로 연관도를 계산, 자기 자신과 이전 토큰만을 바라볼 수 있도록(upper triangle masking) 구성.
• 시각화: 어텐션 매트릭스(각 토큰이 상대 토큰에 얼마나 집중하는지)에 데이터 예시, 실제 1개 헤드 1개 층의 어텐션 분포/행렬 결과 출력으로 설명.
• 질의(Query)/키(Key)/값(Value) 구조를 중력 비유(의미가 비슷할수록 끌림)로 풀어서, moves가 rabbits 문맥에선 “빠르다”, penguins 문맥에선 “느리다” 식 단어 의미 재조정 과정을 직관 모델로 설명.
• 각 헤드, 각 블록별로 서로 다른 연산/가중치 적용(코드에서 히든레이어 H0~H11 구분 및 적용 방법까지 구현 코드 레벨에서 시연).

MLP(멀티레이어 퍼셉트론): 입력 임베딩을 비선형 변환해, 다음 토큰의 임베딩을 점진적으로 예측·정제함

• 인간 뇌의 뉴런-엑손 구조(임계치/ALL-OR-NONE) 비유로, 파라미터(가중치/바이어스)와 활성화 함수(ReLU 등) 수식적 모델 설명.
• 하나의 블록 내부엔 실제로 1개 히든 레이어(768→3072→768) MLP 구조(GPT-2 small), 전-후처리 단계별로 행렬곱(Matrix multiplication)과 바이어스 덧셈이 반복됨.
• 퍼셉트론의 “보편 근사 능력”(Universal Approximation Theorem): 충분한 뉴런이면 어떤 함수든 임의 정확도로 근사 가능함을 시각 예시(포물선 fitting)로 풀이.
• Back-Propagation(역전파) 알고리즘으로 오차(예측-정답)별로 파라미터를 기울기 하강 방식(그래디언트 디센트)으로 반복 최적화—하이킹(등산) 비유로 구성.
• 백프로파게이션은 MLP 가중치 외에도 토큰 임베딩·포지션 임베딩·어텐션 관련 파라미터·레이어 정규화 등 모델의 모든 파라미터에 동시에 적용.

블록(레이어) 반복: 어텐션 및 MLP 구조가 동일 연산(다른 파라미터로) 12번 이상의 계단식 처리로 반복 적용됨

• 모델 전체 파이프라인은 “블록 단위”로 N회(12회, 상태에 따라 더 많거나 적을 수 있음) 반영, 각 블록 내부 연산은 동일하나 파라미터는 독립적으로 다름.
• 자바스크립트 실습 환경에서는 각 블록별로 가중치·바이어스 파일(ID별 선택), DOM 오브젝트/코드상 히든 블록 및 히든 레이어 인덱스(예: H0, H1…) 등 구조를 표준화 구현.

언어 헤드(Language Head)는 최종 임베딩을 실제 토큰/단어로 복원하며, 확률화(softmax) 및 샘플링 방식을 통해 다양한 생성 스타일을 제어함

• 최종 블록의 출력(예측 임베딩, 768차원)은 전체 토큰 임베딩 행렬과 내적해 5만여 개 토큰별 유사도(로짓) 점수로 변환.
• 로그잇(logit) 벡터를 소프트맥스 변환해 확률분포로 전환, 실제 샘플링은 greedy(최대 확률), top-k/nucleus(확률 누적합/임계치 기반) 등 다양한 전략 존재.
• 동일 프롬프트 테스트(Mike is quick, he moves)에 대해 Huggingface Transformers 원본/자바스크립트 구현체의 결과 일치 시연.

GPT-2와 ChatGPT(현대 LLM)는 핵심 구조는 유사하나 “훈련 데이터 및 학습 방식(RLHF 등)“의 근본적 변화가 결정적 발전을 이끌었음

• 기본 GPT-2는 인터넷 텍스트 기반의 next token 예측만 학습(도메인 특화·도우미 역할 없음), 실제로 “first name” 입력 시 웹 폼 자동채움 스타일 답변 등 도메인 특성이 남아있음.
• ChatGPT-Style 모델은 ① 대규모 사전학습(인터넷 텍스트) ② ‘도우미’ 역할 데이터(수만~수십만 건 프롬프트→답변 예제: alpaca 등) ③ 보상/선호도 설정을 위한 인간 피드백(선호/비선호 쌍) ④ 이 피드백을 통한 RLHF(특별한 평가 모델을 통한 강화학습)로 진행.
• RL(강화학습)은 “텍스트 경로 따라가며 점수 최대화” 게임 비유, 실제 ‘좋은 답변’, ‘나쁜 답변’ 쌍(예: pumpkin pie recipe, 알코올 상담 등) 데이터로 평가모델 생성 → 이 평가모델로 다시 파인튜닝하여 인간 선호 행동을 유도.

임베딩과 토큰화 원리는 추천시스템(협업 필터링, 장르분류) 등 다양한 도메인에서도 응용되며, 단어 다음 ‘추천’까지 미리 내재화된 시스템임

• 실제 임베딩은 단어 사이의 공동 등장 확률을 예측·요약, music recommender system의 장르 공간 분리 예시처럼 “텍스트 추천”의 역할도 함.
• 단어 직후 등장 확률뿐 아니라, 문맥 상 등장 가능성, 여러 층에서 복합적 추천 조합을 반복 평가·강화(12층 반복)하며, 가장 가능성 높은 다음단어 추천.

혼합전문가(Mixture of Expert), ROPE 포지션 임베딩, 최신 Reasoning 모델 등 최근 트렌드는 “계산 효율” 및 “특화 전문가 활용”으로 나아가는 중임

• Mixture of Expert 방법론은 MLP 등 일부 모듈을 여러 ‘전문가’로 나누고, 입력/토큰 유형마다 일부 전문가만 계산에 동원—파라미터 수 대거 확장하면서도 실제 연산은 제한하는 효율화 트릭임.
• 최신 사전학습/컨텍스트 윈도우 확대(ROPE 등) 및 reasoning 모델(자체 반복적 MLP 실행) 등도 현장 파급력 높은 트렌드로 소개하며, 실제 훈련·응용시 각 변화의 실무상 함의까지 Q&A에서 심화해설.

실사용 및 프롬프트 최적화는 실험적 접근(과학적 방법론)이 필수, 모델 구조·파라미터가 고정적 성능한계를 가지므로 프롬프트 구조화/오류정정/실험평가가 최우선임

• 실제 음성입력, 자유로운 프롬프트 설계 등의 경우 “분량-정확성-어색한 반복” 중 무엇을 우선시할지, 입력 오류가 얼마나 결과에 영향 주는지, 최신 모델의 추론능력이 얼마나 강력한지 등은 반드시 “직접 실험해봐야 안다”는 점을 연구 및 논문(프롬프트 리포트, 몰릭 등) 자료 기반으로 강조.
• 모델 구조가 고정된 연산량, 제한된 컨텍스트 내에서 동작하므로, 노이즈가 많은 프롬프트는 일부 정제, 필수정보 누락 없이 구성, Eval(벤치마킹) 자동화 시스템 구축 권장.

전체 과정 종합: 토큰화→임베딩→포지션 임베딩→어텐션/MLP 반복→언어 헤드→출력까지, 각각의 데이터 흐름, 파라미터 구조, 코드 레벨 연산 내역까지 구체적으로 따라가 볼 수 있음

• 각 단계의 입력/출력 데이터는 자바스크립트 환경에서 모두 명시적으로 표시·분석 가능.
• 실제 구현 기반, 불투명한 “마법”이 아닌, 투명한 연산 및 실습 가능 프로세스로 LLM의 전체적 구조와 작동원리를 설명함.
• 발표 끝에 설문·메일링리스트 참여, 강의 자료 제공 안내, 상세 질문에 대한 추가 응답 및 기타 참고자료/채널 안내로 마무리.