디자인 아틀라스
EN
↝ 모션

무빙 홀드

Moving hold

포즈는 그대로 유지하되 완전히 얼어붙지 않고 숨 쉬듯 아주 미세하게 계속 움직이는 홀드. 완벽히 정지한 프레임은 오히려 죽은 것처럼 보이기 때문입니다.

다른 이름: Moving hold (animation)Living hold
···
html
<div class="split">
  <div class="panel">
    <span class="tag">Static hold</span>
    <i class="char still"></i>
    <div class="wave"><i></i><i></i><i></i><i></i><i></i></div>
  </div>
  <div class="panel">
    <span class="tag">Moving hold</span>
    <i class="char breathing"></i>
    <div class="wave live"><i></i><i></i><i></i><i></i><i></i></div>
  </div>
</div>
css
.split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:3%}
.panel{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10%}
.tag{position:absolute;top:6%;left:0;right:0;text-align:center;font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.char{width:26%;aspect-ratio:1;border-radius:50%;background:var(--accent)}
.breathing{animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05,.95)}}
.wave{display:flex;gap:6%;width:56%;height:14%}
.wave i{flex:1;background:var(--muted);border-radius:2px;align-self:center;height:20%}
.live i{animation:bob 1.6s ease-in-out infinite}
.live i:nth-child(1){animation-delay:0s}
.live i:nth-child(2){animation-delay:.12s}
.live i:nth-child(3){animation-delay:.24s}
.live i:nth-child(4){animation-delay:.36s}
.live i:nth-child(5){animation-delay:.48s}
@keyframes bob{0%,100%{height:20%}50%{height:90%}}

살아있는 존재는 가만히 서 있어도 완전히 멈추지 않습니다 — 숨을 쉬고, 무게 중심이 미세하게 흔들리고, 눈이 깜빡입니다. 캐릭터를 홀드시킬 때 모든 값을 그대로 얼려버리면(스태틱 홀드) 종이처럼 죽어 보이기 쉬워서, 애니메이터는 큰 포즈는 유지한 채 아주 작은 2차 움직임만 계속 흘려보내는 "무빙 홀드"를 씁니다.

UI에서는 완전히 멈춘 로딩 화면보다, 살짝 숨 쉬듯 스케일이 변하는 아바타나 대기 중인 캐릭터가 이따금 눈을 깜빡이는 게 훨씬 "떠 있다"는 느낌을 줍니다 — 실제로는 아무 상태도 안 바뀌었는데도요.

데모 왼쪽 "스태틱 홀드"는 완전히 고정된 원이고, 아래 파형도 평평합니다. 오른쪽 "무빙 홀드"는 같은 원이 아주 살짝 숨 쉬듯 커졌다 작아지고, 아래 파형도 그에 맞춰 잔잔하게 출렁입니다.

언제 쓰나

대기 상태의 아바타, 마스코트, 캐릭터에 씁니다. 버튼·아이콘처럼 완전히 정적이어야 안정적으로 보이는 요소에는 굳이 필요 없습니다.