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

프레임 레이트

Frame rate

1초에 몇 장의 그림을 보여주는지를 나타내는 수치. 같은 움직임이라도 12·24·60fps는 완전히 다른 질감으로 보입니다.

다른 이름: FPSFrames per second
···
html
<div class="stage">
  <div class="lane"><span class="tag">12fps</span><div class="track"><i class="ball b12"></i></div></div>
  <div class="lane"><span class="tag">24fps</span><div class="track"><i class="ball b24"></i></div></div>
  <div class="lane"><span class="tag">60fps</span><div class="track"><i class="ball b60"></i></div></div>
</div>
css
.stage{position:absolute;inset:8% 8%;display:flex;flex-direction:column;justify-content:space-around}
.lane{position:relative}
.tag{display:block;margin-bottom:6px;font:11px/1 ui-monospace,monospace;color:var(--muted)}
.track{position:relative;height:clamp(18px,7vmin,32px)}
.ball{position:absolute;top:0;width:clamp(16px,6.5vmin,30px);height:clamp(16px,6.5vmin,30px);border-radius:50%;background:var(--accent)}
.b12{animation:bounce 2s steps(6) infinite}
.b24{animation:bounce 2s steps(12) infinite}
.b60{animation:bounce 2s steps(30) infinite;background:var(--accent-3)}
@keyframes bounce{0%{left:0}50%{left:calc(100% - clamp(16px,6.5vmin,30px))}100%{left:0}}

12fps는 전통 셀 애니메이션이 자주 쓰는 "투 프레임(on twos)" 방식과 맞닿아 있다 — 그림 한 장을 두 프레임씩 보여줘서 작화량을 줄이면서도 뚝뚝 끊기는 스타일 자체를 의도적으로 살린다. 지브리·클래식 디즈니가 액션 장면에서 종종 이 방식을 섞어 쓴다.

24fps는 1920년대부터 굳어진 영화 표준이다. 사람 눈에 자연스러우면서도 필름 비용을 아낄 수 있는 지점으로 정착했고, 지금도 "영화 같은 느낌"의 기준점으로 쓰인다.

60fps는 스포츠 중계·게임 캡처처럼 움직임 자체의 정보가 중요한 콘텐츠에 쓴다. 부드럽지만, 영화에 쓰면 오히려 "저예산 홈비디오" 같은 느낌(사커 마 효과)을 준다는 이유로 극영화에서는 의도적으로 피하기도 한다.

언제 쓰나

프레임 레이트는 프로젝트 시작 전에 정하고 끝까지 고정하세요. 중간에 바꾸면 이미 만든 애니메이션의 타이밍이 전부 어긋납니다.