우선 본인은 UI/UX에 대한 지식이 전혀 없음을 밝힙니다… 그래서 포스팅 내내 추상적인 단어나 용어, 그리고 해석이 다분히 들어가 있습니다. 디자인 못하지만 어쩌겠어요 더 나은 서비스를 위해서 고민하고 개선시켜나가는 게 일인데! 간단한 회고 시작합니다.

(스크린샷 예시는 UI가 일부 변경된 후 비교하는 것이라 차이가 있을 수 있습니다.)

회사의 프로덕트는 부트스트랩의 템플릿을 기반으로 디자인이 되어있었다. 템플릿이라 어느정도의 틀은 잡혀져 있었으나 전반적으로 퀄리티를 조잡하게 보이게 하는 것들이 있어서 그것들을 위주로 개선 작업을 하기로 했다.

메인페이지

가장 먼저 작업을 했던 것은 메인페이지에 대한 작업이었다.

처음 메인페이지를 마주 했을 때는 모든 것들이 따로 논다는 느낌을 지우기 어려웠다.

할 일 1. 그리드 시스템을 지키지 않는 디자인 개선

1-1. GNB 디자인 개선

가장 큰 문제 중 하나로는 GNB의 Login 관련 버튼들이 그리드에 맞추어져 있지 않았다는 점이었다.

”margin-right” 속성이 모든 Login 관련 버튼에 적용이 됨으로서 오른쪽에 의도치 않은 마진이 들어가 있었고 이는 전체적인 조화를 깨트리는데 일조했다.

그와 더불어 텍스트 버튼이 아닌 버튼 형태로 이루어져 있었기에 균형이 어긋나 보였다.

이 때문에 GNB의 버튼을 텍스트버튼으로 변경하고 우측으로 정렬시켜주었다.

이런 간단한 정렬만으로도 꽤나 차분해지는 효과를 주었다. 도메인의 특성상 최대한 무게감있는 형태를 유지하고 싶었으나 클라이언트가 “border-radius”를 다양한 곳에서 주길 원하여 무게감있는 형태를 전체적으로 나타낼 수는 없었다. 하지만 GNB가 차분해지면서 이전의 디자인보다는 사이트 전체의 무게감을 올려주었다는 생각이 들었다.

1-2. 메인 투자증권목록 디자인 개선

그리고 두번째로 수정이 시급한 곳은 판매 중이거나 예정 중인 상품의 메인 목록이었다. 3개 이상의 상품이 있을 때 캐러셀로 동작하는데 이 캐러셀을 위한 prev, next 버튼이 그리드 바깥으로 빠져있었고 목록 또한 그리드 안쪽으로 어정쩡하게 들어가 있었다.

이를 해결하기 위해서는 prev, next가 아닌 dot 버튼을 사용하기로 결정했다. 하지만 여기서 난관이 있었는데, 이 디자인 개선작업을 리팩토링과 동시에 하고 있었는데, 각종 스타일링 도구와 Global CSS 때문에 목록의 “display : grid”가 제대로 동작하지 않았다. 일단 임시 방편으로 flex와 padding을 활용해 정리한다음 최종적인 작업을 통해 마무리 하고자 했다. 그래서 이 컴포넌트의 경우 3단 진화를 겪게 되었다.

기존 디자인은 캐러셀과 목록 모두 그리드 시스템과 상관없이 스타일 되어있어 다소 난잡하다는 인상을 보여줬으나, 캐러셀 버튼 대신 닷으로 처리하면서 그리드를 벗어난 상태를 먼저 해소해주었고, 추후 그리드 속성을 통해 그리드 시스템에 딱 맞도록 해주었다. 훨씬 더 정돈된 디자인으로 개선이 가능했다.

할 일 2. 균형이 맞지 않는 디자인들… 하지만 용어를 몰라 정의 못하는…

두번째로 수정해야할 것들은 어딘가 불안정해보이는 디자인들이었다. 디자인에 대한 지식이 없어서 용어적으로 정리하지 못하는 것이 못내 아쉬운데, 시각적으로 어 이건 아닌 거 같은데..? 싶은 것들을 정리했다.

2-1. 메인 배너 디자인 개선

처음으로 마주하는 디자인 중 사이트의 정신이라고도 할 수 있는 메인 배너의 정렬이 굉장히 붕 떠 있다는 인상을 남겼는데, 이는 아마도 프로그레스바만이 그리드에 닿아있고 나머지 정보들이 굉장히 협소한 범위에서 표시되고 있어 발생한 문제 + 정보를 표시하는 컴포넌트가 사진의 어떤 부분에 맞춰 정렬되어있는 지 모르겠다는 문제 때문에 였던 것 같다.

이 얘기인 즉 컴포넌트 구조도 쉽게 구분되지 않아 모호한 상태라는 것을 예상할 수 있었는데, 실제로 컴포넌트 역시 그런 모호한 구조로 되어있었다.

그래서 컴포넌트 구조를 생각하며 디자인도 다시하게 되었는데,

사이트의 이름과 정보를 알려주는 메인컴포넌트 두개를 큰 덩어리 삼아 디자인을 했다.

또 정보를 알려줄 메인컴포넌트는 크게 두개로 또 나누어 사진/정보 형태의 컴포넌트를 만들고 이 정보컴포넌트는 사진의 하단에 맞추어 정렬될 수 있도록 하였다. 또한 자세히보기 버튼의 width를 컴포넌트 전체를 꽉차게 하여 그리드 시스템 끝까지 꽉 채우는 형태로 변경해 디자인이 조금은 더 안정적이게 보이도록 하였다.

이렇게 작업을 하고나니 시각적으로도 컴포넌트가 구분이 잘된다는 생각이 들었다. 물론 이 배너의 시급한 개선점은 지나치게 산만한 배너이미지이지만 이는 클라이언트도 인지하고 있어 조만간 변경이 된다고 한다.

2-2. 메인 안내 캐러셀 디자인 개선

배너 다음으로 보이는 것은 안내사항이나 공지사항 등을 보여주는 캐러셀이었다. 이 캐러셀 디자인은 그리드 시스템에 맞춰 크기가 설정이 되어있었으나, 문제는 캐러셀 버튼이 양쪽 끝으로 닿아있었다. 한치의 여백도 없이 그리드에 닿아있다보니 미완성의 사이트라는 느낌이 팍팍 왔다. 개선이 시급하다고 느끼는 찰나 토큰증권목록을 수정하며 캐러셀 버튼이 아닌 캐러셀 닷으로 UI를 변경했었으므로 이를 통일시키는 쪽으로 방향을 잡았다.

2-3. 애증의 금쪽이… 메뉴 디자인 개선

메인 페이지 내 디자인 개선 작업을 하면서 가장 애를 먹인 디자인인데, 바로 메뉴 버튼이었다. 처음 프로젝트를 맡게 되었을 때는 메뉴의 가짓수가 없어서 더 심각한 상황이었는데, 스크롤을 내리다가 이 메뉴들이 너무 어색해서 헉 소리를 냈을 정도였다. 그만큼 조화롭지 않았고 뜬금없는 디자인이었는데, 그리드 시스템과도 전혀 상관이 없었고 아이콘의 컨셉들도 통일되지 않았었다.

개선을 위해 참고했던 디자인은 커머스 등에서 많이 사용하는 사진을 배경으로 한 버튼 디자인들이었는데, 이 아이디어에 대해서는 클라이언트가 매번 사진도 그 메뉴 가장 최신의 포스트에 포함된 사진으로 갱신해달라는 요구조건때문에 기각 되었다. 다른 문제들보다 가장 큰 문제점은 그렇게 사진이 매번 바뀔 때 버튼의 텍스트는 색상도, 위치도 고정이 되기 때문에 가독성이 떨어질 수 있다는 점이었다.

이런 이유를 들어 어렵다는 의사를 밝히고 고심 끝에 만들어낸 게 현재의 디자인이다. 그리드 시스템에 맞추어 버튼을 제작했으며 아이콘과 텍스트를 활용하는 선에서 마무리 지었다.

2-4. 공지사항 목록

border가 들어간 컴포넌트, 심지어 border-radius가 들어간 컴포넌트가 너무 많아서 공지사항의 경우 처음에는 보더가 없는 리스트 형태로 개선하는 것이 어떨까 싶었다. 하지만 이는 클라이언트에 의해서 기각 당해 최대한 보더가 덜 도드라지는 형태로 만들고자 했다. 별 것없이 보더의 색상을 연하게 하고, 더보기 버튼이 말 그대로 버튼처럼 되어있던 것을 텍스트 버튼으로 변경했다.

소식/공지사항 게시판 페이지

카드 디자인 개선

이 페이지는 크게 수정한 사항은 없으나, 카드 디자인을 전면적으로 개편했다. (근데 리스트니까 카드 디자인이 전부 다 아닌가..?)

기존에는 컨텐츠의 크기에 따라 카드의 높이가 들쭉날쭉했기 때문에 이에 대해서 개선이 필요했다. 또한 기존에는 “카드 이미지”를 클릭해야 link가 작동했으나 개선하면서 카드 전체에 링크가 동작하도록 고쳤으며, hover 시 선택됐음을 알 수 있도록 옅은 색상을 덧씌워 보여주도록 했다.(용어가 기억이 안난다… 뭐였더라..)

라벨의 색상이나 필터의 색상도 변경하는 것이 맞지 않을까 싶었으나 이에 대해서는 클라이언트의 요구사항이라 따로 건드리지는 않았다. 이와 함께 카드 컨텐츠의 패딩도 너무 좁아 더 늘리고 싶었으나 기각당했다…

토큰증권 투자상품 페이지

상품 카드 디자인 개선

기존 디자인은 매거진 카드와 마찬가지로 이미지를 클릭해야 링크가 동작하였으나 카드 전체로 링크가 동작하도록 했고 매거진 카드와 동일하게 hover 시 색상을 옅게 깔아줘 사용자가 hover됐음을 인지하도록 하였다. 또 한 더보기 아이콘의 경우 어차피 카드를 클릭하는 것과 동일한 동작을 수행하기 때문에 제거했으며 빈공간을 효율적으로 사용할 수 있도록 정보들을 space-between 으로 배치했다. 판매처 리스트 역시 그리드를 활용해 3개 이하만 표시되고 4개 이상은 더보기로 표시될 수 있도록 처리해두었다.

마이페이지

대망의 마이페이지 개선. 아니 이건 그냥 새롭게 디자인.

마이페이지 헤더 디자인

마이페이지의 경우에는 기존 디자인을 수정/개선 하는 것이 아닌 아예 새로운 디자인을 만들기로 하였다. 기존 디자인의 경우 사이드바 형태로 메뉴와 각종 간략정보가 있는 형태라서 투자내역이나 보유 토큰 내역 등의 리스트에 심지어 사진을 크게 하여 배치할 가로 공간이 상대적으로 부족한 형태였다. 그래서 아예 새롭게 디자인을 해보기로 하였다. (물론 기존 사이드바 형태로 디자인을 한다고 해도 새로 해야할 상황이었다.)

영감을 받은 디자인은 커머스 계열 서비스들의 마이페이지 디자인이었는데, 이름과 각종 정보를 상단에 배치하고 배송현황과 주문목록등을 순차적으로 아래에 배치함으로서 자연스럽게 시선이 가는 형태의 디자인이었다. 이를 참고하여 디자인을 해보기로 하였다.

컬리와 같이 회원에 대한 정보를 상단에 띄워주고 그 아래로 각종 컨텐츠를 상황에 맞게 띄워주는 형태로 디자인하자는 생각을 하고 실행에 옮겼고 피그마로 간단한 예시를 만들어 클라이언트에게 컨펌을 받고 작업을 시작하였다.

이전 디자인 보다 훨씬 더 다양한 정보를 담을 수 있도록 하였다. 또한 메뉴 역시 폰트를 더 크게 하여 시인성이 더 좋기를 바라고 작업했다. 카드 디자인으로 빠진 주요 정보들은 (디자인 전공 지인의 도움을 받아) 중요도가 높을 수 있도록 기존에 백그라운드 컬러로 사용된 색상을 그대로 적용해주었다.

이 밖에도 기존에 클라이언트가 요구했던 카드 내 버튼의 문구(각각 계좌 연결, 상세 보기, 내역 보기, 상세내역)가 제각기 달라 통일성도 없고 중복되는 단어가 많아 다소 난잡하던 것들을 내역보기와 상세보기로 통일하였다.

마이페이지 컨텐츠? 디자인

주 메뉴들을 변경하였으니 이제 개인정보 변경(비밀번호 변경, 이메일 변경, OTP 등록) 탭을 구현해야했다. 기존에는 한 곳에 모든 기능이 몰려있었으나, 개별적으로 분리해보기로 하였다. 디자인의 통일성을 위해 계좌, 증권, 포인트, 수익과 동일하게 카드디자인으로 진행했다.

비밀번호 변경, 이메일 변경

기존 변경 인풋의 경우에는 현재 비밀번호를 입력해 새로운 페이지로 이동해야하는 것인 지 (변경버튼 클릭) , 아니면 이미 개인정보 확인을 위해 비밀번호를 입력하고 들어왔으므로 새로운 비밀번호를 입력하고 변경 버튼을 누르면 변경이 되는 것인 지 명확히 보이지 않았다. 이 때문에 비밀번호와 이메일 변경을 위한 컴포넌트를 새로 만들었다. 사용자는 개인정보란에서 변경 원하는 정보 카의 변경 버튼을 누르면 비밀번호 변경 컴포넌트를 볼 수 있으며 가장 일반적인 형태의 비밀번호 변경, 이메일 변경 UI를 활용해 사용자가 햇갈리지 않도록 하였다.

OTP 인증

OTP인증의 경우에도 위 비밀번호, 이메일 변경과 마찬가지로 사용자가 인증서의 비밀번호를 입력하라는 것인지 아이디 비밀번호를 입력하라는 것인 지 알 수 없는 형태의 UX/UI를 제공하고 있었으며, 이를 해결하기 위해 OTP인증 메뉴를 통해 접근할 시 현재 비밀번호 입력 후 OTP변경을 위한 가이드와 함께 사용자가 쉽게 변경을 할 수 있도록 UI를 구성하였다.

마치며…

디자인에 대한 지식이 없이 디자인을 개선해야하는 상황에 봉착한 것은 어쩌면 내 욕심이었다. 기존의 UI를 활용해서 그대로 클론하는 형태의 선택지도 분명히 존재했기 때문이다. 하지만 디자인을 개선하는 지금의 작업들이 (아직 한참 남았지만은) 결국 하나의 프로덕트를 만들어나가는 프로덕트 메이커로서 꼭 필요한 작업이라는 점과 이런 고찰과 개선을 통한 성장은 언제나 귀중한 경험이라는 점에서 힘들어도 꽤 보람차게 하고 있다. 이 디자인 개선 작업을 통해 외적으로 조금 더 나은 퀄리티의 개발을 하게 되는 것도 있겠으나, 무엇보다 코드를 작성하며 컴포넌트 설계하고 나누는 데에 어떤 것이 중요한 지에 대해 조금씩 알게 되는 것 같다.

그리고 이런 작업을 통해 느낀게 있다면 디자이너의 중요성도 있는 것 같다.

지금은 큰틀의 디자인만을 잡고 계속 개선하면서 작업을 하다보니, 구조적인 설계가 변경이 되어야 하는 경우가 제법 많이 있었다. 동일한 기능을 수행하는 것은 맞으나 컴포넌트의 구조가 달라져 더 나은 UX를 위해 여러번 수정하게 되고 이 떄문에 작업의 효율이 떨어질 수 밖에 없겠구나 하는 생각이 들었다. 그런 점에서 어느정도 수준의 제시된 디자인을 제공해줄 수 있는 디자이너야 말로 효율적인 프로덕트 메이킹을 위해 정말 필요한 존재 아닐까 하는 생각이 들었다.

이 프로젝트를 하면서 디자이너와 마주할 일 없다는 것은 슬프지만 다음 경험을 하게될 때에는 꼭 지금의 경험을 살려 더 멋진 개발을 할 수 있길 바라며 이만 마친다.