3차 팀 프로젝트 리팩토링 #1 (채팅 페이지 UI 변경)

 

 

프로젝트 발표 후, 리더님들께 피드백을 받았을 때

두 분의 공통된 의견이

채팅 목록 페이지의 모바일 UI 가 좋지 않다고 말씀하셨다.

 

납득이 갔던 것이 나도 UI 를 만들면서 음.. 이거 좀 이상한디? 라고 생각했기 때문이다.

두 분의 의견을 받았기 때문에 해당 UI 를 고치기로 했다.

 

웹뷰에서는 왼쪽에는 내가 참여한 채팅방의 목록, 

오른쪽에는 접속해있는 채팅방을 보여주는 것으로 구성했다.

이것까지는 나쁘지 않은데 문제는 모바일 UI에서 였다.

 

기존 모바일 UI 에서는 채팅방 목록을 상단에 빼고, 하단에 접속중인 채팅방으로 구성했다.

그리고 참여하고 있는 채팅방 목록이 가로 길이보다 길어지면 터치로 이동할 수 있게 구현했다.

 

사실 화면을 구현하면서도 찝찝함이 있었는데...

너무너무 구리다는 것이었다!

하지만 시간에 쫓겨 기능을 구현하다보니 화면에 신경을 못썼는데

아니나 다를까 바로 지적을 받았던 것이다.

 

의견을 반영해서 모바일뷰에서의 화면을 아예 바꿨다.

 

그래서 바꾼 것은 아래와 같다.

 

 

처음에 채팅 페이지에 접근하면 참여한 채팅방 목록을 보여주고,

접속할 채팅방을 눌렀을 때, 해당되는 채팅방으로 화면이 전환되도록 구현했다.

그리고 모바일에서 인풋창을 눌렀을 때 키보드가 올라면서 화면이 어느정도 가려지기 때문에

헤더 UI와 네비게이션 UI는 아예 덮어버렸다.

 

 

이를 위해 대단한 기술을 쓴 것은 아니고..

모바일 화면에서

해당되는 컴포넌트의 width 를 200vw 로 만들다음에

부모 컴포넌트에는 overflow-x 는 hidden을 줬다.

그리고, 채팅방을 눌렀을 때 클래스를 줘서 left 값이 변경되도록 만들었다.

동시에 z-index 값을 헤더나 네비게이션보다 높여서 덮이도록 만들었다.

 

아무튼 바꾸기 전보다 훨씬 깔끔해졌다는 피드백을 받을 수 있었고,

진작에 발표할 때 저렇게 할껄.. 이라는 아쉬움이 있었다.