둘레선 강조Circumscribe

Circumscribe

둘레선 강조

다른 이름Also known as · Temporary circumscription · 임시 둘레선 강조 · CircleIndicate · ShowCreationThenDestructionAround · ShowCreationThenFadeAround

076

도판Fig. 076. 둘레선 강조 · Circumscribe · power2.inOut

재생 속도Speed

대상 바깥에 원이나 사각 테두리가 그려졌다가 지워지는 임시 강조A circle or rectangle is drawn around a target and then erased.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

설명하는 대상의 범위를 분명히 한다. 잠깐 두르고 물러나 화면을 어지럽히지 않는다Makes the extent of what is being explained clear, then steps back.

언제 쓰나Use whenUSE WHEN

수식·코드 조각·차트 영역을 잠깐 짚어 설명할 때
화면에서 여러 개 중 하나를 지정할 때

When briefly circling a formula, code piece or chart region
When picking one item out of several on screen

과용 주의AvoidAVOID

여백 8~16px
유지 후 반드시 지운다
한 번에 하나만

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

수치 주위 여백 12px에 선 3px 사각형이 0.6초에 그려지고 0.4초 유지된 뒤 0.3초에 지워진다

과용 · 나쁜 사례OVERUSE

테두리를 영구히 남겨 다음 강조와 겹치거나, 대상에 붙어 글자를 자른다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
그리기	0.6s	0.4~0.8s	stroke 그리기
유지	0.4s	0.3~0.8s	읽는 시간
여백	12px	8~16px	대상 경계 바깥
선 두께	3px	2~4px	1920x1080 기준

GSAP

tl.fromTo('.box', { strokeDashoffset: 1 }, { strokeDashoffset: 0, duration: 0.6, ease: 'power2.inOut' }, 0.4)
  .to('.box', { opacity: 0, duration: 0.3 }, 1.4);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 주위에 둘레선 강조를 넣어줘. 대상 bbox에서 12px 바깥의 사각형 stroke 3px을 0.4초에 시작해 0.6초 동안 strokeDashoffset 1에서 0으로 그리고, 1.4초에 0.3초 동안 opacity 0으로 지워. pathLength=1, 색은 <강조색>. paused 타임라인에 넣어.

Add a circumscribe around <target> with GSAP. A rectangle 12px outside the bbox with stroke 3px starts at 0.4s and draws strokeDashoffset 1 to 0 over 0.6s, then fades to opacity 0 over 0.3s at 1.4s. pathLength=1, color <accent>. Paused timeline.

Codex

<파일>의 <대상>에 circumscribe를 적용해. .box rect(margin 12, stroke 3, pathLength 1)를 fromTo(dashoffset 1→0, 0.6s, power2.inOut, position 0.4), 이후 opacity 0(0.3s, position 1.4). 0.7초·1.2초·2.0초를 캡처해 그리는 중, 완성, 소멸 상태를 확인해.

Apply circumscribe to <target> in <file>. fromTo on the .box rect (margin 12, stroke 3, pathLength 1) dashoffset 1 to 0, 0.6s, power2.inOut, position 0.4, then opacity 0 over 0.3s at 1.4. Capture at 0.7s, 1.2s and 2.0s to check drawing, complete and erased states.