실버라이트 3, 픽셀셰이더 이펙트와 비헤이비어

지난 7월 정식으로 출시된 실버라이트 3는 이전 버전에 비해 많은 기능이 추가되고 향상되어 바야흐로 본격적인 RIA를 개발할 수 있는 기술이 되었다. 실버라이트가 아무리 많은 기능과 성능을 제공하더라도 그것을 표현할 수 없다면 아무 소용이 없을 것이다.

공인석 gongdosoft@live.com | 휴즈플로우에서 근무중이며, 유령회사 공도소프트(http://gongdosoft. com)라는 블로그를 운영한다. 마이크로소프트 실버라이트 MVP와 닷넷커뮤니티 훈스닷넷에서 실버라이트 시삽으로 활동하며 여러 실버라이트 관련 커뮤니티에 기여하고 있다.

이은아 tlois2@hotmail.com | 일러스터 & 웹디자이너로 현재 Solspectrum 에서 근무하며, 실버라이트영상솔루션 개발에 참여 중이다. Expression MVP 이며, 훈스닷넷 Expression 파트 시삽활동 이외에도 여러 블렌드 교육과 세미나 활동을 하고있다. 

실버라이트 3에서 추가되거나 향상된 주요 기능은 월간 마소 2009년 6월호부터 8월호에 걸쳐 RIA섹션을 통해 소개한 바 있으니 참고하길 바란다.

익스프레션 블렌드(이하 블렌드)는 실버라이트와 WPF 애플리케이션을 표현하고 디자인하는데 사용하는 도구로, 지난 7월 20일 3 버전으로 정식 출시되었다.
블렌드는 개별 그래픽 요소를 꾸미기보다는 주로 애플리케이션의 전체적인 레이아웃을 설정하고 미리 만들어진 그래픽 오브젝트(주로 이미지)를 배치하며 사용자와의 인터랙션을 디자인하는 툴이다. 그런데 아직까지도 실버라이트나 블렌드가 대부분의 개발자와 디자이너에게 생소한 게 사실이다. 새로운 기술을 다룰 때는 이런 생소함이 걸림돌이 되는 경우가 많을 것이다. 이번 컬럼에서는 디자이너도 실버라이트 3를 좀 더 쉽고 재밌게 접근할 수 있도록 블렌드를 중심으로 설명하도록 하겠다. 또한 디자이너와 개발자가 어떤 식으로 협업하게 되는지 염두하면서 읽어보길 바란다. 참고로 이번 컬럼의 내용은 지난 5월에 열린 개발자 페스티벌 2009 행사에서 발표한 내용을 대담 형식으로 재구성한 것임을 밝힌다.
 
픽셀셰이더 이펙트

[공도]   은아님, 실버라이트 3가 출시되면서 블렌드 3도 함께 나왔는데요, 혹시 블렌드 2를 사용할 때‘이게 없어서 아쉬웠다’하는 기능이 있었나요?
 [은아]   물론 많죠. 그 중에서도 이미지나 오브젝트에 블러나 드랍 쉐도우처럼 간단한 효과도 줄 수 없어서 답답할 때가 있었어요.
 [공도]  네, 그런데 이제 블렌드로도 그런 이펙트를 사용할 수 있게 되었죠. 어떻게 사용하는지 보여주세요.

실버라이트 3에서 이펙트 사용하기 

- 이미지, 도형, 버튼 등 어떤 종류의 오브젝트라도 상관없이 하나를 골라 배치한다.
- Properties 탭에서 Appearance에 있는 Effect에서‘New’버튼을 클릭한다.

- 기본적으로 Blur와 DropShadow효과를 사용할 수 있다. 원하는 효과를 선택하고 [OK]를 클릭하여 효과를 적용한다.

또는 Assets 탭에서 Effects 항목을 클릭해 보면 다음과 같이 두 개의 이펙트를 볼 수 있다. 이펙트를 적용할 오브젝트위로 드래그&드랍한다.

- 이렇게 적용된 이펙트는 오브젝트 트리에서 확인할 수 있으며 이펙트가 변경할 수 있는 속성을 가지고 있다면 Properties 탭에서 수정할 수 있다. 예를 들어 블러 이펙트의 경우, Radius 속성을 변경해 그래픽을 얼마나 번지게 표현할 지 설정할 수 있다.

 [은아]   공도님, 그런데 실버라이트가 설마 이펙트를 두 개만 지원하는 건 아니겠죠?
 [공도]  물론 아니죠. 실버라이트가 기본으로 두 개만 지원하고 있지만 필요하다면 추가로 개발한 이펙트를 추가하여 쓸 수 있어요.

 [은아]   그럼 디자이너가 필요한 다른 이펙트는 어떻게 쓸 수 있나요?
 [공도]  이펙트는 개발자가 라이브러리 형식으로 만들어서 전달해줘야 하는데요, 한 가지 다행한 사실은 이미 공개되어 있는 이펙트도 많고 다른 기술에서 사용하던 이펙트를 옮기기가 비교적 쉽게 되어 있다는 점이죠.

 [공도]  현재 웹에 공개되어 있는 실버라이트용 픽셀셰이더 중에서 가장 좋은 라이브러리는 코드플렉스에서 얻을 수 있는데요, 아쉽게도 실버라이트 3 베타 이후로 업데이트가 이뤄지지 않고 있어서 직접 사용이 불가능하더군요. 하지만 데모 코드의 일부를 제외하고는 실제 이펙트 코드는 모두 정상적으로 동작하기 때문에 제가 따로 수정을 해뒀어요. 이걸 사용해 볼까요?

실버라이트 3에서 사용할 수 있는 픽셀 셰이더 이펙트 라이브러리는 이달의 디스켓에서 가져올 수 있다.

 실버라이트 3에서 커스텀 이펙트 사용하기

- Projects탭에서 실버라이트 프로젝트를 오른쪽 클릭하고 Add Reference를 클릭한다.

- 이달의 디스켓에 있는 SLShaderEffectLibrary.dll과 SLTransition Effects.dll을 선택한다.
- Assets 탭을 열어보면 다음과 같이 수많은 이펙트를 확인할 수 있다. 오브젝트에 각 이펙트를 적용해 보면서 어떤 효과를 줄 수 있는지 확인해 보자.

 [은아]   와, 지원되는 효과가 상당히 많네요. 그럼 이제는 웬만한 이미지는 포토샵 없이도 이펙트를 적용해서 만들 수 있을 것 같아요.
 [공도]  그렇게 할 수도 있지만 그렇게 하면 안돼요.
 [은아]   굳이 다른 툴로 왔다갔다할 필요가 없는, 훨씬 더 좋은 방법이 아닐까요?
 [공도]  왜냐면 픽셀셰이더 이펙트는 말 그대로 대상 오브젝트의 한 픽셀 한 픽셀마다 효과가 적용되기 때문에 대상 오브젝트가 크면 클수록 성능 저하가 일어날 가능성이 높아요.
 [은아]   그럼 이펙트를 쓰는 것보다 포토샵 같은 이미지 툴에서 미리 이펙트를 적용하는 게 낫겠군요.
 [공도]  네, 만약 오브젝트가 단순한 이미지 리소스라면 그렇게 하는게 더 나은 선택이죠. 그렇지만 시각적으로 중요한 오브젝트에 동적으로 이펙트를 준다거나 스토리보드를 사용하여 이펙트에 변화를 준다면 좋은 활용이 될 수 있을 거에요.
 [은아]   아∼ 이펙트에 있는 속성을 스토리보드에서 조절하면 더 멋진 효과를 줄 수 있겠군요!

커스텀 이펙트를 활용한 간단한 게임 인트로 화면 만들기 

- 인트로 화면에서 사용할 이미지와 음악 파일(MP3)를 프로젝트에 포함하고 이미지 및 오브젝트의 레이아웃을 적당히 구성한다.
- 각 오브젝트에 적당한 이펙트를 적용한다.
- 스토리보드를 생성하고 다음 그림과 같이 앞에서 만든 이펙트를 선택하고 스토리보드의 타임라인에서 이펙트의 속성 값을 변경하여 키프레임을 만든다.

여기에서 재생버튼을 눌러 보면 이펙트 역시 애니메이션으로 변화하는 것을 볼 수 있다.

 [은아]   그런데 화면에 이펙트도 주고 스토리보드로 이펙트가 변형되도록 했는데 막상 실행해 보면 결과물을 확인할 수가 없어요. 사실 이게 실버라이트 2를 할 때도 제일 불만이었는데요, 디자이너가 꼭 스토리보드를 실행하는 코드를 익혀야 하나요?
 [공도]  바로 그 부분이 실버라이트 3에서 인터랙션 기능을 강화한 이유죠. 실버라이트 3에는 트리거(Trigger)와 액션(Action) 그리고 비헤이비어(Behavior)라는 기능이 추가되었는데요, 이걸 조합해서 디자이너가 직접 블렌드를 사용하여 특정 조건(트리거)이 일어났을 때 스토리보드가 실행된다거나 사운드를 재생한다거나 또는 속성 값을 변경할 수 있어요.
 [은아]   말로만 들어서는 감이 잘 안오는데요, 앞에서 만든 인트로에 배경 음악도 넣어보고 스토리보드도 실행해보죠.

비헤이비어의 자세한 설명은 2009년 6월호에 실린 ‘실버라이트 3 새로운 기능 소개’를 참고하길 바란다.

 
트리거와 액션을 이용하여 인터랙션 디자인하기
- 앞에서 생성한 스토리보드를 비헤이비어로 실행하는 과정이다. 먼저 Assets탭에서 Behaviors를 선택한 다음 ControlStoryboard Action을 LayoutRoot에 드래그&드랍한다.

- ControlStoryboardAction을 선택하고 Properties 탭을 보면 다음과 같이 Trigger항목과 그 외의 속성 항목을 볼 수 있다.

Trigger는 말 그대로 이 동작(액션)이 일어나는 조건을 의미한다. 기본적으로 EventTrigger가 선택되는데, EventName 속성에서 선택된 오브젝트의 특정 이벤트가 발생했을 때 ControlStoryboardAction을 실행하겠다는 의미가 된다. 물론 이 외에도 여러가지 조건을 사용할 수 있다. ControlStoryboardAction은 Storyboard 속성으로 선택한 스토리보드에 재생, 일시정지, 중지 등의 동작을 실행할 수 있다. 또한 비헤이비어는 여러 개를 중복해 사용할 수도 있다.
- 이제 실행 해 보면 앞에서 설정한 트리거(조건)과 액션(스토리보드 재생)에 따라 LayoutRoot 엘리먼트가 로드될 때(Loaded) 지정한 스토리보드(sb_Frame)가 재생될 것이다.

 
 [은아]   무엇보다 개발자의 도움 없이 내가 만든 스토리보드를 내가 원할 때 실행할 수 있는 게 마음에 들어요.
 [공도]  그렇죠. 비헤이비어는 개발자가 할 일인 코딩은 개발자에게, 디자이너가 할 일인 인터랙션은 디자이너에게 확실히 분배하기 때문에 서로 자연스럽게 협업할 수 있어요.
 [은아]   그런데 저는 배경 음악을 무한 반복으로 재생하고 싶은데요, 거기에 맞는 비헤이비어가 없는 것 같아요. 어떻게 하죠?
 [공도]  이펙트와 마찬가지로 비헤이비어도 개발자가 라이브러리로 만들 수 있어요. 이런 일이 있을 줄 알고 미리 간단한 비헤이비어를 만들어 봤습니다.
 

커스텀 비헤이비어(SampleBehaviors.dll)는 이달의 디스켓에서 가져올 수 있다.

커스텀 비헤이비어를 사용한 배경 음악 무한반복 하기
- SampleBehaviors.dll을 프로젝트에 참조로 추가한다.
- 이제 Essets탭의 Behaviors 항목에 AdvancedPlaySoundAction과 ControlMediaElementAction이 보일 것이다.
- AdvancedPlaySoundAction은 RepeatBehavior 속성을 설정하여 몇 번 반복할지 결정할 수 있다. 만약 무한 반복하고 싶다면 Forever를 선택하면 된다.

- ControlMediaElementAction은 ControlStoryboardAction와 비슷하게 해당 MediaElement를 재생, 일시정지, 중지하는 동작을 실행할 수 있다.

 
 [은아]   그런데 이펙트의 경우는 자주 사용하는 것이 많지 않아서 괜찮을 것 같은데, 비헤이비어는 하다보면 갑자기 필요할 수도 있잖아요. 아무래도 사용자와 인터랙션하는 부분은 상당히 동적이니까요. 이러면 디자이너가 좀 답답할 것 같아요.
 [공도]  그래서 초기 프로토타이핑과 기획 단계가 중요하죠. 특히 프로토타이핑에서 사용자와 인터랙션이 어떤 방식으로 어떻게 일어날지 기획자, 디자이너, 개발자가 함께 토의를 하여 미리 정리를 하는 것이 좋아요.

 [은아]   프로토타이핑 단계에서 그런 논의가 충분히 될 수 있을까요?
 [공도]  처음에는 익숙하지 않은 프로세스 때문에 시행착오가 분명히 있겠지만, 적어도 RIA를 만든다는 사실을 서로 염두하면서 토의한다면 충분히 의미있는 협의를 만들 수 있을 거에요. 사실 블렌드 3에는 이렇게 RIA에서의 인터랙션까지도 미리 프로토타이핑 할 수 있게 도와주는 스케치플로우(SketchFlow)라고 하는 강력한 기능이 추가됐습니다.

이달의 디스켓 : silveright3.zip

참고 자료
1. WPF/Silverlight Effect Library(CodePlex): http://wpffx.codeplex.com/
2. Pixel Effect 동영상: http://silverlight.net/learn/learnvideo.aspx?video=187303
3. 비헤이비어, 트리거 및 액션, http://www.sharpgis.net/post/2009/08/11/Silverlight-Behaviors-Triggers-and-Actions.aspx
4. 비헤이비어와 커맨드: http://blog.kirupa.com/?p=378

[마이크로소프트웨어] 카테고리는 월간 마이크로소프트웨어의 온라인 서비스인 아이마소와 함께합니다.