근무관리체계 개발일지 [8] - UI/UX

앞선 개발 상황들을 적용해 비슷하게 UI를 구상해봤다.
(실제 코드를 보안상 문제로 가져오지 못해 PPT로 대체한다...ㅎ)

기본적인 레이아웃이고, 초기에 구상했던 몇가지 주의사항들이 적용됐다.

1. 3.1절, 대통령선거일(3.9)등 공휴일을 직접 지정하면, 그 날은 휴일로 처리가 된다.
2. 근무는 그룹별로 적용하지만, View는 중대 단위로 보여준다. (쉽게 찾기 위함)

여기에 근무까지 포함되면 실제로 잘 동작하는 프로그램이 완성된다.

(임의로 넣은 데이터. 실제로 사용해보면 인원별로 빈 근무 없이 더 고른 분포가 나온다.)

상단의 설정 버튼을 누르면 모달이 나온다.
모달 관리를 dialog를 활용해 만들고 싶었으나, 부대 내 컴퓨터의 브라우저 버전 문제로 인해 단순 position 과 z-index를 활용한 구조로 작성할 수밖에 없었다.

<div id="modal-provider">
  <div id="app">
    <h1>근무관리체계</h1>
    <table>
      ...
  </div>
</div>

한번 더 언급하지만, 실제 UI는 이것보다 더 깔끔했다.
사진을 찍어오고싶지만 영창을 가고싶지는 않으니깐...

이런 UI로, 인원과 그룹의 인원과, 그룹 정보, 근무의 정보, 데이터 전달을 위한 탭까지 추가해서 개발했다.

디자이너 급으로 만들진 않았지만, 스스로는 만족한 UI였다.
이곳저곳 벤치마킹을 하며 만들었는데, 나쁘지 않았던 것 같다.