애니메이션 구조 잡기
영상에서 볼 수 있는 애니메이션을 CSS로 옮길 수 있을까?
이번에 연재하는 글들에선 브라우저 서포트(Browser support)에 대한 내용은 자세히 다루지 않습니다.
크롬 브라우저를 기준으로 작성되었으며, IE나 타 브라우저에서 안 보이는 부분들이 생길 수 있습니다.
브라우저 서포트에 문제가 생길 수 있는 부분은 따로 표기해놓겠습니다.
CSS 애니메이션에 대한 글을 연재하게 된 계기는
"영상에서 볼 수 있는 애니메이션을 CSS로 구현할 수 있을까?"라는 생각에서부터였습니다.
자바스크립트 없이 CSS만을 사용하여 거의 그대로 옮길 수 있을까요?
결론부터 말씀드리자면 "어느 정도 가능하다."입니다.
복잡한 애니메이션은 자바스크립트와 함께 사용해야 하겠지만,
아래 GIF처럼 간단한 모션들의 조합으로 이루어진 애니메이션은 충분히 가능합니다.
작업에 쓰인 Transform 함수는 scale, rotate, translate로 세 가지입니다.
CSS로 구현한 애니메이션
참고 영상 : https://www.youtube.com/watch?v=KoEOYF3HApo주변에 파티클이 있는 GIF는 참고한 영상에서 캡처한 이미지입니다.
CSS 애니메이션만으로도 꽤 비슷하게 만들어낸 것 같네요.
완벽하게 똑같이 만들려면 Aftereffects(영상프로그램)에서 쓰였던
value graph(혹은 speed graph)의 베지어 곡선 값을 알아야 가능할 것 같습니다.
CSS에선 animation-timing-function: cubic-bezier( )로 조절합니다.
잘 모르시겠다면 "CSS 애니메이션 퀄리티를 높여보자"를 보고 오시면 도움이 될 거예요.
예제를 통해 설명하려고 자세히 써놓지는 않았지만 개념은 파악하실 수 있을 겁니다.
애니메이션의 디테일은 animation-timing-function으로 언제든지 높일 수 있지만
구조를 잘못 잡고 시작한다면 완성도 못하고 구현하는 내내 고통받으실 수 있습니다.
기본 작업이 탄탄해야 애니메이션을 구현하는 데에 있어서 수월하죠.
그럼 애니메이팅을 하기에 앞서 어떻게 구조를 잡아야 하는지 알아봅시다.
정적인 이미지를 자세히 보면 텍스트, 이미지 그리고 아웃라인으로 나뉘어 있습니다.
하지만 처음 봤을 땐 어떻게 요소들을 쪼개고 구조를 잡아야 할지 감이 안 잡힐 거예요.
입체적으로 본다면 어떨까요?
구조를 잡을 때 입체적으로 생각하시면 더 쉽게 요소별, 그룹별로 쪼갤 수 있습니다.
평면으로 봤을 때보다 훨씬 이해하기 쉽죠?
요소별로 분리하면 THE ARAD, PLAY, WINTER UPDATE, 캐릭터이미지, 갈색 선 4개, 흰색 선 4개입니다.
요소들을 그룹으로 묶으면 텍스트끼리, 이미지, 선분들끼리(아웃라인) 총 3개의 그룹으로 할 수 있겠네요.
텍스트
- THE ARAD
- PLAY
- WINTER UPDATE
이미지
- 캐릭터 이미지
아웃라인
- 갈색 선 4개
- 흰색 선 4개
이처럼 요소들을 그룹으로 잘 묶고, 관리하는 것이 CSS 애니메이션에서 핵심입니다.
그리고 애니메이션은 각각의 그룹과 그룹 안의 요소들에게 잘 적용시키면 끝!
아직 요소들을 분리하고 그룹으로 묶는 것에 대해 감이 안 잡히신다면,
쌓여있는 순서(z-index)를 기준으로 생각하셔도 좋고, 요소가 등장하는 순서로 생각하셔도 좋아요.
기준을 세워서 차근차근 분리하고 묶다 보면 깔끔하게 정리하실 수 있을 거예요.
위 예제를 html 코드로 본다면 이렇게 될 거예요.
<div class="text-wrapper">
<h3 class="subtitle"> THE ARAD </h3>
<h1 class="title"> PLAY </h1>
<h3 class="subtitle"> WINTER UPDATE </h3>
</div>
<img class="img" src="img/inquisitor.png">
<div class="outline-wrapper">
<div class="outline"></div>
<div class="outline"></div>
<div class="outline"></div>
<div class="outline"></div>
</div>
생각했던 것보다 복잡해 보이진 않죠?
실제로 작업할 땐, 위의 기본 구조에서 div 태그나 class를 추가하면서 작업할 거예요.
왜 추가하고, 어떤 영향을 주는지에 대해선 자세히 쓰려고 노력할 예정입니다.
브라우저 서포트때문에 구조가 바뀔 수 있는 부분도 있는데 이건 작업하면서 따로 표기해두겠습니다.
미리 살짝 말해드리자면, 이미지 마스킹에 관련된 부분이에요.
구조 자체에서 더 설명할 내용은 더 없는 것 같네요. 어려운 작업도 아니고 생각만 잘하면 됩니다.
"요소들을 잘 쪼개고, 그룹으로 잘 묶는다."는 것만 염두해두시면 될 것 같습니다.
다음 글에선 CSS 기초작업과 아웃라인 애니메이션 작업에 대해 써볼게요.
벨루가에서는 함께 일하실 분을 모시고 있어요.
같이 광복 이후, 한 세기 넘게 변화가 없던 15조 원에 달하는 주류� 시장을 바꿔나가봐요.
