안녕하세요, 와탭랩스입니다!
5년 만에 와탭 모니터링의 사이드 메뉴가 새 단장을 마쳤습니다. 메뉴는 어느 화면에서나 공통적으로 표시되는 부분으로, 원하는 기능을 빠르게 찾을 수 있는 내비게이션 역할을 하는 아주 중요한 영역입니다. 그렇기에 고객에게 익숙한 UI를 바꾼다는 것은 많은 결심이 필요합니다. 그럼에도 불구하고 사이드 메뉴를 개편하겠다고 굳은 결심을 했는데요.
사용자의 편의성을 높이기 위해 5년 만에 새로워진 사이드 메뉴! 지금부터 무슨 이유로, 어떤 부분이 달라졌는지 함께 살펴보실까요?
사이드 메뉴, 왜 바뀌었나요?
와탭의 서비스는 메뉴를 선택하기 앞서 ‘프로젝트 선택’이라는 단계가 필요합니다. 멀티 테넌트 구조로 업무 단위 하나의 모니터링 상품을 이용하지만 팀별/업무별 독립성은 보장하고, 이를 중앙 관리자가 통합하여 관제할 수 있습니다.
그렇기 때문에 고객이 와탭 서비스를 더욱 효과적으로 활용할 수 있도록, 프로젝트를 만들고, 선택하고, 관리하는 동선을 보다 편리하게 만드는 것은 매우 중요한 일입니다.
지난 5년 동안 와탭에는 많은 기능들과 모니터링 상품이 추가되었습니다. 이를 메뉴에 노출시키다 보니 UI 자체의 혼잡도가 올라가 “그룹/프로젝트의 구조를 직관적으로 파악하기 어렵다”라는 피드백을 받았습니다.
기존 메뉴는 더 쉽고 빠르게 프로젝트를 선택하기 위해 상위에는 프로젝트 목록, 하위에는 프로젝트 해당 메뉴를 배치한 UI 구조로 디자인되었습니다. 하지만 프로젝트 개수와 메뉴가 늘어나면서 좁은 영역에서 노출되는 기능과 정보가 과다하여, 메뉴가 한눈에 들어오지 않아 스크롤을 해야만 하는 부분에서 불편함이 발생하고 있었습니다.
이런 불편함을 해소하기 위해 UI의 혼잡도를 줄이고, 프로젝트 선택과 메뉴의 영역을 각각 확보하는 구조로 개편을 진행했습니다.
사이드 메뉴, 어떤 게 바뀌었나요?
한 번에 펼쳐보는 프로젝트 목록
기존 프로젝트 목록은 메뉴 상단에 바로 노출되어 선택할 수 있었습니다. 프로젝트 목록 페이지를 거치지 않아도 프로젝트를 선택하고 메뉴를 볼 수 있다는 것은 장점이었지만, 프로젝트 목록 개수가 늘어나고, 그룹과 조직이 추가되거나 프로젝트를 그룹핑하기 시작하면 프로젝트 목록을 한눈에 볼 수 없어 위계관계를 직관적으로 파악하기 어려워졌습니다.
프로젝트 목록을 선택한 부분만 펼쳐서 보는 팝오버 형식으로 변경했습니다. 메뉴를 펼쳐서 볼 수 있기 때문에, 더 편하게 프로젝트 목록 내역을 확인하고 선택할 수 있게 되었습니다. 또한 그룹과 프로젝트는 트리 UI로 변경되어 그룹핑 관계를 더 직관적으로 확인할 수 있습니다.
더 넓어진 메뉴와 프로젝트 목록 영역
선택한 그룹/프로젝트에 따라 메뉴 구성이 변경되기 때문에 메뉴가 프로젝트 목록 하위에 위치했습니다. 메뉴가 늘어나고 펼쳐보는 데 있어서 세로 영역이 충분치 않아 메뉴를 확인할 때 잦은 스크롤 이동이 필요했습니다.
개편 후에는 메뉴를 옆으로 펼쳐 보는 방식으로 바꿔, 세로 영역을 확보했습니다. 스크롤 할 필요 없이 더욱 편안하게 다양한 기능 메뉴를 펼쳐서 볼 수 있습니다.
다양한 레이아웃을 고려한 메뉴 모드 추가
이전에는 사이드 메뉴를 접어서 가리거나 펼치는 기능만 있었습니다. 여기에 아이콘만 노출되는 메뉴 축소 모드가 추가되었습니다. 메뉴는 고정으로 노출하면서 콘텐츠 영역을 더 넓게 볼 수 있습니다. 하단의 전체 화면 모드를 클릭하면 이전 사이드 메뉴 숨김 기능과 동일하게 사이드 메뉴와 헤더 영역이 숨겨진 대시보드 모드로 전환됩니다.
프로젝트 메뉴 즐겨찾기 기능 추가
자주 쓰는 메뉴만 모아서 보거나 편집할 수 있는 기능이 없어 아쉬워하신 분들을 위한 즐겨찾기 기능이 추가되었습니다. 상품별로 프로젝트 메뉴가 많은 경우 자주 쓰는 메뉴들 위주로 표시할 수 있습니다. 간단하게 별 모양 아이콘 클릭으로 즐겨찾기 등록/해제할 수 있으며, 하단의 즐겨찾기 아이콘 클릭 시 즐겨찾기 설정된 메뉴만 표시됩니다.
메뉴 내의 기능의 연관성과 중요도를 고려한 아이콘과 버튼 재배치
연관된 기능들을 한 영역에 모아 조금 더 쉽고 편리하게 이용할 수 있도록 옵션 버튼과 아이콘을 재배치했습니다.
- 헤더 영역에는 공지성, 알림성, 사용자 계정 관련 메뉴를 배치하였습니다.
- 프로젝트 목록 영역에는 그룹/프로젝트 추가, 검색, 관리 기능이 배치되었습니다.
- 사이드 메뉴에는 테마와 같은 화면 레이아웃 관련 옵션이 배치되었습니다.
UI 일관성 향상을 위한 테마 기능 지원
기존에는 일부 페이지만 테마 기능이 적용되었습니다. 이제는 페이지별로 나눠진 것이 아닌 사이드 메뉴를 포함한 전 페이지에 테마 기능이 적용됩니다. (*일부 지원되지 않는 페이지는 향후 적용 예정입니다.)
사이드 메뉴, 언제 적용되나요?
변경된 사이드 메뉴는 2024년 2월 28일 수요일 이후부터 서비스에 적용되어 이용하실 수 있습니다.
먼저 변경된 사이드 메뉴를 체험해 보고 싶으신 분들께서는 아래의 새로운 사이드 메뉴 체험하기 버튼을 클릭하신 뒤, 기존 사용하시던 계정으로 로그인하시면 미리 만나보실 수 있습니다. (* 해당 preview.whatap.io 사이트는 와탭에서 출시 예정인 베타서비스를 운영하는 별개의 사이트로 service.whatap.io과는 상이합니다.)
보다 상세한 사용 방법을 알고 싶으시다면 WhaTap의 사용 가이드 (여기)를 클릭해 주세요!
궁금하신 사항은 언제든지 채팅 문의 혹은 support 채널을 통해 남겨 주시면 빠르게 답변드리겠습니다. 또한 새로운 메뉴를 사용하시면서 느끼신 피드백이나 개선점도 support 채널을 통해 자유롭게 말씀해 주세요. 소중한 피드백을 기반으로 더 좋은 서비스를 제공하는 와탭이 되겠습니다. 😊
