🎨 레벨로그의 UI/UX 개선기

🎨 UI/UX 개선기

나는 3차 데모가 끝나고, 늘 우선순위에서 밀리고 밀려 버려져있던 UI/UX를 스프린트4 때 꼭 개선해서 방학이 끝나고 딱 레벨 인터뷰를 하게될 때 우리의 서비스를 사용하도록 하기로 마음 먹었다.

지금까지 데모에서 쌓인 UI/UX에 대한 피드백, 기능추가보다 사용성 개선이 시급한 여러 이유를 통해 팀원들을 설득하는데에 성공하고, 4차 스프린트 2주차 때 UI/UX 개선 작업이 시작되었다.

---

🤢 기존의 불편한 UI/UX

먼저 기존의 페이지들부터 살펴보자. 이 당시 존재했던 페이지는 아래와 같다.

• 팀 - 팀 전체 조회, 팀 상세 조회, 팀 생성, 팀 수정 페이지
• 레벨로그 - 레벨로그 작성, 수정 페이지, 조회 모달
• 피드백 - 피드백 작성, 수정, 조회 페이지,
• 사전질문 - 사전질문 작성, 수정 페이지, 조회 모달

수정페이지는 생성페이지와 같은 스타일을 사용함으로 생략하겠다!
추가로 두 모달은 동일한 스타일을 사용하기 때문에 사전질문에서만 살펴보도록 하겠다!

---

팀 관련 페이지

여기는 팀 전체 조회 페이지이다.

반응형에 대한 상세한 고려도 없었고, 특정 해상도에 화면이 맞지않으면 우측에 애매한 공백이 생겼다. 그 외에도 해상도를 높이면 한 줄에 무수히 많은 팀 카드가 배치되고, 해상도가 높은 화면에서 가독성이 나빠지는 문제도 있었다. 심지어는 footer도 마음대로 늘어난다..

위의 팀 카드를 보면, 사용하지 않는 dm 주소 , 2022-12-31T12:59:00 과 같은 불편한 날짜 표현, 날짜나 장소가 길어지면 읽기 힘들게 두 줄이 된다는 문제도 있었다.
추가로 참가자가 늘어나면 맨 아래의 참가자 프로필이 2줄, 3줄, 무한정 늘어나는 문제들도 있었다.

다음 팀 생성페이지를 보면, 타이틀은 인터뷰 팀 생성하기 인데, 우측의 버튼은 만들기 라고 되어 있어 일관성이 없다. 그리고 팀을 생성하기 위해 모든 정보를 입력하고 다시 위로 올라와서 만들기 버튼을 눌러야하는 번거로움도 존재했다.

팀 상세 조회 페이지도 팀 전체 조회 페이지와 같은 문제점을 가지고 있었다. 추가적인 부분이라면 버튼에 마우스가 호버되거나 클릭되어도 아무런 애니메이션이 없어 텍스트만 보이는

레벨로그 보기, 사전 질문 작성 과 같은 버튼이 더더욱 버튼처럼 보이지 않는다는 점이 있었다. 대체적인 문제점을 다뤄봤으니 다음 페이지부터는 속도감 있게 살펴보자.

---

레벨로그 관련 페이지

타이틀에서는 작성, 버튼은 제출하기, 타이틀에서는 레벨로그, 밑에는 Level Log 로 한/영의 혼용, 버튼이 맨 위에 있어 다 작성 후에 다시 스크롤을 올려서 버튼을 눌러야했다.
그리고 "레벨로그 작성을 위한 공간"을 위에 있는 타이틀부터 해서 쓸데 없는 요소에게 너무 많이 뺏긴다.

피드백 관련 페이지

피드백 작성 페이지는 심지어 제출, 작성 이 아니라 또 새로운 키워드인 등록하기 였다.
심지어 이 페이지로 진입하기 위해서는 피드백 페이지에서 추가하기 버튼을 클릭해야한다.

또한 좌측에는 레벨로그 라고 한글로 써있고, 우측에는 Feedback 이라고 영어로 써있다.
그리고 좌측과 우측의 흰박스의 시작지점이 어긋나있다.

또한 꽤 자주 등장한 문제였는데, 타이틀이 해리의 레벨 인터뷰 피드백 이라 작성자가 해리인건지, 피드백을 받는 사람이 해리인건지도 헷갈린다.

이 페이지도 반응형이 제대로 고려되지 않아, 위에서 봤던 팀 전체 조회, 팀 상세 조회 페이지와 같은 문제점들을 가지고 있다. (피드백이 위치한 애매한 위치는 지금봐도 웃기다.)

그리고 타이틀에 레벨 인터뷰 피드백 이라고만 적혀있어 누구에 대한 피드백인지 개발자인 나도 가끔 헷갈려서 다시 나가서 확인을 하고 들어와야 했다.

그리고 피드백에서 잘 보여야할 부분이 회색으로 칠해져 잘 보이지 않았고, 오히려 안 보여도 상관없는 테두리 부분이 흰색으로 더 눈에 띄었다.

그리고 피드백이 없는 참가자의 피드백 페이지에 들어왔을 때는 뭔가 잘못 들어온건가 싶은 페이지로 오게된다. (하지만 이 페이지로 오는게 맞다) 여전히 윗 공간이 비어있으니 footer도 커진다.

---

사전질문 관련 페이지

그나마 여기는 상황이 조금 낫다. 누구에 대한 사전질문인지가 헷갈라는 점과 작성하기 버튼이 상단에 있는 것 빼고는. 그래서 스낵바 없이 alert 만 사용하는 문제라도 들고 왔다.

여기 모달의 버튼도 텍스트만으로 이루어져 있고 딱히 애니메이션도 없다.

---

🎯 UX 개선 전략 짜기.

이제 대부분의 페이지에 있는 문제들을 살펴봤으니, 아래에서 내가 이를 어떻게 해결하려 했는지 살펴보자. 첫번째 단계에서는 불편한 요소이 무엇인지를 모두 파악하는 일이 었다. 데모에서 받은 피드백을 적극적으로 활용했다.

문제 파악

• 상세한 반응형이나 애니메이션, 요소의 포지션 등이 고려되지 않았다.

• 제목, 날짜 등이 길어지는 경우를 고려하지 않아 2줄로 늘어나는 등의 문제가 있었다.

• 사용자가 보기 힘든 표기법을 사용한다. ex) 2022-12-31T12:59:00

• 작성, 제출, 등록, 만들기, 생성 등 같은걸 의미하는 다른 단어가 너무 많다

• 영어와 한글이 혼용되고 있다.

• to, from 구분이 어렵다.

• 에러메시지를 그대로 alert 를 사용해 보여준다.

• 모든걸 작성하고 작성하기 와 같은 버튼을 클릭하려면 스크롤을 최상단으로 올려야한다.

• 쓸데없는 요소에게 메인공간이 너무 많이 뺏긴다.

---

좀 더 상세한 피그마.

기존의 피그마는 반응형, 특수한 케이스, 애니메이션 등의 고려가 없었다. 이런게 없으면 개발자 간의 의견 차이나 구현의 차이가 발생하게한다.

의견 차이는 추가적인 커뮤니케이션이 자주 발생하도록 해 쓸데 없는 시간을 잡아먹도록 하고, 구현의 차이는 서로의 코드를 이해하는데 시간을 더 쓰게 만들고, 코드 유지보수에 어려움을 줄 수 있다.

새로운 피그마에서는 이를 UX에 관한 상세한 코멘트 등으로로 이를 개선했다.

---

최소 요구 사항 늘리기.

아무래도 피그마를 기반으로 작업을 하는데, 기존 피그마에 UX 관련된 내용이 거의 없었기 때문에 “기능만 되면 된다”는 식으로 UX는 내팽겨쳐지는 경우가 많았다.

새로운 피그마에는 UX 관련 요구사항을 많이 추가했고, 피그마를 기반으로 작업하게되는 한, 당연히 개선으로 이어지리라 생각하게 되었다.

➡️ 레벨로그 피그마 (Page 2)

그 결과로 탄생한 피그마이다! 아래에서 이 피그마를 반영한 새로운 UI를 살펴보자.

---

✨ 바뀐 UI/UX 와의 비교

다음 릴리즈에 몇 가지 기능이 추가되어서 약간 기존과 달라진 부분이 있지만, 신경쓰지 말고 문제점이 어떻게 개선되었는지를 중점으로 살펴보자!

팀 관련 페이지

개선된 전체 팀 조회이다.
기존의 핵심 문제였던 반응형에 대한 문제가 해결되었다.
해상도가 아무리 높아져도 메인영역의 width에 제한을 둬 한 줄에 4개까지만 팀이 표시되도록했다.
그 외 팀 추가하기 버튼의 위치도 스크롤을 내려도 바로 클릭할 수 있도록 수정했다.

장소와 시간을 각각의 열로 분리해 2줄로 바뀌는 불상사가 일어나지 않도록 수정했다.
또한 참가자가 늘어나도 스크롤로 넘기도록해서 줄바꿈이 일어나는 일도 이제는 없다.

이제 팀 생성 페이지에서 팀을 생성하기 위해 모든 정보를 입력하고 다시 위로 올라와서 만들기 버튼을 눌러야하는 번거로움도 생성하기 버튼을 최하단에 위치시켜 제거했다.
(당시에는 "생성하기" 였지만 지금은 팀 전체조회 페이지와 동일하도록 "추가하기"로 용어가 통일되었다!)

그리고 모든 버튼에 "hover"나 "click"시, 최소한 상호작용을 하고 있다는 것을 알릴만한 변화를 주었다.

마찬가지로 애매하게 공간이 남거나 하는 문제들이 동일하게 해결되었다.
다음은 레벨로그 관련 페이지로 넘어가보자!

---

레벨로그 관련 페이지

"레벨로그 작성을 위한 공간"을 최대한 확보했고, 용어도 작성하기 로 통일되었다. 버튼도 최하단에 고정되어있어 다시 스크롤을 최상단으로 올릴 필요도 없다.

---

피드백 관련 페이지

"인터뷰에서 받은 질문" 칸이 새로 생겼지만 신경쓰지 말자.
From , to 가 헷갈렸던 문제를 "~에 대한 레벨 인터뷰 피드백"으로 고치고 프로필 사진까지 추가해 해결했다. 마찬가지로 작성하기 버튼은 하단 고정.

피드백 페이지에서도 From , to 가 헷갈렸던 문제를 위와 동일한 방식으로 해결했고, 어떤 해상도에서도 하나의 피드백이 가운데에 위치하도록 하여 애매한 공백이나, 반응형 문제를 해결했다.

피드백이 존재하지 않을 때 보여줄 "빈 피드백 페이지"를 추가로 만들었다. 이 외에도 "여러 빈 페이지"와 "에러페이지", "로딩 UI" 등을 함께 만들어 사용자 경험 개선을 이끌었다.

---

사전질문 관련 페이지

누구에 대한 사전질문을 보여줄지 말지를 고민했으나, 다른 곳은 작성까지 하나의 페이지를 추가로 거쳐 이동을 해야하지만, 여기는 참가자 카드에서 사전질문 작성 버튼을 클릭해 바로 이동하는 페이지라 따로 알려주지 않기로 했다.

그 외는 레벨로그 작성페이지와 동일하다!

"alert"도 스낵바로 교체된 것을 확인할 수 있다!

아주 흡족하진 않지만 모달도 피드백으로 받았던 양쪽의 "padding"을 제거하는 등의 변화를 겪었다. 이로써 모든 페이지의 개선을 살펴봤다. 대부분의 문제를 해결했음을 알 수 있다!

---

🧐 후기

사실 UI/UX를 개선한다는 마음으로 시작했지만, 지금와서 생각해보면 작업 프로세스를 개선하는 작업으로써도 매우 큰 역할을 해줬다는 생각이 들었다.

개선 작업 이전에는 보통 프론트 2명이 페어로 작업을 했고, 개인으로 작업을 하는 경우에는 “이걸 이렇게 하라는게 맞나?”, “엥 이게 아니라고?”, “이 케이스에 대한 고려는 피그마에 없는데?” 하는 식으로 계속 커뮤니케이션을 해야하는 피로가 있었다.

생각해보면 개선 작업 이후에는 페어로 작업하는 일도 별로 없었고, 따로 작업하면서도 저런 식의 무의미한 커뮤니케이션을 한 기억도 없다.

잘한 일이라고 생각은 하지만 지금은 레벨로그 프로젝트 회고에서 언급했던 것처럼 "디자인 시스템"을 도입했다면 어땠을까.. 하는 아쉬움이 있다.

여기까지는 가지 않더라도 좋은 UX를 위한 수많은 디자인 가이드를 활용했다면 어땠을까하는 아쉬움도 지울 수가 없는 것 같다.