Responsive UI
Building a Responsive UI in Android
Building a Responsive UI in Android
#01 Many Android devices구글 플레이스토어를 통해 지원되는 Android 기기만 14876개입니다.
지원하는 minSDK 버전이나 화면 레이아웃, 현지화 등 여러 요인에 의해 가변적이지만 갈수록 많아질 겁니다.
서로 상이한 화면 크기를 가진 모든 기기에 유동적으로 대응하기 위해서는,
반응형 UI(반응형 레이아웃)을 이용할 수 있습니다.
반응형 UI
머티리얼 디자인에서 반응형 레이아웃(Responsive Layout)은 어떠한 화면 크기에도 적응합니다. 이 UI 가이드는 레이아웃에 걸쳐 일관성을 보장하는 융통성 있는 그리드, 내용물이 어떻게 각기 다른 화면에서 공간을 조정하는지에 관한 중단점 세부 사항, 그리고 앱이 어떻게 작은 화면에서 가장 큰 화면까지 크기 조정할 수 있는지에 대한 설명을 포함합니다.
Build based on available space
#02 phone and tablet말 그대로 기기의 특성(폰, 태블릿 등)이 아닌 화면의 크기, 즉 화면에서 이용할 수 있는 공간(available space)을 생각해야 합니다.
여기서 말하는 이용할 수 있는 공간은 아래 3가지를 말할 수 있습니다.
width
height
smallest width
#01 Width
#03 Layout adaptive breakpoints너비(width)는 UI를 디자인하는 데 있어 가장 중요합니다.
디자인에 관한 내용이라 완벽히 이해는 안 가지만, 특정 너비를 기준으로 화면에 표시하는 UI의 구조나 개수가 바뀔 수 있기 때문에 아래에서 정의한 중단점(Breakpoint)을 유념해서 디자인해야 합니다.
480dp
600dp
840dp
960dp
1280dp
1440dp
1600dp
자세한 내용은 아래 링크를 참조하시기 바랍니다.
#02 Height
#04 Verically scrolling container높이(height)는 반응형 UI를 설계할 때 너비(width)에 비해서 덜 중요합니다.
하지만 수직으로 스크롤하는 UI는 제한된 높이로 인해 한번에 보일 수 있는 요소의 개수가 제한될 수 있기 때문에 신경을 써야 합니다.
#03-1 Smallest width is rotation-insensitive
#05 Smallest width with ratation사용 가능한 화면 영역의 가장 짧은 치수로 나타냅니다.
너비(width)와 높이(height)와는 달리 가장 작은 너비(smallest width)는 둘 중 작은 값이기 때문에 화면 방향이 변경되어도 바뀌지 않습니다.
#03-2 Multi-window
#06 Smallest width with multi-window화면 회전과 달리 다중 창(multi-window)에서는 너비, 높이, 최소 너비 모두 업데이트됩니다.
사용 가능한 공간의 변화로 인해 UI 변화도 불가피하게 됩니다.
그러기에 반응형 UI를 적용이 특히 필요한 부분입니다.
Responsive Patterns
스크린 크기가 커짐에 따라 이전에 숨겨진 콘텐츠를 공개하거나, 탐색 패턴을 변환하거나, 목록에서 그리드로 전환하거나, 화면을 여러 섹션으로 나란히 나누는 등 반응형 UI를 작성할 때 고려할 수 있는 공통 패턴이 많이 있습니다.
드러내기 (Reveal)
더 작은 화면에 의해 숨겨진 UI는 증가된 이용 가능한 공간과 함께 드러나게 될 것입니다.
변형 (Transform)
UI 요소는 하나의 형식에서 다른 형식으로 변형할 것입니다.
분할 (Divide)
레이어 된 UI는 이용 가능한 새로운 공간으로 분할될 것입니다.
레이아웃 조정 (Reflow)
UI는 이용 가능한 공간 내로 다시 조정될 것입니다.
확장 (Expand)
UI는 더 많은 공간에 걸쳐 확장할 것입니다.
위치 정하기 (Position)
UI 컴포넌트의 위치는 더 적절한 곳으로 변경될 것입니다.
반응형 UI 어렵습니다.
다중 창 모드도 생명주기와 관련해서 신경 쓸 게 많은데, UI 까지 신경 쓰기가 쉽지 않네요.
개발적으로도 신경 쓸 게 많지만 UI/UX와 디자인 요소도 신경 쓸 게 많아 실제 프로젝트에 적용하려면 다 같이 공부해야 가능할 거 같아요.
