코드와 실행 결과 교대Code-result Alternation

Code-result Alternation

코드와 실행 결과 교대

다른 이름Also known as · Code and result alternation

373

렌더 추가 예정CLIP COMING코드와 실행 결과 교대Code-result Alternation정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 373. 코드와 실행 결과 교대 · Code-result Alternation · power2.out

코드 일부가 강조된 뒤 결과 화면으로 전환되고 다시 해당 코드로 돌아온다.Highlighted code alternates with its execution result, then returns to the source.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

작성한 코드가 어떤 결과를 만드는지 연결한다.Connects a code statement to the behavior it produces.

언제 쓰나Use whenUSE WHEN

코드와 실행 결과 교대으로 원인과 결과를 설명할 때
대응하는 요소를 같은 화면에서 순서대로 읽게 할 때

Explain causes and results using code-result alternation.
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.3s	0.21~0.42s	첫 동작 또는 후보의 기본 단계 길이
코드 읽기	1600ms	1200~2500ms	강조 줄을 먼저 읽게 한다
이징	power2.out	none \| power2.out \| power2.inOut	주파수 변화는 선형으로 두고 위치 변화는 완만하게 연결한다.

GSAP

const tl = gsap.timeline({paused:true});
tl.set(code,{opacity:1}); tl.set(result,{opacity:0});
tl.to(line,{backgroundColor:"#335577",duration:0.3});
tl.to(code,{opacity:0,duration:0.3},1.6); tl.to(result,{opacity:1,duration:0.3},1.6);
tl.to(result,{opacity:0,duration:0.3},3.1); tl.to(code,{opacity:1,duration:0.3},3.1);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 코드와 실행 결과 교대을 적용해. 코드 일부가 강조된 뒤 결과 화면으로 전환되고 다시 해당 코드로 돌아온다. 코드와 자체 결과 그룹을 교차 표시하며 같은 의미 키를 강조한다. 기본 지속은 0.3s, 코드 읽기은 1600ms, 이징은 power2.out로 설정한다. 하나의 paused GSAP 타임라인으로 구성하고 seek할 때 좌표와 표시 상태를 다시 계산해.

Apply Code-result Alternation to <target> in <file>. Highlighted code alternates with its execution result, then returns to the source. Use a base duration of 0.3s and power2.out; use 1600ms code reading, 1200ms result reading, and 300ms crossfades and preserve semantic correspondence. Build one paused GSAP timeline and recompute geometry and visibility when seeking.

Codex

<파일>의 설명 장면에서 <대상>에 코드와 실행 결과 교대을 적용해. 기본 지속은 0.3s, 코드 읽기은 1600ms, 이징은 power2.out로 설정한다. 0초, 0.15초, 0.3초 시점을 캡처해 초기 상태, 중간 대응 관계, 첫 동작의 완료 상태를 확인해. 원본과 결과의 의미 대응 및 라벨 가독성을 검증해.

Implement Code-result Alternation in the explanatory scene of <file> for <target>, using 0.3s and power2.out with 1600ms code reading, 1200ms result reading, and 300ms crossfades. Capture at 0, 0.15, and 0.3 seconds to check the initial state, intermediate correspondence, and completion of the first motion. Verify matching source and result elements and readable labels.