외국에 나와서 외국노동자 생활로 있다보니 CV를 만들어야 하는 상황이 생겼습니다.
기존의 CV보다 좀 더 튄다면 남들보다 좀 더 좋은 일을 구하지 않을까요?


기존의 CV
: 외국은 개인적인 정보를 적는 것은 거의 드문일이라고 합니다. 주로 사진을 첨부하는 경우가 많은데, 브라질, 뉴질랜드와 같은 나라는 사진을 첨부하는 것을 생각보다 원치 않는 경우가 있다고 합니다. 아무래도 외모에서 오는 차별적인 면을 제외하고자 하는 것 같습니다. 최대 3장까지, 그 이상 넘어가면 보기 귀찮아질 수 있으니 최대한 명확하고 중요한 정보를 넣는 것이 중요한 것 같네요. 
 

 


아이디어 넘치는 CV

자신이 어떤 직종이냐에 따라 CV는 달라질 것 같습니다. 디자이너와 같은 직종의 경우는 아무래도 남들보다 어필을 해야하는 경우가 있습니다. 밑의 CV는 자신의 독창적인 느낌을 살려 만든 것을 가져와 보았습니다.

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

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


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로 감싼다. 라고 필자는 생각하고 구성을 만들었습니다.



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


감사합니다!

거침없이 배우는 익스프레션 블렌드

출판사 지앤선이 말하는 익스프레션 블렌드: http://jinson.tistory.com/107
YouTube에서 동영상 보기: http://youtu.be/N09ralY-k7s

★ 책의 예제를 따라하기 위해 반드시 필요한 파일 ★
http://www.scitech.co.kr/ 에서 다운 받으시길 바랍니다.

책 목차보기

익스프레션 블렌드를 위한 책 홍보 동영상을 소개합니다.

아무래도 제가 디자이너이기 때문에 자신의 책에 대한 표지 디자인 및 여러가지를 많은 아이디어가 떠올랐습니다.
그래서 책 표지 및 소스를 직접 만들어 볼 겸 그 과정을 광고로 제작해 보았습니다.
재밌게 봐주시길 바랍니다.
(중간중간 작년의 제 모습이 보이는데 많이 초췌하군요;)

그림 채색 작업과 동영상 촬영 및 프로필 촬영은 결론적으로 12시간이 걸렸네요.
저녁 10시부터 시작해서 그 다음날 아침 10시쯤에 끝난 듯 합니다.
마지막으로 기념사진 겸 동영상과 사진 촬영을 도와준 나민규씨와 한컷. (피자로 모든 걸 딜 해버려서 미안했다능 ㄷㄷ)


책 구매 사이트 :
Yes24 책 구매  11번가 책 구매 인터파크 책 구매 

거침없이 배우는 익스프레션 블렌드

오랫동안 준비했던 책이 드디어 곧 출간되는 소식을 들려드리고자 이렇게 포스트를 올립니다.
아직 정식출간은 되지 않았지만 예판이 시작되었으며 정식출간은 5/23일로 잡혀있습니다 :-D

작년부터 블렌드 강좌가 뜸했었던 이유가 이것 때문이라고 해도 변명을(;;;)
이제 책 나왔으니 강좌 또 바지런히 써볼게요 ㅎ
제 첫 출판이기 때문에 부족한 부분이 많지만, 많은 이해 부탁드립니다.

다시 한번 이 책에 도움주신 분들 감사드립니다. (감사글은 책 안에 :D)




책 구매 사이트 :

Yes24 책 구매  11번가 책 구매 인터파크 책 구매 

 
저번주 주말에 데브멘토에서 열린 N-Screen 세미나에서 발표한 WP7 디자인 가이드를 올립니다.
이 날 날씨가 굉장히 안 좋았는데 한 300명 가량 참석해주셔서 WP7에 대한 관심이 많아진 것을 느낄 수 있었습니다.

그리고 이 날 레어급(?)의 깜짝 발언을 해서 -_-;; 이제는 빼도 박도 못하게 되었습니다

 

마이크로소프트 피드에서 디자인이나 스케치, 목업 작업에 필요한 리소스 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

요즘에 보내기트위터에 보내기페이스북에 보내기미투데이에 보내기

믹스11(MIX11)이 저번주에 미국에서 열렸었죠.
그 때 소개된 최근 윈도우 폰 기술 및 디자인 가이드 라인을 선보이는 자리가 되겠습니다.
윈도우 폰 7의 인터페이스 및 가이드 라인과 Expression Blend라는 프로그램을 이용해 앱 제작하는 간단한 예시를
보여드리고자 합니다. 

클릭하시면 세미나 신청이 가능합니다.

저는 개발자가 아니지만 디자이너로써 윈도우 폰 7에 대한 간단한 팁과
블렌드로 어떻게 작업하는지에 대해서 간단히 소개할 예정입니다.