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

단계 요약 재구성Step Recap Reconstruction

Step Recap Reconstruction

단계 요약 재구성

다른 이름Also known as · Active step recap reconstruction

400

렌더 추가 예정CLIP COMING단계 요약 재구성Step Recap Reconstruction정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 400. 단계 요약 재구성 · Step Recap Reconstruction · power2.out

과정이 끝난 뒤 각 단계의 작은 그림이 차례로 모여 하나의 요약 흐름이 된다.Small illustrations of completed steps gather into a single recap flow.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

전체 과정과 단계 사이 관계를 다시 정리한다.Reinforces the overall process and the relationships between its steps.

언제 쓰나Use whenUSE WHEN

단계 요약 재구성으로 원인과 결과를 설명할 때
대응하는 요소를 같은 화면에서 순서대로 읽게 할 때

Explain causes and results using step recap reconstruction.
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.45s	0.32~0.63s	첫 동작 또는 후보의 기본 단계 길이
단계 간격	100ms	60~180ms	앞 단계가 도착한 뒤 연결선을 드러낸다
이징	power2.out	none \| power2.out \| power2.inOut	주파수 변화는 선형으로 두고 위치 변화는 완만하게 연결한다.

GSAP

const tl = gsap.timeline({paused:true});
steps.forEach((step,i)=>tl.to(step,{x:200+i*320,y:760,scale:0.4,duration:0.45,ease:"power2.out"},i*0.55));
links.forEach((link,i)=>tl.fromTo(link,{scaleX:0},{scaleX:1,transformOrigin:"0% 50%",duration:0.25},0.45+(i+1)*0.55));
tl.to({}, {duration:2});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 단계 요약 재구성을 적용해. 과정이 끝난 뒤 각 단계의 작은 그림이 차례로 모여 하나의 요약 흐름이 된다. 자체 단계 그룹을 요약 좌표로 이동하고 연결선을 그린다. 기본 지속은 0.45s, 단계 간격은 100ms, 이징은 power2.out로 설정한다. 하나의 paused GSAP 타임라인으로 구성하고 seek할 때 좌표와 표시 상태를 다시 계산해.

Apply Step Recap Reconstruction to <target> in <file>. Small illustrations of completed steps gather into a single recap flow. Use a base duration of 0.45s and power2.out; use 450ms step travel with 100ms gaps and a final 2000ms hold and preserve semantic correspondence. Build one paused GSAP timeline and recompute geometry and visibility when seeking.

Codex

<파일>의 설명 장면에서 <대상>에 단계 요약 재구성을 적용해. 기본 지속은 0.45s, 단계 간격은 100ms, 이징은 power2.out로 설정한다. 0초, 0.225초, 0.45초 시점을 캡처해 초기 상태, 중간 대응 관계, 첫 동작의 완료 상태를 확인해. 원본과 결과의 의미 대응 및 라벨 가독성을 검증해.

Implement Step Recap Reconstruction in the explanatory scene of <file> for <target>, using 0.45s and power2.out with 450ms step travel with 100ms gaps and a final 2000ms hold. Capture at 0, 0.225, and 0.45 seconds to check the initial state, intermediate correspondence, and completion of the first motion. Verify matching source and result elements and readable labels.