고정·가변영역으로 모든 폰에 최적화된 UI 만들기

안드로이드용 스마트폰은 브랜드, 기종이 다양할 뿐만 아니라 해상도 또한 통일성이 없다. 물론, 화면이 큰 모바일이 인기가 많아져 애플 또한 변태적인 비율의 디바이스가 등장하긴 했지만, 그래도 아이폰은 아직까지는 4인치(5S), 4.7인치(6), 5.5인치(6plus) 이 3종류만 존재하기 때문에 UI를 고려하는데 큰 어려움이 없다.

문제는 안드로이드다! 

안드로이드는 디바이스가 너무 다양하기 때문에 수 십 여 개의 모바일에 UI가 통일화될 수 있는 방법을 고민해야 한다. 하지만 너무 걱정할 필요는 없다. 불행 중 다행인 것은 구글에서 material design을 발표했기 때문이다. 플랫한 디자인을 표준화하여 여러 폰에서 리소스가 깨지거나 굴곡이 생기는 문제를 줄였다. 

다음으로는 오늘 올릴 글의 주된 내용인 고정, 가변 영역을 설정하는 것이다. 우선 그 의미에 대해서 알아보자. 고정 영역은 말 그대로 수치화하여 고정시키는 영역이다. 개발환경에서 고정영역을 설정한다는 것은 디바이스 사이즈에 맞게 비율대로 확대/축소가 된다는 의미이다. 아이콘과 버튼들을 그 예로 들 수 있겠다. 이 아이콘은 좌측에서 몇 dp 떨어져 보여야 한다. 이런 식으로 설정하는 것을 고정영역이라고 말한다.

반대로 가변 영역은 일정한 수치를 정하기보다는 디바이스에 맞춰 변동할 수 있는 부분들을 말한다. 리스트뷰에서 하나의 리스트의 우측 여백 등을 예로 들 수 있다. 화면 사이즈가 작으면 그만큼 리스트 우측 여백이 줄어들게 되고, 화면 사이즈가 커지면 그만큼 빈 공간을 자연스럽게 채워줄 수 있게 설정하는 것을 가변영역이라고 말한다. 

그러면 이제부터 안드로이드 스튜디오를 통해 이 문제를 해결해보겠다. 

동그란 이미지와 텍스트들을 보이는 리스트 뷰를 가지고, 고정/가변영역의 중요성을 테스트해보려고 한다.

앞에서 말했듯이, 고정영역에는 이미지, 아이콘, 그리고 텍스트 위치 지정과 같은 요소들이 해당된다. 그리고 리스트뷰를 구분시켜주는 배경은 가변영역에 속한다. 

이미지를 보면서 이해를 해보면 핑크색 영역이 고정영역으로써, 수치로 지정할 수 있는 영역이 되고

민트색 영역은 디바이스에 따라 늘어났다 줄어드는 가변영역이 된다.

그럼 만약에 위에 민트색으로 표기된 영역들을 고정영역처럼 수치로 표현하면, 어떻게 될까?

위의 보인 화면보다 살짝 더 큰 디바이스로 화면을 추출해봤다. 짜잔-!!!!

우측의 변태스러운 여백이 보이는가? 가변영역을 수치로 고정화시키면 이와 같은 혐오스러운 화면이 나타난다.

이것을 가로화면으로 돌려서 출력해서 두개를 비교해봐도 고정영역과 가변영역의 차이를 느낄 수 있다.

두번째 보여지는 이미지는 가로를 psd에 보여지는 사이즈에 맞게 540dp로 설정하여 저런 결과가 나타났으며, 첫번째는 가변영역을 설정하여 의도대로 표현이 가능해졌다.

그럼 대체 가변영역은 어떻게 설정할 수 있을까?

디자이너가 개발 환경을 이해하는 것은 매우 어려울 것이다.

따라서, 이 영역은 디바이스 사이즈에 맞게 가로 화면이 꽉 채워져야 합니다. 라고 말로 설명하거나

가로영역은 match_parent로 설정해주세요. 라고 말하면 된다.

match_parent는 디바이스 영역 전체를 뜻하는 안드로이드 스튜디오의 단위이다. 

가로:match_parent, 세로:70dp인 사이즈를 예로 들면, 갤럭시 S4, S5, 노트 등 다양한 디바이스에서 가로가 꽉 채워지고, 세로는 사이즈별로 비례한 길이가 보일 것이다.

더불어, wrap_content라는 말이 있는데 이는 리소스를 포함한 영역을 말하는 단위이다.

이 두 단위 정도만이라도 알고 있으면 자신이 디자인한 UI가 조금 더 예쁘게 잘 나올 것이다. 

FIN.