STEP 02. 기본 레이아웃

앞에서 블렌드로 디자인을 작업을 할 때 해당 디자인의 표현에 가장 적절한지, 프로젝트의 기능 구현에 부합하는지, 최적화되어 있는지를 고려해야 한다고 했습니다. 그러려면 먼저 디자인과 프로젝트의 구조를 분석 파악한 다음 거기에 맞는 레이아웃을 설계해야 할 것입니다. 그러기 위해서는 각각의 레이아웃 컨트롤들은 어떠한 특성이 있는지, 차이점이 무엇인지 알아야 합니다. 지금부터 실버라이트 기본 레이아웃 컨트롤에 대해서 알아보겠습니다.

● 캔버스 컨트롤
캔버스 컨트롤은 여러 오브젝트를 묶어 그룹화할 때 자주 사용합니다. 그것으로 캔버스 컨트롤은 내부에 다른 요소들을 포함할 수 있다는 것을 알 수 있습니다. 그러한 속성을 종속성 속성(Dependency Property)이라 하고 종속 관계를 부모 객체, 자식 객체로 설명하고 있습니다. 캔버스 컨트롤은 내부에 포함된 자식 객체를 왼쪽(Left)으로부터의 간격과 상단(Top)으로부터의 간격으로 위치를 정합니다. 또한 자식 객체들의 순서(ZIndex)를 정해줄 수 있습니다.

다음은 캔버스를 그려놓은 디자인 뷰와 캔버스 컨트롤 디자인뷰의 XAML 코드입니다. 캔버스 컨트롤이 가진 속성을 한눈에 확인할 수 있습니다.

캔버스 컨트롤 디자인뷰    

캔버스 컨트롤 xaml 코드

1. Background : 배경색
2. Height, Width : 높이, 넓이
3. Canvas.Left, Canvas.Top : 위치값
4. ZIndex : 순서값

[따라하기] 캔버스 컨트롤의 속성 알기 간단한 예제를 통해서 캔버스 그룹화와 컨트롤의 종속성 속성을 알아보겠습니다. 또한 위치 속성(Left, Top), 순서 속성(ZIndex)을 알아보겠습니다. 완성 파일 : Part02/S04_캔버스컨트롤속성 01. 블랜드를 실행하고 [File] -[New Project] 메뉴를 실행하여 실버라이트 애플리케이션 프로젝트를 생성합니다. 툴 박스에서 [Ellipse] 툴을 선택한 후 아트보드에 드래그하여 원을 그리고 [Properties]-[Brushes] 패널에서 [Fill]의 색상을 설정 합니다. 02. 툴 박스에서 [Selection] 툴을 선택한 후 원을 <Alt>+<shift>를 누른 채 드래그하여 다음과 같이 세 개를 복사하고 각각 색상을 설정합니다. 네 개의 원을 드래그하여 모두 선택한 후 마우스 오른쪽 버튼을 클릭하여 나타나는 메뉴에서 [Group Into]–[Canvas]를 클릭하여 그룹화합니다. 03. 캔버스 영역을 보기 위해서 [Properties]-[Brushes] 패널에서 [Solid color brushes] 버튼을 클릭하여 [Backgroud]의 색상을 검은색으로 설정합니다. <TIP> 캔버스 컨트롤을 드래그하면 캔버스에 속해있는 원들이 같이 이동합니다. 04. <shift>를 누른 채 4개의 원 오브젝트들을 클릭하여 모두 선택한 다음 [Properties]-[Layout] 패널에서 [Width]를 ‘170’, [Height]를 ‘170’으로 설정하여 원의 크기를 키웁니다. 커진 원들이 캔버스 그룹을 벗어났습니다. <TIP> 그린 원의 [Width]와 [Height]가 170보다 더 크다면 그보다 큰 숫자를 입력하여 원의 크기를 기웁니다. 05. 캔버스의 빈 공간을 클릭하여 선택을 해제한 후 캔버스 그룹을 벗어난 원 오브젝트들을 하나씩 드래그하여 캔버스 안쪽으로 위치를 이동합니다. 원 오브젝트를 이동함에 따라 Left와 Top의 속성값이 변하는 것을 확인할 수 있습니다. 06. 왼쪽 상단 원 오브젝트를 클릭하여 선택한 후 [Properties]-[Layout] 패널의 [ZIndex] 값을 ‘1’로 설정합니다. 레이어 상에서 밑에서 두 번째로 위치한 원이 가장 위로 올라왔습니다. <TIP> [ZIndex]는 레이어 순서에 상관없이 계층의 순서를 정합니다. NOTE 4개의 원이 캔버스 컨트롤로 그룹이 되었습니다. 이때 캔버스 컨트롤은 부모 개체가 되고 4개의 원들은 자식 개체가 되어서 부모 개체에 종속되었습니다. 이런 방법으로 상위 레이아웃 컨트롤은 부모 개체가 되어서 하위의 자식 개체들을 감싸고, 자식 개체는 그 하위 개체의 부모 개체가 되어서 전체적인 레이아웃을 구성하게 됩니다.

● 리아의 화면 구성
웹 디자인은 기존 인쇄물 디자인의 레이아웃에서 출발하였기 때문에 처음에는 페이지 단위의 구성과 시각적 표현이 우선시 되었습니다. 따라서 웹 디자인은 기존의 인쇄 디자인(편집 디자인, 그래픽 디자인)을 답습, 모방해왔지만, 점점 웹 사이트의 구조가 복잡해지고 대규모화되고 용도도 다양해지면서 새로운 방법을 모색할 수밖에 없게 되었습니다.
사용자의 관점에서 인터페이스 및 사용자들이 경험하는 모든 환경을 개선하는 하고자 하는 UX 디자인(User experience, 사용자 경험을 고려한 디자인)이 그 예입니다.
그리고 현재 UX 디자인이 강조된 RIA 애플리케이션(Rich Internet Application)이 떠오르고 있고, 그 가운데 실버라이트 플렛폼이 막강하게 자리 잡고 있습니다.

리아 화면은 일반적으로 기존 웹 페이지들이 페이지 단위로 화면을 보여주었던 것과 달리, 페이지가 바뀌지 않는 상태에서 정보들을 유연하게 보여주는 것을 말합니다.
또한 콘텐츠를 클릭할 시 해당 페이지를 다시 불러오는 대신에 동일한 화면에서 바로 콘텐츠만 바뀌는 즉각적인 인터렉션이 이루어짐으로써 로딩 시간을 최소화하고, 단순하고 직관적인 레이아웃을 구성할 수 있습니다. 이를 통해서 사이트 방문자들은 사이트의 방대하고 복잡한 정보를 표시해놓은 메인 페이지에서 원하는 콘텐츠를 찾기 위해 여러 페이지를 클릭하고 기다리고 헤매어야 하는 수고에서 벗어날 수 있게 됩니다.

또한 텍스트나 이미지뿐만 아니라 유기적이고 다이내믹한 멀티미디어 콘텐츠들을 얼마나 효과적으로, 얼마나 참신한 방법(쉬운 전달)으로 보여주는가 하는 문제도 다루어야 합니다.

STEP 01. 레이아웃이란?

일반적인 레이아웃의 의미와 레아이웃의 중요성을 알아보고 실버라이트 레이아웃의 특성을 살펴보겠습니다. 실버라이트 레이아웃을 알아가면서 틀에 박혀있는 기존 레이아웃과 어떻게 다른지 비교해보기 바랍니다. 자유롭고 무한한 가능성에 여러 가지 아이디어들이 샘솟는 즐거움을 느낄 수 있을 것입니다.

흔히 레이아웃이라고 하면 인쇄물(책, 카탈로그, 잡지, 신문, 브로슈어 등)의 구성 요소들의 배열 및 편집을 위한 가이드라인을 떠올릴 수 있습니다. 또한 웹 디자이너라면 웹 페이지의 구성, 테이블 나누기 등이 생각나겠죠? 우리가 눈으로 보는 모든 비주얼 요소들은 정해진 틀과 레이아웃을 가지고 있습니다.

즉, 디자이너는 블렌드로 디자인을 작업을 할 때 해당 디자인의 표현에 가장 적절한지, 프로젝트의 기능구현에 부합하는지, 최적화되어있는지를 생각해야 합니다. 그러한 이유로 레이아웃의 구성 또한 개발자와 디자이너의 긴밀한 협업이 필요합니다.

레이아웃은 기본개념은 사람들이 글을 쓰고 그림을 그릴 때부터 시작됐겠지만, 활자 인쇄기술이 발명되어 출판이 본격적으로 시작되고 정보의 축척과 유통이 가속화됨에 따라 그 필요성이 더욱 크게 부각되었고 우리는 점점 더 다양하고 아름다운 레이아웃을 접하게 되었습니다. 디자이너들에게 레이아웃은 규칙적인 배치뿐만 아니라 효과적인 정보전달을 위한 주목성과 가독성, 명쾌성도 고려해야 합니다. 또한 텍스트, 이미지와 같은 오브젝트들의 조화성, 독자적인 창조성까지 표현해야 하며 이러한 전체적인 정보와 비주얼을 통찰하여 구성하고 조합하는 능력까지 요구됩니다.

익스프레션 블렌드의 레이아웃 다루기

블렌드의 레이아웃에 대해 알아봅니다. 블렌드의 레이아웃이 기존의 레이아웃과 어떻게 다른지, 현재 웹 레이아웃과 어떤 관련성이 있는지 천천히 살펴보겠습니다. 실버라이트 프로젝트는 리아 화면 구성을 기본으로 하고 블렌드에서는 그러한 레이아웃 구현을 위해 캔버스, 그리드, 스택패널 등 여러 가지 레이아웃 컨트롤들을 활용하고 있습니다. 실버라이트 레이아웃의 특징과 레이아웃 컨트롤들의 속성과 기능을 파악하고, 내가 작업하고자 하는 레이아웃과 그에 맞는 컨트롤은 어떤 것인가를 염두에 두고 살펴보시길 바랍니다.

http://www.digigroove.co.kr

http://www.microsoft.com/silverlight/