첫 안드로이드 어플 만들기에서 화면에 표시할 문자열을 지정하기 위해 res>layout>main.xml을 더블클릭해서 내용을 확인했는데, 이때 보이는 화면이 Graphical Layout Editor 이다. 비쥬얼스튜디오를 사용해 본 개발자라면 리소스 편집기와 비교하면 쉽게 이해 할 수 있다. 

비쥬얼스튜디오의 리소스편집기의 역할은 버튼이나 텍스트박스, 리스트등의 컨트롤을 개발자가 드로잉하여 속성을 설정하면 *.rc 파일에 텍스트 형태로 저장하듯이, 

Graphical Layout Editor의 역할도 개발자가 버튼이나 텍스트를 비롯한 다양한 컨트롤을 배치하고 속성을 설정하면 *.xml 파일에 XML(텍스트 파일) 형태로 편집 내용을 저장하는 것이다. 그래서 하단의 Graphical Layout Editor 탭을 클릭해서 편집할 수도 있고, main.xml 탭을 클릭해서 직접 XML로 코딩할 수도 있다. 이번 포스팅에서는 Graphical Layout Editor를 위주로 설명할 까 한다.

보다 손쉽게 다양한 컨트롤 속성을 파악하기 위해서 그림 설명과 같이 하단에 있는 속성(Properties)창을 패키지 탐색기 옆으로 끌어다 놓는 방식으로 이동시킨다.


속성창을 패키지 탐색기 옆으로 이동시켜놓은 다음 "안녕하십니까?....."스트링을 선택하고 이때, 텍스트 박스에 해당하는 속성들과 설정한 값을 아래와 같이 확인했다.


Graphical Layout Editor를 사용할때는 좌측으로 옮겨놓은 속성창과(Property와 Value로 나뉘는데 Value 셀을 클릭해서 설정할 수 있다)
우측에 있는 현재 화면의 전체적인 골격을 나타내는 Outline창(속성창에서 값을 바꿀수도 있지만 Outline의 특정 Object를 우측 마우스로 클릭할때 나오는 아래 그림과 같은 팝업메뉴로도 변경 할 수 있다) 

그리고 중앙 좌측의 Palette영역과(Palette제목이나 그룹 제목을 우측 마우스로 클릭하면 팝업메뉴가 나오는데 다양한 컨트롤을 미리보기나 작은 아이콘 배열, 분류 보기 등으로 조절할 수 있다) 

Palette영역에 있는 각종 컨트롤을(위젯이라고 부른다) 끌어다 놓는 방식으로  UI를 편집하는 Canvas영역, 
끝으로 Canvas 상단의 Configuration Chooser를 상호 참조하면서 작업한다.


* 주요 컨트롤 속성 다루기
컨트롤을 캔버스에 배치하고 속성을 설정하는 과정에서 자주 사용하는 설정을 위한 캔버스 상단에 기능 버튼들을 두었는데, 각각의 설명은 다음과 같다.

Set Horizontal Orientation : Linear layout을 가로 방향으로 배치Set Vertical Orientation : Linear layout을 세로 방향으로 배치Toggle Fill Width : wrap_content와 match_parent를 토글 방식으로 설정, 선택하면 match_parent
wrap_content는 컨트롤 자체의 내용 만큼만 폭이나 길이를 갖겠다는 것이고,
match_parent는 컨트롤이 속한 상위 요소의 폭이나 길이를 채우겠다는 의미로 예제에서 텍스트 박스 폭을 레이아웃에 가득차게 한것이다. 이 옵션을 많이 사용할 텐데, 기기를 가로로 하든 세로로 하든 폭이나 길이를 자동으로 꽉 채워 표시한다.Toggle Fill Height : wrap_content와 match_parent를 토글 방식으로 설정, 선택하면 match_parentChange Margins... : 컨트롤과 상위요소 간의 간격을 조정한다. 이 간격(Margin)은 컨트롤 내에서 경계와 실제 내용 간격을 지정하는 Padding과는 구별된다.
Change Gravity : 개별 컨트롤 경계 내에서 내용을 어떻게 표시할 것인지를 지정한다.
Distribute Weight Evenly : 레이아웃 내에 여러 컨트롤을 자동적으로 폭이나 길이 조정하는 경우 각 컨틑롤이 동일한 크기가 되도록 가중치를 동일하게 배분한다.Assign All Weight : 선택한 컨트롤에 모든 가중치를 부여Change Layout Weight : 선택한 컨트롤의 가중치를 직접 수정Clear All Weight : 입력되어 있는 모든 가중치를 초기화Toggle Fill WidthToggle Fill HeightChange Margins...Show Lint Warnings for this layout : UI작성 과정의 불필요한 자원 할당등을 알려준다.

* Layout의 종류
UI 구성 방법은 자동으로 생성된 첫 안드로이드 어플 처럼, 먼저 레이아웃을 배치하고 그 레이아웃에 위젯이나 다른 레이아웃을 포함하여 배치시키는 방법으로 구성한다. 구성 요소들의 성격과 개수등을 감안하고 동작형태를 생각해서 적당한 레이아웃을 선택하는 것이 매우 중요하다.

윈도우 내에 표시하는 텍스트나 이미지, 편집창등의 배치를 단순히 폰트의 크기나 픽셀에 의존하면, 운영체제의 전체적인 테마 변경이나, 시스템 폰트 변경등에 의해 원래 개발자의 의도를 벗어나 각 요소의 배치가 흐트러지는 문제가 있다. 그리고 현재의 여러 기기에서 제공하는 다양한 화면 크기나 해상도에 비추어 보면 픽셀크기나 개발 시점의 보여지는 모습에 의존한 요소 배치는 한계가 있음을 동의할 것이다.

이렇게 스타일이나 테마, 폰트 종류나 화면 크기에 관계없이 융통성있는 UI를 만들기 위한 요소가 바로 레이아웃이다. 미리 정해진 틀속에 개별 구성 요소를 배치하는 방식으로, 프로그램에서는 틀에 전체적인 컨트롤을 지정하면 각 레이아웃이 포함된 구성요소의 표시를 책임진다. 이런 레이아웃은 데스탑 응용에서도 활용되고 있는데, 대표적인 것이 바로 이클립스에 적용되어 있는 RCP(Rich Client Platform)이다.


Linear Layout : 구성요소들을 순서대로 이어서 표시하는 레이아웃으로 Orientation에 따라 수직으로(Vertical), 수평으로(horizontal) 배치한다. 
(참조 샘플 : http://developer.android.com/resources/tutorials/views/hello-linearlayout.html)Relative Layout : 구성요소들을 레이아웃이나 구성요소를 기준으로 어디에 배치할 것인지를 지정하는 방식이다. 

그림에서 보듯이 "Medium Text"는 Layout to right of @+id/textView1로 지정한 것처럼 TextView의 우측에 배치하고 Layout align top @+id/textView1로 TextView의 꼭대기에 맞추는...방식이다. 첫번째 텍스트는 Layout align parent left와 Layout align parent top이 true로 되어 있는데 parent가 레이아웃이므로 기준점이 레이아웃인것이다. 캔버스에 각 요소별로 기준점이 어디인지 화살표로 나타내준다. 
Realtive layout 상태에서는 상단에(화살표) Center Vertically, Center Horizontally, Show Constraints, Show All Relationships라는 버튼이 추가로 생기므로 풍선 도움말을 참조하여 적절히 사용한다. (Graphical Layout Editor 에서도 직전 작업 취소, Ctrl+Z를 지원하므로 상세한 설명보다는 과감한 시도를 추천한다)
(참조 샘플 : http://developer.android.com/resources/tutorials/views/hello-relativelayout.html)Frame Layout : 구성요소들을 좌상단을 기준으로 겹쳐서 배치하는 가장 단순한 형태의 레이아웃이다. 먼저 추가된 요소가 아래로 내려간다. 필요에 따라 visible을 조정하는 방식으로 사용하거나 탭구성에 응용하기도 한다.Include Other Layout : 다른 XML Layout을 그대로 포함시킬 때 사용한다. 예제에서는 main.xml XML Layout을 사용하고 있는데 이와 같은 다른 사용자 XML Layout을 내포하거나 아래 그림과 같이 시스템 레이아웃을 불러들일 수 있다.

Table Layout : 그림과 같이 Table Row 레이아웃과 연과지어 구성요소를 배치하는 형태이다.
(참조 샘플 : http://developer.android.com/resources/tutorials/views/hello-tablelayout.html)Table Row : Table Layout을 구성하는 요소로 Table Row를 선택하면 상단에 Remove Table Row, Add Table Row 버튼이 추가되어 행 추가나 삭제가 가능하다.

* UI 구성에 사용 할 수 있는 다양한 위젯 알아보기
아래에 나열한 위젯들은 파레트에서 캔버스로 끌어다 놓고 필요한 속성을 설정하는 방법으로 사용한다.Form Widgets : 가장 많이 사용되는 요소들로 어떤 것들이 있는지 꼭 확인하고 부품으로 잘 활용할 수 있으면 좋겠다.

TextView : Edit Text 메뉴로(우측 팝업메뉴) 표시할 텍스트 수정가능Large Text : 큰 텍스트Medium Text  : 중간 텍스트Small Text :작은 텍스트CheckedTextView : TextView를 기반으로 Checkable 기능을 적용한 것으로 텍스트 뒤에 체크 박스가 붙음Button : 일반 버튼으로 TextView를 상속
(사용법 참조 : http://developer.android.com/reference/android/widget/Button.html)Small Button : 작은 버튼Toggle Button : Edit Text Off, Edit Text On으로 상태에 따른 텍스트를 지정할 수 있다. 
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-formstuff.html#ToggleButton)CheckBox : 체크 박스 컨트롤 
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-formstuff.html#Checkbox)RadioButton : 라디오 버튼 컨트롤 
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-formstuff.html#RadioButtons)Spinner : 한 아이템씩 보여주며 선택할 수 있도록 한다. Edit Entries, Edit Prompt로 항목을 지정할 수 있다. 
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-spinner.html)Horizontal ProgressBar : 진행 상황 보여주기 
(사용법 참조 : http://developer.android.com/reference/android/widget/ProgressBar.html)SeekBar : Horizontal ProgressBar를 확장한 것으로, Edit PaddingLeft, Edit PaddingRight, Edit Thumb으로 조정한다.QuickContactBadge : QuickContact 이미지를 보여주고, 클릭을 통해 주소록 정보를 가져올 수 있다.Large/Normal/Small ProgressBar : Edit MAX등으로 값을 조절할 수 있다.Radio Group : 자동 선택이 감안된 라디오 컨트롤. 수평/수직 배열이 가능하다.RatingBar : Edit NumStars, Edit Stepsize로 조절할 수 있다.
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-formstuff.html#RatingBar)Text Fields : 단순 텍스트를 입력받는 Plain Text부터 이름 입력에 특화된 Person Name Field등 다양한 텍스트 필드를 배치할 수 있다. 자동 완성 기능 이외는 대부분 InputType 속성이 지정되는 형태로 사용한다.



Plain Text : 일반 텍스트 입력 
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-formstuff.html#EditText)Person Name : InputType = TextPersonNamePassword : InputType = TextPasswordE-Mail : InputType = TextEmailAddressPhone : InputType = PhonePostal Address : InputType = TextPostalAddressMulti Line Text : InputType = TextMultiLineTime : InputType = TimeDate : InputType = DateNumber : InputType = NumberNumber(Signed) : InputType = NumberSignedNumber(Decimal) : InputType = NumberDecimalAutoCompleteTextView : Hint를 지정하면서 자동완성 기능을 부여할 수 있다.MultiAutoCompleteTextView : 여러라인으로 입력하는데 자동완성 기능 부여Composite : 여러 요소들을 복합적으로 결합하여 개발자에게 개발 편의성을 제공한다.

ListView : 수직으로 아이템들을 스크롤 형태로 보여주는 컨트롤. 
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-listview.html)ExpandableListView : 2-level로 확장할 수 있는 ListViewGridView : 아이템들을 2차원 스크롤 형태로 보여주는 뷰
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-gridview.html)ScrollView : 실기기의 화면 크기보다 큰 내용을 스크롤 형태로 볼수 있도록 해주는 레이아웃 컨테이너이다. 즉, 다른 레이아웃들을 포함하는 형태로 주로 Vertical Linear Layout이 기본 장착된다.HorizontalScrollView :  수평 방향SlidingDrawer : 화면보다 큰 내용을 Drag형태로 보이기/숨기기한다.WebView : 웹브라우저를 포함할 때 사용한다.
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-webview.html)TabHost : 탭 형태 윈도우를 표시하는 뷰로, 각 탭을 표시하는 TabWidget과 각 탭의 내용을 담고 있는 FrameLayout을 가진다.
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-tabwidget.html)TabWidget : TabHost와 연동하여 각 탭을 표시한다.
Images & Media : 이미지 및 비디오 관련 컨트롤

ImageView : 크기조정, 색 옵션 등과 함께 이미지를 출력한다.ImageButton : 이미지 버튼을 표시한다. 눌렀을때, 포커스 상태의 이미지도 지정할 수 있다.
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-formstuff.html#CustomButton)MediaController : MediaPlayer를 가지는 컨트롤로 Play/Pause, Rewind, Fast Forward, Progress Bar를 표시한다.VideoView : 비디오 파일을 출력하는 컨트롤Gallery : 화면 가운데에서 가로로 스크롤하는 갤러리를 보여주는 컨트롤
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-gallery.html)Time & Date : 

TimePicker : 시간 입력 컨트롤
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-timepicker.html)DatePicker : 일자를 Spinner나 달력으로 선택할수 있는 컨트롤
(참조 튜토리얼 : http://developer.android.com/resources/tutorials/views/hello-datepicker.html)Chronometer : 단순 타이머 컨트롤AnalogClock : 시침, 분침 있는 아날로그 시계 컨트롤DigitalClock : 시:분:초 디지털 시계 컨트롤Transitions : 

ImageSwitcher : ViewAnimator>ViewSwitcher를 적용하여 이미지간 전환 (참조 샘플 :http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/ImageSwitcher1.html)TextSwitcher : ViewAnimator>ViewSwitcher를 적용하여 텍스트간 전환 (참조 샘플 :http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/TextSwitcher1.html)ViewAnimator : Frame Layout 기반으로 뷰 사이의 전환을 다룸 (참조 샘플 :ViewFlipper : ViewAnimator를 직접 상속, 2이상의 뷰 전환 (참조 샘플 :http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/Animation2.html)ViewSwitcher : ViewAnimator를 직접 상속, 2개의 뷰 사이에 전환
* 시작이 반이다.
많은 IDE처럼 안드로이드에서도 Drag & Drop, 끌어다 놓는 방식으로 쉽게 쉽게 사용자 인터페이스(UI)를 제작할 수 있음을 확인 했다. 물론 Graphic Layout Editor와 동시에 XML을 직접 수정하는 것도 익힐 것을 추천한다.

기능 만큼이나 UI 디자인은  좋은 어플의 필수 요소이다. 여러가지 UI 디자인 실습으로 안드로이드 환경에 보다 친숙해질 수 있기를 기대해 본다. 

UI가 준비 되었다면 남은 것은 이벤트 처리를 하고, 데이터나 통신등 본격적으로 프로그래밍 언어가 개입하는 시점이다. 이것 또한 따라하기나 샘플, Reference(http://developer.android.com/reference/packages.html) 등을 참조하면서 필요(Needs)를 따라 배워가는 것도 방법이다. 피부에 닿는 학습이야 말로 시간과 노력을 아끼는 남는 장사다.