ZZANGMYON BLOG♡

인원이 모두 마감되었습니다... 당일날 교육장에서 뵙겠습니다..^_^

특강 개요 주최 한국 폴리텍 제1대학교(http://www.conso.co.kr) 교육시간 토요일 1주 8시간(09:00~18:00) 교육으로 총 3회 교육을 진행합니다. 11/15, 11/22, 11/29 중에 원하는 날짜를 선택하여 지원하면 됩니다. 모집기간 11/3 ~ 7일 (1회 교육당 선착순 20명씩 모집) 교육대상 고용보험에 가입되어 있는 직장인 실버라이트와 WPF에 관심이 있는 디자이너 디자인 워크플로우를 이해하고 싶은 개발자 접수방법 1. 02-6300-6300으로 전화하여 자리가 있는지 확인 2. 회사직인이 찍힌 교육 동의서와 함께 팩스로 보냄    교육동의서 다운로드, 팩스번호 02-6300-6304 3. 서류 작성시 주의사항  - 회사의 기본사항 명기  - 교육생의 기본사항 명기  - 과정명은 “Multimedia Contents Developer”로 명기  - 훈련희망직종란은 공란  - 직업능력개발사업개산보험료액, 훈련비용지원한도액은 공란  - 기타 기본사항외에 불명확한 사항은 공란으로 두어도 무방함. 교육장소 서울시 구로구 구로3동 188-5 키콕스벤처센터 901호(약도) 문의 02-6300-6300 * 교육용PC와 교육자료가 제공됩니다. 특강 커리큘럼 시간(교시) 내용 1 교시 실버라이트와 WPF 그리고 Expression Studio 2 교시 Expression Design 다루기           1.         Design 툴 구성의 이해와 사용하기 2.         디자인 실습 3 교시 4 교시 Expression Blend 다루기            1.         Blend 툴 구성의 이해와 사용하기            2.         레이아웃 패널과 컨트롤            3.         스타일과 템플릿            4.         스토리보드를 이용한 애니메이션 5 교시 6 교시 7 교시 Expression Blend와 Design의 실습 8 교시 강사소개 Expression MVP 장미연 현재 디지털교과서 WPF 프로젝트에서 플랫폼 개발중이며 Expression 툴을 다루는 인터렉티브 디자이너이다. Microsoft Expression MVP를 수상하였고 HOONS닷넷의 실버라이트 시삽을 맡고 있으며 블로그(http://zzangmyon.com) 운영과 세미나 등의 활동을 하고 있다.

안녕하세요. 짱묜입니다. ^^

"Expression Design 없는 Expression Blend는 단팥없는 붕어빵이다"

오늘은 익스프레션 디자인 툴의 한풀이(?)를 할까 합니다.

저는 처음에 디자인 툴부터 접했었습니다. 사실 블렌드 툴은 플래시와 헷갈릴 것 같기도 하고(플래시도 못합니다만;) 왠지 개발자와 협업한다는데에 알 수 없는 두려움이 있었구요. 디자인 툴은 일러스트랑 비슷한 것이 혼자서 작업하는 데도 무리가 없을 것 같았고..네.....그래요...-_-만만해 보였어요....하하하..;;

사실 나온지 얼마 안된 툴이었기 때문에 아쉬운 부분도 많았습니다. 기존 툴에 대한 경험이 지배하고 있어서인지 반감도 들고 해서 처음 툴을 소개해주신 공도님께 "이 기능은 어딨어요? 이건 왜 안돼요?" 툴툴거리고, 공도님은 -_-땀을 흘리며, 변명아닌 변명을(내가 MS직원도 아닌데 왜..T^T) 하셨던 기억이 나네요.. 그렇게 툴과 정(?)들다 보니 기능 개선에 대한 욕구도 커지고 그래서 또 한 번은 어느 술자리에서 MS 에반젤리스트이신 황xx 과장님께 꼬장을 부리며 왜 디자인 툴은 기능 업데이트가 소홀하냐고 떼를 썼던 기억도 납니다..이 포스팅을 빌어 다시 한번 죄송하다는 말씀을..--;;

디자인 툴 관련해서 포스팅을 시작하고 마무리가 되어갈 때 즈음, 블렌드에도 눈을 돌려 공부하고 쓰게 되었어요. 실버라이트와 WPF가 떠오르면서 디자인과 블렌드 툴에 대한 사람들의 인지도가 올라가고 배우려는 사람들도 많이 늘게 되었고, 저는 디자인+블렌드 를 섞어 강좌를 쓰게 되었지요.

그런데 실버라이트와 WPF가 아무래도 개발자들에게 더 열광적이었어서 그런지, 블렌드의 인기가 급부상하기 시작했습니다. 아무래도 코드 위주로 작업을 하시던 분들에게 모션과 애니매이션이라는 부분은 새로운 세상이었을테니까요. 그러나 개발자분들이 쓰시는 포스팅은 블렌드만을 다루고 있었습니다. 블렌드만으로도 기본적인 디자인은 가능했으니까요.. 그러다보니 저의 강좌나 세미나를 보는 분들중에는 "왜 디자인 툴에서 작업을 해야하느냐?" 는 질문들도 생겨나기 시작했습니다.

디자인 툴은 점점 블렌드의 부수적인 툴로만 인식이 되었고, 하물며 일러스트레이터 파일의 XAML 변환 도구로 쓰이기도 했습니다. 뭐, 일러스트에 XAML로 내보내주는 플러그인을 깔았을 경우에는..디자인 툴도 필요없지요. 디자이너들조차도 안쓰면 개발자들이야 쓸리가 없겠죠. 그러나!! 우리는 디자인 툴을 꼭 써야합니다. 이제부터 그 이유를 말씀드리죠.

1. 블렌드 만으로도 디자인은 가능하지만 오브젝트 관리에 불편함과 표현의 한계가 있다.

이 부분은 개발자들에게 저의 입장을 말씀드립니다. 블렌드로 디자인은 가능합니다. 사각형, 원, 간단한 패스와 같은 경우에는 블렌드만으로도 가능하지만 더 복잡한 패스를 그리기에는 적합하지 않습니다. 그리고 텍스트! 디자이너들은 특정 폰트를 패스로 변환하여 사용하는 경우가 많은데 블렌드에서는 폰트 목록이 나오지 않을 경우가 있습니다. 그리고 오브젝트 관리에 불편함이 있는데요. 여기서 관리란 프로그래밍적이 아닌 디자인 객체들을 그룹화 하고 해제하거나 이동,정렬 하는 경우를 말합니다. 아무래도 기존의 디자인 작업 툴에 익숙한 디자이너들에게는 디자인 툴이 편할 수 밖에 없어요. 그래서 저는 블렌드에서 디자인을 잘 하지 않습니다.

2. 꼭 디자인 툴로 작업을 해야하나요?

이 부분은 디자이너들에게 말씀드립니다. 알다시피 실버라이트와 WPF에서는 디자인 객체들이 XAML 이라는 언어로 표현됩니다. 디자인 툴에서 작업한 객체들은 XAML로 내보낼 수 있지요. 그리고 일러스트레이터의 .AI 파일도 불러와서 XAML로 내보낼 수 있습니다.  저조차도 한 세미나에서 .AI 파일도 좋은 품질로 호환이 된다고 한적이 있었으니..ㅠ_ㅠ 그리고 두 기술의 인기가 올라가서인지, Adobe사의 일러스트레이터 툴에도 XAML로 내보낼 수 있는 플러그인도 생겨났습니다.

그런데 왜 굳이 디자인툴로 그려야하느냐? 아주 당연한 것이겠지만, 다른 핏줄이 같은 핏줄만 하겠습니까? 일러스트 파일을 변환해서 블렌드에서 작업하는 것보다 디자인 툴에서 작업한 파일이 호환이 잘되는 것은 당연한 이치입니다. 저도 실무를 하다보니 다른 디자이너의 작업 파일을 받아서 하는 경우가 많이 있습니다. 그런데 아직 디자인 툴에 능숙하지 못하거나 다룰 줄 모르는 분들이 많이 계시기 때문에 일러스트레이터 파일을 받을때가 많은데요. 그나마 플러그인으로 내보낸 XAML로 받을 경우에는 상태가 낫지만  .AI 파일을 직접 열 경우 복잡한 패스는 다 깨집니다.

패스의 가장자리가 부드럽지 못하고, 그라데이션도 제대로 표현되지 않습니다. 많은 패스가 중첩되어 있을 경우에는 조각조각 나서 올 때도 있어요. 레이어도 제대로 호환이 되지 않습니다. 모양새도 모양새지만 이런 파일을 XAML로 내보낼 경우에는 코드도 불필요하게 길어지고 지저분해 집니다. 그래서 저는 디자인 툴로 직접 내보낸 XAML 파일이 아닐 경우 (플러그인으로 내보낸 XAML파일이거나 일러스트 파일) 에는 왠만하면 다시 보정을 다 합니다. 모르는 사람이 보기엔 똑같아 보일텐데 다시 작업해야하는 저의 심정은 참 괴롭죠 ㅠ_ㅠ

이런 저런 이유로 저는 디자인은 디자인 툴에서 하는 것을 제일 선호합니다. 새로운 영역을 개척하시려는 많은 디자이너분들도 어차피 어렵지 않으니 디자인 툴을 한번 배워서 해보시길 바랍니다. 두서없는 글이었네요. 디자인 툴에 대한 애착인지 모르겠습니다만 Silverlight, WPF를 구현하기에 디자인 툴도 좀 더 빛을 봤으면 하는 바램입니다.

안녕하세요~ 짱묜입니다.. ㅎㅎ
후후.. 디자인만 해놓고 구현을 못했던 Flip 시계를 완성했어요...유저컨트롤을 만들면서도 이게 개발에 좋게 제대로는 만든건가 계속 의심을 거듭하면서 -_-..모션노가다(?)를 마치고 훈스닷넷의 김시원시삽님이 개발을 도와주셔서..잘 끝났습니다..음..가속도를 좀 고쳐봤는데 전보다 나으려나..-_-;;

Expression Design 으로 그린 건담!!

완전 집중모드로 9시간 걸렸네요.....흑...
그래도 뿌듯하네요.......(왜 그렸는지는 저도 잘..-_-;;)
XAML로 내보내 보니..코드 755줄......패스 541개라는;;

 
피구왕 통키!!

아..어제 맥주마시고 들어와서..재미삼아 그리기 시작했는데.....
오늘까지 5시간 걸렸네요......ㅠㅠ
드래곤볼도 그려보려고 했는데 과연..-_-;; 덜덜 입니다..
Expression Design 으로 작업한거라 XAML 로 내보낼 수 있지만..
데이터양이 장난 아니겠는데요 ㅋㄷㅋㄷ;;

안녕하세요.^^
지난 시간에 이어서 테이프 효과 버튼 만들기를 하도록 하겠습니다.

1.모션 효과를 주기 전에 버튼에 마우스가 오버되었을 경우 어떤 효과가 나도록 할 것인지
먼저 구상을 합니다.
묜이는 일반 상태에서는 테이프의 끝부분이 보였다가, 마우스를 갖다 대면 테이프가 활성화 되는
효과를 주어야겠다고 생각했습니다. 그림으로 보여드릴께요^^
(투명부분을 보여드리기 위해 검은 배경을 임시로 깔았습니다)



2.자 이해되셨나요?
그렇다면 우리가 저번시간에 그린 테이프에서 추가 작업이 이루어져야겠네요.



3. 1번과 2번영역으로 나뉘어 져야합니다. 마우스가 오버될 경우 1번이 활성화 되어야하니까요.
그런데 지난시간에 작업한 테이프 효과 파일에서는 초록색 부분중 1번영역에 해당하는 부분과
분리가 되지 않은 상태이기 때문에 저 부분을 한번 더 나누어주도록 하겠습니다.


일단 테이프의 색깔 있는 부분을 선택하여 하나 더 복사한 후 Divde 메뉴를 사용하면 세 영역으로 분리됩니다.
그럼 투명한 부분으로 쓰일 두개의 영역은 남겨두고 제일 끝 부분을 삭제한 후, 원본에서 그림자로 쓰이는
진한 부분을 하나 더 복사하여 원본과 같이 밑에 대어줍니다.

보기엔 달라진게 없어 보이겠지만 실제로 이루어지는 구성은 이렇게 바뀌는거에요 ^^;
(아.. 점점 설명이 어려워지는것 같네요 ㅠ_ㅠ)

4. 그리하여 아래와 같은 구조로 파일이 구성하게 되었다면



검은색 배경을 지워주고 오브젝트를 모두 선택합니다.

5. XAML로 내보내는 방법은 슬라이스 영역이나 선택된 오브젝트 등 여러가지 방법으로 내보낼 수 있습니다.
그런데 이번에 알게된 사실은 슬라이스로 영역을 맞추거나 선택한 오브젝트만 내보내더라도
내보낼 부분을 꼭 문서의 0,0 좌표 부분에 맞추어주어야 실버라이트용 XAML로 내보내지더라구요.
그렇게 하지 않으면 내보내질 영역과 실제 오브젝트와 영역이 일치하지 않게되는 현상이 있습니다.
PNG나 GIF와 같은 이미지로 내보낼 경우나 WPF Resource Dictionary로 내보낼 경우에는 괜찮은데 말이죠;
이 문제는 제가 더 알아보도록 하겠습니다.


6. File 메뉴의 Export 를 선택하면 다음과 같은 창이 나옵니다. 주의해야할 부분은 내보낼 형식을 꼭
XAML Silverlight Canvas 로 선택해야 한다는거예요. 실버라이트용 xaml로 내보내야 하기 때문입니다.



7. Exprot All 을 눌러주면 본인 지은 이름으로 xaml 파일이 생성됩니다. 저는 bookmark 라고 지어주었어요.
지정한 파일 경로를 확인하면 다음과 같은 xaml 파일이 생성된 것을 확인할 수 있습니다.



이렇게 디자인에서 작업한 파일을 XAML로 내보내는 과정까지 하였습니다.
블렌드에서는 이 xaml 파일을 불러들여 모션을 주는 작업을 할께요..^^

설명을 최대한 쉽게 하고 싶었는데.. 그게 마음대로 잘 안되는것 같습니다. T^T;;
이해가 안가는 부분이 있다면 댓글을 달아주시기 바래요..^^ 설명해드리겠습니다..
그럼 오늘은 이만 마칠께요~!

예전에 수도쿠 게임 디자인 하면서 그렸던 강백호 입니다..
jpg 이미지 엎어놓고 그렸는데... 역시 벡터그래픽이 좋긴 좋군요!! ^^

Expression Design 작업..

실버라이트로 구현은..? 기둘리삼 -_-;

Expression Studio 버전 2가 나왔죠? 물론 Design 에도 추가된 기능들이 있습니다.
어떤것들이 있는지 한번 알아볼까요?



일단 툴에서 낯설은 향기(?)가 느껴지죠. Slice 라는 툴이 추가되었네요. 단축키는 K구요.
툴을 선택하고 마우스를 클릭한 채로 드래그 하여 Slice의 영역을 만들 수 있습니다. 사각형처럼요.
Slice의 영역이 만들어지면 오른쪽에 Edit Slice 메뉴가 나타납니다.

 

오브젝트 위에 놓여진 Slice 영역만 보여지며 돋보기 아이콘의 드랍다운 목록으로 보여지는 비율을 조절할수
있습니다.

Slice name에는 슬라이스의 이름을 씁니다.

그리고 그 밑에 Slice Contents 에는 슬라이스 영역에 두 개 이상의 레이어에 속한 오브젝트가 포함 되어
있을 경우 어느 레이어의 오브젝트를 선택할 것인지 선택할 레이어를 지정합니다.

Format 메뉴로 내보낼 형식을 정할 수 있습니다. WPF나 Silverlight의 XAML 을 비롯하여, JPEG나 GIF 등과
같은 형식들도 있습니다.

Color mode에는 각 포맷에 맞는 색상 모드가 나타납니다.

Matte color 이 메뉴는 png와 같이 배경이 없는 포맷 외에 배경이 있는 파일의 배경색을 나타냅니다.

Width와 Height는 내보는 형식에 맞는 파일의 너비와 높이 사이즈를 지정합니다.



위와 같이 Slice를 생성하면 레이어도 자동으로 함께 생성됩니다.

아마도 이번 버전에서 제일 많이 바뀐 부분이 이  Export 메뉴인 것 같은데요.



미리보기의 왼쪽 아래 보여지는 비율을 설정하는 방식은 위에 설명한 것과 같습니다.

오른쪽을 살펴볼께요.

Items to Exprot

Whole document : 문서의 영역 안에 있는 모든 개체가 보여집니다.
Selected Objects : 선택된 개체가 보여집니다.
Slices : Slice 영역만큼 보여집니다.

Exprot Properties
이 메뉴들은 위에 Edit Slice에서 설명한 것과 같습니다. ^^

자 이로써 내보낼 때 새 파일을 만들어서 내보낼 개체들만 따로 옮길 수고가 덜어졌어요.
선택한 개체들만 XAML로 내보낼 수 있고, 또 Slice로 영역을 만들어 개체 전체가 아닌 필요한 부분만
내보낼 수 있게 되었습니다. 그리고 Slice영역을 XAML외에 JPEG,PNG,GIF와 같은 각종 포맷으로
내보낼 수 있습니다. 아마 2 버전에서 제일 부각되는 기능인것 같아요.

그리고 Arrange 메뉴에 Hide 기능이 추가 되었습니다.
모든 개체들과 Slice 를 숨길수 있어서 작업시 보여질 필요가 없는 개체들을 숨겨두어 작업이 더 편리하게
되었습니다.

이외에도, Snap to pixels 메뉴를 사용하여 개체를 픽셀로 맞출 수 있습니다.

Expression Design은 버전 1과 2를 모두 설치하여 사용할 수 있고, 작업중 Pan 툴과 Zoom 툴을
더블클릭하여 실제의 비율로 돌아올 수 있습니다.
기존에는 Import 메뉴로 열었던 Illustrator의 ai파일을 Open 메뉴로 열 수 있게 되었습니다.
Live Effect 또한 전에는 artboard 영역 내의 개체들에만 적용되었지만 2 버전에서는 artboard영역 외에도
라이브 효과가 적용되는 등 많은 기능들이 추가 되었네요.  

점차 나아지는 툴을 보니 그래도 위안이 되네요...아직도 더 바라는 점이 많다면
저의 욕심일까요? ㅋㄷㅋㄷ

호홋.. 오늘은 눈이 왔어요....-.-그것도 함박눈이 마구마구.. 서울은 비가 올줄 알았는데;

자자~ 그럼 오늘은 아~주 쉬운..무지개를 그려볼께요.  무지개라는 예제 자체는 별것 아닐지 몰라도
그리면서 쓰는 툴들의 사용법을 잘 기억해두세요. 실제로 아주 많이 쓰이는 기능들이니까요..

1. 원 툴을 클릭합니다.



2. 쭉~ 드래그하여 원을 하나 그려주세요.

3. 무지개 색을 순서대로 넣도록 합니다. 우선 제일 바깥의 빨간색 코드를 #DF0000 로 넣어주세요.

4. 그 다음, 그린 원을 복사하여 크기를 줄여줍니다. 주의할것은..크기를 임의로 줄이면 무지개 두께가
굵었다가 얇았다가 제멋대로가 될거에요. 그럼 일정한 비율로 줄이려면 어떻게 해야할까요?

5. 맨 아래 도구모음을 살펴보면 톱니바퀴 모양 아이콘이 있어요. 클릭하면  Scale As Percentage 라고
있는데 체크를 해주세요. 백분율로 크기를 조절할 수 있게 해주는 기능입니다. 이 기능을 체크하면 아래에
오브젝트의 가로세로 길이를 조절하는 단위가 %로 바뀌게 됩니다. 두번째 원은  90% 줄여주세요. (90 입력)



6. 줄인 원을 차곡차곡 포개면서 작업을 반복합니다. 제일 마지막에 그린 원을 복사하고 90%로 줄여주고
색넣고, 복사하고 줄여주고 색 넣고..반복!! 주황색은 #FF9200  노란색은 #FFD800 초록색은 #0DC104을
넣어줍니다. 초록색 까지만요!! 파란색부터는 다음설명으로..^^

7. 제가 왜 파란색부터는 잠깐! 을 외쳤을까요.. 예민하신 분들은 알아채셨을텐데, 원의 크기가 줄어들면서
90%로 일정하게 줄이다 보면 점점 원사이의 간격이 줄어듭니다. 두께가 얇아지는거죠.. 그러므로 파란색
부터는 88% 정도로..보라색과 마지막 하얀색은 86%정도로 줄여주세요. 좀 손이 가죠? -_-;;
파란색은 #054EDD 남색은 #042B79 보라색은 #420998을 넣어줍니다.  그러면 일단 무지개원이 완성돼요!

8. 그러나 제마음대로 원을 포갠지라.. 비뚤하게 얹어진 원을 보고 있노라면 맘이 아프죠^^? 모든 원들을
가로세로 열맞춰~! 시켜보겠습니다. 일단 원 패스들 전체를 선택하고 아래의 도구모음에서 Align 메뉴를
클릭하세요. 그럼 정렬시키는 기준이 여러개가 나오는데, 우리는 가로세로 정렬을 해야하니 제일 위에
Centers 를 선택합니다.



8. 자..정렬은 되었으나~동그란 무지개는 없죠 -_-! 뭐..원래 무지개는 원이라고는 하지만서도;; 
그럼 이제 반토막을 쳐보죠! 원 전체를 클릭하고 그룹화 시켜줍니다. Ctrl + G를 하셔도 됩니다.



9. 그리고 무지개를 반정도 가릴만한 사각형을 사각형 툴로 그려줍니다.


10. 패스를 분할하도록 해야겠죠. 기존에 묶여진 무지개묶음과 사각형의 패스를 전체 선택한 후 패스가 겹치는
부분을 나누어주겠습니다. 도구모음에서  Path 메뉴 중 Divide를 선택합니다.



11. 분할된 부분중 아래에 쓰이지 않는 부분만 클릭하여 삭제하도록 합니다.



12. 이렇게~ 남은부분을 또 그룹화 시켜주면..무지개가 완성됩니다. 다만, 한가지 아쉬운 점이 있다면,
Divide로 인하여 원의 겹치는 부분들에 흰 실선과 같은 공백이 생기는 것이죠.. 사실 일러스트레이터에서는
패스를 분할하여도 이런 공백이 생기지 않습니다. 익스프레션 디자인도 차후버전에는 더 디테일하게
발전하리라 기대해봐요 ^^

13. 여기서 끝이 아닙니다.. 이정도로 만족 못하겠다.. 나는 죽어도 흰 실선이 싫어요 -0- 하시는 분들은..
또 하나의 방법이 있습니다.  다시 되돌아가서.. 다 그려진 동그란 무지개에서 Fill과 Stroke영역 모두 채워
지지않은 사각형을 하나 그리고 선택한 후 마우스 오른쪽을 클릭하여 Arrange의 Send to Back를 선택하여
제일 뒤로 배치시킵니다.


14. 그리고 모두 선택한 후 Object 메뉴에서 Clipping Path 메뉴의 하위기능인 Make with Bottom Path를
 선택하세요. 제일 뒤에 있는 패스로 클리핑(마스킹) 시켜주겠다는 것입니다.



15. 이렇게 하면 맨 뒤에 배치된 사각형 만큼 마스킹이 되어진 부분의 영역만 보이게 됩니다.


16. 무지개를 클릭할때마다 클리핑 되지않은 영역까지 다 선택이 되지만 작업영역에서는 투명하게 처리되기
때문에 배경을 가린다던가 하는 걱정은 하지 않으셔도 됩니다. ^^



자~~ 이로써.. 무지개가 탄생!! 이렇게 간단한 무지개를 그리려고 해도 많은 기능이 사용되죠?
앞서 말씀드린것처럼 오늘 사용한 정렬, 패스분할, 클리핑 이러한 기능들은 어떤 작업을 하던지 상당히
자주 쓰이는 기능들이니까.. 꼭꼭 기억해두세요..^^

그럼 다음에 또 만나요~~(막이래~뽀뽀뽀도 아니고..;) Bye~