우리 회사사람들을 캐릭터로 만들어서 UX에 대한 회의를 하고 있는 모습을 만들어봤습니다.

UX에 관해 사람들 마다 생각하는 차이가 큰데 여러분이 생각하는 UX는 어떤것일까요?

신고
Posted by 개백장군

2011년 4월 2일 대전 엑스포컨벤션웨딩홀에서 식을 했었는데요.

조금 지난 지금 포스팅을 하네요.

현재 근화 소장님은 휴즈플로우를 떠났지만 함께 한 1년6개월정도 정도 많이 들고 좋은 얘기도 많이 해주셔서 정말

고마웠어요^^


[표지]

근화 소장님의 부탁에 따라 디자인을 진행했었는데요.

사실 소장님이 전체레이아웃이나 컨텐츠들을 다 구상을 해오셔서 디자인함에 있어서 큰 무리는 없었습니다.

흑백으로 프린트를 진행할려다 너무 심심해서 표지의 앞장은 골드로 인쇄했습니다.



[내지]


근화소장님만의 특유의 깔끔함을 최대한 유지하면서 디자인을 마무리 할 수 있었습니다.

내지의 '만남4단계'는 소장님의 아이디어!ㅋㅋ

신고
Posted by 개백장군

이번주 월요일에 MIX행사 관련 발표가 사내에서 이루어지는데요.

영어울렁증을 담고 영어발표를 준비 해 보았습니다.


Greetings, I am Lee Ki Baek of the Design Team.

I would like to tell that I want to participate in MIX, and I will give you 3 reasons I necessarily have to go.



First, it is UX. It is true that many people think that MIX event is focused on presentations of developers. However, this is wrong. MIX is an integrated stage which diverse information can be gained and shared regarding UX and innovation for not only developers, but also designer, and all UX experts. We would like to gain much information and inspiration regarding UX and be much help to the UX design team of our company.



Second, it is silverlight 5. Microsoft is publishing new version every year, and in this MIX, it will be presenting the new version, silverlight 5. I am manufacturing and designing many applications using silverlight blend program. By learning the new technology and information of silver light program faster than anyone else, my goal is to enhance the perfection of my application by figuring out the skills I require and what I lack.


Finally, it is Window phone 7. These days, our company is also developing much applications of Window 7, and it has been in the news, too. Window phone 7 is not launched in Korea yet, but it is becoming a worldly issue.

Even in this work ship, I would be able to see the completed Window phone apps, and also, the technology and the tips and tricks to make global level apps for registering to the market place.



Until now, I have told why I want to go, and about the 3 core reasons that I should go. Aside to these.



there are many reasons, and as you know, Las Vegas is a casino city. I would like to go to the casino bar and get Mr. Geun Hwa’s money I have left there, and relieve Mr. Geun Hwa!


And, this is a secret, these days, I am exercising every day at home to go to MIX. I will hold your heavy bags instead for you who will go with me.!


By experiencing the various cultures in this MIX, it would become an important turning point for my life as well as an opportunity to step into a broader world, not as a frog in a well, by gaining inspiration in design.

 
I absolutely can’t miss this one chance. Please consider well. Thank you.


짧은 영어실력과 여러사람의 도움으로 PPT가 완성되었습니다.

MIX행사를 가게되는지 결과는 12시간 후에....

 

신고
Posted by 개백장군






1999년에 개봉해서 큰 파장을 일으켰던 영화 '매트릭스' 다들 아시죠?

초록색 언어들이 비처럼 떨어지면서 영화타이틀이 나오는 시퀀스 장면을 보고 영감을 얻었는데요.

라인들이 그려지면서 배경이 나타나는 간단한 애니메이션입니다.

우선 쓰였던 재료부터 살펴 볼게요.



라인이 그려질 배경화면이구요.

일러스트에서 다 그렸네요ㅋㅋ

건물 한개씩 순차적으로 생겨지는 영상이 아니고, 동시다발적으로 건물이 그려지는 거라서



이처럼 건물하나에 필요한 StoryBoard하나에 Grid로 묶여있는 수천개의 패스들이 있습니다.

이제 Object and Timeline을 자세히 살펴 보면요.



위 그림처럼 Path가 0초일때는 건물의 외각선따라 그려지는 라인한개를 초록색으로 그렸습니다.

그런다음 Path의 0초 이후에 Keyframe를 찍지 않았기 때문에 초록색 선은 계속 남아있겠죠?ㅋ



네. 다음은 0.1초일때의 Path1에 관련된 내용인데요. Path1의 0초일때 검은라인에서 0.1초에 초록라인으로 바

뀌는 스토리 보드이구요. 처음에 배경의 검은색인데. 0.1초의 짧은 순간이지만 그 서서히 바뀌는 애니메이션 때

문에 전체적으로 봤을때 조금더 부드럽게 라인이 그려진걸 볼 수가 있을꺼예요^^.



이처럼 0.1초간에 라인을 하나하나 그리면 되요. 노가다...

저는 타블렛을 이용해서 라인을 그렸는데. 완전 딱딱 끊어지게 그리는것보다 왼손으로 그린 그림이 더 저는 애

착이 가네요.(제생각^^)



건물 하나에 들어가는 패스와 0.1초간에 검은색에서 초록색으로 이루어 지는 스토리 보드들 입니다.

이제 다른 건물들도 스토리보드를 생성해서 Keyframe을 위 처럼 찍어주면 되고요.

저는 건물을 13개로 나눠서 스토리보드를 13개를 만들었구요. 


네. 이제 애니메이션할 준비는 다 했구요.

이제 이 프로젝트를 Load했을때 실행이 되게끔 Behaviors를 이용해야되는데요.

Assets에 있는 ControlStoryboardAction을 이용합니다.



ControlStoryboardAction를 끌어다가 LayoutRoot에 놓으면


Properties창에 새로운 Trigger 패널에서 EventName은 프로젝트가 Loaded가 되었을때로 설정을 하고.

Storyboard는 해당하는 Storyboard를 선택해주면 됩니다.

Storyboard가 13개가 만들어 졌으니 ControlStoryboardAction를 13개 만들어 줍니다.

이제 Run Project를 해서 잘 실행되는지 보면 됩니다.
신고
Posted by 개백장군


블랜드4로 간단한 애니메이션을 만들어봤어요.




꾸물꾸물한 동네에서 번개가 떨어져 멸망하는 컷인데요.

1초도 되지 않는 짧은 스토리보드이구요.
우선 쓰였던 스토리보드의 오브젝트들입니다.
애니메이션 강좌라서 그런지 따라할사람이 없을 듯 합니다.



우선 모든작업은 일러(Ai)로 만들고 Microsoft Expression Design4로 불러와서 혹은
포토샵에서 이미지 파일로 만들어서 Microsoft Expression Blend4로 불러와서 모든작업을 했습니다.

 

Ai 작업파일.

위에서 보셨듯 레이어가 많이 겹쳐져 있어서 층층 구분을 해보았습니다.



이제 일러스트(Ai)파일이나 포토샵(Psd)파일을 Blend4로 불러올껀데요.

'파일 -> Import Adobe ..' 를 누르면 다음처럼 레이어가 딱 구분되어서 불러올 수 있는 레이어만 따로 불러올
수 있습니다.


지금은 배경이 필요해서 배경만 체크 하고 블렌드로 배경을 불러오고.
이제 스토리보드를 만든 후.

하늘에서 떨어지는 번개를 위와 같이 '파일 -> Import Adobe ..' 반복해서 불러와서


1번에서 번개의 위치를 적절히 배치 시키고 2번에서 계란을 눌러 키프레임을 입력합니다.
그런다음 3번 노란색 바를 0:00.3초에 이동시켜서 4번처럼 계란을 누릅니다.
1번에서 5번으로 이동을 할꺼기 때문에. 5번 언덕쪽에 위치를 시키고 크기를 조금 줄였습니다.
그런 다음 번개는 사라져야되니깐 6번 키프레임을 누르고 Appearance에서 Opacity를 0%으로 합니다.

이제 먼지를 할텐데요. 번개가 언덕을 때렸을 때, 언덕에서 나는 먼지 효과입니다.

먼지의 패스를 불러왔습니다.
먼지는 처음부터 생기지 않으니 Opacity를 0%으로 설정을 하고 Transform에서 X,Y크기를 0.5 씩 줄였습니다.
그리구 2번에선 Opacity를 100%, Transform을 X,Y크기를 1 로 합니다.
물론 스토리 보드에서 계란을 찍어야됩니다.
다음 3번에서 1번과 마찬가지로 설정을 합니다.
먼지1. 먼지2. 먼지3 과 동일한 방법으로 스토리 보드를 설정하고.
먼지가 발생했을때의 위치를 달리해서 효과를 줍니다.

전기의 레이어도 동일합니다.

그리구 번개가 때릴때의 전체화면에서 색변화를 줬는데요.


애니메이션의 크기와 동일하게 Ractangle를 만들고.

다음과 같이 시간에 따른 색의 변화와 Opacity 값을 조정합니다.

필요에따른 여러가지 효과들도 위의 방법과 같이 만들면 아마 더 완성도있는 디테일한 효과를 볼 수 있습니다.
여러가지 효과들을 추가했으면 이제 마무리를 지을때가 왔어요.

Ellipse로

1번(0:00.5)일때 언덕위의 작은 원에서 2번(0:00.1)일때 화면보다 더 가득찬 원으로 크기를 늘려주시면 빛이 다가오는듯한 효과를 줄 수 있습니다.

이제 마지막 부셔지는 바위를 표현 하면 되는데요.

일러(Ai)에서 Knife Tool로 다 자른걸 '파일 -> Import Adobe illustator File...'로 불러와서 바위의 한덩어리씩
Canvas로 그룹을 지었습니다.
실제로는 위 그림처럼 바위 사이 갈라진 흰색 라인이 보이는것이아니라 하나의 덩어리로 되어있습니다.


바위1에 대한 Path를 0:00.7초에 그대로 위치시키다가 0:01.2초에 패스를 하나하나 선택해서 크기를 조정하고
Opacity값을 0%으로 조절하면 바위가 조각마다 부셔져서 없어지는듯한 느낌을 줄 수 있습니다.

나머지 바위 2.3.4.5번도 위와 같은 방법으로 작업을 하고 그룹지었던 Canvas의 스토리보드상의 시간타이밍을
조금씩 달리하면 멋진 효과를 볼 수 있답니다.

이미지가 많타보니 길어졌는데요 아마 그냥 보시다가 따라 하는 사람이 없을듯.ㅠㅠ
블렌드로 이런 애니메이션의 효과를 줄 수 있다는것에 중점을 두고 작업을 했구요. 혹시나 비슷한 애니메이션의 효과를 쓸 때가 있다면 이걸 보시면 감사하겠습니당.
신고
Posted by 개백장군


티스토리 툴바