투명한 셀룰로이드 시트에 캐릭터만 따로 그려, 고정된 배경 위에 겹쳐 촬영하는 전통 애니메이션 제작 방식. "셀(cel)"은 셀룰로이드의 줄임말입니다.
디자인 아틀라스<div class="stage">
<div class="bg"></div>
<div class="char" id="char"></div>
<span class="frame-no" id="fn">FRAME 1</span>
</div>.stage{position:absolute;inset:0;overflow:hidden}
.bg{position:absolute;inset:0;background:
linear-gradient(180deg,var(--surface) 0 62%,var(--line) 62% 64%,var(--bg) 64% 100%)}
.char{position:absolute;left:50%;bottom:24%;width:clamp(26px,11vmin,52px);height:clamp(50px,20vmin,96px);margin-left:calc(clamp(26px,11vmin,52px) / -2);
background:var(--accent);border-radius:12px 12px 4px 4px;animation:walk .8s steps(4) infinite}
@keyframes walk{0%{transform:translateX(-30%) rotate(-4deg)}25%{transform:translateX(-10%) rotate(2deg)}50%{transform:translateX(10%) rotate(-2deg)}75%{transform:translateX(30%) rotate(4deg)}100%{transform:translateX(-30%) rotate(-4deg)}}
.frame-no{position:absolute;top:6%;left:6%;font:10px/1 ui-monospace,monospace;color:var(--muted)}const fn = document.getElementById('fn');
let i = 0;
setInterval(() => { i = (i % 4) + 1; fn.textContent = 'FRAME ' + i; }, 200);배경은 한 번만 그려서 고정해두고, 움직이는 캐릭터만 투명 셀 위에 매 프레임 새로 그려 그 위에 겹친다. 배경을 반복해서 그릴 필요가 없어 작업량이 크게 줄었고, 이 분업 구조(배경 화가·키 애니메이터·인비트위너·채색) 덕분에 20세기 상업 애니메이션 산업 전체가 가능해졌다.
디지털 시대에는 실제 셀룰로이드 대신 레이어 개념으로 완전히 대체됐다 — Toon Boom·Adobe Animate에서 배경 레이어를 고정하고 캐릭터 레이어만 프레임마다 교체하는 게 셀 애니메이션의 디지털 버전이다.
셀은 살짝 노랗게 변색되거나 먼지가 앉는 물리적 질감이 있었는데, 요즘은 그 "빈티지 셀" 느낌을 일부러 필름 그레인·색 번짐 필터로 재현하기도 한다.
배경이 자주 바뀌면 셀 애니메이션의 이점(배경 재사용)이 사라집니다. 배경이 고정된 장면에서 가장 효율적입니다.