ZZANGMYON BLOG♡

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

"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 시계를 완성했어요...유저컨트롤을 만들면서도 이게 개발에 좋게 제대로는 만든건가 계속 의심을 거듭하면서 -_-..모션노가다(?)를 마치고 훈스닷넷의 김시원시삽님이 개발을 도와주셔서..잘 끝났습니다..음..가속도를 좀 고쳐봤는데 전보다 나으려나..-_-;;

안녕하세요. 야심한밤 짱묜입니다 -ㅁ-

오늘은 블러효과를 이용한 애니메이션을 만들어볼께요. 뭐, 괜히 거창한것 같지만 실은 별거없어요. 간단하게 익스프레션 디자인으로 이미지에 블러 효과를 줘보고 그것을 이용하여 뿌~연 이미지를 클릭하면 선명하게 나타나는 이미지 효과를 만들꺼에요. 오늘 강좌는 너무 쉬워서 눈 감고 따라할 수 있을지도 몰라요 >_<

1. 먼저 정우성 사진을 준비합니다.(헙..ㅋ농담이구요.. 맘에 드는 사진을 골라주세요..참고로 눈이 즐거워야 작업이 잘 되는 1人 입니다;) "놈놈놈"에 꽂혀 버린 짱묜..ㅠㅠ; 그치만 정우성은 정말로 킹왕짱이었는걸요 -_-)b


파일명은 woosung1.png 입니다.

2. Expression Design 에서 정우성 사진을 불러 들인 후 라이브 효과를 적용하도록 하겠습니다. 라이브효과는 Design 툴의 오른쪽 Effects 패널에서 적용할 수 있어요. 예전 강좌에서도 말했었지만 Blur,Drop Shadow,Dry Brush 등의 라이브 효과는 우리가 뽀샵이라고 부르는 포토샵의 필터효과와 비슷합니다.



아이콘을 클릭하여 Effects > Gaussian Blur 효과를 선택하고 Radius의 값에 2를 넣어줍니다. Radius의 값이 커질수록 뿌옇게 보여집니다.

3. 다음과 같이 적용되었다면 Export 메뉴를 이용하여 png 파일로 내보냅니다.



4. Expression Blend를 킨 후, Add Existing Item으로 두 이미지를 불러들이고 더블클릭하여 Gird 안에 넣습니다. 비주얼 트리의 눈모양(깜빡이)을 이용하여 이미지를 보였다 안보였다 하면서 잘 포개넣으세요.. 라이브효과가 적용된 정우성 이미지는 원본 정우성 이미지보다 살짝 크거든요..ㅡㅡㅋ 두 이미지의 위치가 잘 겹치도록 해주어야합니다!!  비주얼 트리는 아마도 다음과 같을거에요.



여기서 myon은 묜의 로고이니 신경쓰지 말아주세요 ^^; 그 아래 cvButton은 뭐냐고요? 그것은 잠시후에 설명하도록 하겠습니다. 일단 잘 포개어진 이미지 2장으로 스토리보드를 만들거에요. 이것 역시 매우 간단합니다.

5. 스토리보드를 생성하여 타임라인에서 1초가 되는 지점에서 키프레임을 만들고 블러가 적용된 이미지의 Opacity를  "0"으로 만들어줍니다.



자, 참고로 묜은 블러가 적용된 이미지의 시작 키프레임을 0.3초 부분에서 시작했어요. 왜냐하면 클릭 이벤트를 받아 블러 효과가 사라지게 하려는데 0초부분에서 시작하면 너무 순식간에 사라지거든요..ㅋㅋ 엿장수 마음입니다!! 이렇게 만든 스토리보드를 실행하면 사진이 선명하게 나타나는것을 확인할 수 있습니다.

6. 사진을 클릭하면 선명하게 나와야겠죠..저 위에 cvButton를 기억하시는지..--ㅋ 저녀석은 이미지만한 크기의 투명한 Canvas입니다. 물론 버튼으로 이벤트를 주어도 되지만 Canvas로도 간단하게 줄 수 있어요. 단, 중요한것은..Canvas의 BackGround 값이 "Null"이어서는 안됩니다. 아무색이나 지정해주고 코드의 제일 앞자리 부분을 "00"으로 처리하여 투명하게 해주세요.(예:#00000000) 사실 Canvas를 버튼타입으로 쓰느냐, 아니면 버튼 컨트롤을 쓰느냐는 상황에 따라 다르지만 전 그냥 Canvas로 했어요(개발자가 아니니 봐주세요 ^_^;)

7. C# 으로 가서 다음과 같은 코드를 넣어줍니다.

namespace BlurEffect { public partial class Page : UserControl {         bool isFirst = true;           public Page()         {             // Required to initialize variables             InitializeComponent();               this.MouseLeftButtonDown += new MouseButtonEventHandler(cvButton_Click);         }           void cvButton_Click(object sender, EventArgs e)         {             if (isFirst)             {                 isFirst = false;                 this.sbBlutMotion.Begin();             }         } }   }

이미지를 클릭하면 스토리보드를 실행하라 뭐 대충 이런소리입니다..ㅎㅎ..실행하면 다음과 같이 나타납니다.

아직은 이렇게 이미지를 이용해 처리하지만, 나중에 블렌드에서 비트맵 효과를 지원하는 날에는~~ 더더욱 편하게 작업할 수 있겠죠? ^_^

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;;
이해가 안가는 부분이 있다면 댓글을 달아주시기 바래요..^^ 설명해드리겠습니다..
그럼 오늘은 이만 마칠께요~!

안녕하세여~^^ 짱묜입니다. 툴 소개하는 강좌만 하면 지루할것 같아서 디자인과 블렌드를
활용한 간단한 버튼만들기 강좌를 써볼께요.

1. Expression Design 을 이용한 버튼 디자인
2. Expression Blend 를 이용한 버튼 이벤트 효과

이렇게 진행을 하도록 하겠습니다.

물론, 블렌드 안에서도 간단한 버튼 디자인은 가능하지만 디자인툴을 사용해서 하도록 할께요
(배운것은 무조건 써먹자!! 후훗~)

자~ 이제 익스프레션 디자인을 켜도록 합시다~!

1. 책 이미지를 삽입하거나 혹은 만들고 싶은 배경을 만들어 줍니다..

저는 간단하게 샘플 배경으로 익스프레션 디자인에서 그렸습니다. 사각형을 하나 그리고 라이브효과의
Drop Shadow 기능으로 그림자를 만들어 책장과 같은 효과를 만들었어요.
그리고 제가 좋아하는 태연의 '만약에'라는 노래가사를 넣었죠.(한번 들어보세요..정말 좋아요 ^^)
이건 테이프 효과를 보기 위해서 그려본 것이고 실제로는 블렌드에서 원하는 이미지를 넣으시면 됩니다.

2. 본격적으로 테이프를 그려볼께요. 사실 너무 간단해요 ㅠ_ㅠㅋㅋ

사각형을 하나 그려주시고 CornerRadius(각의둥글기)의 값에 8px를 넣어줍니다.
색깔은 #70EB07를 입력해주세요.

3. 그린 사각형 옆에 같은 높이의 사각형을 그린 후 살짝 포개줍니다. 저처럼 해주세요~ㅎㅎ

사각형의 색은 아무래도 좋습니다^^ 잘라버릴꺼니까요.

4. 두 개의 사각형을 선택한 후, Object 메뉴의 Path Operation의 하위메뉴인 Divide를 선택합니다.
그러면 패스의 겹치는 부분대로 패스가 분할되는데요. 3개로 분할되면 제일 마지막 부분만 남겨놓고 삭제합니다.

 
5. 자 그러면 테이프의 칼라풀~한 부분이 남아요.. 그럼 남은 부분을 하나 더 복사하여 색을 #2FB607로
입력하고 사각 모서리부분의 노드를 앞으로 당겨 짧게 만들어 주세요. 노드를 이동할때는 Shift 키를 누르면
동일선상에서 이동이 가능해집니다.


6. 이렇게 가로길이가 조금 더 짧은 사각형을 Arrange 메뉴의 Send to Backward 를 눌러 위의 사각형보다
뒤로 보낸 후에 다음과 같이 놓아줍니다. 그림자 효과 같은거에요..조금 더 예뻐 보이게 하기 위해서..^^
 

6. 제대로 되었나요? 그럼 이제 테이프의 투명한 부분을 만들어야겠죠. 간단합니다. 사각형과 같은 높이의
직사각형을 만들어주고 흰색으로 채워준 다음에 윗 사각형 옆에 놓아주세요.


7. 이제 마지막 단계입니다. 테이프의 흰색부분과 붙여진 부분은 투명해야겠죠? ㅎㅎ
흰 사각형과 바로옆의 윗 사각형을 같이 선택하고 Opacity의 값을 70%로 줄여줍니다. 그리고 나서
세 오브젝트를 모두 선택하여 그룹화 합니다. Ctrl+G 누르시면 돼요.
 

8. 다 완성되었어요.. 만들어진 테이프를 이미지의 끝부분에 얹어주면 됩니다.
색깔은 여러가지 색으로 다양하게 해보세요~~


다음 시간에는 오늘 강좌에서 그린 테이프를 가지고 버튼 이벤트로 모션효과를 해보도록 하겠습니다.
좋은밤 되세요..^^  

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

Expression Design 작업..

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

그 스릴과..감동~!!! 그리고..피멍..ㅠ_ㅠ..
왜그렸냐면..다 쓸데가 있기때문에 흐흐흐!!!