Version 2.0 vs Version 3.0
뭐가 어떻게 다른지 모양을 살펴봅니다.
이전 글에서 비즈넵 웹앱 2.0 버전의 GNB가 문제가 많았고, 이것 때문에 웹앱 UX가 엉망이었다고 지속적으로 이야기했었다. 하지만 어떤 구조였길래 3.0 버전을 만들 때 새로 서비스를 만드는 것과 같은 모험을 감행해야만 했는가에 대해서는 자세히 다루지 않았던 것 같다 2.0에서 3.0으로 제일 크게 변한 부분과 사용성 개선에 어떤 차이가 있었는지 좀 더 자세히 이야기해보려고 한다.
2.0 웹앱 GNB 구조
Global Navigation Bar(GNB)에 대한 기초 개념도 없는 상황에서 고민만 잔뜩 들어간 채로 설계한 2.0 웹앱의 GNB는 하나의 데이터를 보려면 기나긴 여정을 감내해야만 하는 깊이를 자랑(...)했다. 문제는 모든 대분류 메뉴가 이렇게 깊이를 가졌던 것도 아니고, 메뉴마다 계층과 깊이가 달랐고, 사업체와 관련된 메뉴에만 깊이가 집중된 문제가 있었다.
매출 증빙을 보려면 긴긴 여정을 해야만 했었더랬습니다...이렇게 하나의 중점 기능에 집중되다시피 설계된 GNB는 서비스를 더 복잡하게 만들 뿐이라는 걸 서비스 운영 중에야 깨달았다. 이런 이유로 고객에게 들어오는 문의 대부분이 서비스 이용방식에 대한 질문이었고, 내부적으로도 GNB 때문에 기능하나 붙이기가 어려운 상황이 반복되었다.
브레드 크럼(Breadcrumbs)의 위치도 문제였다. 사이드바 상단에 위치한 브레드 크럼은 너비에 제약이 생겨서 메뉴명이 길거나 깊이가 깊을 경우 현재 페이지 위치와 그 직전 페이지 명을 제대로 표기하지 못했다. 브레드 크럼이 내비게이션으로서 제대로 된 역할을 하지 못한 것이다. 하지만 메뉴를 타고 들어가면서 페이지가 변환되어야 하는 2.0 GNB 특성상 브레드 크럼을 메인 페이지 상단으로 옮기기도 애매한 상황이었다.
서비스 이용자가 많아지고 기능이 계속 추가될수록 2.0 버전의 GNB는 점점 버려야만 하는 가장 큰 쓰레기 레거시가 되었다.
나는 쓰레기야 <- (구글 이미지 검색)*브레드 크럼 내비게이션은 아래 글을 참고해주세요.
3.0 웹앱 GNB 구조
초짜 기획자가 2.0 웹앱 GNB 설계를 혼자 하면서 생긴 혼란을 신규 버전에도 동일하게 만들어선 안되었기 때문에 3.0 웹앱 GNB는 다양한 사내 구성원들과 긴긴 논의를 거쳐 나오게 되었고, 그 과정은 이전 글에서 이야기를 했었다.
신규 버전의 핵심은 한눈에 펼쳐볼 수 있는 메뉴 배치와, 2.0 버전에서 고객들이 ... 새로운 버전에 거부감을 덜 느낄 수 있게 하는 것이었다.
신규 버전의 핵심은 한눈에 펼쳐볼 수 있는 메뉴 배치와, 2.0 버전에서 고객들이 만족하며 사용하고 있던 기능을 최대한 살려서 새로운 버전에 거부감을 덜 느낄 수 있게 하는 것이었다. 세 번이나 사이드바가 변경되며 움직였던 깊이는 (최대) 2단계 아코디언 방식으로 변경했고, 필요에 따라 사이드바 옆에 서브 사이드바를 추가하거나 상단 GNB를 최대한 활용하여 2.0에서 사용하던 기능을 신규 버전에서도 손쉽게 찾을 수 있게 배치했다. 전체적인 브랜드 컬러도 2.0의 푸른색을 최대한 빼고 보라색과 검은색을 활용하여 고급스럽고 전문가를 위한 서비스란 느낌을 강조했다.
depth를 2단계로 줄이고 아코디언 방식으로 변경했다브레드 크럼도 콘텐츠 페이지 상단에 고정하여 보여줄 수 있게 되었다. 이는 2.0과 다르게 사이드바가 갑자기 변경되거나 사라지는 일이 없이 그대로 유지되고, GNB와 콘텐츠 페이지 간의 위치도 거의 고정적이어서 가능한 변화였다. GNB 계층 정리도 마무리되면서 브레드 크럼의 규칙을 정하고 반영하는 것은 어렵지 않았다.
서비스의 큰 틀인 GNB가 정리되고 GNB내의 메뉴들의 계층과 라벨링 규칙이 지정되면서, 새로운 기능이 추가되어도 정돈된 GNB의 모습을 유지하게 되었다. 신규 기능을 만들어서 메뉴로 추가할 때도 GNB의 규칙에 따라 적용하면 되니 개발이나 디자인팀의 부담감도 상대적으로 줄어들었던 것 같다. 덕분에 고객들의 요구사항을 기존보다는 쉽게 반영하여 서비스 개선 속도도 향상할 수 있었다.
이름 붙이기, 의외의 난관
기존에 사용하던 명칭을 좀 더 알기 쉽고 통일된 느낌으로 바꾸기 위해서 많은 고민과 논의를 거쳐야 했다.
GNB 구조와 계층을 정리하면서 가장 크게 신경 쓴 부분은 내비게이션 바에 들어갈 명칭들이었다. 기존에 사용하던 명칭을 좀 더 알기 쉽고 통일된 느낌으로 바꾸기 위해서 많은 고민과 논의를 거쳐야 했다. 디자인 시안에 맞춰서 글자 길이도 맞춰야 하고, 회계세무 영역에서 쓰는 용어를 너무 무시하지 않아야 하고, 내부 구성원들이 이야기하기 너무 어렵지 않아야 하고,... 등등 고려할 사항이 정말 많았기 때문이다.
비즈넵 웹앱은 전문가를 위해 우선 제공되고 있었기 때문에, 용어가 전문적이었고 세법과 관련된 용어도 많아서 마냥 쉬운 용어로만 메뉴명을 정할 수 없었다. 그리고 각 기능 메뉴들이 보는 관점에 따라서 같은 메뉴라도 그룹화를 다양하게 할 수 있어서 메뉴 그룹화와 정렬 순서 기준을 정하는 것도 생각보다 쉽지 않았다. 세세한 의미까지 모두 따져보느라 논의하는데도 시간이 많이 걸려서 디자인 최종시안이 나오고 난 후에야 한글 메뉴명이 정해졌다.
그동안에는 막연한 기준만 가지고 메뉴명을 정하고 기능을 만들어서 추가했기 때문에 이런 고민의 시간이 필요하지 않았는데, 새로운 GNB에 맞는 명확한 라벨링 원칙을 가지고 명칭을 정했기 때문에 생각보다 어렵게 느껴졌던 것 같다. 그래도 이렇게 세세하게 고민하고 결정한 덕분에 고객들의 문의 중 많은 부분을 차지했던 "이 메뉴는 어디에 있어요?"란 질문은 3.0 버전에서는 많이 줄어들었다.
하지만 정식으로 3.0 버전을 론칭하려면 GNB 개선만으로는 부족했기 때문에 계획했던 기능 개선과 신규 기능을 동시 다발적으로 작업해야 하는 일이 남아 있었다. 큰 틀의 사용성을 개선했으니 이제 중요 기능들마다의 UX를 개선해서 3.0 정식 버전을 얼른 론칭해야 할 텐데..!
이 글은 작년인 2019년도에 개발이 진행된 비즈넵 웹앱 3.0 버전 관련된 내용으로 작성된 글입니다. 현재 비즈넵 서비스에 관심이 있으시다면 아래의 저희 홈페이지로 들어오시거나 앱을 다운로드 하셔서 사용해보세요 :)
감사합니다.
