[펌] 레이아웃 시스템 개념 이해하기

이 내용은 2011년 6월 현재 Silverlight5 Beta를 기준으로 작성 되었으며 Silverlight5 공식버전(RTM) 발표까지 꾸준히 업데이트 예정입니다.
아울러, 현재 Beta버전이지만 강좌를 따라해 보시는데 아무 문제 없으실거에요. 도움 되시길 바랍니다.
==================================================================================================

클라이언트 프로그램을 만들 때 가장 중요한 것 중의 하나가 UI 제작이죠.

실버라이트의 UI 개발은 WinForm 개발과 비슷한 면이 있습니다. (당연한 거지만 WPF와는 거의 같습니다.^^)

제공되는 컨트롤들을 화면에 올려서 배치함으로써 UI를 구성하게 되지요.

UI를 구성하는데 가장 중요한 것 중의 하나가 컨트롤의 배치, 즉 레이아웃입니다.

한 가지 예를 들어보죠. 화면에 버튼이 5개가 있는데 삐뚤삐툴 배치가 되어 있으면 누구나 좋지 않게 생각할 겁니다.

컨트롤들을 잘 정렬하여 배치하는 것은 개발자(또는 디자이너)에게 당연한 일입니다.

그런데, 이 당연한 일을 하기 위해서 지금까지는 코딩 노가다를 해야 합니다. 예를 들어서 VB6 응용 프로그램을 만들 때 버튼을 항상 우측 하단에 있게 하려면 Form _Resize 이벤트에서 코드로 위치를 맞춰야 했습니다. WinForm으로 넘어와서는 Anchor, Dock 및 특수한 패널들이 생겨서 이런 노력이 좀 줄어들긴 했지만 여전히 노가다는 존재하지요.

실버라이트가 생산성이 높은 이유중의 하나가 바로 컨트롤의 배치를 코드 없이도 자동으로 할 수 있다는 것입니다. 이를 위해 실버라이트에서는 Panel을 기반으로 하는 강력한 레이아웃 시스템을 제공합니다.

실버라이트의 레이아웃 시스템은 다음과 같은 특징을 가집니다.

Auto-Size
현재 상황에 맞게 자동으로 크기가 결정됩니다.
Auto-Positioning
현재 상황에 맞게 자동으로 위치도 결정됩니다.
Auto-Arrange
현재 상황에 맞게 자동으로 정렬됩니다.
Auto-Fill
현재 상황에 맞게 컨트롤 영역을 채웁니다.
Margin, Padding
Margin과 Padding을 이용하여 다른 컨트롤 또는 영역과의 여백을 처리합니다.

위에서 “현재 상황”이라는 아주 애매한 용어를 사용했는데, 구성한 레이아웃과 현재 컨트롤의 배치 상황에 맞게 자동으로 맞춰줍니다. 물론, 자동으로 맞추기 위한 여러 가지 룰이 존재하는데 이 강좌에서는 큰 그림만 살펴보도록 하겠습니다.

어쨌든, 실버라이트의 강력한 레이아웃 시스템 덕분에 대부분의 경우 컨트롤의 위치를 일일이 코드로 조절해야 할 필요가 없습니다. 따라서 쓸데없는 코드도 많이 줄어들겠죠?

위에서 실버라이트는 Panel을 기반으로 하여 레이아웃을 구성한다고 말씀드렸는데, Panel이 뭘까요?

한 마디로 Panel은 다른 컨트롤을 자식으로 가지는 컨테이너입니다. 윈도우 개발자라면 이미 알고 계시는 Panel과 거의 같은 개념이며, 웹 개발자라면 DIV 태그와 비슷하다고 보면 되지 않을까 싶군요.

확실히, 실버라이트는 여기저기에서 윈도우 응용 프로그램 개발과 유사한 점이 많습니다. 그래서 윈도우 개발자들이 좀더 쉽게 적응하는 듯 합니다.^^

본격적인 이야기에 들어가기 앞서서, 레이아웃과 관련하여 개발자와 디자이너의 시각 차이를 그림으로 보도록 하죠.

일반적인 디자이너들은 포토샵과 같은 디자인 프로그램 덕분에 레이어라는 개념에 익숙합니다. 보통 레이어 시스템에서는 모든 레이어의 크기가 동일하고 항상 작업 영역 전체를 차지합니다. 게다가 좌상단이 항상 0,0이죠.

개발자는 Panel 개념에 더 익숙합니다. Panel은 컨트롤들을 그룹으로 만들어주며 레이어와는 달리 화면의 일부분만 차지할 수 있죠. 파워포인트의 그룹 개념과 유사하다고 보시면 됩니다.

그런데, 왜 갑자기 레이어와 패널 이야기를 하냐면…. 실버라이트 개발 경험이 없는 디자이너 분들이 실버라이트용 UI를 설계할 때 Panel의 개념이 아닌 Layer 개념으로 디자인하는 경우가 많기 때문입니다. 그래서 디자인 시안을 그대로 살리지 못하고 다시 만드는 경우가 종종 있습니다.^^; 참고로 Adobe Flash Pro는 포토샵과 같이 Layer 개념을 사용하는 걸로 알고 있습니다.

현실에서 이게 문제가 되는 경우가 있는데… 포토샵이나 일러스트레이터로 UI를 디자인 한 다음 Expression Blend로 불러오는 경우입니다. 포토샵이나 일러스트레이터는 레이어 개념인데 Expressen Blend는 레이어보다는 패널 개념을 주로 사용하기 때문에 디자인 시안을 그대로 적용하지 못하는 경우가 발생하거든요. 뭐 그대로 사용할 수도 있긴 한데 브라우저 창 크기에 따라 동적으로 UI가 변경되게 해야 할 경우에는 Panel을 이용하여 레이아웃 구성을 변경해줘야 합니다. 안 그러면 여러분 앞에는 엄청난 코딩 노가다가 기다리고 있게 될 겁니다.

그래서, 디자이너 분들은 패널 개념을, 개발자 분들은 레이어 개념을 이해하고 계셔야 협업할 때 좋습니다^^

Panel의 가장 큰 특징 중의 하나는 Panel의 특성에 따라서 자식 요소를 자동으로 배치해준다는 것입니다. 바로 이 기능 덕분에 실버라이트에서 자동 레이아웃이 가능해지고, 코드로 컨트롤을 배치하는 노가다가 확 줄어버립니다.

그런데… 아까부터 자동, 자동 하는데 뭔가 규칙이 있어야만 자동으로 컨트롤을 배치할 수 있지 않을까 하는 생각이 들지 않으세요?

네~ 실버라이트에는 각 목적에 맞도록 여러 가지 Panel들이 있고,각 Panel마다 자식 컨트롤을 배치하는 규칙을 가지고 있습니다.

다음은 실버라이트 런타임에서 기본적으로 Panel들 입니다.

Canvas	좌상단을 기준으로 지정된 left,top만큼 떨어뜨려서 컨트롤을 배치합니다. 우리가 이미 잘 알고 있는 방식이죠.
StackPanel	가로 또는 세로로 컨트롤을 차곡차곡 배치합니다.
Grid	표 형태로 컨트롤을 배치합니다.
Border	하나의 자식 컨트롤만 가질 수 있으며 테두리 모양을 마음대로 바꿀 수 있습니다.

어라? 달랑 4개만 가지고 “완전 자동!”이 가능하다구요? 완전자동까지는 아니지만 꽤 자동이 됩니다~

그리고, 위 4개 말고도 나만의 Panel을 만들 수 있기 때문에 사실상 수많은 Panel일 존재한다고 보시면 됩니다.

일례로 Silverlight ToolKit이라는 MS에서 제공하는 추가 컨트롤을 이용하면 WrapPanel, DocPanel과 같은 추가 Panel을 사용하실 수 있습니다. 물론 여러분이 Custom Panel을 만드실 수 도 있습니다. Custom Panel을 만들 때 자식을 어떤 식으로 배치할 지 코드로 구현하게 됩니다. 예를 들면 자식 컨트롤들을 원형으로 배치하는 Panel을 만드실 수도 있겠지요.

어쨌든, 내가 만들든 남이 만들어놓은 Panel을 사용하던지 간에 Panel들을 적절히 이용하면 대부분의 컨트롤들을 자동으로 배치할 수 있다는 겁니다.

그럼, 실버라이트에서 제공하는 각 Panel들에 대해서 살펴보기로 하죠.

Canvas

Canvas는 우리가 예전에 했던 것처럼 좌상단을 기준으로 가로로 얼마, 세로로 얼마에 컨트롤을 배치하는 형태입니다. 사실 Canvas는 자동과는 거리가 먼 Panel이지만 레이아웃의 가장 기본이라 할 수 있죠.

<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<Button Canvas.Left="52" Canvas.Top="44" Content="Button" Height="36" Width="110" />

<TextBlock Canvas.Left="34" Canvas.Top="100" Height="65" Text="TextBlock" Width="163" />

</Canvas>

위 XAML에서 보시듯이 좌상단을 기준으로 하여 Canvas.Top과 Canvas.Left 값을 이용하여 컨트롤의 위치를 지정합니다.

“뭐야 완전 수동이자나!” 하시겠지만 Canvas도 나름대로 사용처가 있습니다. Canvas는 크기가 고정되어 있는 UI를 만들 때, 포토샵이나 일러스트레이터로부터 디자인을 가져올 때 사용하면 좋습니다.

그리고 나만의 Custom Panel 제작이나 애니메이션을 만들 때에도 좋습니다. Canvas.Top과 Canvas.Left 값을 쉽게 애니메이션으로 바꿀 수 있기 때문이죠.

그리고 한가지 더, Canvas의 자식들은 Z축 순서를 조절할 수 있습니다. Canvas.ZIndex="1" 과 같이 쉽게 Z축 순서를 조절할 수 있지요. 다른 Panel들에서는 나중에 추가한 자식이 맨 위로 올라오게 됩니다.

StackPanel

StackPanel은 자식들을 가로 또는 세로 방향으로 차곡차곡 쌓아주는 Panel입니다. 아마 실버라이트를 하시는 동안에 엄청 자주 사용하게 되실 Panel이죠.

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Top"

Orientation="Vertical"

Width="100" Background="AliceBlue">

<Button Content="Button" Margin="10"/>

<Button Content="Button" Margin="10"/>

<Button Content="Button" Margin="10"/>

<TextBlock Text="Text1" Margin="10" HorizontalAlignment="Center"/>

</StackPanel>

<StackPanel VerticalAlignment="Bottom"

Orientation="Horizontal"

Height="50" Background="Aquamarine">

<Button Content="Button" Margin="10"/>

<Button Content="Button" Margin="10"/>

<Button Content="Button" Margin="10"/>

<Button Content="Button" Margin="10"/>

<TextBlock Text="Text1" Margin="10" VerticalAlignment="Center"/>

</StackPanel>

StackPanel에서는 Orientation 속성을 이용하여 자식들을 배치하는 방향을 지정할 수 있습니다. 위 XAML 에서 보시면 위쪽 StackPanel은 Orientation이 Vertical이고 아래쪽 StackPanel은 Horizontal이죠. StackPanel은 툴바와 같이 컨트롤을 정렬해서 보여줘야 할 때 사용되며, 단독으로 사용되기보다는 Grid와 같은 다른 Panel안에 넣어서 사용하게 됩니다.

그런데, 위 XAML을 보시면 Width와 Height가 딱 한 번씩밖에 안 들어가 있네요.

자, 이제부터 실버라이트의 자동 배치 기능이 작동하기 시작합니다.^^

위 XAML을 보시면 각 Button마다 크기를 지정하는 대신 StackPanel의 Width 또는 Height만 이용하여 버튼의 크기를 한꺼번에 맞추고 있습니다. 위쪽 StackPanel에서는 Width=”100”으로 설정함으로써 모든 자식들의 크기를 100으로 만들어버리고 있죠. 그리고 각 Button의 사이의 간격은 Margin 속성을 이용하여 조절하고 있습니다.

바로 이렇게 실버라이트에서는 부모 Panel의 크기를 변경함으로써 자식들의 크기를 일괄적으로 바꿀 수가 있습니다. 물론 Panel의 위치를 옮기면 자식들도 당연히 같이 따라가지요. 만약 세로로 정렬된 버튼들을 화면 왼쪽에 맞추고 싶으면 HorizontalAlignment=”Left”로 하면 끝나지요.

반대로, 자식들의 크기에 따라서 StackPanel의 크기가 결정될 수도 있습니다. 아래 예를 보시면 3개 중 2개의 버튼의 Width를 명시적으로 지정했더니 부모 StackPanel이 자식 Button들 크기에 맞게 자동으로 크기가 바뀌었음을 보실 수 있습니다.

여기서 잠깐…

실버라이트의 자동 레이아웃 시스템은 어떤 식으로 동작할까요?

기본적으로 컨트롤에 명시적으로 Width와 Height값을 지정하지 않으면 상황에 맞게 크기가 결정됩니다. 실버라이트의 모든 Panel은 다음과 같이 자식 컨트롤의 크기와 위치를 결정합니다.

1) Panel의 예상 크기를 계산합니다.

만약 Panel의 크기를 명시적으로 지정하지 않았으면 자식 컨트롤들의 예상 크기를 계산하여 부모가 되는 Panel의 크기를 계산합니다. 위의 예로 설명한다면 자식들 중에서 가장 큰 녀석의 Width가 120고 여기에 Margin이 10이므로 최대 가로 길이는 140이 되겠죠. 그리고 세로 길이는 각 자식 컨트롤들의 Height와 Margin을 모두 더한 값이 될 겁니다.

(여기서 Button의 Height는 버튼 텍스트의 폰트 크기 + 위쪽 Padding값(기본값은 3) + 아래쪽 Padding값(기본값은 3)이 됩니다.)

2) 자식들을 배치합니다.

Panel의 예상 크기가 결정되었으면 자식들의 예상 위치와 크기를 계산합니다. 위의 예에서 첫 번째와 두 번째 Button은 명시적으로 Width를 설정했으니 그 값대로 크기가 결정되는데, 세 번째 Button은 Width가 지정되어있지 않네요. 그런데 HorizontalAligment 속성의 기본값은 Stretch로서 해당 영역을 꽉 채우게 되어 있습니다.

즉, 세 번 째 Button은 HorizontalAligment='”Stretch”인 셈이므로 부모 StackPanel의 Width에서 Margin만큼 뺀 값이 Width가 됩니다. 따라서 자식들 중 Width가 가장 긴 두 번째 button과 같은 길이가 됩니다.

만약, 세 번째 button의 HorizontalAlignment를 Left로 설정하면 다음과 같이 배치가 되겠죠.

정리 해봅시다.

1) 실버라이트의 각 Panel은 자식들을 배치하는 룰을 내장하고 있습니다. 예로 StackPanel은 한 방향으로 컨트롤을 쌓는 것이 이 Panel의 룰입니다.

2) 자식 컨트롤의 크기는 Width나 Height값을 명시적으로 지정하지 않으면 상황에 맞게 크기가 결정됩니다. 이 때, 자식 컨트롤의 HorizontalAlignment, VerticalAlignment, Margin값에 따라서 크기와 위치를 조절할 수 있습니다.

3) 만약 명시적으로 Width와 Height를 지정한 경우에는 그 값을 우선적으로 사용하면서 HorizontalAlignment, VerticalAlignment, Margin값을 고려하여 위치가 결정됩니다.

복잡한 것 같지만 직접 해보시면 매우 직관적이고 쉽습니다^^

하나 더, 아까 Canvas가 코드로 위치를 제어하기 가장 쉽다고 했는데, 다른 Panel에서는 left, top이 아니라 Alignment와 Margin으로 컨트롤의 위치를 제어해야 하기 때문에 명시적으로 위치를 지정해야 할 때는 Canvas쪽이 직관적이고 쉽습니다.^^

Border

사실 Border는 엄밀히 말하면 Panel이 아닙니다. 다른 Panel과 달리 Panel 클래스로부터 상속되어 있지 않죠. 그런데, Expression Blend의 UI구성 덕분에 Panel 비슷한 녀석으로 인식되고 있습니다.

Border는 다른 Panel과는 달리 단 한 개의 자식 요소만을 가질 수 있습니다. 따라서 Border 안에 여러 개의 컨트롤을 추가하면 컴파일 할 때 XAML 에러가 발생하게 됩니다.

현실적으로 Border의 사용 용도는 딱 하나입니다. 바로 테두리를 예쁘게 꾸밀 때 사용됩니다.

다음은 Border의 사용 예입니다. Visual Studio에서는 Border의 실제 모양이 표시가 안되어서 Expression Blend로 보여드리게 되네요.

Border는 실버라이트의 기본 컨트롤 중에서 유일하게 4군데의 테두리 둥글기와 두께를 각각 지정할 수 있는 컨트롤입니다. BorderThickness와 CornerRadius가 바로 이를 위한 속성들이죠. 그래서 위와 같이 위쪽만 둥근 사각형 모양을 만들 수가 있습니다.

Border를 얼마나 잘 이용하느냐에 따라서 프로그램이 이쁘냐 마냐가 결정되니 주로 디자이너 분들이 잘 사용해주셔야겠죠?^^

이번 강좌에서는 실버라이트의 레이아웃 시스템과 기본 Panel들에 대해서 살펴봤습니다.

그런데 Grid가 빠졌죠? Grid는 워낙 강력한 Panel이라서 다음 강좌에서 설명 드리도록 하겠습니다.

Silverlight5 동영상 강좌 리스트

출처 - http://www.sqler.com/382359

저작자표시 비영리 변경금지

[Congi]은비냥의 티스토리♥

[펌] 레이아웃 시스템 개념 이해하기

티스토리툴바