좌표 줌Zoom to Detail

Zoom to Detail

좌표 줌

다른 이름Also known as · 좌표 중심 확대 · 상세 줌 · Area zoom handoff · 영역 줌 연결 · zoomInTransition · zoomOutTransition · Focus zoom / Reframing · 포커스 줌·리프레임

223

도판Fig. 223. 좌표 줌 · Zoom to Detail · power2.inOut

재생 속도Speed

전체 도해의 특정 좌표를 화면 중심으로 옮기며 확대하고 세부 정보를 드러내는 움직임A motion that centers and enlarges a specific coordinate in an overview diagram to reveal detail.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

전체와 부분의 관계를 보존하며 자세한 설명으로 들어간다Moves into a detailed explanation while preserving the relationship between the whole and its parts.

언제 쓰나Use whenUSE WHEN

노드나 지도 전체에서 하나의 대상 상세를 보여줄 때
전체 구조를 먼저 보여준 뒤 선택 지점을 설명할 때

When showing details of one subject within a node diagram or map
When explaining a selected point after showing the overall structure

과용 주의AvoidAVOID

확대 전에 상세 라벨이 등장하거나 선택 좌표가 화면 밖으로 빠진다
최종 상태를 0.5초 미만으로 유지하지 않는다

분류TagsTAGS

가상 카메라Camera 강조Emphasis 설명Explain 설명 영상Explainer video 발표Presentation 스크롤덱Scroll deck 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

7개 노드 중 주홍 노드 좌표를 중심으로 2.6배 확대하고 고른다 62% 라벨을 표시한다

과용 · 나쁜 사례OVERUSE

확대 전에 상세 라벨이 등장하거나 선택 좌표가 화면 밖으로 빠진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
선택 좌표	760px 260px	도해 내부 좌표	transform-origin과 동일
확대율	2.6	2.0~3.2	전체에서 한 노드로
재중심 이동	x -176px / y 0px	대상 좌표 기준	최종 노드 x는 584px
확대 시간	1.75s	1.3~1.9s	0.3초에 출발
라벨 등장	2.05s / 0.3s	확대 완료 뒤 0.2~0.4s	홀드 시작은 2.35초

GSAP

tl.to('#map', {scale: 2.6, x: -176, y: 0, duration: 1.75, ease: 'power2.inOut'}, .3);
tl.to('#detail', {opacity: 1, duration: .3}, 2.05);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 좌표 줌 효과를 GSAP 코어로 만들어줘. 7개 노드 중 주홍 노드 좌표를 중심으로 2.6배 확대하고 고른다 62% 라벨을 표시한다 3초 클립에서 0.3초까지 시작 상태를 유지하고 다음 기본값을 적용해: 선택 좌표 760px 260px, 확대율 2.6, 재중심 이동 x -176px / y 0px, 확대 시간 1.75s, 라벨 등장 2.05s / 0.3s. 마지막 0.5초 이상은 완성 상태로 정지하고 시간 제어는 paused 타임라인 하나로 해.

Create a Zoom to Detail effect on <target> using GSAP core. Zoom to 2.6 times the scale around the vermilion node among 7 nodes and display the label "picks 62%". In a 3-second clip, hold the initial state until 0.3 seconds and apply these defaults: selected coordinate 760px 260px, scale 2.6, recentering translation x -176px / y 0px, zoom duration 1.75s, label reveal 2.05s / 0.3s. Hold the completed state for at least the final 0.5 seconds, and control timing with a single paused timeline.

Codex

<파일>의 scene 내부에 좌표 줌를 적용해. 선택 좌표는 760px 260px. 확대율는 2.6. 재중심 이동는 x -176px / y 0px. 확대 시간는 1.75s. 라벨 등장는 2.05s / 0.3s. 0.23초, 1.23초, 2.9초를 캡처해 시작 상태와 중간 변화, 7개 노드 중 주홍 노드 좌표를 중심으로 2.6배 확대하고 고른다 62% 라벨을 표시한다의 최종 상태를 확인해. 2.5초와 2.9초의 장면이 같은지, 의도한 카메라 프레임 외의 잘림과 라벨 겹침이 없는지 검증해.

Apply Zoom to Detail inside the scene in <file>. Use these settings: selected coordinate 760px 260px, scale 2.6, recentering translation x -176px / y 0px, zoom duration 1.75s, label reveal 2.05s / 0.3s. Capture at 0.23, 1.23, and 2.9 seconds to check the initial state, intermediate changes, and the final state: Zoom to 2.6 times the scale around the vermilion node among 7 nodes and display the label "picks 62%". Verify that the scenes at 2.5 and 2.9 seconds match, with no clipping beyond the intended camera frame or overlapping labels.