단계별 설명 모션Segmented Explanation

Segmented Explanation

단계별 설명 모션

다른 이름Also known as · Segmented explanation with stable holds · 분할 설명과 안정된 휴지

407

렌더 추가 예정CLIP COMING단계별 설명 모션Segmented Explanation정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 407. 단계별 설명 모션 · Segmented Explanation · power2.inOut

긴 과정을 짧은 동작 묶음으로 나누고 묶음 끝마다 화면을 잠시 유지하는 구성A long process is split into short bursts of motion, each followed by a still hold.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

한 번에 처리할 정보를 줄인다. 휴지에서 이해가 자리 잡는다Reduces information at once. Understanding settles during the holds.

언제 쓰나Use whenUSE WHEN

4단계 이상의 긴 과정을 설명하는 영상
스크롤 덱에서 단계마다 멈추는 설명

When explaining a process of 4 or more steps in video
When a scroll deck should stop at each step

과용 주의AvoidAVOID

묶음당 동작 4초 이하
휴지 0.8~1.5초
한 묶음에 새 개념 1개

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

동작 3초 다음 1.2초 정지를 4번 반복하고, 정지 동안 다음 단계 제목이 작게 예고된다

과용 · 나쁜 사례OVERUSE

휴지 없이 15초 동안 계속 움직여 시청자가 단계를 놓친다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
동작 묶음	3.0s	2~4s	한 단계의 움직임
휴지	1.2s	0.8~1.5s	화면 정지
단계 수	4	3~6	한 영상 기준
이징	power2.inOut	power1~power3.inOut	단계 안 동작

GSAP

const seg = 3.0, hold = 1.2;
['.step1', '.step2', '.step3', '.step4'].forEach((s, i) => {
  tl.from(s, { opacity: 0, y: 30, duration: 0.8, ease: 'power2.out' }, i * (seg + hold));
  tl.to(s + ' .hi', { scaleX: 1, duration: 1.2, ease: 'power2.inOut' }, i * (seg + hold) + 1.0);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 설명을 4단계로 나눠줘. 각 단계는 동작 3.0초 뒤 1.2초 정지를 두고, 동작 안에서 제목이 opacity 0, y +30px에서 0.8초 power2.out으로 나타나며 1.0초 지점에 강조선이 1.2초 동안 그려져. 단계 시작은 i*4.2초. 라벨 step1..step4를 붙이고 paused 타임라인으로 만들어.

Split the <target> explanation into 4 steps with GSAP. Each step has 3.0s of motion then a 1.2s still hold; inside the motion the title animates from opacity 0, y +30px over 0.8s with power2.out and an emphasis line draws over 1.2s starting at 1.0s. Step starts at i*4.2s. Add labels step1..step4 on a paused timeline.

Codex

<파일>의 <대상>에 segmented-explanation을 적용해. seg 3.0, hold 1.2로 i*(seg+hold) 위치에 단계를 배치하고 addLabel('step'+i). 1.5초·3.6초(휴지)·5.7초를 캡처해 휴지 구간(3.0~4.2초) 동안 화면이 정지해 있는지 프레임 차분으로 확인해.

Apply segmented-explanation to <target> in <file>. Place steps at i*(seg+hold) with seg 3.0, hold 1.2, and addLabel('step'+i). Capture at 1.5s, 3.6s (hold) and 5.7s, and use a frame diff to confirm the screen is still during the hold from 3.0s to 4.2s.