[UX] dribbble 뜯어보기
디자인 사이트 삼대장 속 들여다보기
Dribbble은?
dribbble website드리블 : https://dribbble.com
드리블(dribbble)은 디자인 소셜 네트워킹 및 포트폴리오 공유 사이트이다. 비핸스, 국내의 노트폴리오 (개인적으로는 핀터레스트)와 함께 디자인 사이트 삼대장으로 불리기도 한다. 국내에서는 아직까지 활성화가 되지 않았지만, 해외에서는 채용 플랫폼으로서도 중요한 역할을 하고 있다.
기본적으로는 Pro가 아닌 회원들은 한장의 이미지(1600*1200)씩 올릴 수 있다. 덕분에 한장씩 쉽게 부담없이 업로드할 수 있다는 장점이 있다. Behance처럼 프로젝트를 구구절절 써내려가야하는 부담을 확실히 줄일 수 있어 주니어 디자이너들이 Daily 작업을 꾸준히 업로드 하거나 짧은 프로젝트를 진행해볼 수 있다.
dribbble을 뜯어 보기 전에
이 글의 목적은 디자인 사이트 dribbble의 서비스를 경험적 측면에서 뜯어보고 인터페이스적 측면에서 공부하고, 마지막으로 리디자인해보기 위함이다.
dribbble의 목표
내가 이용하는 서비스, 웹 사이트가 어떤 목적을 가지고 있는지, 어떤 기능을 하는지 궁금할 때 알아볼 수 있는 가장 좋은 방법은 바로 about 페이지에 들어가는 것이다. '음식이 싱거울 때 소금을 넣으세요' 같은 말이지만, 사실 나를 포함한 꽤나 많은 사람들이 인터넷 검색이나 다른 2차 가공된 정보들을 먼저 찾아보려한다. 음식이 싱거우니 간단히 소금을 넣는 대신, 다시 냄비에 넣고 끓이고 졸이기를 하는 것이다.
About 페이지는 아무개가 아무렇게나 쓴 글이 아니다. 피 땀 흘려 서비스를 만든 사람들이 서비스의 정수를 모으고 모아 하나로 압축한 것이 about 페이지이다. 따라서 서비스를 가장 잘 요약하고 목적을 잘 설명하는 글이라고 할 수 있다.
The Heart of the Designer Community
We’re on a mission to build the world’s best community for creatives to share, grow, and get hired.
Dribbble의 About Page 헤드카피이다. '디자인 커뮤니티의 중심' - 디자이너들이 작품을 공유하고 성장하고 또 고용될 수 있도록 하는 것을 목표로 두고 있다. 즉 작품 공유, 커뮤니티, 채용이 주 목적이 되겠다.
dribbble about page많은 사람들이 dribbble을 사용하고 있고, 영감을 받고 피드백을 주고 받을 수 있다고 강조하고 있다. 여기서 주목할 점은 "Share small screenshots to show off your current projects(···)" 이다. 드리블이 Small screenshots로 제한을 두고 강조를 한 목적이 무엇일지 궁금해졌다.
이 About 페이지의 내용을 바탕으로 앱의 UI를 통해 방향성에 대해 탐구해보고자 한다. 비핸스와 드리블 둘 다 웹사이트로 서비스를 시작했고 어떻게보면 그 기능들 중 핵심 기능들만 앱에 추려서 넣었기 때문에 앱의 UI 구조를 보면서 거꾸로 UX 설계를 추측해 올라가 볼 수 있을 것 같다.
드리블은 왜 한장의 이미지만 올리게 했을까
좌 : Behance 우: Dribbble
왼쪽의 스크린샷은 또다른 포트폴리오 플랫폼 비핸스 앱의 메인 화면이고 오른쪽의 스크린샷은 드리블 앱의 메인 화면이다. 인기있는 포트폴리오와 Shot을 추천하고 메인으로 보여준다. 둘을 비교해보니 확연하게 다른 점이 하나가 있었다. 드리블은 스크린 샷 밑에 좋아요, 댓글, 뷰, 저장 수를 바로 보여준다는 점이다. 비핸스도 좋아요와 뷰 수를 표시하긴 하지만 프로젝트를 클릭하고 스크롤을 내려야지만 확인할 수 있다.
하단 내비게이션에서도 차이가 있었다. 비핸스는 프로젝트에 대한 반응, 메세지 등을 Notification 메뉴로 묶어둔 반면, 드리블은 Activity와 Messages라는 두개의 메뉴로 구분해두었다. 즉 좋아요나 댓글, 피드백 등을 매우 중요하게 생각하고 있다는 것을 의미한다.
문득, 드리블이 인스타그램과 매우 비슷한 인터페이스를 가지고 있다는 생각이 들었다. 올린 사람의 프로필과 정보가 상단에 위치하고 가장 큰 비중을 차지하는 이미지가 오고 바로 밑에 좋아요와 댓글, 공유 등의 Reaction을 표시한다.
About 페이지에서 소개하기를 드리블은 '디자인 커뮤니티'의 중심이라고 했다. 즉 관계에 조금 더 집중하는 것이다.
The Heart of the Designer Community
그렇다면 기본적으로 한장의 이미지만을 올리게 한 것에는 이러한 목적이 숨어있을 것 같다. "더 쉽게 올리고 더 자주 소통하세요." 한장의 이미지를 올리는 것은 많은 양의 이미지를 올리는 것에 비해 진입장벽이 훨씬 낮다. 앞서 말한 것처럼 주니어 디자이너들도 쉽게 자신의 디자인을 공유할 수 있다. 주니어 디자이너들이 많이 몰리면 채용을 하고자 하는 기업들도 드리블을 주목할 수 밖에 없다.
채용의 기회
이러한 디자인 커뮤니티에서 결국 중요한 것 중 하나가 채용이다.
앱에는 아직 없지만 웹사이트에서는 이렇게 공유된 이미지 페이지에 메세지를 보낼 수 있는 버튼이 있다. 나를 고용해달라고 먼저 제안을 보낼 수 있는 것이다. 적극적인 형태의 채용 형태이다. 함께하고 싶은 팀 혹은 회사에 먼저 디자이너가 스스로를 알릴 수 있다. "Hire Me"라니! 귀엽기도 하고 무척 적극적이기도 하다.
버튼을 누르면 이렇게 고용 형태와 작업에 대한 설명 등을 문의할 수 있다.
메인 페이지 상단에 Hiring Designers? 메뉴가 따로 있다.국내에선 활성화되지 않았지만, 드리블은 해외에서 채용 플랫폼으로도 꽤나 잘 활용되고 있다고 한다. 특히 장점은 회사와 디자이너가 쌍방향으로 채용을 제안할 수 있다는 것이다.
메인페이지 메뉴에 'Hiring Designers?'메뉴가 따로 존재한다. 좌측 두 메뉴와 구분 바까지 두며 따로 표시해두었다. 이는 곧 그만큼 채용 부분에 신경을 기울이고 있다는 뜻이 된다. 실제로 디자이너들을 고용하려는 회사들에게 서치 툴(search tool)을 제공하여 드리블 유저 디자이너들의 availabilty, 지역, 경력 등으로 필터링 할 수 있도록 하여 더욱 쉽게 매칭될 수 있도록 한다.
Job Board물론, Job board도 있어서 회사나 팀이 공고를 낼 수 있다. 디자이너들도 이 곳을 통해 채용 정보를 얻고 또 지원할 수 있다.
채용 공고만 확인할 수 있다.아쉬웠던 것은 이러한 좋은 쌍방향의 채용을 모바일 앱에서는 지원하지 않는다는 점이다. 웹 페이지 보다 모바일의 경우 업로드 등의 기능은 꽤나 활용하기 어려울 수 있으나 핵심 기능들이 많이 아쉽게 설계되어 있었다.
좌: 채용 플랫폼 원티드 / 우: 드리블채용 플랫폼인 원티드의 UI를 보더라도 Job의 종류에 따라 구분하여 검색할 수 있다. 또 하단의 필터 버튼을 통해 자신이 원하는 검색결과를 더 빠르게 얻을 수도 있다. 또 카드형으로 제작되었기 때문에 시각적으로 훨씬 편안하면서도 동시에 시각적인 정보도 전달해준다. 반면 드리블의 Jobs 영역에 경우 단순히 리스트 형태로, 일일히 눌러보아야 정보를 알 수 있다.
Bucket(Collection) 기능
디자인 삼대장 Collection 기능카드형으로 가장 많이 활용되는 Collection 기능. 한눈에 나의 폴더를 파악하고 관리할 수 있다. 디자인 자료를 손쉽게 모으고 분류하여 저장할 수 있는 Collection 기능은 주니어 디자이너 뿐만 아니라 많은 시니어 디자이너들도 꾸준하게 이용하고 있다. 그렇기에 비핸스, 핀터리스트도 모두 앱의 핵심기능으로서 잘 설계해두었다.
(자세히 보면 드리블은 홀로 모바일 웹페이지다.)
드리블을 뜯어보며 알게 된 사실 중 하나는, 드리블의 핵심 기능 중 하나인 Bucket (Collection) 기능의 네이밍이 정의가 잘 안됬다는 점이다. 모바일 웹과 앱의 UI 형태도 달랐다. 앱의 UI 가 디테일이 떨어지는 느낌을 받았다. 아무래도 웹에서 훨씬 사용을 많이 하기 때문에 앱 개발에 덜 투자한 것이라 예측되지만 아무래도 아쉽다.
좌 : Dribbble 웹 Collections / 우: Dribbble 앱 버킷 Buckets오히려 모바일 웹의 UI가 훨씬 편하게 되어있다. 또 같은 화면이지만 앱과 앱이 너무 다른 인터페이스로 되어있어 꽤나 혼란스럽다.
그래서
드리블의 경우 굉장히 다양한 방면으로 커뮤니티에 노력을 쏟고있다. Meetup 주최 라던지 Blog Interview 등 디자이너끼리 정보를 공유하고 오프라인으로도 모임을 가질 수 있도록 하고 있다. 그리고 이러한 기능들은 앱이라는 공간 내에서 더욱 활성화 될 수 있는 여지가 있다.
안타깝게도, 웹 서비스와 앱을 비교하였을 때, 앱이 웹에 비해 완성도가 현저히 떨어진다는 느낌을 받았다. 아무래도 데스크탑 화면에서의 웹에서 가장 많이 쓰이기 때문에 비교적 활용이 덜 되는 모바일 버전이나 앱에는 힘을 덜 쓴 것이라 짐작 된다.
그러나 앱이 웹 서비스보다 분명하게 가지고 있는 장점이 있다. 드리블의 앱 경우에 하이브리드 앱의 형태이다. 덕분에 웹의 장점과 앱의 장점을 활용할 수 있다. 또 사용자들에게 앱으로서 다가갈 때 훨씬 효율적이고 많이 사용될 수 있는 기능들이 있을 것이다. 분석을 통해 앱의 구조를 와이어프레임으로 짜보고, 개선점을 찾아 리디자인을 해보고자 한다.
참고 : 웹, 하이브리드 앱, 네이티브 앱 의 간단한 정의
*추가로 주니어 디자이너들이 드리블을 어떻게 활용하면 좋을지 경험담을 공유한 Medium글이 있어 가져와봤다.
https://uxplanet.org/how-a-young-designer-takes-advantage-of-dribbble-5f1a4c88e87e
*많은 관심과 피드백과 따끔한 조언은 큰힘이 됩니다.
