• 다음에 들을 세션은 The Future of Expression Blend입니다. GM인 Douglas K. Olson과 PM 디렉터인 Christian Schormann이 발표하네요.2009-03-19 10:24:28
• Expression Blend 3 Preview가 어제 소개되었죠. 여기서 바로 다운받을 수 있어요. 실버라이트3 지원을 포함해서 상당한 업데이트가 있었네요.2009-03-19 10:27:19
• 세션 시작하기 2분전이에요. 아참 어제는 트위터에 올린 글이 대형 스크린에 보여지는 영광을.(저는 직접 못봤는데 아는 분들이 많이 보셨더라구요. 한글로!)2009-03-19 10:29:47
• 딴짓(메일 확인) 하는 사이에 세션이 시작했네요. Expression Blend3의 목표에 대해 설명합니다2009-03-19 10:34:55
• 스케치 플로우에 대해 어제 소개해 드렸죠. Blend3의 목표중에 하나가 “이른 단계의 디자인&프로토타이핑이 가능하게 하기”라고 해요.2009-03-19 10:36:11
• 두번 째 목표는 코드 없이 인터랙티브 디자인을 구현하고, 데이터를 통해서 시각 디자인을 더 쉽게 만드는 것이죠.(저는 특히 이 부분이 마음에 들었어요. 데이터로 디자인한다니!!)2009-03-19 10:37:20
• 다음으로는 소스 관리와 실버라이트3(!) 지원이겠지요.2009-03-19 10:37:43
• 스케치플로우에 대한 설명이 계속됩니다. topdown과 bottomsup 디자인은 아이디어를 실험하게 해주고, 스케치플로우는 디자인을 언제든지 테스트할 수 있고, 디자인 아이디어에 대해 커뮤니케이션하거나 스테이크홀더들에게 설명하기가 좋습니다.2009-03-19 10:40:19
• 마이크로소프트에는 유난히 대머리 분이 많은데, 특히 디자인 쪽에 일하는 분들이 그래요. 지금 발표하는 두분을 포함해서, 에이전시 비즈니스를 담당하는 Darren McCormick도 그렇죠(이 친구는 4월에 한국에 온데요.)2009-03-19 10:41:28
• 어쨌든, 스케치플로우 데모가 이어집니다. 플로우 다이어그램 형태를 띄고 있는 하단의 Application Flow로 작업하는 것을 보여줍니다. 각각의 요소가 선으로 연결되어 있는데 각 페이지를 뜻한다고 볼 수 있어요.2009-03-19 10:42:42
• Welcome이라는 페이지를 만들고, Start 다음 페이지에 위치시켰네요. 그리고 화면에 스케치를 합니다.(헉… 무지 허접하게 그림을 그렸어요. 마우스로 그림 그리기 힘들어서 그렇겠죠;)2009-03-19 10:43:42
• 또 다른 Community라는 페이지를 열었는데, 여기에는 손으로 그려서 스캔한 이미지가 들어있네요.2009-03-19 10:44:29
• 스케치플로우에서도 역시 모든 컨트롤들을 쓸 수 있어요. 버튼이나, 슬라이더바라던지, 근데 여기서 스케치 스타일(손으로 그린 것 같은)의 재밌는 스킨도 있네요.2009-03-19 10:46:04
• 스케치 스타일로 만든 화면이라도 속성값을 변경하면 원래 WPF 스킨 디자인으로 다시 바껴서 실제 개발에서도 쓸 수 있다고 해요.2009-03-19 10:46:59
• 아시다시피, 블렌드는 컨트롤(컴포넌트)을 만들어서 사용할 수 있는데 스케치플로우에서도 미리 만들어 놓은 팝업UI 등을 컴포넌트로 해서 재활용할 수 있죠. 갠츈하네요.2009-03-19 10:48:28
• 스케치플로우의 결과는 스케치플로우 플레이어에서 실행이 되는데, 이 플레이너는 별도의 네비게이션 메뉴를 갖고 있어서 여러 페이지를 쉽게 왔다 갔다 할 수 있어요. FLOW 다이어그램도 볼 수 있고요.2009-03-19 10:49:51
• 이건 정말 기획자들이 꼭 배워야 할 툴이 될 것 같아요. 게임 기획자라던지, 웹사이트 기획자라던지… 기획자 분들은 꼭 한번 써보세요. 프로토타이핑하는데 있어 정말 유용하겠네요.2009-03-19 10:51:37
• 스케치플로우의 재밌는 점은 이렇게 만든 프로토타입을 보면서 정말 스케치하면서 피드백을 줄 수 있어요. 프로토타입 화면에 직접 스케치를 하고 코멘트를 쓰고 저장하면 이메일로 디자이너에게 바로 피드백이 전달되요. wow2009-03-19 10:54:49
• 전달된 피드백은 블렌드3의 피드백 화면에서 직접 확인할 수 있구요. 정말 꼭 필요한 기능이었죠? 시안 리뷰할 때도 많이 쓰일 수 있겠네요.2009-03-19 10:56:11
• 어제 스케치플로우를 소개하면서 사람들에게 가장 많은 환호를 받았던 것이… 자동으로 화면 기획서(워드파일)를 만들어 준다는 점이었어요. 피드백도 모두 포함해서요.2009-03-19 10:57:11
• 데이터로 디자인 하는 작업을 보여주고 있는데, 샘플 데이터 파일을 가져오면 여기에 포함된 내용을 분석해서 컨트롤등에 바로 적용시켜서 볼 수 있어요(기술적으로는 블렌드의 강점인 데이터 바인딩을 이용하게 되어 있죠)2009-03-19 10:59:43
• 스노우보드 샵에서 제공하는 xml 데이터를 가져왔는데, 스노우보드의 이미지까지 자동으로 불러와서 화면에 보여주네요. 코드는 전혀 없구요.2009-03-19 11:00:37
• 이렇게 xml 데이터 파일을 가져와서 작업을 한다면, 디자이너들도 xml 파일에 대해서 약간은 이해하고 있을 필요가 있겠네요. 앞으로는 디자이너가 개발자에게 “xml 데이터 파일 주세요” 라고 말하겠군요.2009-03-19 11:02:17
• 디자이너가 작업하기 전에 필요한 데이터가 무엇인지 개발자랑 사전에 얘기해서 xml 데이터 파일의 구성에 대해서도 미리 정해둘 필요가 있을 거구요.2009-03-19 11:02:59
• 디자이너와 개발자가 같이 작업하기 전에 문서작업을 하는 경우가 있는데 사전 데이터 작업 과정을 통해서 협업이 좀 더 수월해 질 것 같기도 해요.2009-03-19 11:04:07
• 샘플을 보니 장난이 아니네요. 손으로 대충 그린 것 같은 화면인데 실제 애플리케이션처럼 동작해요. ㅎㅎ2009-03-19 11:05:20
• 막간을 이용해서 블렌드3 프리뷰 버전 다운로드 중… 빨리 해보고 싶어요. 이왕 하는거 IE8도 함께 다운 받아야 겠네요.2009-03-19 11:06:59
• 스케치플로우 하니까 휴즈플로우가 생각난다는… 내일 발표 준비는 잘되는지 궁금하네요.2009-03-19 11:08:12
• 비주얼디자인을 좀 더 쉽게 하는 부분으로, 포토샵과 일러스트레이터 파일을 완벽하게 Import하는 기능을 소개하고 있어요. Design Ecosystem을 강화하는 차원에서요.2009-03-19 11:10:06
• 컴포넌트 스키닝을 더 쉽게 할 수 있도록 비주얼 스테이트를 편집하기 쉬워졌구요.2009-03-19 11:11:11
• 이번에는 포토샵 파일 불러오는 데모가 진행이 됩니다. 계속해서 스노우보드 샘플로 진행을 하네요(겨울도 아닌데?)2009-03-19 11:11:43
• 포토샵에서도 벡터 레이어를 쓸수가 있죠. 주로 마스크처럼 많이 쓰던데, 벡터 레이어는 그대로 XAML로 블렌드에 들어올 수 있어요. 물론 가져오기 옵션에서 flatten image로 만들 수도 있구요.2009-03-19 11:12:57
• XAML로 가져온 벡터 레이어는 블렌드3에서 계속 편집할 수 있겠죠.(당연히) 포토샵에서 삽입한 글자들도 그대로 편집할 수 있어요.2009-03-19 11:14:41
• 다운로드가 끝났어요. 이제 설치해 봐야죠. ㅎㅎ2009-03-19 11:15:40
• 다운로드에 잠시 한눈을 판 사이에 스케치플로우 화면으로 다시 넘어왔네요. 스케치플로우에서 아까 잠깐 빼먹은게 포스트잇처럼 생긴 메모장 같은 걸 화면에 쉽게 생성할 수 있더라고요.2009-03-19 11:17:32
• 왜 스케치플로우로 넘어왔나 했더니, 스케치플로우에 기획자가 남겨놓은 슬라이드바의 동작 부분을 설명하려고 했나봐요.2009-03-19 11:18:46
• 이 샘플에서는 슬라이더바에 버튼대신 스노우보더 이미지를 드래그하게 되어 있어요. 슬라이더바의 디자인을 쉽게 변경할 수 있다는 것을 알려주네요.2009-03-19 11:19:38
• 지금 작업하는 예제가 실버라이트3 프로젝트인데요. 블렌드3로 실버라이트3 프로젝트를 하는 경우에도 WPF에서 사용했던 데이터 바인딩을 사용할 수 있네요.2009-03-19 11:20:39
• 슬라이더바의 값에 바인딩을 걸어서 실시간으로 다른 요소의 색상이 바뀌는 것을 보여주었어요.(짝짝짝)2009-03-19 11:21:20
• 다음은 데이터 기반의 애플리케이션을 만드는데 더 쉬워진다는 “Desiging with Data”에요. 마이크로소프트는 정말 개발자 회사답다는 느낌. 이런 걸 조수아 데이비스한테 의뢰해서 멋진 작업을 만든다음에 보여주면 좋을텐데…2009-03-19 11:22:50
• 어쨌든 데이터 기반 디자인의 발상은 굉장히 좋고, 디자이너들이 이 기능을 잘 활용한다면 정보시각화나 시각디자인 영역에서 굉장히 멋진 작업들이 많이 나올 것 같아요.2009-03-19 11:23:46
• 마이크로소프트에도 빌벅스턴이 말한대로 많은 수의 디자이너가 일하고 있고 실무에서 블렌드와 같은 툴을 쓰기 때문에 아트 작업보다도 현업에 많이 초점이 맞추어져 있는 것 같다는 느낌이 듭니다.2009-03-19 11:25:18
• 블렌드3 화면 우측에 Data패널이 새로 추가되었어요. 여기에 가져온 xml 데이터를 트리구조로 확인할 수 있고, 직접 데이터를 화면에 드래그해서 디자인에 반영할 수 있네요.2009-03-19 11:26:50
• 예를 들면, 스노우보드의 이미지 객체에 URL 정보를 드래그하면 이미지가 바뀌고, 텍스트 박스에 가격 정보를 드래그하면 숫자가 바뀌는 식. 쉽죠?2009-03-19 11:28:14
• 다음은, 코드 없이 인터랙티브 디자인을 하는 것에 대해서 설명합니다. 비헤이비어라는 기능이 추가되었어요. 아주 오래 전 플래시MX(맞나요?)에서 같은 이름의 기능이 있었는데 지금은 별로 쓰는 사람이 없죠.2009-03-19 11:29:37
• 블렌드에서는 플래시의 비헤이비어 같은 기능을 원래부터 트리거라는 기능으로 제공을 하고 있었구요. 지금 소개하려는 기능은 어떻게 다른지 한번 살펴보죠.2009-03-19 11:30:13
• 트리거에 마우스제스처라는 것이 추가되었네요! wow. 이게 뭐냐면 마우스를 특정 모양으로 드래그하면 발생하는 이벤트를 쉽게 걸 수 있는 거에요. 제스쳐도 블렌드3에서 직접 그려넣을 수 있어요.2009-03-19 11:32:15
• 블렌드3의 비헤이비어는 미리 만들어진 코드 묶음이라도 이해가 되네요. 예를 들어 설명하는 것이 물리엔진 비헤이비어랑 카운터 비헤이비어에요. 그냥 화면에 드래그 하면 바로 적용이 되요.2009-03-19 11:33:35
• 머저 카운터 비헤이비어는 특정 상황이 됐을때(트리거로 설정) 화면의 텍스트 박스에 숫자를 1증가시키거나 감소시키는 동작을 해요. 물론 코드 없이요.2009-03-19 11:34:58
• 화면에 몇개의 공과 요소들이 있는데, 여기에 물리엔진 비헤이비어를 적용하고, 카운터 비헤이비어에 충돌 시에 1증가 하는 옵션을 걸어놓고 실행하니까 간단한 물리엔진 게임이 되네요. wow 역시 코드는 한줄도 없었어요.2009-03-19 11:36:05
• 마지막 정리입니다. 익스프레션 블렌드3는 정말 많은 기능이 추가되었고, 디자인-개발자 워크플로우 개선(더 많이), 3가지 중요한 기능(스케치플로우, 데이터 디자인, 비헤이비어)을 통해 강력한 디자인-프로덕션 툴이 되었다는…2009-03-19 11:37:47
• Q&A 시간이에요. Q) 블렌드에서 하는 걸, 비주얼스튜디오에서도 할 수 있는지? A) 아니요. Q) 마우스제스쳐의 방향을 설정할 수 있는지? A) 마우스제스처는 MIX09를 위해서 개발자가 급조한거라 향후에 좀더 강화해서 공개하겠다.2009-03-19 11:40:30
• 저도 지금 블렌드3 설치중이에요. 아시는 것처럼 블렌드로 WPF와 실버라이트 모두 작업할 수 있기 때문에 각각의 프로젝트에서 어떤 기능이 실제로 사용가능한지 확인해 봐야 할 것 같네요.2009-03-19 11:41:37
• Q) 스케치플로우를 실제 프로젝트 결과물에 바로 적용할 수 있는지? A) 스케치플로우1은 아직 안 되지만 다음 버전에는 가능하도록 할 것 같다.2009-03-19 11:44:34
• 아직 실제로 써보지 못해서 어떤 느낌인지 어떤 장단점이 있는지 잘 파악은 안되네요. (설치중…)2009-03-19 11:45:40
• Q) 팀작업에서 스케치플로우를 잘 활용할 수 있는지 A) 네. 스케치플로우 플레이어(블렌드가 없는 사용자도 쓸 수 있는 별도 애플리케이션 형태로 나오는 듯 )와 피드백을 통해서…2009-03-19 11:46:44
• 점심식사하러 왔어요~ 점심은 또띠아(맞나?).2009-03-19 12:25:59

이 글은 리거니님의 2009년 3월 19일의 미투데이 내용입니다.