쏭군은 열정 드리머

HTML5에 대한 관심이 뜨겁습니다. HTML5와 더불어 CSS3에 대한 많은 분들의 관심 또한 뜨겁습니다. HTML5로 된 문서를 디자인하기 위해서는 CSS3와 궁합을 맞추는 것이 최적이기 때문입니다. CSS3와 관련한 몇 가지 이야기들은 블로그에서 몇 번 언급한적이 있습니다.

CSS2.1에서 CSS3로 버전업이 되면서 가장 눈에 띄는 부분 중 하나는 바로 CSS3의 애니메이션 기능입니다. 아직은 드래프트 상태라 CSS3의 애니메이션 기능이 초라해 보일수도 있지만 조금 더 다듬어 진다면 일정 부분은 향후 플래시 애니메이션을 대체하는 용도로도 사용될 수 있으리라 생각됩니다.

CSS3의 애니메이션은 트랜지션 속성과 애니메이션 속성을 사용하여 만들 수 있습니다.

단순히 요소의 형태를 간단하게 전환시킬때는 트랜지션 속성을 사용하면 됩니다. 조금 더 강력한 애니메이션을 구현하기 위해서는 CSS3의 애니메이션 속성을 사용해야 합니다. CSS3에서 강력한 애니메이션을 구현할 수 있게 된 것은 바로 이 'animation'속성과 새로이 도입된 '키프레임'개념 덕분입니다.

@keyframes 키프레임이름 { from { // 애니메이션 시작시 모습 } 50% { // 애니메이션 재생 50% 구간의 모습 to { // 애니메이션 끝 부분 모습 } } .move { // .move 요소의 애니메이션을 어떤 방식으로 처리할 것인지... animation-name:movebox; animation-duration:1s; animation-iteration-count:1; animation-timing-function:linear; }
플래시와 같이 타임라인을 기반으로 하는 애니메이션 저작 도구를 사용해 보셨다면 CSS3의 애니메이션 속성과 키프레임 개념을 쉽게 이해하실 것 입니다. 문제는 바로 실제 CSS3로 애니메이션을 제작할때 직면할 리소스 문제입니다. 복잡한 애니메이션을 만을 때 일일이 방대한 CSS코드를 입력하는 것은 여간 번거로운 일이 아닐 것 입니다. 게다가 미리 애니메이션을 눈으로 확인하기 전까지는 코드가 제대로 된 것인지도 알기 힘들 것 입니다.

CSS3 애니메이션을 쉽게 구현할 수 있도록 도와주는 위지윅 툴 Sencha Animator 설치
이럴 때 사용할 수 있는 도구가 바로 'Sencha Animator'와 같은 툴 입니다. 아직 완벽하지는 않은 툴이지만 충분히 편리하고 쉽게 CSS3 애니메이션을 구현할 수 있도록 도와주는 툴입니다.

Sencha 배포페이지

에 접속해서 간단한 개인정보를 입력하고 가입을 완료합니다.

Sencha 포럼에 가입하고 프로그램 처음 실행시 로그인을 해야 합니다

가입을 완료 하셨다면 다시 프로그램 최초 실행시 떴던 로그인 창으로 이동합니다. 포럼에 가입할 때 사용한 아이디와 비밀 번호를 입력하시면 Sencha Animator를 곧바로 사용하실 수 있습니다.

Sencha Animator 구동 모습

프로그램을 실행해보시면 전체적으로는 플래시와 비슷한 느낌을 받으실 수 있습니다. 프로그램 사용 방법이 어렵지는 않으므로 직접 이리저리 만져 보시면서 익숙해지시면 될 것 같습니다.

프로그램 사용 설명서 (HTML 페이지 버전)
프로그램 사용 설명서 (동영상 버전)
Sencha Animator로 만들어 CSS3로 구현된 데모 애니메이션들

십년도 넘은 시간 이전에 나모웹에디터와 드림위버와 같은 위지윅 툴이 인기를 끌었습니다. 그런 툴을 사용하기 이전에 HTML이나 자바스크립트에 대해서 충분히 이해하는 사람과 그렇지 않은 사람의 실력은 훗날 많은 차이가 나게 되었습니다. Sencha Animator와 같은 툴이 앞으로도 많이 등장할 것 입니다. 그렇지만 CSS3의 기본적인 공부를 등지고 이런 툴을 사용하는데 먼저 익숙해지는 것은 권하지 않습니다. 우선 CSS3의 문법을 충분히 공부하고 튼튼한 배경 지식을 가지고 있는 상태에서 Sencha Animator와 같은 툴을 이용하여 작업 시간을 단축시킨다면 더욱 좋을 것 입니다.