한빛출판네트워크

제공 : 한빛 네트워크
저자 : Juan Sanchez
역자 : 이준하
원문 : An Introduction to Degrafa

풍부한 사용자 경험을 전달하는데 있어서 가장 중요한 것 중에 하나가 사용자들이 만나게 되는 인터페이스이다. 정적이거나 동적이든 그래픽은 애플리케이션의 외형을 구성하는 중요한 요소가 된다. 이전까지 이미지와 같은 정적인 그래픽은 애플리케이션에서 필요로 하는 시각적인 요구를 만족했다. 하지만 수정사항이 생길 때마다 다시 작업을 해야 했다. 동적인 그래픽 즉 프로그램을 통한 그리기는 실행 시에 속성의 조정을 통해 매우 강력한 힘을 가진다. 하지만 개발 시에 해당 언어의 Drawing API의 습득이 필요했다. Degrafa 는 이 두 가지 영역에서 최적화된 선언적 그래픽 프레임워크(declarative graphics framework)이다.

Degrafa의 기반이 되는 이론적인 지식과 기초적인 사용방법, 고급 사용자를 위한 구현방법, 어떻게 하면 이 프레임워크를 플렉스 또는 에어 프로젝트에 적합하게 만들 수 있을까를 알아보자. Degrafa는 여러 용도로 사용할 수 있다. 이 글에서 모든 기능을 다루지는 않지만 기본적인 개념은 전달해줄 수 있을 것이다.

Degrafa는 RIA 커뮤니티 개발자들이 만든 오픈소스 프로젝트이다. 이 프로젝트의 목적은 디자이너와 개발자들이 MXML구문을 가지고 동적인 그래픽을 만들 때 복잡한 액션스크립트 없이 작업하게 하는 것이다. 여러분들은 MXML내에서 플렉스 컴포넌트를 정의하는 것과 마찬가지로 채우기(fills), 선긋기(strokes), 도형 그리기(shapes), 복잡한 도형 그리기(complex paths)를 정의해주면 된다. Degrafa 는 스킨을 만들거나 데이터 시각화, 지도와 같은 다양한 디자인적인 요구조건을 만날 때 사용할 수 있다.

Degrafa에 포함된 기능

• 바로 사용할 수 있도록 미리 만들어진 컴포넌트와 확장성 있는 태그
• SVG 경로 데이터를 사용해 완벽하게 재사용 가능한 도형
• 채우기와 선긋기를 위한 다양한 옵션
• 채우기와 선긋기, 도형을 위한 속성 바인딩 하기
• CSS 3기반으로 배경과 경계선, 배경이미지 등의 섬세한 표현을 위한 고급 CSS기능의 사용
• 컴포넌트 확장, 재사용 가능한 부품들의 조립, 모양 라이브러리, 반복처리 그리고 좀 더 코드를 덜 사용하게 해주는 여러 도구를 통한 생산성 향상
• 경량모델기반 설계
• 플렉스 2와 플렉스 3간 호환성 유지
• 필요한 부분만 구현하는 형식
• 그리고 좀 더...

전문용어

앞으로 나오는 예제에서 사용하는 용어 중에서는 익숙한 것도 있고 그렇지 않은 것도 있을 것이다. 몇몇 단어는 그래픽과 플렉스, Degrafa에서 사용되는 태그에 관련된 것이다. 시작하기 전에 이러한 용어에 대하여 정리하자.

• 도형(geometry) - 모양이나 경로 또는 그래픽 형태를 표현하는 일반적인 용어
  
  
• 그래픽 컨텍스트(graphics context) - 그리기 작업을 할 때 각각의 명령에 대한 방법이나 속성을 관리한다. Shape, Sprite 또는 무비클립에서 파생된 어떤 객체든지 그래픽 속성을 가지고 있다. 시각적 요소들은 그래픽 컨텍스트에 의하여 그려지거나 속성을 저장한다.
  
  
• graphicsTarget - 원(Circle)이나 직사각형(RegularRectangle), 다각형(Polygon)등과 같은 Degrafa의 도형에서 사용할 수 있는 속성이다. Degrafa가 처리할 작업대상을 지정할 수 있다. 이때 대상이 되는 객체는 그래픽 컨텍스트를 가지고 있어야 한다.
  
  
• Surface - Degrafa요소들을 조립하기 위한 UIComponent기반의 태그.
  
  
• GeometryGroup - Surface태그 내에서 사용하는 태그이며 여러 Degrafa객체를 묶을 수 있다. GeometryGroup은 Sprite기반이며 Sprite에서 제공되는 속성과 이벤트를 그대로 사용한다.
  
  
• GeometryComposition - GeometryGroup과 비슷한 역할을 하는 태그이지만 MXML파일 내에서 최상위 레벨을 포함한 어떤 레벨에서든지 사용이 가능하다. 상황에 따라 graphicsTarget속성을 사용하여 그림을 그릴 대상을 외부로 지정하여 두 가지를 분리할 수 있다.
  
  
• Fill - 채우기는 객체의 안쪽 영역을 다루는 그래픽 태그이다. 채우기는 여러분들이 만든 모양에 적용할 수 있습니다. Degrafa에서는 Solid와 Linear Gradient, Radial Gradient, Bitmap, Blend, Complex fills등의 다양한 기능이 있다.
  
  
• Stroke - 선긋기는 객체의 경계를 다루는 것과 관련된 그래픽 태그이다. 일반적으로는 두께를 표현한다. Degrafa에서는 Solid와 Linear Gradient, Radial Gradients등의 옵션이 있다.

Degrafa 시작하기

프로젝트에 Degrafa를 사용하기 위한 두 가지 방법이 있다. 최신 버전의 컴파일 된 SWC 파일을 다운로드 하거나 직접 SVN에서 소스를 다운 받을 수 있다.

두 가지 옵션 모두 구글 코드(Google Code)에서 호스팅 되고 있다. 이 글에서는 컴파일 된 SWC파일을 전제로 예제를 풀어가겠다.

1. Degrafa코드가 호스팅 되고 있는 http://code.google.com/p/degrafa/에서 사용하고 있는 플렉스 버전에 맞는 최신의 Degrafa SWC 파일을 받는다. 플렉스 2와 플렉스 3를 위한 파일이 각각 제공된다. SWC파일을 다운로드 받은 후에는 플렉스 빌더를 실행하고 DegrafaExample라고 하는 새로운 프로젝트를 만든다.
   (역주 : 이 글은 Beta2 기준으로 작성되었지만 최신 코드를 받아도 무리 없이 테스트할 수 있다.)
   
   
2. 새로운 프로젝트를 생성하였다면 다운로드 받은 SWC파일을 libs폴더에 넣는다(역주:플렉스 2 빌더를 사용하는 경우에는 해당 SWC파일을 Flex Build Path > Library path > Add SWC메뉴에서 추가한다).
   
   
3. MXML을 깔끔하게 만들려면 Degrafa XML 네임스페이스를 이를 사용하고자 하는 MXML 의 root 태그에 넣는다. 예를 들어 DegrafaExample.mxml파일의 Application 태그에서 사용하면 다음과 같다.

여기까지 진행하였다면 여러분들은 멋진 그래픽 작업을 위한 Degrafa MXML태그를 사용할 준비가 되었다. 시작하기 전에 그래픽 객체를 만들 때에 기본적으로 지켜주어야 할 몇 가지 항목이 있다. 이번 예제는 [그림 1]에서 보여지는 것처럼 흰색 원을 만들어보자.


[그림 1] 기본 원 그리기

1. Degrafa의 그래픽 객체는 여러 개의 명령들이 모여서 만들어지고 Surface태그 안에 GeometryGroup태그를 사용한다.
   Surface태그는 UIComponent를 구현헌것이기때문에 verticalCenter, horizontalCenter와 같은 속성들을 사용한다. GeometryGroup태그는 Sprite를 상속 받았으며 UIComponent 보다는 적은 속성을 가진다.
   
   
2. 다른 방법으로는 GeometryComposition태그나 Circle, RegularRectangle과 같은 다른 모양을 그리는 태그에 있는 graphicsTarget속성을 사용하는 것이다. 이 속성은 여러분들이 컴포넌트의 밖에 그래픽 객체를 정의하고 그래픽 컨텍스트에서 타겟으로 지정할 수 있도록 허용한다. 예를 들어 Canvas, Button, Image 등과 같은 컴퍼넌트들을 사용할 수 있다. 이러한 것들은 기본 예제에서 사용할 것이다.
   
   
3. application MXML에 Canvas를 추가하기 위해서 myCanvas라는 id를 가지는 Canvas를 만들고 GeometryComposition태그에서 myCanvas객체를 graphicsTarget속성으로 지정한다.

4. 그림을 그릴 Canvas를 지정하였고 Circle과 RegularRectangle, Path, LineRepeater등의 미리 만들어져 있는 Degrafa객체를 추가할 수 있다. 이러한 객체들은 GeometryGroup이나 GeometryComposition 또는 graphicsTarget속성으로 정의되는 태그 내에 추가할 수 있다. 아래 예에서는 GeometryComposition안에 Circle을 추가하였다.

5. MXML에서 원을 그리기 위한 작업은 끝났다. 하지만 원은 보이지 않는다. 모양을 채우거나 경계를 그려주는 작업이 없었기 때문이다. Degrafa는 여러분의 요구에 적합하게 여러 가지 채우기와 선긋기 작업일 지원하고 있다. 거기에는 Solid와 Linear Gradient, Radial Gradient, Blend, Complex Fills등의 채우기 옵션과 Solid와 Linear Gradient, Radial Gradient등의 선긋기 옵션을 사용할 수 있다. 예제에서 보이는 것과 같은 원을 만들기 위해서는 Circle 안에 SolidFill 옵션을 사용한다.
   참고 : Degrafa의 바인딩 기능을 이용하여 채우기와 선긋기를 태그 외부에 정의할 수 있다. fill 또는 stroke의 id를 참조하게 설정한다. 이러한 방식은 반복해서 적용할 수 있기 때문에 매우 괜찮은 방법이다. 다음 예제에서 동일한 기능을 Circle의 밖에서 myFill이라는 id를 가지는 fill을 사용하여 만들어보자.

바인딩의 활용

Degrafa를 사용하면서 가장 많이 쓰는 기능 중 하나가 바인딩이다. 바인딩은 두개의 속성간의 관계를 만들어주는 것이다. 한쪽이 업데이트되면 다른 한쪽도 자동으로 업데이트 되는 것이다. 각각의 width와 height, radius, fill, stroke등과 같은 속성의 바인딩에서 매우 강력한 기능을 수행한다. 각각의 객체들이 다양한 목적을 가지고 긴밀한 관계를 만든다.

간단한 예제로 LinearGradientFill의 angle속성과 HorizontalSlider를 바인딩 하게 되면 그라디언트의 표시각도가 슬라이더의 값이 업데이트 되는 것에 따라서 동적으로 변하게 된다(슬라이더 속성에서 live dragging값을 설정하여야 한다). 동적인 데이터 호출로 리스트를 갱신하는 것도 같은 맥락이다.

데이터와 함께 생각하면 Degrefa에 의하여 그려지는 그래픽들의 무한한 영향력을 느낄 수 있다. 인터페이스들은 커서의 움직임에 따라 달라지게 되고 버튼은 프로세스의 진행에 따라 다른 모습을 보여준다. 또 아이콘들은 시간의 흐름에 따라 알맞은 모양으로 변하며 차트는 데이터에 따라 동적으로 데이터를 처리한다. 이러한 모든 것들은 여러분들이 가지고 있는 데이터와 다양한 공개된 API, 사용자 반응과 함께 약간의 실험정신만 가지고 있으면 된다. Degrafa에서의 바인딩을 통해 플렉스에서 동적인 그래픽을 만들 수 있는 기회를 만날 것이다.

고급 기능의 활용

Degrafa의 기본적인 그래픽 조립 기능을 만들어보자. 이번에는 조금 복잡한 예제로 Flex Clock[그림 2]를 만들어보겠다. 여기에 사용되는 Degrafa의 기능을 살펴보면서 복잡한 그래픽 구현을 배워보자.


[그림 2] Flex Clock

1. 먼저 새로운 플렉스 애플리케이션을 FlexClock.mxml이라는 이름으로 여러분의 DegrafaExample폴더에 만든다. 앞에서 사용했던 것과 동일한 XML네임스페이스를 사용한다.
   
   xmlns:Degrafa=http://www.degrafa.com/2007
   
   
2. Flex Clock의 부품은 서로 다른 GeometryGroups로 구성한다. 그럼으로써 시침의 회전과 같은 Sprite의 속성 중 일부를 사용할 수 있다.
   
   우선 해야 할 일은 Surface태그를 설정하는 것이다. 그러면 시계의 부품을 GeometryGroups로 추가할 수 있다. Surface의 x, y값을 100으로 정하는 것으로 애플리케이션 내에서 시계의 위치를 지정한다..
   
   
3. Surface태그 안에 GeometryGroup태그를 추가해주고 id값을 clockFace라고 지정한다. GeometryGroup태그 내에 어두운 그라디언트 배경에 "Fx"라는 글자가 새겨진 시계의 표면이 만들어진다.
   
   어두운 회색 빛의 시계표면을 만들기 위하여 RegularRectangle객체를 clockFace GeometryGroup안에 사용하게 된다. RegularRectangle의 높이와 넓이는 360으로 지정한다.. 또한 RegularRectangle에서 어두운 회색의 방사형 그라디언트 채우기를 처리한다. 일단 clockFace MXML은 다음과 같다.

4. clockFace GeometryGroup밖에서 새로운 fills태그를 정의한다. fills 태그 안에는 RadialGradientFill태그가 들어가고 cx값은 40으로 cy값은 20으로 radius값은 440으로 지정하고 id는 greyRadFill로 설정한다. 그리고 fill태그 안에 gradient stop을 정의한다.
   
   Gradient stop은 그라디언트를 만들어내는 속성이며 color와 alpha, ratio를 포함하는 속성을 가진다. Degrafa에서 GradientStop태그를 방사형 또는 선형 그라디언트 채우기를 만들 때 사용할 수 있습니다. 그리고 여러 개의 gradient stop를 효과를 보기 원하는 만큼 설정한다. 아래 예제에서는 2개의 gradient stop을 만들었다. 첫번째는 #444 이고 두 번째는 #000 이다.
   
   참고 : 플렉스에서 일반적으로 사용하는 6글자를 사용하지 않고 3글자만으로 gradient stop의 색을 지정하는 것을 눈치챘을 것이다. 이러한 작업은 HTML과 유사한 작업이며 Degrafa의 또 다른 특징이다. 사실 color속성에서 몇 가지 옵션을 선택할 수 있다. HEX 값(#666)과 RGB 값(60,60,60), 색상 값(grey), CMYK(0,0,0,60)의 값을 지정할 수 있다.
   
   
5. 이제 짙은 회색으로 앞에서 만든 RegularRectangle을 빈공간을 채웠다. fill속성을 정의하여 해당 객체를 채울 수 있다. RegularRectangle와 RadialGradientFill는 다음과 같이 사용할 수 있다.

6. 애플리케이션을 실행한다면 짙은 회색 빛의 방사형 그라디언트를 적용하여 채우기를 한 RegularRectangle를 볼 수 있다. 이것은 시계 표면을 그려주는 부분이다.
   
   이제 시계부품의 나머지 부분도 채우기와 선긋기를 통해서 만들 수 있다. "Fx" 라는 글자를 흰색으로 채워주고 10픽셀 굵기의 빨간선을 시침과 분침을 위해 사용하고 2픽셀의 밝은 회색 선을 초침으로 사용할 것이다. fills태그를 미리 만들어놓은것처럼 strokes 태그도 만들 수 있다. greyGradFill에 새로운 fills와 strokes 태그를 추가해주면 다음과 같은 코드가 만들어진다.
   참고 : Fill과 Stroke속성을 디자이너가 접근하기 쉽게 분리하여 내부 코드의 변경 없이 디자인을 수정할 수 있다.
   
   
7. 모든 fills와 strokes태그는 이번예제에서 사용할 것이다. 이제 시계의 나머지 부분을 완성해보자. 짙은 회색의 배경을 만들었고 "Fx" 라는 글자를 더해서 시계의 배경부분을 마칠 것이다. 글자를 표현하는 것은 clockFace GeometryGroup내에서 Polygon태그를 사용한다.
   
   "F" 라는 글자를 Polygon태그로 clockFace안에서 만들기 위해서는 fill속성에서 whiteFill을 정의해주어야 한다. Polygon은 특정점들을 지정해주어서 모양을 만든다. Polygon 태그 내에서 모든 것을 처리하기보다는 내부에서 points 태그를 설정하는 것이 좋다. GraphicPoint태그를 사용하여 각각의 x와 y좌표 값을 기록한다. 아래에 글자를 표현하는데 필요한 각 포인트 값을 미리 정의해놓았다.
   참고 : 그럼 이런 포인트들은 어떻게 찾을 수 있을까. 방법은 어도비 일러스트레이터에서 "Fx"값을 실제로 그려서 SVG로 저장하고 텍스트에디터에서 코드들을 통해 각 좌표 값을 확인한다. 여기에서 Degrafa Polygon을 위한 GraphicPoint태그 내에서 사용하는 값으로 분리한 것이다.
   
   참고 : 어떻게 SVG데이터를 Degrafa에서 사용할 것인지에 대하여는 http://vimeo.com/1223682에 올려놓은 스크린캐스트를 참고하자.
   
   
8. 이제 남은 것은 시분초를 나타내는 것이다. 각각의 이미지들은 GeometryGroup내에 회전할 수 있는 HorizontalLine으로 표현된다. 초침부터 geryStroke로 채워보자.

9. 초침 아래에는 분침과 시침을 같은 형식으로 만든다. stroke는 redStroke를 선택하고 x1의 값은 조금 작게 만든다.

10. 애플리케이션을 컴파일 하게 되면 초침과 분침 그리고 시침이 수평방향으로 겹쳐있는것을 보게 될 것이다. Flex Clock에 필요한 것들은 다 만들었다. 이제는 약간만 다듬어주기만 하면 된다.
    
    시간을 절약하기 위해서 시계가 움직이기 위한 코드를 미리 작성해놓았다. Application태그 아래에 Script블록을 복사해넣으면 된다.

11. 이제 Flex Clock가 움직이게 하려면 initTime()함수를 실행하기 위해서 Application의 creationComplete이벤트를 추가한다.
    
    creationComplete="initTime()"
    
    애플리케이션을 컴파일하고 나면 바늘이 돌아가면서 제대로 된 시계를 만날 수 있다. 모든 그래픽영역을 MXML마크업으로 다 처리하였다. 이제는 쉽게 색상이나 선긋기, 채우기의 형식을 변경할 수 있으며 지우기, 비트맵 필터와 같은 것들을 추가해서 사용할 수 있다. Degrafa와의 유연한 작업은 시계바탕에 색을 채우는 작업을 시간에 따라 다르게 만들 수도 있고 알람처럼 시계를 흔드는 효과를 만들 수도 있습니다. 이제 많은 시도를 할 수 있으며 이러한 작업을 쉽게 생각하게 될 것이다.

Degrafa와 액션스크립트

만약 여러분들이 개발자라면 왜 액션스크립트보다 Degrafa MXML을 사용해야 하는가 라는 질문을 할 것이다. Degrafa에서 하는 작업 중에서 액션스크립트로 충분히 할 수 있다. 간단한 원을 그리는 것이라면 Degrafa MXML을 사용하는 것과 액션스크립트와 별차이가 없다. 하지만 복잡한 작업을 필요로 하게 된다면 액션스크립트에서 작업하는 것은 벅찬 일이 되어버린다.

또 다른 이유는 표현하고자 하는 것이 그래픽과 레이아웃이라는 것이다. 그래픽을 조합하는 작업에서 MXML마크업을 사용하는 것이 스크립트로 작업하는 것보다 직관적이라는 것을 발견하게 될 것이다. Degrafa를 사용해서 MXML안에 geometry관련 요소를 배치하는 것은 액션스크립트를 사용하는 것이 조금 추상적이고 어려운 것에 반하여 누구나 쉽게 이해할 수 있다.

Degrafa에는 여러분들을 위하여 만들어놓은 많은 자원들이 있으며 더 이상 복잡한 수학이나 좌표 값을 계산할 필요가 없다. 손쉽게 생산성을 높일 수 있고 유연하고 동적으로 많은 것을 표현할 수 있다.

결론

여기에서는 Degrafa를 살짝 맛보는 2가지 예제만 소개했다. 아래 링크를 참고해서 지면제한 상 소개하지 못한 많은 기능을 확인해보자.

Degrafa의 기능인 바인딩과 향상된 CSS, SVG 경로 데이터의 사용, 유틸리티, 재사용성 등은 실제 애플리케이션 개발 과정에서 클라이언트에 요구사항에 대하여 빠르게 대처할 수 있다. 모든 사람에게 적합한 솔루션이라는 것은 없지만 이 프레임워크는 경험이 많은 개발자와 디자이너들이 일상적으로 만나는 문제를 해결하기 위해 만들어졌다. 아래 링크들에서 Degrafa에 대한 더 많은 정보를 얻을 수 있다.

• Website and Blog: http://www.degrafa.com
• Documentation: http://docs.degrafa.com
• Samples: http://samples.degrafa.com
• Code Source and Repository: http://code.degrafa.com
• Discussion: http://group.degrafa.com
• Community Showcase: http://showcase.degrafa.com