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;
}
}
앞서 언급한 디자인 원칙에 따라 두 부분으로 구성된 구성이 탄생했습니다.
회전하는 동적 색상의 리셉터클로 구성된 시각적으로 매혹적인 요소가 구현되었습니다. 이 구성 요소는 페이지 로딩 시 매끄럽게 전환되어 매혹적인 효과를 연출합니다.
사용자의 커서와 상호 작용할 때 이 UI 요소는 색조를 수정하여 사용자 입력에 대한 시각적 피드백을 제공합니다.
CSS `@키프레임` 지시문을 사용하면 빨간색 상자에 애니메이션을 적용하는 반면 버튼에는 전환을 사용합니다. 브라우저의 개발자 도구를 사용하면 이 두 가지 기법을 실시간으로 대조하고 평가할 수 있습니다.
개발자 도구를 사용하여 애니메이션 검사
Chrome 개발자 도구의 애니메이션 탭에 들어가려면 다음 단계를 따르세요:
현재 페이지를 마우스 오른쪽 버튼으로 클릭하면 웹페이지와 관련된 추가 작업 또는 설정을 위한 다양한 옵션을 제공하는 컨텍스트 메뉴에 액세스할 수 있습니다.
항목을 클릭하여 항목을 검사하세요.
화면 오른쪽 상단에 있는 세 개의 세로 점을 클릭하세요.
애플리케이션 또는 인터페이스의 ‘추가 도구’ 섹션으로 이동하여 ‘애니메이션’ 옵션에 액세스하세요.
앞서 설명한 작업을 수행하면 인터페이스의 하단 영역에 애니메이션 트레이가 표시되어 필요한 경우 애니메이션 트레이를 보거나 조작할 수 있음을 나타냅니다.
이 웹페이지에 표시되는 동적 시각 요소는 이 인터페이스의 애니메이션 섹션에 반영됩니다. 페이지를 새로고침하고 지정된 버튼 위로 마우스를 가져가면 앞서 언급한 애니메이션이 애니메이션 폴더 내에 나타납니다.
앞서 언급한 애니메이션 중 하나를 클릭하면 브라우저에서 이어지는 디스플레이에 실제 효능이 있음을 알 수 있습니다. 특히 상자의 애니메이션을 선택하면 브라우저는 다음과 같은 방식으로 키 프레임을 표시합니다.
개발자 도구는 지정된 빨간색 상자에 대해 하나의 애니메이션만 정의된 경우 선택한 요소와 관련된 모든 애니메이션, 즉 “회전 및 색상 변경” 애니메이션을 표시합니다. 따라서 사용자는 이 특정 애니메이션의 복잡한 부분만 볼 수 있습니다.
사용자는 수평 축을 따라 슬라이딩 컨트롤의 위치를 조정하여 애니메이션의 속도를 조작할 수 있으며, 왼쪽으로 갈수록 거리가 짧아지는 빠른 속도와 오른쪽으로 갈수록 거리가 길어지는 느린 속도에 대한 옵션을 사용할 수 있습니다. 또한 토글 가능한 아이콘을 사용하여 애니메이션을 일시 중지할 수 있으므로 사용자가 재량에 따라 동작을 중지할 수 있습니다. 또한 슬라이더 위에는 애니메이션 속도를 25% 또는 10%로 낮출 수 있는 백분율 표시기가 있어 사용자가 시청 환경을 더욱 세밀하게 제어할 수 있습니다.
웹 개발의 인스펙터 도구를 통해 버튼의 상태 변화를 살펴보면 버튼의 변환 과정과 관련된 구성 요소, 특히 전경색과 배경색을 포함하여 시각적으로 정의하는 색조와 음영을 관찰할 수 있습니다.
본 도구는 애니메이션의 기능을 파악하고 웹 사이트에서 발생할 수 있는 잠재적인 문제를 해결하기 위해 애니메이션을 조작할 수 있도록 합니다.
고급 애니메이션 예시
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 요소에는 “이동 단계”라는 애니메이션이 적용되어 위치와 배경 색조가 변경됩니다. 또한 개별 상자에는 고유한 애니메이션이 적용되어 전환 단계의 양을 조절할 수 있습니다.
세 번째 컨테이너가 화면의 오른쪽 가장자리를 향해 수평으로 진행함에 따라 초기 컨테이너 쌍은 각각 두 걸음씩 전진하여 디스플레이 영역의 종점에 동시에 도착하면서 절정에 이릅니다(따라서 두 번째 컨테이너의 이동 시작이 상대 컨테이너의 이동 시작에 앞서게 됩니다).
웹 페이지를 새로 고친 후 개발자 도구 내의 “애니메이션” 탭에 액세스하면 사이트에 존재하는 모든 애니메이션에 대한 포괄적인 세부 정보에 액세스할 수 있습니다.
동시에 존재하는 모든 요소는 동일한 타임라인에서 유사한 애니메이션 프로세스를 거칩니다. 이 경우 세 개의 컨테이너 각각에 대한 배경 음영과 배치 좌표가 동시에 변경됩니다.
키프레임을 사용하여 반복 애니메이션을 묘사할 때 그래픽 표현은 시퀀스 내에서 각 반복의 시작과 종료를 모두 나타내는 타임라인을 따라 별개의 지점으로 구성된다는 점을 인식하는 것이 중요합니다.
본질적으로 속이 빈 노드는 애니메이션 시퀀스 내에서 중요한 프레임 역할을 하는 반면, 채워진 다채로운 노드는 애니메이션 프로세스의 시작 및 종료 지점을 모두 나타냅니다. 애니메이션이 반복될 때마다 색이 짙게 칠해진 노드가 존재한다는 점에 주목할 필요가 있습니다.
고급 사용자는 CSS 속성을 조정하는 것과 유사하게 개발자 도구를 통해 애니메이션을 수정할 수 있습니다.애니메이션 인터페이스를 통한 모든 수정 사항은 요소의 인라인 스타일 내 ‘스타일’ 탭 아래에 표시되며, 개발자 도구 내의 해당 속성에도 반영됩니다. 이를 통해 실시간으로 실험하고 실제 프로젝트에 업데이트를 편리하게 전송할 수 있습니다.
Chrome 개발자 도구를 사용하여 CSS 디버깅하기
실제로 Google 크롬의 개발자 도구 기능은 애니메이션을 포함한 CSS 기반 요소의 문제를 해결하는 데 매우 유용한 리소스를 제공합니다. 이 포괄적인 인터페이스를 통해 사용자는 웹사이트의 전환 및 애니메이션의 각 단계를 매우 명확하게 파악할 수 있습니다.
웹사이트 개발에 능숙한 개인은 선택한 브라우저에 통합된 개발자 도구 또는 유사한 용도의 대체 도구의 성능과 기능을 포괄적으로 이해하는 것이 필수적입니다.