UI 디자인 뎁스 나누기!(디자인 고민)

뎁스를 나눠야할 때 어떻게 디자인으로 잘 풀어낼 수 있을까?

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

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

이번에는 회사에서 디자인을 하면서 많이 고민했던 부분은 뎁스 나누기! 였습니다. 서비스 구조가 깊어지고 메뉴 안에 또 하위 메뉴들이 계속 생기게 될때 탭, chip, 세그먼트 버튼 등 다양한 방법으로 나누게 되는게 위계를 어떻게 가져가는게 좋을지? 어떤 ui를 상위 뎁스에 놓을지 고민하게 되었습니다.

탭, chip, 세그먼트 버튼으로 뎁스를 나누자!

어떤 UI를 상위 뎁스에 활용하는게 좋을까?

UI구조에 대한 고민

처음 디자인을 할때, 계층 구조가 1뎁스, 2뎁스, 3뎁스까지 들어가는 구조였고 해당 구조를 디자인으로 풀어내야했습니다. 

댑스가 깊게 들어갈때 어떤 ui를 사용해야할지 고민들을 하였고 여러 시안을 만들어 보았습니다.

 - - - -

위 시안은 모바일일 경우이고 아래는 PC의 경우입니다. 반응형을 고려해서 디자인 하였고 댑스를 나누게 된다면 어떻게 나누는게 좋은가? 고민하게 되었습니다.

제가 고민했던 부분은 chip형태로 뎁스를 나누는 ui가 상위에 있어야하나 하위에 있어야 하나? 였습니다. 세그먼트 버튼도 chip 하위에 있으니 어색하고... 다른 대안들을 많이 고민해보았습니다.

비슷한 서비스인 플랙스를 참고해보면 제가 한 것처럼 1뎁스로 왼쪽에 메뉴 탭을 넣고 그 다음뎁스로 [홈 피드], [회사소식], [할일]과 같이 탭형태로 구분을 하는 것을 볼 수 있습니다. 3뎁스로는 세그먼트 버튼을 이용하는 것을 볼 수 있었습니다.

결국 다른 방법들은 없을까 찾아보다가 동료의 도움을 받아..!

네이버 게임의 UI를 레퍼런스 삼았고 상단에 GNB가 존재하며 기존대로 왼쪽에 메뉴탭이 존재하고(LNB) 오른쪽 부분에 네이버처럼 공간을 두어 fixed하여 메뉴를 한단계 더 찾아볼 수 있는 ui로도 고민해 보았습니다!

결과적으로 chip을 사용한 디자인을 채택하였고 그 하위 댑스로는 세그먼트 버튼을 사용하였습니다. 이러한 작업을 통해서 뎁스를 나누는 방법이 너무 다양하겠구나! 느꼈고 여러 시행착오를 통해 뎁스를 나눌때 최선의 디자인을 찾을 수 있었습니다.