dodaNote
posts
🎨 디자인
마이월렛 리디자인 이야기
실제로 운영 중인 서비스를 리디자인하는 이야기입니다. 🌈

최근에는 사이드 프로젝트 팀에서 활동하고 있다.

팀에 전문적인 디자이너가 계시는 것이 아니기도 하고, 어쩌다보니 내가 디자인을 담당하게 되었다.

왜 리디자인을 하게 되었나?

사실은, 마이월렛이라는 서비스를 오픈한지 아직 1년 채 되지 않았다. 하지만 내가 첫 디자인을 했을 때와의 현재 실서비스하는 디자인은 너무 확 달라지고 말았다.

이미지

이런, Tailwind CSS 기반의 디자인을 꿈꿨지만...

 
이미지

디자인 할 때에는 기획과 제공되는 기능이 모두 나오지 않은 상태여서, 기본적인 레이아웃만 따르고 상황에 맞게 디자인을 수정해가며 개발을 진행할 수 밖에 없었다.

 

거기다 모든 페이지의 디자인을 그린 것이 아니였다.

기본적인 레이아웃의 구조만 잡아둔 후 개발에 바로 투입하였더니, 그만 이게 디자인이 있었던 것이 맞나? 싶을 정도로 개판이 되었다. (물론 내 디자인 역량 부족도 있겠다...)

 

뭐 그런 이유와 여러 UX 문제도 점점 커지고, 유저 수도 점점 증가함에 따라 리디자인을 하는 계기가 되었다고 볼 수 있다.

리디자인... 🌈

기존 디자인은 Tailwind CSS를 지향하여 디자인을 매우 간단하게 그렸었는데, 정작 개발할 땐 Tailwind 적용 안했다...

그래서 이번엔 개발과 디자인 그리고 유지보수성을 모두 잡을 수 있는 디자인을 하기로 결정하고 디자인에 대한 초점(??)을 결정하였다.

  • 재사용 가능한 컴포넌트
    • 추후 기능 추가나 수정이 있을 때도 유지보수가 쉽고, 디자인과 코드의 밀접한 연계...?가 가능할지도.
    • 유지보수는 디자인과 개발 모두 해당한다. 컴포넌트와 스타일을 재사용하므로써 성능이나 번들 크기 축소 등의 효과도 기대할 수 있다.
  • 통일된 컬러셋 (그리고 다크 모드)
    • 디자인보단 개발 쪽에 관한 이야긴데, 디자인 요소에서 일일히 hex 코드를 가져다 써서 저번에 input의 라벨 색상이 달라져버리는 문제가 발생한 적 있다. 이러한 문제를 해결하고자 컴포넌트 별 색상을 지정하려고 한다.
  • 모바일 친화 UX
    • 마이월렛은 모바일(아이폰)을 대상으로 한다. 그런데 저번 디자인을 기초를 데스크탑으로 잡았다. 이번엔모바일로 잡으려고 한다.

웹은 레이아웃에는 큰 변화를 추구하지 않기로 했다.

원래는 싹 갈아엎으려고 했으나, Hotjar 히트맵 데이터를 보고 마음이 달라졌다.

이미지

이미 기존 레이아웃에 익숙한 기존 사용자들의 경험을 해치고 싶지 않았다. 그래서 최대한 비슷한 경험을 제공하지만, UX를 고려하여 메뉴 존재의 시인성을 향상시키는 방안으로 리디자인을 결정하였다.

 

대표적으로는 상단 메뉴가 있다.

이미지

상단 메뉴의 경우에는 이전에 로고가 메뉴라고 인식하지 못한 사용자에게 문의가 들어오기도 하였고, 무엇보다 드롭다운 방식의 메뉴는 개발 단계에서 급조된 것이라 예전부터 개선할 생각이었다.

이미지

고심 끝에, 기존과 비슷한 레이아웃을 따라 사용자 경험을 유지함과 동시에 사용자들이 메뉴가 무엇인지 직관적으로 인식할 수 있게 리디자인하였다.

다만, 후술할 앱과는 다르게 모바일 환경에서 사용자가 쉽게 사용할 수 있을지가 고민되긴 한다. 헤더부터 메뉴까지 모두 화면 상단에 위치하여, 손이 작은 사람들은 한 손으로는 조작하기 힘들 가능성이 높기 때문이다.

 

유저 데이터를 통한 디자인 개선

이미지

기존에 카드 목록은 정말 "카드의 느낌"을 사용자에게 주고 싶었기 때문에 카드에 여백을 넣어가면서 사용자에게 표시하였다. 하지만 스크롤 데이터를 보니, 오히려 이 여백들 때문에 사용자들이 반도 내려가지 않고 포기하는 경우가 많았다. 사용자들이 "스압"을 느끼는 것일까...?

그래서 새로운 패스 목록에서는 2열 그리드로 카드를 구성하여 한 눈에 더 많은 패스들을 보여줄 수 있도록 구성하고, 맨 상단에 최근에 추가된 멤버십도 표시하여 사용자의 적극적인 참여를 유도하였다.

앱...??

팀을 이끄는 리드 개발자로부터 이런 소식이 들려왔다.

앱에서 웹뷰를 때려고 함.

모바일 아이폰 유저가 대상인 마이월렛은, 기존에도 모바일 어플리케이션이 존재하였지만 그 앱은 웹뷰 + 기능 동작하게 패치한 반쪽짜리에 불과하였다.

리디자인 이후에는 웹뷰 기반이 아니라 리액트 네이티브로 구현하겠다는 것 = 새로 만든다!

하지만 디자인의 관점에서 본다면, 모바일 용으로 그려야 하는 캔버스가 2배가 됬다는 소리다. 😓

그래서 나는 기존에 그려놓은 웹에서 컴포넌트는 대부분 유지하고, 레이아웃이나 중요한 요소 일부만 변경하는 것으로 결정하였다.

이미지
컴포넌트들의 구성은 변경된 것이 거의 없으나, 레이아웃이나 약간의 구성을 변경하였다.

앱의 경우 모바일의 장점을 최대한 살리기 위해 하단바가 포함된 디자인으로 구성하였다.

 
이미지

또한, 너무 큰 화면이 사용자들의 사용에 지장을 주지 않도록 "엄지영역 (the Thumb Zone)"을 고려하며 디자인하였다. (근데 지킨게 맞나...?)

마치며 ✏️

마이월렛의 리디자인은 이 글을 쓰는 현재도 계속 진행중이다. 디자인을 진행하고, 개발을 진행하다 보면 기존에 쓴 글과는 달라지는 점이 있을 수도 있겠지만 이번 디자인의 초점을 잃지 않으려고 한다.

그리고 여담이지만... 왜 디자인을 해놓고 다음에 보면 못생기게 보일까? 라는 생각을 매번 하게 된다. 내 디자인에 대한 눈이 매번 바뀌는 것도 아닌데 말이다.

designux
프로필 이미지
Dohyun Jung (도다)

즐거운 개발을 추구하는 개발자 🧑‍💻


댓글 컴포넌트 로딩 중...