페이지 턴Page Turn

Page Turn

페이지 턴

다른 이름Also known as · Book page turn · 책 페이지 넘기기 · bookFlip() · Page curl · 페이지 말림 · CC Page Turn

138

도판Fig. 138. 페이지 턴 · Page Turn · power2.inOut

재생 속도Speed

페이지 한쪽이나 모서리가 접히고 말려 올라가 뒷면과 그림자를 드러내며 다음 화면으로 넘어간다A page corner curls up, exposing the back and a soft shadow, and turns to the next screen.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

책장을 넘기듯 다음 이야기로 이어진다는 감각. 순서와 진행을 부드럽게 알린다Evokes turning to the next page of a story. Signals order and progress gently.

언제 쓰나Use whenUSE WHEN

튜토리얼 단계나 이야기 장을 책 넘기듯 나눌 때
전자책, 매뉴얼, 앨범처럼 종이 매체를 소재로 한 영상에서 화면을 바꿀 때

When splitting tutorial steps or story chapters like turning pages
When the subject is paper media such as ebooks, manuals, or albums

과용 주의AvoidAVOID

말림 반경은 화면 폭의 10~20% 안에 둔다
한 영상에서 두 번 넘게 반복하지 않는다(장식으로 읽힘)

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

오른쪽 모서리가 말려 올라가며 0.9초 동안 뒷면이 보이고, 말림 반경은 화면 폭의 16%, 그림자 opacity 0.25가 말림을 따라간다

과용 · 나쁜 사례OVERUSE

말림이 너무 작아 잘 안 보이거나, 뒷면과 그림자 없이 앞면만 접혀 평면 회전으로 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	900ms	700~1200ms	power2.inOut
말림 반경	화면 폭 16%	10~20%	클수록 종이가 두꺼워 보임
그림자 opacity	0.25	0.15~0.35	말림 뒤쪽에 드리움
방향	오른쪽에서 왼쪽	좌우 또는 상하	읽는 방향과 맞춘다
뒷면 밝기	0.9	0.8~1.0	뒷면은 약간 어둡게

GSAP

// 2D 근사: 앞면 클립을 접는 각도로 진행
const t = { p: 0 };
tl.to(t, { p: 1, duration: 0.9, ease: 'power2.inOut',
  onUpdate: () => drawCurl(t.p) }, 0); // 반경 0.16*1920, 그림자 0.25
tl.set('.prev', { autoAlpha: 0 }, 0.9);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 장면 끝에 페이지 턴 전환을 넣어줘. 오른쪽에서 왼쪽으로 900ms, power2.inOut으로 진행하고 말림 반경은 화면 폭의 16%, 말림 뒤에 opacity 0.25 그림자를 깔아줘. 뒷면은 앞면보다 10% 어둡게. 진행률 p 하나로 그리는 함수로 만들어 paused 타임라인에서 seek해도 같은 프레임이 나오게 해.

Add a Page Turn transition at the end of <target>. Run it right to left over 900ms with power2.inOut, curl radius 16% of frame width, and a 0.25 opacity shadow behind the curl. Make the back side 10% darker. Drive it with one progress value p and a drawCurl(p) function so seeking a paused timeline yields identical frames.

Codex

<파일>에 페이지 턴 전환을 구현해. p를 0에서 1로 0.9초 power2.inOut, drawCurl(p)에서 반경 0.16*1920px, 그림자 0.25. 0.3초, 0.45초, 0.6초, 0.9초 시점을 캡처해 말림이 점점 커지는지, 뒷면이 보이는지, 0.9초에 이전 페이지가 완전히 사라졌는지 확인해. 난수와 setTimeout은 쓰지 마.

Implement Page Turn in <file>. Tween p from 0 to 1 over 0.9s with power2.inOut; drawCurl(p) uses radius 0.16*1920px and shadow 0.25. Capture at 0.3s, 0.45s, 0.6s, and 0.9s to confirm the curl grows, the back side shows, and the previous page is fully gone at 0.9s. No randomness or setTimeout.