안녕하세요? 새로운 소식 알려드리려 포스트 합니다. 주위에 있으신 윈도우폰 개발자 분들에게 좋은 소식이네요.
Windows Phone 7 망고 프로그래밍을 위한 책이 곧 출시될 예정이랍니다.

[조군, 한군과 시작하는 망고 레시피] 라고 서브로 이름이 있네요.
실버라이트 코리아 라는 네이버 카페에서 수년간 실버라이트 개발 서적 3와 4를 낸 조성택 저자와
실무에서 윈도우폰 개발을 해온 실버라이트 카페 시삽 한윤진 저자가 만나서 개발 서적을 내게 되었네요.

예약 판매니, 예약 하시면 서둘러 받아보실 수 있을 듯 합니다.

그리고 네이버 카페 [실버라이트 코리아]에서 공동구매로 더 싸게 구매할 수 있을 듯 하니(예정)
다음 링크를 통해 소식을 접하시길 바랍니다.




Yes24에서 바로 구매
http://www.yes24.com/24/goods/5968458

실버라이트 코리아 카페 바로가기
http://cafe.naver.com/mssilverlight

텀이 너무 길었습니다, 저번 편에 이어서 진행하겠습니다.


1. 이번에는 버튼 안에 들어갈 아이콘을 가져와 보겠습니다. 맨 처음 포토샵으로 제작한 아이콘을 Png파일로 불러와서
사용할 수도 있지만 블렌드는 벡터형식이기 때문에 일러스트레이터에서 그린 아이콘을 가져올 수도 있습니다.
저는 후자의 방법으로 아이콘을 불러오겠습니다.

아래의 그림이 바로 Expression Design 프로그램을 열었을 때 보이는 화면입니다.
저는 여기서 벡터로 그린 것을 [Ctrl+C]로 복사해서 블렌드로 가져오겠습니다.
이미지가 편하신 분은 이미지 사이즈를 통일 시킨 상태로 Png형식의 파일로 가져와서 불러오도록 합니다.

2. [Ctrl+C][Ctrl+V]로 붙여넣기 해서 블렌드에 가져온 모습입니다.
디자인 된 버튼에는 아이콘 하단의 버튼 이름이 새겨져 있습니다. 툴에서 텍스트 블록을 더블 클릭하여 추가합니다.

3. 아이콘과 텍스트 블록을 하나의 그룹으로 묶기 위해 두 레이어를 선택 후 우 클릭 > Group Info > StackPanel을 선택합니다.
StackPanel이 세로 정렬로 되어있어야 합니다. Orientation에서 Vertical로 설정하시면 됩니다.

이렇게 묶는 이유는 버튼 안에 컨텐츠를 넣으려면 하나의 레이어만 들어갈 자리밖에 없기 때문에 그룹으로 하나의 레이어로 만들어주면 n개를 버튼 안에 넣을 수 있기 때문입니다.

4. 이렇게 묶은 스택 패널을 선택 후 버튼으로 드래그 하면 다음과 같이 툴 팁이 뜹니다.
"드래그 하는 중에 이 버튼 안에 스택 패널을 넣고 싶으면 Alt 키를 눌러라" 입니다.
Alt를 누른 상태로 버튼 안에 그림과 같이 넣도록 합니다.

5. 버튼 안에 넣게 되면 오브젝트 및 타임라인 패널이 다음과 같은 트리구조가 됩니다.

6. 마찬가지로 다른 버튼들도 이렇게 추가해 나가도록 합니다.

하단의 버튼들도 이와 같은 방식으로 진행할 수 있겠습니다. 완성된 화면입니다.

다음 시간에는 App-Title 큰 타이틀을 템플릿 변경을 하도록 하겠습니다.




 

안녕하세요? 세번째 시간입니다.
저번 시간에 전체적인 화면 구성을 그려보았습니다. 이번 시간에는 다음 강좌를 진행하겠습니다.

이번에는 컨텐트 영역에 들어가는 버튼들을 윈도우 폰에서 제공하는 디자인 외에 디자이너가 직접 나만의 버튼을 만들어 보겠습니다.
저번 시간에 이어 프로젝트를 진행하겠습니다.


1. 먼저 컨텐츠 전체에 적용 될 버튼을 디자인 해 보겠습니다. 
블렌드에서 만들 수 있는 정도의 버튼 디자인이라면 포토샵에서 이미지를 가져오는 것 보다 직접 그려주는 것이 해상도나 활용면에 있어서 좋습니다. 그래서 저는 블렌드에서 버튼 디자인을 해보도록 하겠습니다. 밑의 이미지가 오늘 우리가 해야할 버튼 디자인입니다.

2. 툴에서 사각형을 선택하고 옆에 빈 공간에 그리도록 합니다. 속성에서 RadiusX와 Y값을 5 정도 설정합니다.
그리고 Fill을 그라데이션으로 지정합니다. 그라데이션의 포인트를 움직여 그라데이션의 위치를 옮겨주도록 합니다.

3. 글씨와 형태는 나중에 넣기로 하고 사각형을 선택 > 도구(Tools) > 컨트롤로 만들기 (Make a Control)를 선택합니다.
선택하면 팝업이 하나 뜨는데, 형식 중에서 버튼을 선택 후, 이름을 임의로 [Btn1] 작성하고 확인 버튼을 클릭합니다.

4. 컨트롤을 제작하자 텍스트가 자동으로 생성됩니다.
그리고 상태(States) 패널에는 버튼에 필요한 각 상태를 설정할 수 있도록 항목이 나열되어 있습니다.

5 일단 버튼에서 빠져나오기 위해 오브젝트 및 타임라인에 화살표를 선택하여 나옵니다. 방금 만든 버튼을 화면에서 삭제하도록 합니다.

6. 그리드에 나열되어 있는 버튼들을 하나씩 클릭하여 다음과 같이 설정합니다.
버튼 선택 후 우 클릭 > 템플릿 편집 > 리소스 >Btn1 을 선택하면 방금 지운 버튼이 리소스로 남아서 적용된 것을 볼 수 있습니다.

7. 버튼 적용을 다 한 모습은 다음과 같습니다.
각 버튼 간격을 주기 위해 버튼 9개를 모두 선택 후 마진 값을 7씩 주도록 합니다.

8. 터치했을 때 버튼 효과를 주기 위해 버튼 우 클릭 > Edit Template > Edit Current를 선택하여 버튼 템플릿을 수정하기 위해 컨트롤 안으로 들어갑니다.

9. State(상태)패널에서 버튼을 위한 효과들이 있습니다. 모바일에서는 Mouseover를 할 수 없고 단지 터치만 하기때문에
MouseOver효과는 주지 말고 Pressed 효과만 주도록 하겠습니다. Pressed 상태를 선택합니다.

10. Pressed 상태를 클릭하면 녹화상태가 됩니다. 오브젝트 및 타임라인 패널에서 버튼을 구성하고 있는 흰 사각형 레이어를 선택 후
속성(Properties) 패널에서 Fill 값을 다음과 같이 바꾸어줍니다.
이렇게 해서 간단하게 버튼에 효과를 주었습니다. 버튼 밖으로 빠져 나갑니다.

버튼의 효과까지 아주 간단한 단계의 효과만 주었습니다.
길어서 다음 강좌에서 이어하겠습니다~




 

 

안녕하세요? 두번째 시간입니다.
저번 강좌에서는 어떻게 기획하고 구성해야 하는지 알아봤는데요.
이번 시간에는 다음 강좌를 진행하겠습니다.

저번주에 블렌드 프로그램 여는 것까지 작업을 하였으니 바로 블렌드 작업을 하겠습니다.


1. 저번 시간에 Window phone Application 기본 화면으로 프로젝트를 생성하였습니다.
위의 두개의 타이틀을 속성(Properties) 패널에서 수정해보겠습니다. 오브젝트 및 타임라인 패널(Objects and Timeline)에서
해당 레이어를 클릭합니다. 그리고 우측에서 Title 속성을 수정합니다.

2. 이번에는 애플리케이션의 타이틀을 수정합니다. 위와 같이 해당 레이어 클릭 후 수정합니다.

3. 배경색을 수정해보겠습니다. [LayoutRoot] 레이어를 클릭 후 Background를 원하는 색으로 설정할 수 있습니다.
필자는 다음과 같은 색으로 지정 후, [Alpha]값을 100%로 설정하였습니다.

4. 또는 뒤의 배경을 이미지로 제작하신 분이 계실텐데요. 프로젝트에서 우 클릭 > 기존 파일 추가를 클릭합니다.
이미지 경로를 따라가서 선택 후 확인을 클릭하면 이미지를 가지고 올 수 있습니다.

5. 가져 온 이미지를 배경으로 지정하기 위해 배경색으로 지정했던 [LayoutRoot] 레이어를 클릭 후,
타일 브러쉬 선택 > 이미지 소스의 콤보박스를 클릭, 가져온 이미지의 네임을 선택합니다.

6. 여기까지는 전체 배경을 설정해 보았습니다. 이제는 컨텐츠 그리드 레이어에서 컨텐츠를 생성해 보도록 하겠습니다.
기획 시에 그리드 Row:3 / Column:3으로 구성하겠다는 머릿속의 기획을 실천할 차례입니다.
[ContentPanel] 그리드는 컨텐트를 넣을 수 있는 공간입니다. 이 그리드를 선택 후, 우측 속성에서 layout의 화살표를 클릭 후
[ColumnDefinition]의 우측 버튼을 클릭합니다.

7. 우측 속성에서 ColumnDefinition과 RowDefinition을 설정합니다. 우측의 박스모양을 클릭하면 팝업이 뜹니다.
팝업에서 [Add another item] 버튼을 세번 눌러 Row와 Column을 생성합니다.
그리드에 대해 좀 더 알고 싶으시다면 다음 링크에서 확인 할 수 있습니다.

링크 : 그리드란? 

8. 위의 작업을 끝내면 다음과 같이 자물쇠가 각각 행과 열에 3개 씩 있는 모습을 볼 수 있습니다. 
좌측 버튼 컨트롤을 클릭하여 그리드 하위에는 각 칸마다 하나씩 넣어주도록 합니다.

9. 버튼을 각 칸에 넣고 난 후 버튼을 전부 선택 후, 좌우 정렬과 마진, 사이즈를 다음과 같이 리셋합니다.

 

10. 다음은 하단에 큰 버튼을 넣기 위해 [RowDefinition]을 다시 클릭 후, Row 행을 한 줄 더 추가합니다.

11. 그리고 버튼 컨트롤을 두 개 추가 합니다. 이 두 객체를 같이 선택 후 우 클릭 > 그룹 > 스택패널(Stack Panel)로 묶어 줍니다.

12. Orientation을 Horizontal로 설정 후, 높이 값을 100, 가운데 정렬로 설정합니다.

13. 어느정도 비슷한 느낌으로 레이아웃의 구성이 그려졌습니다.
버튼이나 아직까지 디자인 한 모양과 비슷하지는 않지만 구성은 거의 일치하게 만들었습니다.

다음 강좌에는 이 컨트롤들을 어떻게 디자인하는지 알아보도록 하겠습니다.

안녕하세요? 정진희입니다. 오랫만에 글을 쓰게 됩니다.
요새 윈도우 폰에 대한 이슈와 궁금증이 많아 이렇게 시리즈로 온라인 강좌를 올려볼까 합니다.
오늘이 첫번째 시간이네요.

앞으로 진행 될 내용은 다음과 같습니다.

오늘은 첫번째 강좌를 올리도록 하겠습니다.





1. 앱을 디자인 하기 전 무엇을 만들지 머릿속에 그린 것을 드로잉이나 기획 툴로 구체적으로 만들도록 합니다.
블렌드에는 "스케치플로우"라는 블렌드 전용 기획 프로그램이 내재되어 있습니다. 이 툴을 사용하셔도 좋을 듯 합니다.
하단의 그림은 스케치플로우에서 작업한 기획의 모습 중 하나입니다.

사용하는 방법은 링크를 걸어두도록 하겠습니다.
링크 : 스케치프로우 제작하기 -1 
(blend Version 3 강좌 입니다, 그러나 사용하는 방법은 거의 흡사합니다)


이번 윈폰 앱 만들기에서 저는 미니홈피 앱과 비슷하게 만들어보겠습니다.




2. 페이지 구성과 플로우를 다 끝내었다면 본격적으로 디자인에 들어가도록 합니다.
대부분 포토샵이나 일러스트로 디자인을 들어갑니다. 필자도 마찬가지로 포토샵 작업을 끝낸 모습입니다.
윈도우 폰 디자인 구상 시에 MS에서 제공한 윈도우 폰 화면 컨셉을 알고 작업하신다면 좀 더 윈도우 폰에 어울리는 앱을 제작하실 수 있습니다.
윈도우 폰에 대한 UI 컨셉은 다음 링크에서 확인할 수 있습니다.

링크 : Window Phone에 대한 UI Concept

 

3. 디자인 작업이 완료가 되었으면 블렌드로 넘어와서 디자인 작업을 이어가도록 하겠습니다.
그 전에 디자인 한 것을 블렌드로 적용 시에 유의해야 할 점은 포토샵에서 이펙트나 필터 적용 등을 할 경우 블렌드에서도 똑같이 적용되지 않을 수 있으니 이미지로 전환해야합니다.

블렌드를 열도록 합니다. 윈도우 폰을 위한 블렌드 프로그램이 미리 설치 되어 있어야 합니다.
설치 방법은 링크를 걸어두도록 하겠습니다.

링크 : Window Phone을 위한 익스프레션 블렌드 설치하기



4. [New Project]에서 [Window Phone Application]을 선택하도록 합니다. 설치가 잘 되어 있다면 이 항목이 보이게 됩니다.
기획 시에 파노라마 프레임, 피벗 프레임을 사용할 경우는 선택항목에서 각각 선택할 수 있습니다.
필자의 앱 디자인은 기본 앱 화면으로 구성하므로 기본 페이지를 만들겠습니다.

5. 첫 화면은 다음과 같습니다. 애플리케이션의 레이아웃을 만들어보도록 하겠습니다. 만들기 전, 먼저 생각해 두어야 할 것이 있는데요. 바로 어떤 형식, 어떤 컨트롤로 구성할 것이냐 입니다.

화면을 기획 시에 버튼이 들어갈 부분, 이미지가 들어가야 할 부분, 어떤 컨트롤을 써야할 지를 먼저 생각하셨으리라 생각합니다.
그리고 화면의 프레임은 어떻게 나뉘는 지 등도 생각해야 할 부분입니다. HTML의 footer나 header, content 들어갈 부분의 영역을 나누는 것 처럼 윈도우 폰 앱 디자인을 할 시에도 어떻게 나눌지를 알고 만든다면 더 쉽게 제작할 수 있습니다.

필자의 앱 디자인을 어떤 형식으로 만들지 단순하게 생각한 화면의 모습입니다.

가운데 메뉴들은 버튼들로 클릭을 하는 기능을 하고 Grid나 Wrap Panel 컨테이너로 버튼들을 묶어주어 정렬을 편하게 한다. 하단의 버튼 두개는 가로 정렬을 할 수 있는 Stack Panel로 감싼다. 라고 필자는 생각하고 구성을 만들었습니다.



이번 강좌는 기획과 화면 구성 틀을 잡는 작업을 해 보았습니다~ 앱의 구성이 너무 쉬웠죠? ^^;;;
이 부분들은 디자이너의 작업인데요!
다음 강좌에서는 실제로 블렌드에서 레이아웃을 잡아보도록 하겠습니다.


감사합니다!

마이크로소프트 피드에서 디자인이나 스케치, 목업 작업에 필요한 리소스 20가지를 제공하고 있습니다.
디자인이나 기획하실 때 많은 도움이 될 것 같습니다 ^^




1 – Windows Phone 7 Wireframe Stencil for Omnigraffle

2 – Windows Phone 7 Wireframe Paper Sketch Template

3 – Visio Windows Phone 7 Wireframe Template

4 – WP7 Wireframe Stencil v1.0

5 – WP7 Vector UX Kit

6 – PSD Design Templates for Windows Phone 7

7 – Windows Phone 7 UI Templates

8 – Windows Phone 7 Paper Prototype Templates

9 – XAML based Windows Phone 7 Design Templates

10 – Windows Phone 7 PSD

11 – HTC Mondrian PSD

12 – Windows Phone 7 Emulator

 

13 – HTC Surround PSD

14 – Windows Phone 7 Panorama, Controls and Keyboards

15 – WP7 Passcode Lock Screen

 

16 – UI Design and Interaction Guide for Windows Phone 7 v2.0

17 – Windows Phone 7 Download from Marketplace Button

18 – Windows Phone 7 Bing Screens

19 – Windows Phone 7 Templates and Controls

 

20 – 25+ Beautiful Minimalist Icon Sets

• 마이피플
• 트위터
• 페이스북
• 더보기

• 미투데이
• 요즘

WP7에 관한 좋은 웹 캐스트 시리즈가 있어 이렇게 공유하고자 올립니다 :-) 제가 알고 있는 몇몇 지인분들이 나오시는데 정말 재미있습니다, 해당 이미지를 클릭하시면 보실 수 있어요.

안녕하세요? 정진희입니다.
오랫만에 찾아뵙게 되었네요
며칠 전 바로! MS의 스티브 발머 사장이 윈폰7을 발표 하게 되었는데요.
국내의 모바일 시장이나 언론에서도 대서특필 할 만큼 많은 관심을 보이고 있습니다.
(어떤분은 제국의 역습이라고 하시는 분도 계시네요 ㅎㅎㅎ)

어쨌거나 오늘 쓸 강좌는 한단계부터 천천히, 개발 환경 만들기 부터 시작하도록 하겠습니다.
(너무 쉽죠?)


0단계)윈폰7을 개발하기 위한 첫번째 자세


1단계) 개발자는 다음 프로그램을 설치하세요
 



2단계) 디자이너는 익스프레션 블랜드를 설치하세요.
현재 정식버전인 Expression Blend 4는 기본적으로 WP7 어플리케이션을 디자인 할 수 있도록 지원하고 있지 않기 때문에 따로 윈도우 폰 디자인을 위한 추가 설치를 해 주어야 합니다. 그리고 필수는 아니지만, 디자이너가 수월한 개발의 협업을 위해서는 비주얼 스튜디오를 설치하여 사용해도 무관합니다.




3단계) 교육 및 마켓플레이스
my Dashboard에 접속하기 위해서는 가입을 해야합니다.
하지만 한국에서는 출시가 되지 않아 국가 설정이 되어있지 않네요 (안습)



4단계) 익스프레션 블랜드 4를 실행하십시오.
베타버전에서 정식버전으로 넘어오니 실행 아이콘이 따로 생기지 않고 기존 정식 버전에 추가된 모습을 볼 수 있습니다. 그리고 추가로 설치해야 할 피벗과 파노라마 컨트롤은 다음 그림과 같이 어플리케이션으로 따로 프로젝트를 생성할 수 있게 제공 되었네요. 





Window Phone 7 기능을 표현 한 광고
 



워밍업으로 아주 간단하게 알아보았습니다. 다음 시간에는 디자인 가이드에 대하여 찾아뵙도록 하겠습니다.