[우당탕탕 Android Studio] 3. 뷰와 위젯, 그리고 레이아웃

 Android Studio! 어디까지 알아보고 오셨는가!

 

 드디어 준비과정을 모두 마치고, 진짜 개발로 들어왔다! 아직 아무것도 할 줄 아는 게 없는 초심자 개발자일 수도 있지만, 모두 처음엔 모든 것이 어려운 법! 모든 앱 구성의 기초가 되는 뷰(View), 위젯(Widget)과 레이아웃(Layout)에 대해서 공부해보자!

 

So... Let's dive in!

 

Today's Keyword

View, Widget, Layout

 

 

 

 1. 뷰 (View)

 뷰의 정의는 매우 애매하다. '앱의 화면을 구성하는 모든 것'. 숙련된 안드로이드 개발자들은 고개를 끄덕일 것이지만, 초심자는 갸우뚱할 것이다. 뭐 그렇다면 필자가 지금 글을 작성하고 있는 이 글쓰기 공간도 뷰이고, 중간중간에 사진을 넣기 위해 누르는 '사진' 아이콘도 뷰이고, 하다못해 전체적인 화면 구조를 잡아주는 보이지 않는 틀 또한 뷰라는 것인가? 놀랍게도 답은 '그렇다'이다!

 

 뷰(View)는 안드로이드의 기본 화면을 구성하고 있는 모든 구성 요소이다. 사용자에게 보이는 아이콘, 이미지, 텍스트들도 뷰이며, 화면의 전체적인 구조를 잡아주는 일종의 틀 역할을 하는 요소 또한 뷰의 일종이라고 볼 수 있다. 뷰는 뷰 그 자체로도 존재하긴 하지만, 뷰안에 또 다른 뷰가 들어가 하나를 이룰 수도 있다. 이를 우리는 뷰 그룹(View Group)이라고 말한다. 뷰 그룹은 또 다른 뷰가 되어 다른 뷰 안에 들어가 새로운 뷰 그룹을 만들 수 있다..

 

 이해하기 어렵다면 뷰를 간단히 '상자'라고 생각해보자. 상자는 그 자체로도 하나의 상자이지만, 상자 안에 더 작은 상자를 포개어 넣을 수 있고 (뷰 그룹 A), 그 상자들을 더 큰 상자 안에 넣어 (새로운 뷰가 되어 다른 뷰 안에 들어가는 뷰 그룹 A) 하나를 이룰 수도 있는 것이다. 만약 html를 공부해본 적이 있는 사람이라면 해당 개념을 더욱 쉽게 이해할 것이다. 

 

뷰는 다음과 같은 구성으로 되어있다.

 

- 뷰 내부의 문자를 표현하는 텍스트(Text)와 그 외 공간인 패딩(Padding)

- 뷰의 경계선(Border)과 다른 뷰 사이의 간격을 나타내는 마진(Margin)

- 이 전체를 아우르는 뷰의 영역인 박스(Box)

패딩은 해당 뷰 내부의 공간과 관련된 것이라면, 마진은 뷰 외부에 있는 다른 뷰와의 공간과 관련된 것이라는 점을 기억해두자.

 

 

  2. 속성 (Attribute)

 바로 위젯과 레이아웃에 대해서 설명을 하려다가, 속성에 대해서 먼저 설명하는 것이 나을 것 같아 순서를 잠깐 바꾸었다. 

 모든 뷰에는 속성(Attribute)이 존재하며, 해당 속성으로 자신의 입맛에 맞게 뷰들의 모양이나 색깔, 기능 등을 바꿀 수 있다. 각 속성에 접근 및 편집은 XML 태그로 이루어지지만, 저번 시간에 설명한 속성 창에서도 변경이 가능하단 점 참고하자.

 다양한 뷰가 존재하듯이, 각 뷰마다 존재하는 속성 또한 천차만별이다. 하지만 몇몇 속성은 뷰가 존재하는 데에 필수적이기에 모든 뷰가 가지고 있는 속성이 있는데, 이러한 속성들 중 가장 중요한 3가지를 알아보자.

 

- width & height: 각각 뷰의 너비와 높이를 결정해주는 속성이다. 이 속성들은 모든 뷰에게 있어 필수적이며, 설정이 되어있지 않으면 뷰 자체가 형성이 되지를 않는다. 해당 뷰의 크기조차 모르는데, 뷰가 형성이 될 수 있다는 것은 어불성설이다. 각 속성들은 wrap_content (패딩 값에 맞춰 크기를 조정합니다.), match_parent (부모 레이아웃에 맞춰 크기를 조정합니다.)로 설정할 수 있으며, 여러분이 따로 특정한 값을 주어도 큰 상관은 없다.

 

- id: 아이디는 설정하지 않는다고 형성이 안되지는 않는다. 하지만, java나 xml파일에서 해당 뷰를 참조하거나 접근해야 할 때 id로 해당 뷰를 구분하기에, 대부분의 경우는 준필수로 설정하는 속성이다. id는 " @+id/자신이 원하는 아이디 "로 설정한다.

 

- padding, margin: 위젯 역시 뷰이기에 padding과 margin값을 갖기 마련이다. padding과 margin값을 줌으로써 유연한 화면 구성이 가능하다.

 

- layout_gravity, gravity: 위젯을 정렬해주는 속성이다. layout_gravity는 해당 위젯 자체의 위치를 정렬하고, gravity는 위젯 내의 내용 (예를 들자면 텍스트)을 정렬하는 것이다. 속성값으로는 left, right, top, bottom, center 등의 값이 있으며, left는 start로, right는 end로 쓰이기도 한다.

 3. 위젯 (Widget)

 하지만 저 모든 것을 바라고 통칭하기에는 뷰와 관련된 것이 너무나도 많다! 이것도 뷰이고, 저것도 뷰이고, 화면을 구성하는 모든 것은 뷰이니까! 그래서 개발자들은 한 가지 명확하게 구분되는 특징을 기준으로 뷰를 구분하여 각각 다른 이름을 붙여주기로 약속하였다. 그 기준이란 바로 가시성(visibility), 즉 눈에 보이느냐 안 보이느냐에 따라 뷰를 구분하기로 했다. 

 이 중에서 눈에 보이는 뷰를 위젯(Widget)이라고 부르기로 했다. 눈에 보이는 뷰, 즉 이미지, 텍스트뿐만이 아니라 입력창, 아이콘과 같이 모두 눈에 보이는 것은 위젯이다. 

 

NAVER라는 이미지를 보여주고 있는 뷰도 위젯이며, 검색어를 입력받는 검색 창도 위젯이다.

 가장 많이 쓰이는 위젯으로는 텍스트를 보여주는 TextView, 이미지를 나타내는 ImageView, 버튼을 나타내는 Button, 입력 창을 나타내는 EditText 등이 존재한다. 해당 뷰들에 대해서는 다음 포스팅 때 이야기하는 것으로 하자.

4. 레이아웃 (Layout)

 눈에 보이는 뷰를 위젯이라고 했으니, 눈에 보이지 않는 뷰도 뭐라고 칭해야 할 것이 있을 것이다. 근데, 눈에 보이지 않으면서도 화면을 구성하는 것이 있을까? 이것이 바로 위에서 말한 화면의 구조를 잡아주는 일종의 틀, 즉 레이아웃(Layout)이다.

 레이아웃은 화면의 전체적인 구조를 잡아주는 역할을 한다. 위젯이 물감이라면, 레이아웃은 캔버스와 같은 역할을 한다. 캔버스와 같이 가장 밑에 있으면서 해당 화면의 전체적인 구조를 잡아주는 역할을 하는 레이아웃을 우리는 부모 레이아웃(Parent Layout)이라고 부른다.

 

아래 설명할 것은 레이아웃의 종류이다. 하지만 필자가 설명하는 레이아웃 중 상대 레이아웃(Relative Layout)은 많이 사용이 되지 않아 레거시(Legacy)로 분류되었다. 상대 레이아웃에 대해서는 '아~ 이런 게 있구나~'라고 하며 읽고 넘어가도록 하자.

 

1. 제약 레이아웃 (Constraint Layout)

새로운 프로젝트를 만들 때, 안드로이드 스튜디오에서 디폴트로 지정해주는 레이아웃이다. Constraint라는 말과 같이 제약 레이아웃은 '제약조건'을 활용하여 화면을 구성하는 레이아웃이다. 각각의 제약들은 연결선으로 이루어져 있으며, 해당 연결선은 레이아웃이나 다른 뷰 및 위젯들과 연결될 수 있다.

제약 레이아웃을 활용하여 화면을 구성하는 모습. 연결선을 활용하여 버튼의 위치를 결정하고 있다.

 이해하기 어려우면 연결선들을 갈고리라고 생각하자! 여러분이 만약 갈고리를 던져 한쪽 벽에 고정을 한다면, 여러분은 그 갈고리가 허용하는 범위 내에서만 움직일 수 있다. 만약 갈고리가 상하좌우 모든 곳에 고정이 되면 여러분은 움직일 수 없다. 즉, 여러분의 위치가 결정된다! 갈고리와 같은 방법으로 방법으로 해당 버튼의 위치를 결정하고 고정하는 것이다.

 

2. 리니어 레이아웃 (Linear Layout)

 리니어 레이아웃은 연결선이 없는 대신, 레이아웃의 방향속성(Orientation)이 정해진다. 각각 수직(Vertical)과 수평(Horizontal)방향 둘 중 하나를 선택할 수 있으며, 선택한 방향으로 뷰와 위젯들이 차례대로 놓이게 된다. 리니어 레이아웃은 마치 한 무더기의 박스가 질서 정연하게 정리되어있는 것과 같은 화면 구성을 이루게 된다. 위와 같은 이유로 리니어 레이아웃은 박스(Box) 모델이라고도 한다.

 

리니어 레이아웃은 뷰와 위젯들의 위치가 강제된다는 이유에서 유용하지 않을 것 같은 첫인상을 지니고 있다. 하지만 리니어 레이아웃은 기본적으로 연결선을 고려하지 않고 뷰와 위젯들을 간편하고 질서 정연하게 배치할 수 있다는 장점이 있어, 직관적이면서도 깔끔한 화면 구조를 만들 때 애용되고는 한다.

네이버 로그인 창은 수직형 리니어 레이아웃의 가장 좋은 예시이다.

리니어 레이아웃은 수직, 수평 방향으로 위젯을 쌓을 수 있으며, 이를 혼합해서 사용할 수도 있다. 레이아웃 또한 뷰의 일종임을 기억하자. 뷰 안에 뷰가 들어가는 것이 가능하며, 레이아웃 안에 레이아웃이 들어가는 것 또한 가능하다. 위와 같은 점을 이용하여 여러 개의 리니어 레이아웃을 중첩하여 다음과 같은 바둑판 형식의 레이아웃 구조를 만들 수 있다.

Vertical 속성인 Linear Layout (회색) 안에 Horizontal 속성인 Linear Layout (연두색) 2개가 들어가 있다.

 위와 같이 여러 리니어 레이아웃을 중첩함을 통해 깔끔하면서도 정교한 레이아웃을 만드는 것이 가능하다.

 

3. 상대 레이아웃 (Relative Layout)

상대 레이아웃은 규칙 기반 (Rule - based) 레이아웃이라고도 말한다. 연결선이나 위젯의 방향을 사용했던 위의 레이아웃과는 달리, 부모 레이아웃과 다른 뷰 및 위젯들 간의 상대적 위치를 이용하여 화면을 배치하는 레이아웃이다.

 

말이 어렵다! 쉽게 풀어서 이야기하면, '이 위젯은 무슨무슨 연결선으로 인해 이 위치에 고정되어있어!'나 '이 위젯은 이 방향으로 차례대로 놓여있어!'와는 달리, '이 위젯은 위젯 1의 아래, 위젯 2의 위에 놓여있어!'라고 말하는 셈이다. ~의 위에, ~의 아래에, ~의 왼쪽에, ~의 오른쪽에 와 같은 상대적 위치정보를 활용하여 해당 위젯의 위치를 설정하는 것이다.

위와 같은 화면 구성은 상대적 레이아웃을 활용하여 손쉽게 만들 수 있다.

위와 같은 화면 구성을 제약 레이아웃이나 리니어 레이아웃으로는 일일이 크기와 위치를 세심하게 조정하는 번거로운 과정이 필요하다. 하지만 상대 레이아웃은 단순히 '버튼 3은 버튼 1 아래, 버튼 2 위에 위치해있다'라는 정보만 주면 완성될 수 있다. 이와 같이, 뷰와 위젯의 위치가 다른 뷰나 위젯의 위치에 영향받는 화면 구조일 경우, 상대 레이아웃이 사용된다.

 

4. 프레임 레이아웃 (Frame Layout)

프레임 레이아웃은 단 하나의 뷰와 위젯을 화면에 보여준다. 마치 사진 여러 개가 겹쳐있으면 맨 위의 사진만 보이는 것처럼, 프레임 레이아웃에 많은 뷰와 위젯을 넣을 수 있지만, 유저가 볼 수 있는 것은 가장 위에 있는 뷰와 위젯이다. 이러한 점을 들어 프레임 레이아웃은 싱글(Single) 모델이라고도 한다.

 

어찌 보면 무쓸모 해 보이는 이 레이아웃은 화면 전환에 유용하게 사용된다. 버튼을 누르면 중첩된 뷰 중 가장 위에 있는 뷰가 투명해지고, 그 아래에 있던 뷰가 보이게 하는 방법으로 말이다! 이와 같이 가장 단순한 화면 전환 효과를 가장 쉽게 낼 수 있게 만들어 주는 것이 프레임 레이아웃이다. 프레임 레이아웃으로 하는 화면 전환 효과는 나중에 리스너(Listener)를 배운 후에 알아보도록 하자.

 

5. Wrap - Up

 앱 개발에 있어 가장 중요한 개념 몇 가지를 배웠다. "뭐야, 겨우 이거야?"라고 말하며 쉽게 여긴 사람들도 있지 않을까 싶다. 단순해 보이는 내용들의 연속이지만, 단순한 위젯과 레이아웃들이 모여 우리가 흔히 아는 정교하고 복잡한 앱의 화면 구조를 이루게 된다. 뷰와 위젯 레이아웃은 개발의 처음부터 끝까지 따라오는 내용이기에, 기초를 탄탄하게 해야 할 필요가 있다.

 다음 시간 부터는 실제 개발 공부를 해보자. '자기소개 UI'를 만들면서 가장 많이 쓰이는 위젯과 그들의 속성에 대해서 알아보자.