🌟 디테일의 간격 시리즈! [✏️ 탑바의 스크롤 동작에 따른 인터렉션] (👀간단 요약) 스크롤링 탑바에만 집중하여 다른 앱에서는 어떤 로직을 사용하는지, OS마다 다르게 표현되는지 그리고 현재 작업중인 프로젝트에 어떻게 적용시킬 수 있을지에 대해 스터디한 내용 📌 Top bar ✓ Google material에서는 Top app bar, Apple interface guideline에서는 Navigation Bar라고 명칭 ✓ 상단에 항상 노출, 머물러 있는 스크린의 상태를 알려주며 유저의 행동에 따라 다양한 인터렉션을 부르는 중요한 요소 ✓ 타이틀만 있는 기본 탑바부터 검색, 탭, 드롭다운 등 기능이 있는 탑바까지 그 종류가 다양 📌 탑바의 기본 가이드 ✓ 아이폰 기본앱 팟캐스트, 현재 페이지를 강조하고 싶을 때는 크고 볼드한 타이틀이 탑바 아래에 들어감 ✓ 스크롤링, 다음 페이지로 이동시 빅타이틀이 탑바 중간에 작게 자리잡고 백버튼과 함께 이전 페이지의 타이틀을 보여줌 ✓ 탑바 오른쪽엔 Edit, Done같은 컨트롤러가 케이스에 따라 위치 ✓ 안드로이드, 예전 앱에서는 백버튼 없이 텍스트 왼쪽 정렬 탑바가 많았음 ✓ 요즘은 안드로이드 구성의 다양성 때문인지 기본으로 백버튼이 있는 앱들이 많아짐 ✓ 구글 머터리얼 적용 탑바를 보면 언더 쉐도우가 적용 📌 Scrolling behavior ✓ 스크롤링 탑바의 종류과 변화 확인 ✓ 탑바와 콘텐츠를 어떻게 분리시키고 OS마다 어떤 차이점을 주는지 또 어떤 인터렉션이 따르는지 확인 📌 기본탑바 (ref. Instagram) ✓ 스크롤링시 변화없이 상단에 그대로 고정 탑바를 유지하는 타입 ✓ 인스타그램에서는 옅은 회색BG와 라인으로 콘텐츠와 분리 ✓ 인스타그램의 검색 페이지에서는 검색창이 스크롤시 사라지고 탭이 스테이터스 아래에 위치 📌 탑바 + 중간탭 (ref. 29cm) ✓ 스크롤링시 탑바만 남아있다가 컨텐츠 중간에 있는 탭과 만나 상단에 고정 ✓ 쇼핑앱, 배달앱, 지도앱등 컨텐츠를 중간에 분리시켜줘야 하는 경우 활용 📌 히든탑바 (ref. Facebook iOS and AOS) ✓ 탑바 스크롤링 후 필요한 부분만 남기고 숨겨 화면도 더 확보하고 액션이 쉽도록 유도 ✓ 스크롤 다운시 숨겨졌던 부분이 다시 나오는 인터렉션 ✓ 페이스북 iOS, 스크롤링시 탑바를 숨겨 스테이터스 바만 남기고 피드를 보는 중간에 스크롤 다운시 탑바가 다시 등장 📌 오버랩 탑바 (top- Airbnb, bottom- Yelp) ✓ Airbnb, 경계없이 탑바와 콘텐츠가 오버랩 된 경우 ✓ 스크롤시 이미지는 흐려지고 하얀 백그라운드가 생성 ✓ 백그라운드 컬러에 맞춰 탑바의 흰색 아이콘들은 블랙으로 변하고 구분선으로 콘텐츠 분리 ✓ Yelp, 스크롤시 이미지는 사라지고 탑바 전체가 메인컬러로 커버하여 강조하는 방식도 📌 extending / shorten bar (ref. Ubereats) ✓ 스크롤 동작으로 탑바 영역이 확장/ 축소되는 기능 ✓ Ubereats의 첫번째 이미지는 검색 영역이 잘 보이도록 큰 텍스트 사이즈와 넓은 패딩으로 강조 ✓ 스크롤시 두번째 이미지처럼 영역이 축소되며 상단에 자리 ✓ 검색 기능을 유저에게 강조하고, 스크롤 후 탑바를 축소시켜 공간을 확보하며 접근도 용이 📌 Dynamic top bar (ref. Google Maps) ✓ 한 스크린에서 탑바 구조가 여러번 바뀌는 타입 ✓ 플로팅 검색 바가 첫 화면에 보여지고, 이후 스크롤하면 검색 바가 위로 날라가며 액션 아이콘이 있는 이미지 탑바 등장 ✓ 더 스크롤하면 '오버랩 탑바' + '중간탭'처럼 이미지는 흐려지며 흰색 백그라운드로 바뀌고 중간에 위치한 탭도 상단으로! ✓ 한 페이지에서 총 3번 탑바의 스타일이 바뀌는 것 (👋중요한 이유가 뭔가요?) OS 별 가이드에 구체적 내용이 담겨 있지만, 놓치기 쉬운 구성 이기도 해요. 요약에는 포함되지 않았지만, 탑바와 하단탭은 함께 고려해야 하는 구성입니다. 주요 사례와 함께 글쓴이가 메인 디자이너로 실제 프로덕트에 어떻게 적용했는지 살펴볼 수 있어 더 좋았던 내용입니다. 본문에서는 사례 이미지를 함께 볼 수 있으니, 꼭 확인해보세요!