임베딩이란? — 벡터 지도

💬 한 줄 정리

임베딩(embedding)은 단어·문장의 의미를 숫자로 이루어진 벡터(좌표)로 바꾸는 방법이에요. 이렇게 바꾸면 "강아지"와 "고양이"처럼 뜻이 비슷한 단어는 벡터 공간에서 가까운 위치에 놓이고, "강아지"와 "슬픔"처럼 관련 없는 단어는 멀리 떨어지게 돼요. AI는 이 좌표 간의 거리를 계산해서 "이 단어들이 서로 얼마나 비슷한 의미인지"를 판단해요 — 검색, 추천, RAG(문서 검색) 모두 이 원리를 활용해요.

⚠ 실제 임베딩은 수백~수천 개의 차원을 가진 벡터라 사람이 눈으로 볼 수 없어요. 이 지도는 이해를 돕기 위해 2차원으로 단순화한 예시입니다 (좌표는 실제 모델 출력이 아니라 설명용으로 임의 배치했어요).

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

아래 프롬프트를 복사해서 Claude·ChatGPT(GPT)·Gemini 어디에든 붙여넣고 직접 시도해보세요. 참고로 이건 예시 없이 지시만 담은 제로샷(zero-shot) 프롬프트예요 — 원하는 결과물의 예시를 1개 넣으면 원샷(one-shot), 여러 개 넣으면 퓨샷(few-shot) 프롬프팅이 되는데, 예시를 더할수록 결과가 원하는 스타일에 더 가까워지는 경우가 많아요.

"임베딩(단어 벡터)" 개념을 시각적으로 설명하는 단일 HTML 페이지를 만들어줘.

- 동물(강아지·고양이·호랑이·사자), 음식(피자·라면·초밥·김치),
  감정(기쁨·행복·슬픔·분노), 직업(의사·교사·개발자·요리사) 4개 카테고리,
  총 16개 단어를 2D 지도 위에 카테고리별로 뭉쳐서 배치 (카테고리마다 다른 색)
- 각 단어를 클릭하면 해당 단어와 같은 카테고리(=의미가 가까운) 단어들이
  강조되고, 그 단어들과 선으로 연결되게 해줘
- 아래에 캡션으로 "이 단어와 가장 가까운 단어들"을 텍스트로도 보여줘
- 마지막에 임베딩이 무엇인지, 왜 필요한지 한 문단으로 쉽게 설명하고,
  "실제로는 훨씬 고차원"이라는 주의 문구도 추가해줘
- CSS·JS 전부 인라인으로 넣은 단일 HTML 파일로, 한국어로 출력해줘

🗺 임베딩이란? — 단어 벡터 지도

💬 한 줄 정리

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