3-2, 3-3

1일차는 태블릿에 있는 앱을 직접 분석하고 받은 기능 명세서 문서를 보고 내가 보기편하게 문서 작업까지 했었다.

• 목표는 만들어둔 문서를 토대로 이제 5개의 문서를 만들고 문서작업은 마무리 하면서 작업 시작하는 것이다.

3-2

• 태블릿 앱에 있는 구조를 참고하면서 UI/UX 구조를 작성했고, 디렉토리 구조와 상태관리는 MVVM + 리버팟 + 위젯분리를 하기로 결정했다.
  • 일단 기존 문서에 추가하고 바로 5가지의 문서를 AI에게 부탁해 새로 만들었다.
  • 문서화 작업 후 현재 가장 중요한 것은 UI라고 생각해, 여러개의 디자인을 부탁했지만 대부분 비슷한 결과만 나오는 것이 AI의 아쉬운 점이라고 생각한다.
  • 홈페이지를 포함한 주요 기능은 하단 네비게이션 탭에 4페이지를 만들어 관리하기로 했고 상대적으로 덜 중요한 정보는 메뉴 탭을 이용해 접하기로 했다.
• 홈 화면에는 주요 기능을 쉽게 접할 수 있어야 한다고 생각하여 차량 관리, 원격 제어, 근무 일지 전송 기능을 간편하게 보고 가능하게 했다.
  • 이후 디자인이 맘에 안들어 여러번 고치고 세부적인 내용은 직접 만들기도 했다. 대부분 비슷한 결과만 나오는 것이 AI의 아쉬운 점이라고 생각한다.
  • 피드백을 받고 사용자를 고려하여 버튼이 전체적으로 커져야하고 도로공사과 관련된 파랑색을 주요칼라로 지정했다.

3-3

피드백을 받은 대로 일단 전체적인 버튼을 크게하고 칼라를 바꾸는 작업을 진행하면서 더 깔끔한 디자인을 만들기로 했다.

• 여러 UI 방안이 있었지만, 나혼자 정하기가 힘들어서 일단 2가지의 홈페이지UI를 케이스를 만들고 둘 다 작업했다.
  • 하나의 홈페이지안에 4개의 기능이 있는데 모든 기능에 버튼을 만들어 쉽게 접근이 가능하지만, 스크롤이 길어지고 디자인적으로는 꽉차 보일 수 있다.
  • 다른 하나는 4개의 기능을 2*2 그리드 뷰로 크게 만든다음 터치하면 각각의 다이얼로그가 표시되면서 세부 기능을 간편하고 크게 볼 수 있는 것이다.
    • 깔끔하고 한눈에 볼 수 있다는 장점이 있지만,
    • 터치를 여러번 해야하고 각각의 기능을 동시에 사용하는 경우 더 번거롭다.
  • 실제로 스마트폰에 실행하여 테스트 해보고 피드백을 받은 결과 후자를 선택하게 되었고 전자의 방식은 각각의 기능 페이지에서 적용시키기로 했다.
• 홈 페이지 다음으로 중요한 것이 근무 일지 전송 기능이고 실제 API를 받아오고 가장 먼저 작업할 내용이기 때문에 바로 작업에 들어갔다.
  • 사실 여기는 전체적인 디자인의 틀이 잡혀있었고 태블릿의 내용을 참고하여 했기 때문에 세부적인 디자인은 수정해야겠지만 더미데이터만 있는 지금은 충분한 작업이라고 생각했다.

사진과 코드 없이 작업한 내용을 말하다보니 잘 읽히지 않을 것 같다. 앞으로 사진같은거 넣으면 좋을 것 같다. 일정 계획서를 공유해서 작업 진도 같은 것도 표시하면 더 좋은 글이 될 것 같다.