Toolbar에는 링크, 위젯, 텍스트, 이미지 등 다양한 기능을 실행하는 버튼이 있다. 이 중 일부는 버튼을 누른 뒤 추가 입력 단계가 필요하다. 예를 들어 링크 버튼은 URL을 입력하는 컴포넌트가 필요하고, 위젯 버튼은 위젯 목록을 보여주는 컴포넌트로 전환되어야 한다.
이런 기능마다 별도의 Popover를 여는 방식으로 구성하면 다음과 같은 문제가 생긴다.
- 여러 UI가 동시에 떠서 화면이 복잡하고 산만해진다.
- 기능마다 필요한 콘텐츠의 너비와 높이가 달라, 고정된 크기로는 모든 화면을 자연스럽게 보여주기 어렵다.
Popover 구조에 대해 더 고민해본 결과, Step 1~2 정도까지는 적절하지만 그보다 더 깊어지는 순간 복잡도가 빠르게 높아진다고 봤다. 여기서 Step은 사용자가 순차적으로 진입하는 단계를 의미한다.
예를 들어 계정 설정 Popover가 있다고 가정해보자. 내부 구조는 다음과 같을 수 있다.
- 프로필 변경
- 이름
- 주소
- 해외 주소
- 영문 주소
- 이메일
- 로그아웃
- 계정 삭제
이 구조에서 각 항목은 하나의 Step이 된다. 개인적으로는 두 번째 단계까지는 Popover로도 충분히 감당 가능하다고 본다. 하지만 해외 주소 변경처럼 더 깊은 단계로 들어가면, 최대 4개의 Popover가 연속으로 쌓이게 된다. 그러면 화면의 depth가 지나치게 깊어지고, 사용 흐름도 금방 복잡해진다.
계정 설정 Popover -> 프로필 변경 Popover -> 주소 변경 Popover -> 해외 주소 Popover
그래서 떠올린 방식이 뷰 전환이다. 여기에 동적 너비와 높이 조정을 함께 적용한다. 동적으로 크기를 조절하면, 각 뷰가 지금 필요한 정보만 담고 있다는 인상을 줄 수 있다. 불필요하게 넓거나 빈 여백이 많은 상태를 줄여서, 화면이 더 목적에 맞게 반응한다는 느낌도 만든다. 결과적으로 UI가 정적으로 고정되어 있기보다, 사용자의 흐름에 따라 살아 움직이는 듯한 생동감을 줄 수 있다.
즉, 동적 크기 조절의 장점은 단순히 공간 효율만이 아닌:
- 각 단계에 필요한 정보량에 맞는 밀도를 보여줄 수 있다.
- 불필요한 여백을 줄여 더 정돈된 인상을 만들 수 있다.
- 뷰 전환 자체가 더 자연스럽고 유기적으로 느껴질 수 있다.
아래 예시는 추가 UI를 계속 띄우지 않고, 하나의 영역 안에서 서로 다른 뷰를 전환하는 구조를 보여준다.
| Toolbar | |
| 계정 설정 Popover |