애니메이터가 그린 주요 동작(키프레임) 사이를, 점진적으로 변하는 그림으로 채워 자연스러운 움직임을 만드는 작업. "인비트윈"의 줄임말입니다.
디자인 아틀라스<div class="stage">
<div class="path"></div>
<i class="key k1"></i><i class="key k2"></i><i class="key k3"></i>
<span class="label l1">KEY</span><span class="label l2">KEY</span><span class="label l3">KEY</span>
<i class="tween"></i>
</div>.stage{position:absolute;inset:0}
.path{position:absolute;left:10%;right:10%;top:50%;height:2px;background:var(--line);transform:translateY(-1px)}
.key{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:3px;transform:rotate(45deg);
background:var(--surface);border:2px solid var(--accent-2)}
.k1{left:10%}.k2{left:50%}.k3{left:90%}
.label{position:absolute;top:50%;margin-top:-28px;transform:translateX(-50%);font:9px/1 ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.l1{left:10%}.l2{left:50%}.l3{left:90%}
.tween{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--accent);
box-shadow:0 2px 8px rgba(0,0,0,.25);animation:tween-move 3s ease-in-out infinite}
@keyframes tween-move{0%,100%{left:10%}50%{left:90%}}전통 셀 애니메이션 스튜디오에서는 수석 애니메이터가 동작의 핵심 포즈(키프레임)만 그리고, "인비트위너"라는 별도 역할이 그 사이를 채우는 중간 그림(트윈)을 그렸다. 몇 장을 채우느냐가 곧 동작의 부드러움을 결정했다.
디지털 도구(애프터 이펙트, 애니메이트, Figma의 스마트 애니메이트)에서는 이 보간을 소프트웨어가 자동으로 계산한다 — 시작값과 끝값, 그 사이의 이징만 정하면 나머지 프레임은 컴퓨터가 채운다. 그래서 "트위닝"은 이제 키프레임 애니메이션 자체를 가리키는 말로도 쓰인다.
다만 자동 보간이 항상 최선은 아니다. 회전하는 팔다리처럼 궤적이 곡선이어야 하는 동작을 직선으로 트위닝하면 어색해진다 — 이럴 땐 중간 키프레임을 하나 더 찍어 궤적을 손으로 수정한다.
자동 트위닝이 어색하면 키프레임을 더 추가하기 전에 이징부터 바꿔보세요. 대부분의 어색함은 속도 곡선 문제입니다.