디자인 아틀라스
EN
↝ 모션

리드 앤 래그

Lead and lag

연결된 여러 부위가 완전히 같은 타이밍으로 움직이지 않고, 한 부위가 앞장서고(lead) 나머지가 조금씩 뒤처지며(lag) 따라가는 원칙. 걸을 때 골반이 어깨보다 먼저 도는 것이 예입니다.

다른 이름: Drag and lagBody mechanics lag
···
html
<div class="chain" id="chain"></div>
css
.chain{position:relative;width:min(82%,440px);height:60%;display:flex;align-items:center;justify-content:space-between}
.dot{width:12%;aspect-ratio:1;border-radius:50%;animation:bob 1.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-45%)}50%{transform:translateY(45%)}}
js
const chain = document.getElementById('chain');
const N = 6;
for (let i = 0; i < N; i++) {
  const d = document.createElement('i');
  d.className = 'dot';
  d.style.animationDelay = (-i * 0.09) + 's';
  d.style.background = i % 2 === 0 ? 'var(--accent)' : 'var(--accent-2)';
  chain.appendChild(d);
}

몸의 여러 부위가 한 덩어리처럼 동시에 움직이면 로봇 같아 보입니다. 실제 몸은 관절로 연결돼 있어서 한 부위가 먼저 움직이기 시작하면(리드) 나머지는 관성 때문에 아주 살짝 늦게 따라옵니다(래그) — 걸을 때 골반이 돌고 난 뒤 어깨가 뒤따라 돌고, 꼬리나 머리카락이 몸통보다 항상 한 박자 늦게 흔들리는 식입니다.

팔로우 스루·오버래핑 액션과 헷갈리기 쉽지만 다릅니다. 팔로우 스루는 "몸통이 멈춘 뒤에" 부속물이 계속 움직이는, 멈춤 시점의 이야기입니다. 리드 앤 래그는 동작이 계속되는 동안 내내 부위 간에 일정한 위상차를 유지하는, 진행 중인 흐름의 이야기입니다.

CSS에서는 stagger 기법과 똑같은 도구(음수 animation-delay)로 구현됩니다 — 연결된 여러 요소에 조금씩 다른 지연을 주면 하나의 흐르는 몸짓처럼 보입니다.

데모의 여섯 개 점은 같은 상하 운동을 하지만 각자 조금씩 지연이 걸려 있어서, 뱀이나 애벌레처럼 몸 전체를 타고 흐르는 파동이 만들어집니다.

언제 쓰나

체인처럼 연결된 여러 요소(드래그 핸들, 관련 토글 그룹)가 하나의 몸짓으로 보이길 원할 때 씁니다. stagger와 도구는 같지만 '리스트가 순서대로 나타난다'가 아니라 '몸통이 흐른다'는 느낌을 노릴 때 씁니다.