gabiadesign | 관리콘솔 개편 디자인
34113
single,single-post,postid-34113,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-3.1,wpb-js-composer js-comp-ver-4.3.5,vc_responsive
designgabia_layout

관리콘솔 개편 디자인

관리콘솔 개편 디자인

– 개편 목표
가비아는 도메인, 클라우드, IDC부터 다양한 그룹웨어 서비스까지 비즈니스를 위한 고객들에게 다양한 인프라를 제공하고 있습니다. 또 각각의 인프라를 고객들이 쉽고 간편하게 관리 할 수 있게 관리툴 서비스를 제공하고 있습니다. 개편 전, 관리툴들은 각각의 페이지가 별도로 존재하고 있었습니다. 그래서 다양한 서비스를 이용하는 고객들에게는 다소 불편함이 있었습니다. 하지만 www사이트가 개편됨과 동시에 각각의 관리툴들도 하나의 페이지에서 고객들이 보고 관리할 수 있게 통합 관리콘솔 형태로 개편했습니다. 또 기존에 관리콘솔 페이지들은 다소 기능들을 확인하기 어렵다는 단점이 있었습니다. 그 부분을 기능 중심적으로 과업을 달성할 수 있게 의도했습니다. 큰 카데고리로 10개쯤 되는 메뉴들이 존재했기때문에 1차는 호스팅 통합, 2차는 IDC와 홈페이지, 3차는 클라우드 및 기타서비스로, 총 3차에 걸쳐서 작업이 진행되었습니다.

 

– 컴포넌트 제작

Console_Component v1.9 – 3

다양한 디자인이 들어가기보다는 기능중심의 서비스이다보니 다양한 UI 요소들이 중복되는 페이지들이 많았습니다. 그래서 각각의 페이지를 다 작업해서 전달하는 방향보다는 UI Component 파일을 제작해 작업자들끼리 소통하는 것이 작업량을 줄이는 효율적인 방법이라고 판단했습니다. 가장 많은 디자인 요소를 가지고 있는 웹호스팅 메뉴를 기준으로 첫 Component 파일을 만들었으며, 타 서비스에서 예외적인 요소가 나올때마다 파일을 업데이트했습니다. 마지막 작업까지 총 9번정도 업데이트한 것 같습니다. 이런식으로 파일을 생성해두니 작업이 더 효율적이고, 앞으로 유지보수도 더 편하게 할 수있겠다는 생각을 하게되었습니다.

 

– 디자인 둘러보기

1) LNB

002

LNB에는 고객이 신청한 서비스가 항목별로 노출됩니다. 자주 사용하고 중요한 영역인 만큼 눈에 잘 띌 수있게 가비아의 상징 컬러인 블루 컬러를 사용해서 영역을 구분해주었습니다. 보통 다중의 서비스를 이용하는 경우가 많아서, 각 서비스별로 잘 구분이 될 수 있게 아이콘들을 사용했습니다. 각 메뉴별로 Hover하면 메뉴명 뒤에 별 아이콘이 뜹니다. 아이콘을 클릭하면 상단 즐겨찾기에 등록되어 고객이 자주 이용하는 서비스를 바로 확인할 수 있게 했습니다. 또 각 페이지별로 고객들이 확인해야하는 정보가 많기 때문에 고객들이 원한다면 GNB에 있는 햄버거 버튼을 클릭해 LNB영역을 닫을 수도 있게 디자인했습니다.

 

2) 서비스 알림

003

관리콘솔 서비스 알림 페이지입니다. 고객이 이용하고 있는 서비스에 새로운 변경사항이나 알아야할 내용이 생기면 뜨는 알림입니다. 대부분은 화면에서 작은 영역을 차지하는 경우가 많은데 관리콘솔 특성상 고객들이 알아야할 정보가 많이 있습니다. 그래서 클릭했을때 풀사이즈 화면으로 확인할 수 있게 만들었습니다. 대신 알림영역 배경에 그레이 컬러를 깔아서 기존 영역창과 구분될 수있게 했습니다.

 

3) 관리 콘솔 매뉴얼

004

관리콘솔 메뉴얼 디자인입니다. 해당 메뉴얼에서 관리콘솔의 이용법을 검색해서 확인할 수 있습니다. 이미지와 글이 많이 들어가기때문에 매뉴얼 창을 늘려서 볼 수 있게 했습니다.

 

4) 대시보드

006

관리콘솔 대시보드 화면입니다. 고객이 이용하고 있는 전체 서비스에 대한 정보를 간략하게 볼 수 있습니다. 제일 처음으로 고객이 이용하고 있는 서비스가 해당 아이콘과 함께 몇 개 인지 노출됩니다. 그 밑으로는 고객이 이용하고 있는 서비스의 알람들이 뜹니다. 각 알림들을 구분해서 확인할 수있게 운영 알림, 사용량 알림, 보안 알림, 서비스 상태 알림을 각각 따로 영역을 잡아서 배치시켰습니다. 그 외에 대시보드 페이지에서는 이력, 공지사항 등 고객이 알아야 할 중요 정보들을 확인할 수있습니다.

 

5) 웹호스팅 > 자세히보기

007

고객들이 이용하고 있는 서비스의 자세한 정보를 확인할 수 있는 화면입니다. 각각의 메뉴들은 리스트형식으로 노출되는데, 거기서 자세히 볼 수있는 해당화면으로 이동합니다. 많은 정보를 잘 정리되어 보여질 수 있게 했습니다.

 

6) 관리콘솔 가이드 화면

05

마지막으로 관리콘솔 가이드화면입니다. 관리콘솔이 개편됨에 따라 익숙하지 않을 고객들을 위해 설명해주는 페이지입니다. 관리콘솔에 처음으로 접속했을 때, 혹은 대시보드 화면 상단 우측에 튜토리얼 다시 보기 버튼을 통해 확인할 수 있습니다. 사용전 꼭 알아야할 내용이나, 관리콘솔을 더 편리하게 이용할 수 있는 팁들을 핵심적으로 넣어두었습니다.

 

– 글을 마무리하며

현재 관리콘솔화면은 5월말에 고객들에게 오픈하여 적용되어있습니다. 이전에 디자인이 다 달랐던 관리콘솔화면에서 통합되어서 고객들이 더 편리하게 이용할 수 있으면 좋겠습니다.

 

AUTHOR.

공룡 / Gabia UI Designer

No Comments

Post a Comment

*