툴을 이용하여 애니메이션을 만들어보자!

이 강좌는 월간 w.e.b. HOW TO 2011년 06호에 게재되어 있습니다.

인터넷이 대중적으로 보편화 되면서 HTML컨텐츠를 많은 사람들이 만들어 낼 수 있었던 건 위지윅에디터의 힘이 컸었는데 그 중 나모웹에디터, 프론트페이지, 드림위버는 가장 사랑을 받았던 에디터였다. CSS3도 이에 발 맞추어 이미 발 빠르게 대응하는 회사들이 CSS를 기반으로 한 컨텐츠 자동생성용 프로그램 개발에 박차를 가하고 있다.

또한 기존 플래시의 아성에 힘입어 꿈쩍도 하지 않던 어도비도 대세의 흐름에 편승하고자 HTML5와CSS3를 쉽게 위지윅 기반으로 작업할 수 있는 툴 개발이 시제품 단계에 이미 와 있다.

지금까지 텍스트 에디터에 하드코딩을 하면서 습득하는 공부 방법 이였다면 이번 시간엔 각종 툴을 이용하여 자동 생성된 페이지 소스를 분석해 학습해 보는 것도 좋은 방법이 될 것이다.
1차적으로 CSS3Menu(v2.0)라는 프로그램을 사용하여 따라하기 식의 연재를 진행할 것이며 공부를 위하여 다운받아 사용하는 것은 무료버전으로 충분하므로 상업적인 목적으로 이용하려면 충분한 학습이 후 라이센스 비용을 지불하고 사용하면 될 것이다.

짧은 개발기간에 좋은 메뉴를 만들기가 쉽지 않다면 한번쯤 자동 생성되는 툴을 사용해 보는 것도 좋을 것이며 단계별로 진행하다 보면 독자는 불과 몇 번의 클릭에 CSS3를 사용하여 멋진 버튼 및 메뉴를 구성할 수 있을 것이다.

이번 장에선 지난 시간에 했었던 메뉴 만드는 작업을 툴을 이용하여 쉽고 간단하게 생성되며 구조화된 메뉴를 구성해 볼 것이며 또한 CSS3 애니메이션 툴도 소개하겠다.

연재순서

  1. CSS 선택자(Selector)의 종류 및 간단한 효과주기
  2. CSS3를 이용해 다양한 타이포그래피(Typography) 만들기
  3. CSS3를 이용한 이미지편집/효과주기(2D/3D)
  4. 플래시보다 쉽게 구조화되고 다이내믹한 메뉴 만들기
  5. 애니메이션 관련 요소들 / 툴을 이용하여 애니메이션을 만들어보자

IT시장에서는 웹사이트를 구축하는 방법 사용하는 툴 및 유행도 변화하고 있다.

비록 웹퍼블리셔 및 UI개발자들 중 많은 사람들이 아직 일부 브라우저에서 부족한 지원으로 인하여 CSS3를 사용하고 있지 않고 사용하길 꺼려하는 부분도 있다.

하지만 현재의 추세로 봤을 때 좀 더 새롭고 놀라운 기능을 하는 사람들만 살아남게 된다는 데에는 이견이 없을 것이다.

1. CSS3Menu Tool로 메뉴 만들기

지난 연재에 이어 이번엔 CSS를 기반으로 버튼 및 메뉴가 자동 생성되는 툴인 CSS3Menu를 이용하여 제작하는 방법을 소개한다.
기본 샘플예제는 웹사이트 개발 시 여러 가지 타입의 메뉴를 구성하는데 그 중에서 흔하게 볼 수 있으며 가장 중요한 메뉴방식으로 구성된 상단 2depth 메뉴를 만들어 볼 것이다.

일단 구조화된 메뉴를 구성하기 위하여 지난 연재와 마찬가지로 메뉴의 개수 및 내용을 정의해 보자.

필자는 아래 표와 같이 2depth 메뉴리스트를 정해서 Tool에 적용시켜보았다.

회사소개 생산제품 고객센터 게시판 메일
인사말조직도연혁 컴퓨터모니터프린터 새소식공지사항 [아이콘 적용]

[표1-1]

자 그럼 이제 기본적인 준비는 되었으니 CSS3Menu 프로그램을 다운받아서 사용해보는 일만 남았다.

1-1) 특징

  1. 자바스크립트가 필요없다.
  2. CSS를 기반으로 설계 및 CSS3 속성 적용
  3. 검색엔진 최적화
  4. 파일사이즈의 소형화
  5. 크로스브라우징 지원
  6. GUI인터페이스

1-2) download 및 설치 순서

현재는 최신판이 2.0이며 맥용과 윈도우용이 제공되고 있고 버튼 클릭 후 다운로드 시 이름과 이메일 주소만 입력하면 된다.

필자는 윈도우용을 다운받았는데 파일을 받으면 .zip형태로 제공되며 압축된 파일을 적절한 폴더에 풀면 CSS3menu-setup.exe 실행파일이 나온다.

1-3) 기본 사용법

파일을 실행하여 프로그램을 설치하고 설치가 다 되었다면 이제 프로그램을 실행해 볼 차례이다.

처음 프로그램을 실행하면 아래와 같은 화면이 나온다.

  1. 처음 기본으로 메인메뉴(1Depth) 3개의 메뉴가 나타나며 배경 회색은 document 영역이 된다.
  2. 1번의 각 Depth별로 메뉴를 추가/수정/삭제 위치이동을 할 수 있는 아이콘 모임이다.
  3. 왼쪽은 프로젝트 저장, 오른쪽은 Publish하여 html 및 css 결과물을 생성해준다.
  4. 메인메뉴, 서브메뉴 별 세부 style 설정을 할 수 있다.
  5. 프로그램에서 지원하는 디자인 템플릿 및 아이콘을 사용하여 좀 더 다양한 효과를 나타낼 수 있다.(테스트한 프로그램은 무료버전이라 선택상자의 회색부분은 사용할 수 없다.)
  6. 1~5번까지 사용방법을 간략하게 설명해 놓았다.

1-4) 예제샘플 만들기

기본적인 사용법 1~5번을 이용하여 앞에서 구조화 한 [표1-1]을 적용하여 컴퓨터관련 제조회사 홈페이지 메뉴를 아래와 같이 만들어 보았다.

위와 같이 적용된 프로젝트를 Publishing 해 보겠다.

상단 지구모양의 아이콘을 클릭하면 저장할 폴더가 나오는데 아래와 같이 저장하면 된다.

생성된 html 및 css소스를 에디터에서 열어보면 소스는 아래와 같다.

1. 자동 생성된 HTML

<ul id="css3menu1">
   <li><a href="#" style="height:28px;line-height:28px;">회사소개</a></li>
   <li><a href="#" style="height:28px;line-height:28px;">
      <span>생산제품</span></a>
      <ul>
         <li><a href="#">컴퓨터</a></li>
         <li><a href="#">모니터</a></li>
         <li><a href="#">프린터</a></li>
      </ul>
   </li>
   <li><a href="#" style="height:28px;line-height:28px;">고객센터</a></li>
   <li><a href="#" style="height:28px;line-height:28px;">
      <span>게시판</span></a>
      <ul>
         <li><a href="#">새소식</a></li>
         <li><a href="#">공지사항</a></li>
      </ul>
   </li>
   <li><a href="#" style="height:28px;line-height:28px;">
	<!--// css 우선순위를 위하여 a태그에 직접 style를 넣음 //-->
      <img src="CSS3 Menu_files/css3menu1/blue-tabs-321.png" alt="메일"/>메일</a>
   </li>
</ul>

구조적인 메뉴구조 모델을 위해

  • 하위에 2depth 메뉴를 구성하였으며 프로그램 메인 왼쪽 하단에 보면 각 버튼을 클릭했을 때 기본 옵션 및 텍스트 수정을 할 수 있는 Item속성 메뉴가 나온다.

2. 자동 생성된 CSS

ul#css3menu1,ul#css3menu1 ul{margin:0;list-style:none;padding:0;
background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
/* 웹킷계열과 모질라계열 지원하기 위하여 밴더 접두어 사용함 */
ul#css3menu1 ul{	display:none;position:absolute;left:0;top:100%;
-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#ffffff;
border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;}
/* radius효과 와 shadow효과 사용 */
ul#css3menu1 li:hover>*{	display:block;}
ul#css3menu1 li:hover{position:relative;}
ul#css3menu1 ul ul{position:absolute;left:100%;top:0;}
ul#css3menu1{display:block;font-size:0;float:left;}
ul#css3menu1 li{	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{outline-style:none;}
ul#css3menu1 a,ul#css3menu1 a.pressed{display:block;vertical-align:middle;
text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000000;
text-shadow:#FFF 0 0 1px;cursor:pointer;}
/* 2depth */
ul#css3menu1 ul li{float:none;margin:10px 0 0;}
ul#css3menu1 ul a{text-align:left;padding:4px;background-color:#ffffff;
background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;
-webkit-border-radius:0px;font:14px Tahoma;color:#000000;text-decoration:none;}
ul#css3menu1 li:hover>a{background-color:#0c97e2;border-color:#C0C0C0;
border-style:solid;font:bold 14px Trebuchet MS;color:#000000;text-decoration:none;
text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1 img{border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{display:none;}
ul#css3menu1 li:hover > a img.def{display:none;}
ul#css3menu1 li:hover > a img.over{display:inline;}
ul#css3menu1 li a.pressed img.over{display:inline;}
ul#css3menu1 li a.pressed img.def{display:none;}
ul#css3menu1 span{display:block;overflow:visible;
background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 a{padding:10px;background-color:#c1c1c1;
background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;
border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;color:#000000;
text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{background-color:#0c97e2;
background-image:url("mainbk.png");background-position:0 100px;border-style:solid;
border-color:#C0C0C0;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
background-color:#ffffff;background-image:none;font:14px Tahoma;color:#0978b3;
text-decoration:none;}
ul#css3menu1 li.topfirst>a{height:18px;line-height:18px;border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;
-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst>a.pressed{line-height:18px;}
ul#css3menu1 li.topmenu>a{height:18px;line-height:18px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{	line-height:18px;}
ul#css3menu1 li.toplast>a{height:18px;line-height:18px;border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;
-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast>a.pressed{	line-height:18px;}

1-5) 완성된 결과 페이지

2. CSS3 Animation 속성들

CSS3가 개체에 다이내믹한 효과를 주기 위하여 새로운 기능들이 추가 되었는데 그 중에 대표적인 것들이 transform, transition, animation 속성 등이다.
지난 연재에서 transform, transition 속성은 다뤄봤기 때문에 이번엔 animation 속성에 대하여 알아보겠다.
animation 속성은 웹페이지에 플래시의 모션기능과 같은 애니메이션을 구현할 수 있는 속성이며 플래시의 키프레임과 비슷한 개념을 사용하고 있다. (키프레임-애니메이션을 구성하는 동작의 특정 시작점과 끝점 자체를 의미하며 그 점을 연결하여 애니메이션 효과를 나타낼 수 있다.)

속성 설명 초기값
animation <animation-name> || <animation-duration><animation-timing-function> || <animation-delay><animation-iteration-count> || <animation-direction>
< animation-play-state>

각 개별 초기값

animation-delay 애니메이션이 시작되기 전 대기시간을 지정한다.

0

animation-direction 키프레임의 연결 방향을 지정한다.

Normal

animation-duration 애니메이션이 실행되는 총 시간을 지정한다.

0

animation-iteration-count 애니메이션 반복횟수를 지정한다.

1

animation-name 키프레임의 이름을 여기에 매핑 시키고 key프래임을 지정한다.

None

animation-play-state 애니메이션의 플레이 상태를 지정한다.

Running

animation-timing-function 키프레임간 변화의 정도를 지정한다.

ease

[표2-1] 참고: http://www.w3.org/TR/css3-animations/

2-1) 간단예제

animation 속성을 이용하여 간단한 효과를 만들어보자.

아래에 만들어 볼 내용은 애니메이션의 시작과 끝 키프레임으로 정의하였으며 애니메이션 속성은 편도 5초동안 방향을 왔다갔다 하면서 3번 실행된다. 그 후 이미지의 원본 사이즈 대로 보이게 되는 예제를 만들 것이다.

1. HTML

<div>
  <img src="애니메이션 대상이 될 이미지.gif" alt="" />
</div>

마크업은 간단하게 이미지 태그만 들어가면 기본코드가 완성됨.

2. CSS

img { /* 이미지에 기본 애니메이션 속성을 준다. */
   -webkit-animation-name: sampleani ;
    /* 애니메이션 이름- 아래 @-webkit-keyframes sampleani와 같아야 함 */
   -webkit-animation-duration: 5s;
   -webkit-animation-iteration-count: 3;
   -webkit-animation-timing-function: ease;
   -webkit-animation-direction: alternate;
 }
@-webkit-keyframes sampleani {
 from {width: 100px;}
 to {width: 300px;}}

2-2) 완성된 결과 페이지

간 단예제를 사파리나 크롬에서 출력 시 보기 쉽게 하기 위하여 왼쪽과 오른쪽 이미지 두개를 캡쳐 하였으나 사실은 왼쪽 이미지의 왼쪽 상단이 기준점이 되어 사이즈가 오른쪽만큼 3번 커졌다 작아졌다를 반복하다가 맨 마지막엔 원본사이즈 출력되는 예제이다.

3. CSS3 Animation Tool

CSS3 애니메이션의 응용분야가 어떤 분야가 있을까?
현재 가장 두각을 나타내는 부분은 역시 상업적인 온라인 광고와 게임분야이다.
특히 온라인 광고분야는 시간을 다투는 분야이므로 퍼포먼스를 최대한 끌어낼 필요가 있다. 그래서 CSS3 애니메이션 전문 툴을 사용한다면 짧은 시간에 최대한의 효과를 낼 수 있을 것이다.
그래서 필자는 요즘 JS API로 유명한 Ext와 Sencha Touch를 개발한 Sencha의 Animator Beta1 을 사용하여 간단한 예제를 만들어 보겠다.

http://www.sencha.com/products/animator/ 에서 프로그램을 다운 받는다.

현재는 Beta1 버전이고 라이센스는 Developer Preview이며 맥용과 리눅스(32/64bit)용 윈도우용이 제공되고 있다.

사이트에 접속 후 product 메뉴에서 Sencha Animator를 선택하면 나타나는 화면의 오른쪽 상단
[Download] 버튼을 클릭하면 바로 다운로드가 된다.
프로그램을 설치하고 처음 실행하면 아이디와 패스워드를 묻는 창이 나타나는데 이때 Sancha 사이트의 등록페이지로 이동한다.

프로그램을 사용해야 하므로 Sancha Forum에 등록해야 한다.

등록을 마치면 등록시 입력했었던 자신의 메일로 등록확인메일이 오니 메일 받은메일함에 가서 주소를 클릭해 줘야 완벽하게 등록을 마치게 된다.
그리고 나서 아래의 로그인 화면에서 등록했던 이름과 패스워드를 입력한다.

계정입력 후 login버튼을 클릭하면 라이센스 관련 창이 나오고 아래의 응용프로그램이 실행된다.
초기 화면은 깔끔한 편이며 플래시나 gif애니메이션 툴을 사용해본 독자라면 인터페이스가 익숙할 것이다.

3-1) 기본 사용법

  1. 플래시와 유사한 개체트리가 보이며 오른쪽 타임라인이 제공된다.
    개체트리는 레이어 형태로 관리를 할 수 있다.
    (왼쪽에 개체도구 모음이 있고 개체 툴바를 이용하여 애니메이션에 새로운 개체를
    추가할 수 있다.)
  2. 스테이지 컨트롤 하는 기능으로 기존에 제작해둔 애니메이션을 미리 볼 수 있다.
  3. 실제 컨텐츠가 들어갈 stage
  4. 키프레임/개체/스테이지 속성들을 확인 및 제어 할 수 있다.
  5. scene 관리자로 애니메이션을 묶어서 여러개 장면들을 연결 관리 할 수 있다.

처음 tutorial 형태로 제공되어지는 예제의 실행된 화면을 보고 마크업도 확인해 해 보겠다.

3-2) Full Source 확인

아래 이미지와 같이 File 메뉴에 Export Project메뉴를 선택하면 full source를 확인할 수 있다.
현재 페이지 지면관계로 모든 소스를 표기하지는 못하고 대략적인 흐름을 파악할 수 있도록 축약해서 소스코드를 표시할 것이다.
직접 사이트에서 다운받아서 코드확인을 해보길 바란다.


새창 형태로 Full Source가 제공되며 따로 저장이 가능하다.

/* DOCTYPE html5 */
<!DOCTYPE html>
...
/* javascript */
<script type="text/javascript">
</script>
/* 현재는 웹킷계열 엔진에서만 적용되기 때문에 벤더 접두어를 적용 */
<style type="text/css">
#AN-sObj-1141{
 -webkit-transform: translate3d(21px, 22px, 0px)
  rotateX(0deg) rotateY(0deg) rotateZ(45deg);
  width: 100px;
  height: 100px;
  background-color: rgba(192,192,192,1);
  top:0;
   left:0;
 }
/* 애니메이션 효과를 위한 키프레임 */
@-webkit-keyframes AN-ani-1167 {
  0% {
    -webkit-transform: translate3d(66px, 122px, 0px);opacity:0;
  }
  0.01% {
    -webkit-transform: translate3d(66px, 122px, 0px);opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(66px, 122px, 0px);opacity: 1;
  }
}
/* html 구조 */
<ol>
  <li id="scene-1">/* 두개의 scene로 구성되었는데 2번째 */
  <div id="ext-gen1231">
    <div id="AN-sObj-1188"></div>/* stage이름 */
    <div id="AN-sObj-1189">
      <span>Scene 2</span>
    </div>
    <a id="AN-sObj-link-1190" href="goToSceneID(0)" target="_self">
    <div id="AN-sObj-1190">
     <span>Return to Beginning</span>
    </div>
    </a>
    <div id="AN-sObj-1191">
      <span>Scenes allow you to break ...</span>
    </div>
  </div>
  </li>
</ol>

3-3) 브라우저 확인

매번 하는 말이지만 현재 브라우저에서 확인하려면 크롬이나 사파리로 확인하여야 원하는 결과 또는 다이내믹한 화면을 얻을 수 있을 것이다.

4. 마치며

이상으로 간단하게 CSS를 중심으로 메뉴,애니메이션을 자동으로 제작해 주는 Tool과 애니메이션 속성에 대하여 알아 보았는데 벌써 이번이 마지막 연재가 되었다.

“배움은 끝도 없고 왕도란 없다.”

하나씩 차근차근 학습하여 내 것으로 만들고 본 연재에 기재된 CSS3 속성들 정도만 정확하게 알고 응용하여 사용할 수 있더라도 큰 도움이 될 수 있을 것이고 언젠가 자신의 실력이 늘어나 있는 것을 발견할 수 있을 것이다.
지금까지 모두 5회차 연재를 진행하며 HTML마크업과 CSS의 여러가지 속성들을 다루어 보았는데 많은 부분을 다루지 못한 것 같아 아쉬운 연재가 되었다.
본 연재와 관련된 모든 분들께 감사의 인사를 드린다.

이 글과 비슷한 종류의 글은 'CSS' 카테고리에서 더 찾아볼 수 있습니다. 또한, , , , , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.