[6/100] appbar

6번째는 appbar(이하 앱바)입니다. 앱바는 앱을 사용하면 가장 상단에 고정되어 있는 영역을 의미합니다. 여기에 주로 홈 화면 기준으로 프로덕트의 로고와 BNB에 넣기에는 애매한 기능이나 메뉴들을 위치시키게 됩니다. 화면에 따라서 포함되는 기능도 다르며, 기능보다는 내비게이션만 포함되는 경우도 있습니다.

 

 

위를 보시면 대략 4가지 유형의 앱바가 예제로 있는데, 원래는 훨씬 다양하며, 서비스의 구조마다 다를수 있습니다. 앱바를 구성하는 영역을 나누면, leading, title, function으로 나눌 수 있습니다.

 

• leading - 앱바 좌측에 있는 영역이며, 생략될수 있습니다. 생략될 경우에는 title이 위치할 수도 있으며, 주로 햄버거 메뉴, 뒤로 가기 등의 내비게이션 관련 기능이 들어가는 영역입니다.
• title - 현재 화면의 제목을 표시하거나 대표적인 정보들을 표시할수 있습니다. 홈 화면에서는 title보다는 프로덕트의 로고가 위치하게 됩니다.
• function - 앱바 우측에 있는 영역이며, 주로 기능들이 위치합니다. 경우에 따라서는 다음 화면으로 넘어가는 내비게이션 기능이 들어가기도 합니다.

그리고 아이콘 버튼 영역이 살짝 붉게 처리가 되어있는걸 확인할 수 있습니다. 이건 탭 영역을 의미하는데, 가끔 다른 분들의 디자인을 보게 되면, 탭 영역이 그냥 아이콘 크기만큼만 되어 있는 경우가 있습니다. 이렇게 되면 사용자가 탭을 하기 힘들 수도 있고, 화면 설계상 구조가 엉성하게 됩니다. 그렇기 때문에 작은 컴포넌트를 설계하거나 배치할 때는 탭 혹은 클릭 영역을 명확하게 정리해야 합니다.

 

마지막으로 앱바에 포함되는 다른 컴포넌트가 있을 수도 있습니다. 보통은 화면에 보이는 컨텐츠를 제어하는 탭 메뉴가 주로 있으며, 앱바 바로 아래에 붙게됩니다. 검색을 위한 input이 있을수도 있고, 토글 버튼이 있을수도 있고, 다양한 input이 있을수도 있습니다. 이건 프로덕트에 적합한 설계를 하다 보면 자연스럽게 도출될 거 같습니다.