디자인 아틀라스
EN
↝ 모션

일래스틱 스트링

Elastic string

양 끝이 고정된 줄이 튕겨진 뒤 기타줄처럼 진동하다가 감쇠하며 멈추는 효과. 스프링 체인과 달리 노드 하나가 아니라 줄 전체가 하나의 파동으로 출렁입니다.

다른 이름: Rubber band stringPlucked stringVibrating line
···
html
<svg class="strsvg" viewBox="0 0 200 60">
  <line class="anchor" x1="10" y1="30" x2="10" y2="30"/>
  <path id="str" class="str" fill="none"/>
  <circle class="pin" cx="10" cy="30" r="3"/>
  <circle class="pin" cx="190" cy="30" r="3"/>
</svg>
css
.strsvg{width:86%;height:60%}
.str{stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.pin{fill:var(--muted)}
js
const path = document.getElementById('str');
const DECAY = 2.4, FREQ = 9;
let pluckAt = performance.now();
let amp = 26;
function loop(now) {
  const t = (now - pluckAt) / 1000;
  if (t > 1.6) {
    pluckAt = now;
    amp = 20 + Math.random() * 14;
  }
  const d = amp * Math.exp(-DECAY * t) * Math.sin(FREQ * t);
  const my = 30 + d;
  path.setAttribute('d', 'M10,30 Q100,' + my.toFixed(2) + ' 190,30');
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

줄의 중앙이 진동하는 변위를 감쇠 사인파 하나로 계산합니다: displacement(t) = amplitude × e^(-decay × t) × sin(frequency × t). 시간이 지날수록 e^(-decay × t) 항이 0에 가까워지며 진폭이 줄어들고, 결국 줄은 평평한 직선으로 돌아옵니다. 이 변위값을 줄 중앙을 지나는 2차 베지어 곡선의 제어점(줄과 수직 방향으로)으로 넣으면, 줄 전체가 매끄럽게 휘어진 곡선으로 보입니다.

실제 기타줄은 배음(harmonics)이 섞여 더 복잡한 파형이지만, UI용으로는 단일 사인파 감쇠만으로도 "튕겼다가 멈춘다"는 인상을 주기에 충분합니다. 튕기는 세기(amplitude)를 무작위로 살짝 바꿔주면 매번 같은 모양으로 반복되지 않아 더 자연스럽습니다.

드래그로 직접 당겼다가 놓는 상호작용(당긴 만큼 amplitude 결정)과 결합하면 러버밴드류 UI(당겨서 새로고침, 스와이프 저항)의 시각적 근거가 됩니다 — 다만 그 경우엔 줄이 아니라 요소 자체가 휘어지므로 clip-path나 SVG path의 제어점을 같은 수식으로 움직입니다.

언제 쓰나

당겨서 놓는 동작에 물리적 근거를 주고 싶을 때(당겨서 새로고침, 드래그 슬라이더의 끝단) 씁니다. 장식으로만 쓰면 과한 디테일일 수 있으니 상호작용과 묶어서 씁니다.