지금 그리는 프레임 위에 이전·다음 프레임을 반투명하게 겹쳐 보여줘서, 움직임의 궤적을 눈으로 확인하며 그리는 작업 방식.
디자인 아틀라스<div class="stage">
<i class="ghost prev"></i><i class="ghost next"></i><i class="current"></i>
</div>.stage{position:absolute;inset:0}
.ghost,.current{position:absolute;top:50%;width:clamp(60px,22vmin,120px);height:clamp(60px,22vmin,120px);
margin:calc(clamp(60px,22vmin,120px) / -2) 0 0 calc(clamp(60px,22vmin,120px) / -2);border-radius:50%}
.ghost{border:2px solid;background:transparent}
.prev{border-color:var(--accent-2);opacity:.45;animation:orbit 3.2s linear infinite;animation-delay:-.24s}
.next{border-color:var(--accent-3);opacity:.45;animation:orbit 3.2s linear infinite;animation-delay:.24s}
.current{background:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.2);animation:orbit 3.2s linear infinite}
@keyframes orbit{
0%{left:18%;top:60%}25%{left:38%;top:30%}50%{left:62%;top:60%}75%{left:82%;top:30%}100%{left:18%;top:60%}
}이름은 양파 껍질을 벗기면 얇은 속이 비치는 것에서 왔다. 종이 애니메이션 시절엔 실제로 라이트박스 위에 앞 장의 그림이 비치는 반투명 종이를 겹쳐 그렸고, 디지털 도구(TVPaint, Toon Boom, Procreate Dreams, 크리타)는 이걸 소프트웨어 레이어 옵션으로 재현했다.
보통 이전 프레임은 빨간 계열, 다음 프레임은 초록 계열로 색을 다르게 줘서 "어느 쪽이 과거고 어느 쪽이 미래인지"를 한눈에 구분한다. 이렇게 하면 팔이 매 프레임 같은 자리를 맴도는 "제자리 애니메이션" 같은 실수를 그리면서 바로 잡아낼 수 있다.
몇 프레임 앞뒤까지 보여줄지(onion skin range)는 동작 속도에 따라 조절한다 — 빠른 동작은 앞뒤로 더 많은 프레임을 겹쳐야 궤적이 보인다.
너무 많은 프레임을 한 번에 겹치면 오히려 혼란스럽습니다. 보통 앞뒤 1~2프레임이면 충분합니다.