효과Effects / 원리 도해Explainer / Nº 374

복사본 이동 도출Copy-to-target Derivation

Copy-to-target Derivation

복사본 이동 도출

다른 이름Also known as · Copy-to-target derivation · TransformFromCopy · Matrix column to geometry link · 행렬 열과 도형 연결

374

렌더 추가 예정CLIP COMING복사본 이동 도출Copy-to-target Derivation정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 374. 복사본 이동 도출 · Copy-to-target Derivation · power2.inOut

원본은 남아 있고 복사본이 이동하거나 변형되어 결과 위치에 도착한다.The original stays visible while a duplicate moves or transforms into the result.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

결과가 어디에서 유래했는지 추적한다.Makes the origin of a derived result easy to trace.

언제 쓰나Use whenUSE WHEN

복사본 이동 도출으로 원인과 결과를 설명할 때
대응하는 요소를 같은 화면에서 순서대로 읽게 할 때

Explain causes and results using copy-to-target derivation.
Present corresponding elements in a readable sequence within the same view.

과용 주의AvoidAVOID

원본까지 지워 결과의 출처를 놓친다.
설명 라벨과 대응 색을 동작 중에 바꾸지 않는다.

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

원본 수식을 남긴 채 복사본을 결과 도형으로 옮긴다.

과용 · 나쁜 사례OVERUSE

원본까지 지워 결과의 출처를 놓친다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
기본 지속	0.9s	0.63~1.26s	첫 동작 또는 후보의 기본 단계 길이
이동 거리	200px	80~400px	복사본의 이동 거리
이징	power2.inOut	none \| power2.out \| power2.inOut	주파수 변화는 선형으로 두고 위치 변화는 완만하게 연결한다.

GSAP

const tl = gsap.timeline({paused:true});
copy = source.cloneNode(true); source.parentNode.appendChild(copy);
tl.fromTo(copy, {x:0, y:0}, {x:200, y:0, duration:0.9, ease:"power2.inOut"});
tl.to(copy, {scale:0.8, duration:0.3}, 0.6);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 복사본 이동 도출을 적용해. 원본은 남아 있고 복사본이 이동하거나 변형되어 결과 위치에 도착한다. 원본의 별도 SVG 인스턴스를 만들고 위치 및 점 좌표를 보간한다. 기본 지속은 0.9s, 이동 거리은 200px, 이징은 power2.inOut로 설정한다. 하나의 paused GSAP 타임라인으로 구성하고 seek할 때 좌표와 표시 상태를 다시 계산해.

Apply Copy-to-target Derivation to <target> in <file>. The original stays visible while a duplicate moves or transforms into the result. Use a base duration of 0.9s and power2.inOut; use duplicate travel 200px and preserve semantic correspondence. Build one paused GSAP timeline and recompute geometry and visibility when seeking.

Codex

<파일>의 설명 장면에서 <대상>에 복사본 이동 도출을 적용해. 기본 지속은 0.9s, 이동 거리은 200px, 이징은 power2.inOut로 설정한다. 0초, 0.45초, 0.9초 시점을 캡처해 초기 상태, 중간 대응 관계, 첫 동작의 완료 상태를 확인해. 원본과 결과의 의미 대응 및 라벨 가독성을 검증해.

Implement Copy-to-target Derivation in the explanatory scene of <file> for <target>, using 0.9s and power2.inOut with duplicate travel 200px. Capture at 0, 0.45, and 0.9 seconds to check the initial state, intermediate correspondence, and completion of the first motion. Verify matching source and result elements and readable labels.