좋은 관리자 UI란?

개발자는 언제나 화면을 만든다.

 

언제나 개발자 곁에는 GUI 도구들이 있었고 사용자를 위해서는 UI가 필요하다.

 

그렇다면 좋은 관리 UI란 무엇일까?

 

먼저, 화면 동작에 대한 시나리오이다.

 

목록 ----------------> 상세 -------------------> 입력

 |                               |

 |                               -------------------------> 수정

 |                               |

 |                               -------------------------> 삭제

 -----------------------> 삭제

 

모든 화면은 목록을 통해서 진입해야 한다.

그림으로는 아래와 같다.

 

 

물론 모든 화면이라는 표현이 맞지는 않지만 일반적으로 위와 같은 시나리오 이다.

 

상세는 어떨까?

 

상세는 RTL에 따라 우측 상단과 하단에 각각 버튼이 배치 된다.

상단 우측에 배치되어야 하는 버튼은 출력 및 각종 옵션이 되겠다.

옵션이라면 해당 화면을 구성하는 설정같은 것들이 되겠다.

하단은 일반적으로 저장 및 목록이지만 이 또한 취향에 따라 상단으로 변경되어도 되겠다.

그림은 아래와 같다.

일반적으로 입력 화면에서 데이터의 입력 상태는 KEY값에 따라 결정되겠지만 유능한 UI 개발자라면 화면상태를 나타내는EDIT_FLAG와 같은 속성을 구현할 것이다.

이런 속성은 주로 Control이 배치되는 Container에 구현해야 하고 Container의 상태 플래그에 따라 이벤트를 분리하던지, 아니면 하나의 이벤트에 속성을 부여하는 방식으로 구현하면 되겠다.

EDIT_FLAG와 같은 속성이 주는 이점은 아래와 같다.

• UI 편집 상태를 확인할 수 있으므로 저장시 데이터를 입력, 수정, 삭제로 구분할 수 있다.
• API는 어떠한 환경에서라도 제한되어 있어야 하므로 한번의 Request에 많은 기능을 수행하는 것이 좋다.
• 이러한 속성 또는 상태값은 이후에 서버측에서 발생할 저장 기능을 자동화 할 수 있게 해준다.

대부분의 입력화면은 저장이 되는 동시에 목록으로 전환되는 것이 일반적이다.

하지만, Table형태나 입력요소가 많은 경우는 목록으로 자동 전환 되지 않는 경우도 있다.

 

만약, SPA형태의 개발을 한다면 가능하면 ViewModel 형태로 개발하는 것이 좋다.

ViewModel형태로 개발할 경우 저장 기능 구현 후 반환값을 지정 Key에 직접 할당하면 목록으로 전환할 경우 Cache를 사용하는 것과 같은 효과를 볼 수 있다.

또한 성능상의 이점도 확실하다.

단점은 전체를 갱신하지 않게 되므로 부수적으로 추현 또는 추가되는 코드가 많다. 즉, 코딩해야할 부분이 많아지는 것이겠다.

저장시 마다 전체 목록을 갱신한다면 이 또한 부하이다.

 

관리자 FORM 입력 화면은

-----------------------------------------------------

|     LABEL          |          INPUT              |

-----------------------------------------------------

위와 같은 input control이 기본이 되겠다.

 

절대 관리자 화면에서 머터리얼 디자인은 사용하지 말자.

모바일에 특화된 화면은 입력이 주력인 노동자에게 별로 효율적이지 않다.

 

출력은 어떻게 할까?

 

대부분 엑셀을 생각할 것이다.

그게 맞다. 엑셀 출력은 FORM으로도, LIST로도 매우 유용하기에 출력물은 모두 엑셀로 하자.

하지만, 혹, 엑셀이 아닌 출력물 형태가 되어야 하는 경우가 있다.

그럴때는 HTML을 이용하자.

프린트를 위한 LAYOUT을 별도로 만들고, 출력을 위한 마크업을 생성해서 출력물을 만들면 된다.

또한 이러한 화면 구성은 서버 랜더링을 전제로 하므로 출력물을 자동화 할 수도 있겠다.

 

또한, 입력과 출력을 하나의 화면에 담을려고 하지 마라.

 

입력화면은 입력을 위해서 최적화 되어 있어야 하고

출력화면은 출력을 위해서 최적화 되어 있어야 한다.

입력과 출력이 혼재되면 개발하기 까다로울 뿐더러, 사용자에게 올바른 경험을 제공할 수 없다.

 

마지막으로 TAB을 잘 사용한다면 복잡한 화면 구성에 대한 사용자의 부담을 줄여줄 수 있을 것이다.

 

필수 입력을 첫 탭에, 부가적 정보를 이후 탭에 배치함으로써 사용자 입력에 대한 피로도를 줄일 수 있다.

또한 이러한 UI 구성은 Table분리를 고려하게 함으로 정규화를 적극적으로 할 수 있게 함으로 좋은 UI라 할 수 있겠다.

탭으로 분리했는데 하나의 Table로 작업한다면 문제가 있는 것이다.