진희쩜넷 :: Expression Blend for Designers

Orange Icon set (.design file)

진희쩜넷 — Tue, 13 Mar 2012 13:00:44 +0900

It's icons for user who uses Expression Design tool.

Tool : Expression Design
Format type : .design
Download Link :

[예약판매] Windows Phone 7 망고 프로그래밍: 조군, 한군과 시작하는 망고 레시피

진희쩜넷 — Mon, 21 Nov 2011 16:22:52 +0900

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

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

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

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

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

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

11월 12일 출국합니다.

진희쩜넷 — Sat, 05 Nov 2011 02:09:19 +0900

안녕하세요? 생소한 소식들고 블로그에 글을 남깁니다.
다음주 토요일에 출국을 하게 되었습니다. 위치는

남반구에 위치한 뉴질랜드의 북섬 오클랜드라는 도시이고, 기간은 아직 미정입니다.
(게다가 그곳은 여름이 되어가는 중!!!)

돈 벌기 시작했을즈음 이런 다짐을 한 적이 있습니다.
"몇년 후 여행을 할 수 있을만한 돈이 모이면 망설이지 말고 세계여행을 갈 것이다"

그리고 일을 하면서 영어가 중요한 것임을 느껴서 영어를 어느정도 하고 싶다 라는 마음까지 갖게 되었습니다.
(지구인들이 쓰는 언어중에 거의 공통어로 쓰이니 뭐 안 배울수가 없네요-_-)
그래서
어학연수 겸 여행 겸 가끔 일도 하는 계획이 되었습니다. (뭐 하나라도 제대로 해야할텐데요 긁적a)

여태까지 계속 인터넷으로만 찾아보고 인식을 못하고 있다가 오늘에서야 진짜 가는 건가...(일주일 남기고) 싶어서
이제서야 글로 작성합니다.

아직 통장 정리 하나도 안하고 뭐 서류 안하고 빠듯할 듯 합니다, 안 본 친구도 오랫만에 만나기도 해야하고,
가까운 분들만 잠깐 만나뵙고 가려 합니다. 뭐 1년정도야 요새는 많이 가니까요
일주일 동안 가기 전까지 빠듯하게 준비해야겠습니다.

가게 되면 포스팅은 여행 포스팅 주로 할 듯 합니다.
얼마전에도 뉴질랜드 가기 전 지인과 함께 제주도를 다녀와서 제주도에 관한 여행 포스트도 하겠습니다.
(이러다가 블렌드 블로그가 아닌 여행 블로그가 될지도;;)

간간히 글 올리도록 하겠습니다.

다녀올게요.

일주일 전

[font] Let's download "제주전용서체"

진희쩜넷 — Thu, 06 Oct 2011 15:01:30 +0900

무료폰트 중에 제주서체가 좋아서 요새는 윤체보다 많이 쓰게 되네요~
모르실 분이 계실가봐 링크 걸어 둡니다.
요새는 포털사이트가 좋은 무료폰트를 제공해주고 있어서 많은 도움이 되네요~

Download Link :
http://www.jeju.go.kr/contents/index.php?mid=01021201

마이크로소프트 무료 교육 안내 : Expression Blend를 이용한 XAML 디자인

진희쩜넷 — Wed, 14 Sep 2011 22:57:50 +0900

Expression Blend 프로그램에 대해 알고 싶은데 수업이 없어서 여태 배우시지 못하셨더라면
10월에 있을 강의를 들으셔도 좋을 듯 합니다.
Expression Blend를 이용한 XAML 디자인 클릭 후 신청하시면 됩니다.

링크 : https://partner.microsoft.com/korea/40148430

[Window Phone 7] 윈도우 폰 앱 제작 시리즈 - 03. 앱(App) 컨트롤 디자인하기2

진희쩜넷 — Wed, 07 Sep 2011 22:52:47 +0900

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

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

* 벡터형식인 어도비 일러스트레이션에서도 약간의 변환만 거치다면 바로 가져올 수도 있습니다.
Expression Blend는 어도비 패키지처럼 자기의 제품군이 있는데, 그 중 Expression Design이라는 프로그램은 일러스트레이터와 아주 흡사한 역할을 합니다. 저는 이 프로그램에서 Ai파일을 불러와서 쓰기도 합니다.

아래의 그림이 바로 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 큰 타이틀을 템플릿 변경을 하도록 하겠습니다.

[Window Phone 7] 윈도우 폰 앱 제작 시리즈 - 03. 앱(App) 컨트롤 디자인하기1

진희쩜넷 — Thu, 11 Aug 2011 16:06:10 +0900

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

1. 윈도우 폰 앱을 만들기 위한 첫 단계, 화면 구성 하기
2. 블렌드에서 윈도우 폰 레이아웃 잡기
3. 화면 디자인 및 컨트롤 디자인 하기
4. (필요 시) 애니메이션 제작하기
5. 윈도우 폰의 시작 타일 및 페이지 전환 etc...

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

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 값을 다음과 같이 바꾸어줍니다.
이렇게 해서 간단하게 버튼에 효과를 주었습니다. 버튼 밖으로 빠져 나갑니다.

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

[Window Phone 7] 윈도우 폰 앱 제작 시리즈 - 02. 앱(App) 레이아웃 만들기

진희쩜넷 — Mon, 25 Jul 2011 10:00:00 +0900

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

1. 윈도우 폰 앱을 만들기 위한 첫 단계, 화면 구성 하기
2. 블렌드에서 윈도우 폰 레이아웃 잡기
3. 화면 디자인 및 컨트롤 디자인 하기
4. (필요 시) 애니메이션 제작하기
5. 윈도우 폰의 시작 타일 및 페이지 전환 etc...

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

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

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

[Window Phone 7] 윈도우 폰 앱 제작 시리즈 - 01. UI 기획하기

진희쩜넷 — Sat, 16 Jul 2011 01:06:05 +0900

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

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

1. 윈도우 폰 앱을 만들기 위한 첫 단계, 화면 구성 하기
2. 블렌드에서 윈도우 폰 레이아웃 잡기
3. 화면 디자인 및 컨트롤 디자인 하기
4. (필요 시) 애니메이션 제작하기
5. 윈도우 폰의 시작 타일 및 페이지 전환 etc...

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

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

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

감사합니다!

[거침없이 배우는 익스프레션 블렌드] 책을 저번달에 받아보신 독자분들에게 공지 드립니다.

진희쩜넷 — Thu, 02 Jun 2011 16:57:09 +0900

안녕하세요? 정진희입니다.
다름이 아니오라, 책의 교환에 대하여 이렇게 글을 씁니다.

책에 대한 미리 구매를 22일까지 진행이 되었었습니다.
그래서 책을 미리 예약해 주신 독자분들 중, 5월 23일이나 그 주에 받아보신 분들이 있으실텐데요.

책의 해당 도서의 13페이지부터 20페이지까지 책 내용이 밀렸을 수도 있음을 공지 드립니다.
혹시나 미리 받으신 분들 중에 이러한 오류가 있는 것을 발견하신 분들은 해당 구매처에게 문의를 하시면 교환이 가능하단 점을
알려드립니다.

자세한 상황 설명은