Chrome DevTools로 CSS 애니메이션을 검사하는 방법

CSS 애니메이션 검토 및 개선 방법

정교하게 구현된 CSS 애니메이션은 웹사이트의 수준을 한 단계 끌어올릴 수 있는 강력한 도구입니다. 하지만 애니메이션을 정밀하게 제어할 수 있는 적절한 도구가 없다면, 원하는 효과를 구현하는 것이 어려울 수 있습니다. 각 애니메이션 단계에서 정확히 어떤 일이 일어나는지 시각적으로 확인하고 제어할 수 있다면 어떨까요?

다행히도, Google Chrome과 Firefox의 개발자 도구(DevTools)에는 애니메이션을 검사하고 디버깅할 수 있는 기능이 내장되어 있습니다. 이 강력한 기능을 활용하여 자신만의 애니메이션을 개선하고, 다른 웹사이트에서 멋진 애니메이션을 구현하는 방법을 역설계하는 방법까지 알아보세요.

Chrome DevTools는 CSS를 포함한 웹 페이지의 다양한 측면을 디버깅할 수 있는 훌륭한 도구입니다. 애니메이션 검사에 DevTools를 어떻게 활용할 수 있는지 이해를 돕기 위해 간단한 예시부터 시작해 보겠습니다.

HTML과 CSS를 이용한 애니메이션 정의

다음 HTML 코드는 <div> 요소와 <button> 요소를 포함하는 간단한 웹 페이지를 렌더링합니다. 이 페이지는 style.css라는 CSS 파일과 연결되어 있습니다.

    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>애니메이션 검토 예시</title>
        <link rel="stylesheet" href="https://wilku.top/how-to-inspect-your-css-animations-with-chrome-devtools/style.css">
    </head>
    <body>
        <div id="box"></div>
        <button>테스트 버튼</button>
    </body>
    </html>

두 요소에 스타일을 적용하기 위해, HTML 파일과 같은 폴더에 style.css 파일을 생성하고 아래의 내용을 추가합니다.

    #box {
      background: red;
      height: 400px;
      width: 400px;
      margin-bottom: 1rem;
      animation: rotateAndChangeColor 1000ms ease-in-out;
    }

    button {
      font-size: larger;
      background-color: white;
      border: 1px solid black;
      padding: 0.5em 1em;
      color: black;
      height: 80px;
      width: 300px;
      border-radius: 0.5em;
      transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
      cursor: pointer;
    }

    button:hover {
      background-color: black;
      color: white;
    }

    @keyframes rotateAndChangeColor {
      0% {
        rotate: 0deg;
        background: red;
      }
      10% {
        background: green;
      }
      40% {
        background: blue;
      }
      70% {
        background: yellow;
      }
      100% {
        rotate: 360deg;
        background: red;
      }
    }

이 CSS 스타일을 통해 다음 두 가지 구성 요소가 생성됩니다:

페이지가 로드될 때 회전하며 색상이 변하는 간단한 사각형 박스.
마우스 커서를 올리면 배경색이 바뀌는 버튼.

빨간색 사각형 박스는 CSS @keyframe 지시문을 사용하여 애니메이션 효과를 적용하고, 버튼은 transition 속성을 사용합니다. 이러한 설정을 통해 브라우저의 DevTools를 사용하여 두 가지 애니메이션 접근 방식을 비교해 볼 수 있습니다.

DevTools를 사용한 애니메이션 검사

Chrome DevTools의 애니메이션 탭에 접근하려면 다음과 같이 진행합니다:

웹 페이지에서 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 엽니다.
“검사” 옵션을 선택합니다.
DevTools 창의 오른쪽 상단에 있는 점 세 개 아이콘을 클릭합니다.
“추가 도구” > “애니메이션”을 선택합니다.

이제 DevTools 하단에 애니메이션 서랍이 열립니다.

페이지에서 발생하는 모든 애니메이션이 이 곳에 표시됩니다. 페이지를 새로 고침하고 버튼 위로 마우스를 이동하면, 애니메이션 탭 아래에 관련 애니메이션이 나타나는 것을 볼 수 있습니다.

애니메이션 목록 중 하나를 클릭하면 DevTools의 진정한 힘을 경험할 수 있습니다. 예를 들어, 빨간색 사각형 박스의 애니메이션을 클릭하면, 브라우저가 해당 애니메이션의 키프레임을 시각적으로 표시해 줍니다.

DevTools는 선택한 요소와 관련된 모든 애니메이션을 표시합니다. 빨간색 사각형 박스에는 rotateAndChangeColor라는 하나의 애니메이션만 정의되어 있으므로, 해당 애니메이션의 세부 정보만 볼 수 있습니다.

애니메이션 타임라인에서 선을 왼쪽으로 끌면 애니메이션 속도를 빠르게 만들 수 있고, 오른쪽으로 끌면 속도를 늦출 수 있습니다. 일시 정지 및 재생 아이콘을 사용하여 특정 지점에서 애니메이션을 멈출 수도 있습니다. 상단의 백분율 컨트롤을 사용하여 애니메이션 재생 속도를 일반 속도의 1/4 또는 1/10로 설정할 수도 있습니다.

버튼 전환 애니메이션을 검사하면, DevTools는 전환의 개별 속성(색상과 배경색)을 별도로 보여줍니다.

이 도구를 사용하면 애니메이션을 실시간으로 조작하여 작동 방식을 정확하게 파악할 수 있습니다. 애니메이션 관련 문제가 발생한 경우, 이를 사용하여 웹사이트 문제를 효과적으로 해결할 수 있습니다.

고급 애니메이션 예시

다음 코드를 사용하여 HTML <body> 태그 내부의 기존 마크업을 대체하는 것으로 시작하겠습니다.

    <div class="move-me move-me-1">steps(4, end)</div>
    <br />
    <div class="move-me move-me-2">steps(4, start)</div>
    <br />
    <div class="move-me move-me-3">no steps</div>

그런 다음 style.css 파일의 모든 기존 스타일을 다음 코드로 교체합니다.

    .move-me {
      display: inline-block;
      padding: 20px;
      color: white;
      position: relative;
      margin: 0 0 10px 0;
    }

    .move-me-1 {
      animation: move-in-steps 8s steps(4, end) infinite;
    }

    .move-me-2 {
      animation: move-in-steps 8s steps(4, start) infinite;
    }

    .move-me-3 {
      animation: move-in-steps 8s infinite;
    }

    body {
      padding: 20px;
    }

    @keyframes move-in-steps {
      0% {
        left: 0;
        background: blue;
      }
      100% {
        left: 100%;
        background: red;
      }
    }

이제 모든 <div> 요소에는 위치와 배경색을 전환하는 단계별 이동 애니메이션이 적용됩니다. 또한 각 상자에는 애니메이션 단계를 제어하는 데 사용되는 서로 다른 steps 함수가 설정되어 있습니다.

세 번째 상자는 매끄럽게 오른쪽으로 이동하는 반면, 처음 두 상자는 화면 끝에 도달할 때까지 한 번에 두 단계씩 움직입니다(두 번째 상자는 첫 번째 상자보다 먼저 애니메이션을 시작합니다).

DevTools에서 애니메이션 탭을 열고 페이지를 새로 고치면, 해당 애니메이션과 관련된 모든 정보를 확인할 수 있습니다.

동시에 여러 요소가 움직이는 경우를 고려해 볼 수 있습니다. 이 예시에서는 세 개의 상자 모두에서 배경색과 위치가 동시에 애니메이션됩니다.

또 다른 흥미로운 점은 각 애니메이션 줄의 노드입니다. 애니메이션이 무한히 반복될 때, 각 노드는 애니메이션의 반복이 시작되고 끝나는 지점을 나타냅니다.

빈 노드는 기본적으로 애니메이션의 키프레임을 나타내며, 단색 노드는 애니메이션의 시작과 끝을 나타냅니다. 애니메이션이 재시작될 때마다 짙은 색상의 노드가 표시됩니다.

마지막으로, DevTools를 사용하면 CSS 속성을 편집하는 것처럼 애니메이션 속성을 편집할 수 있습니다. 애니메이션 UI에서 변경한 사항은 스타일 탭 아래의 인라인 스타일에 반영되며, 그 반대의 경우도 마찬가지입니다. 이러한 기능을 활용하여 코드를 자유롭게 변경하고 테스트하며, 실제 프로젝트에 적용할 수 있습니다.

Google Chrome의 DevTools 기능은 애니메이션을 포함하여 CSS를 디버깅하기 위한 훌륭한 도구입니다. 웹 페이지의 모든 전환과 애니메이션을 자세히 살펴볼 수 있으므로, 각 단계에서 정확히 어떤 일이 일어나는지 파악할 수 있습니다.

웹 개발자라면 브라우저의 DevTools 기능을 숙지하고 활용하는 것이 필수적입니다.