효과Effects / 강조·주의Emphasis / Nº 069

펄스Pulse

Pulse

펄스

다른 이름Also known as · 크기 맥동 · Heartbeat · 심장 박동 · Scale and color indication · 크기와 색 맥동 강조 · Indicate

069

도판Fig. 069. 펄스 · Pulse · sine.inOut

재생 속도Speed

요소가 제자리에서 살짝 커졌다 원래 크기로 돌아오는 맥동A short scale beat where an element grows slightly and returns to its size in place.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

대상이 살아 있고 눌러 볼 수 있다는 신호. 위치를 옮기지 않고 시선만 끌어온다Signals the element is alive and clickable. It draws the eye without moving anything.

언제 쓰나Use whenUSE WHEN

버튼·배지처럼 지금 눌러야 할 요소에 시선을 끌 때
알림 점이나 녹화 표시처럼 활성 상태를 알릴 때
설명 도중 특정 아이콘을 한 번 짚을 때

When pulling attention to a button or badge that should be pressed now
When showing an active state such as a notification dot or record indicator
When pointing at one icon during an explanation

과용 주의AvoidAVOID

scale 1.08 초과 금지(주변 요소와 겹침)
한 화면에 동시에 맥동하는 요소는 1개로 제한
반복은 3회 이내로 끝내고 정지한다

분류TagsTAGS

강조·주의Emphasis 주목 끌기Attention 강조Emphasis 웹 UIWeb UI 제품 시연Product demo 숏폼Short-form 난이도 기본Basiccss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

CTA 버튼이 1초 주기로 scale 1.05까지 커졌다 돌아오며 세 번 뛰고 멈춘다

과용 · 나쁜 사례OVERUSE

scale 1.3 이상으로 커져 주변 글자를 가리거나, 화면 전체 요소가 동시에 무한 반복한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	1.0s	0.6~1.4s	커짐과 복귀를 합친 한 번의 길이
최대 배율	1.05	1.03~1.08	1.08을 넘기면 경계가 겹침
반복 횟수	3회	2~4회	무한 반복은 데코용에만
이징	sine.inOut	sine~power2.inOut	왕복이 매끄럽게 이어지는 곡선

GSAP

tl.to('.cta', { scale: 1.05, duration: 0.5, ease: 'sine.inOut', yoyo: true, repeat: 5 }, 0.4);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 버튼에 펄스를 넣어줘. 0.4초에 시작해 scale 1에서 1.05까지 0.5초에 커지고 같은 시간에 돌아오는 왕복을 3번 반복해. 이징은 sine.inOut, 반복 뒤에는 원래 크기로 정지해. transform만 쓰고 paused 타임라인에 넣어 seek가 되게 해.

Add a pulse to <target> with GSAP. Start at 0.4s, scale from 1 to 1.05 over 0.5s and back, repeated 3 times. Ease sine.inOut, then hold at the original size. Use transforms only, on a paused timeline so it can be seeked.

Codex

<파일>의 <대상>에 pulse를 적용해. tween은 scale 1.05, duration 0.5, yoyo true, repeat 5, ease sine.inOut, position 0.4로 건다. 무한 반복과 Math.random은 쓰지 않는다. 0.4초·0.9초·3.6초 시점을 캡처해 시작 크기, 최대 크기(1.05), 종료 후 크기 1.0을 각각 확인해.

Apply pulse to <target> in <file>. Tween scale 1.05, duration 0.5, yoyo true, repeat 5, ease sine.inOut, position 0.4. No infinite repeat and no Math.random. Capture at 0.4s, 0.9s and 3.6s and check the start size, the peak size (1.05) and that the final size is 1.0.