세티의 Lonely Star

제 개인적으로 매우 친했던 정말 믿고 의지되던 형님이 그저께 유명을 달리 하셨습니다.
그래서 매우 슬픈 날을 보내고 있는 세티 입니다.

사고 소식을 듣고 바로 울산으로 내려갔는데 도무지 실감이 나지 않더라구요.
서울에 일들로 인해 마지막 가는 길 배웅하지 못하고 올라왔는데 집에 오고 나니 슬픔이 끊임없이 밀려오네요.

대학시절 부터 함께 해왔던 인간적으로 매우 존경할만큼 착하고 성실한 분이었는데 매우 안타깝습니다.
오늘도 집에서 관련 소식을 검색하며, 어떤 이유로 사고가 일어난 것인지 예의주시하는 중인데...
간혹 일부 댓글이 마음을 편치않게 하곤 합니다.

부모님께 효도심 지극한 아들이었고, 친구와 동생들에게 매우 정이 많은 분이었으며, 결혼한지도 불과 5개월 밖에 되지 않는 분이셨는데... 8월말 서울에 출장오면 제게 꼭 연락한다고 다짐하셨었는데...

이렇게 허망하게 그 분을 보내게 되서 너무 마음이 아픕니다.

이젠 보고 싶어도 그리고 불러도 대답없는 아주 먼 길을 떠나버렸습니다.
가시는 길이라도 편하게 가시라고 기도해야 겠습니다.


처참한 울산정밀화학센터 폭발사고 현장

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

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

원글출처 : http://silverlight.net/Quickstarts/Start/18660837-4a10-462b-bf6e-723b36748ec3.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.


안녕하세요. 엘리 입니다.^^

올 해 여름도 태풍이 조용히 지나가질 않는군요.

가족들, 주위 분들 태풍 피해가 없는지 걱정입니다. 피해 없이 모든 분들이 즐거운 여름 되시길 진심으로 바랍니다.

이 번 시간은 VisualStudio에 있는 Silverlight 디자이너 미리보기 창에 대한 설명입니다.

XAML 파일을 편집하면 바로 미리보기 창에서 수정한 부분이 적용이 되어 나타나게 됩니다.

이는 파일을 저장하지 않아도 솔루션을 빌드하지 않아도 적용됩니다. (단, 코드 오류 시 적용되지 않습니다.)

위 코드는 Silverlight 응용 프로그램 만들기 시간에 만든 Page.xaml 파일입니다.
저와 같은 이름으로 솔루션을 만드셨다면 Visual Studio 2008을 실행한 후 EloiSilverlightApp 솔루션 내 Page.xaml 파일을 열어 보시기 바랍니다.

그 후 위 코드에서 빨간 상자로 하이라이트 된 부분을 각각 Width는 100으로 Height는 50으로 Background는 RoyalBlue로 변경해보도록 하겠습니다.

미리보기 창을 보면 위와 같이 크기와 색이 변경된 것을 확인하실 수 있습니다.
참고로 처음 코드는 Width는 400, Height는 300, Background는 White였습니다. ^.^

그럼 좀 더 자세히 Silverlight 미리보기 창 기능에 대해서 알아보겠습니다.

Silverlight 미리보기 창
Visual Studio 2008 용 Silverlight Tools 베타 2는 Silverlight 2 베타 2 응용 프로그램 생성을 위한 도구입니다. Visual Studio 2008의 Silverlight 미리보기 창은 WPF 디자이너 기능 일부를 가지고 있습니다.

 

지원 기능

다음은 Silverlight 2 베타 2 프로젝트의 Silverlight 미리보기 창에서 지원되는 기능들입니다.

 

1. 모든 XAML 편집 기능: 인텔리센스와 XAML 포맷팅 기능은 WPF 형식 대신 Silverlight 2 베타 2 형식이 표시된다는 것을 제외하고 WPF 디자이너의 XAML 편집 기능과 같습니다.

2. 읽기 전용 위지윅 (WYSIWYG) 미리보기 기능: 실행 전 미리보기 작업이 가능하고 확대, 축소가 가능합니다.

3. 분리된 미리보기 창과 XAML 코드 창

4. Silverlight 2 베타 2 컨트롤과 해당 아이콘들 도구 상자에 표시:  Silverlight 2 베타 2 컨트롤들은 도구 상자 탭에 마우스 오버 시 플라이 아웃 되어 알파벳 순으로 표시됩니다.

5. 도구 상자 컨트롤 XAML 코드 창으로 드래그 앤 드롭 기능: 컨트롤 추가 시 참조와 XML 네임스페이스가 자동으로 추가됩니다.

6. XAML 코드 편집 시 문서 개요 창과 태그 검색 기능: 문서 개요 창(CTRL+ALT+T)은 XAML 코드의 구조를 보여주고 검색 기능(CTRL+F)은 코드 내 문자를 검색합니다.

(메뉴 바 보기 - 문서 개요를 클릭하셔도 됩니다.)

7. .cs 또는 .vb 코드와 xaml 코드 상호 연동 기능

8. XAML 코드 창과 다른 WPF 사이 자동 업데이트 기능

9. 디자이너 컴포넌트 지원 기능

10. 에러 목록 창에 에러 표시 기능: XAML 코드가 에러가 있으면 올바른 코드 입력 전까지 마지막으로 나타난 화면이 표시되고 알림 메시지가 표시됩니다.

알림 메시지 내용:
(디자이너를 업데이트하려면 우선 문서에 있는 오류를 수정해야 합니다. 오류 목록을 열려면 여기를 클릭하십시오.)

11. 미리보기 창 위치 조정 기능: XAML 코드 창을 기준하여 가로 분할 (기본 설정), 세로 분할이 가능하며 창을 축소할 수도 있습니다.

차례대로 세로 분할, 가로 분할 (기본 설정), 창 축소 아이콘

미 지원 기능
다음은 Silverlight 2 베타 2 프로젝트에서 Silverlight 디자이너 미리보기 창에서 지원되지 않는 기능들입니다.

 

1. 미리보기 창에서 편집 불가: 도구 상자에서 컨트롤의 선택 및 이동, 항목 추가 기능은 지원되지 않습니다.

2. 속성 창 미 지원: 속성을 편집할 수 없습니다.

3. 전역화 (국제화) 기능 미 지원: 전역화 (globalization)에 대해서 자세히 알고 싶으시면 아래 링크를 참고하시기 바랍니다.
http://msdn.microsoft.com/ko-kr/library/ms227427(VS.80).aspx 

4. 리소스 동적 새로 고침 기능 미 지원: 리소스가 변경되면 재 빌드 전까지 XAML 코드는 새로 고침 되지 않습니다.


참고 사항
    Silverlight 개발 시작하기

이 번 시간은 여기 까지입니다.
7월도 끝나가네요. 비 피해 없이 여름 건강하게 보내시기 바랍니다.
음식 조심하시고 맛 있는 음식 많이 드시구요. ^________^

다음 시간에는 개체 브라우저 어셈블리 탐색에 대해서 알아보겠습니다.

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

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

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

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

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


이번 강좌에서 우리는 play, pause, stop 과 같은 미디어 플레이어에 필요한 버튼을 만들어 보겠습니다.

앞의 강좌에서 사용했던 버튼을 이용해서 우리는 마우스오버나 클릭과 같은 행위에 응답하는 버튼을 생성할 것 입니다. 이전에 만들어 두었던 버튼을 이용하고자 한다면 Make Control...을 이용해서 간단하게 선택할 수 있습니다.

저는 새롭게 만들어 보겠습니다.^^
먼저 사용자 컨트롤을 하나 생성합니다.
그리고 Rectangle객체를 선택하고, 그려 넣습니다.

Rectangle 객체의 모서리를 마우스로 잡고 그림처럼 화살표 방향으로 이동합니다.
그러면 모서리가 둥글게 처리 됩니다.

이제 버튼 모양이 만들어 졌습니다.

버튼에 보기 좋게 배경색을 넣겠습니다. 앞의 강좌에서도 설명했지만 그레데이션을 선택하고, 팔레트에서 두 개의 포인트를 이용하여 색상을 선택합니다.


그러면 위의 그림과 같은 버튼이 만들어지게 됩니다.
이렇게 만들어진 객체를 복사해서 새로운 버튼으로 만들겠습니다.

먼저 제일 상단 메뉴에 보면 Tool 이라는 것이 보일 것 입니다. 그곳에서 Make Control... 을 선택합니다.
그러면 다이얼로그 상자가 열리면서 컨트롤의 이름을 넣으라고 합니다.
저는 그곳에 btn_play 라는 이름을 넣었습니다.
이름을 넣고 OK를 클릭하면 솔루션 탐색기에 btn_play.xaml 파일이 생성된 것을 확인할 수 있습니다.

이제 플레이 모양을 넣기 위해 Pen 을 선택합니다.
Pen을 선택하고 그림을 그릴려고 했더니.. 오우~ 제가 Artboard를 400%로 해놓고 작업을 했었네요.^^;
100%로 축소 했더니 버튼이 콩알만 합니다. 그래서 이것을 확대할 필요가 생겼습니다.

그래서 확대 했습니다. 확대하고 나니깐 아까 모서리 둥글게 처리한게 거의 보이지 않네요.^^;
그래서 다시 모서리를 둥글게 처리 했습니다. 그랬더니 버튼 아래로 하얀 그리드가 보이네요.
그래서 아래의 그림처럼 화살표 방향으로 하얀 그리드를 마우스로 드래그 했습니다.
그랬더니 버튼까지 같이 늘어나네요. 이런 낭패가...ㅎㅎ


다시 버튼 객체를 선택하고 하얀 그리드 안에 알맞게 맞춰 넣습니다.

위에서 선택한 Pen 을 이용하여 3개 의 점을 찍었더니 삼각형이 그려졌습니다.
그런데 삼각형이 똑바르게 그려지지 않았네요.^^;
그래서 이것을 보정하고자 합니다.

Pen을 이용해서 그림을 그릴 경우 직선이나 포인트가 원하는 위치에 제대로 찍히지 않아서 원하는 모양이 나오지 않을 경우에는 아래 그림처럼 Direct Selectcion 메뉴를 이용해서 그것을 보정할 수 있습니다.
아래의 그림은 Direct Selection을 이용해서 삼각형 모양을 변형시켜 본 예 입니다.
여러분도 아래의 그림처럼 포인트를 잡고 노란 화살표 방향으로 포인트를 이동시켜 보시기 바랍니다. ^^

버튼이 너무 작아서 똑바로 그릴려고 해도 잘 되었는지 확인하기 힘드네요~
그래서 Artboard 를 400%로 확대했습니다. 우와~ 댑따 잘보이는군요.ㅋ


삼각형을 잘 그렸으나 Rectangle 객체 위에 올바르게 놓여진 것 같지는 않습니다.
그래서 Expression Blend 2.5의 왼쪽에 있는 Toolbox에서 Selection을 선택하고, Rectangle객체를 선택해서 원하는 곳으로 약간 자리 이동했습니다.
자아. 이렇게 해서 play 버튼을 만들어 보았습니다.
미디어 플레이어에는 단지 play 버튼만 존재하는 것이 아니므로 다른 버튼도 만들어 보겠습니다.
기존에 이미 만들어 놓은 버튼이 있으므로 역시 복사해서 사용하도록 하겠습니다.

앞에서는 그냥 생성해서 사용했으므로 컨트롤을 복사하는 방법에 대해 조금 자세하게 설명해 보겠습니다.
먼저 왼쪽의 Object and TimeLines에서 LayoutRoot 를 선택하고 상단메뉴에서 Tool을 선택하고 Make Control...을 선택합니다.

그러면 아래의 그림처럼 다이얼로그 상자가 열립니다. 가운데 Name 부분에 버튼 컨트롤의 이름을 입력합니다.
저는 아래의 그림처럼 이름을 btn_pause로 정했습니다.

그리고 다시 Rectangle 객체를 이용해서 일시정지 마크를 만들어서 넣었습니다.
이후 작업은 위에 설명한 것과 동일합니다.


아래의 정지 버튼도 위와 동일한 방법으로 생성합니다.
그럼 이제 원하는 버튼이 모두 생성되었겠죠? ^^


다음 시간에는 위에서 생성한 버튼을 이용하여 아주 간단한 미디어 플레이어를 만들어 보겠습니다.

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

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

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

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

최초 작성자 : 세티
최초 작성일 : 2004년 12월 24일
최종 작성자 : 세티
최종 작성일 : 2008년 07월 22일

2004년 12월 24일에 닷넷2.0을 처음 시작하면서 적은 글 입니다. 시간이 많이 흘러 내용을 약간 수정했습니다.
닷넷을 처음 시작하시는 분들에게 힘내시라는 의미에서 소개해 봅니다.~

1999년 12월, 난 그 때까지도 그 녀석에 대해 아는게 없었습니다. 대학을 졸업하고 처음으로 IT학원에서 만난 그 녀석은 상당히 어렵고 난해한 모습으로 나에게 다가왔습니다. 그 곳에서 나는 그 녀석을 이겨보겠노라 마음을 먹었고 녀석에게 덤볐습니다. 녀석과의 싸움에서 이기기 위해 수 많은 밤을 지새우고 수 많은 시간을 녀석과 함께 하다보니 어느새 많이 친해질 수 있었습니다. 그러나 녀석과 많은 시간을 보낼수록 그 녀석은 내게 늘 새로운 모습을 보여주었습니다.

학원 수강생 시절의 녀석은 그리 만만한 상대가 아니었습니다. 난 그 곳을 수료하게 되면서 그 녀석과 함께 사회에 첫 발을 디뎠습니다. 녀석의 이름은 ASP(Active Server Page 2.0) 이었습니다.

회사에서 많은 사이트와 웹 애플리케이션을 만들며 ASP와 함께 미지의 세계를 향해 나아가기 시작했습니다. ASP는 나와 함께 하면서 손에 잡힐 듯하면 달아나고 달아났다 싶어 힘들어 하면 어느새 내 곁에 와있는 것 이었다. 그것은 뫼비우스의 띠 처럼 언제나 끝이 없는 쫒고 쫒기는 그런 지루한 싸움이었던 것 같습니다. 그 녀석과 함께 지내는 시간이 많아졌을 때 그리고 그 녀석에 대해 이젠 나름 안다고 자부하게 되었을 때 난 녀석의 친구들을 만나게 되었습니다. 친구들 또한 녀석과 마찬가지로 나에게 많은 부담을 안겨주었습니다. 나의 기억에 의하면 녀석은 언제나 골치덩어리 였고, 녀석을 어려워 하는 만큼 나는 그 녀석과 함께 하는데 많은 시행착오를 거칠수 밖에 없었습니다. 한 때 별명이 에러맨(Error Man) 이었죠...^^; 녀석의 심술(Error)은 나를 힘들게 했지만 동시에 나는 그 만큼 강해질 수 있었습니다. 녀석과 동고동락 해온지 4년... 지금은 너무나 친한 사이가 되어 서로에 대해서 너무나 잘 알게 되었다. 그런 녀석이 얼마전 닷넷이라는 이름으로 새롭게 태어났습니다.

가상의 공간에서 나만의 창조물을 바라 볼 때면 그것이 하찮은 것이든 다른 이들이 부러워 할 만한 것의 것이든 가슴 한 구석에서 밀려오는 그 아련한 감동은 늦은 밤 도서관에서 나오는 상쾌함과 다를 바가 없었던 것 같습니다. 녀석은 나에게 얼마 전 처음으로 말을 걸었습니다. '지금 보다 나은 그리고 변화된 미래의 자신에 대해 느껴보지 않을래?' 라고...

언제나 그렇듯 무작정 서점으로 달려가 녀석에 대한 책을 한 권 샀습니다.
ASP.NET 1.0 그리고 VS.NET 을 준비했습니다. 녀석의 신상에 대해 간단하게 파악한 다음...

난 그 녀석을 만나러 갔습니다. 적을 알고 나를 알면 백전백승이라 하지만 난 그 녀석을 알기 위해 사전 준비 시간을 많이 투자할 수 없었습니다. 무조건 부딛혀 보자. 녀석으로 요즘 유행하는 블로그를 만들어 보겠노라고 마음을 먹은 6개월 후...

힘들기도 했고 보람을 느끼기도 한 그런 시간 있었습니다. 그것은 하나의 작은 수행과도 같았습니다. 녀석은 나를 힘들게 하면서 보람도 주고 그렇게 나를 조금씩 강하게 만들어 주었습니다. 그 녀석이 나를 힘들게 할수록 난 처음보다 더 빠른 속도로 녀석에 대해 알아갈수 있었습니다. 그리고 이제 녀석에 대해 어렴풋이 나마 알게 된 지금 난 나의 블로그에 녀석에 대해 쓸려고 합니다.

물론 녀석에 대해 아직 알아야 될 게 많지만 만남의 그 순간을 이 블로그에 남겨 첫 만남의 아련함을 기억하려고 합니다. 이 강좌의 이름은 [세티의 닷넷강좌]가 될 것입니다. 세상에 태어나 처음으로 쓰는 강좌인 셈이지요.
또한 닷넷을 접한지 얼마 되지 않았으므로 초보자를 대상으로 이해하기 쉽도록 그 내용을 적어나갈 것입니다.

이 글을 보는 사람이 닷넷 중급자라면 굳이 이 강좌를 보지 않아도 될 것입니다.^^;

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

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

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

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

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

안녕하세요~ 세티 입니다.
오늘은 Blend2.5를 이용해서 실버라이트로 버튼을 360도 회전 시키면서 크기를 작게 만드는 애니메이션 효과를 만들어 보겠습니다.

이러한 애니메이션 효과를 만들기 위해선 Blend에 있는 타임라인(timelines)을 사용해야 합니다. 타임라인은 두 개 또는 그 이상의 키프레임을 열거한 것을 말하고, 키프레임이란 객체의 스냅샷을 말합니다. 그럼 어떤 순간의 스냅샷을 까요? 우리는 객체의 속성에 어떤 값을 할당함으로써 그 객체의 성격을 결정할 수 있습니다.

타임라인이란

가령 예를 들어서 색상을 변경한다던가 회전 또는 크기 조절 나타나기도 하고 사라지기도 하는 부분들을 말하는 겁니다. 나타났다가 사라지는 객체를 만들기 위해서는 두 개의 키프레임(객체의 스냅샷)이 필요하겠죠.

하나의 키프레임에서는 객체의 모습이 보일 것이고 다른 하나의 키프레임에서는 객체가 사라지게 될 것입니다. 이것을 시간을 두고 배치를 하게되는데 그 때 우리는 타임라인에 키프레임을 배치한다라고 표현할 수 있는 겁니다. 그럼 타임라인에 배치된 키프레임의 시간 간격에 따라 그 객체의 성격이 자동으로 변경되겠죠.

대충 무슨 소린지 이해는 하시겠죠? 보다 확실히 이해하기 위해 간단한 예제를 통해서 위에 언급한 내용에 접근해 보겠습니다. 그것에 대한 적절한 예제 애니메이션으로는 버튼을 360도 회전시키면서 작아지고 배경색이 파란색인 버튼을 자주색으로 변경되는 애니메이션을 만들어 보겠습니다.

먼저 Blend 2.5를 이용해서 버튼 객체를 생성합니다.(이전 강좌에서 작성한 예제를 이용하셔도 됩니다.)


다음으로 타임라인 판넬을 열기 위해서 Object and Timeline Inspector를 클릭하는데 아래의 그림을 참조합니다.


적절한 타임라인 이름을 입력하고 OK를 클릭하면 아래의 그림처럼 화면이 변경된 것을 확인하게 될 겁니다. 빨간 글씨로 Timeline recording is on 이라는 부분을 볼 수 있을텐데요, 말 그대로 타임라인에 키프레임을 넣으면 되고, 알아서 그걸 잘 녹화뜨고 있다.~ 라는 의미로 받아들이면 될 겁니다.



자아~ 그럼 이제 타임라인에 키프레임을 배치해서 애니메이션을 만들어 보겠습니다.
먼저 키프레임에 넣을 객체를 만듭니다. 저는 모서리가 부드러운 파란색 그레데이션 처리가 된 버튼을 만들었습니다.



그리고 두 개의 키프레임을 준비할 것입니다. 하나는 원형 그래도 있는 객체의 스냅샷인 키프레임을 준비할 것이고요, 다른 하나는 360도 회전된 후 이미 작아져있는 그리고 배경도 자주색인 객체의 스냅샷인 키프레임을 준비할 것입니다.

키프레임을 넣기 위해선 객체의 스냅샷을 찍어야 하는데 어떻게 찍어야 할까요? 매우 간단합니다. 아래의 그림에 표시된 부분(recording keyframe)을 단지 클릭만 하면 됩니다.



가볍게 눌러보아요~ 그럼 노란색 라인에 하얀 점이 표시가 되죠? 이제 처음 시작되는 키프레임 설정이 끝난 겁니다. 그 다음으로는 두번째 키프레임을 만들어 보겠습니다.

키프레임 아래를 보면 타임라인을 확대하는 버튼이 있습니다. 타임라인은 1000%까지 확대가 가능하다고 합니다. 확대하기 위해서는 아래 이미지에 표시된 영역을 마우스로 클릭하고 적절한 숫자를 입력하면 됩니다.



이제 마우스로 노란선을 드래그 해서 0.25초 바로 앞 라인에 위치 시킵니다. 요렇게 말이죠.


이제 버튼 객체가 360도 회전할 수 있도록 애니메이션을 줍니다. 360도 회전 시키기 위해선 Transform 판넬에서 Rotate 탭을 클릭하면 됩니다.


그 다음 마지막으로 버튼의 모양을 줄이기 위해서 Scale을 조절합니다. x, y 모두 0.5 씩 입력하도록 합니다.
요렇게 말이죠.^^



그러면 모양이 요렇게 되겠죠???



그리고 타임라인에는 우리가 특별한 스냅샷을 찍는 행위를 하지 않았음에도 자동으로 키프레임이 들어가 있는 것을 볼 수 있을 겁니다. 어떻게 들어갔냐구요?? 위에 빨간 글씨로 기록중!! 이라고 써있잖아요~ ^^



자아~ 이제 만든 것을 한번 돌려볼까요??
매우 간단한 합니다. 아래 그림에 표시된 ▶를 가볍게 눌러주면 됩니다.


멋지게 회전하나요? ^^

이제 만들어진 결과물을 웹 브라우저에 출력해서 확인을 해봐야겠습니다.
타임라인이 만들어내는 애니메이션을 마우스 클릭할 때 시작될 수 있도록 CS 파일에 코딩을 해보겠습니다.
그러기 위해선 먼저 XAML코드를 건드려야 하는데요~ Grid 엘리먼트에 MouseLeftButtonDown="ButtonMouseClick" 속성과 속성값을 코딩합니다. 요렇게 말이죠.



그 다음 CS 파일에 메서드를 추가해 줍니다.


이제 모든 준비가 끝났습니다. F5 키를 눌러서 빌드하고 렌더링 된 결과를 확인해 보십시오.
이상으로 애니메이션에 대한 설명을 마치도록 하겠습니다.

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

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

원글출처:http://silverlight.net/Quickstarts/Start/65f7a50a-9858-4425-8b6f-1993e5ab0236.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

안녕하셨어요?
휴가 계획은 잡으셨는지 궁금합니다. 저는 회사에서 휴가 계획을 제출하라고 해서 일단 7월 말로 제출하긴 했는데, 언제 갈 지는 모르겠네요. ^.^

 요즘 저는 ‘다보스 리포트 – 힘의 이동’ 이라는 책을 읽고 있습니다. 이 책은 2007년 다보스 포럼 (정식 명칭: 세계 경제 포럼)에서 나온 안건들을 소개한 내용입니다. 다보스 포럼은 매년 스위스 다보스에서 2,000명이 넘는 경제인과 정치인, 미디어, 학자, 등이 참석하여 세계 경제의 주요 관심사를 논의하는 모임입니다.

 이 책에서 관심 있는 분야 중에 하나는 웹 2.0에 대해서 준비하고 분석하고 있다는 것입니다. 웹 2.0과 함께 거론되는 RIA (Rich Interactive Application) 그리고 RIA와 함께 거론되는 Silverlight…^.^ 세계 글로벌 리더들도 미래의 세상을 예견하면서 웹 2.0에 대해서 논의했듯이 우리도 열심히 공부하자는 의미에서 몇 자 적었습니다. (아흐~썰렁한 결말 -ㅅ-)

그럼 오늘은 두 번 째 시간으로 실제 Silverlight 개발에 들어가보도록 하겠습니다.

Silverlight 응용 프로그램 만들기

Visual Studio 2008로 Silverlight 2 기반 응용 프로그램을 개발하기 위해선 Visual Studio 2008용 Silverlight Tools 베타 2를 설치해야 합니다. 이 도구에는 C#과 Visual Basic용 Silverlight 프로젝트 템플릿을 포함하고 있습니다. Visual Studio 프로젝트 템플릿을 사용하여 Silverlight 응용 프로그램 솔루션을 만드는 방법과 솔루션 생성시 기본 설정과 기본적으로 생성되는 파일에 대해서 함께 알아보도록 하겠습니다.

다음은 개발 전 설치해야하는 도구들입니다. 각각 링크된 페이지로 가셔서 다운로드 후 설치하시기 바랍니다.
- Silverlight 2 베타 2
- Visual Studio 2008 (90일 평가판)
- Visual Studio 2008용 Silverlight Tools 베타 2


Visual Studio를 사용한 Silverlight 기반 응용 프로그램 솔루션 만들기
아래 제시한 단계를 따라 Silverlight 응용 프로그램 프로젝트 템플릿을 사용하여 Silverlight 기반 응용 프로그램 솔루션을 만들어 보겠습니다.

1. 아래의 그림처럼 매뉴에서 Visual Studio 2008을 시작합니다.

2. 파일 – 새 프로젝트를 차례로 클릭합니다. .

그러면 아래 그림과 같이 새 프로젝트 대화 상자가 열립니다

3. 새 프로젝트 대화 상자에서 Visual C#이나 Visual Basic을 확장하고 Silverlight 프로젝트를 선택합니다.

4. 템플릿 목록에서 Silverlight 응용 프로그램을 선택합니다.

5. 이름 텍스트 박스에 응용 프로그램 이름을 입력합니다. 저는 EloiSilverlightApp로 입력하였습니다. 여러분들이 원하시는 것으로 입력하시기 바랍니다. ^.^

6. 확인을 클릭하면 Silverlight 응용 프로그램 추가 대화 상자가 열립니다.

7. Silverlight 응용 프로그램 호스팅 방법을 선택합니다.
- 솔루션에 Silverlight 응용 프로그램과 ASP.NET 웹 사이트를 구분해서 구성하고자 한다면 솔루션에 컨트롤을 호스팅할 새 웹 추가를 선택하고 프로젝트 형식과 이름을 추가로 입력합니다.
- 프로젝트에 Silverlight 기반 응용 프로그램을 호스팅할 단일 HTML 페이지를 구성하고자 한다면 이 프로젝트 안에 Silverlight를 호스팅할 HTML 테스트 페이지를 동적으로 생성을 선택합니다.

8. 확인을 클릭하고 솔루션을 생성합니다.

Visual Studio 프로젝트 템플릿의 Silverlight 응용 프로그램으로 만들어진 솔루션에는 다음 사항들이 포함됩니다.
- 하나의 Silverlight 기반 응용 프로그램 프로젝트
- 하나의 웹 사이트 (Silverlight 응용 프로그램 추가 대화 상자에서 솔루션에 컨트롤을 호스팅할 새 웹 추가를 선택했을 시)

Silverlight 기반 응용 프로그램 프로젝트 항목

Silverlight 기반 응용 프로그램 프로젝트는 설정 (configuration)과 어셈블리 참조 (assembly references), 그리고 응용 프로그램을 빌드하고 실행할 수 있는 최소한의 코드 파일들이 포함되어 있습니다.

설정 (Configuration)
다음은 Silverlight 기반 응용 프로그램 프로젝트 생성시 설정되는 중요한 항목들입니다.
- 이 내용은 솔루션 탐색기에서 Silverlight 응용 프로그램 (프로젝트 이름)의 속성을 클릭하면 확인할 수 있습니다. 아래 그림을 참고하시기 바랍니다.
- 프로젝트 이름
- 프로젝트가 빌드될 때 생성되는 어셈블리 이름
- 생성된 어셈블리의 기본 네임 스페이스
- 프로젝트가 빌드될 때 생성되는 Silverlight 기반 응용 프로그램 패키지 (.xap)의 이름
- 어셈블리에 포함된 이름과 버전 메타데이터
- 이름과 버전 메타데이터는 AssemblyInfo.cs 또는 AssemblyInfo.vb에 저장됩니다.
- 응용 프로그램 패키지를 생성하는데 필요한 응용 프로그램 메니페스트 (수정 불가) 

어셈블리 참조 (Assembly References)
Silverlight 기반 응용 프로그램 프로젝트는 Silverlight 2와 관련된 필수적인 다음 어셈블리를 포함합니다.
- mscorlib.dll
- System.dll
- System.Windows.dll

또한 다음은 일반적 응용 프로그램 기능을 위해 포함된 어셈블리입니다.
- System.Core.dll
- System.Net.dll
- System.Windows.Browser.dll
- System.Xml.dll

참조하는 어셈블리는 솔루션 탐색기에서 프로젝트 – 참조에서 확인하실 수 있습니다.

코드 파일
Silverlight 응용 프로그램 프로젝트에는 아래 클래스들을 빌드하는 코드 파일들이 있습니다.

- Page: Page 클래스는 User Interface (UI)를 만들기 위해 생성됩니다. Page 클래스는 UserControl로부터 파생되고 XAML 마크업 파일 (Page.xml)과 코드 비하인드 파일 (C# 사용할 경우 Page.xaml.cs 또는 Visual Basic 사용할 경우 Page.xaml.vb)로 구성되어집니다. 

마크업 파일과 코드 비하인드 파일을 사용한 클래스 구현에 관해 좀 더 많은 정보는 아래링크를 참고 하시기 바랍니다.
코드 비하인드와 부분 클래스 (Silverlight 2)

- APP: 응용 프로그램 클래스로 생성된 App 클래스는 모든 Silverlight 기반 응용 프로그램에 메인 응용 프로그램 UI를 보여주기 위해 또한 응용 프로그램을 구동하기 위해 필요합니다. 다음으로 이 클래스는 응용 프로그램 패키지 (.xap)가 다운로드된 후에 즉시 Silverlight 플러그인에 의해 관리됩니다.  App 클래스는 시작 개체에서 응용 프로그램 구동을 핸들링합니다. 아래 프로젝트 - 속성 화면을 참고하시기 바랍니다.

App 클래스도 Page 클래스와 마찬가지로 XAML 마크업 파일 (App.xaml) 과 코드 비하인드 파일 (C# 사용할 경우 App.xaml.cs 또는 Visual Basic 사용할 경우 App.xaml.vb)로 구성됩니다.

응용 프로그램 클래스에 대해서 좀 더 자세한 정보는 Silverlight 응용 프로그램 어셈블리 개발을 참고하시기 바랍니다..

테스트 페이지
여러분이 Silverlight 응용 프로그램 추가 대화 상자에서 이 프로젝트 안에 Silverlight를 호스팅할 HTML 테스트 페이지를 동적으로 생성을 선택하셨다면 프로젝트에 HTML page (TestPage.html) 하나가 생성됩니다. 이 파일은 여러분의 Silverlight 기반 응용 프로그램에서 호스팅되고 <object> 태그를 사용하여 Silverlight 기반 응용 프로그램을 다운로드하고 실행하는 Silverlight 플러그인을 관리합니다. Visual Studio에서 여러분의 응용 프로그램을 실행할 때 웹 브라우저에서 실행됩니다.

Silverlight 기반 응용 프로그램 웹 사이트 항목

Silverlight 응용 프로그램 추가 대화 상자에서 솔루션에 컨트롤을 호스팅할 새 웹 추가를 선택하셨다면 Silverlight 응용 프로그램 프로젝트 템플릿은 ASP.NET 기반 웹 사이트를 만들고 생성된 솔루션에 웹 사이트를 추가합니다. 웹 사이트에는 일반적 기본 ASP.NET 웹 응용 프로그램 프로젝트 파일들이 포함됩니다.
- 기본 웹 페이지인 마크업 페이지 (Default.aspx)와 코드 비하인드 (C#을 사용한다면 Default.aspx.cs 또는 Visual Basic을 사용한다면 Default.aspx.vb) 파일로 구성됩니다.
- 웹 사이트 설정 파일 (web.config)

ASP.NET 웹 응용 프로그램에 대해서 좀 더 자세한 정보는 ASP.NET 웹 응용 프로그램을 참고하시기 바랍니다.
또한 Silverlight 기반 응용 프로그램 호스팅을 위해 특히 웹 사이트는 .aspx 파일과 .html 파일을 포함합니다. 두 파일의 이름은 Silverlight 기반 응용 프로그램 프로젝트의 이름과 "TestPage" 텍스트로 연결되어 만들어집니다. 예를 들어, Silverlight 기반 응용 프로그램의 이름이 "EloiSilverlightApp" 라면 다음과 같은 이름을 가진 파일들이 생성됩니다.

- EloiSilverlightAppTestPage.aspx
- EloiSilverlightAppTestPage.html

.html 파일은 <object> 태그를 사용하여 Silverlight 플러그인을 설정하고 여러분의 Silverlight 기반 응용 프로그램을 실행하고 다운로드하게 합니다. .aspx 파일은 Silverlight ASP.NET 서버 컨트롤을 사용하여 .html 파일과 유사한 HTML을 생성합니다. Silverlight ASP.NET 서버 컨트롤에 대해서 좀 더 자세한 정보는 ASP.NET 웹 페이지와 Silverlight 통합을 참고하세요.

기본적으로 .aspx 파일은 시작 페이지로 설정되어 있으며 Silverlight 기반 응용 프로그램 프로젝트가 빌드될 때 응용 프로그램 패키지 파일 (.xap)은 웹 사이트로 복사되고 .aspx 페이지를 통해 실행하고 다운로드할 수 있습니다.

상단 메뉴를 이용한 화면이고 솔루션 탐색기에서도 솔루션 이름에 마우스 우측 버튼 메뉴를 이용하여 빌드할 수 있습니다.

사용자 컨트롤과 클래스 추가하기
사용자 컨트롤은 용어 그래도 사용자가 만드는 컨트롤입니다. 사용자 컨트롤을 만들면 .xaml 파일과 그 하위에 .cs 파일이 만들어지는데 .xaml 파일은 컨트롤 그 자체를 생성하는데 사용되고 .cs 파일은 .xaml 파일로 만들어진 컨트롤의 동적 액션을 주는데 사용됩니다.

또한 사용자 컨트롤은 하나의 dll로 만들어질 수도 있고, 독립 실행 컨트롤의 형태를 띄어야 하므로 .xaml 파일과 .cs 파일로 만들어집니다. .xaml 파일만으로는 컨트롤에 액션을 줄 수 없기 때문입니다.

기존 Silverlight 프로젝트에 사용자 컨트롤을 추가하기 위해 솔루션 탐색기의 프로젝트에서 마우스 우측 버튼 클릭하여 차례로 추가, 새 항목을 클릭하고 Silverlight 사용자 컨트롤을 선택합니다.

Silverlight 사용자 컨트롤 추가 그림

 생성된 사용자 컨트롤은 Page 클래스처럼 XAML 마크업 파일과 코드 비하인드 파일로 만들어집니다.

사용자 컨트롤 .xaml 파일과 .cs 파일을 사용하여 클래스를 구현하는 방법의 좀 더 자세한 정보는 코드 비하인드와 부분 클래스 (Silverlight 2)를 참고하시기 바랍니다. 일반적으로 메인 응용 프로그램 UI 구현을 위해 응용 프로그램에서는 메인 사용자 컨트롤인 Page를 사용합니다. Page 사용자 컨트롤은 추가적으로 사용자 컨트롤을 포함하여 여러 요소들로 구성되어집니다. 그리고 응용 프로그램 네비게이션 모델이 Page 사용자 컨트롤을 사용할 경우 자식 사용자 컨트롤의 메인 UI를 변경하여 페이지 이동을 할 수 있습니다.

기존의 Silverlight 프로젝트에 클래스를 추가하기 위해서는 솔루션 탐색기에서 차례로 추가, 새 항목, 클래스를 클릭합니다. 그러면 여러분의 프로젝트에 새로운 빈 클래스가 추가될 것입니다.

지금까지 Visual Studio를 사용하여 Silverlight 응용 프로그램 만들기에 대해서 알아보았습니다. 내용 중에 해당 사항의 좀 더 자세한 정보를 위한 링크는 필요하시다면 이 링크가 아니더라도 다른 책이나 인터넷 자료를 이용하셔서 공부하시기 바랍니다. 이는 여러분께 Silverlight 내용에 좀 더 많은, 확실한 지식을 주게 될 것입니다. ^^

다음 시간에는 Silverlight 클래스 라이브러리 만들기에 대해서 알아보겠습니다.

더운 여름 짜증내지 마시고 오히려 주위 분들께 활기찬 모습과 웃음을 먼저 표현해보세요. 그러면 여러분은 더욱 즐거운 하루를 보내시게 될 것입니다. 받는 기쁨보다 주는 기쁨이 더 크다는거 알고 계시죠? ^_______^*

 

참고 사이트
1. Silverlight 클래스 라이브러리 만들기
2. 응용 프로그램 개발 개요

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

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

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

안녕하세요~ 세티 입니다.
오늘도 지난 번과 마찬가지로 실버라이트 퀵 스타트를 기준으로 번역하면서 나름 제 표현을 가미하면서 진행해 보겠습니다.

먼저 우리는 겹쳐져 있는 2개의 rectangle을 가지고 있습니다. 하나는 푸른색의 배경색을 가지고 있고, 다른 하나는 붉은 빛의 배경색을 가지고 있습니다. 이 중에서 붉은 빛의 배경색을 가지는 rectangle 을 가장 위에 둡니다. 일반적인 버튼의 경우 마우스가 버튼 위에 위치하게 되면 아무런 액션도 일어나지 않습니다. 여기서 우리는 아무 애니메이션도 없는 버튼에 애니메이션을 주기 위해 프로시저 코드를 사용할 것입니다.

예제를 위해 mouseover 이벤트를 이용하여 작성해 보겠습니다.

먼저 Blend 2.5를 실행합니다.
그리고 LayoutRoot에 2개의 Rectangle을 만듭니다.
먼저 처음 버튼에는 파란색 그레디언트 효과를 주었습니다.

그리고 버튼을 복사하여 하나의 Rectangle을 똑같이 붙여넣었습니다.

복사한 객체의 색상은 아래의 그림처럼 변경했습니다. 그리고 Visibility 속성을 Collapsed로 변경했습니다.

다음으로 Artboard의 XAML 탭을 클릭하고, 다음의 내용을 코딩합니다.

코드를 보면 쉽게 이해하시겠지만 Grid는 MouseEnter 이벤트와 MouseLeave 이벤트를 가지고 있습니다. 이 이벤트에 행위를 담당하게 될 C#코드의 이벤트를 연결합니다.

여기서는 Grid객체의 MouseEnter 이벤트가 실행되면 C#에서 ButtonMouseEnter 메서드가 실행될 것이고, MouseLeave 이벤트가 실행된다면 C#의 ButtonMouseLeave 메서드가 실행될 것입니다.

Grid의 이벤트가 실행될 때 특정 행위를 주기 위해 이제 C# 코드에 프로시저를 코딩합니다.
그러기 위해선 먼저 솔루션 탐색기에 있는 XAML 파일을 확장해서 C# 파일을 열어야 합니다. 아래의 그림처럼 말입니다.

그리고 Page.xaml.cs를 두 번 클릭하여 해당 파일을 오픈합니다. VisualStudio가 설치되어 있는 분은 자동으로 실행되면서 CS 파일이 오픈될 겁니다. 그 곳에 ButtonMouseEnter 메서드와 ButtonMouseLeave 메서드를 코딩합니다.

자아 이제 다 되셨으면 VS를 닫고 Blend 2.5에서 F5키를 눌러서 프로젝트를 빌드 합니다.

그러면 아래처럼 실행되면서 버튼이 하나 보일 것입니다.

위의 그림에서 설명한 것 처럼 마우스를 하얀 여백에 두었다가 배경색이 있는 Grid로 마우스를 움직여 보세요.
Grid에 마우스가 올라가는 순간 Grid에 설정된 Mouse 관련 이벤트가 작동하면서 C# 코드에 있는 해당 메서드를 실행하게 됩니다. 그러면서 아래의 그림과 같은 결과를 렌더링하게 됩니다.

어때요? 매우 이해하기 쉽죠?
오늘은 이것으로 마치겠습니다.~

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

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

요즘 날씨가 많이 덥습니다. 오후에 점심 먹으러 밖에 나갔더니 그 푹푹 찌는 열기가 참으로 훈훈하고, 따스하게 느껴지더라구요..ㅡㅡ; 너무 더워서 편의점에 잠시 들려 300원짜리 동원에서 나온 사과맛 음료수를 먹으며, 사무실로 들어왔죠.

아.. 참! 제가 IT Hero 블로그에 필진으로 참여하게 되었습니다. 글쓰는 재주도 없고, 게으르면서도 책도 잘 안읽는 제게 이런 기회도 주어지니... 역시 전 운이 좋은 사람이고, 또 이 세상은 천년만년 살 가치가 있는 것 같습니다.^^; 농담이구요~

아무튼 IT Hero 블로그는 MS라는 기업의 블로그 입니다. 제품이 출시될 때 홍보도 하고, 또 MS기술 중심으로 포스팅되는 기사들도 있고 그렇습니다. 특정 기업의 홍보용 블로그 이긴 하지만 색안경을 벗어던지고, 업계의 이야기가 있는 그런 블로그로 바라봐 주셨으면 합니다.

그래도 이런 시도가 없는 것 보다는 있는 것이 낫잖아요? ^^
http://blog.it-hero.co.kr/blog_post_73.aspx

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

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

안녕하세요~ 세티 입니다.
오늘 날씨가 영~ 미덥지 않아요. 비가 오다가 안오다가 ^^

오늘 역삼동 삼성멀티캠퍼스에서 열린 제 1회 소프트웨어 아키텍트 대회에 참가했었습니다.
(관련주소 : http://search.lemonmail.co.kr/online_survey/080619_kosta/sub_page.html)

음~ 저는 웹2.0과 프레임워크라는 트랙에서 RIA와 UX아키텍처를 주제로 발표를 했었습니다.
나름 준비를 많이 한다고 했는데 오늘은 평소보다 더 긴장이 되더라구요. 그리고 나름 멋진 멘트도 준비해놨었는데 홀라당 까먹어 버리고 본의 아니게 말도 몇 번 꼬이고 그랬습니다.^^; 자료 마지막 장에 레퍼런스 기록하는 것도 까먹고...이래저래 딴데 정신 팔려 할 것도 제대로 못하고 있는 중 입니다.(더위 먹었나...헥헥)

아무튼 RIA기술을 잘 활용하기 위한 도구와 개념은 기술회사나 벤더들에 의해서 경험과 노하우가 어느 정도 공개 되는 것 같은데요~ 하지만 아직 그것을 적절히 가공할 엔지니어나 디자이너의 역할 분담이나 또 그들이 만들어낼 소프트웨어의 협업과정, 또 협업을 하기 위한 작업 환경 등은 아직 최적화되어 있지 않은 상태라고 보여집니다.

지난 포스트에서 User Experience Architecture 를 정리했습니다.
이 포스트에서 저는
 

UX 기반 애플리케이션 제작에서 디자인팀과 기술팀간의 협업이 매우 중요하므로 다이나믹한 환경을 제공하여 불편함이 없도록 합니다.

라고 글쓴 부분이 있습니다.

오늘 그런 다이나믹한 환경을 갖추고 일을 하는 곳을 찾았습니다.
바로 Microsoft MED(Mobile and Embedded Devices Division) 의 사용자 경험 그룹의 작업 공간입니다. 지난 포스트의 글과 아래에 소개하는 동영상을 같이 보면 UX 작업환경에 대해서 "아하~" 하고 느껴지는 부분이 있게 될 것입니다.^^

같이 맛있게 감상해 보아요~ ^^*

(Microsoft MED User Experience Group Workplace Design)

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

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

원글출처:http://msdn.microsoft.com/en-us/library/bb404708(VS.95).aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

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

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

원글출처: http://silverlight.net/quickstarts/blend_quickstart/part1_drawing_painting_and_text.aspx

본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

아..요즘 무지 바쁜 세티 입니다. 얼른 실버라이트 소개 자료를 올려야 한다고 생각하는데 바쁘다는 핑계로 실천이 안되고 있네요. 이번주라는 고비만 넘기면 한가한 세티가 되기 때문에 다시 부지런히 올리도록 하겠습니다. ^^*

[세티의 실버라이트] 11. Expression Blend 2.5를 이용한 그리기(1)  강좌에 이어서 계속 진행하겠습니다.

 이제 Blend를 이용해서 XAML을 코딩해 보도록 하겠습니다. XAML 문법을 다 익혀서 손으로 코딩해도 좋겠지만 도구를 사용하면 코드도 깔끔해지고, 생산성도 향상되고, 또 무엇보다 개발시 사람이기에 발생할 수 있는 의도적이지 않은 실수를 줄여주기 때문입니다.

 이번 강좌를 통해서 Blend를 이용하여 XAML 코드를 실행하고 실버라이트 애플리케이션을 빠르고 쉽게 만드는 방법을 배우게 될 것입니다. XAML 은  애니매이션 표현하는데 필요한 기능들을 가지는 Visual 객체들(예를 들어서 shape나 text, video등)이 선언되어 있고 실버라이트의 런타임에서 사용됩니다. 그러한 이유로 Blend에서 화면을 보면서 무언가를 생성해 낼 수 있습니다. 또한 Visual Basic.NET이나 C#과 같은 언어를 이용해서 Silverlight 애플리케이션을 생성하는데 사용할 수도 있습니다. 아무튼 우리는 그러한 작업에 Blend를 어떻게 이용하게 될것 인지 차츰 알아보게 될 것입니다.

자아~ 그럼 Blend안에 새로운 프로젝트를 하나 생성합니다. 이 때 화면은 Design view로 되어 있을 겁니다.

오른쪽에 있는 View 탭을 한번씩 눌러봅니다. 자 어때요? XAML view 탭을 클릭하면 Root 엘리먼트가 UserControl로 되어 있는 XAML 코드가 보이고, Split View 탭을 클릭하니깐 상단에는 Artboard가 보이고 하단에는 XAML 코드가 보이죠? ^^

우리는 이 탭을 이용해서 작업하면서 결과물을 쉽고 빠르게 확인을 해볼 수 있습니다.
이제 Blend가 잘 실행되는 것을 확인했고, 프로젝트도 잘 만들어 졌으니 객체와 속성들을 간단하게 다뤄 보겠습니다. 자아~ 그럼 따라와 보세요~

1. 마우스로 가볍게 Canvas(Artboard)를 선택합니다.
2. 그 다음에는 왼쪽에 있는 Objects and Timeline에서 LayoutRoot를 선택하고, 오른쪽에서 Properties를 선택합니다. 그러면 아래의 그림처럼 Blend가 바뀌게 될 겁니다.
3. 그 다음에 오른쪽 하단에 있는 배경색 설정판에서 적절한 색을 선택합니다.

아 여기서 참 Blend는 재미있는 기능을 하나 제공합니다. 그게 뭐냐면 Property를 검색해 주는 검색 기능이 들어가 있다는 겁니다. 아래 그림 처럼 말이죠.

저는 Width라는 속성을 찾기 위해 검색 키워드를 입력해 보겠습니다. 여러분도 입력해 보세요~
와~ 어떠세요??? 저랑 똑같은 결과가 나왔나요??? 전 아래 그림 처럼 결과가 나왔습니다.
오홍~ 멋지죠?? ^^ 이렇게 쉽게 원하는 Property를 찾을 수 있도록 기능도 제공하고 있습니다.
흠흠~ Cool~ 한 사용자 경험을 위해 멋지게 노력한 흔적이 보입니다.^^

배경색을 설정했으므로 Rectangle 객체를 이용하여 무언가를 만들어 보도록 하겠습니다.

4. 도구상자에서 Rectangle을 선택합니다.
5. 그리고 선택한 Rectangle을 Canvas 위에 적절하게 그려 줍니다.

아참... 위 그림에서 왼쪽의 도구상자를 보면 하단에 오른쪽으로 하얀색 삼각형 표시가 조그맣게 붙어있는 걸 볼 수 있죠? 그 표시는 여러개의 객체를 가지고 있다는 표시 입니다. 마우스로 그 부분을 꾹 눌러보세요~
그럼 또 다른 객체들을 확인할 수 있습니다. 요렇게 말이죠. ^^

Canvas에 그려진 Rectangle의 네 귀퉁이를 둥글게 처리할려고 합니다. 왜 둥글게 처리하냐구요?? ㅎㅎ
버튼을 만들려고 하기 때문입니다.^^

6. 마우스로 객체를 다시한번 선택해 주고 Property의 Appearance를 찾아서 RadiusX와 RadiusY 값을 설정해 줍니다. 전 둘다 16으로 설정했습니다.


그랬더니 짜잔~ 네모박스의 네 귀퉁이가 모두 둥글게 변한 걸 확인해 볼 수 있을 겁니다.
흠~ 멋지네요.

Objects and Timeline Inspector의 rectangle에 마우스를 올리고 오른쪽 버튼을 클릭하여 이것의 이름을 변경합니다. 이 객체에 지정되는 이름은 code에서 객체로 접근하기 위해 사용됩니다. 강좌 후반부에는 code에서 객체의 이름을 이용하여 접근하는 것을 보게될 것입니다.
전 이 객체의 이름을 SetiObject 라고 설정 하겠습니다.

또한 이 객체를 별도의 컨트롤로 분리할 수도 있습니다. 분리하는 방법은 rectangle 객체에 마우스를 올리고 오른쪽 버튼을 클릭하면 열리는 Action Panel에서 Make Control...을 선택하는 겁니다.

가볍게 객체에 마우스를 올리고 Make Control..을 선택합니다.

그러면 객체의 이름을 적는 다이얼로그 상자가 활성화 되고, 원하는 컨트롤의 이름을 적습니다. 기본적으로 객체이름 뒤에 Control 이 붙어서 표시되는데 이 예제에서는 SetiObjectControl 로 표시됩니다.

자아~ 가볍게 OK 를 눌러봅니다.

오~ 그랬더니 변화가 생겼습니다. 기존 Page.xaml 코드에는 컨트롤에 대한 XAML 코드가 생기고, 솔루션 탐색기에는 새롭게 생성된 SetiObjectControl에 대한 SetiObjectControl.xaml 이 생성되었습니다.

아래는 생성된 SetiOjectControl에 대한 XAML 코드 입니다.

또한 탐색기의 SetiObjectControl.xaml 을 확장해 보면 SetiObjectControl.xaml.cs 파일이 있는 것을 볼 수 있습니다. 이 파일은 C#을 위한 파일이며, 객체를 제어할 코드를 넣을 수 있도록 되어 있습니다.

이렇게 분리된 XAML 파일에 행동 제어를 위한 C# 코드와 XAML 코드가 한 쌍으로 이루어짐으로써 효과적인 사용자 컨트롤(User Control)을 만들 수 있게 되는 겁니다.

이 컨트롤에 배경색을 넣어보도록 하겠습니다.
먼저 Artboard의 View 탭을 Design 탭으로 다시 변경하고, 왼쪽의 Object and Timelines에서 객체의 Root인 LayoutRoot를 선택합니다. 그리고 Blend 툴의 제일 오른쪽에 있는 Properties를 선택합니다.

Brush에서 Background를 선택합니다.

이제 Rectangle 객체 안에 색을 채워 넣겠습니다. Blend 툴의 왼쪽에 위치한 Object and Timelines에서 SetiObject를 선택합니다. 그러면 위에서 배경색을 채우는데 사용했던 Brushes가 Fill로 변경되는 것을 확인할 수 있습니다.

그 다음으로 그레디엔트를 선택하고 Rectangle을 채웁니다.
Blend 툴은 아래 그림에서 보는 것처럼 여러 곳에 포인트를 찍고 디자이너가 부분적으로 색을 달리해서 적용할 수 있도록 되어 있습니다.

보통 Glass Layer 같은 것을 만들 때 이 기능을 사용합니다. glass 효과를 주기 위해 아래와 같은 설정을 줍니다.
그레디엔트 포인트 1 알파값 75%
그레디엔트 포인트 2 투명
그레디엔트 포인트 3 알파값 75%
그레디엔트 포인트 4 투명
그레디엔트 포인트 5 알파값 75%
그레디엔트 포인트 6 투명

이렇게 설정을 하게 되면 아래의 그림과 같은 효과를 만들어 낼 수 있습니다.

만들어 놓고 보니깐 Artbord에 있는 이미지가 너무 작아 보입니다. 이것은 아래 그림에 나오는 부분에서 크기를 조절하여 확대해서 볼 수 있습니다.

자아 이제 마지막으로 Rectangle 객체 안에 채워진 그레디엔트를 사선으로 만들어 보겠습니다.
아래 그림 처럼 하시면 됩니다.^^

오왕~ 되게 쉽죠?? ㅎㅎ

이것으로 Blend 2.5를 이용한 그리기 강좌를 마치겠습니다.
수고 하셨습니다.~

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

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

회사에서 야근할 때, 옥상에서 가끔 하늘을 봅니다.
서울의 밝은 불빛을 뚫고 아주 밝게 보이는 별이 하나 있더군요.
최근의 밝기는 시리우스 보다 더 밝고 환하게 보이는 것 같습니다.

그 별은 바로 목성입니다.

7월 9일부터 7월 12일 까지 보이는 목성은 2008년중 가장 크고 가장 선명하게 보입니다.
아마 쌍안경으로도 충분히 목성과 그 위성들을 관측할 수 있을 겁니다.

목성이 가장 크게 보이는 날은 7월 10일 저녁 입니다. 이 날은 목성이 지구를 사이에 두고 태양 반대편에 서는 날이기 때문입니다.

플라네타리움으로 본 목성의 위치 입니다.

(화면 캡쳐 시간은 7월 10일 오전 2시 45분 정도 이며, 실제 목성의 위치도 남쪽에서 남서쪽으로 이동중입니다.)

플라네타리움에서 목성을 당겨봤습니다.


목성은 남동쪽 하늘에서 올라와서 7월10일 0시에 남쪽하늘 약 20~30도 정도 되는 지점(가장 높은 지점)에 위치하게 되고  남서쪽 하늘로 사라지게 됩니다.

목성은 아마 저녁 7시 정도 부터 보이게 될 겁니다. 도시에 거주하시는 분은 저녁 7시 30분 이후 부터 볼 수 있을 겁니다. 건물이 많잖아요.^^

주말에 목성보러 가야 겠습니다.^^
가볍게 다녀오고 싶은 분은 연락주세요~

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

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

요즘 UX에 관심이 많은 세티 입니다.^^
참 많은 분야들이 있네요...호호호~
호기심 있는 분들은 여기에 있는 키워드를 이용해서 검색 바다를 누벼보시기 바랍니다.
꽤 많은 그리고 잼있는 내용들이 있으니깐요~~

HCI - Human computer interaction

전산학, 심리학, 산업공학과 연계되어 연구가 진행됨.

목적
인간이 쉽게 컴퓨터를 쓸모있게 하기 위함.

관심분야
인터페이스 설계 방법론
인터페이스 구현 방법론
인터페이스 비교 평가
새로운 인터페이스 상호 작용 기술 개발
모델이나 이론의 개발
인간 사이의 의사소통과 협력(CSCW)

연구분야
미학
인류학
인공지능
인지과학
산업디자인
인간공학
도서관학
심리학
사회심리학
사회학
사용자 경험 디자인

UIE(User Interface Engineering)

usability.gov

IxDA(Interaction Design Association)

IUI(Intelligent User Interface)

STC Usability & User Experience Community [1]

IFIP

HFES(Human Factors and Ergonomics Society)

UPA(Usability Professionals’ Association)

The British HCI Group

ACM SIGCHI

한국디지털디자인협의회

한국정보과학회

한국디자인학회

대한인간공학회

한국HCI학회

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

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

한국 소프트웨어아키텍트 연합회 및 전자신문 주최로 아키텍트 대회가 열립니다.
관심 있는 분들의 많은 참여 바랍니다.~

참가신청 : http://search.lemonmail.co.kr/online_survey/080619_kosta/index.jsp

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

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

제가 휴대폰을 사용하던게 95년도 였습니다.
지금으로 부터 13년전 이네요.^^

그 때 제가 가지고 있던 기종은 모토로라 스타텍 2000 이었습니다.



핸드폰을 가지고 있는 사람이 많지 않던 시절인데다가 학생이 핸드폰을 들고 다니니...
전화벨만 울리면 주변 사람들이 모두 쳐다보고 했었습니다.

친구들은 모두 한통만 써보자고 달라붙었고, 그로 인해 전화요금이 무려 24만원이 나왔서 부모님한테
엄청나게 혼났던 기억이 있습니다.

그 때 당시에 엄청나게 팔리던 물건이 있었으니 그건 일명 "삐삐" 라고 하는 것이었습니다.


도서관의 정막을 깨는 그 무시무시한 진동과 공중전화에 줄서서 삐삐만 쳐다보며 기다리던 그 풍경...
원래 삐삐라는 것이 지역성이 강해서 가입 지역을 벗어나면 잘 터지지 않곤 했는데 그 삐삐의 수신율 가지고
서로 내것이 좋니 니것이 좋니 싸운던 기억이 납니다.

결국 광역삐삐라는 것이 나오면서 모두 초토화 시켰지만 말이죠..ㅎㅎ

그러던 것이 96년 말이던가요? PCS가 개통되면서 바야흐로 핸드폰 대중화 시대가 됩니다.
길거리에서는 핸드폰을 싸게 공급하는 판촉행사가 연일 계속되고 있었고, 011, 016, 017, 018, 019 걑은 번호를
가진 많은 이동통신 사들이 생겨나게 되죠.

여기서 017은 "짜장면 시키신 분~" 이라는 광고로 히트를 치고, 커플끼리는 무제한 무료통화라는 파격적인
요금제를 선보이며, 승승장구 하다가 SK 텔레콤에 인수당했죠.


                             (017 광고)

그리고 018은 016에 인수되었고, 말입니다.

PCS가 도입되고, 전화기의 품질이 아직은 많이 부족하던 시절이라 중간에 끊어지기도 하고, 산에 들어가면
안테나가 뜨지도 않고, 또 충격 한번에 전화가 완전 먹통되는 그런 시절이었습니다.

그래서 출시된 핸드폰이 현대 걸리버였죠.
그리고 광고 컨셉도 소비자들의 불만을 잠재울 만큼 기발한 "걸면 걸리는 걸리버~~"
요거 였죠..ㅋㅋ

(걸기만 하면 다 걸린당 께롱~ ㅎㅎ)

이 때쯤 저도 SK텔레콤을 버리고 요금이 좀 싼 LG019로 이동하기 시작합니다.
이 때 처음 만난 모델이 바로 요 모델이었죠.

요 녀석이 참 튼튼한 모델이었습니다. 97년도 쯤인 거 같네요.
떨어트리고 던지고 물에 빠져도 신통하게 잘 터지던 핸드폰... 당시에는 이 녀석을 능가하는 모델이 별로 없었죠. 아마 지금의 애니콜 정도 되는 강력함을 가진 모델로 기억이 됩니다.

2000년에도 어떤 핸드폰을 썼었는데 그건 기억이 나질 않네요.
아무튼 흑백 액정이었고, 문자서비스, 이모티콘이 왕성하게 사용되던 시절이었습니다.

그 이후 2년 있다가 다시 핸드폰을 변경하게 되는데 요녀석을 사용했더랬죠.


와~ 맨날 흑백만 쓰다가 처음으로 만난 컬러 핸드폰...ㅎㅎㅎㅎ
이 녀석은 워낙 튼튼해서 한 3년 쓴걸로 기억합니다. 아직도 제방 서랍에 있구요~
현재는 잠을 콜콜 자고 있는 상태죠. 깔고 앉아도 끄덕없고, 자동차 바퀴에 튕겨서도 살아남은 녀석...
정말 명품이었습니다.

그 다음에 쓰던게 요녀석


제 기억으로는 최초의 슬라이드 폰이었던 걸로 보입니다.(아니면 태클 걸어주세요~)
이 핸드폰은 슬라이드를 열면 맑은 음이 나왔던 걸로 기억나고 컬러 이미지가 기존 것보다는 훨씬 부드럽고
화려하게 움직였던 걸로 기억합니다. 아마도 최초의 6만5천 컬러 핸드폰 이었을 겁니다.
슬라이드 폰이라서 모양은 매우 맘에 들었지만 슬라이드의 윗 부분이 너무 두꺼워서 입과 마이크의 간격이
매우 멀었던 걸로 기억하고 있습니다.(말하고 귀에 대고 다시 말하고 귀에대고를 반복했던...ㅎㅎ)

핸드폰만 쓰다보니 어느새 지겨움이 몰려왔습니다.
그리고 이 때는 막 이동성이 강화된 컴퓨터 제품이 나오던 시기라서 PDA 폰으로 변경해보자는 욕심을 가지게 되었습니다. 그래서 선택한 기종이 바로 위 모델의 형님 처럼 생긴 바로 이 녀석...


이 폰을 처음 만났을 때는 감동 그 자체였습니다.
터치 스크린에 컴퓨터 처럼 사용할 수 있고, 액정도 화려하면서 네비게이션으로도 사용할 수 있었기 때문이었죠. 하지만 무게와 두께는 왠지 벽돌 한장을 손에 쥐고 다니는 느낌이었고, 또 자기 딴에는 컴퓨터라고 자주 다운되기 일수 였습니다. 그래도 기계인지라 멈춰버리고 재부팅하고 하는 그런 번거로움은 견딜만 했는데 무겁고 두꺼운 것은 도저히 견딜수가 없었습니다.

그래서 선택한 모델이 울트라에디션 모델이었습니다.


이 핸드폰은 정말 물건이었습니다.
지금까지 사용해본 핸드폰 중에서 제일 맘에 드는 녀석이었죠.
일단 굉장히 얇아서 바지나 상의 호주머니에 쏙 들어갑니다. 거기에다가 통화 품질이 아주 좋고, 또 잘 터집니다. 물론 벨소리도 매우 맘에 들고, 카메라 기능이나 일정관리 기능도 잘 되어 있습니다.
하지만 이 녀석도 딱 한가지 단점이 있는데 너무 작게 만들다보니 진동이 잘 안느껴지는 것이었습니다.
사무실에서 근무하면 보통은 진동으로 해놓고, 책상위에서 위잉~ 하고 울리는 소리를 듣고 전화를 받곤 했는데
이 핸드폰은 진동소리가 들리지 않는 것이었습니다. ㅡㅡ;;;;
아는 지인들은 전화를 일부러 안받는다고 하소연하고, 전화 피한다는 둥~ 그런 소리까지 듣게 만들었습니다

그래서 무지 아끼는 이 녀석을 포기하고 다시 변경한 모델이 바로 스마트 폰 이었습니다.


SPH-M620 이라는 녀석인데요. 쿼티 키보드와 큰 액정이 매우 장점인 모델입니다.
처음엔 저 작은 자판을 큰 손으로 누르는데 별 문제 없을까? 라고 생각했지만 의외로 손가락에 자판의 느낌이 잘 오게끔 만들어진 폰 이었습니다. 하지만 이것도 조금 아쉽긴 하지만 PDA 폰이 가지는 소프트웨어의 불안정성? 그리고 배터리의 한계성 등을 모두 가지고 있습니다.

하지만 크기가 작고, 시원한 액정, 편리한 일정관리 기능등은 제 마음에 쏙 들더군요^^

아 글을 쓰다보니 핸드폰의 역사를 쓰게 된 것 같습니다.
오랜만에 들어와서 무얼쓸까... 고민하다가 인터넷에서
 [성년맞은 대한민국 휴대폰] 그땐 길이 23㎝.무게 1.3㎏.가격 400만원 
이 기사를 보고 필 받아서 한번 써봤습니다.

휴우... 오래전 핸드폰 사진 찾느라 무척 힘들었습니다.
이 글 쓰는데 딱 75분 걸렸네요. 워~

오랜만에 핸드폰 역사를 더듬으며 과거로 잠시 여행을 다녀와 보세요~

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

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