안녕하세요를 모델에 넣으면 어떤 조각으로 나뉠까요. 아래 실습에서 한글과 영문을 직접 입력하면 토큰 조각, 토큰 ID, 입력 순서를 확인할 수 있어요. 원하는 토큰을 누르고 벡터 계산을 실행하면 그 위치의 384개 숫자도 볼 수 있습니다.
토큰 ID는 어휘 목록에서 조각을 구별하는 정수이고, 벡터는 모델이 계산하는 숫자 배열입니다. 두 값을 구분하면 문장이 모델 입력으로 바뀌는 과정을 이해하기 편해요. 이 글은 토큰화와 임베딩을 처음 접하는 독자를 위한 브라우저 실습입니다.
이 글의 목차
문장을 직접 입력하기
토크나이저 사용하기를 누르면 입력창이 열리고 기본 문장을 분석합니다. 문장을 바꾼 뒤 토큰화하기를 눌러 보세요. 한글·영문·혼합 예제 버튼으로도 입력을 바꿀 수 있습니다.
한글·영문을 입력하고 토큰 조각과 ID를 확인해 보세요.
입력문은 이 브라우저 안에서 처리합니다. 첫 실행에는 토크나이저 파일 약 17MB를 내려받습니다. API 키나 로그인이 필요하지 않습니다.
사용 모델: paraphrase-multilingual-MiniLM-L12-v2 · 이 모델의 어휘와 분리 규칙을 사용합니다.
토큰을 누르면 해당 위치의 ID와 벡터를 볼 수 있어요. ▁는 SentencePiece의 단어 경계 표시이며 문장 앞에도 붙을 수 있습니다. <s>와 </s>는 입력의 시작과 끝을 나타내는 특수 토큰입니다.
모델에 전달하는 토큰 ID 배열
처음 누르면 약 118MB의 모델과 약 22MB의 실행 파일을 이 사이트에서 내려받습니다. 모바일에서는 데이터 사용량과 메모리를 확인해 주세요. 캐시가 유지되면 다음 실행에 재사용할 수 있습니다.
모델의 마지막 층에서 계산한 위치별 문맥 벡터입니다. 토큰 ID 및 입력 임베딩 테이블의 값과는 다릅니다. 아래 그래프는 앞 32개 성분을 보여 줍니다.
버튼을 누르면 도구를 엽니다. 자바스크립트와 WebAssembly를 지원하는 브라우저가 필요합니다.
입력문은 방문자의 브라우저에서 처리하며 분석을 위해 서버나 외부 AI API로 보내지 않습니다. 처음에는 토크나이저 파일 약 17MB를 내려받습니다. 실제 벡터 계산하기는 약 118MB의 모델과 약 22MB의 실행 파일을 추가로 사용하므로 모바일 데이터 환경에서는 다운로드 크기를 먼저 확인해 주세요.
토큰 조각과 ID 읽기
토크나이저는 문장을 모델의 어휘에 맞는 작은 단위로 나눕니다. 한 단어가 하나의 토큰일 수도 있고 여러 조각으로 나뉠 수도 있어요. 한글 한 글자나 영어 한 단어가 언제나 토큰 하나와 같지는 않습니다. 분리 규칙과 어휘에 따라 결과가 달라집니다. Hugging Face의 토큰화 알고리즘 설명에서 방식별 차이를 볼 수 있습니다.
| 결과 항목 | 의미 | 확인할 점 |
|---|---|---|
| 토큰 조각 | 어휘 목록에 등록된 문자열 | 원문을 그대로 잘라 놓은 표시와 다를 수 있습니다. |
| 토큰 ID | 각 조각을 구별하는 정수 | ID가 가깝다고 뜻이 비슷한 것은 아닙니다. |
| 입력 위치 | 모델에 전달하는 배열의 순서 | 같은 ID도 여러 위치에 나타날 수 있습니다. |
| 특수 토큰 | 시작·끝 등 입력 구조를 나타내는 조각 | 본문의 텍스트 토큰과 나누어 개수를 표시합니다. |
이 도구는 paraphrase-multilingual-MiniLM-L12-v2의 토크나이저를 사용합니다. ▁는 SentencePiece의 단어 경계 표시이며 문장 앞에도 나타날 수 있어요. <s>와 </s>는 시작과 끝을 나타내는 특수 토큰입니다. 정규화나 공백 처리 때문에 조각을 단순히 이어 붙인 결과가 원문과 정확히 같지 않을 수 있습니다.
이 환경에서 안녕하세요는 ▁안녕하세요 한 조각이며 ID는 107687입니다. 시작·끝 토큰까지 포함한 입력 배열은 [0, 107687, 2]예요. Hello, world!는 ▁Hello, ,, ▁world, !의 네 텍스트 토큰으로 나뉘며 입력 배열은 [0, 35378, 4, 8999, 38, 2]입니다. 두 결과는 2026년 10월 22일 이 글의 브라우저 도구에서 확인했습니다.
표시된 ID와 개수는 이 모델을 기준으로 읽습니다. 다른 모델의 토크나이저를 사용하면 같은 문장의 조각과 ID가 달라질 수 있으므로, 다른 LLM의 입력 길이를 계산할 때 이 결과를 그대로 적용하지 않습니다.
벡터는 토큰화 다음에 계산됩니다
처리 순서는 문장 → 토큰 조각 → 토큰 ID → 모델 계산 → 위치별 문맥 벡터입니다. 토큰화만 실행하면 ID까지 얻습니다. 화면의 벡터 버튼은 학습된 모델을 실제로 실행해 각 입력 위치의 숫자 배열을 구합니다.
모델 내부에는 토큰 ID에 대응하는 학습된 입력 임베딩 테이블이 있습니다. 이 실습에서 보여 주는 값은 그 테이블 자체가 아니라, 주변 토큰과 위치를 반영한 마지막 층의 문맥 벡터입니다. 출력 이름은 last_hidden_state이며 각 위치에 384개 성분이 있습니다. 문장 전체를 평균 내어 만든 문장 임베딩과도 구분합니다. 모델의 문맥 벡터와 평균 풀링 방식은 원본 모델 설명에서 확인할 수 있습니다.
토큰을 선택하면 해당 위치의 전체 값을 읽을 수 있고, 그래프에는 앞 32개 성분이 표시됩니다. 그래프의 세로 범위는 선택한 벡터에 맞춰 바뀌므로 막대 높이만으로 다른 토큰과 절댓값을 비교하지 않습니다. 화면 값은 소수점 6자리로 표시하며 전체 결과 JSON 저장에는 모델 정보, 원문, 토큰 순서와 전체 벡터 값을 함께 담습니다.
계산에는 q8 양자화 ONNX 모델을 사용합니다. 저장된 가중치의 정밀도를 줄인 모델이므로 원본 float32 모델과 수치가 조금 다를 수 있습니다. 벡터의 개별 숫자를 ‘긍정 점수’나 ‘인사 점수’처럼 특정 의미에 바로 대응시키지는 않습니다.
같은 토큰을 다른 문장에서 비교하기
먼저 안녕하세요를 입력하고 벡터를 계산해 JSON으로 저장합니다. 이어서 안녕하세요. 반갑습니다.를 분석해 같은 조각과 ID가 있는지 확인해 보세요. 동일한 ID가 있더라도 문장과 위치가 달라지면 문맥 벡터는 달라질 수 있습니다.
이 비교에서는 조각의 이름과 ID, 입력 위치를 함께 봅니다. 두 문장에 같은 조각이 없으면 서로 다른 토큰을 비교하고 있는 셈이에요. 문장 전체의 의미 유사도를 비교하려면 별도로 문장 임베딩을 구성해야 하며, 이 도구는 위치별 벡터를 관찰하는 데 사용합니다.
실행 범위와 사용 환경
- 입력은 최대 500자(UTF-16 기준)입니다. 일부 이모지는 한 글자로 보여도 두 단위로 계산됩니다.
- 토큰화 결과는 입력 전체를 표시합니다. 벡터 계산은 모델의 문장 실습 범위에 맞춰 특수 토큰을 포함한 128토큰 이하로 제한합니다. 초과한 문장을 몰래 잘라 계산하지 않습니다.
- Web Worker와 WebAssembly를 지원하는 브라우저가 필요합니다. 계산 속도와 실행 가능 여부는 방문자 기기의 메모리와 브라우저 환경에 따라 달라집니다.
- 프로그램과 모델 파일은 이 사이트에서 제공합니다. 브라우저 캐시가 유지되면 재사용할 수 있으며, 비공개 모드나 저장 공간 정리 뒤에는 다시 내려받을 수 있습니다.
이 실습은 Transformers.js 3.8.1과 Xenova 변환 모델의 고정 리비전 2c4055b를 기준으로 구성했습니다. 브라우저 모델 실행은 Transformers.js의 로컬 파일 설정, 토큰 ID 처리는 토크나이저 API 문서를 참고했습니다. 적용 기준일은 2026년 10월 22일입니다.
