안녕하세요. 이동규(LiveDK) 입니다.

모바일 장치의 인터랙션에는 다양한 손가락 제스쳐를 이용합니다. 예를 들어 탭하기, 꼬집기(줌아웃), 벌리기 등등이 있습니다. 이러한 제스쳐들을 통해 다양한 경험을 사용자에게 전해줍니다. Windows Phone에서 제공하는 다양한 컨트롤들은 위에서 나열한 제스쳐들을 충분히 활용하기에 적당합니다.

Windows Phone SDK에서는 다양한 컨트롤들을 제공해주고 있습니다. 이러한 컨트롤들을 어플리케이션에서 추가하여 사용하게 되면 개발시간을 단축해주고 사용자에게 혼돈되지 않는 동일한 경험을 주게 됩니다. 하지만 제공되는 컨트롤들을 아무 생각 없이 배치한다면 문제가 생길 수 있습니다.

문제가 생길 수 있는 컨트롤 사용예

그림1. Panorama와 Map, Slider 컨트롤

그림1 과 같이 Panorama 위에 Map Control을 배치할경우, 두개의 컨트롤 모두 swipe(책장을 넘기는 식의)제스쳐를 사용합니다. 이런식으로 배치 된다면 맵의 위치를 옮기려다가 맵컨트롤 밖으로 터치가 된다면 페이지가 넘어가버리는 상황이 될 것입니다. 또한 Slider 컨트롤의 경우도 마찬가지 입니다. 슬라이드바를 옮기려고 손가락을 문지르게되면 Panorama가 같이 움직이게 됩니다. 이는 사용자에게 큰 불편함을 안겨주겠지요!

필요 없는 컨트롤 사용예

그림2. 필요 없는 Back, Close 버튼

그림2 에서 처럼 Windows Phone 개발에 있어서 Back 버튼 및 Close 버튼은 굳이 필요 하지 않습니다. Windows Phone - #1 Hardware Chassis 강좌에서 설명 하였듯이 하드웨어버튼이 필수 적으로 들어가야 하기때문에 뒤로가기 혹은 Application을 이탈하는것은 따로 버튼이 존재 하지 않아도 가능하기 때문입니다.

이번내용은 The Windows Phone Developer Blog의 내용을 해석하고 참고하여 작성하였습니다.

저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by LiveDK

댓글을 달아 주세요

안녕하세요. 이동규(LiveDK) 입니다.

지난 포스팅([Tip] Windows Phone - 로그인 과정에서 사용자 경험 향상)에서 Windows Phone 에서 로그인 과정을 재작할때에 고려해야할 UX(사용자 경험)에 대해서 이야기 해 보았습니다. 이야기 중에서 기존의 문제점을 가장 획기적으로 고칠 수 있었던 방법은 Application Bar를 활용하는 것 이었습니다. 이번 포스팅에서는 실제로 Application Bar(이하 App Bar)를 어떻게 만들고 사용하는지에대한 방법을 이야기해 보겠습니다.

그림1. Application Bar 예제

App Bar는 기존 Windows program에서의 매뉴 또는 툴바로 이해하면 쉽습니다. 하나의 Application에서 공통적으로 사용하는 버튼 혹은 매뉴가 있다면 App Bar를 사용하는것이 좋습니다.

App Bar는 화면의 아래쪽 즉, 3개의 하드웨어버튼쪽에 위치합니다. 그림1 에서와 같이 세로 방향이건 가로 방향이건 버튼쪽에 위치하게 됩니다. 또한 최대 4개의 버튼과 매뉴를 추가 할 수 있습니다. 버튼의 경우 PNG 형식의 아이콘을 사용하게 됩니다. Microsoft에서는 몇가지 가이드 라인을 제시해주고 있습니다.
1. 48 x 48 (pixels)의 사이즈
2. 자체적으로 원형 테두리 삽입(그림1 참고)
3. 아이콘은 투명한 배경을 사용(테마에 따라 배경색이 변경되기 때문)

아이콘을 직접 제작하기란 쉽지 않습니다. 그리하여 Microsoft 에서는 개발툴을 설치하고 SDK를 설치하게되면 아래폴더에서 이미 만들어진 아이콘을 볼 수 있습니다. dark / light 가 존재 하여 테마 배경색에 맞추어 이용하시면 될 것입니다.(그림2 참고)

그림2. 샘플 아이콘 경로 및 이미지

Application Bar 는 Silverlight의 한 부분이 아니기 때문에 사용하기 위해서는 namespace를 추가해야 합니다.

코드-비하인드: using Microsoft.Phone.Shell;
XAML: xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

이번 포스팅에서는 XAML 에서 활용하는 방법으로 설명하겠습니다. 아래 코드1 과 같이

<phone:PhoneApplicationPage.ApplicationBar>

    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

        <shell:ApplicationBarIconButton IconUri="/Images/appbar.add.rest.png" Text="Button 1"/>

        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>

        <shell:ApplicationBar.MenuItems>

            <shell:ApplicationBarMenuItem Text="DK Menu"/>

            <shell:ApplicationBarMenuItem Text="about DK"/>

        </shell:ApplicationBar.MenuItems>

    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar> 

 코드1. XAML에서의 Application Bar 생성 

코드1 에서 보았듯이 중요한 두개의 클래스가 있습니다. 해당하는 작업을 윈한다면 Click 이벤트를 주어 코드-비하인드에서 작업 하면 되겠습니다.

ApplicationBarIconButton 버튼을 생성하고 아이콘 및 Click 이벤트 
ApplicationBarMenuItem 매뉴아이템을 생성하고 Click 이벤트

※ApplicationBarIconButton 에서 챙겨야할 부분이 있습니다. 바로 IconUri 입니다. 프로젝트에 Images 폴더를 만들고 해당하는 PNG 아이콘 파일을 추가하고 코드1 과 같이 작성후 실행하게 되면 화면에는 X 표시만 나오게 됩니다. Application Bar가 스마트하게 이미지들을 찾아주지 못하고 있습니다. 이러한 문제를 해결하기 위해서 아이콘의 Properties 들을 수정 해줘야 합니다. (그림3 참고)

그림3. PNG Icon 설정방법

1. Solution View 에서 추가한 PNG 아이콘을 선택후 Properties창으로 이동
2. Build Action 속성을 Content 로 변경
3. Copy to Output Directory 속성을 Copy always 로 변경

이상으로 Application Bar를 만들기 위한 기본적인 내용과 챙겨야할 부분을 알아 보았습니다. 감사합니다.

참고자료
Programming Windows Phone 7 by Charles Petzold - http://www.charlespetzold.com/phone/
Wrox.Professional.Windows.Phone.7.Application.Development - http://bit.ly/eyot9B
저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by LiveDK

댓글을 달아 주세요

  1. Chicago Blackhawks Jersey 2013.07.11 09:27 신고  댓글주소  수정/삭제  댓글쓰기

    희미한 달빛이 샘물 위에 떠있으면,나는 너를 생각한다.



티스토리 툴바