애니메이션 웹 사이트를 만들 수 있는 라이브러리 Scene.js를 소개합니다
Scene.js는 애니메이션 웹 사이트를 만들기 위한 JavaScript 애니메이션 타임라인 라이브러리입니다. 애니메이션 타임라인 라이브러리로서 Scene.js는 물체의 움직임과 위치를 시간순으로 나열할 수 있게 합니다.
또한 문법은 CSS 애니메이션과 비슷하여 사용하기 쉽고, JavaScript와 CSS 플레이를 모두 지원하므로 편리합니다. 이 글의 본문에서는 Scene.js 특징을 자세히 설명하려고 합니다.
여러 요소를 동시에 제어할 수 있습니다
애니메이션이 적용된 요소마다 애니메이션의 시작 시간과 끝나는시간은 다르기 때문에 제어하기가 까다롭습니다.
Scene.js는 여러 애니메이션 요소를 동시에 제어할 수 있어 시작 시간과 끝나는 시간이 전부 다르더라도 반복재생이 가능합니다.
또한 시간에 대해 완벽하게 컨트롤할 수 있어 어느 시간을 가리키든 그 시간에 대한 정확한 움직임을 보여줄 수 있습니다.
CSS 문법을 변용하여 사용하기 쉽습니다.
Scene.js는 CSS에서 Keyframes를 사용하는 방법과 비슷하고 사용하는 속성의 이름을 그대로 사용하기 때문에 CSS 애니메이션을 사용하던 사람들도 쉽게 쓸 수 있습니다. 다음은 CSS Keyframes 코드입니다.
하지만 CSS 애니메이션은 상대적인 시간(%)을 쓰고 이름이 길거나 사용자 정의한 함수를 사용할 수 없는 등 불편함이 존재합니다. 그래서 Scene.js는 다음과 같이 개선했습니다.
상대적인 시간(%) 대신 절대적인 시간(s)을 사용합니다
CSS 애니메이션은 100%를 기준으로 상대적인 시간(단위: %)을 씁니다. 애니메이션이 진행되는 시간을 미리 알고 있으면 %로 쓰기 쉽지만 작성하다 보면 예상보다 더 많은 시간이 걸리거나 덜 걸릴 수 있습니다. 그 때마다 상대적인 시간을 수정해야 하는 불편함이 발생합니다. 하지만 Scene.js는 절대적인 시간(단위: s)을 쓰기 때문에 그런 불편함을 생각할 필요가 없습니다.
크로스 브라우징 지원과 애니메이션 속성 접두사의 생략
애니메이션과 관련된 속성에는 animation- 라는 접두사가 있습니다. 또한 크로스 브라우징을 지원하기 위해 벤더 접두사(-webkit-, -moz-, -o-)까지 붙여야 하기 때문에 이름이 길어집니다.
Scene.js는 animation 과 관련된 속성은 animation- 접두사를생략할 수 있고 크로스 브라우징을 지원하기 때문에 animation, transform, keyframes 3가지 속성은 벤더를 포함한 접두사 생략이 가능합니다.
JavaScript와 CSS 플레이 방법을 모두 지원하여 편리합니다
Scene.js는 JavaScript와 CSS 플레이 방법을 모두 지원합니다. 즉, 어떤 방법을 사용해도 동일한 애니메이션을 표현할 수 있습니다. 단, 두 언어의 장점은 다르니, 목적에 맞게 선택해서 사용하는 게 좋습니다.
다음은 JavaScript로 애니메이션을 플레이 했을 때의 장점입니다.
- 중간 제어와 상호 작용이 가능 : 마우스, 키보드, 브라우저 등과 같은 상호작용 또는 DOM 이벤트를 통해 애니메이션에 동적인 변화가 필요할 때가 있습니다. 정적인 상태인 CSS 애니메이션으로 제어하기 힘들기 때문에 Javascript 애니메이션을 사용해야 합니다.
- CSS로 표현할 수 없는 속성 지원: HTML, DOM Attribute은 CSS로 구현할 수 없고 브라우저가 지원하지 않는 속성도 있습니다. Internet Explorer 9에서는 CSS 애니메이션을 지원하지 않고 CSS를 이용한 SVG 애니메이션도 지원하는 브라우저가 매우 한정적입니다. 이럴 경우 JavaScript 애니메이션을 사용해야 합니다.
CSS 애니메이션의 장점은 JavaScript 애니메이션보다 좋은 성능을 자랑합니다. JavaScript 애니메이션을 사용하면 JavaScript 특성상 하나의 스레드에서 실행되기 때문에 처리할 양이 많으면 애니메이션이 끊겨 보일 수 있습니다. 하지만 CSS 애니메이션은 다른 스레드에서 작동되기 때문에 훨씬 부드럽게 보일 수 있습니다.
그렇다면 Scene.js에서 CSS 속성과 포맷을 사용할 수 있을까요? Scene.js는 Javascript 라이브러리이기 때문에 CSS 속성과 포맷을 그대로 사용할 수 없지만 Javascript 포맷으로 비슷하게 다음과 같이 구현했습니다.
value의 다양한 타입을 지원
CSS 속성은 다양한 타입을 지원하며 브라우저 내부에서 계산하기 위한 값으로 변환이 됩니다. Scene.js도 마찬가지로 브라우저 내부에서 해주는 변환을 대신해줌으로써 JavaScript에서도 다양한 타입을 처리할 수 있습니다.
- number: 내적을 하기 위해서는 기본적으로 숫자여야 합니다.
- string(number + unit): 값 중
10px,10%,10em등 과 같이 숫자를 나타내지만 단위가 있어 문자열인 경우입니다. 이 경우는 number과 unit을 나눠 숫자만 내적합니다.
- color: hex, rgb(a), hsl(a)같은 color model을 지원합니다. 이러한 color model도 내적이 가능합니다.
- string: 내적할 수 없는 문자열은 시간이 1이 되기 전 첫 번째 값을 나타내며 1이 되면 두 번째 값으로 나타냅니다.
CSS에서 사용하는 easing을 제공합니다
easing(timing-function)은 진행 속도를 변화시킵니다. 처음은 빠르게 진행하다가 마지막엔 느리게 진행하는 효과(또는 반대로), 튀어 오르는 효과처럼 애니메이션 요소에 속도감을 부여할 수 있습니다.
다음 링크에서는 easing적용의 차이를 보여줍니다.
Scene.js에서는 CSS에서 지원하는 easing을 상수로 제공하고 있으며 JavaScript와 CSS 어느 방법으로 재생해도 동일한 모습을 보여줄 수 있습니다. CSS에서 지원하지 않더라도 직접 만들어서 사용할 수도 있습니다.
다양한 이펙트 프리셋을 제공합니다
CSS 애니메이션을 쉽게 쓸 수 있는 라이브러리라고 해도 CSS를 잘 모를 수 있습니다. CSS 속성 이름보다 애니메이션 효과 이름에 더 익숙한 분들도 계실 수 있습니다. @scenejs/effects는 CSS 속성을 이용해 많이 사용하는 애니메이션을 프리셋으로 지원해 더 쉽게 쓸 수 있도록 도와줍니다.
다음은 Scene.js에서 지원하는 이펙트 프리셋입니다.
- wipeIn / wipeOut
- zoomIn / zoomOut
- fadeIn / fadeOut
- blink
- flip / flipX / flipY
- shake / shakeX / shakeY
- transition
transition을 이용하면 다음 데모같이 장면 간의 전환에 효과를 줄 수 있습니다.
React, Angular, Vue, Preact 프레임워크를 지원합니다.
Scene.js는 주요 프레임워크를 지원합니다. 각 프레임워크의 문법에 맞게 사용하면 그냥 Scene.js를 사용하는 것보다 더 편하게 사용할 수 있습니다.
- React에서 사용하려면: react-scenejs
- Angular에서 사용하려면 : ngx-scenejs
- Vue에서 사용하라면 : vue-scenejs
- Preact에서 사용하려면 : preact-scenejs
결론
이 글에서 Scene.js의 특징과 CSS를 대신해서 JavaScript에서 애니메이션을 사용할 수 있는 방법을 간략히 설명하고 그 예시를 Codepen 데모를 통해 보여줬습니다. 이 라이브러리를 이용하여 만들 수 있는 것은 무궁무진합니다. 단순한 애니메이션부터 복잡한 장면 애니메이션까지 만들 수 있고 이 것을 이용한 다양한 프로젝트들도 준비되어 있습니다.
코드와 프로젝트는 GitHub에서 확인 할 수 있으며 CodePen에 CSS 애니메이션을 지속적으로 업데이트 하고 있습니다.
Scene.js사용법 소개를 마지막으로 이 글을 마치겠습니다.
npm 또는 script 을 통해 사용하시려면 다음 명령어를 실행합니다.
- npm
npm install scenejs- script
<script src="//daybrush.com/scenejs/release/latest/dist/scene.min.js"></script>주요 기능의 소개는 Scene.js 기능페이지를 참고하시기를 바라며
메소드 / 이벤트 등의 사용법은 Scene.js API문서를 참고하시길 바랍니다.
궁금한 점이나 요청사항이 있으면 daybrush@gmail.com or Twitter으로 자유롭게 연락주세요.
감사합니다.
