페이스북의 탭바 히스토리
탭바 UI는 어떻게 발전했을까?
모바일 UI에서 탭바는 매우 중요한 요소다. iOS에서 탭바(Tab Bars)라고 부르고, 머티리얼 디자인에서는 하단 내비게이션(Bottom navigation)이라고 부른다. 머티리얼 디자인은 용어를 자주 변경하고, 글을 쓰는 편의상 탭바라고 한다. 안드로이드도 소개하고 싶지만, 계속 아이폰만 쓴 앱등이기 때문에 iOS 위주의 글이다.
데스크톱에서 모바일로
진짜 500px이었나? 아무리 찾아도 이 이미지뿐이다.2004년쯤 페이스북 웹페이지가 생기고 서비스가 시작되었다. 2003년에 싸이월드가 SK 커뮤니케이션즈에 인수되었고, 2007년 아이폰 1세대가 출시되었다. 이 시기는 LCD 모니터가 출시되면서 디자인의 많은 변화가 있던 해다.
겨우 찾은 이미지가 500px짜리 이미지였다. UX 분야에서는 '서비스를 위한 디자인'이 시작된 시기라고 볼 수 있다.
지금 보면, 프로필, 카메라, 쓰기 위치가 흥미롭다.페이스북은 아이폰 출시 후, iOS 환경에 적응해 가면서 하단 탭바를 만들기도 하고, 상단 탭바를 만들기도 했다. 상당 기간 동안, 페이스북은 상단 탭바를 사용했고, 탭바는 2중 구조를 지녔다. 친구, 채팅, 알림은 흐릿하게 표시되었고, 새로운 소식이 생기면, 배지로 표시되었다. 그리고 글쓰기, 사진 찍기, 장소 체크인은 지금의 탭바 아이콘처럼 표시했다.
아직 메신저가 분리되기 전이다.2010년 애플의 '레티나 디스플레이'는 디자인에 혁신적인 변화를 가져왔다. 더 가는 선과 더 흐린 회색을 써도 선명하게 보이는 고해상도 모바일 디스플레이는 더 작은 글자와 묘사를 가능하게 했다.
2016년부터 페이스북은 지금의 탭바처럼 하단에 탭바를 고정시키고, 우리가 지금까지 보는 보편적인 구성의 탭바를 만들었다. 그리고 레이블을 같이 표시하기도 하고, 생략하기도 했다.
그리고 충격적으로 햄버거 메뉴도 하단으로 옮겼다. 당시 기준으로 햄버거 메뉴의 위치는 항상 왼쪽 위였다.
'내가 어디 있는가와 어디로 가는가?' 혹은 '검색과 내비게이션', '이동과 행동' 등으로 볼 수도 있다. 하지만 일단은 탭바에 집중하자.
도대체 탭바를
어떻게 만들어야 하나?
'탭바를 디자인하려면 어떻게 해야 하나요?'라고 누가 묻는다면,
1. 사용자 중심으로 디자인해야 합니다.
2. UX 리서치와 정량적인 데이터를 수집하여 결정합니다.
3. MVP 모델을 만들고, 애자일 하게 개선하며 만들어야 합니다.
혹은,
1. 비즈니스 특징과 제품 기능 중심으로 디자인해야 합니다.
2. 비즈니스 목표와 사용자의 행동이 일치하게 디자인해야 합니다.
혹은, 디자이너의 영감 혹은 탁월한 리더의 통찰력에서 나온 디자인으로 하는 방법이 있다.
하지만 어떤 방식으로 나와도 누군가는 구체적인 디자인을 결정해야 한다. 포스트잇과 문서, 스프레드 시트에서 고민하는 내용과 실제 UI 디자인 툴에서 겪는 결정의 문제가 꼭 일치하지는 않는다.
탭바를 넣는다, 안 넣는다고 어떤 방식으로든 결정되고 나면, 탭바에 구성요소에 대한 수십 가지 질문과 결정이 진행돼야 한다. 주변에 디자인 팀장님이 있다면, 시안을 더 만들라고 하고, UX 디자이너가 있다면, 아마도 테스트해봐야 한다고 말할 것이다.
페이스북은 6년 동안
다 해보기로 결정한 듯하다.
결국엔 아이콘 밑에 레이블을 넣어야 했다.페이스북은 하단 탭바를 넣기로 결정한 후, 그 결정을 계속 유지하면서 실행 가능한 거의 모든 방법을 디자인하고 테스트해 본 것으로 보인다. 이 테스트는 지금도 계속되고 있다.
결국엔 아이콘 밑에 레이블을 넣어야 했고,
메뉴는 메뉴라고 썼어야 했다.
현재 선택된 아이콘을 표시할 때, 아이콘의 색 변화만으로 부족했다.
2016의 디자인과 2022년의 디자인을 비교했다.
전반적으로 대비는 선명해졌고, 아이콘 표현을 자세히 하기 위해서 라인과 면을 사용한 아이콘이 발전했다. 아이콘은 기능이나 콘텐츠를 표현하기 위해 지속적으로 개선되었다.
선택이 되지 않은 경우는 선으로, 선택된 경우는 면으로 아이콘이 표시된다. 모든 아이콘에는 가벼운 모션이 추가되기도 하고, 아이콘이 상징하는 알림을 띄우기도 한다.
UI 디자인에는 다크 모드가 적용되었고, 그에 따른 아이콘 배색도 추가되었다. 다크 모드가 추가되면서 아이콘 시스템이 적용되어 모든 아이콘은 글꼴처럼 통합되고 일관된 디자인이 적용되었다.
탭바의
아이콘과 기능
이 글을 쓰게 된 이유는 페이스북이 햄버거 메뉴와 프로필 사진을 합쳐서 탭바 오른쪽에 표시하고, 실질적으로는 앱의 설정 기능을 할당했기 때문이다. 아이콘의 레이블은 '메뉴'다. 그런데 탭바엔 '프로필'이 있다. 보통은 프로필에 프로필 사진이 들어간다.
프로필 사진이 모바일 앱 탭바의 메뉴 항목에 들어간 후, 페이스북 계정을 쉽게 바꿀 수 있는 기능이 데스크톱과 모바일에 추가되었다. 많은 계정을 운영하면서 페이지와 광고를 운영하는 계정이 많아졌기 때문에 생긴 변화로 추정한다.
지금의 탭바도 페이스북에겐 스쳐 지나가는 디자인이 될 수 있겠지만, 페이스북은 이런 문제를 꽤 많이 해결해왔다. 처음엔 알림이 종 모양이 아니라 지구본 아이콘이었고, 지구본 아이콘의 모양은 북반구에 사는지, 남반구에 사는지에 따라 다르게 표시되었다.
하지만 지금의 탭바 아이콘은 모양보다는 기능에 더 밀접하게 결합되어 있다. 기능을 추가할 때마다 탭바가 변경되어, 탭바의 아이콘 추가 혹은 변화를 알리는 툴팁 디자인에 대한 문제도 발생했다.
탭바의 변화가 일어날 때마다, 탭바의 변화만큼 다양한 툴팁 디자인이 적용되었다. 최근에는 기능 사용을 유도하기 위한 작은 모션이 들어가기도 했다.
하지만 충분하지 않았다.
이젠 탭바를 직접 설정한다!
최근 페이스북의 탭바 디자인에는 흥미로운 기능이 추가되었다. 메뉴에 프로필 사진이 들어가지 전부터 페이스북 앱의 가운데 3개의 아이콘이 자동으로 변경되기 시작했다.
각 사용자의 선호와 환경에 맞게 탭바의 아이콘이 자동으로 변경된다. 아이콘이 변경되면, 사용자는 평소에 사용하지 않는 기능을 사용해볼 수 있다.
가운데 3개의 탭바 아이콘을 길게 누르면, 알림과 고정 여부, 변경이 가능하고, 이 변경은 '메뉴'에서도 접근할 수 있다. 이렇게 해서 탭바에 5~6개의 아이콘을 배치할 수 있다. 실제로 탭바 아이콘의 제한된 개수를 넘어서 운영할 수 있고, 사용자에게 더 많은 선택권을 보장한다.
탭바의 아이콘을 변경할 수 있게 되면서, 피드에 있었던 피드 설정 기능이 사라지고, 3개의 변경 아이콘에 대한 알림 아이콘 선택이 적용되었다. 피드 아이콘은 매우 독특한데, 이 아이콘이 생각해보지 않으면, 잘 이해하기 어려운 상징성을 띄고 있다.
마무리
앱 디자인이 발전하면서, 탭바는 당연히 넣어야 하는 형식적인 요소가 되거나 단순한 디자인을 위해 제거해야 할 요소가 되었다. 그래서 앱마다 탭바가 있기도 하고, 없기도 하다. 플랫폼마다 적용하는 방식이나 가이드가 다르고, 탭바를 쓰지 않고도 좋은 성과를 내는 앱이 많다.
페이스북은 대표적인 소셜 미디어였고, 메신저를 별도 앱으로 분리하긴 했지만, 대표적인 슈퍼앱이다. 소셜 미디어 광고로 시장에 큰 변화를 일으키기도 했으며, 메타로 브랜드를 변경하기 전의 페이스북은 인스타그램을 인수하였고, 메타로 변경 전에 인스타그램, 페이스북, 왓츠앱의 인프라를 통합하기도 했다.
미국의 실리콘밸리 스타트업 기업들을 보면, 정말 많은 에너지를 디자인에 쏟는다. 그리고 그 디자인은 완전히 새로운 혁신이나 새로운 디자인을 만들기도 하지만, 실무적인 영역에서 기존에 있는 디자인 구성요소를 계속해서 개선해 나가기도 한다.
탭바의 실질적이고 구체적인 UI 디자인을 고민하는 디자이너가 인사이트를 얻고, 문제 해결을 디자인할 수 있는 참고 자료가 되길 바란다.
