바텀시트 말고 사이드시트도 있다고요?
시트의 사용방법과 좋은 사례
바텀시트와 사이드시트바텀시트와 사이드시트
시트(Sheet)는 추가적인 정보, 작업, 또는 선택지를 제공하기 위해 화면 위에 겹쳐 나타나는 모달 또는 비모달 UI 구성 요소로, 바텀시트(Bottom Sheet)는 하단에서, 사이드시트(Side Sheet)는 측면에서 슬라이드 하여 사용자와의 상호작용을 지원합니다. 본 글에서는 바텀시트와 사이드시트의 특징과 사용방법, 좋은 예시에 대해 알아보겠습니다.
바텀시트
바텀시트(Bottom Sheet)는 추가 정보나 작업 옵션을 제공하기 위해 화면 하단에서 슬라이드 형태로 나타나는 컴포넌트입니다. 표준형과 모달형 두 가지로 분류할 수 있습니다.
➊ Standard Bottom Sheet (표준 바텀시트)
➋ Modal Bottom Sheet (모달 바텀시트)
소형 및 중형 사이즈는 바텀시트를 권장하고 있습니다.
바텀시트의 콘텐츠는 앱의 주요 콘텐츠가 아닌, 추가적이거나 보조적이어야 합니다.
주요 콘텐츠에 접근하기 위해 닫힐 수 있습니다.
바텀시트는 다음과 같이 구성됩니다.
➊ Container (컨테이너)
➋ Drag Handle (드래그 핸들, 선택사항)
➌ Scrim (배경 딤 영역)
사이드시트
사이드시트(Side Sheet)는 바텀시트와 달리 화면 측면에서 슬라이드 형태로 나타나는 컴포넌트입니다.
➊ Standard Side Sheet (표준 사이드시트)
➋ Modal Side Sheet (모달 사이드시트)
주요 콘텐츠를 방해하지 않고 부가적인 작업을 제공하려면 사이드시트를 권장합니다.
사용자는 시트 내 다른 영역으로 이동할 수 있습니다.
사이드시트는 탐색을 위한 뒤로 가기 아이콘이 포함될 수 있습니다.
사이드시트는 다음과 같이 구성됩니다.
➊ Divider (디바이더, 선택사항)
➋ Headline (타이틀)
➌ Container (컨테이너)
➍ Close Affordance (닫기)
바텀시트 사용 시 고려사항
다음 내용은 바텀시트 사용 시 고려해야 할 사항입니다.
컨테이너
바텀시트의 컨테이너 크기는 내부 요소가 차지하는 공간에 따라 결정됩니다. 컨테이너는 바텀시트의 유일한 필수요소이며, 다른 모든 요소는 선택 사항입니다.
표준 바텀시트
표준 바텀시트는 화면의 기본 UI 영역과 공존하며, 두 영역을 동시에 상호작용할 수 있습니다. 음악 앱의 오디오 플레이어 등 화면의 기본 콘텐츠를 보완하는 내용을 표시하기 위해 사용합니다.
표준 바텀시트는 전체화면 높이에서 핸들을 통해 초기위치로 돌아갈 수 있습니다.
모달 바텀시트
모달 바텀시트는 다이얼로그와 같이 화면의 콘텐츠 앞에 나타납니다. 본 기능이 나타나면 다른 모든 앱 기능이 비활성화되고, 확인 · 해제 또는 필요한 작업이 수행될 때까지 화면에 남아있습니다.
특히 긴 작업 목록이나 아이콘이 필요한 경우, 메뉴나 다이얼로그 대신 모달 바텀시트를 권장합니다. 모달 바텀시트는 모바일에서만 사용됩니다.
시안성 · 닫기
기존 화면에 대한 접근을 제공하기 위해 모달 바텀시트의 초기 위치는 화면 높이의 50%로 제한됩니다. 콘텐츠가 화면 높이의 50%를 초과하는 모달 바텀시트는, 전체화면으로 끌어와 항목을 사용할 수 있습니다.
모달 바텀시트는 다음과 같은 동작을 통해 해제할 수 있습니다.
바텀 시트를 아래로 스와이프하기
배경 딤 영역을 탭 하기
바텀시트 내 닫기 관련 기능 사용
반응형 레이아웃
모바일 기기와 같은 소형 스크린에서는 바텀시트를 사용하며, 가로로 확장되어 더 큰 화면의 경우 바텀시트의 크기가 어색하다면 최대 너비를 재정의 할 수도 있습니다. 데스크톱과 같이 큰 스크린에서는 바텀시트와 비슷한 콘텐츠를 사이드시트로 바꿀 수 있습니다.
사이드시트 사용 시 고려사항
다음 내용은 사이드시트 사용 시 고려해야 할 사항입니다.
표준 사이드시트
표준 사이드시트는 태블릿이나 데스크톱과 같이 확장된 스크린 사이즈에 주로 사용됩니다. 이는 스크린의 기본 콘텐츠를 보완하는 내용을 표시하며, 사용자가 기본 콘텐츠와 상호작용하는 동안에도 계속 표시됩니다.
모달 사이드시트
모달 사이드시트는 제한된 화면 크기 때문에 모바일과 같은 소형 스크린에서 선호됩니다. 표준 사이드시트와 동일한 유형의 콘텐츠를 표시할 수 있지만, 기본 콘텐츠에 접근하려면 사이드시트를 해제해야 합니다.
RTL 언어 지원
오른쪽에서 왼쪽으로 쓰는 RTL 언어의 경우 사이드시트는 모든 요소가 반전된 상태로 창의 왼쪽 가장자리에 나타나야 합니다.
스크롤 방향
사이드시트는 기본 콘텐츠와 독립적으로 수직 스크롤을 할 수 있습니다. 이를 통해 페이지가 스크롤되는 동안 스크롤 위치와 콘텐츠가 유지되고, 그 반대의 경우도 마찬가지입니다. 그러나 사이드시트는 수평으로 스크롤할 수 없습니다.
바텀시트의 좋은 사례
바텀시트의 좋은 사례를 다양한 특징별로 선별해 보았으니, 참고하여 활용하면 좋겠습니다.
Copilot구독 관련 옵션을 선택할 수 있도록 하였습니다. 구독 옵션 선택, 선택 확인, 앱스토어 이동, 환불 이동 등 다양한 옵션이 바텀시트에 위치해 있습니다.
Instagram시간과 관련된 옵션을 바텀시트에 제공하여 기본 콘텐츠를 방해하지 않도록 하였습니다.
Instagram시간 옵션과 같이 단일 기능뿐 아니라, 공유와 관련된 리스트, 버튼 등 다양한 요소를 포함한 모습입니다.
iOS Messages애니모지, 미모지, 이모티콘 관련 기능 역시 바텀시트로 제공됩니다. 상단에는 애니모지의 종류를 가로로 스크롤링하여 선택할 수 있으며, 추가 버튼을 통해 다른 기능으로 진입할 수도 있습니다.
Discord앨범에서 이미지를 선택하는 기능을 바텀시트에 제공하여, 기존 콘텐츠의 맥락을 파악할 수 있도록 하였습니다.
마치며
사이드시트는 바텀시트와 동일한 기능을 수행하지만, 가로로 확장된 스크린에서 보다 더 좋은 사용성을 제공합니다. 두 시트 사용 시, 표준 시트를 사용할지 모달 시트를 사용할지 잘 고려해야 함을 알 수 있습니다.
시트에는 단일 기능이 아닌 생각보다 많은 기능을 넣을 수 있으며, 표준 시트의 경우 기존 콘텐츠와 공존하거나 반응형 레이아웃을 적용하여 크기를 자유롭게 할 수 있다는 장점이 있습니다. 다만 다양한 변형이 허용되는 만큼, 기존 콘텐츠와 사용성을 방해하지 않는지 면밀히 검토하는 것이 중요해 보입니다. 또한 시트는 주요 콘텐츠가 아닌 추가적인 보조 콘텐츠만을 포함해야 한다는 점도 유념해야 합니다.
Apple의 Human Interface Design에서는 시트를 모달의 개념으로 설명하고 있어, 본 글에서 설명한 Material Design 3의 내용과는 부분적으로 다를 수 있습니다. 다만 대부분 적용되는 특성은 모두 설명하였으므로, 필요하시다면 추가적으로 확인해 보셔도 좋을 것 같습니다.
바텀시트와 사이드시트에 대한 구체적인 지침은 아래 가이드에서 확인하실 수 있습니다!
