[프로젝트 일지] 211208(수) - 전체적인 디자인 변경

목차

• 전체적인 디자인 변경
  • 기존 디자인 문제점
  • 디자인 고민
  • 새로운 디자인의 특징

전체적인 디자인 변경

기존의 문제점들을 해결하고, 확장성을 갖기 위해서 전체적으로 애플리케이션의 디자인을 변경했다.

기존 디자인 문제점

기존의 v0.1.0 버전은 사용자 경험 관점에서 다음과 같이 여러 가지 문제가 있었다.

• 애플리케이션을 어떻게 사용해야 하는지 명확하지 않다.

• 인원수를 하나하나 추가하기 불편하다.

• 추가 버튼 위치가 어색하다.

• 추가 버튼을 눌러 인원수를 늘리는 경우, 인원이 많아지면 추가 버튼 위치가 위로 밀려나 다시 올려 누르기에 불편하다.

• 결과를 보여주는 부분이 데이터를 입력하는 부분 아래에 나타나 어색하다.

위와 같은 문제들로 개선의 필요성을 느꼈다.

디자인 고민

위와 같은 문제점들은 단순히 하나를 개선한다고 해결할 수 있는 게 아닌 복합적인 문제라고 판단했다. 이런 이유로 애플리케이션을 가장 중요한 부분을 중심으로 수정해야겠다고 생각했다. 가장 중요하게 생각한 것은 결과를 보여주는 부분이 데이터를 입력하는 부분 아래에 나타나 어색하다였다. 그 이유는 이 문제가 애플리케이션의 확장성과 관계되어 있었기 때문이다. 이후 추가될 기능으로 '카카오 공유하기' 기능을 생각하고 있는데, 현재와 같이 데이터 입력과 결과 출력이 한 페이지에서 나타나면 필요 없는 내용까지 보여주게 되므로 결과 페이지를 분리하는 게 맞는다고 생각했다. 구현할 수 있는 선택지로는 모달로 띄우는 방법과 결과 부분이 하나의 페이지로 구성되도록 하는 방법이 있었다. 화면이 작은 모바일을 고려했을 때, 모달보다는 하나의 페이지로 보여주는 방법이 더 효과적이라고 생각하여 데이터를 입력하는 페이지와 결과를 보여주는 페이지를 각각 구성했다. 추가적으로 인원수를 하나하나 추가하기 불편하다는 의견을 반영해, 더치페이 인원을 받는 페이지를 맨 앞에 추가했다. 이렇게 세 개의 페이지를 구성하면 페이지들이 하나의 플로우가 되고, 여기에 각각 안내 문구를 삽입하면 사용자가 전체적인 흐름을 파악하기 쉬울 것 같다고 생각했다. 또한 인원수를 제한하여 많은 인원수로 특정 버튼이 화면에서 보이지 않는 문제는 해결했다. 최대 인원을 8명으로 제한했는데, 더치페이를 하기 위해서 10명이 넘어가는 인원을 입력하는 경우는 현실적으로 거의 없다고 생각했고, 12월 8일 거리 두기 조정안 인원 최대 허용 기준인 8명을 기준으로 해서 최대 인원을 정했다.

새로운 디자인 특징

새로운 디자인의 가장 큰 특징 중 하나는 뒤로 가기 버튼이 있다는 것이다. 이 버튼을 이용해 이전 단계로 돌아갈 수 있는데, 실수로 다음 버튼을 누른 경우, 결과 화면에서 특정 사람만 수정하여 다시 계산하는 경우 등을 고려해서 해당 버튼을 추가했다. 이전 화면으로 돌아가면서 데이터를 불러오는 방법에는 sessionStorage를 활용했다. 완벽하게 전역에서 사용한다고 말하기 힘든 데이터들을 관리하기 위해서 Context API나 Redux를 사용하는 것은 오버 엔지니어링이라고 생각했다. 또한 localStorage는 데이터가 영구적으로 저장되기 때문에 우리 애플리케이션의 특징과는 맞지 않다고 느꼈다. sessionStorage 특성상 하나의 session 즉, 창에서만 유효하기 때문에 알맞다고 생각하여 해당 기술을 이용해서 데이터를 유지되도록 했다.