By aPOST in CSS — 2023년 12월 23일

웹브라우저 개발자 도구로 CSS 애니메이션 디버깅 하기

웹브라우저의 개발자 도구를 이용하면 CSS 애니메이션 흐름을 확인할 수 있고, 다양한 디버깅 작업을 할 수 있습니다.

최신 웹브라우저들은 모두 CSS 애니메이션을 디버깅하고 조작할 수 있는 도구들을 제공하므로, 주로 사용하는 웹브라우저의 개발자 도구를 사용하면 됩니다.

여기서는 구글 크롬을 기준으로 CSS 애니메이션을 디버깅하고, 속성 값을 변경해 최적의 애니메이션을 찾는 방법을 알아보도록 하겠습니다.

구글 크롬에는 개발자 도구에 애니메이션 탭이 별도로 제공됩니다.

기본 상태에서는 애니메이션 탭이 보이지 않으므로 개발자 도구 메뉴에서 "Animations" 탭을 선택합니다.

애니메이션 재생 속도 제어

개발자 도구 애니메이션 탭에는 애니메이션 재생을 제어할 수 있는 다양한 기능들이 제공됩니다.

애니메이션 탭의 왼쪽 위에는 "100%", "25%", "10%" 버튼이 표시됩니다. 애니메이션 재생 속도를 제어하는 버튼입니다.

"25%" 를 누르면 애니메이션이 1/4속도로 재생됩니다. 빠르게 움직이는 애니메이션을 정밀하게 확인해서 문제가 있는지 찾을 필요가 있을 때 유용하게 사용할 수 있습니다.

재생 속도 버튼을 누른 후 화면 갱신을 하면 애니메이션이 설정된 속도로 재생됩니다.

속도 버튼을 누른 후 화면을 갱신하면 설정한 속도로 애니메이션이 재생됩니다.

버튼 왼쪽에는 애니메이션을 일시정지 할 수 있는 일시 정지 버튼이 있습니다. 일시정지 한 후에는 재생 속도를 다시 변경할 수 있으므로, 원하는 부분에서 애니메이션을 느리게 재생시키면서 확인할 수 있습니다.

"Animations" 탭 하단에는 현재 웹페이지에 적용된 애니메이션의 흐름을 시간 순서로 보여주는 썸네일 바가 위치합니다.

썸네일 바에서 키프레임 그래프를 보고 싶은 애니메이션을 클릭해 선택하면 하단에 키프레임 그래프가 표시됩니다.

키프레임 그래프는 다른 애니메이션 편집 프로그램처럼 애니메이션 재생 시간을 당겨서 늘리거나, 시작 위치를 옮겨서 실제 애니메이션을 적용하기 전에 미리보기로 확인해볼 수 있습니다.

수정한 애니메이션은 키프레임 그래프 왼쪽 위의 "리플레이" 버튼을 클릭하면 재생시켜 볼 수 있습니다.

애니메이션이 트랜지션(transition) 속성이 적용된 요소를 선택해 CSS 스타일 정보를 보면("Styles" 탭) 애니메이션 속성 값들에 다른 속성 값에는 아이콘이 붙어있는 것을 볼 수 있습니다.

이 아이콘은 클릭할 수 있는 아이콘입니다.

아이콘을 클릭하면 현재 속성 값으로 지정된 애니메이션 재생 방법에 대한 자세한 정보를 표시합니다.

애니메이션 과정을 시각적인 그래프로 표시해주기 때문에 시간 경과에 따라 애니메이션이 어떻게 동작하는지 예측할 수 있습니다.

그리고, 애니메이션 재생 방법을 보여주는 툴팁 창의 왼쪽 타입을 선택한 후을 하단의 "좌우 이동 바"를 이용해 다른 애니메이션 재생 방식으로 변경할 수 있습니다.

파이어폭스 웹브라우저는 다음처럼 조금 더 간결하고 직관적인 애니메이션 재생 방식 정보를 표시하며, 좀 더 편리한 선택방식을 제공합니다.