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

행위자 과정 순환Process Loop

Process Loop

행위자 과정 순환

다른 이름Also known as · Process loop with actors

391

렌더 추가 예정CLIP COMING행위자 과정 순환Process Loop정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 391. 행위자 과정 순환 · Process Loop · power2.inOut

작은 캐릭터나 아이콘이 단계별 위치로 이동하며 처리 과정이 순환한다.An actor or icon visits successive stages in a repeating process.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

과정에서 각 역할과 순서를 기억한다.Clarifies roles and order within a cycle.

언제 쓰나Use whenUSE WHEN

행위자 과정 순환으로 원인과 결과를 설명할 때
대응하는 요소를 같은 화면에서 순서대로 읽게 할 때

Explain causes and results using process loop.
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
기본 지속	4s	2.80~5.60s	첫 동작 또는 후보의 기본 단계 길이
단계 휴지	400ms	250~600ms	각 도착 위치에서 역할을 읽는다
이징	power2.inOut	none \| power2.out \| power2.inOut	주파수 변화는 선형으로 두고 위치 변화는 완만하게 연결한다.

GSAP

const tl = gsap.timeline({paused:true});
const stops=[{x:0,y:0},{x:240,y:0},{x:240,y:180},{x:0,y:180},{x:0,y:0}];
stops.slice(1).forEach((p,i)=>{
  tl.to(actor,{...p,duration:0.6,ease:"power2.inOut"},i);
  tl.set(stages,{opacity:0.35},i); tl.set(stages[i],{opacity:1},i);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 행위자 과정 순환을 적용해. 작은 캐릭터나 아이콘이 단계별 위치로 이동하며 처리 과정이 순환한다. SVG 경로 이동과 단계 강조를 공통 타임라인에 배치한다. 기본 지속은 4s, 단계 휴지은 400ms, 이징은 power2.inOut로 설정한다. 하나의 paused GSAP 타임라인으로 구성하고 seek할 때 좌표와 표시 상태를 다시 계산해.

Apply Process Loop to <target> in <file>. An actor or icon visits successive stages in a repeating process. Use a base duration of 4s and power2.inOut; use four stages with 600ms travel and 400ms holds and preserve semantic correspondence. Build one paused GSAP timeline and recompute geometry and visibility when seeking.

Codex

<파일>의 설명 장면에서 <대상>에 행위자 과정 순환을 적용해. 기본 지속은 4s, 단계 휴지은 400ms, 이징은 power2.inOut로 설정한다. 0초, 2초, 4초 시점을 캡처해 초기 상태, 중간 대응 관계, 첫 동작의 완료 상태를 확인해. 원본과 결과의 의미 대응 및 라벨 가독성을 검증해.

Implement Process Loop in the explanatory scene of <file> for <target>, using 4s and power2.inOut with four stages with 600ms travel and 400ms holds. Capture at 0, 2, and 4 seconds to check the initial state, intermediate correspondence, and completion of the first motion. Verify matching source and result elements and readable labels.