CSS 애니메이션을 신중하게 사용하면 웹사이트에 정교함을 더할 수 있습니다. 하지만 포괄적인 조작이 가능한 도구가 없다면 이러한 효과를 구현하는 것이 어려울 수 있습니다. 애니메이션의 각 단계를 정밀하게 조사할 수 있다면 어떨까요?

구글 크롬과 모질라 파이어폭스 모두에 있는 개발자 도구 기능을 활용하면 애니메이션 제작물을 면밀히 조사할 수 있습니다. 이 기능의 구현에 대한 통찰력을 얻어 개인 애니메이션 프로젝트를 개선하고 다양한 웹 사이트에서 발견되는 프로젝트를 해체하고 분석할 수 있습니다.

개발자 도구를 사용한 기본 애니메이션 디버깅

Chrome의 개발자 도구는 기본 기능 외에 다른 요소뿐만 아니라 CSS 코드의 다양한 측면을 디버깅할 수 있는 효과적인 수단을 제공합니다. 이 간단한 그림은 애니메이션 프로세스를 분석하고 면밀히 조사하는 데 이 도구를 어떻게 활용할 수 있는지 이해하는 데 훌륭한 출발점이 됩니다.

이 그림과 관련된 소스 코드는 GitHub 리포지토리를 통해 액세스할 수 있습니다.

HTML 및 CSS로 애니메이션 정의하기

HTML 코드는 div 요소와 버튼 요소의 두 가지 구성 요소로 구성된 웹 페이지를 생성하는 데 활용됩니다. 또한 “style.css”라는 제목의 외부 CSS 파일이 웹 페이지 디자인에 통합됩니다.

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="box"></div>
    <button>Test Button</button>
  </body>
</html>

HTML 문서 내의 “왼쪽” 및 “오른쪽” div에 모두 스타일을 적용하려면 먼저 확장자가 “.css”인 별도의 CSS(Cascading Style Sheets) 파일을 만들어야 합니다. 이 파일은 두 div가 포함된 HTML 파일과 같은 디렉터리에 배치해야 합니다. 다음 단계는 적절한 CSS 구문을 사용하여 이러한 div에 대한 스타일 집합을 정의하는 것입니다. 이렇게 하려면 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;
  }
}

앞서 언급한 디자인 원칙에 따라 두 부분으로 구성된 구성이 탄생했습니다.

이 글도 확인해 보세요:  개발자와 디자이너를 위한 10가지 UI/UX 영감 사이트

회전하는 동적 색상의 리셉터클로 구성된 시각적으로 매혹적인 요소가 구현되었습니다. 이 구성 요소는 페이지 로딩 시 매끄럽게 전환되어 매혹적인 효과를 연출합니다.

사용자의 커서와 상호 작용할 때 이 UI 요소는 색조를 수정하여 사용자 입력에 대한 시각적 피드백을 제공합니다.

CSS `@키프레임` 지시문을 사용하면 빨간색 상자에 애니메이션을 적용하는 반면 버튼에는 전환을 사용합니다. 브라우저의 개발자 도구를 사용하면 이 두 가지 기법을 실시간으로 대조하고 평가할 수 있습니다.

개발자 도구를 사용하여 애니메이션 검사

Chrome 개발자 도구의 애니메이션 탭에 들어가려면 다음 단계를 따르세요:

현재 페이지를 마우스 오른쪽 버튼으로 클릭하면 웹페이지와 관련된 추가 작업 또는 설정을 위한 다양한 옵션을 제공하는 컨텍스트 메뉴에 액세스할 수 있습니다.

항목을 클릭하여 항목을 검사하세요.

화면 오른쪽 상단에 있는 세 개의 세로 점을 클릭하세요.

애플리케이션 또는 인터페이스의 ‘추가 도구’ 섹션으로 이동하여 ‘애니메이션’ 옵션에 액세스하세요.

앞서 설명한 작업을 수행하면 인터페이스의 하단 영역에 애니메이션 트레이가 표시되어 필요한 경우 애니메이션 트레이를 보거나 조작할 수 있음을 나타냅니다.

이 웹페이지에 표시되는 동적 시각 요소는 이 인터페이스의 애니메이션 섹션에 반영됩니다. 페이지를 새로고침하고 지정된 버튼 위로 마우스를 가져가면 앞서 언급한 애니메이션이 애니메이션 폴더 내에 나타납니다.

앞서 언급한 애니메이션 중 하나를 클릭하면 브라우저에서 이어지는 디스플레이에 실제 효능이 있음을 알 수 있습니다. 특히 상자의 애니메이션을 선택하면 브라우저는 다음과 같은 방식으로 키 프레임을 표시합니다.

개발자 도구는 지정된 빨간색 상자에 대해 하나의 애니메이션만 정의된 경우 선택한 요소와 관련된 모든 애니메이션, 즉 “회전 및 색상 변경” 애니메이션을 표시합니다. 따라서 사용자는 이 특정 애니메이션의 복잡한 부분만 볼 수 있습니다.

사용자는 수평 축을 따라 슬라이딩 컨트롤의 위치를 조정하여 애니메이션의 속도를 조작할 수 있으며, 왼쪽으로 갈수록 거리가 짧아지는 빠른 속도와 오른쪽으로 갈수록 거리가 길어지는 느린 속도에 대한 옵션을 사용할 수 있습니다. 또한 토글 가능한 아이콘을 사용하여 애니메이션을 일시 중지할 수 있으므로 사용자가 재량에 따라 동작을 중지할 수 있습니다. 또한 슬라이더 위에는 애니메이션 속도를 25% 또는 10%로 낮출 수 있는 백분율 표시기가 있어 사용자가 시청 환경을 더욱 세밀하게 제어할 수 있습니다.

이 글도 확인해 보세요:  Canva를 사용하여 애니메이션 트위치 오버레이를 만드는 방법

웹 개발의 인스펙터 도구를 통해 버튼의 상태 변화를 살펴보면 버튼의 변환 과정과 관련된 구성 요소, 특히 전경색과 배경색을 포함하여 시각적으로 정의하는 색조와 음영을 관찰할 수 있습니다.

본 도구는 애니메이션의 기능을 파악하고 웹 사이트에서 발생할 수 있는 잠재적인 문제를 해결하기 위해 애니메이션을 조작할 수 있도록 합니다.

고급 애니메이션 예시

HTML 코드의 태그 내의 마크업을 다음 마크업으로 대체하여 구조와 접근성을 개선합니다: “`html 페이지 제목

 <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>

“작업을 시작하기 전에 각 작업에 대해 제공된 지침을 철저히 검토했는지 확인하십시오.

 .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 요소에는 “이동 단계”라는 애니메이션이 적용되어 위치와 배경 색조가 변경됩니다. 또한 개별 상자에는 고유한 애니메이션이 적용되어 전환 단계의 양을 조절할 수 있습니다.

세 번째 컨테이너가 화면의 오른쪽 가장자리를 향해 수평으로 진행함에 따라 초기 컨테이너 쌍은 각각 두 걸음씩 전진하여 디스플레이 영역의 종점에 동시에 도착하면서 절정에 이릅니다(따라서 두 번째 컨테이너의 이동 시작이 상대 컨테이너의 이동 시작에 앞서게 됩니다).

웹 페이지를 새로 고친 후 개발자 도구 내의 “애니메이션” 탭에 액세스하면 사이트에 존재하는 모든 애니메이션에 대한 포괄적인 세부 정보에 액세스할 수 있습니다.

이 글도 확인해 보세요:  Rust의 제네릭 형식 알아보기

동시에 존재하는 모든 요소는 동일한 타임라인에서 유사한 애니메이션 프로세스를 거칩니다. 이 경우 세 개의 컨테이너 각각에 대한 배경 음영과 배치 좌표가 동시에 변경됩니다.

키프레임을 사용하여 반복 애니메이션을 묘사할 때 그래픽 표현은 시퀀스 내에서 각 반복의 시작과 종료를 모두 나타내는 타임라인을 따라 별개의 지점으로 구성된다는 점을 인식하는 것이 중요합니다.

본질적으로 속이 빈 노드는 애니메이션 시퀀스 내에서 중요한 프레임 역할을 하는 반면, 채워진 다채로운 노드는 애니메이션 프로세스의 시작 및 종료 지점을 모두 나타냅니다. 애니메이션이 반복될 때마다 색이 짙게 칠해진 노드가 존재한다는 점에 주목할 필요가 있습니다.

고급 사용자는 CSS 속성을 조정하는 것과 유사하게 개발자 도구를 통해 애니메이션을 수정할 수 있습니다.애니메이션 인터페이스를 통한 모든 수정 사항은 요소의 인라인 스타일 내 ‘스타일’ 탭 아래에 표시되며, 개발자 도구 내의 해당 속성에도 반영됩니다. 이를 통해 실시간으로 실험하고 실제 프로젝트에 업데이트를 편리하게 전송할 수 있습니다.

Chrome 개발자 도구를 사용하여 CSS 디버깅하기

실제로 Google 크롬의 개발자 도구 기능은 애니메이션을 포함한 CSS 기반 요소의 문제를 해결하는 데 매우 유용한 리소스를 제공합니다. 이 포괄적인 인터페이스를 통해 사용자는 웹사이트의 전환 및 애니메이션의 각 단계를 매우 명확하게 파악할 수 있습니다.

웹사이트 개발에 능숙한 개인은 선택한 브라우저에 통합된 개발자 도구 또는 유사한 용도의 대체 도구의 성능과 기능을 포괄적으로 이해하는 것이 필수적입니다.

By 김민수

안드로이드, 서버 개발을 시작으로 여러 분야를 넘나들고 있는 풀스택(Full-stack) 개발자입니다. 오픈소스 기술과 혁신에 큰 관심을 가지고 있고, 보다 많은 사람이 기술을 통해 꿈꾸던 일을 실현하도록 돕기를 희망하고 있습니다.