← 갤러리로 돌아가기

✂️ 토큰화(Tokenization)란?

AI가 텍스트를 처리하기 전, 먼저 작은 조각(토큰)으로 잘라내는 과정을 직접 확인해보세요
💡 문장을 입력하고 "토큰화하기"를 눌러보세요. 어떻게 조각나는지 색깔 블록으로 보여드려요.

🧩 실제 토크나이저는 단어를 더 잘게 쪼개기도 해요

위 예시는 이해를 돕기 위해 간단히 글자·단어 단위로 잘랐어요. 실제 AI 토크나이저(BPE 등)는 자주 등장하는 조각을 기준으로, 하나의 단어를 여러 "서브워드"로 쪼개기도 해요. 예를 들면:
"unbelievable"
→
un
believ
able
"먹었어요"
→
먹
었
어요

💬 한 줄 정리

토큰화는 AI가 글을 이해하기 전 가장 먼저 하는 작업으로, 문장을 처리 가능한 작은 단위(토큰)로 잘라내는 과정이에요. 토큰은 단어일 수도, 글자 하나일 수도, 단어의 일부(서브워드)일 수도 있어요. 이렇게 자른 토큰 각각을 숫자 ID로 바꾼 뒤에야 비로소 AI 모델이 계산을 시작할 수 있어요. 사용량·비용도 이 토큰 개수를 기준으로 매겨져요.
⚠ 이 데모의 자르는 방식은 이해를 돕기 위한 단순화된 예시이며, 실제 모델(GPT, Claude 등)이 사용하는 토크나이저와 정확히 일치하지 않아요. 더 정밀한 추정은 "토큰 계산기" 페이지를 참고하세요.

🧾 이 페이지, 이런 프롬프트로 만들었어요

아래 프롬프트를 복사해서 Claude·ChatGPT(GPT)·Gemini 어디에든 붙여넣고 직접 시도해보세요.

"토큰화(Tokenization)" 개념을 시각적으로 보여주는 단일 HTML 페이지를 만들어줘.

- 텍스트 입력창과 "토큰화하기" 버튼
- 버튼을 누르면 입력한 문장을 간단한 규칙(한글은 글자 단위, 영어는 단어 단위, 숫자·기호는 따로)으로
  쪼개서 각 조각을 색깔이 다른 사각형 블록으로 나란히 보여줘
- 총 토큰 개수도 함께 표시
- 아래에 "unbelievable" → "un + believ + able"처럼 실제 토크나이저가
  단어를 서브워드로 더 잘게 쪼개는 예시도 고정 예시로 보여줘
- 마지막에 토큰화가 무엇인지, 왜 필요한지 한 문단으로 설명해줘
- CSS·JS 전부 인라인으로 넣은 단일 HTML 파일로, 한국어로 출력해줘
이 페이지는 AI(Claude)가 만든 예시 자료입니다 — 강의 데모용 · 토큰화 방식은 이해를 돕기 위한 단순화된 예시입니다