Designer's Blend - 디자이너 대상의 세미나 참여 후기

2009년의 1월을 Designer's Blend - 디자이너 대상의 세미나와 함께 했습니다.
모임은 시작 전에도 북적였고, 후반부에는 준비된 세미나실을 확장하여 사용해야 할 만큼 많은 분들이 참여했답니다.

예전 UX팩토리 모임과 같은 장소여서 어렵지 않게 찾을 수 있었는데 엘리베이터에서 UI스터디 분들을 만나 살짝콩 인사를 나누며 올라갔더니 황리건님이 반갑게 맞이해주셨습니다. 스터디에서 함께 오신분들을 찾느라 긴 이야기를 나누지는 못했지만 눈빛으로 많은 이야기를 나누었다고 혼자 생각해 봅니다.(흠흠.. ^^;)

사실, 눈빛을 통한 대화시도는 생존을 위함이었습니다. 식사를 못하고와서 다크서클로 멜빵을 하고 있었는데 그런 제가 너무 안쓰러워 보였는지 UI스터디의 고라디오님이 초콜렛을 주셨지요. 이후로도 고마운 분들의 빵, 귤, 음료 등을 기부 받아 생존할 수 있었습니다. :)

세션별 후기 보기

익스프레션 블렌드로 할 수 있는 일 - 황리건님

첫세션으로 황리건님의  블렌드 소개로 시작했습니다. 익스프레션 블렌드의 대략적인 소개와 플래시 플랫폼과의 차이 그리고 실제로 어디에서 쓰이고 있는가에 대해 말씀해 주셨지요. 게다가 UI스터디에 대해 살짝콩언급해주시기도 하셨습니다.

AIR	플래시	플래시 라이트
WPF	실버라이트	실버라이트 모바일

(실버라이트 사례 소개 : 올림픽실시간 중계, 네이버 UCC플레이어, v3 엔터프라이즈 등...)

덧붙여 '블렌더'에 대한 이야기를 해주셨습니다.

블렌더? = real designer
designer - integrator(!!) - developer

개인적으로는 매우 공감하는 내용이었기에 흥미롭게 들었지만 다른 분들은 어떻게 생각하시는지 궁금했습니다. 작년 여름에 이와 비슷한 이야기를 한 적이 있었는데 반응이 그리 좋지는 않았던 걸로 기억합니다. 타이밍의 문제라는 생각도 들었지만 역시 황리건님과 같이 이야기를 멋있게 풀어놓지 못했던 이유가 더 큰 것 같습니다.

예제 설명중에 좋은 책이 소개 되었는데 바로 '사랑 하지 않으면 떠나라'라는 책입니다. 제목은 로맨스 소설을 연상시키지만 '개발자의 자기 계발과 경력 관리를 위한 52가지 실천 가이드'라는 부제를 달고 있습니다. 디자이너분들의 자기계발과 경력관리를 위해 읽어도 충분히 도움이 될 만한 책이라고 자신합니다.

마지막으로 MIX09 에서 익스프레션3 버전을 발표한다고 전해 주셨는데요. 저도 직접 참여해서 그 현장을 담아보고 싶은 마음이 굴뚝같습니다. (참고로 10KB로 실버라이트&WPF 애플리케이션 만들기 경진대회를 통해서 티켓을 티켓을 받을 수도 있다고 이야기를 전해 들었습니다. 그러나 이런, 저런, 요런 걸 보고나니 엄두가 안나는군요.)

블렌드에서 애니메이션 만들기 - 김선구님(하얀코코)

두번째 세션은 김선구님이 공이 튀는 예제를 만들어 보면서 블렌드에서의 애니메이션 만들기를 설명해 주셨습니다.
워낙에 자세히 설명해 주신 터라 툴사용이나 기능적인 면을 알아보는데 어렵지 않았고 처음 접하는 분들도 블렌드에 흥미를 가질 수 있도록 잘 이끌어 주신 것 같습니다.


세미나에서의 화면을 보면서 작업중에 필요한 가속도 설정을 포토샵에서의 커브와 같이 시각화툴로 설정할 수 있는 것이 인상적이었고, 좌측 하단의 레이어 리스트에서 위쪽에 있는 오브젝트가 더 밑으로 깔리는 것이 익숙치 않았는데 이것은 레이어 리스트가 아닌 ‘objects and timeline' 이어서 그런듯 싶더군요.

더불어 스토리보드의 사용법에 대한 간략한 소개와 선행된 애니메이션에 구애받지 않고 실행되는 예제를 보여주셨는데, 아직 시작점을 설정할 수는 없다고 말씀하셨지만 이전위치를 받아들여서 그대로 시작하므로 시작점 설정하지 않아도 상관없고 더불어 자유롭게 움직임을 표현하는데 있어서 유리하다는 이야기를 전해주셨어요. 선행된 애니메이션에 구애받지 않는 오브젝트의 움직임은 뭐랄까. 말잘듣는 착한 강아지를 보는 듯 했습니다. (수정)

컨트롤 - 스타일과 템플릿 - 이은아(도온)

세번째 세션으로는 이은아님이 plastide.com을 보여주시면서 컨트롤에 대한 예제와 스타일을 입히는 방법 등을 설명해 주셨습니다.

캔버스, 그리드와 같은 컨트롤의 사용방법과 스타일&템플릿에 대한 이야기 전 미리 알고 가야할 것들을 짚어주셨는데 생각보다 많은 분들이 스타일이나 템플릿에 대한 개념을 플렉스나 다른 툴들을 통해 미리 알고 오셨던 것 같습니다. 하지만 블렌드에서 스타일과 템플릿은 디자이너에게 빠뜨릴 수 없는 중요한 기본 개념이겠지요.

스타일 적용 가능한 요소들
도형 / 레이아웃 / 텍스트 / 컨트롤

'부모'와 '자식'컨트롤에 대한 이야기가 살짝 오가면서는 저는 쌩뚱맞게도 WPF매거진에서 봤던 '부모가 자식을 죽일려고 할때 자식이 그 죽임을 당하기전에 뭔가 처리할수 있는 방법'이라는 포스팅이 생각나더군요. 아주 짧게 이야기 하시긴 했지만 디자이너들이 이런 개념을 접하기는 조금 어렵지 않았나 생각됩니다. (필요하긴 하겠지만요... ^^)

테마적용과 툴킷활용 - 이원준(거북사마)

4번째 세션은 실버라이트 까페의 운영자이신 이원준님이 진행해 주셨습니다.
듣고 다 까먹고 있다가 필요할 때 찾아서 헤메게 되지 않을까 생각되어 간략하게 다루어진 내용을 적어보았는데 적어놓고 보니 필요할 때 원준님의 자료를 다시 한번 찾아보는게 더 나을 것 같습니다. ^^;;

1. xaml로 만들어진 테마파일을 application resource를 이용하여 적용할 수 있다.
    1)내부의 스타일을 복사해서 자신이 사용하고자 하는 xaml에 붙여넣기 한다.
    2)함수들을 참조해야하는 부분이 있어서 그 부분도 설정해 줘야한다.   
    3)<application ~에 해당하는 항목들을 복사해 넣는다.
    *)edit control parts ~를 통해 버튼에 적용이 가능하다.

2.실버라이트 툴킷을 통해  테마를 접할 수 있다. (dll을 참조해서 템플릿을 입힐 수있다.)
    1)실버라이트 툴킷은 플러그인형식으로 제공된다.
    2)컨트롤과 컴포넌트들의 모음(12개의 컨트롤과 9개의 테마)
    3)유닛테스트와 템플릿코드 등..

여담으로 실버라이트에서 버튼 오버 다운 등에 대해 각각 해줘야하는 것이 어렵고, 귀찮은 작업이라고 말씀하셨는데, 사실 플래시를 사용해 비슷한 버튼 디자인을 해보신 분들이나 어플리케이션의 UI디자인을 해보신 분들은 이러한 부분에 대해서 이미 감수하고 계시리라는 생각이 들었습니다.

네비게이션 만들기 - 최형준(peterC)

5번째 세션은 최형준님이 라디오 버튼을 이용해서 네비게이션을 구현하는 과정을 소개해주셨습니다.
네비게이션 만들기에서 라디오 버튼을 이용한 다는 것이 익숙치 않았는데 계속해서 설명을 듣다보니 html마크업에서 ul,li로 네비게이션을 처음 만들어 보던때와 비슷한 느낌이 들었답니다. (그러고보니 저는 플렉스에서 버튼바, 메뉴바, 탭바를 이용했던 경험이 있어서 더 어색했다고 보입니다.) 또 스타일 리소스 정의를 프로젝트 전체와 현재 문서에 지정하여 적용할 수 있다는 내용도 알려주셨지요.

저는 이번에도 툴에서 인상적인 내용을 발견했는데요. ‘states의 내용을 수정할 때 state recording is on’이라는 문구가 떠서 현재 편집되고 있다는 것을 알려주는 것이 인상적이었습니다. 마치 여러편집기 등에서 문서가 수정중이라면 열려있는 파일명 앞에 '*'로 표시해 주는 것 처럼요. 이것이 나름 recording하고 있는 기분이 들게 해서 정말로 인터랙티브한 디자인을 하고 있다는 느낌이 나기도 하더군요.

마지막으로 states를 추가해서 애니메이션을 만들 수도 있다는 내용을 소개해 주셨는데요. 아쉽게도 실버라이트에서는 이벤트 패널에서 visual studio 2008을 실행해서 이벤트에 대한 코드를 추가해야 한다고 합니다.(이런!)

WPF 모션패스와 트리거 장미연(짱묜)

마지막 세션은 장미연님이 진행해 주셨습니다. 많은 분들이 주의를 기울여 듣는 것이 느껴질 만큼 편안하고 재미있게 진행해 주셨는데요. 작년에 UX 첫번째로 패스의 경로를 따라 움직이는 애니메이션을 만드는 모션패스를 설명해 주셨습니다. 적용방법으로는 라인과 오브젝트를 만들어 같이 선택한 후 convert to motion 하면 된다고 하는군요.

'객체들의 스택은 순서가 있으며 z-index를 사용해서 레이어가 겹치는 순서를 정할 수 있다.'는 이야기를 들으면서 두번째 세션에서 우측의 objects and timeline이 기존의 어도비 툴에 익숙해 진 사용자에게 불편하지 않을까 하는 생각이 좀 수그러들었습니다. x, y, z을 설정할 수 있는 것을 보고는 오히려 편한 면도 있겠다는 생각에 긍정적으로 받아들여지더군요.(사실, 플렉스에서는 setChildIndex로 순서를 정렬할 수 있는데 어쩔 수 없이 소스코드를 수정해야했거든요.) 참, 유저컨트롤을 에셋 라이브러리에서 사용하려면 빌드를 한번 해야한다는 이야기 해주셨네요.

실버라이트와는 다르게 WPF에서는 트리거를 통해 이벤트를 제어한다고 합니다.
트리거에 스토리보드를 추가해서  인터랙티브한 효과를 넣을 수 있고 WPF에서 이벤트 트리거를 사용하면 코딩을 하지 않아도 된다고 설명해 주셨는데 플래시 플랫폼으로 통합된 플렉스와 비교한다면 인터랙티브 효과를 적용하는 것은 블렌드 쪽이 좀더 편해 보이는군요. (그러나 자세한건 직접 활용해 봐야 알겠지요... ^^;)

트리거 - 속성트리거 / 이벤트 트리거

속성트리거 - 객체의 속성값이 변경되었을때 이벤트가 일어난다.
이벤트트리거 - 조건문을 객체에 연결해준다.

마치며
항상 느끼는 것이지만 역시 블로그로만 알고 있었던 분들을 실제로 만나게 되는 것은 굉장히 들뜨고 재미있는 경험입니다.(비록 한분 한분께 인사를 드리진 못했지만요. ^^;) 의외로 많은 분들이 블렌드에 관심을 가지고 계셨던 것도 인상적이었고 블렌드에 대해 설명을 들으면서 저도 꼭 활용해보고싶다는 생각이 들었습니다.

이런 세미나가 앞으로도 지속적으로 열려서 서로간의 정보도 공유하고 공감대를 형성했으면 좋겠습니다. 덕분에 우리 UI스터디 모임에서도 재미있게 이야기할 주제가 또 하나 늘어나게 되어 기분이 좋네요. 다음번에는 편히 이야기도 나눌 수 있는 자리도 있었으면 좋겠는데 언제가 될지 기대됩니다.