탑바의 스크롤 동작에 따른 인터렉션
상단 앱바의 스크롤링 동작에 따른 변화와 트랜드 스터디
현재 내가 진행 중인 프로젝트는 앱 전체 UX, UI를 재정립함과 동시에 제대로 된 디자인 시스템을 구축하는 작업을 하고 있다. 전반적인 무드는 화이트 클린 룩으로 콘텐츠 간의 우선순위를 고려하여 배치한다. 이 작업을 하면서 작은 스터디들을 여러 개 하였는데 그중 하나가 탑바 스크롤링에 대한 것이다.
디자인 시스템에서 탑바 디자인과 로직에 대해 정의를 내릴 때 단면적인 요소가 아닌 이후 인터렉션을 생각하며 모든 페이지에 일관성있게 적용하려 한다.
탑바의 폰트 사이즈, 최대 텍스트 길이를 테스트하여 작은 디바이스 (예를 들면 iphone 5, SE *)에서 다른 요소들과 겹쳐지지 않도록 주의 하였다. *최근 업데이트된 디바이스 사용 현황을 보면 태국은 아직도 iphone 5, SE를 사용하는 유져가 꽤 있어 항상 디자인할때 이 해상도의 디바이스도 고려한다.
또한 흰 배경의 콘텐츠에서 하얀 탑바가 스크롤 되었을때 탑바와 콘텐츠간의 분리도 필요했다.
이미지가 많은 콘텐츠의 경우 경계선 없이 솔리드 탑바를 쓰는게 무난하지만, 텍스트 정보가 많은 페이지의 경우 탑바의 타이틀과 정보 사이에서 혼란을 줄수 있기 때문이다.
그래서 이번 숏터디에서는 스크롤링 탑바에만 집중하여 다른 앱에서는 어떤 로직을 사용하는지, OS마다 다르게 표현되는지 그리고 현재 작업중인 프로젝트에 어떻게 적용시킬 수 있을지에 대해 스터디 하려고 한다.
Top bar
이 요소에 대해 Google material에서는 Top app bar라 부르고, Apple interface guideline에서는 Navigation Bar라고 명칭한다.
Top app bar : 탑앱바는 현재 스크린과 관련된 정보와 액션들을 보여준다 (The top app bar displays information and actions relating to the current screen-Google material)
이 아티클에서는 간단하게 '탑바'라 명칭하려 한다. 탑바는 앱의 상단에 항상 노출되고, 현재 머물러 있는 스크린의 상태를 알려줄 뿐 아니라 유저의 행동에 따라 다양한 인터렉션을 부르는 중요한 요소이다.
탑바의 종류
타이틀만 있는 기본 탑바부터 검색, 탭, 드롭다운 등 기능이 있는 탑바까지 그 종류가 다양하다.
다양한 탑바의 예시를 아래에 정리해보았다.
탑바의 기본 가이드
iOS의 탑바 가이드는 아이폰 기본앱들에서 쉽게 볼 수 있는데, 그중 팟캐스트로 예를 들어보자 (iphone software version - 13.3)
현재 페이지를 강조하고 싶을 때는 크고 볼드한 타이틀이 탑바 아래에 들어간다
스크롤링을 하거나, 다음 페이지로 이동시 빅타이틀이 탑바 중간에 작게 자리잡고 백버튼과 함께 이전 페이지의 타이틀을 보여준다. (iOS에서 타이틀 센터 정렬이 기본 가이드) 탑바 오른쪽엔 Edit, Done같은 컨트롤러가 케이스에 따라 위치한다
Ref - iOS design guideline
Android의 경우 예전 앱에서는 백버튼 없이 텍스트 왼쪽 정렬 탑바가 많았는데, 요즘은 안드로이드 구성의 다양성 때문인지 기본으로 백버튼이 있는 앱들이 많아졌다. 그리고 구글매터리얼 적용 탑바를 보면 언더 쉐도우가 적용된 걸 볼 수있다.
Ref - Google material
Scrolling behavior
탑바의 기본 구성에 대해 알아보았으니 스터디 메인 주제인 스크롤링 탑바의 종류과 변화를 알아보자. 탑바와 컨텐츠를 어떻게 분리시키고 OS마다 어떤 차이점을 주는지 또 어떤 인터렉션이 따르는지 리서치해 보았다.
기본탑바 (ref. Instagram)
스크롤링시 변화없이 상단에 그대로 고정 탑바를 유지하는 타입으로 인스타그램에서는 옅은 회색BG와 라인으로 콘텐츠와 분리를 시켜주었다.
탑바 + 중간탭 (ref. 29cm)
스크롤링시 탑바만 남아있다가 컨텐츠 중간에 있는 탭과 만나 상단에 고정된다. 주로 쇼핑앱, 배달앱, 지도앱등 컨텐츠를 중간에 분리시켜줘야 하는 경우에서 보인다.
히든탑바 (ref. Facebook iOS and AOS)
탑바 스크롤링 후 필요한 부분만 남기고 숨겨 화면도 더 확보하고 액션이 쉽도록 유도하였다.
스크롤 다운시 숨겨졌던 부분이 다시 나오는 인터렉션이다. 아래의 예시 페이스북 iOS 에서는 스크롤링시 탑바를 숨겨 스테이터스 바만 남기고 피드를 보는 중간에 스크롤 다운시 탑바가 다시 나타난다.
스크롤시 탑바영역만 숨기고 중요한 일부 기능, 예를 들면 칩이나 탭은 항시 노출시키는 경우도 있다. 인스타그램의 검색 페이지에서는 검색창이 스크롤시 사라지고 탭이 스테이터스 아래에 위치한다. (instagram search)
오버랩 탑바 (top- Airbnb, bottom- Yelp)
아래의 Airbnb 상세 이미지처럼 경계없이 탑바와 콘텐츠가 오버랩 된 경우이다. 스크롤시 이미지는 흐려지고 하얀 백그라운드가 생성된다. 백그라운드 컬러에 맞춰 탑바의 흰색 아이콘들은 블랙으로 변하고 구분선으로 콘텐츠 분리를 시켜준다
아래의 예시처럼 스크롤시 이미지는 사라지고 탑바 전체가 메인컬러로 커버하여 강조하는 방식도 있다.
extending / shorten bar (ref. Ubereats)
스크롤 동작으로 탑바 영역이 확장/ 축소되는 기능이다. 아래 Ubereats의 첫번째 이미지는 검색 영역이 잘 보이도록 큰 텍스트 사이즈와 넓은 패딩으로 강조하고, 스크롤시 두번째 이미지처럼 영역이 축소되며 상단에 자리잡는다. 이렇게 표현하는 이유는 검색 기능을 유저에게 강조하고, 스크롤 후 탑바를 축소시켜 공간을 확보하며 접근도 용이하다. 축소된 상황에서 가장 탑으로 올라가면 다시 탑바영역이 첫번째 이미지처럼 확장된다.
Dynamic top bar (ref. Google Maps)
한 스크린에서 탑바 구조가 여러번 바뀌는 타입이다.
구글맵을 보면 플로팅 검색 바가 첫 화면에 보여지고, 이후 스크롤하면 검색 바가 위로 날라가며 액션 아이콘이 있는 이미지 탑바가 나온다. 그 상태에서 한번 더 스크롤하면 위에서 설명한 '오버랩 탑바' + '중간탭'처럼 이미지는 흐려지며 흰색 백그라운드로 바뀌고 중간에 위치한 탭도 상단에 자리잡는다. 한 페이지에서 총 3번 탑바의 스타일이 바뀌는 걸 볼 수 있다.
Bottom elements
탑바와 함께 볼 요소로 하단 내비게이션 또는 하단 버튼을 빼놓을 수 없는데, 탑바와 하단 요소가 어떻게 밸런스를 맞추는지 살펴보기로 한다. (탑바 스크롤링에 대한 아티클이기 때문에 하단 엘리먼트에 대한 자세한 설명은 각 OS의 가이드 라인으로 확인해주세요. Google App bar bottom , Apple App bar)
탑바와 하단 네비가 함께 있는 경우, 위 아래가 막혀있기 때문에 구분을 진하게 주면 화면이 답답해 보일 수 있다. 이 두 요소가 한 스크린에 있을때 어떻게 표현되는지 스터디 해보자.
하단 네비
-하단 네비보다 탑바를 강조
아래 세 앱의 공통점은 하단 네비의 밝은 배경컬러 + 아이콘 + 텍스트의 구성으로 볼 수 있다. 현재 머무르고 있는 탭의 아이콘은 메인 컬러로, 그외는 어두운 회색으로 최대한 힘을 뺀 라이트한 스타일이라 콘텐츠를 훑어보는데 답답함이 없다. 탑바를 살펴보자면 Airbnb는 쉐도우로 Skyscanner와 Yelp는 메인 컬러로 하단 네비보다 상단을 조금 더 강조하였다. 상단으로 먼저 눈을 보낸 후 자연스럽게 아래 콘텐츠로 흐를 수 있도록 한 방식이다.
-하단과 탑바 동일한 레벨
동일한 라인, 백그라운드로 탑바와 하단 네비의 중요도를 나누지 않고 플랫하게 표현한다.
이와 같은 경우는 상단, 하단 탭보다 콘텐츠가 더 중요한 구조이다. 인스타그램의 경우 피드롤 훑어보기 더 유용하게, 도어대쉬의 경우 주문하고 싶은 푸드 혹은 레스토랑에 집중할 수 있게 하였다.
-하단 네비 강조
처음 예시와 반대로 상단보다 하단 네비를 강조한 타입이다.
유저가 활발하게 쓰는 탭이 하단 네비에 있을 경우 아래와 같은 하단 강조형을 쓴다. Medium은 블랙 백그라운드와 아이콘만으로 묵직하게 강조 하였다. Youtube와 Facebook의 탑바에 서비스명과 액션 버튼이 있고 스크롤링하면 탑바가 사라지고 스테이터스 바만 남는다. 하단 네비게이션이 있기 때문에 상단을 유지하기 보다 숨김으로 영역을 더 확보한다. 스크롤 다운 하면 상단은 다시 나타나는 인터렉션이 있기 때문에 문제 없이 하단 네비만 남겨놓은 타입이다.
하단 버튼
- 탑바 + 하단 버튼
탑바와 버튼의 로직을 정의할때 여러가지 가능성을 고려하여야 한다.
버튼은 하단 네비게이션과 달리 고정된 요소가 아니기 때문에 버튼의 유무 혹은 버튼의 성격에 따라 탑바와의 계층구조를 생각해야한다. 아래 우버이츠 앱의 레스토랑 페이지에서 버튼이 생기는 상황은 메뉴 아이템이 카트에 담겼을 때이다. 음식 주문을 하는 UX Flow를 보면 하단 버튼은 다음 단계로 넘어가는 역할을 하기 때문에 상단보다 버튼을 더 강조시켰다 볼 수 있다.
- 상단, 하단 버튼 다이나믹 체인지
모든 앱이 한가지 규칙으로만 움직이는 것은 아니다. 페이지 이동, 팝업, 모듈, 링크등 다양한 상태에서 다이나믹하게 바뀌는 앱도 많이 있다. 아래는 Airbnb의 스크린으로 3가지 다른 스타일을 볼 수 있다.
첫번째 스크린은 플로팅 탑바와 버튼에 옅은 그림자가 있는 Airbnb에서 기본적으로 쓰는 구성이다. 두번째 스크린은 플로팅 탑바지만 쉐도우는 없는 스타일이다. (추측하건데 이미지 탑바에서 흰 탑바로 변화되지 않은 경우, 탑바에 Close이외의 액션 아이콘이 없는 경우에 플레인 탑바를 쓰는 것 같다). 마지막 스크린은 Bottom sheet으로 다른 페이지와는 성격 자체가 달라 라인으로 구분시켜주었다.
Trend and final output
벤치마킹을 통해 본 앱들은 전반적으로 깨끗한 배경에 콘텐츠 강조형으로 정리가 되어있다. 무조건 디자인 가이드를 따르는 것도 아니고 각 앱의 성격에 맞게 따르는 부분, 제거하는 부분, 또는 좀더 업그레이드 시키는 방식 등으로 각 앱의 개성을 나타낸다. 그렇더라도 가장 중요한 앱의 메인 목적인 정보 전달과 유저센터 디자인/인터렉션에 대한 고민은 충분히 필요하다.
현재 나는 태국에서 딜리버리 서비스 메인 디자이너로 프로젝트를 진행중이다. 스터디 후 어떻게 적용시켰는지 공유 하고자 한다. (이미 실서버에 릴리즈 된 버전이다 )
내가 가장 포커스를 둔 부분은 기본 상태일때 다른 요소들과 깔끔하게 잘 어울리는 것, 다양한 탑바 스타일에 일관성있게 적용할 수 있는 것, 푸드앱에서 중요한 카트 버튼을 강조하면서 다른 콘텐츠를 보는데 방해되지 않게 분리 시키는 것을 기본으로 하였다. 그리하여 적용된 로직과 디자인은 아래와 같다
Top bar
기본상태
라인이나 쉐도우를 쓰지 않는다. 기본탑바, 이미지 탑바, 서치탑바에 일관성 있게 적용한다.
탭이 있을 시
레스토랑 페이지에서 중간지점에 탭이 위치해있다. 스크롤을 하면 탭이 탑바 아래 고정되는 로직으로 이때 탭의 그레이 라인이 다른 탑바의 스크롤 라인과 동일한 컬러와 두께이다.
이미지 탑바
이미지 탑바의 경우 밝고 어두운 이미지 두 가지를 다 고려하여 디자인 하였다. 이미지의 밝기 유무에 상관없이 모두 적용시킬 수 있게 어두운 쉐도우 위에 흰색 아이콘과 스테이터스 바를 배치하였다. 스크롤시 이미지는 사라지고 색반전으로 흰 배경에 탑바 요소가 검은색으로 자리잡는다.
서치탑바
서치와 탑바가 같이 있는경우 탑바에서 가이드텍스트와 키보드가 함께 열려 바로 타이핑이 가능하게 하였다. 키워드를 적으면 바로 결과가 나오는 로직으로 이 상태에서는 기본 탑바인 아무것도 없는 상태 유지 하고,
결과를 보기위해 스크롤시 앞서 얘기한것처럼 그레이 라인이 생기며 콘텐츠 분리를 시켜준다.
Button
버튼은 단순하게 2가지로 쉐도우가 있는 플로팅 버튼, 쉐도우가 없는 기본 버튼이 있다.
플로팅 버튼
콘텐츠가 길어 버튼이 중간에 띄워져 있을때 쉐도우가 있는 플로팅 버튼으로 표현한다.
깊이감을 줌과 동시에 스크롤이 가능하다는 힌트를 간접적으로 알려준다.
또 탑바에서는 라인을 쓰고 버튼은 쉐도우를 줌으로 'next step'역활을 하는 버튼을 조금 더 강조하는 셈이다.
플랫버튼
기본적으로 스크롤이 되지 않는 스크린 혹은 스크롤이 끝난 스크린에 플랫 버튼을 쓴다.
3번째 이미지는 그 예시로 유저가 스크린 끝에 다다르면 쉐도우가 사라지면서 플랫 버튼만 남게된다.
탑바와 버튼은 위의 설명대로의 모든 개편된 스크린에 일관성있게 적용하였다.
유저는 알아채지 못할만큼 디테일한 마이크로 인터렉션일테지만, 그 와중에 편하게 사용하길 바라는 마음으로 스터디하게 되었다. 물론 내가 제시한 방법이 무조건 정답은 아니다. 프로젝트의 성격과 화면 구조에 따라 알맞은 하이라키를 가지고 적용하면 될 것 같다. 혹시 편리했던 탑바,하단 네비, 버튼의 스크롤링 상태에 대해 공유하고 싶은 분은 코멘트에 남겨주세요
Thank you for reading :)
