[UIUX] 드리블(Dribbble) 리디자인 -1
디자인 사이트 드리블 리디자인하기 - 리카테고라이징(Recategorizing)
-지난글 보기-
디자인 사이트 드리블 (Dribbble)에 대해 조목조목 뜯어보고 나서 발견한 것은
01. 디자인 공유 (홍보)
02. 커뮤니티
03. 채용
이렇게 세가지가 메인 기능이자 목적이라는 것이다. 아쉽게도 모바일 앱에서는 제대로 활용이 되지 않고 있는 점도 발견할 수 있었다. 따라서 먼저 사용자 경험 설계 측면에서 이러한 기능들을 앱에서 잘 활용할 수 있도록 카테고라이징(categorizing)을 다시하고 그에 따라 UI 개선을 하기로 했다.
Re-Categorizing
드리블의 여러가지 기능들앞서 드리블이 추구하는 방향과 그에 따른 핵심 목적들(공유, 커뮤니티, 채용)을 중심으로 기능들을 나열해보았다. 특히 커뮤니티의 블로그 기능은 유용한 정보들과 인터뷰들이 연재되어있어 주니어 디자이너들 뿐만 아니라 디자이너들에게도 인사이트를 주기에 충분했다. (물론 모두 영어로 되어있다)
드리블의 기능들을 4가지로 분류해보았다.웹에서 꽤나 많은 기능들이 활성화 되어있고 디자이너 입장에서 또 유용했다. 이러한 기능들을 앱에 담기 위해 4가지로 그룹핑(Grouping)을 해보았다. 디자인 공유 기능을 세분화하여 탐색과 컬렉션으로 나누어, 채용, 커뮤니티, 탐색, 컬렉션으로 모아보았다.
앱 App에서 우리가 기대하는 것
나는 2012년부터 비핸스와 핀터레스트를 꾸준히 이용해왔다. 처음엔 아이패드 앱으로 사용했었고, 맥북으로도 즐겨찾기 해두고 자주 자료를 모으지만, 항상 내 스마트폰에도 비핸스와 핀터레스트 앱이 깔려있었다. 왜일까? 나는 왜 맥북과 아이패드로도 모자라 모바일에도 앱을 설치해두었을까? 이 질문에 답은 "접근성"에 있다.
당연히 아이패드나 맥북이 11", 15"인치 이기 때문에 자료를 보기엔 훨씬 훌륭하다. 모바일은 기껏해야 손바닥 크기 이상을 벗어나지 않는다. 이미지 내에 있는 작은 글씨는 손으로 줌해서 보지 않으면 읽히지도 않는다. 그럼에도 불구하고 나는 모바일에서 자료를 매우 자주 본다. 이유는 내가 스마트폰을 사용하는 시간이 많기 때문이다.
출처 : unsplash우리는 언제 앱 App을 이용할까?
'이동 중일 때', '쉴 때', '빠르게 찾고 싶을 때', '알림이 왔을 때', '아무것도 안할 때' (ᐧᐧᐧ)
즉 완전 집중이 아닌 상태, 가벼운 상태, 알림에 무의식적으로 반응한 상태, 비교적 수동적(게으른)상태이다.
실제로 나는 이동 중에 찾아본 자료들은 꼭 맥북 화면에서 다시 본다. 이동 중에 빠르게 자료를 수집하면서 시간을 효율적으로 활용하고, 이후에 다시 자료를 다시 확인하고 분류한다. 앱의 장점은 항상 켜있는 나의 폰에서 2초 안에 검색을 해볼 수 있다는 것이다. 깊이 있게 사용하기보단 탐색 행위 자체에 의미가 있다.
또 디자인 자료 말고 정보를 찾을 때도 모바일로 자주 활용한다. 브런치 글이나 미디엄 등의 블로그도 요즘 모바일에서 가독성이 나쁘지 않다. 침대에 누워 자기전에 읽기도 하고 링크를 노션에 모아두기도 한다. 알림이 오면 무의식적으로 앱에 들어가 정보를 읽기도 한다. 또 수시로 정보를 체크할 수 있기 때문에 빠른 정보탐색에도 데스크탑이나 패드보다 유리하다.
결론적으로, 드리블(Dribbble) 모바일 앱 상에서 훌륭하게 활용될 수 있는 것들은 탐색과 저장, 커뮤니티 및 채용 정보와 알림 서비스 등으로 압축할 수 있을 것이다.
네비게이션바 재설계
좌 : 핀터레스트 Nav. / 우: 비핸스 Nav.앞서 참고 했던 비핸스와 핀터레스트의 네비게이션 바를 보면 탐색, 검색, 알림, 마이페이지로 구분되어있다. 비핸스는 프로젝트 업로드 기능도 있기는 하나, 아마 많이 사용되진 않고 상징적으로 넣어둔 느낌이다.(데스크탑에서 작업하기 때문에 웹 페이지에서 업로드하는게 절대적으로 유리하기 때문이다.)
현재 Dribbble의 Nav현재 드리블의 네비게이션 바의 구성은 Shots(탐색), Activity(notification), Upload(업로드), Messages(메세지), More(기타) 로 구성되어 있다. 비핸스나 핀터레스트와는 사뭇 다른 구성이다.
Dribbble과 29CM의 네비게이션바게다가 아이콘도 아쉬운 느낌이다. 비핸스와 핀터레스트와는 달리 아이콘 밑에 텍스트가 아이콘을 설명한다. 텍스트를 없애면 아이콘들이 어떤 것을 의미하는지 애매하기도 하다. 우측은 29CM의 네비게이션 바이다. 드리블과 마찬가지로 부연설명해주는 텍스트 없이 아이콘만으로는 어떤 카테고리인지 알기 힘들다. 브랜드 컨셉에 충실한 것이 아이콘에서는 오히려 상징성을 많이 떨어뜨리는 느낌이다.
material iconshttps://material.io/resources/icons/?style=baseline
따라서 나는 Material Icons의 오픈소스 아이콘을 사용하기로 결정했다. 당장 심미성이나 컨셉에는 아쉬운 부분이 있더라도 상징성과 직관성은 최고이기 때문이다. 익숙한 만큼 우리에게 빠르게, 또 쉽게 인지될 수 있다.
기존
New최종적으로 Bottom Navigation Bar는 이렇게 구성했다. Shots(탐색과 검색)과 커뮤니티, 업로드, 알림(Notification), 그리고 마이페이지(내 작업물, 내 컬렉션).
또 각각의 카테고리에 각 기능들을 분류하였다. 비핸스처럼 나의 컬렉션을 My page에 귀속시켜서 나의 작업물과 나의 컬렉션을 함께 볼 수 있도록 변경하였다. 또 Activity와 Message를 Notification으로 합치고, Community 카테고리를 추가하여 커뮤니티 기능을 강화하고자한다.
이번 글을 마치며
뜻밖의 아날로그UX 분석을 바탕으로 새로 카테고리를 짜면서 노트를 사용하게되었다. 사실 스케치를 사용하면 더 빨랐겠지만 역시 많은 것을 손으로 그려온 나는 아직 노트에 직접 그리기가 생각하기엔 편하긴 하다. 네비게이션 바를 새로 설계하면서 기능을 분류하는 것에는 고려해야할 것이 정말 많다는 것을 알게 되었다. 꽤 여러 페이지를 쓰고 다시 쓰기를 반복했다.
이제 UI를 설계하고 그 위에 디자인을 입히는 일이 남았다. 아이패드를 이용해서 와이어프레임을 먼저 짜보려고 한다. (문명이 있는데 왜 쓰질 못하니) 빠르게 손 그림으로 그린 뒤 스케치로 뼈대를 옮기면 바로 스케치로 작업을 들어가는 것 보다 오히려 효율적일 것이라는 생각이 들었다.
기존 화면 와이어 프레임화. 은근히 시간이 꽤 걸렸다.화면은 iPhone 11 Pro (375*812)로 잡았다. 왜냐면 나의 폰이 XS이기 때문에 스크린샷이 모두 XS 기준이 되기 때문이다. 각 마진영역이나 아이콘 크기 등을 참고하여 제작하고자 한다. 고려해야할 요소가 많은 만큼 화면 기획 단계부터 조금 더 신경써서 해야할 것 같다.
*많은 관심과 오지랖과 피드백과 따끔한 조언은 큰 힘이 됩니다.
