css · medium priority
CSS 애니메이션 & 트랜지션 실무
GPU 가속, 60fps, Framer Motion — 부드러운 인터랙션 설계
intermediate 난이도3시간토스당근카카오네이버라인
시작 전
이해도
매우 낮음
학습 개요
탄생 배경
쉬운 설명
복잡한 개념을 실생활 비유로 설명합니다.
“카메라 편집”
GPU 레이어는 이미 찍어놓은 영상 클립입니다. transform/opacity 변경은 클립을 이동하거나 투명도를 조절하는 것 — 원본을 다시 찍을 필요가 없습니다. left/top 변경은 장면을 새로 촬영하는 것 — 매 프레임 새로 찍어야 해서 느립니다.
핵심 개념
CSS 속성별 렌더링 비용
| CSS 속성 | 트리거 단계 | 성능 | 예시 |
|---|---|---|---|
| width, height, padding | Layout + Paint + Composite | 매우 나쁨 | 레이아웃 재계산 필요 |
| background-color, color | Paint + Composite | 나쁨 | 픽셀 재그리기 필요 |
| transform, opacity | Composite만 | 매우 좋음 (GPU) | 레이어만 이동/변환 |
버벅이는 애니메이션 vs 부드러운 애니메이션
❌ CPU 애니메이션 (나쁨)
- left, top 변경 → Layout 재계산
- 매 프레임 레이아웃 트리거
- 메인 스레드 점령
- 60fps 불가
1.box {2 position: absolute;3 transition: left 0.3s; /* ❌ */4}5.box:hover {6 left: 100px;7}
✅ GPU 애니메이션 (좋음)
- transform → Composite만 트리거
- GPU 레이어에서 처리
- 메인 스레드 부담 없음
- 60fps 안정
1.box {2 transition: transform 0.3s; /* ✅ */3}4.box:hover {5 transform: translateX(100px);6}
실무 적용
어떤 상황에서 사용하는가
카드 목록에서 항목 추가/삭제 시 부드러운 애니메이션
어떻게 적용하는가
Framer Motion AnimatePresence로 추가/삭제 애니메이션. layout prop으로 나머지 카드들이 부드럽게 재배치. transform/opacity만 사용해 GPU 처리. 저사양 기기를 위해 prefers-reduced-motion 미디어 쿼리로 애니메이션 비활성화.
흔한 실수와 안티패턴
- width/height 애니메이션 — transform: scale로 대체하거나 FLIP 기법 사용
- will-change를 항상 적용하면 GPU 메모리 과사용
- JavaScript 기반 애니메이션(setInterval)은 탭 비활성 시 느려짐 — requestAnimationFrame 사용
- Framer Motion을 간단한 CSS transition으로 해결 가능한 곳에 과도하게 사용
면접 질문
중급토스당근카카오
답변 방향 힌트
렌더링 파이프라인, GPU Composite
반드시 언급할 키워드
- Layout, Paint, Composite 단계
- transform은 Composite만 트리거
- GPU 처리
예상 꼬리 질문
- requestAnimationFrame은 어떤 경우에 사용하나요?
- prefers-reduced-motion을 어떻게 처리하나요?