마이컴 1993년 4월호 - 그래픽 아트스쿨, 컬러 사이클링을 활용한 2차원 애니메이션

마이컴 1993년 4월호 - 그래픽 아트스쿨

컬러 사이클링(CYCLING)을 활용한 2차원 애니메이션  

디럭스페인트II의 효과 중에서 특이할 만한 것이 있다면 바로 컬러 사이클링(CYCLING)이다. 사이클링이란, 말 그대로 '순환'을 의미하는 것으로, 디럭스페인트에서 지정한 팔레트 범위 내의 컬러들이 순서대로 순환하는 것을 말한다. 

이번 호에서는 이러한 사이클링 기법을 토대로 하여 이를 활용한 기초적인 애니메이션을 만들어 보기로 하자. 

원리를 제대로 이해하면 사이클 링을 활용하여 어떻게 움직이는 것처럼 보이게 되는지 보다 이해하기가 쉬울 것이다.

기본적인 애니메이션의 이해

애니메이션이란 무엇일가? 애니메이션은 우리말로 옮기면 '움직이는 그림'이라고 할 수 있다. 얼마전 국 내에서 개봉된 '인어공주'나 '미녀와 야수’도 애니메이션의 범주에 속한다고 할 수 있다. 

이러한 애니메이션이 만들어 지려면 적어도 1초에 18장에서 24장 정도의 그림이 필요하다. 쉽게 설명해서 이렇게 많은 수의 그림이 필요한 이유는 우리 눈의 특성에 기인하는데, 시각적으로 우리가 한장의 그림을 보았을때, 그 그림의 이미지가 우리 눈에 남겨져 있는 시간(잔상)이 1/24 초 정도가 되기 때문에, 1초의 지속된 움직임을 위해선 24장 정도의 그림이 필요하다는 얘기가 된다.

하지만 우리가 보는 TV나 비디오의 화면은 초당 30장이 1초 동안 보여지고 있다. 이러한 원리의 활용은 주변에서 쉽게 찾아 볼 수 있다.  

예를 들면 어린 시절 한번쯤은 책에 낙서를 한 경험이 있을 것이다. 앞장에 로켓을 그린 후, 다음 장엔 앞의 위치보다 더 높이 로켓을 그려 한장 한장 책을 채운 다음, 첫장부터 빠르게 넘기면 마치 로켓이 움직이는 듯한 효과를 나타낸다.

이도 역시 애니메이션의 활용이라 볼 수 있다. 또 하나 예를 더 들면, 앞과 뒤가 다른 부채를 가져다가 앞 면에는 새장을 그리고 뒷면에 새를 그려본다.

그리고 그 부채를 빠르게 회전시키면 마치 새가 새장에 갇혀있는 것처럼 보일 것이다. 이와 같이 로켓의

발사나 부채의 응용도 모두 기초적인 애니메이션이라 할 수 있다.

사이클링 애니메이션

그러면 디럭스페인트의 컬러 사이클링과 애니메이션의 관계를 알아 보기로 하자. 그리고 이를 토대로하여 작품을 만들어 보도록하자. 

우리가 간단하게 사이클링을 이해할 수 있는 것은 선을 회전시켜보는 것이다. 

자, 우선 메뉴의 ECHNIQUES 에서 CYCLE을 지정하고 UNDO 명령 밑에 있는 컬러 그라디언트 아이콘에서 임의로 하나를 지정해 본다. 

그리고 팔레트를 부른 다음 GRADIENTS로 가서 CYCLING SPBEED 란의 막대를 조정해 컬러 사이클링의 속도를 적당한 값(약 30 정도)으로 지정한다. 

다시 팔레트를 빠져 나온다. 한손으로 <CTRL>키를 누른 상태에서 마우스를 회전시키면 화면 위에 <그림 1>처럼 나타날 것이다. 

이때 다시 <TAB> 키를 눌러 본다. 화면 이 어떻게 나타나는가? 지금 내가 그린 그림의 색들이 변화하는 것처럼 보일 것이다.

이것은 화면 위에 그린 그림의 색 깔들이, 지정한 범위의 색깔들로 순차적으로 교체해 나가면서 반복 순환 한다고 생각하면 되는 것이다. 자, 이해가 되었으면 실제로 작업 에 들어 가기로 하자.

사이클의 응용 작업

우리가 지금 만들어 보려는 것은 좀 색다른 '광고판'이라고 표현할 수 있다. 번화한 거리를 밤에 걷다 보면 현 란한 간판들이 걸려있는 것을 볼 수 있다. 

디럭스페인트에서도 이러한 네 온 사인의 효과를 줄 수가 있다. 먼저 구상한 그림을 종이 위에 간단히 스케치해 본다. 그리고 그 그림을 디럭스페인트 위에 그려 본다 <그림 2, 3>.  

그림이 완성되었으면 지금부터 컬러 사이클링을 제대로 표현하기 위해 색깔을 입혀보도록 하자. 먼저 팔레트로 들어가서 몇가지 그라디언트 범위를 만들도록 하자. 

노란색 계통의 범위를 만들어 보고 똑같이 빨간색, 파란색, 초록색 계통의 범위를 만들어 보자. 컬러 범위를 만드는 것은 다음의 과정을 그대로 따라 하면 된다.  

노란색을 예로 들면, 먼저 팔레트 맨 왼쪽에 있는 흰색을 지정해서 노란색 부분의 시작점에 복사(COPY)해 놓는다. 다시 팔레트 왼쪽의 검정색을 지정해서 노란색 계통의 마지막 부분에 복사(COPY) 해 놓는다. 

다음으로 SPREAD 명령을 실행시켜 복사(COPY)해 놓은 흰색과 노란색의 중간 색깔들을 만들고, 다시 노란색과 검정색의 중간 색깔들을 만들어 놓는다 <그림 4>. 

이 과정이 모두 완료되었다면 GRADIENTS 박스로 들어가서 윗쪽의 RANGE 설정 부분을 1로 위치한 다음 CYCLING SPEED를 20으로 지정해준다.

CYCLING SPEED 란 색상 순환 속도를 말하는 것으로 수치가 높을수록 색상 변환은 빠르게 된다. 그리고 BUILD 명령을 이용해 흰색과 검정색 사이를 지정한다. 그러면 지정한 부분의 오른쪽에 검은색 줄이 보일 것이다. 

그렇다면 지정한 RANGE 가 1로 결정된 것이다. 이러한 방법으로 노랑, 파랑, 초록, 빨강 계통의 4가지 RANGE 를 만들어 놓는다 <그림 5>.  

다 되었으면 팔레트를 빠져 나온다. 그런 다음 사이클링 애니메이션을 위해 TECHNIQUES 부분에 있

는 CYCLE을 지정하는데, 이 명령은 방금 전에 작업한 범위의 색깔들 을 순차적으로 쓸 수 있게 하는 명령이다.

명령을 지정하였으면 UNDO 명령 밑의 그라디언트 아이콘에서 노란색을 선택한 다음, 팔레트 부분을 확인하여 보면 설정한 노란색 범위의 첫 부분에 현재 설정된 컬러가 선택된 것을 알 수 있다. 

이상이 없으면 화면 위에 그린 그림에 순서대로 색깔들을 채워나간다. <}> 키를 누르면 바로 다음 색깔이 지정이 되는데, 하나씩 색상들을 순환시켜 가면서 그림을 채워보자. 

중앙 그림의 맨 곁에 있는 곳에서 시작해서, 안쪽의 그림은 가에 있는 테두리와는 다른 위치에서 시작하도록 한다. 그 이유는 애니메이션의 시간적인 차이를 고려한 것으로, 독자 여러분들이 임의로 작업을 하면 된다 <그림 6>.  

그림이 완성되었으면 몇가지 효과를 부여하도록 하자. 팔레트에서 임의로 색깔들을 불규칙적으로 배열하 여 놓은 다음 RANGE를 5로 설정 한다.  

그런 다음 다시 CYCLING SPEED를 조절하여 색상 순환 속도를 지정하고 빠져 나온다. 그리고 그림 왼쪽에 화살표 모양을 그린 다음, 몇개의 면으로 분할시켜 놓는다. 

RANGE 설정 부분에서 RANGE를 5로 설정한 색상들을 지정한 다음, 화살표 위에 순차적으로 색을 입힌다 <그림 7>.  

색을 순차적으로 입히는 방법은 두 가지가 있는데, 그 첫번째 방법은 TECHNIQUES의 CYCLE 명령이다. 

CYCLE을 선택하고, 그라디언 트 범위로 설정된 부분의 컬러를 지정하면 자동적으로 다음 컬러가 선택 이 되기 때문에 작업이 쉬워진다. 

그러나 원하지 않는 부분의 색깔까지도 바꿀 수가 있기 때문에 불편한 점도 있다.

두번째 방법은 <}> 키를 활용하는 것이다. TECHNIQUES 에서 SINGLE COLOR 를 선택하고, 원하는 부분을 채우게 되면 <}> 키를 치지 않는한 계속 같은 색이 나오게 된다.

<}> 키의 역할은 바로 그라디언트 범위의 색상 중에서 다음 컬러로 옮겨가는 일을 수행시켜 주는 것이다. 

여기까지 이해가 되었다면 다음에는 '마이컴'이라고 쓴 글자의 밑에 사각형 박스를 그려 넣고 나머지 부 분을 채워 본다 <그림 8>. 

그리고 그림의 밑 부분에 원과 함께 글씨를 써 보도록 하자. 이 작업은 약간의 이해가 필요하므로 몇가지 설명을 덧붙여 보겠다. 

일단, 위에서와 같이 원을 그려 넣는다. 동일한 크기의 원을 그리기가 어렵다면 한 원을 그리고, 그것을 브러시로 오려내어 복사하도록 하자. 

아니면 FONT 메뉴에서 글자체를 지정하여 하나의 완성된 문구를 써넣어도 좋다. 간단한 형태의 그림이라면 더욱 효과가 클 것이다 <그림 9>. 

그림이 준비되었으면 이젠 색깔을 바꾸어 보도록 하자. 그라디언트 범위 중에서 임의로 설정하여 채우기 아이콘을 선택해 채우는데, 지금까지 와는 다른 방법으로 작업을 해보도록 하자.

사이클링의 묘미 

지금까지의 사이클링은 기존의 색깔은 변하지 않고, 설정한 범위의 색 깔들이 순서에 맞추어 이동하는 것이 었다. 하지만 지금 우리가 수행하려는 것은 보다 진일보된 사이클링 효과이다.  

먼저 팔레트로 들어간다. 팔레트에서 새로 추가한 그림에 칠하고 싶은 범위의 색깔을 선정한 다음, COPY-G 명령으로 다른 위치에 그 범위의 색깔을 복사한다. 그런 다음 CYCLING SPEED를 지정해주고 RANGE 6으로 BUILD 한다. 

다시 본래의 화면으로 나와서 그림 위에 색깔을 바꿔가며 입혀 보도록하자 <그림 10> 

다시 팔레트로 돌아가서 해당 범위의 처음과 끝을 배경컬러로 COPY를 한다. 이 그림에서는 흰색이다.

그리고 SPREAD로 그 범위의 색상들을 모두 배경 컬러로 바꾼다. 그런 다음에는 그라디언트 범위에 속하지 않는 다른 색을 COPY 해서 그 RANGE 에 놓는다. 

그리고 팔레트를 빠져나와 <TAB> 키를 누른다. 어찌 되었는가? 

화면에서 그림은 마치 자리를 움직이며 애니메이션되는 것처럼 보일 것 이다. 

이젠 그림을 마무리를 하여 보자. '마이컴'이란 글자에도 같은 방법으로 색깔을 입히고 그림 주변에도 이를 응용하여 몇가지를 덧붙여 보자 <그림 11, 12>

화면이 채워졌으면 마지막으로 팔레트를 점검한 다음, 조심스럽게 <TAB> 키를 눌러보자.  

화면의 색깔들이 아름답게 변하면서 마치 애니메이션되는 듯한 효과를 줄 것이다.

작품 감상 포인트 

이 작품의 주요 포인트는 사이클링이다. 특히 사각형의 버튼이 움직이 는 듯한 효과는 (물론 책에서는 볼 수가 없지만) 좀 까다로운 부분으로 다음 기회로 넘기기로 했다. 

하지만, 지금까지 배운 것을 잘 이해한다면 충분히 만들 수가 있는 것이다.  한번 숙제삼아 만들어 보는 것도 사이클링을 이해하는데 도움이 될 것이다. 

또한, 이를 활용하면 많은 애니메이션을 만들 수 있다. 가령, 공이 튀는 모습이라든지 사람의 뛰는 모습들은 쉽게 만들 수 있다 그림<13>

이글은 지금은 없어진 컴퓨터 잡지, 마이컴 1993년 4월호 기사에서 발췌한 내용입니다

글이 마음에 드시면 아래 공감♡버튼 살짝 눌러주세요.

공감과 댓글은 저에게 큰 힘이 됩니다.