ZZANGMYON BLOG♡

SECTION02. 익스프레션 블렌드의 레이아웃

짱묜 — Wed, 06 Jul 2011 00:03:34 +0900

레이아웃의 사전적 의미를 검색해 보면 "디자인 ·광고 ·편집에서 문자 ·그림 ·기호 ·사진 등의 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일, 또는 그 기술" 이라고 나옵니다. 책이나 신문, 잡지 등의 인쇄매체 외에 우리가 자주 접하는 웹사이트에도 레이아웃이 적용되어 있으며 게임, 플레이어, 프로그램 등과 같은 애플리케이션에서도 레이아웃은 꼭 필요한 작업입니다.

잘 만들어진 레이아웃은 사용자로 하여금 컨텐츠를 더욱 효과적으로 이해할 수 있도록 도와주고 때로는 새로운 경험을 제공하기도 합니다. 사용자를 배려하지 않은 레이아웃은 컨텐츠를 이해하는데 어려움을 주고 사용자를 떠나가게 하는 최악의 상황을 만들 수도 있습니다.

우리가 애플리케이션을 제작하는 것은 우리의 디자인 감각만을 펼치는 예술을 하기 위해서가 아닙니다. 우리가 제공하려는 컨텐츠와 메세지를 잘 전달하고 사용자와 잘 소통하는 것이 첫번째 목적이라 할 수 있습니다. 물론 레이아웃 뿐만 아니라 사용자와의 상호작용, 디자인적인 측면, 기능적인 측면 등 다른 중요한 부분도 많지만 레이아웃은 애플리케이션을 실행하고 사용하는데에 가장 기본적이면서도 제일 중요한 부분입니다. 다음은 실버라이트로 구현된 사이트의 레이아웃 입니다.

<실버라이트 사이트의 레이아웃>

http://www.silveos.com/

http://live.clientui.com/

그러나 이 강좌에서는 사용자를 배려하여 레이아웃을 어떻게 잘 만들것인가를 학습하지는 않을 것입니다. 이렇게 중요한 레이아웃 이라는 것을 애플리케이션에 적용할 때에 기능적으로 어떻게 사용하는 지에 대하여 학습할 것입니다. 익스프레션 블렌드에는 레이아웃을 구성하기 위해 지원되는 여러가지 레이아웃 컨트롤이 들어있습니다. 이 레이아웃 컨트롤들은 각각 다른 속성을 가지고 있기 때문에 레이아웃이 어떤 기능을 하느냐에 맞추어 적절한 레이아웃 컨트롤을 사용해야 합니다.

이번 세션에서는 레이아웃을 구성하기 위해 지원되는 레이아웃 컨트롤에는 어떤 것들이 있는지 살펴보고 다양한 상황에 맞는 컨트롤 사용법에 대해서 학습하도록 하겠습니다.

[블렌드메이트] 블렌드스터디 3회 후기 및 공지

짱묜 — Mon, 04 Jul 2011 23:26:26 +0900

안녕하세요? 짱묜입니다. :) 지난주에 3회 스터디가 진행되었는데 이제서야 후기를 쓰네요.

이번 스터디에서는 컨트롤의 스타일에 대해서 알아보았습니다. 스타일을 배우기 전에 리소스를 선언하는 범위에 대해서 학습하였습니다. 리소스를 선언하는 범위는

1.애플리케이션 전체에 선언
2.해당 도큐먼트에 선언
3.도큐먼트 안 컨트롤에 선언

하는 방법들이 있었습니다. 어느 곳에 선언하느냐에 따라서 스타일을 적용할 수 있는 범위가 달라졌던것 다 기억하시죠?
그리고 이 외에 리소스 딕셔너리로 선언하여 다른 테마로 분리하는 방법도 알아보았습니다.

각자 준비해 온 버튼 디자인을 가지고 스타일 작업을 해 보았습니다. 이미지 타입의 경우에는 버튼의 기본 템플릿을 만든 다음 작업을 하였고 벡터 타입의 경우에는 기본적으로 제공되는 버튼 컨트롤의 템플릿 안의 요소를 바꾸어 작업했습니다.
Visual State Manager(VSM)을 이용하여 버튼의 상태값(Normal,Over,Pressed 등)에 따라 다른 애니메이션을 적용해 보았습니다.

다음 시간에는 트리거와 비헤이비어, 퍼스펙티브3D 등에 대해서 배우도록 할 것입니다. 내일이네요 -_-;;
그럼 오늘도 우리 스터디 멤버들의 열심히 하는 모습을 올려볼께요!

다음 후기때 뵈요! 뿅!!

[블렌드메이트] 블렌드스터디 2회 후기 및 공지

짱묜 — Thu, 16 Jun 2011 14:57:46 +0900

안녕하세요? 짱묜입니다! 지난 화요일에는 2회 스터디가 진행되었습니다.

이번 스터디에서는 스토리보드를 이용하여 애니메이션을 만드는 방법에 대해서 알아보았습니다. 스토리보드를 생성한 후에 타임라인에 개체의 상태가 변화하는 시점이 될 키프레임을 생성하고, 키프레임 부분에서 개체의 크기변환, 색상변환, 각도변환,위치변환 등 다양한 속성 변경을 해 보았습니다.

기초적인 내용은 빨리 진행을 하고 예제를 따라해 보았습니다.

1.공 튕기기
공이 아래로 낙하할때 가속도가 증가하고, 위로 튀겨질때 감속하는 애니메이션을 만들어 보았습니다.
2.텍스트 애니메이션
플래시에서 많이 사용되는 텍스트 애니메이션! 글자가 순차적으로 날아오는 애니메이션을 만들어 보았습니다. 텍스트 레이어를 동시에 선택해서 효과를 적용한 후에 프레임을 이동하여 시간차를 주었던 것 기억하시죠?
3.현재값을 상속받는 애니메이션
이것은 하얀코코님이 자주 사용하셨던 예제로 야구의 1루,2루,3루를 그려서 해보았습니다. 스토리보드의 초기값을 설정하지 않으면 현재의 값을 상속받게 되어서 그 값에서 이어져 스토리보드가 실행이 되었습니다.
4.클리핑을 이용한 애니메이션
클리핑을 이용하여 텍스트에 그라데이션을 이동하는 애니메이션과 파워포인트의 블라인드 효과 애니메이션을 만들어보았습니다. 화면에 보여줄 개체와 패스를 클리핑하여 클리핑 패스의 노드를 이동하여 효과를 냈습니다.

처음이라 쉽지 않았겠지만 그래도 모두 열심히 잘 따라오셨어요!! 다음시간에는 컨트롤의 스타일에 대해서 스터디를 진행하도록 하겠습니다. 다음 시간까지 스타일에 들어갈 버튼의 디자인을 해오라고 말씀드렸어요. 블렌드에 넣기 좋은 벡터타입으로 디자인을 해 오시고, 꼭 포토샵으로 작업한 디자인이 필요하신 분들은 이미지 타입으로 해오셔도 됩니다.

자~ 오늘도 열심히 하시는 모습 투척!! 보정..같은건 없습니다 ㅠㅠ)

다음주까지 즐거운 한주 되세요!!

STEP03. 익스프레션 블렌드의 툴 박스 III

짱묜 — Thu, 16 Jun 2011 01:15:32 +0900

툴 박스의 마지막 도구인 에셋 라이브러리에 대해서 알아보도록 하겠습니다.

◎ Assets
에셋 라이브러리에는 현재 자신이 보유하고 있는 리소스와 컨트롤, 비헤이비어와 액션 등이 들어있는 자산 목록이라고 생각하면 됩니다. 닷넷 프레임워크 툴킷, 실버라이트 툴킷 등 어떤 툴킷을 설치하였는지, 또 어떤 컨트롤과 비헤이비어를 개발하여 직접 보유하고 있는지에 따라 그 목록은 개인마다 다르게 나타날 수 있습니다. 에셋 라이브러리는 툴 박스에 있는 아이콘을 이용하여 펼칠 수 있고 상단의 [Assets] 패널을 클릭하여 펼칠 수도 있습니다. 카테고리를 선택하면 해당 카테고리에 관련된 컨트롤과 비헤이비어 등의 목록이 나타납니다. 다음의 이미지를 보면 [Assets]패널과 툴박스에서 아이콘을 선택한 [Assets]에 동일한 컨텐츠가 들어있음을 알 수 있습니다.

1.Project : 현재 프로젝트에 정의된 에셋이 나타납니다. 사용자가 정의하여 만든 유저컨트롤 등이 들어있습니다. 프로젝트를 다시 빌드할 때까지 보이지 않는 타입도 있습니다.
2.Controls : 모든 컨트롤 목록이 나타납니다. 데이터, 패널 등 카테고리가 한 단계 더 나누어져 있습니다.
3.Styles : 보유하고 있는 모든 스타일 목록이 나타납니다.
4.Behaviors : 비헤이비어&액션 목록이 나타납니다.
5.Shapes : 다양한 도형 타입의 컨트롤 목록이 나타납니다.
6.Effects : 효과 목록이 나타납니다.
7.Media : 프로젝트에 불러온 이미지, 비디오, 오디오 혹은 3D 개체와 같은 파일들의 목록이 나타납니다.
8.Categories : 컨트롤 개발자들에 의해 생성된 하위 카테고리 안의 컨트롤들이며 [Controls]의 컨트롤과 일부 중복됩니다.
9.Locations : 참조되어 있는 DLL별로 나누어 에셋 목록을 볼 수 있습니다.

[Assets] 툴을 선택하여 파일 목록을 펼친 다음 생성할 컨트롤을 더블 클릭하게 되면 [Assets] 툴 아래에 선택한 컨트롤의 아이콘이 나타납니다. 이것을 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다. 파일 목록에서 아트보드에 드래그앤 드랍하여 컨트롤을 바로 생성할 수도 있습니다.

가장 최근 선택한 컨트롤이 최대 10개까지 목록에 나타나기 때문에 자주 이용할 수 있습니다.

STEP03. 익스프레션 블렌드의 툴 박스 II

짱묜 — Mon, 13 Jun 2011 03:43:46 +0900

기본적인 툴의 사용법을 마쳤으니 이제 컨트롤 툴을 사용하는 방법을 알아볼 차례입니다. 컨트롤 중 레이아웃 컨트롤은 컨테이너의 성격이 강하기 때문에 보이는 모습에는 특징이 없습니다. 따라서 처음 접하는 사용자에게는 그 차이가 잘 와닿지 않을 수 있습니다. 지금은 레이아웃을 생성하는 방법 정도만 알아보도록 하고 자세한 내용은 다음 스텝에서 다루도록 하겠습니다.

◎ Grid 컨트롤
실버라이트나 WPF 프로젝트의 유저컨트롤, 페이지 등과 같은 대부분의 문서 내에서 최상위 레이아웃으로 사용됩니다. 또한 행과 열의 속성을 가지고 있기 때문에 표 형태의 레이아웃을 구성할 때에 많이 사용됩니다. [Grid] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

그리드는 왼쪽과 윗쪽의 파란 영역에 마우스를 갖다 대면 행과 열을 삽입할 수 있는 노란색 막대가 나타납니다. 원하는 지점을 클릭하면 행과 열이 삽입됩니다.

◎ Canvas 컨트롤
영역을 기준으로 하는 좌표를 사용하여 자식요소를 절대배치 합니다. 자식요소와 부모 캔버스 사이의 거리를 나타내는 Left, Top 값을 가지고 있습니다. [Canvas] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

◎ StackPanel 컨트롤
패널 내에 자식요소를 차례차례 쌓을 수 있습니다. 가로, 세로 속성을 이용하여 자식요소가 쌓이는 방향을 정의할 수 있으며 기본값은 세로입니다. [StackPanel] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

◎ ScrollViewer 컨트롤
컨텐츠가 화면에서 보여줄 영역보다 클 경우에 사용합니다. 하나의 자식요소만 가질 수 있으며 다양한 스크롤 지원 프로퍼티와 메소드가 있습니다. [ScrollViewer] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

◎ Border 컨트롤

개체 주위의 테두리를 그리거나 배경을 넣을 때 사용합니다. 하나의 자식요소만 가질 수 있으며 테두리의 둥글기나 두께 등의 속성을 설정할 수 있습니다. [Border] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

◎ Viewbox 컨트롤

자식요소를 늘이거나 확대할 경우 사용합니다. 뷰박스에 여러 개의 자식요소를 그룹화하여 넣게 되면 뷰박스의 사이즈를 따라 자식요소들의 크기가 같은 비율로 변경됩니다. 또한 사이즈가 동일한 여러 개의 뷰박스에 크기가 다른 개체들를 각각 넣으면 개체들의 크기가 뷰박스의 사이즈에 꽉차게 맞추어져 보이게 됩니다. [Viewbox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

◎ TextBlock 컨트롤
주로 두 줄 이상의 텍스트 단락을 필요로 하지 않는 한 줄 단위의 간단한 텍스트를 표시합니다. [TextBlock] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고 텍스트를 입력합니다.

◎ TextBox 컨트롤

주로 입력 폼과 같은 곳에서 사용자의 텍스트 입력을 받거나 수정할 수 있습니다. [TextBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고 텍스트를 입력합니다.

◎ RichTextBox 컨트롤
서식이 있는 텍스트나 이미지, 표 등과 같은 풍부한 컨텐츠를 표시합니다. 이미지와 서식이 필요한 기사나 블로그와 같은 형식의 컨텐츠를 작성할 경우 사용합니다. [RichTextBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고 텍스트 및 이미지를 입력합니다.

◎ PasswordBox 컨트롤
암호 입력을 위한 컨트롤입니다. 비밀번호와 같은 암호를 입력할 경우에 사용되며 자동으로 마스킹 문자로 처리됩니다. 이 때 마스킹 문자의 기본값은 글머리기호 문자(●) 입니다. [PasswordBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고 텍스트를 입력합니다.

◎ Button 컨트롤

클릭 이벤트를 가지고 있는 컨트롤로 제일 자주 사용되는 컨트롤입니다. [Button] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다. 한번 더 더블 클릭하면 버튼의 이름을 변경할 수 있습니다.

◎ ChechBox 컨트롤

항목을 선택하거나 선택을 취소하는 옵션을 설정할 경우에 사용합니다. 하나 혹은 둘 이상의 항목에 적용할 수 있습니다. [CheckBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다. 한번 더 더블 클릭하면 체크박스의 이름을 변경할 수 있습니다.

◎ ComboBox 컨트롤
항목을 선택할 수 있는 목록이 들어있으며 드롭다운 할 수 있는 컨트롤입니다. [ComboBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고, 컨트롤이 선택된 상태에서 마우스 오른쪽 버튼을 눌러 나오는 메뉴중 [Add ComboBoxItem]을 선택하여 콤보박스 아이템을 삽입합니다.

콤보박스 아이템을 더블 클릭하면 이름을 변경할 수 있습니다.

◎ RadioButton 컨트롤
여러 개의 항목 중 하나의 항목만 선택할 수 있는 옵션을 설정할 경우 사용합니다. 둘 이상의 항목에 적용되며 사용자는 아무것도 선택하지 않을 수 없습니다. [RadioButton] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다. 한번 더 더블 클릭하면 라디오버튼의 이름을 변경할 수 있습니다.

◎ ListBox 컨트롤
[ComboBox]와 보여주는 방식만 다른 컨트롤입니다. 여러 개의 항목을 선택할 수 있는 목록이 들어있으며 보여줄 영역보다 항목이 길 경우 스크롤이 나타납니다. [ListBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고, 컨트롤이 선택된 상태에서 마우스 오른쪽 버튼을 눌러 나오는 메뉴 중 [Add ListBoxItem]을 선택하여 리스트박스 아이템을 삽입합니다.

리스트박스 아이템을 더블 클릭하면 이름을 변경할 수 있습니다.

◎ ScollBar 컨트롤
[ScrollViewer]나 [ListBox] 안에 들어있는 스크롤바와 기능이 같습니다. 제한된 영역에서 보다 많은 컨텐츠를 보여주기 위한 컨트롤이며 일반적으로 다른 컨트롤에 포함되어 있습니다. [ScrollBar] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

◎ Slider 컨트롤
소리의 크기나 이미지의 투명도 등의 값의 범위를 설정하고 키를 이용하여 범위 내의 값을 선택합니다. 선택한 값에 따라 개체의 상태가 변경됩니다. [Slider] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

◎ TabControl 컨트롤
같은 공간에 여러 개의 화면을 보여주기 위해 사용합니다. 화면의 갯수만큼 탭아이템이 생성되며 사용자는 탭아이템을 눌러 화면간 이동을 할 수 있습니다. [TabControl] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

[Properties]-[Common Properties]패널에서 [Heder]를 이용하여 탭아이템의 이름을 변경할 수 있습니다.

◎ GridSplitter 컨트롤

그리드의 행과 열을 사용자가 다시 배분하기 위해 사용합니다. 우리가 일상적으로 접하는 워드나 파워포인트와 같은 다양한 프로그램에서 화면의 분할을 조절하기 위해 사용하는 것과 같습니다. 먼저 위에서 학습한 경험을 이용하여 2열로 분할된 Grid를 생성하고 열을 구분하기 위하여 각각의 열에 색이 다른 사각형을 꽉 채워 넣습니다.

그리고 [GridSplitter] 컨트롤을 선택하여 생성된 그리드의 열이 나눠지는 영역(가운데 빨간 점선)에 갖다 놓으면 됩니다. 프로그램을 실행한 후에 [GridSplitter]을 조절하면 그리드 영역이 재분배 됩니다.

[블렌드메이트] 블렌드스터디 1회 후기 및 공지

짱묜 — Thu, 09 Jun 2011 13:08:12 +0900

안녕하세요~ 짱묜입니다. :)
그저께 블렌드스터디 1회가 진행되었는데요. 지난주 OT보다 많은 분들이 오셨어요.ㅎㅎ

이번주에 진행된 내용은 블렌드의 화면 구성이 어떻게 이루어졌는가 살펴보았습니다. 상단에는 메뉴가 있고 블렌드의 환경을 제어하는 다양한 옵션들이 들어있습니다. 프로젝트 패널과 프로퍼티 패널은 어떤 역할을 하고 어떻게 사용하는지 알아보았고
우리가 제일 자주 쓰게 되는 툴박스는 하나씩 직접 해보면서 사용방법을 알게 되었습니다.

원래 레이아웃은 다음주에 진행하려고 했는데 시간이 조금 남아서 이번주에 진행을 하게 되었어요. 레이아웃에는 캔버스,그리드,스택패널 등과 같은 레이아웃 패널이 있고 이러한 레이아웃들은 각각 가지고 있는 속성이 다르기 때문에 어떤 경우에 어떤 레이아웃을 써야 하는지 알아보았습니다.

그리고 패스 타입 개체를 블렌드보다 조금 더 그리기 수월한 익스프레션 디자인 툴도 간단하게 살펴보고 비스타 버튼과 아쿠아 버튼을 그려보았어요.

이번주에 배워본 내용을 간단히 정리해보면 아래와 같습니다.
1.블렌드의 화면구성
2.툴박스의 사용법
3.레이아웃
4.익스프레션 디자인 살펴보기

제가 스터디 중간에도 누누히 말씀 드렸지만 자주 사용하지 않으면 금방 잊게 됩니다. 다음 스터디까지 지난주에 배웠던 내용을 꾸준히 사용해 보는 것이 중요합니다. 특히 툴 박스 사용하기와 레이아웃 패널 사용하기에 대한 연습을 꼭 해오세요!

다음 시간에는 스토리보드 애니메이션을 어떻게 생성하고 어떻게 사용하는지에 대하여 진행하도록 하겠습니다. 모두 화이팅입니다!!

STEP03. 익스프레션 블렌드의 툴 박스 I

짱묜 — Tue, 07 Jun 2011 04:35:37 +0900

블렌드의 툴 박스는 블렌드를 다루면서 제일 자주 사용되는 부분입니다. 툴을 하나씩 다루어 보면서 기능을 자세히 알아보도록 하겠습니다.

◎ Selection 툴
개체를 개별로 선택하거나 모두 선택할 수 있습니다.[Selection] 툴을 선택한 상태에서 하나의 개체를 클릭 하면 하나의 개체가 선택되고, 드래그하면 드래그 한 범위 안의 개체가 모두 선택됩니다.

◎ Direct Selection 툴
개체의 앵커 포인트를 직접 선택하거나 변형을 할 경우에 사용합니다. [Direct Selection] 툴을 선택한 상태에서 개체를 클릭하여 앵커 포인트를 활성화 하고 앵커 포인트의 한 지점을 클릭한 후 드래그하여 개체를 변형합니다.

◎ Pan 툴
아트보드를 조절하여 보기 위한 툴입니다. [Pan] 툴을 선택한 상태에서 아트보드를 드래그하여 화면을 이동할 수 있습니다.

<TIP>다른 작업 중일 경우에는 [Space]키를 눌러 화면을 이동할 수 있고, [Space]키를 놓는 순간 이전의 작업 상태로 돌아갈 수 있기 때문에 편리합니다.

◎ Zoom 툴

아트보드를 확대/축소하여 볼 수 있습니다. [Zoom] 툴을 선택한 상태에서 아트보드를 클릭하면 확대 비율이 증가하고, [Alt]키를 누른 채 클릭 하면 확대 비율이 점점 줄어듭니다. [Zoom] 툴을 더블 클릭하면 화면 비율이 100%로 조절됩니다.

<TIP>아트보드 아래의 [Zoom] 목록 버튼을 클릭하여 비율을 조절할 수도 있습니다. 또한 [Ctrl]+[+] 키를 누르면 화면 비율이 확대되고 [Ctrl]+[-] 키를 누르면 화면 비율이 축소되며 이전의 작업 상태로 돌아갈 수 있습니다.

◎ Eyedropper 툴
선택한 개체에 다른 개체의 색이나 패턴을 채울 수 있습니다. 변경할 개체를 선택한 후 [Eyedropper] 툴을 클릭하고 복사할 개체를 클릭하여 색이나 패턴을 복사합니다.

◎ Paint Bucket 툴
[Eyedropper] 툴과는 반대로 선택한 개체의 색이나 패턴을 다른 개체에 채울 수 있습니다. 복사할 개체를 선택한 후 [Paint Bucket] 툴을 클릭하고 변경할 개체를 클릭하여 색이나 패턴을 복사합니다.

◎ Gradient Tool 툴
개체에 그러데이션을 적용하거나 적용된 그러데이션을 변형합니다. [Gradient] 툴을 선택한 상태에서 그러데이션을 적용할 개체에 드래그하면 드래그 한 방향대로 그러데이션이 적용됩니다. 그러데이션이 생성 되지 않은 상태에서는 [Properties]-[Brushes]패널에서 [Gradient Brush]를 적용하면 기본 그러데이션이 생성됩니다.

그러데이션 막대에서 한 포인트를 더블 클릭 하면 색상 패널이 나타나 다양한 그러데이션을 생성할 수 있습니다.

또한 그러데이션 막대를 조절하여 완만한 정도 및 방향을 설정할 수 있습니다.

◎ Brush Transform 툴
그러데이션의 위치를 이동하거나 회전할 수 있습니다. [Brush Transform] 툴을 선택하고 그러데이션이 적용되어 있는 개체를 클릭하면 그러데이션 영역이 나타납니다. 이것을 드래그하여 그러데이션의 위치를 이동하거나 회전합니다.

<TIP>[Gradiend Tool] 툴과 [Brush Transform] 툴은 그룹화 되어있습니다. 그룹화 되어있는 툴은 툴 아이콘 옆에 작은

삼각형이 표시되어 있습니다. 툴 아이콘을 길게 누르거나 마우스 오른쪽 버튼을 눌러 툴을 변경할 수 있습니다.

◎ Pen 툴
[Pen] 툴을 이용하여 다양한 모양의 패스 타입 개체를 그릴 수 있습니다. 패스의 각 세그먼트는 두 개의 앵커 지점과 두 개의 핸들로 이루어집니다.

[Pen] 툴을 선택한 상태에서 아트보드에서 시작 지점을 클릭한 후 적당한 간격을 두고 두 번째 지점을 클릭합니다. 원하는 모양의 개체를 그리기 위해서는 앵커 포인트의 간격을 적당히 조절하는 것이 중요합니다. 앵커 포인트를 클릭한 채로 원하는 방향으로 드래그 하여 핸들러를 조절합니다. 핸들러의 길이나 방항을 조절하여 원하는 곡선의 세그먼트를 만듭니다.

◎ Pencil 툴
[Pen] 툴로 앵커 포인트를 하나씩 추가하여 패스를 그렸다면 [Pencil] 툴로는 곡선을 자유롭게 드로잉하여 앵커 포인트를 자동으로 생성할 수 있습니다. 그렇지만 태블릿을 사용하지 않으면 손 떨림 현상 때문에 원하는 개체를 그리기가 쉽지 않아 자주 사용하지는 않습니다. 다음 예제는 나비를 그려본 것인데 쉽지 않네요.

◎ Rectangle 컨트롤
[Rectangle] 컨트롤을 선택한 상태에서 드래그하여 사각형 컨트롤을 그립니다. [Shift] 키를 누른 채 드래그하면 정사각형을 그릴 수 있습니다.

또한 [Properties]-[Appearance] 패널의 [RadiusX]와 [RadiusY] 값을 입력하여 모서리의 둥글기를 조절할 수 있습니다.

◎ Ellipse 컨트롤
[Ellipse] 컨트롤을 선택한 상태에서 드래그하여 원형 컨트롤을 그립니다. [Shift] 키를 누른 채 드래그하면 정원을 그릴 수 있습니다.

◎ Line 컨트롤

[Line] 컨트롤을 선택한 상태에서 드래그하여 선 컨트롤을 그립니다. [Shift] 키를 누른 채 드래그하면 45도를 유지한 선을 그릴 수 있습니다.

STEP02. 익스프레션 블렌드의 인터페이스 - Results 패널, 그 외

짱묜 — Thu, 02 Jun 2011 13:11:32 +0900

결과 패널의 Error 탭은 태그에 잘못된 값이 들어갔거나 닫히지 않는 등 형식에 맞지 않게 작성하여 에러가 날 때 어느 부분에서 에러가 났는지 메세지를 보여주어 잘못된 부분을 파악하는데 도움이 됩니다. Output 탭은 프로젝트를 빌드할 때 실행된 결과를 메세지로 보여줍니다.

◈ Results 패널

이 외에 아트보드의 가장자리에 몇 개의 아이콘 묶음이 있습니다.

◈ 기타

1.Zoom : 확대 비율을 드롭다운 리스트에서 선택하거나 직접 입력하여 설정합니다.
2.Turn on/off Rendering of Effects : 효과 적용을 보여줄 것인지 설정합니다.
3.Show/Hide snap grid : 스냅그리드를 보여줄 것인지 설정합니다.
4.Turn on/off snapping to gridlines : 그리드라인에 개체가 스냅 될 것인지 설정합니다.
5.Turn on/off snapping to snaplines : 스냅라인에 개체가 스냅 될 것인지 설정합니다.
6.Show/Hide annotations : 주석을 보여줄 것인지 설정합니다.
7.Design : 화면 뷰를 디자인 모드로 봅니다.
8.XAML : 화면 뷰를 XAML 모드로 봅니다.
9.Split : 화면 뷰를 디자인 모드와 XAML 모드로 나누어 봅니다.

STEP02. 익스프레션 블렌드의 인터페이스 - Objects and Timeline 패널

짱묜 — Thu, 02 Jun 2011 03:19:51 +0900

오브젝트와 타임라인 패널은 화면에 있는 UI를 트리 형태로 보여주어 개체의 스택을 쉽게 파악할 수 있을 뿐만 아니라 개체 간의 관계를 이해하기에 좋습니다. 타임라인 패널은 스토리보드를 선택했을 때 나타나게 되는데 이 부분은 스토리보드를 생성하고 사용하는 강좌에서 다루도록 하겠습니다.

◈ Objects and Timeline 패널

1.Storyboard open : 드롭다운 버튼을 눌러 저장된 스토리보드를 선택합니다.
2.Storyboard close : 열려있는 스토리보드를 닫습니다.
3.New : 스토리보드를 생성하여 추가합니다.
4.Scope : 현재 열려있는 페이지의 스콥을 나타냅니다.
5.Hide All : 로지컬 트리의 모든 개체를 보이지 않게 합니다. 이 메뉴가 활성화 될 경우 Show All 이라는 토글 버튼으로 해제할 수 있습니다. 화면상에서는 보이지 않지만 프로그램을 실행하는 데에는 지장을 주지 않습니다.
6.Lock All : 로지컬 트리의 모든 개체를 잠그어 고정시킵니다. 역시 Unlock All 이라는 토글 버튼으로 해제할 수 있습니다.
7.Logical tree : 화면에서 보이는 개체들의 계층 구조를 나타냅니다. 선택한 개체의 부모 레이아웃이 파란색 선으로 표시됩니다.
8.Arrange by Z order : 선택한 개체의 부모 레이아웃 범위 안에서 계층 구조를 거꾸로 나타냅니다.

STEP02. 익스프레션 블렌드의 인터페이스 - Properties 패널

짱묜 — Wed, 01 Jun 2011 17:15:36 +0900

우리가 사용하는 도형이나 패스, 버튼 등과 같은 컨트롤들은 모두 고유의 속성을 가지고 있습니다. 버튼 컨트롤은 Background, Foreground, Content 등과 같은 속성을 가지고 있고, 단순한 사각형 컨트롤은 Fill, Stroke 등과 같은 속성을 가지고 있습니다. 이렇게 컨트롤의 속성이 다르기 때문에 속성을 변경할 수 있는 프로퍼티 패널은 선택한 컨트롤에 따라 그 구성도 달라지게 됩니다.

다음 그림은 실버라이트 애플리케이션 프로젝트를 생성하였을 때 가장 기본적으로 나타나는 레이아웃인 Grid의 프로퍼티 패널 모습입니다.

◈ Properties 패널

1.Name : 컨트롤의 이름을 지정할 수 있습니다.
2.Properties/Events : 컨트롤의 프로퍼티와 이벤트를 나누어 볼 수 있습니다.
3.Search : 프로퍼티를 이름으로 검색할 수 있습니다.
4.Brushes : 컨트롤의 색에 관련된 설정을 합니다. 컨트롤의 배경색, 테두리, 텍스트의 색을 칠하거나 브러시 리소스를 저장할 수 있습니다.
5.Appearance : 컨트롤을 화면에서 보이거나 숨길 수 있으며 투명도를 설정할 수 있습니다.
6.Layout : 레이아웃 컨트롤의 정렬 상태나 마진값을 설정할 수 있습니다.
7.Common Properties : 툴팁을 넣거나 커서 모양을 설정할 수 있습니다.
8.Transform : 컨트롤의 크기나 각도, 기울기 등을 설정할 수 있습니다.
9.Miscellaneous : 위의 항목 외에 여러가지 속성들이 들어 있습니다.

위에서는 프로퍼티에 대해서 간단하게 설명하였고 차후에 따라하기 과정을 진행할 때 모든 속성을 골고루 다루어 볼 것입니다. 지금은 브러시에 관련된 프로퍼티에 대해서만 조금 더 자세하게 다루도록 하겠습니다.

◎ Brushes

1.Background : 배경색을 설정합니다.
2.OpacityMask : 투명마스크를 설정합니다. 투명마스크는 그래디언트 브러시를 이용하여 적용할 수 있습니다. 반사효과를 낼 경우에 많이 사용합니다.
3.No brush : 적용되어 있는 브러시를 제거하거나 아무 색도 지정하지 않게 합니다.
4.Solid color brush : 단색의 브러시를 설정합니다.
5.Gradient brush : 그라데이션이 적용된 브러시를 설정합니다.
6.Tile brush : 타일 타입의 브러시를 설정합니다.
7.Brush Resources : 저장된 브러시 리소스의 목록이 보입니다.
8.Color resources : 저장된 컬러 리소스의 목록이 보입니다.
9.Color : 마우스로 이동하여 색을 선택할 수 있습니다.
10.Spectrum : 스펙트럼을 이용하여 색을 선택할 수 있습니다.
11.Initial color : 처음 색이 보입니다.
12.Current clolor : 현재 선택된 색이 보입니다.
13.Last color : 마지막으로 선택한 색이 보입니다.
14.Color eyedropper : 아이드로퍼를 이용하면 색상표에 있는 색 뿐만 아니라 블렌드의 실행화면 어느 곳에 있는 색이든 모두 선택할 수 있습니다.
15.RGBA : Red, Green, Blue, Alpha 값을 나타냅니다.
16.Convert color to resource : 현재 선택된 색을 컬러 리소스로 저장할 수 있습니다.
17.Hex Value : 현재 선택된 색을 16진수 값으로 표현한 것입니다.
# FF 2A 89 D2
A R G B
18.Opacity : 색의 투명도를 설정합니다.