바텀 시트 UI 디자인: 높이, 선택, 닫기 동작 설계

바텀 시트는 모바일 화면 아래에서 올라와 짧은 작업을 처리하게 하면서 원래 화면의 맥락을 보여 주는 UI입니다. 수령 장소를 고르거나, 몇 가지 필터를 조정하거나, 장소 정보를 살펴볼 때 유용합니다. 배경 화면을 계속 조작할 수 있는지, 콘텐츠에 맞는 높이는 얼마인지, 선택을 마치기 전에 닫으면 어떻게 되는지부터 정해야 합니다. 위쪽 모서리를 둥글게 만드는 것보다 중요한 결정입니다.

주문 상품의 수령 장소를 선택하는 과정을 예로 살펴보겠습니다. 고객은 지도를 열어 가까운 장소를 비교하고, 한 곳을 선택한 뒤 주문 요약으로 돌아갑니다. Pixso의 UI 디자인 작업 공간에서 지도, 시트, 선택 상태를 함께 배치하면 실제 인터랙션을 구현하기 전에 전체 흐름을 검토할 수 있습니다.

지도를 계속 조작할 수 있어야 하는지 결정하기

지도를 사용할 수 있는 상태로 유지하는 시트는 장소를 탐색할 때 적합합니다. 화면 아래에 간단한 장소 정보가 표시되는 동안 고객은 지도를 움직일 수 있습니다. 모달 시트는 범위가 명확한 결정을 내릴 때 적합합니다. 수령 장소를 선택한 뒤 확인하거나 취소해야 주문 화면으로 돌아갈 수 있는 방식입니다.

Material Android 문서는 표준 바텀 시트와 모달 바텀 시트를 구분합니다. 모달 시트에는 배경을 가리는 스크림이 있고, 표준 시트에서는 주변 콘텐츠를 계속 조작할 수 있습니다. 한쪽의 외형과 다른 쪽의 동작을 섞지 않는 것이 중요합니다.

이 예시에서는 모달 시트를 사용합니다. 제목은 ‘수령 장소 선택’으로 하고 닫기 버튼, 검색 필드, 장소 목록, ‘이 장소 사용’ 버튼을 배치합니다. 지도는 어두워진 배경에서 맥락을 제공하되, 시트를 닫기 전까지 움직일 수 없습니다. 장소를 고르는 데 지도 탐색이 꼭 필요하다면 표준 시트를 사용하고, 지도 핀을 선택할 때 해당 장소 정보가 표시되도록 합니다.

바텀 시트는 콘텐츠를 배치하는 방식이지, 모든 작업을 오버레이에 넣어야 할 이유는 아닙니다. 긴 주소 입력 폼, 본인 확인, 결제를 한꺼번에 처리해야 한다면 별도 페이지가 적절합니다. 오버레이의 동작 방식은 그 안에서 수행할 작업을 기준으로 정해야 합니다.

임의의 비율보다 작업에 맞는 높이 정하기

처음 열리는 높이는 제목, 검색 필드, 최소한 하나의 완전한 장소 항목, 기본 작업 버튼을 보여 줄 수 있어야 합니다. 첫 번째 항목부터 잘려 있으면 시트에 어떤 정보가 있는지 파악하기 어렵습니다. 반대로 공간이 필요하지 않은데도 화면을 거의 전부 덮으면 지도만 불필요하게 가리게 됩니다.

목록이 짧다면 콘텐츠에 맞는 높이로 엽니다. 목록이 길다면 시트를 확장하고 스크롤할 수 있게 합니다. 제목과 닫기 버튼의 위치는 유지하고, 남은 영역 안에서 장소 목록이 스크롤되도록 합니다. 작업 버튼은 기기의 안전 영역 위에 배치해 시스템 제스처 영역에 가려지지 않게 합니다.

같은 수령 장소 선택 작업을 보여 주는 세 가지 방식

상황	시트 표시 방식	항상 이용할 수 있어야 하는 요소
가까운 장소가 세 곳인 경우	각 항목을 온전히 보여 주는 작은 시트	제목, 닫기 버튼, 장소 선택, 확인 버튼
검색 결과가 많은 경우	목록을 스크롤할 수 있는 확장된 시트	검색과 확인 버튼에 계속 접근 가능
화면 높이가 작거나 글자가 확대된 경우	거의 전체 높이의 시트 또는 전용 선택 화면	고정된 화면 비율보다 읽기 쉬운 문구와 조작 가능한 컨트롤 우선

드래그 핸들은 확장 가능성을 알려 줄 수 있지만, 더 많은 콘텐츠를 보는 유일한 방법이어서는 안 됩니다. 명확한 확장 수단을 제공하거나 일반적인 스크롤만으로 전체 목록에 도달할 수 있게 합니다. 시트를 끄는 동작과 내부 목록을 스크롤하는 동작이 같은 제스처를 예측 불가능하게 가로채지 않도록 해야 합니다.

확인하기 전까지는 임시 선택으로 유지하기

현재 주문의 수령 장소가 중앙역이라고 가정해 보겠습니다. 고객이 시트를 열어 강변 매장을 선택하면 시트에서는 강변 매장을 강조합니다. 하지만 ‘이 장소 사용’ 처리가 성공하기 전까지 주문에 저장된 장소는 중앙역으로 유지합니다. 시트를 닫으면 임시 선택은 취소됩니다.

이 구분이 없으면 확인 버튼이 있는데도 항목을 누르는 즉시 주문이 바뀌는 예상치 못한 일이 생깁니다. 제품이 의도적으로 즉시 적용하는 방식을 사용한다면 불필요한 확인 단계를 없애고 그 동작을 분명히 보여 줍니다. 두 방식을 혼용하지 않아야 합니다.

장소 이름, 주소, 해당 주문의 수령 가능 여부처럼 선택에 필요한 정보를 보여 줍니다. 거리는 기준 위치를 알고 있을 때만 도움이 됩니다. 위치 접근이 거부되었거나 검색 지역이 바뀌었는데 ‘가장 가까운 곳’이라고 표시하면 오해를 부릅니다. 이때는 검색한 지역을 기준으로 결과를 설명하고 다른 장소를 입력할 수 있게 합니다.

특정 장소에서 주문을 받을 수 없다면 해당 항목에 이유를 적습니다. ‘오늘은 수령할 수 없습니다’라는 문구가 있으면 다른 곳을 고를 수 있습니다. 설명 없이 이름만 회색으로 표시하면 화면 오류처럼 보일 수 있습니다. 다른 장소를 비교하는 동안에도 고객이 입력한 검색어는 유지합니다.

키보드가 열린 상태로 설계하기

검색 필드를 사용하면 화면에서 활용할 수 있는 공간이 달라집니다. 레이아웃을 검토할 때 키보드가 열린 상태를 함께 배치하고, 필요하면 시트를 확장해 검색 필드와 유용한 결과가 키보드 위에 보이도록 합니다. 데스크톱과 비슷한 구도를 유지하려고 글자 크기를 줄이지 않습니다.

키보드를 닫는 것과 장소 선택을 취소하는 것은 구분해야 합니다. 고객은 검색 결과를 더 많이 보기 위해 키보드만 닫았을 수 있습니다. 네이티브 앱에서는 해당 플랫폼의 뒤로 가기와 키보드 관례를 따릅니다. 웹에서는 바깥 영역을 누르는 행위가 언제나 취소를 뜻한다고 가정하지 말고 동작을 명확히 정합니다.

검색 결과는 현재 검색어에 대응해야 합니다. 고객이 ‘강변’을 ‘중앙’으로 바꾼 뒤 이전 검색이 늦게 끝나더라도 강변 검색 결과가 중앙 검색 결과를 덮어쓰면 안 됩니다. 검색 중에도 검색어를 보여 줍니다. 검색에 실패하면 검색어를 지우지 않고 다시 시도할 수 있게 하고, 검색에는 성공했지만 결과가 없으면 장소명이나 지역을 바꾸도록 안내합니다.

확인 버튼은 작업 가까이에 두되, 고정된 하단 영역이 마지막 목록 항목을 가리지 않게 합니다. 스크롤 영역 아래쪽에 여백을 두고 실제로 지원하는 가장 작은 화면에서 확인합니다. 키보드 때문에 선택할 공간이 지나치게 좁아진다면 작은 틈에서 스크롤하게 하는 것보다 전체 높이의 검색 상태가 더 명확합니다.

닫기와 복귀 동작을 예측 가능하게 만들기

이 예시에서는 닫기 버튼을 누르거나, 허용된 바깥 영역을 눌러 시트를 닫으면 임시 선택을 취소합니다. 다시 열었을 때는 주문에 현재 저장된 장소를 보여 줍니다. 원래 장소가 없었다면 아무 항목도 선택하지 않은 상태로 엽니다. 스와이프로 닫는 동작을 추가할 수 있지만, 눈에 보이는 닫기 버튼은 계속 제공해야 합니다.

웹 모달에 관한 WAI-ARIA 대화상자 패턴은 대화상자 안으로 포커스를 이동하고, 배경 조작을 막으며, 닫은 뒤 논리적인 위치로 포커스를 돌려보내도록 안내합니다. 배경을 어둡게 만드는 것만으로 이런 동작이 구현되지는 않습니다. 대화상자에 의미 있는 이름을 제공하고 키보드로 각 컨트롤에 접근할 수 있게 합니다.

확인 처리에 실패하면 시트를 열린 상태로 유지하고 임시 선택을 보존한 채 버튼 근처에 이유를 설명합니다. 아무 메시지 없이 시트만 닫고 주문 요약을 그대로 두어서는 안 됩니다. 성공하면 시트를 닫고 요약에 새 장소를 표시한 뒤 수령 장소 수정 버튼이나 다음 논리적인 단계로 포커스를 이동합니다.

Pixso에서 수령 장소 선택 흐름 만들기

주문 요약, 열린 선택 시트, 임시 선택, 변경이 확정된 요약을 각각 별도의 프레임으로 만듭니다. 중앙역, 강변 매장, 시장 광장이라는 세 장소를 모든 화면에서 일관되게 사용합니다. 임시 선택 프레임에서 강변 매장을 골랐더라도 원래 주문 요약에는 중앙역을 남겨 둡니다. 이렇게 하면 선택과 확정의 차이가 눈에 보입니다.

Auto Layout으로 긴 주소와 큰 글자를 넣었을 때의 배치를 살펴봅니다. 화면 아래쪽을 키보드가 차지하는 확장 검색 프레임과 강변 매장 선택을 유지하는 확인 실패 프레임도 추가합니다. 프로토타입에서 주요 동작을 연결하고, 각 프레임 옆에 포커스 복귀 위치, 닫기 동작, 저장된 값과 임시 값의 구분을 짧게 적습니다.

검토자에게 장소를 바꾼 뒤 확인하지 않고 닫았다가 다시 열어 보도록 합니다. 이어서 장소 변경을 끝까지 완료해 보도록 합니다. 주문 요약에서 두 결과를 모두 이해할 수 있어야 합니다. 작은 작업을 마치는 동안 더 큰 주문 흐름을 놓치지 않게 해 준다면 바텀 시트를 사용하는 이유가 분명해집니다.

Pixso에서 수령 장소 선택 흐름 만들기 →