세티의 Lonely Star

원글출처: http://silverlight.net/quickstarts/blend_quickstart/part1_drawing_painting_and_text.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

안녕하세요~ 세티 입니다.

이번 시간에는 Expression Blend2.5를 이용하여 버튼을 만들어 보겠습니다. 버튼을 만들면서 Expression Blend2.5 에 대한 적응력도 키우고, 버튼을 만드는 것과 같은 간단한 작업을 함께 함으로써 실버라이트에 대한 이해력도 더욱 늘려보는 계기로 삼을까 합니다.

지난 강좌에서 Expression Blend 2.5를 설치해 봤습니다. 설치된 도구를 실행합니다.

네에~ 아주 실행이 잘 되는군요~ Expression Blend 2.5를 실행하면 Project를 실행할거냐? Help 파일을 볼거냐? 아니면 Sample 파일을 볼거냐 하고 묻는 창이 하나 뜹니다. 우리는 여기 Project를 선택하고 New Project를 선택해 봅니다.


와~ 선택했더니 New Project 팝업에서 Project type을 선택하라고 합니다. 여기서 언급되는 Project type에 대해 간략하게 설명하고 넘어가겠습니다.

WPF Application(.exe) - 실행 가능한 WPF 응용 프로그램을 생성할 때 선택합니다.
WPF Control Library - 단독 실행이 불가능한 dll과 같은 WPF 컨트롤을 만들 때 선택합니다.
Silverlight 1 Site - JS를 이용한(닷넷이 아닌) 실버라이트 웹 사이트를 만들 때 선택합니다.
Silverlight 2 Application - 닷넷언어를 이용한 실버라이트 애플리케이션을 만들 때 선택합니다.

자아 우리는 여기서 Silverlight 2 Application을 선택합니다. 그리고 OK를 누릅니다.
그러면 가운데에 아무것도 없는 하얀판이 하나 있고, 오른쪽에는 SetisSilverlight라는 솔루션과 프로젝트 그리고 기타 폴더와 xaml 파일이 나타나게 됩니다.

여기서 F5키를 한번 눌러볼까요? 이걸 누르면 브라우저 창이 하나 열리면서 웹 페이지가 열립니다.

데스크탑에 IIS(웹서버,Internet Information Server)가 없다면 가상 IIS를 만들어서 웹 애플리케이션을 실행할 수 있도록 도와줍니다. 이 가상 IIS 기능은 웹 개발의 편리성을 위해 Visual Studio 2005 에서 처음 소개 되었으며, 제작중인 웹 애플리케이션을 테스트 하는데는 더할나위 없을 만큼 편리한 도구 입니다. 물론 FTP나 기타 고급 기능은 제공하지 않고 있습니다.^^

이제 웹 브라우저를 닫고, Expression Blend 2.5 를 다시 봅니다.
언제나 그렇듯 이런 낯선 도구를 만나면 한숨부터 나옵니다. 휴우~ 뭔가를 또 알아야 한다는 그 부담감...
그 부담감을 즐거움으로 승화시키는 것이 어렵긴 하지만 우리는 엔지니어 이거나 디자이너 이거나 배우는 학생이거나 하기 때문에 어쨋든 이 고비를 넘어야 합니다. Expression Blend 2.5 라는 도구와 친해지는 것만이 낯설음을 친숙함으로 변화시키는 지름길인 것 같습니다. 전체적으로 한번 쭉 훝어보기 보다는 천천히 한 부분씩 잘라서 살펴보는게 좋을 것 같습니다.

왼쪽부터 한번 살펴볼까요?

옆의 그림처럼 가장 왼쪽에 있는 것이 Toolbox(도구상자) 입니다.
위에서 Expression Blend 2.5 를 실행했을 때 가운데 하얀판 보이던거 있죠?
그게 Artboard라고 하는 겁니다. 그 Artboard에 Toolbox에 있는 것(객체, object)을 선택해서 올려놓을 수 있는 것이죠.

그런데 이 Toolbox가 기존 Visual Studio 에 있는 Toolbox 보다 조금 더 강화된 사용자 경험(여기서의 사용자는 개발자와 디자이너 입니다.)을 포함한 것 같습니다. Toolbox에 있는 ">>" 이걸 클릭하면 Asset Library라는 팝업이 하나 열리는데요~ Expression Blend 2.5에서 지원하는 컨트롤들을 Gallery type,Detail type으로 분리해서 보여주거나 Search 기능을 두어 쉽게 찾아볼 수 있도록 한 점, 그리고 객체들의 네임스페이스를 Detail에서 제공하고 있는 점 등이 매우 맘에 듭니다.


그 바로 옆에는 객체와 타임라인 Inspector가 보입니다. 이 패널은 artboard 상의 모든 객체를 보여주며, 애니메이션을 위한 타임라인도 생성할 수 있게 해줍니다.

그 다음 가운데로 이동하여 하얀판을 봅니다 이 하얀판은 Artboard라고 하며 Design View라는 이름으로 부를 수도 있습니다.

이 Artboard는 우리가 생성할 웹 애플리케이션의 디자인 UI를 보여줍니다. Artboard의 오른쪽에 보면 Design, XAML, Split라는 탭이 있으며, 그것을 클릭하면 선택된 형태로 결과를 보여줍니다.

마지막으로 가장 오른쪽을 봅니다.

이것은 탐색기라고 해도 좋을 것 같은데 Table이라고 불러도 좋을 것 같습니다.

전 탐색기라는 표현이 더 좋기 때문에 그냥 탐색기라고 부르겠습니다. 탐색기의 위에 보면 3가지의 탭이 있습니다. Project Tab을 클릭하면 솔루션 탐색기가 짜잔~ 하고 열립니다.

그리고 Property를 클릭하면 객체의 Property를 설정할 수 있는 화려한 도구가 나타납니다. 그리고 Resource를 클릭하면 현재 Artboard상에서 사용되는 객체중에서 마우스로 선택된 객체의 리소스를 확인할 수 있습니다.




[세티의 실버라이트] 11. Expression Blend 2.5를 이용한 그리기(2) 에서 이어서 다루겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

어렸을 때 천문학도를 꿈꾸던 세티 입니다.^^

밤이 되면 날씨도 선선하고 퇴근하면서 올려다보는 하늘엔 구름이 듬성듬성 끼어 있습니다.
구름 사이로 빛나는 시리우스가 유독 밝게 보이는 오늘~

집에 와서 우주탐험에 대한 내용이 궁금해서 영상을 찾아봤습니다.^^
나중에 늙어서 은퇴하게 되면 서울을 떠나 한적한 곳에 개인 천문대를 짓고 별과 함께 나머지 여생을
보내겠다는 아주 작은 소망을 가지고 있기도 합니다.

별은 여름보다는 겨울에 잘 보이는데 해가 바뀔수록 겨울에 별 보는게 왜케 힘들어지는지..쿨럭
여름이 지나고 가을이 오면 밤 하늘에 반짝이는 별을 마음껏 볼까 합니다.
아~ 얼른 여름이 지나갔으면 좋겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

원글출처: http://www.microsoft.com/expression/products/Features.aspx?key=blend2dot5
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

안녕하세요~ 세티 입니다.^^
오랜만에 다시 강좌를 시작합니다.~ 잠시 재충전의 시간을 가지고 싶었거든요.ㅎㅎ

지난 강좌에서는 실버라이트 1.0을 이용하여 실버라이트 애플리케이션을 만들어 보았습니다. 예제를 하나하나 따라하면서 XAML 코드를 직접 코딩하다 보면 실버라이트에 대해 감을 잡을수 있어서 좋습니다. 그러나 좀 더 복잡하고 다양한 효과를 위해선 보다 복잡해지는 XAML 코드가 만들어지게 될텐데요~

이것을 일일이 손으로 코딩한다는 것은 생산성이나 기타 효율적 측면에서 매우 안타까운 일임에는 틀림없을거 같습니다. 그래서 우리는 Expression Blend 2.5 라는 툴을 이용해서 실버라이트에 대한 학습을 이어가 볼까 합니다.

이번 학습을 하는데 필요한 도구의 다운로드 주소는 다음과 같습니다.
다운로드 : Expression Blend 2.5 June 2008 Preview 다운로드

링크를 클릭하면 Expression Blend 설치 위자드가 나옵니다. 가벼운 마음으로 Next를 클릭합니다.

오~ 라이센스에 동의하겠냐고 묻는 화면이 나옵니다.
너무 당연한 거지만 동의해야 쓸 수 있겠죠? ㅋ 가볍게 동의해 줍니다. Next~
뭔가 표준설치 하겠냐 아니면 선택해서 설치할거냐 전체 설치할거냐 하고 묻는 화면이 나옵니다.
학습할 때는 뭔가 다 준비해놓고 학습하면 나중에 재설치할 필요가 없으니 아주 편합니다.
가볍게 Complete를 선택하고 Next를 클릭합니다.
설치하겠냐고 묻죠? Install을 클릭합니다. ^^
설치가 쭉 되는 화면을 볼 수 있습니다.

설치를 다 했다고 알려주는군요~ 오.. 제법 빨리 설치됩니다. 용량도 작구요..ㅎㅎ
설치가 다 되면 시작 프로그램에서 Expression Blend를 찾아서 실행해하면 아래와 같은 프로그램이 실행되는 것을 확인할 수 있습니다.

사실 이런 설치과정을 강좌에 넣고 싶진 않았지만 그래도 MS 도구에 친숙한 분들이라면 모를까 처음 접근하는 분들이나 또는 MS 도구에 친숙하지 않은 분들은 설치과정을 하나하나 확인하고 싶어할 수도 있다는 생각에 강좌의 제일 첫 글로 넣어봤습니다.

다음 강좌 부터 Expression Blend를 이용한 본격적인 학습을 시작하도록 하겠습니다.^^ 

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

 최근 Silverlight, Flex와 같은 RIA기술이 매우 주목을 받고 있습니다. 제 블로그에서 제공되는 검색 키워드 통계를 보면 1위가 Silverlight 입니다. Silverlight와 같은 RIA기술은 사용자 경험(UX)을 최대한 반영하여 고객이 만족할만한 애플리케이션을 만드는데 필요한 기술입니다. Silverlight외에도 사용자 경험을 애플리케이션에 반영하기 위한 기술로는 Flex나  Ajax도 있습니다. 그리고 약간 다르긴 하지만 닷넷이나 자바를 이용해서도 조금 복잡하긴 하지만 UX가 고려된 데스크탑 애플리케이션을 만들수 있었습니다. 하지만 기술이 너무 특정 플랫폼을 지향했다거나 혹은 간단한 기능 구현을 위해 너무 많은 코드를 필요로 한다거나 하는 문제점들이 있었기 때문에 플랫폼에 비교적 자유롭고 간단한 코딩만으로도 다양한 기능을 표현하기 위해서는 새로운 무언가가 필요했던 겁니다.

 사용자 경험을 애플리케이션에 녹이고, 고객이 만족할만한 결과물을 만들기 위해 관련 RIA기술(Silverlight, Flex등)에 대해 잘 파악하고 이해하는 것도 중요하지만 사실 그것보다 더 중요시 되야 할 것이 있다고 보는데 그건 바로 UX기반 애플리케이션 제작을 위한 아키텍처라고 생각합니다. 아무리 기술이 있어도 만들고자 하는 애플리케이션을 개념이나 기술적으로 잘 설계하지 않으면 매우 조잡한 형태의 RIA가 될 것이기 때문입니다.

우리가 만들려고 하는 애플리케이션이 이런 대접을 받아선 곤란하겠죠? 그러한 이유로 오늘은 UX 아키텍처에 대해 조금 알아보도록 하겠습니다.

UX 아키텍처를 이용하여 웹 애플리케이션을 제작할 때 중요하게 생각해야 할 점은 사용자 경험과 그것을 기반으로하는 매우 인터렉티브한 애플리케이션이 탄생해야 한다는 겁니다. 이러한 애플리케이션을 제작하기 위해선 웹 사이트 제작을 위한 철저한 전략이 필요하고, 또 사용자 경험이 가미된 그러면서도 새로운 것에 대해 창조를 하고자 하는 창조성과 차별화된 디자인이 필요합니다.

위에 언급한 3가지, 즉 차별화된 전략과 창조, 디자인을 위해선 객체간의 인터렉티브한 관계와 특징, 기능을 파악하고, 정보를 어떻게 보여줄 것인지를 고려해야 합니다. 그리고 사용자가 이용하게 될 네비게이션을 어떻게 설계해야 사용자들에게 큰 감동을 줄 것인지 고민도해야 하고, 애플리케이션의 주요 목적 중의 하나인 데이터를 어떻게 보여주어야 할 것인지도 고민해야 합니다. 그러고 보니 고민 투성이네요.^^;

아래의 그림은 사용자 경험을 기반으로 애플리케이션을 디자인을 할 때 고려되어야 할 부분을 포함한 원 입니다.
정말 기존 애플리케이션 제작에서 고려되던 것들 보다 훨씬 방대한 영역에 대한 고민이 있어야 함을 보여주고 있습니다.

이러한 다양성이 가미되는 UX애플리케이션의 컨셉을 정하고, 또 모두가 원하는 결과를 이끌어내기 위해선 반드시 고객이 요구하는 비즈니스 모델과 그들이 원하는 목표를 정하고, 기존에 가지고 있던 웹 사이트의 특징을 잘 파악하는 등의 업무를 고객과 함께 추진해야 합니다. 또한 필요하다면 세일즈, 마케팅, 디자인과 같은 별도의 비즈니스 그룹, 개발팀 등과 함께 작업도 진행해야 합니다.

이러한 다양한 이해 관계자를 통해 수집된 정보를 바탕으로 애플리케이션 제작전에 미리 사용성에 대한 테스트를 수행하여 이해 그룹과 다양한 의견을 피드백 해야 합니다.

그럼 UX 기반 인터렉티브 애플리케이션을 제작하는데 필요한 핵심 기능을 정리해보겠습니다.
먼저 사이트 구조를 정의하고 정의된 사이트 구조에 네비게이션의 개념을 도입하고, 필요한 기능들을 배치합니다. 그리고 개발을 위해 사용하기 쉬운 프레임워크를 준비해야 하고, 팀원 모두가 이해할 수 있도록 동일한 페이지 레이아웃을 제공하고, 설계나 컨셉에 대해 일관성을 부여해야 합니다. 그래야 고객이나 개발자와 같은 이해 당사자들끼리 개념이 공유될테니깐요. 그리고 그것에 간단한 특징을 가지는 상호작용성을 부여하여 모델링을 해보는 것입니다.

그리고 프로세스 플로우를 이용하여 애플리케이션에 대한 map을 만들어 봅니다. 모든 개발팀과 고객들에게 사용성에 대한 가이드를 제공하고, 개발팀에는 개발 프로세스를 지원하도록 합니다. 주요 사용자를 위해 고객 중심 디자인과 고객 경험 그룹이 위의 제시된 것들에 대해 함께 그것을 느낄 수 있도록 합니다. 또한 의뢰인을 대상으로 실제적인 리허설을 실시하빈다. 개발팀은 플로우와 네비게이션을 분석하여 애플리케이션이 완벽하게 제작될 수 있도록 합니다. 개발을 진행하면서도 고객의 분석을 다시 요구하고, 또 여러 이해 관련 팀과 미팅을 수시로 진행하여 전략을 정의합니다.

이렇게 다양하게 취합된 요구와 분석 결과를 토대로 애플리케이션의 내부와 외부 그룹에 대해 인터페이스와 인터렉션을 가능하게 하는 정보 아키텍처와 인터렉션 디자인 스키마를 그립니다.
이것을 그릴 때는 아래에 제시된 것들을 준비하면 많은 도움이 됩니다.

- 사이트 맵
- 컨셉 다이어그램
- 사용자 프로필 과 사용자 시나리오
- 콘텐츠에 대한 요구와 매트릭스
- 플로우 다이어그램
 
UX 기반 애플리케이션 제작에서 디자인팀과 기술팀간의 협업이 매우 중요하므로 다이나믹한 환경을 제공하여 불편함이 없도록 합니다. 그리고 앞에서 언급한 전략, 개발, 진실성, 사용성 테스트, 사용자 경험에 대한 훈련을 실시하고 정보 아케텍처 전달을 위해 템플릿을 생성하고 그것을 유지할 수 있도록 노력합니다. 또한 내부 프로젝트에서 요구된 조사나 작업을 잘 지휘하도록 노력합니다.

그럼 사용자 경험을 애플리케이션에 잘 부여하기 위해 우리는 어떤 지식 어떤 경험, 그리고 인력을 가지고 있어야 할까요?

먼저 경험적 부분을 언급하자면 인간이 가지는 모든 실질적인 부분이나 HCI, 정보 아키텍처, 사용자 인터페이스 디자인, 인터렉션 디자인, 산업 디자인에 대한 이해를 가지는 사람이 필요합니다. 그리고 XHTML, CSS, Javascript 환경에서 3~4년 정도 경험 디자인을 해본 사람, 인터넷 컨설팅 회사나 인터넷 비즈니스에서 5년간 경험과 관련된 일을 한 사람, 3~4년 정도 클라이언트의 다양한 요구를 경험하게 사람이 필요합니다.

그리고 개인의 능력적 부분을 다뤄 보겠습니다.
- 사용자 인터페이스에 대한 원칙, 사용성에 대한 원칙, 이슈나 기술과 같은 정보 디자인이나 정보 아키텍처에 대해 깊은 이해를 가지고 있어야 합니다.
- 머리 속에 들어있는 이미지를 모두에게 공유해주기 위해선 Microsoft visio나 Omnigraffie, 어도비 이디자인과 같은 common 다이어그램을 능숙하게 그려내고 시연할 수 있어야 합니다.
- 뛰어난 문제해결 분석력과 비판적 생각을 잘하는 기술이 있어야 합니다.
- 시나리오를 잘 쓰고, 커뮤니케이션이 원할해야 하며, 조직화 하거나 프리젠테이션 하고 조사 하는 기술이 뛰어나야 합니다.
- 요구되지 않은 부분도 사용성을 테스트하고, 분석결과를 도출하고, 다양한 분야의 그룹으로 부터 조언을 받습니다.

이렇게 적고 보니 'UX 기반 RIA 애플리케이션 만들기가 참 쉽지는 않구나.' 하는 생각을 해봅니다.
그러고 보면 UX를 중요시 하는 세상에서 이젠 기능적으로 애플리케이션을 잘 만들기만 한다거나 디자인적으로 뛰어난 애플리케이션만 만들어서는 100% 고객이 만족하는 애플리케이션이 나올 수 없다는 결론이 나오게 됩니다. 개발자는 디자인에 대한 이해를 가져가야 하고, 디자이너는 개발자에 대한 이해를 필수적으로 가져가야 하며 사용성을 설계하는 아키텍처는 다양한 분야에 대한 그 중에서도 특히 인간에 대한 고민을 필수적으로 가져가면서 애플리케이션을 설계해야 하고, 이젠 UX기반 애플리케이션 프로젝트 팀원 모두가 서로의 작업에 대한 이해를 완벽하지는 않더라도 조금씩은 가져가야 한다는 결론이 나오게 됩니다.

UX.... 어찌보면 무서운 단어지만 그 만큼 새로운 영역이므로 도전하는 자가 제일 먼저 과실을 따먹게 되는 또 하나의 새로운 기회가 될 것입니다.

새로운 세상... 이젠 기술보다는 사람에 대한 이해가 먼저인 세상입니다.^^

참고주소
http://www.montparnas.com/articles/what-is-user-experience-design/
http://www.semanticstudios.com/publications/semantics/000029.php
http://www.squareonesolutions.net/portfolio_universal.jsp
http://www.rohdesign.com/weblog/archives/cat_design.html
http://www.littlespringsdesign.com/blog/blog/2008/05/21/user-experience-from-a-system-architects-perspective/

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

아침 일찍 지하철을 타고 MS가 주최하는 Remix Korea Beyond RIA 행사에 참석하기 위해 코엑스로 향했습니다.

9시 30분에 행사장에 도착하여 간단하게 등록 절차를 밟고, Keynote를 듣기 위해 오디토리움으로 향했습니다.


여느 행사처럼 오늘 역시 여러 협력업체의 부스가 마련되어 있었습니다. 그런데 생각보다 한산한 느낌을 받았습니다. 왕래하는 사람들도 별로 없었고요~ 그래서 속으로 '아침이라 많이들 안오셨나보다.' 라고 생각했었습니다.
하지만 행사장에 들어서는 순간 헉... 하고 놀랬습니다.


네에~ 밖의 부스가 한산 했던 이유가 이 사진 한장으로 증명되는 순간이었습니다. 정말 많은 분들이 오셨다는 것을 한 눈에 알 수 있었습니다. 특히 여느 MS행사와는 다르게 이번엔 여성분들이 많이 보였었습니다.
아마도 Silverlight 에 대한 호기심에 업계 디자이너 분들이 많이 참석하신 것으로 보였습니다.


행사장에 자리를 잡고 두리번 거려보니 벽면에 예쁘게 REMIX와 Beyond RIA라는 글자가 보였습니다.

첫 키노트 진행은 MS의 유재성 대표이사님이 진행을 하였습니다.

그 다음 두번째로는 Forest Key인가요? 아무튼 그 분이 키노트를 진행하였습니다. 그 분은 현재 중국에 있다고 하면서 한국에만 벌써 6번째 들어오는 것이라고 설명을 했습니다.

한국은 전 세계 RIA 시장을 놓고 봤을 때 매우 흥미로운 시장이며, 자신에게도 관심이 많은 곳이라고 이야기 했습니다.  그 이유로는 사용자의 높은 기술수준, 사용자의 높은 경험성, 높은 인터넷 보급률, 높은 이동성 (웹, 폰, 디바이스) 이 있는 곳이기 때문이라고 언급했습니다.
그리고 또한 한국은 UX가 매우 높은 시장이라고 설명했습니다. 음식을 예로 들면서 설명을 했는데요, 음식하나만 봐도 굉장히 화려하고 반찬의 가짓수나 음식의 종류가 많고, 따라서 문화적 경험성이 매우 높다라고 설명했습니다. 그리고 마지막에 MS에서는 1,500 명의 개발자가 UX관련 연구를 한다고 했습니다.

다음에는 MS의 김국현 부장님이 키노트를 진행했습니다. 김국현 부장님이 12명의 키노트 스피커 분들을 차례대로 만나면서 기술, 구현, 애피소드 등의 이야기를 유도하였습니다.

키노트 스피커 분들이 다양한 구현사례를 소개하였는데 기억에 남는 부분을 따로 정리해 보았습니다.
- 보안 카메라를 실버라이트 보는데 해상도의 저하가 없고, 한 서버에서 300개의 스트림이 가능하며, 줌인-줌아웃까지 할 수 있다.
- MapView를 이용한 상황도를 구현할 수 있다.
- 사용자에게 경험성을 부여하기 위해 많은 고민을 하고, 그것을 스토리보드로 구현하여 이해를 돕는다.
- 개발 생산성을 전제로 하는 UX는 기능 + 성능 + 디자인의 집합체이다.
- 실버라이트는 미디어 분야에서 봤을 때 Cost는 절감되고, Value는 높다.
- 앞으로의 영상/광고 트랜드에서 문맥이 가지는 의미있는 정보를 보여주는 그런 관계가 매우 중요해질 것이다.
- Rich Media BM에 매우 뛰어나다.
- 가변적 스트리밍 기술을 통해 네트워크의 효율성을 높일 수 있다.
- 영상을 보면서 PPL 기능을 도입하고, 능동적 시청이 가능하다.'
- 불법 다운로드 방지를 위한 DRM 기능이 매력적이다.

일단 적은 내용이 더 있긴 한데 중구난방으로 마구 적어서 편하게 깔끔한 것 몇 가지만 추려보았습니다.^^
키노트가 끝나고 점심을 먹으러 코엑스 지하로 내려갔습니다. 힘들어서 잠시 쉬는 중간에 한 컷 찍어봤습니다.^^

그리고 사실 이 트랙에 참여하고 싶어서 오늘 Remix 행사에 참석했습니다.
Joseph Fletcher(Interaction Design Lead) 가 진행하는 "A Design Vision for Microsoft Surface" 입니다.
Joseph는 Surface Platform이 지난 달에 현실화 되었고, 이미 미국에서 상용화를 시작했다고 설명했습니다. 그러면서 이런 것을 구현하기 위한 기술이 문화에 녹아들고 있고, 한국에서는 디지털 디바이스에 대한 다양한 요구가 많기 때문에 앞으로 점점 더 많은 사람들과 디바이스 간의 인터렉션이 많아질 것이라고 그리고 가능해질 것이라고 말했습니다.

미래의 세대를 위해 기술은 계속 전진해야 한다고 말하면서 많은 회사들이 기존에 나와 있는 제품에 쏟는 노력이 90%라고 하면서 MS가 하는 새로운 노력의 예로 WPF를 언급했습니다.
그러면서 Surface관련 영상을 봤습니다.(너무나 많이 공개된 영상이죠? ^^)
Joseph는 Surface를 작업하면서 팀에서 공유했던 7가지 중요 포인트를 공개했습니다.

1. Vision을 만들어라.
2. Story를 인지하라.
3. 원칙을 만들어라.
4. 가이드라인을 제시하라.
5. 진정성이 있어야 한다.
6. 비평하라.
7. 믿어라.

간단하게 언급하자면 Vision을 만들어 팀내에서 공유하고, 과거의 역사를 인지해야 미래로 나아갈 수 있기 때문에 과거의 이야기에 귀를 기울이고, 역사에서 변곡점을 찾아보라고 이야기 했습니다.
또한 사용자 경험을 바탕으로 하는 작업은 진정성이 있어야 하며, 팀내에서는 작업에 대한 일관성 부여를 위해 가이드라인을 제시하고, 이러한 디자인 가이드 라인을 파트너에게 직접 보여줌으로써 자신들이 하는 작업의 진정성을 보여주기 위해 노력했다고 했습니다.

이러한 진정성을 바탕으로 적을 끌어들여 적의 비평에 귀를 기울이고, 소통해야 좋은 제품이 나온다고 언급합니다. 그리고 마지막으로 개발환경을 언급했는데 개발자는 조용하고 독립적인 공간을 선호하는데 반해 디자이너의 경우 그런 부분을 좋아하지 않음으로 인해 결국 벽면에 작업에 대한 내용을 붙이고, 지나다니면서 읽게끔 하여 서로의 일을 공유하였다고 합니다.
UX를 배경으로 하는 작업을 할 때는 Paper, flash등을 이용하여 많은 프로토타입 작업을 수행하라고 조언했습니다. 그리고 제대로 된 팀을 구성하여 서로 공감대를 형성하고, 하나의 목표를 향해 나아가라고 하면서 트랙을 마무리 했습니다.
개인적으로는 Surface 개발에 관한 생생한 경험을 듣게되어 좋았고, UX를 기술에 반영하기 위해 그들이 기울인 노력이 어떠했는지 알수 있어서 매우 기뻤습니다.

그가 한 이야기 중 어떤 부분은 국내에 적용하기에는 조금 어렵지 않을까 하는 부분도 있었지만 전체적으로는 매우 도움이 되는 이야기로 구성된 훌륭한 트랙이었다고 생각합니다.
(역시... 오길 잘했어.^^)

이번 행사에서 한 가지 아쉬웠던 부분은 실버라이트의 구현 사례 및 경험이 너무 개발자 위주인게 아닌가 싶었습니다. 행사를 지켜보면서 저도 개발자이지만 개발자의 입장을 버리고, 디자이너의 입장에서 행사를 바라볼려고 노력했는데 개발자의 입장을 잘 모르는 디자이너 입장에서는 어려운 XAML 코드, 툴, 서버, 아키텍처 이런 내용들은 먼 나라의 이야기 같았을 것이라고 느꼈습니다.

개발자와 디자이너의 협업에서 디자이너는 디자인과 관련된 부분에 보다 많이 집중하기를 원하기 때문에 코드 보다는 내가 어떤 툴을 이용해서 실버라이트로 원하는 결과물을 만들기 위해 작업을 어떻게 해야하고, 일단 만들어준 결과물을 어떻게 개발자에게 토스할 것인가? 라는 부분이 내용적으로 더 다루어졌으면 좋았겠다라는 아쉬움도 있었습니다.

아무튼 이번 행사는 제가 궁금해하던 부분을 해결하고, 또 다양한 살아있는 경험을 간접 체험할 수 있었고, 또 많은 도움을 주신 분들을 만나게 되었던 소중한 시간 이었습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

위의 코드도 천천히 해석해 보도록 하겠습니다.

위에 언급한대로 두 점 사이에서 애니메이션이 발생하도록 <DoubleAnimation> 엘리먼트를 <Storyboard> 안에 넣습니다. 그리고 이 Storyboard의 주인공이 될 엘리먼트를 지정합니다. 여기서는 ellipse가 되겠네요.
그래서 stroryboard.TargetName = "ellipse" 라고 합니다.
DoubleAnimation이 두 점 사이의 값을 이용한 애니메이션 발생에 필요한 엘리먼트 이기 때문에 나머지 한 점의 값을 설정합니다. 이미 Ellipse에는 한점(Canvas.Left = "30") 이라는 값이 설정되어 있으므로 <DoubleAnimation>의 Storyboard.TargetProperty 속성값으로 "(Canvas.Left)"를 설정하고 To="300" 을 설정해서 30px 에서 300px 까지 왼쪽에서 오른쪽으로 움직이도록 설정합니다.
그리고 마지막으로 Duration = "0:0:1" 을 설정하게 되는데 이것은 애니메이션되는 Ellipse의 애니메이션 시간을 의미합니다. (약 1초 일 겁니다.^^;)

그럼 이어서 애니메이션의 또 다른 타입에 대해 알아보겠습니다.
실버라이트는 앞에 언급한 DoubleAnimation 처럼 ColorAnimation과 PointAnimation 이라는 것도 지원합니다.
오호~ 두 가지 애니메이션이 뭘 하는 건지 대충 감이 오죠? ^^
바로 색상과 포인트를 지원하는 애니메이션 입니다.
역시 또 코드를 보면서 이해의 폭을 넓혀 가보도록 하겠습니다.

먼저 Storyboard 엘리먼트를 보겠습니다. 그 내부에 보면 ColorAnimation 엘리먼트가 2개 위치하고 있습니다.
앞의 코드에서 방아쇠 언급하면서 상세하게 코드를 설명했으니 이번엔 대충 보셔도 아하~ 하면서 눈치챌 수 있을 겁니다. 2개의 ColorAnimation 엘리먼트는 역시나 각각의 Ellipse 엘리먼트를 가리키고 있네요.

 <ColorAnimation
               Storyboard.TargetName="e1_brush"
               Storyboard.TargetProperty="Color"
               From="Red" To="Blue" Duration="0:0:5" />

해석해 보면 ColorAnimatin 엘리먼트가 가리키는 객체의 이름은 "e1_brush" 이고, 이 ColorAnimation이 가리키는 속성은 Color이며, Red에서 Blue로 5초 동안 변화시켜라.
그럼 이 객체가 가리키는 엘리먼트는 무엇일까요?

 <Ellipse.Fill>
      <SolidColorBrush x:Name="e1_brush" Color="black"/>
 </Ellipse.Fill>

바로 이 코드 입니다. Ellipse.Fill or Ellipse.Shape를 써서 그리고자 하는 형태를 지정하면 될 것이구요~
이 Ellipse의 기본 컬러가 black으로 지정되어 있습니다. 이 코드가 Ellipse 객체에 색상을 채워주는 역할을 합니다. 아마 이 예제를 실행하면 저 black은 너무 순간적이라 체크하기 어려울 것입니다. 저 부분을 green으로 변경하고 Duration 을 1분으로 설정해 보시면 시작할 때 설정된 green과 ColorAnimation에 설정한 From = "red" 에 의해 첫 시작시 색상이 다홍색 으로 보이는 것을 확인할 수 있습니다.

자 두번째 ColorAnimation의 동작은 위와 동일하지만 코드가 약간 다르네요.
 <ColorAnimation
               Storyboard.TargetName="e2"
               Storyboard.TargetProperty="(Fill).(Color)"
               From="Red" To="Blue" Duration="0:0:5" />

타겟속성이 아예 Fill의 Color라고 직접적으로 명시되어 있군요.
그럼 Ellipse 엘리먼트는 어떻게 되어 있을까요?

<Ellipse x:Name="e2" Fill="Black"
      Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/>

보시는 것처럼 Ellipse 엘리먼트에 Fill 속성이 있고, 색상이 직접 할당되어 있는 것을 확인할 수 있습니다.
결국 동작은 2가지 타입 동일합니다.

아래는 색상이 변화하는 과정을 이미지로 캡쳐해 본 것 입니다.

음~ 역시 신기합니다.^^
이렇게 우리는 적당한 시간을 주고 객체의 변화를 실감나게 지켜볼 수 있는데요~ 앞에 언급한 Storyboard와 DoubleAnimation 객체는 Timeline 객체 타입 입니다.

아래는 Timeline이 가지는 유용한 속성입니다.
Storyboard.TargetName : 애니메이팅 하기 위한 객체의 이름
Storyboard.TargetProperty : 애니메이팅하기 위한 속성
BeginTime: 이 속성에 단지 "2"라는 숫자만 넣으면 이틀 뒤에 움직입니다. ㅡㅡ; 그래서 하나의 문법을 따라야 하는데 hours:minutes:seconds 라는 룰을 따라야 하고 다음과 같이 표시할 수 있습니다.
"0:0:2"
이렇게 설정하면 2초 뒤에 애니메이션이 시작합니다.
Duration : timeline의 길이를 의미합니다. 즉 애니메이션이 설정된 시간만큼 움직인다는 뜻이죠.

아래의 코드를 복사하여 예제로 만든 xaml 코드에 붙여넣고 직접 실행하고 결과를 확인해 보시기 바랍니다.
그리고 값을 변경해가면서 어떻게 애니메이션이 움직이는지 결과를 눈으로 직접 확인해 보시면 코드를 이해하는데 많은 도움이 될 것 입니다.

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard
              Storyboard.TargetName="e1"
              Storyboard.TargetProperty="(Canvas.Left)"
              BeginTime="0:0:5">
            <DoubleAnimation To="300" />
            <DoubleAnimation To="300" Storyboard.TargetName="e2"/>
            <DoubleAnimation To="80" Storyboard.TargetName="e3" Storyboard.TargetProperty="Width"/>
            <DoubleAnimation From="200" To="300" Storyboard.TargetName="e4"/>
            <DoubleAnimation To="300" Duration="0:0:5.3" Storyboard.TargetName="e5"/>
            <DoubleAnimation FillBehavior="HoldEnd" To="200" Storyboard.TargetName="e6"/>
            <DoubleAnimation FillBehavior="Stop" To="200" Storyboard.TargetName="e7"/>
            <DoubleAnimation RepeatBehavior="Forever" To="300" Storyboard.TargetName="e8"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <Ellipse x:Name="e1" Fill="Black"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"/>
  <TextBlock Canvas.Left="0" Canvas.Top="30">e1</TextBlock>
  <Ellipse x:Name="e2" Fill="Red"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="50"/>
  <TextBlock Canvas.Left="0" Canvas.Top="50" Foreground="Red">e2</TextBlock>
  <Ellipse x:Name="e3" Fill="Purple"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="70"/>
  <TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="Purple">e3</TextBlock>
  <Ellipse x:Name="e4" Fill="Blue"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="90"/>
  <TextBlock Canvas.Left="0" Canvas.Top="90" Foreground="Blue">e4</TextBlock>
  <Ellipse x:Name="e5" Fill="Green"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="110"/>
  <TextBlock Canvas.Left="0" Canvas.Top="110" Foreground="Green">e5</TextBlock>
  <Ellipse x:Name="e6" Fill="Black"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="130"/>
  <TextBlock Canvas.Left="0" Canvas.Top="130" Foreground="Black">e6</TextBlock>
  <Ellipse x:Name="e7" Fill="Orange"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="150"/>
  <TextBlock Canvas.Left="0" Canvas.Top="150" Foreground="Orange">e7</TextBlock>
  <Ellipse x:Name="e8" Fill="Red"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="170"/>
  <TextBlock Canvas.Left="0" Canvas.Top="170" Foreground="Red">e8</TextBlock>
</Canvas>

이상 입니다. ^^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

원글출처: http://silverlight.net/quickstarts/silverlight10/media.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.



이번 시간에는 실버라이트가 제공하는 미디어엘리먼트(MediaElement)에 대해 알아보겠습니다. 실버라이트의 MediaElement 객체는 WMV와 WMA파일, mp3와 같은 타입의 파일을 플레이하기 위해서 사용합니다.

MediaElement에 대해 알아보기 위해 우리는 웹 페이지에 미디어 파일을 추가 하고 유용한 MediaElement 속성과 미디어를 재생하는 컨트롤 방법을 다뤄보고 풀-스크린으로 미디어를 재생해 보고 비디오를 이용한 페인팅을 다뤄보겠습니다.

먼저 학습을 위해 간단한 샘플을 만들겠습니다. 그러기 위해선 하나의 웹 페이지를 생성하고 그 속에 미디어를 삽입하도록 하겠습니다.

작업순서.
1. Canvas 태그에 MediaElement를 추가합니다.
2. Source 속성에 URI 경로를 설정합니다.

아래는 예제 코드 입니다.

와~ 단 한줄의 코드로 미디어를 재생할 수 있다니... 정말 대단합니다.^^

실버라이트 XAML 코드는 앞의 강좌에서 언급했듯이 엘리먼트 하나하나가 속성을 가지고 있고, 또 객체로 되어 있습니다. 그래서 보다 다양한 멀티미디어 효과를 줄 수 있고, 보다 쉽게 그러한 기능들을 추가할 수 있습니다. 앞에 만든 미디어에 동그란 원을 하나 추가 해보겠습니다. 동그란 원을 추가 위해서 Ellipse 엘리먼트를 사용하도록 하겠습니다.

이야~ 렌더링이 잘 되었군요. 요즘 인기 많은 소녀시대의 '채연' 님을 동그란 원안에 넣어봤습니다.^^;
음! 여러 UI엘리먼트를 조합해서 원하는 결과물을 정말 쉽고 편하게 만들어 낼수 있겠군요.

계속 이어서 MediaElement에 대해 조금 더 알아보겠습니다. 다른 엘리먼트들과 마찬가지로 MediaElement도 몇 가지 유용한 속성을 가지고 있습니다.

MediaElement를 위한 유용한 속성값은?
Stretch - MediaElement에 비디오를 채운다. 가능한 값으로는 None, Uniform, UniformToFill 그리고 Fill 이 있으며, 기본값은 Fill 입니다.

Stretch = "none" 일 때

Stretch = "UniformToFill"일 때

그 다음으로는 볼륨과 관련된 속성이며, IsMuted와 Volumn 이 있습니다. 미디어가 소리 조절이 안되면 안되겠죠.^^;
IsMuted - true와 false를 설정할 수 있으며, 기본값은 false 입니다.
Volumn - 0에서 1까지 설정이 가능하며 기본값은 0.5 입니다.

다음으로는 미디어 재생과 관련된 메서드가 있겠는데요~ Play, Pause, Stop 메서드를 사용하여 미디어 재생을 컨트롤 할 수 있습니다. 미디어 재생과 관련된 예제 코드는 아래와 같습니다.

그러나 이러한 미디어를 작은 화면으로 본다는 것은 너무 답답한 일임에 틀림없습니다.^^
따라서 우리는 이 미디어를 풀-스크린 모드로 보기를 원하며, 또 그렇게 되어야 할 것입니다.
미디어 재생에서 실버라이트 플러그-인의 FullScreen 속성을 설정하기 위해서는 ActualWidth와 ActualHeight의 사이즈를 설정해야 합니다.

아래의 코드를 위에 작성한 코드에 추가 합니다. 추가할 코드는 다음과 같습니다.

<!-- 풀 스크린 모드를 위한 XAML 코드 -->
    <Canvas MouseLeftButtonDown="toggle_fullScreen"
      Canvas.Left="190" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="85">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Gray" Offset="0.0" />
            <GradientStop Color="Black" Offset="1.0" />       
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5"
        Foreground="White" >full screen</TextBlock>
    </Canvas> 

풀-스크린 제어와 관련된 메소드는 이미 위의 js 파일에 추가해 놓았으며, 해당 메소드의 이름은 canvas_loaded(Object, Param), toggle_fullscreen(Object, Param), onFullScreenChanged(Object, Param) 입니다.

여기까지는 기본적인 미디어 기능이었습니다. 하지만 요즘처럼 다양한 멀티미디어 콘텐츠가 응용되는 세상에서 단순하게 미디어 재생만 된다면 좀 재미가 없겠죠? 그래서 소개할려는 것이 비디오브러쉬 입니다.
우리는 실버라이트 MediaElement와 VideoBrush 기능을 사용하여 글자의 배경에 미디어를 재생할 수 있습니다.

VideoBrush 기능을 사용하기 위해선 아래와 같은 순서로 작업을 해야 합니다.
1. VideoBrush 엘리먼트를 생성합니다.
2. MediaElement를 생성하고 Name을 할당합니다.
3. MediaElement의 Opacity를 0.0으로 설정합니다.

아래는 예제 코드 입니다.

VideoBrush를 이용해서 MediaElement에 미디어를 정지, 잠시정지, 재생등을 할 수는 있지만 MediaElement의 크기를 변경할 수는 없습니다. 이와 같은 기능을 원한다면 multiple VideoBrush 객체를 이용해야 합니다.
이상으로 실버라이트가 제공하는 미디어 기능에 대해 간단하게 살펴보았습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

프로가 되기 위해 주어지는 시간.

우리는 주변에서 '뜻하는 바가 있으면 그 뜻을 이루기 위해 10년은 해야 한다.' 라는 말을 듣곤 합니다.
여기서 말하는 10년이라는 말의 의미가 무엇일가요? 다들 아시겠지만 무언가 익숙해지고 또 잘하게 되는 그런 프로가 되는데 걸리는 시간을 의미한다고 봅니다.

10년이라는 기간은 잘쓰면 약이 되지만 잘못 사용하게 되면 독이되는 기간인 것 같습니다. 보통 사람이라 할지라도 자신이 뜻한바를 이루기 위해 10년만 잘 쓰면 누구나 프로가 될 수 있으나 반대로 길을 잘못 들어서면 10년뒤에나 잘못된 점을 깨닫고 후회하게 된다는 말이 될 수도 있기 때문입니다.

그래서 일까요? 점점 이 사회에는 도전과 모험, 그리고 그것을 통해 얻어진 값진 경험을 얻는 그런 일련의 과정을 점점 외면하고 무시하는 것 같습니다. 세상에 태어나 자신의 길을 선택하는 것에 대해 어느 누구도 뭐라할 순 없지만 우리가 사는 이 세상은 서로를 경쟁상대로 보며 끊임없이 발전할 것을 요구하고 있습니다.
누군가를 꺽어야 내가 살아남고, 내가 살기 위해서는 조금 더 빨리 남들보다 무언가를 이루어야 하고, 그러기 위해선 실수를 최소한으로 줄여야 하며, 또 그러기 위해선 안정 지향적으로 길을 잡게 됩니다.

하지만 안타깝게도 프로다운 인생을 살기 위해서는 안정 지향적으로 가선 그 뜻을 이루기가 조금 힘들다고 봅니다. 안정 지향 삶 속에서는 계속 넘어지고, 일어나고, 실수를 깨닫고, 작은 것에서 진리를 깨달으며 하나씩 배워나가기 힘들기 때문입니다. 물론 여기서의 넘어지고, 일어나고 깨닫는 것은 일상에서 벌어지는 사소한 것이 아닌 한계 상황을 말하는 것 입니다.

인간은 극한의 상황 속에서 무언가를 배운다고 합니다.
극한의 상황은 그냥 주어지지 않습니다. 적성에 맞는 일이든 맞지 않는 일이든 우리는 그런 상황을 일을 통해서 주로 겪게 될 것이고, 그것을 극복하기 위한 노력을 함으로써 상황 극복에 대한 방법을 터득하게 됩니다.

따라서 사람이 자신을 성장시키는데 있어서 일을 하는 것이 매우 중요하다고 봅니다. '적성에 맞지 않는 일을 할 수 없지 않느냐?' 라고 물을 수도 있겠지만 전 적성 그것 보다는 일 자체가 더 중요하다고 봅니다.
왜냐면 일을 하지 않고서는 '적성을 찾을 수 없다.' 라고 생각하기 때문입니다.

프로가 되기 위해서는 자신이 하는 일이 적성과 맞아야 하며, 그런 일을 최소 10년간 해야 된다고 봅니다.
안정적으로 살아서는 적성에 맞는 일을 찾기도 힘들거니와 프로가 될 확률도 매우 낮아지게 된다고 생각합니다. 물론 예외는 언제나 늘 있기 마련입니다. 하지만 그 예외에 자신이 포함될 확률도 있지만 그렇지 않을 확률이 더 크다는 것을 우리는 스스로가 알고 있습니다.

시간은 모든 사람에게 공평하게 주어지고 있고, 일을 할 수 있는 기회 또한 공평하게 주어지고 있습니다.
일을 함으로써 그리고 주어진 일에 최선을 다함으로서 그런 시간과 기회를 잡아 모두가 멋진 프로가 되었으면 합니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

코엑스에서 REMIX08 이 열립니다.
RIA관련 레퍼런스가 필요해서 저도 행사에 참석해서 다양한 뉴스를 접하고 올 생각입니다.

시간 : 2008년 6월 11일 09:00 ~ 18:00
장소 : 코엑스 Auditorium

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

IMF 이후 우리나라 사회구조가 전반적으로 많은 변화를 겪었습니다. 현재의 팽팽하고 살벌한 무한경쟁의 분위기는 바로 이 때부터 시작된게 아닌가 싶습니다. 그래서 10여년간 많은 조직단체가 단기적이면서 극단적 효율성을 추구하다보니 구성원들에게 강조하는 것이 생겨나게 되었습니다.

"멀티 플레이어가 되어라", "프로 근성을 갖춰라.", "글로벌 인재가 되어라."

요즘은 이익집단을 넘어 공공 서비스 분야에도 많이 강조되고 있는 것 같습니다.  뉴스를 봐도 실제 그런 분위기가 많이 만들어 지고 있고, 이젠 위에 언급한 인재가 되지 않고서는 앞으로 전진하기 힘든 환경이 되었습니다.
물론 저 역시 이런 환경 속에서 살아남기 위해 안간힘을 쓰는 진행형 인간입니다.^^

무한 경쟁에서 이기기 위해 진정한 프로가 될려면 어떻게 해야 되나 하는 고민을 가져오다 보니 대략 3가지 정도의 내용으로 압축이 되더군요.

1. 미래를 읽고, 소화하라.
2. 남들과 다른 가치를 창출하라.
3. 자신의 분야에서 최고가 되어라.

흠~ 어디에선가 귀에 따갑도록 들어본 이야기이기도 하고, 존경할만한 저자가 쓴 그런 훌륭한 책 속에서 늘 언급하는 이야기 이기도 합니다. 흠~ 그런 분들의 이야기가 제 생각과 일맥상통한다는 사실을 알고 나니 기분은 좋습니다.^^; 아무튼 곰곰히 생각해보면 절대 틀린 말이 아닌 것 같습니다. '성공한 사람이니깐 이런 이야기를 하겠지.' 라던가 '그들은 그들이고 난 나야. 환경이 다른데 몰~' 과 같은 이유로 터부시할게 아니더란 걸 느꼈습니다.

먼저 미래를 읽고, 소화하라.
즉, '미래의 상황을 예측해서 자신의 것으로 만들고, 기회가 왔을 때 잡아야 한다.' 라는 의미로 전 이해했고, 그렇게 받아들였습니다. 곰곰히 생각해봐도 내가 CEO라면 내 회사에 미래를 위해 준비된 인재가 있으면 매우 좋을 것 같습니다. 역으로 생각해서 개인의 입장에서도 미래의 환경 변화에 주도적으로 대응할 수 있다는 장점이 있습니다. 따라서 결론은 '좋은게 좋은거고 양쪽다 만족.' 이라는 의미를 부여할 수 있겠더라구요.
그렇다면 how? 이 부분은 누가 가르쳐 줄 수 없는 부분인 것 같습니다. 물론 주변의 도움을 어느 정도는 받을 수는 있겠지만 자신의 미래는 자신이 준비해야 하기에(사실 대부분 숟가락으로 떠먹여주지도 않습니다. 하지만 도움을 청하는 사람들은 숟가락으로 떠먹여 주길 원하죠.) 스스로 고민하고, 노력해서 얻을 수 밖에 없습니다.
다양한 분야의 책을 읽는 다거나, 주변 사람을 통해 정보를 습득하고, 모임을 통해 가장 최신의 정보를 계속 얻을 수 밖에 없겠지요. 물론 미래지향적인 사람들을 많이 만나야 겠지만 말입니다.

둘째로 남들과 다른 가치를 창출하라.
사실 대학을 갓 졸업한 신입생을 보면 대부분 성적이 좋고, 또 영어도 잘합니다. 부럽습니다.ㅜ.ㅜ 그러나 모두 다 잘하다보니 한정된 자리에 사람을 앉히기 위해선 조금이라도 성적이나 영어가 앞서는 사람이 매우 유리하게 됩니다. 소숫점 경쟁이 되겠네요. 그리곤 전부다 상향 평준화 되고 말이죠. 가끔 언론에도 이야기 됩니다. "토익도 만점이고 학교 성적도 만점인데 왜 떨어지는지 모르겠다." 아... 너무 슬픈 이야기 입니다. 절대 능력이 부족하지 않음에도 한정된 자리에 한정된 인원만이 앉을 수 있다는 이유로 수 많은 능력 있는 분들이 자신이 가야할 자리를 가지 못하는 상황이 벌어지고 있습니다. 그러다 보니 기업에서도 상향 평준화 무리속에서 인재를 찾는데 그 어떤 때보다 힘들어 하는 것 같습니다. 그러다보니 그에 대한 대안으로 남들과 다른 가치를 창출할 수 있는 인재 또한 찾게 됩니다. 상향 평준화된 무리와는 다르게 학업적 성취도는 낮더라도 어떤 단체가 요구하는 다른 가치를 창출할 수 있는 인재라면 얼마든지 경쟁할 수 있는 사회인 것 같습니다. 그리고 그런 선례가 의외로 우리 주변엔 매우 많음을 알 수 있구요. 그렇게 다른 가치를 창출하는 인재(차별화된 인재)는 회사나 주변에서도 꽤 소중한 인재이지 않을까 싶기도 합니다.

마지막으로 자신의 분야에서 최고가 되어라.
요즘은 기술 위주의 사회다 보니 학력이나 인맥 보다는 실력을 중요시 하는 것 같습니다. 물론 학력과 인맥이 아예 없다고는 말할 수 없지만 그래도 과거처럼 학력이나 인맥만으로 성공하는 시대는 아니라고 생각합니다.
실력이 있으면서 학력과 인맥이 모두 존재한다면 아무래도 실력만 갖춘 분들 보다는 조금더 경쟁력이 있다고 봅니다. 상황에 따라서는 매우 유리한 배경이 될 것이구요. 아무튼 실력이 된다면 자연스럽게 (스스로 원해서 얻어진)학력과 인맥이 자연스럽게 형성된다고 봅니다. 그러나 반대로 학력과 인맥만 있다면 큰 성장을 기대하기는 어렵겠지요. 학력과 인맥을 통한 추천자 입장에서도 개인적 프라이드 때문에 소개해도 무리가 없을 정도의 개인 실력을 많이 참고하니깐 말입니다.

아직 프로도 아니고 가야할 길도 먼 새파란 젊은이가 다루기엔 부담감 백만배인 주제지만 그래도 진정한 프로가 되기 위해 늘 고민해 보며 끄적여 봤습니다. 내가 가진 전공에서 기술적 실력만이 아닌 한 인간으로서도 프로가 되어보고 싶기도 합니다. 비오는 밤... 잠이 오지 않아서 이런 저런 생각을 하다가 몇 자 끄적여 보았습니다.

아마 아침에는 막 쓴글이 창피해서 대대적으로 수정하지 않을까 싶기도 합니다.^^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

1. 사용자 경험(User Experience)이란?
 - 사용자가 어떤 시스템이나 제품, 서비스 등을 직간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험
 - 하드웨어, 소프트웨어가 아닌 피플웨어적 접근에서 고민해야 한다.
 - 산업디자인, 소프트웨어 공학, 마케팅, 경영학의 중요한 과제
 - 감성적, 이성적으로 사람에게 만족감을 주지 못하는 경우를 조심해야 한다.
 - 최근의 제품 개발에서 디자인이 매우 중요한 포인트를 차지하며, 디자인시 User Experience Design을 고려.
 - 제품 디자인, 상호작용 디자인, 사용자 인터페이스 디자인, 정보 아키텍처, 이용성 등의 분야에서 주로 연구.

2. 사용자 경험의 역사
- 에드워드(E.C.Edwards)와 카시크(D.J.Kasik)의 User Experience With the CYBER Graphics Terminal 에서 언급함.
- 1970년대와 80년대에 인간 중심 디자인(Human Centered Design, UCD)의 맥락에서 연구가 많이 이루어짐.
- 1993년 애플 컴퓨터의 도널드 노먼이 인간-컴퓨터 상호작용 연구에 큰 영향을 미침.
- 1998년 조셉 파인(B.Joseph Pie II)과 제임스 길모어(James Gilmore)가 하버드 비즈니스 저널에 Welcome to the Experience Economy라는 기사를 발표하고, 1999년에 저서를 출간함.
- 월트 디즈니의 경험의 가치에 주목

참고
1. 브렌다 로렐:디자인리서치(Design Research, Method and Perspectives), MIT Press(2004) ISBN 0-262-12263-4
2. 조셉파인, 제임스 길모어: 경험 경제로의 초대(Welcome to the Experience Economy)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

원글출처: http://silverlight.net/quickstarts/silverlight10/text.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

텍스트
(TEXT)

안녕하세요~ 세티 입니다. 이번 시간에는 실버라이트에서 지원하는 TextBlock 엘리먼트의 특징에 대해 살펴보겠습니다. TextBlock 엘리먼트는 실버라이트에 텍스트를 추가하는데 사용되는 엘리먼트 입니다

머 맨날 말로만 하는 것보다는 역시나 직접 만들어 보는게 훨씬 낫겠죠?
먼저 <canvas>의 하위에 자식 엘리먼트로 <TextBlock> 태그를 넣습니다. 그리고 시작 블럭과 끝 블럭 사이에 적절한 문자열을 집어 넣습니다. 저는 "SETI's Silverlight" 라는 글자를 넣도록 하겠습니다.

멋지게 렌더링된 결과를 볼 수 있습니다. 추가적인 설명을 하자면 앞서 언급한 Clip과 Opacity, 그리고 이번에 언급중인TextBlock 엘리먼트와 같은 UIElement 들은 속성값 설정을 통해 그 결과를 렌더링 하게 됩니다.
TextBlock 엘리먼트는 다음의 속성들을 포함합니다.

• FontSize - 픽셀 단위
• FontStyle - 이탤릭이나 노멀을 선택
• FontStretch - UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, Normal, Medium, SemiExpanded, Expanded, ExtraExpanded, 또는 UltraExpanded를 선택
• FontWeight - Extralight, Thin, light, normal, medium, senibold, bold, extrabold, black, extrablack을 선택
• FontFamily
• Foreground

이 속성을 TextBlock 엘리먼트에 사용하고, 그것을 렌더링 했을 때의 결과는 아래와 같습니다.

TextBox 엘리먼트에 Run 엘리먼트를 추가 사용함으로써 TextBlock에 다른 폰트 속성을 적용할 수 있습니다.

FontFamily는 첫번째에 설정된 폰트를 이용하지 못할 때 그 다음 폰트를 이용하고자 할 때 사용되며, "Portable User Interface" 라는 속성값은 디바이스의 특성과 관계없이 모든 기계에서 항상 이용이 가능합니다. 아래는 FontFamily에 대한 코드와 렌더링 결과 입니다.

이상으로 TextBlock과 그 속성들에 대해 살펴 보았습니다.  다음 시간에는 실버라이트를 이용한 Media 엘리먼트에 대해 살펴보도록 하겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

원글출처: http://silverlight.net/quickstarts/silverlight10/image.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

앞에서 우리는 실버라이트에서 사용 가능한 여러가지 엘리먼트들을 살펴 보았습니다. 기억해 두셔야 할 점은 앞 강좌에서 다룬 실버라이트 엘리먼트가 전부는 아니라는 점 입니다.
매우 기초적인 내용을 다루었고, 그러하기 때문에 알아야 할 것들이 그 만큼 많음을 기억해주셨으면 합니다.

자아~ 아무튼 부지런히 공부해 봅시다.^^
이번 강좌에서는 Image와 관련된 엘리먼트와 기능에 대해 간단하게 배워볼까 합니다. 실버라이트에서 Image 엘리먼트는 비트맵 이미지를 보여주는데 사용됩니다. 다시 말해 Image 엘리먼트는 실버라이트에서 JPG 그리고 PNG 이미지를 보여주기 위한 방법을 제공하며, 이미지를 보여 주기 위해서 Image 엘리먼트에 간단하게 Source 속성을 설정하기만 하면 됩니다.

이미지를 다른 크기로 보여주길 원할 때 Stretch 속성에 적절한 값을 설정하면 되는데 그 값은 None, Fill, Uniform, UniformToFill 입니다. 아래의 코드를 통해 각각 어떤 모양으로 렌더링 되는지 확인해보면 명확히 알 수 있습니다.

                                            (이미지 출처 : http://www.silverlight.net)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

원글출처: http://silverlight.net/quickstarts/silverlight10/visual.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

모든 실버라이트에서 사용되는 Canvas, shapes, MediaElement, TextBox와 같은 UIElement 객체들은 속성을 사용합니다. 아래의 객체는 모든 그래픽에서 사용되는 공통 속성 입니다.

• the Opacity property
• the OpacityMask property
• the Clip property
• the RenderTransform property

이 객체들에 대해서 하나씩 알아보도록 하겠습니다.

먼저 Opacity 속성 입니다.
Opacity 속성은 UIElement의 알파값 이나 슬라이드 값을 조정하여 활성화 시켜줍니다. Opacity 속성값에는 0에서 1사이의 값을 설정하게 되며 0을 설정하게 되면 완전 투명하게 됩니다. 기본적으로 Opacity 값은 1.0을 설정하고 있습니다. 아래의 코드는 Opacity 설정에 대한 예제 코드이며, 렌더링된 결과 입니다.

OpacityMask 속성값은 UIElement의 어떤 특정 부분에 대한 알파값을 조정합니다. 예를 들어서 OpacityMask 값을 사용하면 오른쪽에서 왼쪽으로 진행되면서 점차 희미해지는 객체를 만들 수 있습니다. 객체에서 OpacityMask를 사용하게 된다면 LinearGradientBrush, RadialGradientBrush, ImageBrush를 대부분 사용할 수 있습니다.
아래의 코드와 렌더링 결과물은 OpacityMask를 사용했을 때 어떻게 그려지는 지에 관한 것입니다.

다음으로 Clip 속성을 살펴 보겠습니다.
Clip 속성은 엘리먼트에 의해 그려진 어떤 한 부분을 선택할 때 사용됩니다.Clip 속성을 사용하기 위해서는 Geometry 객체를 사용해야 합니다. Geometry는 선택된 나머지 영역을 hidden 처리 하게 됩니다. 아래의 코드는 RectangleGeometry를 사용하여 Ellipse 엘리먼트를 Clip한 것입니다.

마지막으로 RenderTransform 속성은 Transform 객체를 사용하며,  엘리먼트를 다양한 각도로 움직이고 조정합니다. 이런 것을 가능하게 하는 Transform은 RotateTransform, SkewTransform, ScaleTransform, TranslateTransform 등이 있습니다. 아래의 코드는 여러가지 Transform을 렌더링 하는 예제 입니다.

이상으로 공통 그래픽 속성에 대해 간략하게 살펴봤습니다. 역시 코드를 눈으로 보는 것 보다는 직접 단 한번이라도 코딩을 해보시고 그 결과를 확인하는 것이 무엇이든 가장 빠르고 쉽게 익히는 비결인 것 같습니다.
귀찮더라도 꼭 한번 코딩을 해보십시오.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

원글출처: http://silverlight.net/quickstarts/silverlight10/drawing.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.



이전 강좌에서는 Canvas 객체를 이용한 표현에 대해 살펴보았습니다. 이번 강좌에서는 모양을 나타내기 위해 필요한 객체와 요소들을 알아보도록 하겠습니다.
먼저 실버라이트는 원, 직사각형, 라인, 선분을 이어 만든 도형, 다각형, 그리고 경로 엘리먼트들이 모두 기본적으로 Vector 그래픽 으로 제공됩니다. 이 엘리먼트들은 shape 엘리먼트로 잘 알려져 있습니다.

먼저 가장 기본적인 shapes에 대해 살펴보겠습니다.
실버라이트가 제공하는 가장 기본적인 shape는 원, 직사각형, 그리고 선 입니다.
타원(Ellipse) 엘리먼트는 달걀 모양의 타원이나 정확한 원을 기술하는데 필요한 엘리먼트 입니다.
가로, 세로 높이를 설정하기 위해 Width와 Height를 설정합니다.
직사각형 엘리먼트는 정사각형이나 직사각형을 기술하는데 필요한 엘리먼트 입니다. 이것 또한 가로, 세로 높이를 설정하기 위해서는 Width와 Height를 설정하며, RadiusX, RadiusY 값을 이용하여 사각형 모서리의 휘어짐을 결정합니다.
Line 객체의 경우 높이, 넓이를 나타내는 Width, Height 대신에 X1, Y1, X2, Y2를 사용합니다.

다음의 코드는 Canvas 객체에 Ellipse, Rectangle, Line 객체를 이용해서 그린 것 입니다.

추가적으로 Ellipse, Line 그리고 Rectangle 엘리먼트들에 대해 실버라이트는 3개의 다른 shape 엘리먼트를 제공합니다. 그것은 Polygon, Polyline, Path 입니다.
보통 우리가 도형을 그릴 때 점(포인트)를 찍고 그 점을 하나의 선으로 연결해서 그림을 그리게 됩니다. Polyline 객체는 여러 개의 점(포인트)를 선으로 연결하여 모양을 만들어 내며, 닫혀진 형태가 아닌 열린 형태의 모양을 만들게 됩니다. 그러나 이것과는 다르게 Polygon 객체는 닫힌 모양을 만들어 내게 됩니다.

다음의 코드를 이용하여 어떤 결과가 렌더링 되는지 직접 실습해 보도록 하겠습니다.

먼저 코드를 보면 Polyline과 Polygon 객체의 경우 그것이 각각 가지는 포인트의 숫자는 모두 동일합니다.
그러나 생성된 그림의 결과를 놓고 본다면 polygon은 자동으로 닫힌 모양으로 만들어내고, Polyline은 열린 모양으로 만들어진다는 것을 확인할 수 있습니다.

마지막으로 Path 엘리먼트는 커브나 호를 포함하는 복합적인 모양을 표현할 때 사용할 수 있습니다. 이러한 표현을 위해 특별한 애트리뷰트 문법을 사용해야 하는데 그것은 Data 라고 불리는 속성값으로 할 수 있습니다.
아래의 코드는 복합적인 모양 표현을 위해 Data 애트리뷰트를 사용한 예 입니다.

 보통 이런 복합적 모양의 그림을 마크업으로 그리기 위해서는 Path Markup 문법을 알아야 하는데 이것은 매우 번거롭고 귀찮은 작업이므로 개발툴을 이용하여 직접 작업하는 것이 좋습니다.
만일 Path Markup 문법에 대해 자세히 알고 싶다면 다음의 링크에서 보다 상세한 정보를 얻을 수 있을 것 입니다.

주소참고 : Path Markup Syntax 에 대해 공부하기

실버라이트에서 모양을 만들 때 대부분 이 모양을 만들어 내는 엘리먼트들은 2개의 Part를 가지는데 하나는 stroke이고 또 다른 하나는 Fill 속성 입니다. 아래의 그림은 사각형이 가지는 Stroke와 Fill 속성을 표시한 그림입니다.

하지만 모든 모양이 하나의 Fill과 하나의 Stroke를 가지는 것은 아닙니다. Line의 경우 하나의 stroke만 가지며, Fill 속성을 설정한다고 해서 Line에 어떤 효과를 주는 것은 아닙니다.

모양을 그릴 때 Stroke와 Fill 속성과 더불어 Brush 효과를 추가로 설정할 수 있습니다. Brush 객체는 총 5가지의 타입을 가지고 있으며, 이것을 사용하여 원하는 것을 표현할 수 있습니다. 5가지 타입은 다음과 같습니다.

• SolidColorBrush
• LinearGradientBrush
• RadialGradienBrush
• ImageBrush
• VideoBrush

특정한 색상을 어떤 영역에 사용하기 위해선 SolidColorBrush를 사용합니다. XAML은 SolidColorBrush를 생성하기 위해 몇 가지 방법을 제공합니다.

"Black", "Gray"와 같은 직접적인 이름을 사용하는 방법
6진수 사용(#rrggbb or #0033FF)
8진수 사용(#aarrggbb or #990033FF)
또한 8 비트 컬러 표현을 위해 3~4 진수 표현법도 사용될 수 있겠지만 이것은 일반적으로 잘 사용되지는 않습니다.

실버라이트는 또한 선 또는 곡선 형태의 그라디에이션을 지원합니다. 보통 그라디에이션을 표현하기 위해서는 2개의 경사도만 필요한데, 이러한 경사도를 여러개 추가해서 더욱 다양한 그라디에이션 표현을 가능하게 합니다.
이러한 그라디에이션을 표현하는 타입은 LinearGradientBrush와 RadialGrandienBrush 입니다.
LinearGradientBrush 은 StartPoint와 EndPoint 속성을 사용하여 표현하게 됩니다.
반면에 RadialGradienBrush는 기본적으로 원의 중심에서 부터 그림을 그려나가기 시작합니다. GradientOrign, Center, RadiusX, RadiusY 속성을 이용하여 표현을 하게 됩니다.

마지막으로 ImageBrush를 이용하여 이미지를 그릴수도 있습니다. 기본적으로 이미지는 모양의 모든 전체 영역에 Fill이 적용되어 있습니다. 그러나 Stretch 속성을 이용하여 서로 다른 설정을 할 수 잇습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.