밀리고 밀린 인턴에서의 활동들을 정리해본다. 간략하게 3주차까지의 포토폴리오는 완성했지만, 4주차까지의 내용과 포토폴리오를 완성하면서 이력서까지 수정하는 것이 목표이다.
미리 말하자면 나에게 주어진 프론트 영역은 다 완성하였지만, 백엔드가 완성되지 않아 연결하는 작업까지는 끝내지 못했다.
하루마다 진척도를 말하면서 진행하기는 너무 늦어버렸기 때문에 완성된 사진과 트러블 슈팅, 왜 이렇게 의도했는지를 말하겠다.
일단 이것은 로그인 화면이다. 다크모드는 전체적으로 적용되어있고 선택은 당연히 가능하다. 요구받은 기능대로 사원번호와 전산번호가 일치할 시 로그인이 되며 현재 테스트로 0000, 1111, 2222 등 임의로 번호를 지정해서 로그인이 가능하도록 했다. 사진에는 자동 로그인의 체크박스가 있지만, 현재는 체크박스를 없애고 기본옵션으로 지정했다.
이전에 고민했던 홈 화면이 있었는데 결과적으론 스크롤이 길어지는것 보단 깔끔하고 한눈에 볼 수 있어야 한다고 생각하여 그리드 뷰 형태의 메인제어 기능을 맨 위로 두고 근무일지 전송, 연결 상태 등 필요하다고 생각한 3가지를 넣었다. 메인제어의 기능을 터치 2-3번이 필요한 것이 번거롭다고 느낄 수 있지만, 원격제어 페이지가 있기때문에 홈에서는 이런 설계를 선택했다.
경광등과 소리제어 제외하고도 사인제어, 전광판의 원격제어가 있다. 홈에서와 달리 원격제어에서 필요한 기능들을 터치 하나로 바로 적용시킬 수 있게 편리함을 집중해서 구현했다. 개발하면서 가장 신경쓴 것은 기능을 제대로 구현하는 것이였는데, 긴급 버튼을 누르면 WL-1과 EX1부분이 활성화된다. 이런 각 버튼의 기능들을 제대로 구현하였는지 기능 명세서와 미리 만들어둔 기존문서, 코드 3박자를 다 맞추면서 요구사항을 구현하였고 사용자를 고려하여 버튼의 크기, 눌렀을 때 활성화 표시 등 신경쓰면서 진행했다.
다음은 차량관리 페이지이다. 핵심은 홈과 원격제어 탭에서의 정보와 변경사항을 적용시켜 차량관리 페이지에서 실시간으로 확인할 수 있어야한다. 예를들어 전광판에서 메시지를 작업, 밝기를 50%로 지정할 시 사진처럼 보여야하며 이는 실시간으로 변경사항을 적용시켜 보여줘야한다. 백엔드를 연결하지 않아 실제로 원격제어 기능과 차량관리에서의 실시간 반영, 실제 차량에서의 동작을 테스트할 수는 없었지만, 프론트 내에서의 작동에서 오차나 틀린 부분이 없는지를 최대한 신경쓰면서 진행했다.
사실 앱을 만들게 된 가장 큰 이유는 이 기능이다. 근무일지 전송을 스마트폰으로 쉽게 확인하고 전송할 수 있어야했다. 기본적으로 기간별로 조회가 가능하게 하여 순찰일지 목록을 볼 수 있어야하고 순찰일지 상세페이지에서 실제로 순찰일지를 확인하고 전송 및 재전송이 가능하도록 해야했다. 최대한 신경을 쓴 부분은 실제로 관리자 웹 사이트에서의 정보를 바탕으로 상세일지 페이지에 넣어야했는데 넣을 정보가 많다보니 조그만한 스마트폰 화면 내에 어떻게 적용시킬지를 많이 고민했다. 완성본은 사진과는 다른 부분이 있는데 보다 더 많은 정보들이 필요했고 1분 일지에서는 다른 데이터를 요구하여 2개의 탭으로 구분하여 제작하였다. 실제 근무자들이 사용하는 데이터를 보고 사용자들 입장에서 어떤 방식으로 구현해야 편리하게 보고 쉽게 접근이 가능할까를 고민하였고 상단에는 기본정보와 그 밑에 2개의 탭으로 구분하여 5분, 1분 상세일지 데이터를 만들어 필요한 정보들을 골라 사용자가 최대한 보기 쉽게 데이터를 리스트로 나열하여 개발하였다.
이 외에는 간단한 운전자, 차량 정보, 앱 버전 등 요구했던 비중이 낮은 기능들을 홈에서 햄버거 메뉴를 통해 접근이 가능하도록 했다. 해당 기능을 누르면 다이얼로그를 뜨게하여 쉽게 정보를 확인 가능하도록 하였다.
지금까지 각 페이지들을 보고 어떤 생각과 방식으로 구현하였는지 설명하였다.
처음에는 매우 간단한 기능명세서만을 보고 어떻게 구현해야할지 막막하였는데, 차량과 연결된 태블릿을 분석하여 어떤 원리로 동작하는지, 기능들의 우선순위가 무엇인지 등 정보를 얻어 초기 문서화 작업을 집중적으로 하고 어떤 방식의 UI/UX가 사용자들에게 좋을지 생각하다가 우선순위가 높은 3가지의 기능을 하단 탭에 넣고 홈에서도 중요 기능을 접근이 가능하도록 설계에 하단 4개의 탭과 비중이 상대적으로 낮은 요구사항은 홈에서의 메뉴버튼을 통해 접근할 수 있도록 설계하였다. UI를 본격적으로 만들기 전 필요한 폰트나 다크모드 적용부분에 대해서는 나중에 작업할수록 더 복잡하고 시간이 많이들기 때문에 하나의 페이지를 만들 때 동시에 진행하였고 한 페이지의 UI/UX는 사용자의 접근성과 기능 테스트를 매번 진행하면서 시간이 지날때마다 지속적으로 변화했다. 홈페이지를 가장 먼저 작업하였고 홈페이지와의 기능이 겹치는 원격제어 페이지를 2번째, 근무일지를 3번째로 진행했다. 차량관리페이지 전에 로그인 화면을 구현하여 로그인 기능을 만드는 것이 원격제어 버튼을 눌렀을때 활성화 되는 것을 기억해야하기때문에 로그인 기능을 먼저 구현하고 차량관리 페이지를 구현했다. 차량관리도 원격제어 탭에서의 버튼연동을 먼저하고 그 다음 홈에서의 원격제어와 차량관리 연동도 구현하여 홈, 차량관리, 원격제어 탭에서 모두 연동되도록 구현하였다. 이 과정에서 수많은 테스트를 하여 연동이 잘 되는지, 버튼의 기능들이 제대로 되어있는지, 밝기나 속도 슬라이드가 제대로 연동됐는지, 홈에서와 원격제어 페이지에서의 서로 같은 버튼이 활성화 됐는지, 활성화 안됐을 시의 UX등 가장 신경쓸게 많은 부분이였다. 더미데이터로 만들어둔 근무일지 데이터를 실제 관리자 웹사이트에서의 데이터와 동일한 더미데이터로 대체하였고 백엔드를 받았을 때 바로적용이 가능한 상태와 테스트가 쉬운 상태로 고치는 작업을 지속했다. 최종적으로 홈에서의 메뉴 기능들을 완성하면서 프론트 작업을 하였다.
태블릿 앱 분석 > 문서작업 > 홈 > 원격제어 > 근무일지 > 로그인 > 차량관리 > 근무일지 상세 > 메뉴 버튼 기능
위와 같은 순서로 개발하였으며 이 과정에서 문서와 달라진 부분이 있으면 최신화를 하였고 지속적인 test, UI/UX 향상, 불가피한 리팩토링을 같이 진행하면서 개발하였다.
사정상 백엔드를 받지못해 최종적인 앱을 완성하지는 못했지만, 실무에서 요구한 작업을 내 스스로 해냈다는 것에 큰 의의를 두고있다.
