원본과 변환 결과 연결Source-to-result Mapping

Source-to-result Mapping

원본과 변환 결과 연결

다른 이름Also known as · Source-to-compiled representation · 소스에서 변환 결과 공개

396

도판Fig. 396. 원본과 변환 결과 연결 · Source-to-result Mapping · power2.out

재생 속도Speed

원본 코드가 유지된 채 반대편에 변환된 코드가 나타나고 대응 부분이 연결된다.The source remains visible as transformed code appears with linked corresponding tokens.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

고수준 표현이 실행 가능한 형태로 바뀌는 관계를 이해한다.Explains how a high-level representation becomes an executable form.

언제 쓰나Use whenUSE WHEN

원본과 변환 결과 연결으로 원인과 결과를 설명할 때
대응하는 요소를 같은 화면에서 순서대로 읽게 할 때

Explain causes and results using source-to-result mapping.
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.7s	0.49~0.98s	첫 동작 또는 후보의 기본 단계 길이
대응 강조	350ms	200~500ms	같은 의미 키로 양쪽을 연결한다
이징	power2.out	none \| power2.out \| power2.inOut	주파수 변화는 선형으로 두고 위치 변화는 완만하게 연결한다.

GSAP

const tl = gsap.timeline({paused:true});
tl.fromTo(compiled,{opacity:0,x:24},{opacity:1,x:0,duration:0.7,ease:"power2.out"});
tl.to([sourceToken,resultToken],{backgroundColor:"#335577",duration:0.35},0.7);
tl.fromTo(connector,{scaleX:0},{scaleX:1,transformOrigin:"0% 50%",duration:0.35},0.7);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 원본과 변환 결과 연결을 적용해. 원본 코드가 유지된 채 반대편에 변환된 코드가 나타나고 대응 부분이 연결된다. 자체 양쪽 코드 렌더와 의미 대응표로 토큰 강조를 순차 갱신한다. 기본 지속은 0.7s, 대응 강조은 350ms, 이징은 power2.out로 설정한다. 하나의 paused GSAP 타임라인으로 구성하고 seek할 때 좌표와 표시 상태를 다시 계산해.

Apply Source-to-result Mapping to <target> in <file>. The source remains visible as transformed code appears with linked corresponding tokens. Use a base duration of 0.7s and power2.out; use a 700ms result reveal followed by a 350ms paired token highlight and preserve semantic correspondence. Build one paused GSAP timeline and recompute geometry and visibility when seeking.

Codex

<파일>의 설명 장면에서 <대상>에 원본과 변환 결과 연결을 적용해. 기본 지속은 0.7s, 대응 강조은 350ms, 이징은 power2.out로 설정한다. 0초, 0.35초, 0.7초 시점을 캡처해 초기 상태, 중간 대응 관계, 첫 동작의 완료 상태를 확인해. 원본과 결과의 의미 대응 및 라벨 가독성을 검증해.

Implement Source-to-result Mapping in the explanatory scene of <file> for <target>, using 0.7s and power2.out with a 700ms result reveal followed by a 350ms paired token highlight. Capture at 0, 0.35, and 0.7 seconds to check the initial state, intermediate correspondence, and completion of the first motion. Verify matching source and result elements and readable labels.