디자인 아틀라스
EN
▶ 모션 그래픽

세컨더리 액션

Secondary action

주요 동작을 방해하지 않으면서 그 동작을 뒷받침하고 캐릭터를 더 생생하게 만드는 보조 동작. 디즈니 애니메이션 12원칙 중 하나입니다.

다른 이름: Supporting action
···
html
<div class="stage">
  <div class="char">
    <div class="head"></div>
    <div class="body"></div>
    <div class="arm"></div>
  </div>
  <span class="cap">주요 동작: 걷기 · 세컨더리: 팔 흔들기</span>
</div>
css
.stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8%}
.char{position:relative;width:clamp(70px,26vmin,120px);height:clamp(90px,34vmin,150px);animation:bob 1.1s ease-in-out infinite}
.head{position:absolute;left:50%;top:0;width:34%;aspect-ratio:1;margin-left:-17%;border-radius:50%;background:var(--fg)}
.body{position:absolute;left:50%;top:32%;width:26%;height:56%;margin-left:-13%;border-radius:10px;background:var(--accent)}
.arm{position:absolute;left:62%;top:36%;width:10%;height:40%;border-radius:6px;background:var(--accent-2);
  transform-origin:top center;animation:swing 1.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
@keyframes swing{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(26deg)}}
.cap{font:11px/1.3 sans-serif;color:var(--muted);text-align:center;max-width:80%}

걷는 캐릭터의 "주요 동작"이 다리의 움직임이라면, 팔을 함께 흔들거나 고개를 까딱이는 건 세컨더리 액션이다. 걷기라는 정보를 방해하지 않으면서, 캐릭터가 더 살아있고 표현력 있게 느껴지게 만든다.

핵심 규칙은 "주요 동작을 절대 가리거나 경쟁하지 않는다"는 것이다. 세컨더리 액션이 너무 크거나 시선을 끌면, 관객의 눈이 정작 봐야 할 주요 동작에서 벗어난다 — 그래서 보통 주요 동작보다 진폭을 작게, 타이밍도 살짝 늦춰서(오버랩과 맞물려) 배치한다.

말하는 캐릭터가 손짓을 곁들이는 것, 화난 캐릭터가 발을 툭툭 구르는 것 모두 세컨더리 액션의 예다 — 대사나 감정이라는 주요 정보는 그대로 두고 그 위에 성격을 얹는다.

언제 쓰나

세컨더리 액션이 주요 동작보다 먼저 눈에 들어온다면 진폭을 줄이거나 타이밍을 늦추세요.