Gnome Human Interface Guideline 을 따르는 어플리케이션을 glade로 레이아웃을 잡는 것에 대한 요령을 설명하는 글입니다.
이글을 읽기전에 기본적인 Glade 사용법은 안다고 가정하겠습니다.
제가 처음 pygtk와 glade를 사용했을때 나름 쓸만하다고 생각했습니다. 그리고 Gnome hunam interface guideline을 보고 가이드라인에서 제시하는 여백을 가지는 레이아웃을 만들려고했을때 답이 없다고 생각했었습니다.
VBOX, HBOX등의 spacing이나 padding으로는 도저히 여백을 맞출 방법이 없었거든요.
그래서 다른 유명한 glade 기반의 어플리케이션의 glade파일을 분석해본결과 어느정도 해결책을 알게 되었습니다.
먼저 GHIG에서 제시하는 가이드라인을 살펴보면, GHIG에서 제시하는 간단한 여백공식이 있습니다.
a. 각 컴포넌트는 패널 안으로 12픽셀만큼 떨어질것
b. 각 컴포넌트는 가로방향으로는 12 픽셀만큼 떨어질것
c. 각 컴포넌트는 세로방향으로 9픽셀만큼 떨어질것
d. 컴포넌트의 그룹간에슨 세로방향으로 18픽셀만큼 떨어질것.
e. 들여 쓰기 하는 컴포넌트는 12픽셀만큼 들여쓰기할것
깊이 들어가면 더 많이 있습니다만, 이정도만 지켜줘도 다른 GTK 어플리케이션과 어울리는 레이아웃이 나옵니다.
그럼 이러한 여백을 어떻게 만들어줄수 있을까요?
핵심은 논리적 그루핑과 박싱, alignment의 활용에 있습니다.
논리적 그루핑 과 박싱
박싱의 기준은 같은 들여쓰기를 하는 컴포넌트끼리 묶어라입니다.
다음과 같은 UI 가 필요하다고 가정해 보겠습니다.
* 상위 메뉴 1
* 하위메뉴 1
* 상위메뉴 2
얼핏 그냥 3줄짜리 VBOX 를 이용하면 될것 으로 보입니다만, 논리적으로 구분해보면 3개의 박스가 필요합니다.
최외곽 박스, 상위메뉴1+하위메뉴1박스, 하위메뉴1박스입니다.
이 기준은 각각 논리적인 구분에 항목을 추가하면 어떻게 되느냐입니다.
하위메뉴2,3이 늘어날수 있기때문에 하위메뉴들의 박스가 필요하고, 이를 상위와 같이 묶어주기 위한 박스가 필요한거죠.
이런 구조를 가지게 됩니다.
UI 의 논리적 구성이 끝났으니 이제 레이아웃을 손볼 차례입니다.
레이아웃의 핵심은 alignment와 이를 넣기 위한 add parent 기능입니다.
일단 vbox1은 패널로부터 GHIH의 룰 a를 만족시키기 위해서 12픽셀씩 않으로 들어가야 합니다.
이러한 여백을 관리하기 위해서 alignment가 사용됩니다.
그림에서 보이듯이 vbox1에서 우클릭을 하고 add parent-> alignment를 실행시킵니다.
그럼 구조가 위의 그림처럼 변하게 됩니다. 이제 alignment1에 여백을 설정합니다.
그러면 vbox1이 패널로부터 12픽셀만큼 않으로 들어갔습니다.
마찬가지로 GHIH의 룰 e를 만족시키기 위해 vbox3도 들여쓰기를 해야겠지요.
다음은 각 GHIH의 룰 c를 만족시키면 되는데 이것은 vbox의 spacing을 이용하면됩니다.
이렇게 논리적인 박싱과 alignment를 이용하여 Gnome Human Interface Guideline에 따른 UI 레이아웃을 할수 있었습니다.
심화된 내용은 이것을 활용하는것인데 중요한것은 역시 논리적 박싱입니다.
기존의 gtk, pygtk 튜토리얼을 아무리 뒤져봐도 이렇게 어떤 가이드라인에 맞추는 내용이 없어서 고생좀 했고,
이왕 익힌거 간단하게나마 정리해보았습니다.
최근 덧글