Designing Network-Friendly Applications
OSXDEV
쿼츠 컴포저 사용해 보기
쿼츠 컴포져는 Mac OS X Tiger의 그래픽 능력을 최대한 발휘할 수 있게 해 주는 획기적 그래픽 개발 환경이다. 쿼츠 컴포저를 사용하면, 코코아, 쿼츠 2D, 코어 이미지, OpenGL, 퀵타임 기술을 손쉽게 하나로 합칠 수 있고, 이 모든 것은 간단한 비쥬얼 프로그래밍 방식을 통해서 가능하다. 쿼츠 컴포저는 코어이미지의 비쥬얼 이펙트를 간단히 만들기 위해서 사용할 수도 있고, 화면 보호기를 만들 수도 있고, 사용자 인터페이스 위젯을 새로 만들 수 있고, 자료를 비주얼 하게 보여주는 효과를 만들 수도 있고, 라이브 에니메이션을 구현할 수도 있다.
이 문서는 쿼츠 컴포저에 관한 소개를 하고, 예제로 간단한 컴포지션을 만들어 보고, 실제 프로젝트에서 사용할 수 있는 방법을 알려줄 것이다. 쿼츠 컴포저를 한번 사용해 보면, 새로운 프로젝트를 구상할때, 새로운 발상이 가능할 것이고, 능력을 이용한 구석이 많은 것을 알게 될 것이다.
목차 |
[편집] 비주얼 프로그래밍 환경
쿼츠 컴포저에 대해 첫번째로 알아야 할 것은, 다른 개발 환경과는 많이 다르다는 점이다. 시스템의 그래픽 API를 직접 이용하는 수많은 코드를 작성해 내기 보다는, "패치"라고 불리는 처리유니트를 화면에서 비주얼하게 다루게 될 것이다. 이 패치는 서로 연결하여 컴포지션을 만든다. 패치를 넣어서 서로 붙이면 컴포지션이 되고, 실시간으로 이 컴포지션의 결과를 볼 수 있는 것이다. 매번 변경을 하게 되면, 즉시 즉시 화면에 반영이 된다. - 컴파일 과정을 필요가 없다. 다른 개발 환경에서는 볼 수 없는 과정이다. 그림1 참조
그림1 쿼츠 컴포저 사용자 인터페이스
패치는 일반 프로그래밍 환경에서 말하는 서브루틴과 비슷하다. 패치에 대한 입력을 만들 수 있고, 패치는 그 값을 받아서 처리해서 출력값을 만들어 낸다. 패치 왼쪽에 있는 동그라미는 패치가 받아들이는 다양한 입력값을 나타낸다. 오른쪽에 있는 동그라미는 출력값이다. 패치의 입력값과 출력값의 종류는 그 기능에 따라 다를 수 있다. 예를들어, Random 이라는 패치는 Min과 Max 값을 받아서 Value라는 출력값을 만들어 낸다. 그림2 참조
그림2 패치의 해부도
패치의 입력값은 두가지 방법으로 지정될 수 있다. 첫번째는, 패치 Inspector를 통하는 방법이다. 두번째는, 다른 패치의 출력값을 입력값으로 연결하는 방법이다. 그림3을 보면, Random 패치의 Inspector를 보여주고 있으면, Min과 Max값이 지정되어 있고, 그 출력값인 Value는 다른 패치의 입력값으로 연결이 되어 있다. 실행을 시키면, Random 패치는 0에서 1사이의 임의의 수를 발생시키고, 그 값을 Value 출력을 통해 전달한다.
그림3 패치의 입력과 출력
쿼츠 컴포저에서 프로그래밍 하는 과정은 원하는 패치를 패치 라이브러리에서 선택한 다음, 서로늘 연결하여 원하는 결과를 얻어내는 방법으로 한다. 여기서 패치에 관한 추상적인 이야기에서 실제 패치를 이용해 보는 과정으로 넘어가 보도록 한다. 실제로 보면 쿼츠 컴포저에 어떻게 동작하는지 더 잘 알게 될 것이다.
[편집] 실습
쿼츠 컴포저를 사용하려면, Xcode 가 설치되어 있어야 한다. 설치가 되어 있다면, /Developer/Applications/Graphics Tools 폴더를 보면 어플리케이션을 찾을 수 있다. 그림4 참조
그림4 쿼츠 컴포저 어플리케이션의 위치
쿼츠 컴포저를 찾았으면, 실행시킨다. 처음 시작을 돕기 위한 "도우미(Assistant)"화면이 뜬다. "Basic Composition"이라 되어 있는 첫번째 항목을 선택하고, next를 클릭하고, 저장할 위치를 지정해 준다. 다 마치면, 쿼츠 컴퍼저 편집 화면과 보기 화면을 볼 수 있다. 그림5 참조
그림5 기본 컴포지션
처음 볼 패치는 Gradient 패치이다. 이 패치는 컴포지션의 배경화면을 위해서 짙은 푸른색에서 옅은 푸른색까지 점진적으로 변하는 색을 그릴것이다. 보는바와 같이 입력값을 제공하는 패치는 없다. 즉, 이 패치는 기본값을 사용하다는 뜻이다. 패치를 선택한다음, Editor > Show Inspector 를 선택해 주거나, Command-I 를 눌러주면, Inspector 화면이 뜬다. 인스펙터의 맨 위에 있는 풀다운 메뉴에서 Input Parameters를 선택해 준다. 그림6 참조. 이 값들은 원하는 값으로 변경이 가능하다. 만일 색상값을 변경해 주면 실시간으로 보기 화면에 업데이트가 된다.
그림6 Gradient 패치의 입력값 변경
두번째로 BillBoard 패치를 확인해 본다. 이 패치는 이미지를 나타내는 패치이다. 이 컴포지션에서는 BillBoard 패치는 Image Importer 패치가 제공하는 이미지 파일을 그려준다. 이 패치를 이용하면, 퀵타임이 제공하는 어떤 이미지든지 화면에 다 나타낼 수 있게 된다. 그림7 참조
그림7 Image 패치
세번째 패치는 Sprite 패치이다. 이 패치는 Image with String 패치에서 이미지를 가져와서 화면 하단에 뱅글뱅글 돌아가는 글자를 보여주는 역할을 한다. Image with String 패치의 인스펙터에서 원하는 글을 바꾸면 글이 바뀌어 보일 것이다.
그림8 Image with String 패치
여기까지는 기본적인 컴포저션을 이루어지는 과정과 간단한 입력값을 변경해 보았다. 좀 더 재밌는 것을 만들어 보자. 그림8에서 보다 좀더 나은 무언가를 만들기 위해서 패치를 추가해 보자. 편집창에서 Gradient 패치를 제외한 나머지 패치들 모두 선택해서 지우자. 이제 배경화면만 빼고는 아무것도 남지 않을 것이다.
이제, 쿼츠 컴포저 편집창 옆에 있는 패치 라이브러리에서 Particle System Renderer를 찾아서 더블클릭해보자. 새로운 패치가 편집화면에 나타날 것이고, 배경화면 위에 하얀네모가 움직이는 것을 볼 수 있게 될 것이다. 그림9 참조
그림9 Particle System Renderer 추가
다음, Particle system 패치에 좀 그럴싸한 이미지를 넣어주자. Lenticular Halo Generator 패치를 찾는다. 패치를 편집창에 넣고 image 출력을 particle system 패치의 image 입력에 연결해 준다. 결과를 그림10에서 볼 수 있을 것이다.
그림10 Particle System Renderer에 이미지 추가
마지막으로 Halo이미지가 배경화면에 그려지는 방식을 변경하면 된다. 기본값은 검은 네모상자가 그려지게 되어 있다. 인스펙터 화면에서 blending 입력값을 Over로 변경해 준다. 그럼 결과화면은 그림11과 같이 될 것이다.
그림11 Particle System Renderer에 이미지 추가
Controller 패치들을 이용하면 컴포지션에 사용자가 직접 조작가능하게 된다. 예를 들면, Mouse Controller 패치를 추가하여, x, y 출력값을 particle system의 X Position, Y Position 입력값으로 연결을 한다. 마우스를 이용해서 이미지가 생성되는 위치를 조작할 수 있다.
그림12 컴포지션에 Mouse Controller 패치를 추가하기
몇가기 단순한 조작만으로, 쿼츠 컴포져에서 프로그래밍하는 방법의 기초적이 부분을 알아보았다. 이제, 사용가능한 패치에 대해서 좀 더 알아보도록 하자.
[편집] 패치의 종류
위 예제에서 볼 수 있듯이, 쿼츠 컴포저에서는 화면에 그려주는 패치, 값을 다루는 패치, 외부소스에서 자료를 가져오는 패치들이 있다. 이 패치들은 공식저으로 아래아 같이 정의된다.
- 수급자(Consumer)는 화면에 결과를 그려주는 패치를 말한다. Gradient나 Particle System 패치가 이 분류에 속한다. 이런 종류의 패치는 윗부분이 보라색이다.
- 처리자(Processor)는 특정 시간단위로 혹은 입력값 변경에 따라 데이타를 처리한다. Lenticular Halo 패치는 Particle System에 보여줄 이미지를 제공해 준다. 이러한 패치는 윗부분이 녹색이다.
- 제공자(Provider)는 외부 소스로 부터 데이타를 제공해 준다. Mouse 패치는 마우스의 현재 X, Y 지점을 컴포지션에 제공해 준다. 이러한 패치는 윗부분이 하늘색이다.
실행시, 쿼츠 컴포저는 수급자 패치부터 처리를 한다. 처리자, 제공자 패치는 수급자 패치가 값을 끌어당길때 그때 실행이 된다. 우리의 예에서 보면, 쿼츠 컴포저가 Particle System 패치에 새로운 이미지를 그려라고 할 때마다, 패치는 S, Y 마우스 값을 Mouse 패치로 부터 가져오게 된다. 그리고 이때, Lenticular Halo 패치에서 이미지를 가져와서 그려주게되고, 매번 이것이 반복되는 것이다.
[편집] 컴포지선 사용하기
한번 만들어지면, 쿼츠 컴포져 컴포지션은 다양한 방법으로 이용이 가능하다. 화면보호기로 사용하려면, 컴포지션을 ~/Library/Screen Savers나 /Library/Screen Savers폴더로 복사하면, 화면보호기 시스템 환경설정에서 선택이 가능하게 된다. 그림13 참조
그림13 화면보호기에서 컴포지션 사용
코코아 프로그램에서도 QCView를 사용하면 컴포지션을 사용할 수 있다. 그림 14를 보면, 코코아 창에서 실행중인 우리의 예제 컴포지션을 볼 수 있다.
그림14 코코아 창에 들어간 콤포지션
단순히 컴포지션을 프로그램에 넣는 것은 멋지긴 하지만, 실제로 유용하려면, 외부로 부터 컴포지션이 데이타를 받을 수 있거나, 데이타를 제공할 수 있어야 하겠다. 물론 쿼츠 컴포저에서는 방법을 제공한다.
[편집] 입력과 출력 공표하기
외부와 값을 주고받기 위해서, 사용된 패치들의 수많은 입력과 출력값을 컴포지션의 "공표된(published)" 입력, 출력으로 만들 수 있다. 즉, 외부의 객체가 입력, 출력과 바인딩을 해서 값을 전달해 주거나, 전달 받을 수 있다는 것을 뜻한다. 이를 통해, 컴포지션이 외부로 부터 제어가 가능하게 되고, 만들어낸 이미지를 다른 곳에서 사용할 수 있다는 뜻이다.
실제 예제로, Particle System 패치의 X, Y position을 마우스에서 값을 받지 말고 공표된 입력값으로 만들어 보자. Mouse 패치를 지운 다음 Particle System 패치를 컨트롤 클릭해 준다. 그림15와 같이 메뉴가 나타나고 여기서 공표된 입출력값을 선택할 수 있게 된다. Published Inputs > X Position를 선택해 주면, 공표가 된다. 입력의 이름을 물어볼 것이고, Y Position 입력에 대해서도 마찬가지로 해 준다.
그림15 입력 공표하기
공표된 입력값을 시험하기 위해서, Viewer > Show Parameters 메뉴를 선택해 준다. 컴포지션의 공표된 입력 목록이 나타나고 값을 조절해 줄 수 있다. 그림16 참조
그림16 컴포지션의 공표된 입력값을 보고 조절하기
이제 공표된 값이 있기 때문에, 화면보호기로 사용될 때에도 나타나게 된다. 그림17 참조
그림17 화면보호기 컴포지션에 나타난 입력값
코코아 프로그램에서도 코코아 바인딩을 이용해서, 공표된 입출력을 사용할 수 있다. 그림 18을 보면, 두개의 슬라이더가 콤포지션의 입력에 연결되어 있다. 이를 통해 사용자가 조작이 컴포지션을 포함하고 있는 프로그램을 통해서 이루어 질 수 있는 것이다.
그림18 코코아 바인딩을 통해서 컴포지션의 입력값 제공
생각했던 것첨럼, 공표된 입출력을 통해서 외부와 연결을 하면, 엄청난 가능성을 가지게 된다. 혁식적이고 놀라운 비쥬얼 프로그램을 만드는데 십분 활용이 가능할 것이다.
[편집] 예제와 영감을 주는 것들
쿼츠 컴포저에 대해 간략히 알아보고, 어떻게 동작하는지 알았으니, 아래 예제를 보고, 다른 사람들은 어떻게 쿼츠 컴포저를 활용하는지 보도록 하자.
- 쿼츠 컴포져 토론 메일링은 개발자들 사이에서 쿼츠 컴포져와 관련된 사항에 대해서 논의한다.
- Futurismo Zugakousaku의 사이트에는 웹브라우저에서 감상이 가능한 쿼츠 컴포져의 멋진 예제가 있다.
- Sam Kass 사이트에는 iSight를 입력으로 사용하는 몇가지 예제가 있다.
- Quartonian은 쿼츠 컴포져로 만들어진 Video DJ(VJ)를 위한 프로그램이다.
[편집] 더 많은 정보
쿼츠 컴포저에 관해 더 많은 정보를 원한다면, 쿼츠 컴포져 프로그래밍 안내서를 읽어 보면 된다. 여기서 다루지 않은 깊이 있는 내용으로 가득하다.
- 원문 : http://developer.apple.com/graphicsimaging/quartz/quartzcomposer.html (2006-02-13)
- 2006-10-16 : wangsy (번역)
