CSS 펄스 하트비트 애니메이션 수식과 동심원 파동 링 가이드

직접 해보기 →

실시간 라이브 방송 알림 아이콘, 서비스 가입 유도(CTA) 버튼, 헬스케어 맥박 측정 카드, 긴급 알림 배지에서 사용자의 시선을 집중시키는 대표적인 UI 인터랙션이 바로 CSS 펄스 / 하트비트(Pulse & Heartbeat) 애니메이션입니다.

단순히 소리 없이 가만히 있는 고정 요소와 달리, 심장 박동처럼 두 번 쿵쿵 뛰는 이중 하트비트 모션이나 동심원 모양으로 파동이 퍼져나가는 펄스 링(Pulse Ring) 효과를 적용하면 클릭 유도율(CTR)을 눈에 띄게 끌어올릴 수 있습니다. 본 글에서는 펄스 파동의 파장 주기 수식과 의사 요소 링 확산 메커니즘을 해설합니다.

---

1. 동심원 펄스 확산 및 이중 박동 수식 공식

펄스 파동 효과의 핵심 메커니즘은 원본 버튼 주위에 ::after 의사 요소로 동일한 모양의 반투명 링을 배치한 뒤, 시간 $t$에 따라 스케일(scale)은 키우고 투명도(opacity)는 1에서 0으로 수렴시켜 빛이 퍼지듯 소멸하는 물리 현상을 시뮬레이션하는 원리입니다:

[ \text{PulseRing}(t) = \text{Scale}\left(1 + k \cdot t\right) \circ \text{Opacity}\left(1 - t\right), \quad t \in [0, 1] ]

하트비트 이중 박동(Double Peak) 타임라인 스펙:

• 1차 수축-팽창 피크 ($t = 14%$): 스케일을 1.15배로 빠르게 팽창시킵니다.
• 중간 휴지기 ($t = 28%$): 스케일을 1.05배로 살짝 낮춥니다.
• 2차 메인 피크 ($t = 42%$): 스케일을 1.25배로 강력하게 쿵 튕겨준 뒤, 나머지 구간(43% ~ 100%) 동안 1.0 본래 크기로 부드럽게 복귀합니다.

---

2. 순수 CSS 펄스 링 및 하트비트 구현 소스

다음은 동심원 파동 링과 하트비트 두 가지 핵심 모션 소스 코드입니다:

<!-- 1. 라이브 상태 파동 펄스 링 버튼 -->
<button class="pulse-ring-btn">
  <span class="live-dot"></span> LIVE BROADCAST
</button>

<!-- 2. 심장 박동 하트비트 아이콘 -->
<div class="heartbeat-icon">❤️</div>

/* 1. 동심원 파동 펄스 링 스타일 */
.pulse-ring-btn {
  position: relative;
  padding: 12px 28px;
  font-weight: 700;
  color: #ffffff;
  background-color: #ef4444;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
}

.pulse-ring-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ef4444;
  border-radius: 9999px;
  z-index: -1;
  animation: pulse-wave 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse-wave {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* 2. 하트비트 이중 피크 박동 스타일 */
.heartbeat-icon {
  display: inline-block;
  font-size: 40px;
  animation: heartbeat-beat 1.3s ease-in-out infinite;
}

@keyframes heartbeat-beat {
  0% { transform: scale(1); }
  14% { transform: scale(1.18); }
  28% { transform: scale(1.08); }
  42% { transform: scale(1.28); }
  70% { transform: scale(1); }
  100% { transform: scale(1); }
}

[!NOTE] 매번 keyframes 비율과 scale 확장 수치를 일일이 수동 타이핑하여 테스트하지 않고, CSS 펄스/하트비트 애니메이션 생성기 도구를 활용하면 파동 속도, 스케일 반경, 링 색상을 실시간 미리보고 최적화된 CSS 코드를 바로 복사할 수 있습니다.

---

3. 실무 웹 퍼블리싱 시 펄스 모션 적용 지침

1. GPU 가속 속성 활용: 펄스 애니메이션 적용 시 width, height를 직접 변경하면 프레임마다 레이아웃 리플로우(Reflow)가 유발됩니다. 반드시 transform: scale3d()와 opacity 속성을 사용하여 GPU 가속으로 60fps를 깨끗하게 유지하십시오.
2. z-index: -1 계층 보정: 의사 요소(::after) 파동 링이 퍼져나갈 때 글자 텍스트 위를 덮어버리지 않도록, 버튼 자체에 position: relative를 주고 링 요소에 z-index: -1을 선언하는 마스킹 레이어 처리가 필수적입니다.