블로그 이미지
평범하게 살고 싶은 월급쟁이 기술적인 토론 환영합니다.같이 이야기 하고 싶으시면 부담 말고 연락주세요:이메일-bwcho75골뱅이지메일 닷컴. 조대협


Archive»


 
 

요즘 스마트폰은 기본 요소가 GPS 기반의 위치 정보를 제공함으로써, LBS (Location Based Service)를 제공하게 하는건데, 당근 윈폰7도 API를 제공한다. 그런데 약간 특이한데, 일단 한번 살펴보자


GPS뿐만 아니라, cellphone과 radio를 지원

GeoCoordinateWatcher watcher = new GeoCoordinateWatcher(GeoPositionAccuracy.Low);

위치 정보를 가지고 오는 Class는 위와 같다. GeoGoodinateWatcher를 사용하는데, 재미있는것중 하나가 안에 생성자에 들어가는 GeoPostionAccuracy.Low와 High라는 값이다.
윈폰7의 기기 요건은 GPS 필수 장착과 라디오 필수 장착 요건이 있다.
GPS를 이용한 위치 추적은 정확도는 높으나 기본적으로 배터리 소모가 높다. 반대로 전화 기지국을 통한 위치 추적이나, 라디오를 이용한(이건 원리를 아직 잘 모르겠는데.) 위치 추적은 정확도는 낮지만 전력 소모량이 낮다.
윈폰7에서는 이걸 용도에 맞게 선택해준다는 말씀, Low로 설정하면 라디오나 기지국 기반의 위치 추적을, High는 GPS기반의 위치 추적을 이용한다.

이동시에 위치 변화 감지 방법
윈도우 플랫폼 답게 현재 위치가 변하는 것에 대해서는 이벤트를 발생 시켜서 이벤트 핸들러에서 처리하게 한다. 이때, 위치가 변하는 기준(즉 원래 위치에서 얼마나 움직였을때 위치가 변화한것으로 판단하냐)를 MovementThreadHold로 설정할 수 있다.

위의 예제는 20m로 설정한 예이다.
실제 개발자 가이드에서도 보면 MovementThreshold를 20m 이상으로 설정하게 되어 있다. GPS 자체가 노이즈에 민감하게 반응하고, 더군다나 외장 GPS 안테나를 가지고 있지 않기 때문에, 20m 가 적정값이라는 거다.. (3~4m 내외로 정확하면 좋겠다는 아쉬움이)
 

위치가 바뀌었을때, 이벤트를 받아서 처리하는 함수는 위와 같이 PostionChanged에 EventHandler를 지정해주면 된다. StatusChanged 이벤트는 GPS의 상태가 바뀌었을때, 예를 들어 수신 불능 상태, 수신 가능 상태, 준비중 등 일때 사용할 수 있다.

아마다 MovementThreshold의 값은 하드웨어 제조사의 GPS 감도에 따라서 차이가 있을 수 있을것 같고, 사실 흥미로운 것은 GPS가 불가능한 지역이나 날씨에서도 기지국이나 특히 라디오를 이용해서 위치 정보를 추적할 수 있다는 것이다.





앞에서 UI에 디자인까지 입혀봤고, 이번에는 윈폰7의 강력한 기능중 하나인 애니메이션 효과를 줘봅니다. 보시면 아시겠지만 진짜 간단합니다.
앞의 예제가 텍스트 박스에 글자를 넣고 클릭하면 위의 텍스트가 바뀌는 시나리오 였는데, 이번에는 클릭하면 위의 글자가 바뀌면서 뺑글 돌아가는 형태로 바꿔봅니다.

역시 디자인을 변경하는 것이기 때문에, Expression Blend 4에서 작업을 합니다.
모드를 디자인 모드에서 애니메이션 모드로 바꾸면 Objects and Timeline에 각 객체별 타임라인이 나옵니다. (마치 동영상 편집기 처럼요)

이제 애니메이션 효과를 줘봅니다. 배너 글자 컨트롤인 BannerTextBlock을 선택한후에, 레코딩 모드로 전환하고, TimeFrame을 1초로 선택한후에, x축을 -1로 세팅합니다. 다음 2초를 선택한후 x축을 다시 0으로 복구합니다.
즉 0초에는 제대로 표현하다가 1초에는 x축을 180도 회전 시키고, 2초에는 다시 0으로 세팅합니다. 이렇게 되면 0~1초 사이에 180도 돌고, 그다음 1~2초 사이에 다시 180도가 돌아서 2초동안 텍스트를 360도 돌리게 됩니다.


이렇게 지정한 애니메이션은 바로 개발툴에서 테스트 해볼 수 있습니다. 아래 처럼요.



자아 이렇게 개발이 끝난 애플리케이션을 그럼 테스트 해봅시다.



이렇게, 윈폰7 개발환경에서는 다이나믹한 애니메이션 효과를 주는게 무지 쉽습니다. 아주 간단한 예만 했지만, 애니메이션 속도, 화면 전환할때 마치 페이지 넘기는 것과 같은 효과를 이렇게 클릭 몇번만으로 자유롭게 줄 수 있습니다.

앞에 디자인 UI적용 부분과, 이번에 애니메이션 처리 부분을 봤는데, 이정도면 상당히 높은 합격점을 주고 싶습니다. 스마트폰이면 스마트폰에 알맞는 멋진 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 "
를 사용하였다.