Beautiful CSS

Inside Web Animation

웹 애니메이션 파헤치기

Visual Design and Art School Logo Academy of Art University Logo
Related :

교육 카드 개설 현황

Channels :
Units :
Draft :

사이드바 2

Meta Info:

  • 2014년 9월 4일
  • Hyunhwa Jeong
  • 4,940 Views
  • 7 Comments

Table of Contents

웹 애니메이션 파헤치기

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

Level 1 :

CSS3 : Transition

트랜지션

마우스오버와 같은 액션에 간단하고 효과적인 애니메이션을 줄 수 있습니다. 사용이 간단하기 때문에 여러 방면에 유용히 사용할 수 있습니다.
Level 2 :

CSS3 : 2D Transform

2D 트랜스폼

2차원적인 평면에서 객체의 변형과 모양새를 표현합니다. 애니메이션 전용 속성은 아니지만, 애니메이션 속성과 연계해서 활용합니다.
Level 3 :

CSS3 : 3D Transform

3D 트랜스폼

3차원 공간에서 객체의 변형과 모양새를 표현합니다. 애니메이션 전용 속성은 아니지만, 애니메이션 속성과 연계해서 활용합니다.
Level 4 :

CSS3 : @keyframes Rule & animation

키프레임과 애니메이션

3차원 공간에서 객체의 변형과 모양새를 표현합니다. 애니메이션 전용 속성은 아니지만, 애니메이션 속성과 연계해서 활용합니다.

이 코스에 대해서

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

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

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

아쉽게도, 웹 애니메이션은 Adobe After EffectsCinema 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 벤더 프리픽스 기사를 읽어보세요. 알기 쉽게 정리되어 있습니다.


Subscribe
Notify of
guest
7 Comments
Inline Feedbacks
View all comments
trackback

[…] 웹 애니메이션 파헤치기 · 웹 폰트 파헤치기 · 사이드바 만들기 · 카테고리 게시물 목록 추출하기 […]

trackback

[…] 학습의 연계성을 위해 이 문서를 읽기 전에 CSS3 : 2D Transform 혹은 웹 애니메이션 파헤치기 기사를 먼저 읽으시길 […]

신화창조

훌륭한 강의 내용 감사드립니다.

beautifulcss

요즘 날씨도 더운데 공부하시느라 힘드시겠습니다. 힘내세요.

신화창조

강의 자료 만드시느라 더 고생하실 것 같아 힘드는 줄 모르겠습니다.

언제 새로운 내용이 업로드 될지 궁금하기도 하구요.

메뉴바 css로 멋지게 장식되어지길 손꼽아 기다려 봅니다.

수고하세요.

beautifulcss

네 메뉴바는 일단 없애야지.. 넣을 것이 없네요. 사이트에 큰 숫자 카운터가 있는데, DRAFT라고 적힌 부분의 숫자가 현재 제가 작성하고 있는 문서의 수 입니다. 매일 조금씩 작성은 하는데 시간이 참 많이 걸린답니다.

밤하늘유령

정말 좋은 내용입니다. 공부 많이하고 갑니다.
앞으로 매일 들리게 될 것 같습니다.
도움이 많이되었습니다. 최고!