Windows Mobile Phone 7 - UI 디자인 (WP7의 UI 디자인 개념)

윈도우즈 모바일 7의 장점 중의 하나가 아주 강력한 UI를 지원한다는 것이다. 화면 전환 애니메이션, 각 컨트롤에 대한 커스터마이징이 매우 쉽다.

앞의 글에서 설명했듯이 일반적인 화면 레이아웃이나 배치등은 Visual Studio에서 XAML을 이용하여 디자인 한다.

여기에 컨트롤에 상태에 따라서 추가로 디자인이나 애니메이션 효과를 지정할 수 있는데, 이는 개발툴킷에 들어있는 "Microsoft Expression Blend 4 Windows Phone"이라는 도구를 사용한다. 마치 RIA (Rich Internet Application)개발도구와 비슷하다.

애니메이션도 직접 테스트해볼 수 있기 때문에, 무슨 애니메이션 저작툴과 같은 느낌도 좀 들기는 하는데, 애니메이션 효과는 나중에 설명할것이기 때문에 패스...

일단 윈폰7의 디자인 개념을 설명해보면 다음 그림과 같다.

원래 레이아웃과 배치등을 했으면 거기에 디자인을 덧 붙이는 것이다.
가장 쉽게 설명할 수 있는 말은 HTML에다가 CSS를 붙이는 개념을 생각하면 된다.
Visual Studio에서 표준 컴포넌트로 배치등을 하고, Expression Blend 로 CSS와 같이 컴포넌트에 디자인을 입히는 것이다.

사용한 예제는 "ClickMe" 버튼이 Focus out되어 있으면 검정색으로 표시되다가, Focus In이 되면 글라데이션으로 칠해지고, 라운드 박스로 테두리가 그려지는 예제이다.

원래 왼쪽화면과 같은 UI에 디자인을 오른쪽과 같이 디자인을 입히는 것이다.
실제 화면 디자인 파일인 *.xaml을 보면

위의 코드는 디자인이 안적용된 코드이고 아래 코드는 디자인이 적용된 코드이다.
아래 코드를 보면 버튼 컨트롤 안에 Template="{StaticResource FancyButton}"이라고 적용된 부분이 있다. 버튼 컨트롤의 스타일을 지정하는 것이다. 그 다음에 같은 *.xaml안에 마치 HTML의 CSS를 정의하듯이 버튼의 디자인 스타일을 지정한다. (그림 아래 <ControlTemplate ... 부분 >

실제 동작되는 모습을 보면 다음과 같다.

특히나 스마트폰에서는 사용자 경험이 매우 중요하다. 버튼 모양, 애니메이션, 반응성 등등. UI 컨트롤등을 변경하고 상태에 따라서 (클릭전,후, 포커스가 갔을때와 빠졌을때) 디자인을 반영하고 하는 것은 전통적인 UI 프로그래밍 방식에서는 매우 귀찮은 일이다. 안드로이드나 아이폰에서는 이런것은 해보지는 않았는데, (되기는 하는데, 윈폰7보다 귀찮을듯, 일일이 코딩이 있을듯) 윈폰7은 전용 디자인 스튜디오를 통해서 적용할 수 있다는 것이 상당히 마음에 들고... 
 디자인 적용 구조가 HTML의 CSS 개념과 비슷해서, 전체적으로 개발 프레임웍 자체가 앞 글에서도 언급했듯이 HTML + MVC 웹프로그래밍과 유사해서 (걍 JSF 프로그래밍 하는 느낌) 기존 개발자들이 쉽게 접근할 수 있을듯 싶다.

참고:
예제는 트레이닝 키트에서 제공되는 http://www.microsoft.com/downloads/details.aspx?familyid=CA23285F-BAB8-47FA-B364-11553E076A9A&displaylang=en )
 " Exercise 2: Using Expression Blend to Design the UX of your Windows Phone "
를 사용하였다.