[2/100] BNB

두 번째는 앱 하단에 위치한 BNB입니다. 이번에는 약간의 시나리오를 가정해서 작업을 했습니다.

• 앱은 어느정도 기능 중심 디자인의 형태를 가지고 있다.
• 그래서 핵심적인 기능보다는 다양한 기능을 제공하고 있다.
• 사용자들에게는 자신에게 필요한 기능에 빠르게 접근하기 위해 개인화가 필요한 상황이다.

프로덕트 초기에는 극단적인 사용자 중심의 디자인을 가지고 있는 게 대부분입니다. 사용자들의 요구를 빠르게 파악해서 거기에 집중하는 건데요. 프로덕트가 규모가 커지고, 기타 대외적인 이유 때문에 기능들이 점점 붙는 경우가 많습니다. 대략 이런 시나리오를 가정하고 작업을 하였습니다.

 

 

BNB메뉴에 타이틀 혹은 라벨이 있는 타입과 없는 타입으로 구분은 했는데 당장은 좀 불필요해보입니다. 우측에 더보기를 탭 하게 되면 BNB에 속하지 않은 기타 기능들이 나오게 되고, 길게 탭 하고 드래그하면 BNB에 있는 메뉴를 포함해서 메뉴의 위치를 바꾸는 게 가능합니다. 좀 자세한 설정으로는 더보기 내에 있는 메뉴는 라벨이 무조건 보이는 게 시각적인 혼란을 줄이는데 도움이 되는 거 같습니다.

하위 컴포넌트 목록 및 상태

• bnb-item - 라벨 유무, 선택 유무의 상태를 가짐
• bnb-container - 기본 상태, 확장된 상태를 가짐