• date: 2014
• position: design, html, css, javascript
• demo url: https://projects.redgoose.me/2014/anybuild-admin2-guide

예전부터 회사에다 솔루션 관리자가 무척 불편하기 때문에 많이 개선해야한다고 요구를 해왔다.
다른 이유의 핑계로 정작 중요한 솔루션 관리자 개선을 미루다가 회사 마지막 작업으로 들어가게 되었다.
관리자 프로그램의 규모는 엄청나게 크다. 제공되는 컨텐츠의 양이나 종류가 방대하다보니 페이지의 수가 수백페이지에 이른다. 단시간에 페이지를 전부 고치는건 불가능하고, 이용자들이 많이 사용하는 컨텐츠를 우선으로 바꿔나갈 계획이다.

이미 컨텐츠가 나와있는 형태에서 UI만 고치는 작업이기 때문에 컨텐츠 개발에 관한 기획은 필요없었다. 개인적인 욕심으로는 컨텐츠 정리가 필요하고, 백엔드 프로그램조차 효율적으로 돌아가고 있는듯한 인상을 못받았기 때문에 주요부분부터 프로그램을 다시 만들자고 요구했지만 당연히 받아들여지지 않았다.
내가 보기에는 관리자는 상당히 객체 지향적으로 파고 들어야 하는 형태이기 때문에 지금의 관리자는 대단히 절차 지향적이어서 페이지 숫자로 밀어붙이고 있어서 사용성이나 코드에 있어서 좋은 인상을 받지 못한 편이었다.

더군다나 처음으로 돌입하는 작업에 나 혼자만 투입되었다. -_-;

Planing

어떻게 하면 관리자가 편하다고 소문이 날까? 라는 질문으로 고민에 들어갔다.

기존 관리자의 개선해야할 점

• 인터페이스 부분에서 글자가 많아서 사용하기가 복잡하고 어려워 보인다.
  마치 비행기 조종석에 들어간 기분이다. 그래서 교육을 받거나 메뉴얼을 필수적으로 읽어봐야 사용 가능한 수준이었다.
• 좌측 메뉴의 형편없는 가독성
  큰 메뉴 이름보다 아이콘이 더 크게 보이는데 정작 아이콘의 그림은 형태가 복잡하고 눈에띄지 않아 무슨의미인지 모를 지경이다.
  그런다고 글자를 보자니 굉장히 작아서 메뉴 하나 찾으려면 돋보기를 대보고 찾아야 할 지경이다.
• 프레임으로 되어있는 구조
  요즘 사이트들은 프레임이 안쓰는 추세이다. 당연히 그 이유가 많이있다.
  일단 프레임을 사용하고 있기 때문에 화면 사이즈에 대해서 대처가 안된다. (모바일 화면에서 보는것도 힘듬) 그리고 본문 페이지에서 조작에 집중하고 싶은데 왼쪽 메뉴영역이 크고 고정적으로 자리잡고 있어서 대단히 큰 모니터로 브라우저 크기를 아주크게 키워서 사용해야 할 판이다.

현재 관리자의 모습

UI개선 포인트

• 최대한 간결하게 표현하면서 화면에 반드시 필요한 내용을 배치함으로써 무엇을 눌러야할지 고민을 줄이도록 한다.
• 복잡한 관리자는 관리자 프로그램의 특징이기 때문에 복잡한 메뉴나 버튼들은 공간을 압축하거나 반드시 필요한 버튼만 노출시켜 놓는다.
• 큰 메뉴는 글자우선으로 눈에띄게 보이고, 메뉴 공간은 이용자가 직접 조절할 수 있도록 장치를 마련해둔다.
• 프레임은 반드시 뺀다!
• 디자인 형태나 색을 규칙적으로 통일함으로써 요란하지 않으면서 필요에 의해서 강약을 조절한다.
• 큰 레이아웃의 변경은 절제한다. 왜냐하면 기존에 사용하던 사람에게 혼란을 주거나 사용 의욕을 떨어뜨릴 수 있다.

다른 CMS 관리자 화면들을 구경하면서 우리가 가져와도 좋을만한 기능이나 UI디자인들이 없는지 살펴보기도 하고 연습장에 끄적여 보면서 고민한다.
아무래도 덩치가 큰 프로그램이기 때문에 신중하게 기능도입을 할 필요가 있어서 많은 고민을 할 수 밖에 없었다.

가장 영향을 많이 받은 관리자 프로그램은 워드프레스다.
멋져보여서 많은 기능을 가져오게 된것보다 가독성이나 사용성에서 정말로 많이 고민했다는것이 느껴지는 UI들이어서 기능이나 디자인을 많이 영향을 받고 가져오게 되었다.
많은 메뉴와 컨텐츠를 다루려면 워드프레스 관리자의 인터페이스가 가장 이상적으로 느껴졌다. 물론 더 좋은 인터페이스는 없을까라고 머리를 쥐어뜯으면서 고민을 해봤지만 워드프레스의 인터페이스가 우리에게 가장 잘 맞았다. 물론 인터페이스의 흐름만 가져왔지만 프론트엔드쪽 프로그램은 새로짰다.

Design work

이번에는 목업작업을 하지않고 바로 디자인작업에 들어갔다.
최대한 여유롭고, 페이지마다 통일성이 있고, 강조할 부분에는 눈에띄는 디자인을 하고싶었다. 그래서 아래 그림과 같이 메인페이지 디자인을 만들게 되었다. 역시 특정인을 의식하지않고 내 취향대로 만들어버렸더니 일단 나는만족.

보스나 다른사람들에게 보여주고 오케이 사인을 받았다.

관리자 메인페이지. 왼쪽부터 데스크탑 사이즈, 모바일 사이즈

사실 관리자라는것은 모바일 환경에서는 거의 사용하지 않을거라고 확신하고 있다. 하지만 유행처럼 반응형을 사용하다보니 이끌려 가는 경우도 많다.
만약 반응형에 어울리지 않는 인터페이스가 나왔으면 강력하게 설득해서 반응형 디자인으로 가지 않았을 것이다.
다행히도 반응형으로 만들어도 디자인적으로 무리가 없어 보였고, 코드 최적화는 생각해둔것들이 많고, 애초부터 디자인부터 잘 잡아두면 무리가 없을것이라고 판단했다.

색깔은 하얀색 배경색에 화이트와 옅은 회색은 사용하고, 강조하는 컬러로 파란색을 사용했다. 강조 컬러에서 배경색은 짙은 파란색을 사용했고, 글자나 아이콘같이 작은 영역의 컬러는 채도가 높고 밝은 파란색을 사용했다.
그리고 버튼이나 글자 컬러는 빨간색이나 녹색, 노란색같은 컬러를 다양하게 컬러셋을 만들었다.

서브 페이지들. 왼쪽부터 해당메뉴 컨텐츠 목록, 글 목록, 글 작성/수정

서브페이지는 많이 사용되는 형태를 몇가지 디자인으로 만들었다.
이미 관리자 프로그램이 있는 상태여서 컨텐츠에 관해서 고민할 필요가 없어서 오로지 디자인과 인터페이스 개선에만 집중 할 수 있었다.

서브페이지 디자인을 어느정도 끝내고나서 페이지의 통일성을 위하여 페이지에 들어가는 부위들을 따로 떼내어서 다음 그림과 같이 디자인 가이드를 만들었다.

이 디자인 가이드를 만들지 않았으면 css작업에서 많은 고생을 했을 것이다.
이제는 큰 작업에서 미리 가이드 작업을 해두는것이 버릇이 되어가는 것같다. 일렇게 해두지 않으면 불편해질 지경이다.

팝업창 디자인도 별도로 만들었지만 레이어 팝업창을 주로 사용하게 되어 이 부분은 코딩을 안하게 되었다.

Make program

디자인 작업을 끝내고 본격적인 코딩작업에 들어갔다.

먼저 메인페이지는 네비게이션을 코딩하는데 시간을 많이 들였다.
네비게이션 기능이 상당히 복잡하여 디자인으로는 단순하게 보이지만 css와 javascript에서 상당히 애를 먹었다. 가장 신경쓰고 있던 부분이 퍼포먼스 부분이라서 시간을 많이 투자했다.
UI부분에서 javascript가 많이 들어갔지만 기능을 많이 모듈화 시켜서 어지러울 정도로 코드양을 많이 늘리지 않았다. 나 혼자서 기반을 전부 잡아야하기 때문에 코딩을 하면서 많은 절제와 정리의 작업들이 이루어졌다.

메인페이지 겉부분은 별도로 코딩해두고 본문부터 각 요소에 대하여 모듈화가 필요하여 css와 javascript는 별도로 라이브러리를 만들었다.
wdev framework를 기초로 하여 디자인 가이드를 참고하여 css라이브러리를 만들고, javascript는 RGUtil 이름의 클래스를 만들고 자주 사용되는 UI기능은 별도로 만들었다.

그 와중에 서브페이지들도 코딩작업에 들어가게 되었다.
서브 페이지들의 코딩은 한페이지만 코딩하는데 생각보다 시간이 많이 걸렸다. 기존에 있는 마크업이 2000년대 초의 스타일이어서 html 정리에만 시간이 많이 걸렸고, css는 페이지를 코딩해보면서 더 필요한 css을 추가하느라 처음에는 한페이지를 코딩하는데 2,3일씩 걸렸다.
페이지 작업하면서 다른 사람들도 참여하게 될지도 모르기도 하고 나 자신이 만든 코드를 정리할 겸으로 하여 가이드 문서를 만들게 되었다.

Admin 2.0 Guide: https://projects.redgoose.me/2014/anybuild-admin2-guide/guide_css.html

javascript로 비동기 통신하는 부분이나 페이지 연계기능같은것들을 다 라이브러리로 만들고 문서로 작성하여서 처음이 힘들고 시간이 걸렸지만 점점 작업진행이 빨라졌다.
중간에 회사 동료들도 작업에 투입하게 되었을때 이 문서를 참고하여 어렵지 않게 작업에 들어갈 수 있었다.

End

개인적으로 관리자 페이지 개편작업이 회사에서 가장 필요해 보였기 때문에 가장 하고싶은 작업이었다.
여전히 개선해야할 부분들이 보이지만 다음번에 이런 비슷한 작업을 하게된다면 참고하여 더 좋은 결과물을 만들고 싶어진다.