Expression Night - 위짓(혹은 개짓)을 만들어 봅시다.

Expression Night

10월 4일 오후 2시 30분 UX/RIA 강조주간 시리즈2인 Expression Night이란 행사가 진행되었습니다.

팀별로 블로그용 위짓이나 윈도우즈 비스타 사이드바 개짓(Gadget)을 기획하고,
가능하면 배포 전단계까지 만들어 보는 것을 목표로 하는 행사였습니다.

행사 전에 신청을 해주신 팀이 34개나 되어 너무 많이 오시면 행사 진행을 어떻게 하나 걱정할 정도로,
매우 고무적이였다고 하는데요. 10월 4일이 연휴의 중간이다 보니, 이런 저런 이유로 참가하지 못하신
팀이 많으셨습니다.

그리고 저를 비롯하여, 실버라이트 개발자/디자이너 커뮤니티에서 왕성한  활동을 하고 있는 9명이
멘토 자격으로 참여하여, 각 팀들의 위짓 기획/제작을 돕는 조언자 역할을 하였습니다.
(휴즈플로우에서는 저와 공도씨 그리고 피터씨가 참가하였습니다.)

행사에 대한 내용은 이철성 MVP님께서 후기를 자세하게 벌써 포스팅 하신게 있어서요.
저는 저희 팀이 했던 활동에 대해서만 정리해 보았습니다.

 

위짓은 [                    ]다.

황리건 과장님이 팀별로 ‘위짓은 [                  ]다’라는 의미 찾기 숙제를 내주셔서,
우리 팀도 그것에 대해 생각하기 시작했습니다.

일단 어떤 위짓을 만들까부터 고민했어야 했습니다.
그러기 위해서 현재 무엇을 가졌느냐, 현재 무슨 일을 하고 있느냐를 먼저 생각했습니다.

우리 팀은 (주)이피언스에서 오신 열혈 개발자 2분과 열정적인 디자이너 1분으로 이루어진 팀이었습니다.
그리고 팀의 멘토로 저와 경훈씨(훈쓰)가 돕기로 하였습니다. (마린 3~4에 메딕 1정도의 환상적 조합?)
위짓의 디자인까지 마무리해서 보여줄 수 있는 좋은 팀이었습니다.

한편, 이피언스는 그룹웨어를 개발하는 업체였습니다.
그룹웨어 내부에 축적된 데이터들로부터 읽지않은 메일/쪽지의 개수나, 결재 대기 중인 문서의 수 등을
XML형태의 데이터로 외부에 오픈 시킬 수 있었습니다.

저희는 바로 그룹웨어의 알림 역할을 하는 위짓을 만들기로 결정하였습니다.
평소에는 그룹웨어로부터 읽지않은 메일/쪽지 개수 등을 모니터링 할 수 있게 하고,
필요한 경우 링크를 통해 그룹웨어에 접속할 수 있는 브라우저 창을 띄워줄 수도 있는 것.

이 정도면 황리건 과장님이 말씀하신 ‘데이터가 사용자를 찾아온다’는 위짓의 부분적 의미에도 적합해 보였습니다.

 이렇게 위짓에 대한 기획회의를 끝내자, 드디어 위짓의 의미를 찾을 수 있었습니다.

위짓은 조.각.피.자.다!

먼저 기존에 준비해 놓은 (혹은 운영 중인) 여러분의 서비스를 피자라고 가정합니다.
여러분들이 맛있는 기능들을 많이많이 토핑하여 정말 맛있는 피자를 만들어 놓았을 것입니다.
그 맛있는 피자를 한 조각 떼어 냅니다. 조각이지만 피자 전체의 맛을 느낄 수 있습니다.
이렇게 부분적으로 노출하면서 전체를 효과적으로 알릴 수 있는 그런 것이 위짓이라고 생각했습니다.

서비스를 처음 접하신 분에게는 시식의 의미로 다가올 수 있을 것이며,
이미 서비스를 이용하던 분에게는 먹다 남아서 포장한 뒤 집으로 싸가지고 가시는 의미로도
생각해 볼 수 있습니다.

매번 삭막한 그룹웨어 환경으로 다이빙할 필요없이 자신의 블로그나, 윈도우즈 비스타 사이드바에서
위짓이나 개짓 형태로 그룹웨어 데이터의 변동을 모니터링 하시다가, 필요한 일이 발생했을 경우.
그룹웨어에 접속하실 수 있으실 겁니다.

위짓 만들기

일단 종전에 어떤 위짓들이 존재했나 살펴보는 시간을 가졌습니다.
최근 오픈한 DAUM의 위젯뱅크를 함께 살펴 보았습니다.

무엇을 만들지가 명확했기 때문에 일단 디자이너이신 장대리님에게 먼저 작업을 진행하도록
부탁을 드리고, 개발자들은 따로 모여 제가 ‘LINQ to XML이 얼마나 쉽고 강력한가’에 대해
예제를 통해 설명을 드렸습니다.

Flickr.com의 Open API로부터 XML형태의 검색 결과를 받아 LINQ to XML로 처리한 후 화면에
표시한 모습입니다.

그사이 예쁜 위젯 디자인이 조금씩 모습을 드러내고 있습니다.

...

MS에서 준비한 맛있는 샌드위치로 저녁을 때우고, 2번째 시간으로 접어 듭니다.
마지막 시간으로 1시간 10분의 여유가 있습니다.

완성된 디자인을 이미지 파일로 받은 후, Expression Blend에서 XAML로 만드는 중입니다.

이미지를 깔고 TextBlock을 추가하고 디자이너에게 ‘폰트는 이정도 사이즈면 되요?’,
’글자 위치가 이렇게 정렬되면 맞아요?’하고 물어가면서 진행하였습니다.

이 부분은 디자이너의 몫인데 아직 팀원들이 Expression Blend나 실버라이트에 익숙하지 못하기
때문에 이런 식으로 진행할 수 밖에 없었습니다.

하지만 보통 정상궤도에 오른 팀들도 이런 작업행태를 보일 때가 있는데,
이런 경우를 Arturo의 표현을 빌리자면, Piggy Back이라고 한다네요.
돼지를 등에 업고 뛴다라는 표현인데, 개발자가 디자이너를 등에 업고 뛰는 격이라는 것이지요.
그만큼 업무의 효율이 떨어질 수 있는 상황이라는 것을 잘 비유한 표현이라고 생각합니다.

Arturo가 업무 진행 유형 3가지에 대해 설명하는 중입니다. 3번이 PIGGYBACK입니다.

저희 팀 작업을 구경하고 있는 Arturo.
제가 VisualStateManager를 이용하면서 UserControl에 StateGroup과 State들을 정의하는
모습에 대단히 흥미로와 하면서 질문을 많이 하더군요.

 

우리팀은 최종 위젯 인기투표 결과 입상은 못했지만,
그래도 실버라이트에 대해 많은 걸 알고 가시는 시간이 되셨기를...