반응형 UI 설계를 위한 덕목 - 가변 영역, 고정 영역 구분

Photo by Road Trip with Raj on Unsplash

UI 구성 중 자주 마주치는 문제들

디자인을 넘겨준대로 레이아웃을 설계하다보면 디자인대로 화면이 나오지 않는 경우가 많습니다. 기본적으로 ContraintLayout이나 RelativeLayout 등 반응형 디자인을 위한 상대적인 비율을 설정할 수는 있으나, 마진값과 텍스트 크기 등 디자인에서 기본적으로 주어지는 값만큼 넣었을 때, 화면을 초과하거나 맞지 않는 경우가 발생합니다. 디프만 8기에서 진행중인 'MIMO' 에서도 이런 문제가 동일하게 발생했는데요. 한 화면에 리소스들이 워낙 많았고, 또 고정적으로 줘야되는 마진 값이 많아 주어진 디자인 그대로 작성했을 때, 화면이 작은 기기에서는 화면을 넘어가버리는 일이 발생하죠. 그럼 이럴 때 어떻게 해야할까요?

 

스크롤 뷰를 통한 스크롤링으로 해결

간단히 생각해보면 초과되는 영역만큼 스크롤링 할 수 있게 ScrollView나 NestedScrollView를 사용할 수 있습니다. 하지만, UX 관점에서 생각해봤을 때, 스크롤뷰가 정답이 될 수는 없습니다. 만약 특정 문구나 타이틀이 화면에 반드시 보여야한다면 어떻게 해야할까요? 그 부분은 스크롤이 되면 안되겠죠? 하단에 버튼을 반드시 노출시켜야한다면요? 여러가지 제약사항이 있습니다. 결국 디자이너가 의도한 바가 어떤 것인지 개발자로써 정확히 파악해야할 의무가 있습니다.

 

가변 영역과 고정 영역

디자인에서 가변 영역과 고정 영역이란 말이 있습니다. 말그대로 가변 영역은 화면의 크기에 따라 크기가 변할 수 있는 영역을 말하고, 고정 영역은 화면의 크기가 변하더라도 그 값이 고정된 영역을 말합니다. 화면이 작다면 고정 영역의 크기는 그대로 두되, 가변 영역의 크기를 조절하면 되겠죠? 따라서 디자이너에게 화면을 넘겨받을 때, 가변 영역이 어디고, 고정 영역이 어딘지 확인해야합니다. 그래야 설계할 때, 다양한 크기로 대응이 가능할 수 있겠죠.

 

 

자세한 설명과 이미지 참고를 위한 게시글들
https://brunch.co.kr/@zzzieuny/1
https://brunch.co.kr/@zalhanilll/406