앱 디자인 레퍼런스 사이트 mobbin 활용 팁 (ft.피그마)

UX/UI 디자이너는 항상 최신 디자인 트렌드를 파악하고, 우수한 레퍼런스를 찾아 프로젝트에 적용해야 합니다. 이런 과정을 효율적으로 진행할 수 있도록 도움을 주는 몇 개의 사이트가 있습니다. 이 글에서는 그 중 mobbin이라는 사이트를 효과적으로 사용하는 방법과 유용한 팁을 공유하고자 합니다. 특히 피그마 유저에게 도움이 되는 내용을 소개합니다.

mobbin 소개

mobbin.com은 다양한 앱의 디자인 패턴을 수집하여 제공하는 플랫폼입니다. 사용자는 이 사이트를 통해 광범위한 디자인 레퍼런스를 빠르게 찾고 분석할 수 있습니다.

플랫폼의 특징

광범위한 UX 패턴 라이브러리를 제공합니다. 상단에서 IOS, Android, Web을 선택하여 디바이스 별로 비교도 가능합니다. 또한 필터링 및 검색기능으로 원하는 디자인 패턴을 빠르게 찾을 수 있습니다.

제가 mobbin을 애용하는 가장 큰 이유는 한구에서 런칭되지 않은 앱들을 살펴볼 수 있다는 것 입니다. 한국 앱스토어 계정으로 해외 런칭한 앱을 다운받을 수 없습니다. 이때 mobbin을 이용하면 빠르고 간편하게 앱 내 스크린들을 탐색할 수 있기 때문에 폭넓은 레퍼런스를 조사하기에 매우 좋습니다.

사용법

간단한 가입 절차를 통해 시작할 수 있습니다. 무료로도 이용이 가능하나 일부의 스크린만 볼 수 있습니다. 따라서 모든 패턴을 보길 원할 경우 유료 구독을 해야합니다.

유료 구독은 년 단위, 3개월 단위, 월 단위에서 선택할 수 있으며 주기가 짧을 수록 가격이 높습니다. 필자는 3개월 단위로 결제되는 플랜을 사용하고 있으며 3개월 마다 $45가 청구됩니다. 아래 링크에서 금액을 살펴보고 본인에게 맞는 플랜으로 구독하시면 됩니다.

mobbin 플랜 자세히 보기

실제 활용 예시

UX패턴 or 플로우 검색

UX를 설계하고 있다면 환영할 만한 기능입니다. 서비스의 이름으로 검색할 수도 있지만 특정 영역의 설계 시 해당 패턴이나 플로우로 검색하면 여러가지 아이디어를 확장할 수 있습니다.

근래에 온보딩 제작을 앞두고 있어 온보딩 패턴을 조사해 보았습니다. ‘onboarding’ 키워드를 입력하면 아래와 같이 온보딩 플로우가 자동 완성으로 노출됩니다.

클릭하면 여러 앱 서비스의 온보딩 플로우를 보실 수 있습니다. 단순 스크린이 아닌 플로우 전체를 보여주므로 패턴을 파악하기 좋습니다.

플로우 전체를 피그마로 옮기기

정말 유용하게 쓰고 있는 기능입니다. 해당 기능이 있기 전까지는 각각의 스크린을 카피하여 피그마에 붙여넣곤 했습니다. 물론 그 당시에도 해외 스크린을 볼 수 있다는 것만으로도 감사했기에 특별히 불만이나 불편하다는 생각을 하지 않았던것 같습니다. 하지만 이 기능이 생긴 이후 레퍼런스 서치 및 정리하는 시간이 매우 단축되었습니다. 매우 간단하니 꼭 사용해 보시길 바랍니다.

마음에 드는 플로우를 발견했다면 해당 영역에 마우스를 가져가보세요. 그럼 아래 화면처럼 서비스명이 있는 라인의 우측에 버튼이 나타납니다. 여기서 피그마 아이콘이 있는 ‘Copy’를 클릭합니다. 화면이 많은 경우 시간이 약간 소요될 수 있으며 하단에 복사 중, 복사 완료 등의 진행 상태가 나타납니다.

복사가 완료되면 피그마에서 ‘mobbin’ 플러그인을 검색하여 실행합니다. 특별히 설명할 것이 없습니다. 단 하나의 버튼만 존재하기 때문이죠. ‘Paste’ 버튼을 누르면 조금 전 mobbin 사이트에서 복사한 플로우 전체 스크린이 피그마에 옮겨집니다.

아래는 몇 가지 서비스의 온보딩 플로우를 피그마에 옮긴 상황입니다. 온보딩 플로우를 보기 위해 앱을 다운로드하여 화면 하나 하나 스크린샷을 찍어 피그마로 옮기지 않아도 훌륭한 레퍼런스 스크린들을 단숨에 정리했습니다.

디자이너를 위한 팁

주니어 디자이너라면 레퍼런스를 조사하며 스타일에 기울게 되는 현상이 많이 발생합니다. 저 역시 그러한 주니어 시절을 지나왔습니다. 하지만 이것은 매우 자연스러운 현상입니다. 점, 선, 면, 색상 등 이러한 시각적인 요소들은 사람의 마음을 더 쉽게 훔치고 집중시킬 수 있기 때문입니다. 많은 경험을 통해 시니어가 되는 과정에서 같은 레퍼런스를 보아도 시각적인 요소를 머리에서 배제하고 구조를 볼 수 있게 되므로 너무 조급하게 생각할 필요는 없습니다.

위 화면에서 제가 붙여넣은 온보딩 레퍼런스는 스타일을 참고하기 위함이 아닙니다. 내가 진행해야 하는 프로젝트에는 어느 시점에 온보딩이 들어가는것이 적절할지 어떤 구조로 들어가는것이 좋을지를 빠르게 판단하기 위한 자료입니다.

서비스의 전략에 따라 온보딩이 노출되는 시점과 구조가 달라지기 때문에 타사 앱의 UX 전략을 비교 분석하여 이를 자신의 프로젝트에 반영할 수 있습니다.

예를 들면 설계 해야 할 프로젝트가 스타트업의 새로운 서비스이고, 앱에 접속하여 로그인을 완료해야 사용이 가능한 앱이라고 가정해 보겠습니다. 이때 고려해야 할 사항들은 아래와 같습니다.

• 기존에 없던 새로운 서비스로 유저가 앱을 사용함에 있어 진입 장벽을 느낄 수 있음
• 필수 로그인 과정을 거쳐야 앱을 사용할 수 있으므로, 첫 화면에서 서비스의 매력을 느끼지 못하면 이탈할 가능성이 있음

저 역시 매우 공감하는 부분입니다. 신규 서비스에 회원 가입을 한다는 것은 피로도를 유발합니다. 귀찮은 회원가입을 거쳐 사용하고 싶을만큼의 매력이 어필되어야 합니다.

그렇다면 첫 화면 하단에 로그인과 회원가입 버튼을 배치하고, 버튼 외 대부분을 차지하는 영역에 슬라이드형 온보딩을 제공하면 좋을 것 같습니다. 로그인 화면에서 자연스럽게 유저에게 서비스의 매력을 어필하여 가입을 유도합니다. 동시에 부담스럽지 않게 새로운 서비스에 대한 튜토리얼을 제공하게 됩니다.

이러한 판단을 하기까지 여러 서비스의 앱 디자인 레퍼런스를 살펴 보아야 하는데, 이때 mobbin이 다양한 레퍼런스를 빠른 시간에 피그마에 옮겨주므로 매우 유용하게 사용됩니다.

결론

mobbin은 UX/UI 디자이너에게 강력한 레퍼런스 도구입니다. 이를 통해 효율적으로 디자인 레퍼런스를 조사하고, 프로젝트에 유용한 인사이트를 얻을 수 있습니다. 지금 바로 사용해 보시고, 디자인 효율성을 높여 보세요. 더 좋은 활용 방법이 있다면 댓글로 공유해주세요.

참고

• 피그마 플로우 차트 그리기 (무료 ver)
• 디자이너를 위한 앱디자인 사이즈: 해상도 설정
• 유저플로우(User Flow) vs 테스크플로우(Task Flow)