효과Effects / 타이포Typography / Nº 102

문장 속 이미지 확장Inline Image Expand

Inline Image Expand

문장 속 이미지 확장

다른 이름Also known as · Inline Image Typography Expansion

102

렌더 추가 예정CLIP COMING문장 속 이미지 확장Inline Image Expand정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 102. 문장 속 이미지 확장 · Inline Image Expand · power2.inOut

문장 속 작은 이미지가 커지며 앞뒤 문구를 밀어내는 효과A small inline image between words grows and pushes the surrounding text aside.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

글이 설명하던 대상이 화면의 주인공으로 바뀐다. 문장 안에서 자연스럽게 시각으로 넘어간다The subject the sentence described takes over the frame, moving naturally from text to picture inside the line.

언제 쓰나Use whenUSE WHEN

'우리는 [이미지]를 만듭니다'처럼 문장 속 대상을 크게 보여줄 때
텍스트 장면에서 사진 장면으로 넘어갈 때

Enlarge the subject in a sentence like 'We make [image]'.
Move from a text scene to a photo scene.

과용 주의AvoidAVOID

텍스트 이동은 이미지 폭 변화와 같은 이징·지속을 쓴다
이미지 비율 유지(object-fit cover로 왜곡 금지)
한 문장에 확장 이미지 1개만

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

문장 속 1em 크기 사진이 1.6초에 70vw까지 커지며 앞뒤 단어가 양옆으로 밀려 화면 밖으로 사라진다

과용 · 나쁜 사례OVERUSE

이미지만 커지고 문구는 그대로여서 글자와 겹치거나, 밀려나는 속도가 제각각이다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이미지 폭	1em → 70vw	50~85vw	확장 폭
지속	1600ms	1200~2000ms	확장 시간
이징	power2.inOut	power2~power3.inOut	텍스트와 동일
문구 퇴장	x ±40vw	±30~±60vw	양옆으로 밀림

GSAP

tl.to('.img', { width: '70vw', height: '40vw', duration: 1.6, ease: 'power2.inOut' }, 0)
  .to('.left', { x: '-40vw', opacity: 0, duration: 1.6, ease: 'power2.inOut' }, 0)
  .to('.right', { x: '40vw', opacity: 0, duration: 1.6, ease: 'power2.inOut' }, 0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>의 문장 '<앞> [이미지] <뒤>'에서 단어 사이 1em 크기의 <이미지>가 1.6초 동안 70vw x 40vw로 커지게 해줘. 앞 문구는 왼쪽으로 -40vw, 뒤 문구는 오른쪽으로 +40vw 밀리며 사라지고, 셋 모두 power2.inOut. 이미지 비율은 object-fit: cover로 유지하고 홀드 1초.

In the sentence '<before> [image] <after>' of <target>, grow the 1em inline <image> to 70vw by 40vw over 1.6 seconds. The leading text moves -40vw left and the trailing text +40vw right while fading out, all with power2.inOut. Keep the image ratio with object-fit: cover and hold for 1 second.

Codex

<파일>의 인라인 이미지에 width/height tween(1em→70vw, 1.6s, power2.inOut)을 걸고 좌우 텍스트 x를 동시에 이동시켜. 0.8초 시점에 문구와 이미지가 겹치지 않는지, 2.6초에 이미지가 70vw인지 캡처와 bbox 값으로 확인해.

In <file> add a width/height tween (1em to 70vw, 1.6s, power2.inOut) on the inline image and move the side text on x simultaneously. Capture at 0.8s to confirm text and image do not overlap and at 2.6s to confirm the image bbox is 70vw wide.