이 게시물은 2020년 8월 28일 수정판입니다.

이 코스에 대해서

CSS3에서 사용할 수 있는 새로운 속성을 통해, 그동안 자바스크립트나 외부 애플리케이션을 통해서만 가능했던 각종 애니메이션 효과를 직관적인 CSS 구문을 통해 간단히 추가할 수 있게 되었습니다. 물론, 너저분한 제조사별 전용 속성(Vendor Specify Prefix)을 사용한다거나, 혹은 일부 구 버전 웹 브라우저에서는 아예 구현조차 안되기도 하지만, 사람들은 하루가 다르게 점점 더 좋은 버전의 웹 브라우저를 써나가고 있으며, 브라우저 제조사도 하나 둘씩 전용 속성을 삭제하고 있습니다.

단순히 동영상 파일을 재생하는 것은 일방적인 의사소통밖에 되지 않지만, 웹 상에서 작동하는 애니메이션은 이용자와 상호작용이라는 놀라운 커뮤니케이션을 가능하게 합니다. 그것이 웹 애니메이션의 매력이라고 할 수 있겠죠.

웹에서 애니메이션을 구현하기 위한 방법으로는 여러가지가 있습니다. CSS를 사용하기도 하고, Canvas와 Javascript를 이용하기도 합니다.

아쉽게도, 웹 애니메이션은 Adobe After Effects나 Cinema 4D 처럼 하나의 툴 사용능력만으로 구현할 수 있는 영역이 아닙니다. 애니메이션이 작동하는 메커니즘은 개발자의 프로그램 스크립트가 필요하고, 이 프로그램을 다시 디자인으로 포장해야 하기 때문에, 디자이너와 개발자의 콜라보레이션이 많이 요구되는 어려운 영역입니다.

문서의 내용은 개발자를 양성하려는 것이 아니며, 디자이너가 이해하고 있으면 도움이 될 만한 지식을 적은 것입니다. 너무 기술적인 메커니즘을 깊이 파려고 하지 말고, 가볍게 훑어 보면서 이해하는 것이 이 문서를 대하는 올바른 자세입니다.

제조사별 전용 속성(Vendor Specify Prefix)의 처리

새로운 CSS 속성이 공표될 때마다 웹 브라우저 제조사들은 그것을 처리하기 위해 나름의 개발기간을 가집니다. 이 기간 동안 임시적으로 속성 앞에 각 제조사의 렌더링 엔진 이름을 딴 접두어를 붙여 속성 표현을 테스트하는데, 이것을 제조사별 전용 속성이라 합니다. 이 전용 속성을 함께 선언하지 않을 경우 일부 구 버전 브라우저에서는 애니메이션 효과가 나타나지 않을 수도 있습니다.

div {
    -ms-transition-delay: 3s;
    -o-transition-delay: 3s;
    -moz-transition-delay: 3s;
    -webkit-transition-delay: 3s;
    transition-delay: 3s
}

현재는 CSS를 사용하여 움직임을 표현하는 속성에 이런 전용 속성을 붙여 줄 필요가 거의 없어지긴 했지만, 걱정이 되는 분은 접두어를 자동을 붙여 주는 스크립트를 사용해도 좋습니다. 또, 제조사별 전용속성에 대해 좀 더 자세히 알고 싶다면 동그란우주님의 CSS3 벤더 프리픽스 기사를 읽어보세요. 알기 쉽게 정리되어 있습니다.