임베딩 공간Embedding Space

Embedding Space

임베딩 공간

다른 이름Also known as · 의미 공간 · Semantic Space · Embedding projection / Point movement · 임베딩 점 이동

363

도판Fig. 363. 임베딩 공간 · Embedding Space · power3.inOut

재생 속도Speed

단어가 의미에 따른 좌표로 이동해 가까운 뜻끼리 모이는 움직임An animation that moves words to semantic coordinates so words with similar meanings cluster together.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

벡터 공간에서 의미의 유사성이 거리로 표현된다Shows how distance represents semantic similarity in a vector space.

언제 쓰나Use whenUSE WHEN

임베딩을 처음 소개할 때
검색의 의미 유사성을 설명할 때

When introducing embeddings
When explaining semantic similarity in search

과용 주의AvoidAVOID

설명용 좌표를 실제 임베딩 수치로 제시하지 않는다
무리 안에서 단어를 겹치지 않는다

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 발표Presentation 스크롤덱Scroll deck 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

과일 세 단어와 탈것 세 단어가 두 무리로 모인다

과용 · 나쁜 사례OVERUSE

단어를 임의 좌표에 흩어 군집 관계가 보이지 않는다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
단어 수	6	4~10	두 의미 무리
이동 지속	1.05s	0.8~1.3s	군집으로 도착
출발 시간차	0.09s	0.05~0.12s	경로를 구분
강조 원	288×238px	220~340px	한 군집만 강조

GSAP

const tl = Motion.timeline();
const words = document.querySelectorAll('.word');
const offsets = [[130,170],[405,195],[-60,275],[225,285],[-320,210],[-120,140]];
words.forEach((el,i)=>tl.to(el,{x:offsets[i][0],y:offsets[i][1],duration:1.05,ease:'power3.inOut'},.3+i*.09));
tl.to('.ring',{opacity:1,duration:.4},1.85);
tl.to('.group',{opacity:1,duration:.3},1.9);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>의 단어 6개를 헤어라인 2D 축 위 두 군집으로 이동시킨다. 0.3초부터 0.09초 간격으로 1.05초 power3.inOut 이동을 쓰고 과일은 왼쪽, 탈것은 오른쪽에 둔다. 1.85초에 왼쪽 군집만 288×238px 주홍 원으로 둘러싼다. 3초 타임라인 하나로 만들고 마지막 0.6초는 정지한다.

Move 6 words in <target> into two clusters on hairline 2D axes. Starting at 0.3 seconds, move them over 1.05 seconds with power3.inOut at 0.09-second intervals. Place fruits on the left and vehicles on the right. At 1.85 seconds, surround only the left cluster with a vermilion 288×238px circle. Use a single 3-second timeline and hold still for the final 0.6 seconds.

Codex

<파일>의 <대상>에 <대상>의 단어 6개를 헤어라인 2D 축 위 두 군집으로 이동시킨다. 0.3초부터 0.09초 간격으로 1.05초 power3.inOut 이동을 쓰고 과일은 왼쪽, 탈것은 오른쪽에 둔다. 1.85초에 왼쪽 군집만 288×238px 주홍 원으로 둘러싼다. 0.24초, 1.25초, 2.9초를 캡처해 단어의 겹침 없이 두 군집과 강조 원을 확인한다. 시간은 GSAP 타임라인만 사용한다.

In <target> in <file>, Move 6 words in <target> into two clusters on hairline 2D axes. Starting at 0.3 seconds, move them over 1.05 seconds with power3.inOut at 0.09-second intervals. Place fruits on the left and vehicles on the right. At 1.85 seconds, surround only the left cluster with a vermilion 288×238px circle. Capture at 0.24, 1.25, and 2.9 seconds to check the two clusters without overlapping words and the highlight circle. Use only a GSAP timeline for timing.

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP

3초 paused GSAP 타임라인 하나로 구성하고 Motion.ready()로 seek를 노출한다. 단어별 좌표를 미리 정하고 x/y 이동이 끝나면 한 군집의 원을 공개한다.

ReelForgeBRIEF TO VIDEO

3초 장면 안의 요소를 분리하고 transform과 opacity 트랙으로 같은 순서를 구현한다. 단어별 좌표를 미리 정하고 x/y 이동이 끝나면 한 군집의 원을 공개한다.

Scrolline DeckSCROLL SCRUB

0.3~2.4초 동작을 스크롤 진행률 10~80%로 매핑하고 끝 20%를 완성 상태로 둔다. 단어별 좌표를 미리 정하고 x/y 이동이 끝나면 한 군집의 원을 공개한다.

잘 맞는 조합Pairs well with

Nº 243점 재배치Dot RegroupDot Regroup

Nº 367토큰 쪼개기Token SplitToken Split

Nº 240주석 등장Annotation CalloutAnnotation Callout

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo

Google Machine Learning Crash Course, Embeddings개념 참고
motion dictionary 3-type-data-ui.md#29. 임베딩 점 이동 · Embedding projection / Point movementown