bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

Browse Source
This commit is contained in:
Antigravity Agent
2026-05-02 09:18:34 +09:00
parent c84dcb8371
commit 6445fcc05b
13150 changed files with 55394 additions and 100862 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics_Art/Visual_Effects/애니메이션 (transition - keyframes).md
+3 -3
View File
@@ -1,4 +1,4 @@
# [[애니메이션 (transition / keyframes)]]
# [[애니메이션 (transition - keyframes)|애니메이션 (transition / keyframes)]]
## 📌 Brief 실전 Summary
CSS 애니메이션(transition 및 keyframes)은 사용자 경험(UX)을 향상시키고 인터페이스의 상태 변화를 명확하게 전달하는 핵심 요소입니다. 하지만 단순히 "예쁘게" 만드는 것을 넘어 "유지보수 가능하고 성능이 최적화된" 방식으로 설계되어야 하며, 이를 위해서는 리플로우(Reflow)나 리페인트(Repaint)를 유발하는 속성 사용을 피하고 GPU 가속을 활용할 수 있는 속성을 전략적으로 선택하는 것이 실무 CSS 관리의 핵심입니다.
@@ -17,8 +17,8 @@ CSS 애니메이션(transition 및 keyframes)은 사용자 경험(UX)을 향상
* **절대 위치 지정 활용:** 애니메이션을 적용해야 하는 요소를 `position: fixed`나 `position: absolute`로 배치하면, 해당 요소가 움직일 때 문서 내 다른 요소의 레이아웃에 영향을 미치지 않기 때문에 전체 페이지 리플로우를 방지하고 리페인트만 발생시켜 비용을 줄일 수 있습니다 [17, 18].
## 🔗 Knowledge Connections
- **Related Topics:** [[Reflow 및 Repaint 최적화]], [[CSS 성능 최적화(Performance)]], [[UX/UI 마이크로 인터랙션]]
- **Projects/Contexts:** [[실무에서의 CSS 유지보수 전략]], [[디자인 시스템의 모션 가이드라인(Design Tokens)]]
- **Related Topics:** [[Reflow 및 Repaint 최적화|Reflow 및 Repaint 최적화]], CSS 성능 최적화(Performance), UX/UI 마이크로 인터랙션
- **Projects/Contexts:** 실무에서의 CSS 유지보수 전략, 디자인 시스템의 모션 가이드라인(Design Tokens)
- **Contradictions/Notes:** 애니메이션은 사용자 경험 향상에 매우 유용하지만, 무분별하고 과도한 모션은 사용자의 인지 부하를 높이거나 전정계 질환(vestibular disorders)이 있는 사용자에게 해로울 수 있습니다. 따라서 반드시 모션을 최소화하거나 끌 수 있도록 `prefers-reduced-motion` 미디어 쿼리를 함께 사용하여 접근성을 고려해야 한다고 소스는 강조하고 있습니다 [4, 19-21].
---