앱 상단 바 디자인 고민

앱 상단바 디자인, 바텀라인을 넣을 것인가? 말 것인가?

한윤석 (두블링 DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

이번에는 회사에서가 아닌 사이드프로젝트를 하면서 얻은 인사이트를 공유하려고 합니다!

‘국민참여‘라는 앱 개발 사이드 프로젝트를 진행하고 있는데, 사이드 프로젝트를 하면서 앱 상단 바를 어떻게 디자인할지 고민한 내용에 대하여 공유하려고합니다!

아름다운 앱 상단 바 디자인

앱 디자인에서 상단바 디자인을 어떻게 하는게 가장 좋을까?

바텀라인을 넣을까 말까?

앱 디자인을 하면서 상단바 디자인을 하게되었습니다. 당연하게도 상단바에 바텀라인을 넣는 디자인을 회사에서는 했어서 이번에도 자연스럽게 바텀라인을 넣었는데요,

위에 디자인을 보면 상단바 하단에 바텀라인이 있는 것을 알 수 있습니다. 정말 별겨 아닌 부분이지만 디자인을 하면서 이런 세부적인 부분을 고민하게 되었습니다.

당근 마켓도 기존에는 바텀 라인을 통해서 분기를 확실히 주어 디자인 하는 것으로 보여졌지만

요즘에 와서는 바텀 라인 없이 상단 바를 디자인 하는것을 볼 수 있습니다.

토스, 번개 장터 등 다른 서비스들도 바텀 라인을 사용하지 않는 것을 알 수 있습니다.



바텀라인을 넣었을 경우 장점과 단점

바텀 라인을 상단 바에 넣었을 경우 라인을 통해 분기가 잘된다는 장점이 있습니다.

그러나 라인을 분기함으로서 하단 간격까지 몇px더 사용하게 되어 한 화면에 더 많은 콘텐츠를 보여주지 못한다는 단점 또한 존재합니다.

테스트

디자이너 3명, 일반 서비스 사용자 7명 (총10명)을 상대로 두개의 시안을 만들어 어떤 시안이 더 보기 좋은지 어떤 디자인이 바뀐 내용인지 먼저 설명 후 a/b test를 진행하였습니다.

실제로 7명의 사람들은(디자이너는 2명) 바텀 라인이 없는 화면을 더 선호 했습니다. 바텀 라인이 없는 시안은 분기가 안되어 가독성이 떨어진다는 평가도 있었지만 시각적으로 더 세련되며 한 화면에서 조금이라도 더 많은 내용을 보여줄 수 있었습니다.

왼쪽 바텀라인 x / 오른쪽 바텀라인 o

결론

사용성 측면에서 라인으로 분기를 한번 더 해주는게 안정적나 디자인적으로는 바텀 라인이 없는 것이 화면 공간도 더 적게 차지하고 선호도도 높았습니다.