백드롭을 어떻게 사용할 것인가
새로운 UI에 대처하는 우리의 자세 2
이번 Material Design 2.0에서 추가된 특이한 컴포넌트를 꼽으라면 하나는 이전에 글을 쓴 하단 앱 바이고, 다른 하나는 백드롭(Backdrop)입니다. 하단 앱 바가 위치 변화만으로 사용성에 큰 차이를 불러온 창의적인 시도였다면, 백드롭은 앱 바가 컨텐츠 위에 떠 있다는 구조 자체를 뒤엎습니다. 그렇기에 시각적으로 독특하고 예쁘다는 느낌을 주지만, 동시에 다양한 문제점을 가지게 됩니다. 이 글에서는 백드롭이 무엇인지, 어떤 문제가 있는지, 그리고 어떻게 활용할 수 있을 것인지 이야기해보고자 합니다.
이렇게 생겼습니다특징
프론트 레이어와 백 레이어로 구성된다
백드롭은 배경이라는 뜻이며, 프론트 레이어와 백 레이어라는 2개의 면으로 구성됩니다. 프론트 레이어가 위에 올려져 있고 백 레이어가 아래에 위치합니다. 프론트 레이어는 주요 컨텐츠를 보여줍니다. 백 레이어는 탭이나 스텝 등 현재 상황에 관한 내용을 보여주거나, 필터처럼 프론트 레이어에 있는 컨텐츠를 컨트롤 할 수 있는 요소들을 보여줍니다.
흰색이 프론트 레이어, 보라색이 백 레이어입니다상황에 따라 포커스가 변한다
한 화면에 두 레이어가 같이 보이지만 동시에 활성화되지는 않습니다. 기본적으로 포커스는 프론트 레이어에 맞추어지고, 백 레이어에는 앱 바처럼 버튼이나 간단한 정보가 표시되어 있습니다. 백 레이어 영역의 버튼이나 정보를 누르면 프론트 레이어가 아래로 내려갑니다. 흐리게 처리되거나, 거의 안보일 정도로 내려가서 포커스가 사라졌음을 보여줍니다. 동시에 백 레이어에 포커스가 맞춰지면서 수행 가능한 작업들이 나타나죠. 기존에는 팝업이나 새 화면에서 해야했던 작업을 한 화면 내에서 수행할 수 있기에 맥락이 끊기지 않고 자연스럽습니다.
백 레이어의 정보를 누르면 프론트 레이어가 내려갑니다무엇이 문제인가?
기존과는 다른 새로운 구조이다보니 다양한 문제점을 가지고 있습니다. 그러나 화면의 일부만을 차지하는 다른 컴포넌트와는 달리 백드롭은 화면 전체를 구성합니다. 영역이 넓고 여러 구성 요소를 가지고 있죠. 그렇기에 수정할 수 있는 부분도 많고, 새로운 요소를 넣고 빼기도 쉽습니다. 다양하게 변화가 가능하죠. 때문에 많은 문제들은 적절한 커스텀을 통해 해결 가능합니다.
위아래로 드래그하고 싶다
프론트 레이어는 상단 좌우측 코너가 둥그렇고 하단이 잘려있는 형태입니다. 그리고 상황에 따라 위아래로 움직입니다. 이는 손으로 누른 채 드래그해서 위아래로 움직일 수 있을 것 같은 착각을 불러일으킵니다. 이는 비슷하게 생긴 기존 컴포넌트들을 생각해보면 이해하기 쉽습니다.
구글 뉴스의 하단 시트입니다이는 규글 뉴스에서 사용하는 하단 시트(Sheets: bottom)입니다. 드래그해서 시트를 위아래로 움직일 수 있습니다. 비슷한 형태를 한 하단 드로어(Bottom drawer)도 동일하게 동작합니다. 사용자 입장에서는 프론트 레이어 또한 비슷하게 동작할 것이라 예상하게 됩니다. 그러나 프론트 레이어는 드래그가 아니라 백 레이어에 있는 버튼을 통해서만 움직입니다. 이 때문에 백 레이어를 펼치려고 할 때마다 프론트 레이어를 드래그하는 실수를 하기 쉽습니다. 이는 자연스러운 컨텐츠 탐색에도 문제를 일으킵니다. 스크롤 시 프론트 레이어 자체가 움직일 가능성을 생각하기에 스크롤을 시도하는 것이 부자연스럽습니다.
게다가 가로 스크롤도 어색하다
프론트 레이어의 상단 코너로 인해 가로 스크롤도 어색해집니다. 가이드라인에는 내부 컨텐츠를 가로 스크롤로 탐색할 수 있다고 나와있습니다. 그러나 하단 시트나 하단 드로어에서 가로 스크롤이 쓰이는 경우는 없습니다. 비슷한 형태인 카드 컴포넌트를 생각해보아도 내부에 가로 스크롤을 쓰는 경우는 거의 없죠. 많은 화면들이 가로 스크롤 또는 스와이프를 하는 컨텐츠를 갖고 있는데, 이를 백드롭에 사용하면 어색할 수 있습니다.
이 어색한 걸 가이드라인에 넣을 줄은 몰랐습니다이는 상단 코너의 형태 때문에 생기는 문제이기에 커스텀을 통해 어느 정도 해결이 가능합니다. 코너가 있는 상단 서브헤더 영역과 그 아래를 명확히 구분해주거나, 코너의 Radius 값(둥근 정도)를 조절해서 말이죠. 예시 앱인 Shrine을 보면 오른쪽 코너를 직각으로 만들어 어색함을 줄였습니다. 아래 이미지는 거기에 서브헤더 영역 구분을 추가해본 것인데, 오른쪽에서 컨텐츠가 나오는 것이 비교적 자연스러워졌습니다.
자연스럽습니다여러 주제의 컨텐츠를 넣기 힘들다
프론트 레이어를 고정한 상태에서 상하스크롤을 하기 위해 아래 이미지처럼 서브헤더가 들어갑니다.
Fall collection이 있는 곳이 서브헤더 영역입니다이는 내부에 여러 주제의 컨텐츠를 넣기 힘들게 합니다. 에어비앤비를 보면 메인에 둘러보기, 전 세계의 숙소, 여행 목적에 딱 맞는 숙소, 인기 트립 등 다양한 주제의 컨텐츠를 늘어놓습니다. 이런 컨텐츠에서는 하나의 서브헤더를 골라내기 힘듭니다. 그렇다고 서브헤더 영역을 비워놓자니 허전합니다. 하나의 제목으로 명확히 정리할 수 없는 컨텐츠에는 적합하지 않은 것이죠.
이런 다양한 컨텐츠에는 쓰기 힘듭니다그러나 스크롤에 따라 서브헤더가 바뀌게 만든다면, 경우에 따라서는 기존보다 더 편리하게 사용할 수 있습니다. 현재 보고 있는 컨텐츠가 어떤 내용인지를 명확히 보여줄 수 있는 것이죠.
스크롤에 따라 서브헤더를 바꿔보았습니다혹은 서브헤더 영역을 넓게 잡고 요약 정보를 넣을 수도 있습니다. 금융 앱을 보면 화면에 지속적으로 수입, 지출 등의 통계를 제시해주는 경우가 있는데, 이 때 서브헤더 영역을 활용하는 식이죠.
백 레이어에 확인, 취소 버튼이 없다
백 레이어에는 확인, 취소 버튼이 들어가지 않습니다. 탭이나 스텝이 있을 때에는 괜찮지만, 팝업으로 설정해왔던 필터 등의 내용을 백 레이어에서 설정할 때에는 문제가 될 수 있습니다.
아래 이미지는 에어비앤비의 필터입니다. 왼쪽 상단에 취소를 나타내는 X 버튼, 하단에 확인을 나타내는 숙소 보기 버튼이 명확하게 드러납니다.
다음 이미지는 백드롭을 사용한 필터입니다.
버튼이 왼쪽 상단의 X 버튼 뿐입니다. 이 상황에서 프론트 레이어를 불러오는 동작은 두 가지입니다. 왼쪽 위 X 버튼을 누르거나, 아래에 살짝 보이는 프론트 레이어를 누르거나. 각 동작이 확인과 취소 중 무엇을 의미하는지 애매합니다. 가이드라인에 명확히 나와있지는 않지만, 예시 앱인 Crane으로부터 추론해보면 두 동작 모두 확인을 의미합니다. 정확히 말하면, 백 레이어에서 포커스가 사라지면 선택한 필터가 무조건 적용되는 방향을 택한 것입니다. 하지만 X 버튼이 취소가 아니라는 것은 어색합니다.
더 나아가서, 안드로이드의 하단 뒤로가기 버튼은 어떨까요. 일반적으로 뒤로가기 버튼을 누르면 하던 작업을 취소하고 나가야 합니다. 그러나 이 경우 뒤로가기 버튼과 X 버튼의 동작이 일치하지 않습니다. 그렇다고 뒤로가기를 했는데 선택한 필터가 적용되어 버리면 그것도 어색하죠.
다만 백 레이어 영역이 넓기에 버튼을 넣을 공간은 충분합니다. 백 레이어에 들어갈 내용을 생각해보고 명확한 확인, 취소 동작이 필요하다면 버튼을 넣는 쪽이 좋습니다. 해당 앱의 다른 화면들과 일관성을 맞추어 만든다면 가이드라인과 맞지 않더라도 사용성에는 문제가 되지 않습니다.
프론트 레이어에 무거운 컨텐츠를 올리기 힘들다?
일반적으로 컨텐츠를 넣는 화면은 가장 아래에 깔려있습니다. 컨텐츠를 넣으면서 화면 위에 떠 있는 카드나 FAB 등을 사용하게 됩니다. 그러나 프론트 레이어는 이미 백 레이어보다 조금 떠 있는 상태입니다. 이미 떠 있는 화면 위에 또다시 떠 있는 컨텐츠를 올리는 것은 자칫 화면을 답답하게 만들 수 있습니다.
확인을 위해 카드, 하단 탭, FAB 등 화면 위에 떠 있는 컨텐츠가 많은 스카이스캐너에 적용해보았습니다. 그러나 화면이 생각보다 자연스러웠습니다. 오히려 서브헤더 영역으로 인해 여백이 생겨 깔끔해진 느낌마저 들었습니다. 올라가는 컨텐츠의 형태, 양, 구성 등에 따라 답답해 보일 수도 있고, 깔끔해 보일 수도 있을 것 같습니다. 예상과 실제 적용한 느낌이 많이 다를 수 있으니 백드롭을 쓰고자 한다면 기본 화면과 백드롭 화면에 각각 컨텐츠를 올려서 비교해보고 결정하는 것이 좋습니다.
생각보다 답답하지 않습니다그러면 언제 써야 하는가?
백드롭의 용도는 가이드라인에 잘 정의되어 있습니다. 백 레이어가 프론트 레이어에 영향을 끼쳐야 하며
1) 내비게이션
2) 스테퍼
3) 텍스트 필드
4) 필터
에 사용하는 것이 좋다고 나와 있습니다. 그리고 좀 더 생각해보면, 검색이나 추가 등의 기능도 잘 어울립니다.
가이드라인에 잘 정의되어 있습니다이 중에서도 별도의 확인 버튼 없이 항목을 바로 누르기만 하면 되는 내비게이션과 특히 잘 어울립니다. 기존에 사용하던 햄버거 버튼+내비게이션 드로어를 백드롭으로 바꾼다면 사용성에는 큰 차이가 없으면서도 시각적으로 화려함을 어필할 수 있습니다.
스테퍼(Stepper)와의 조합은 독특합니다. 스테퍼는 Material 2.0으로 오면서 가이드라인에서 사라진 컴포넌트 중 하나입니다. 과거에는 아래와 같은 형태였습니다.
못생겼습니다스테퍼는 현재 어떤 스텝인지 보여주기 위해 상단 영역 또는 좌측 영역을 활용하였습니다. 그러나 상단 영역에 넣을 경우 전체 스텝을 보여주기 힘들고, 공간을 차지하며, 보기에도 안좋습니다. 좌측 영역에 넣을 경우 전체 스텝을 보여줄 수 있지만 공간을 너무 많이 차지해서 정작 컨텐츠가 들어갈 곳이 없습니다. 백드롭은 이를 좀 더 깔끔하게 정리해서 보여줍니다.
버튼은 좀 이상하게 생겼는데, 일단 무시합시다스테퍼의 역할은 그저 전체 스텝을 보여주고 스텝 간 이동을 도와주는 것이 전부입니다. 이를 팝업을 띄워서 보여주기에는 과하죠. 그렇다고 화면에 다 표시해도 될 정도로 양이 적지는 않습니다. 이런 애매한 정보를 백드롭으로 표현하니 매우 깔끔하게 표시됩니다. 스텝 뿐 아니라 이 정도 비중의 정보가 있다면 백드롭으로 표현하기 좋을 것이라 생각합니다.
텍스트 필드와 필터는 확인, 취소 버튼과 관련한 문제가 존재합니다. 그러나 조금만 손보면 유용하게 사용 가능합니다. 백드롭은 다양한 수정과 응용이 가능하기에 용도를 한정지을 필요는 없습니다. 심지어 백 레이어를 사용하지 않고 겉모습만 백드롭으로 만들더라도 나름 새롭고 예쁘게 보이죠. 가능성이 많은 컴포넌트인 만큼 다양하게 사용되기를 기대합니다.
