Mobbin과 함께 레퍼런스 탐구하기

수십만개의 화면으로 배우는 제품 디자인

by 강정우 Dec 09. 2024

Unpacking Problems 01. Mobbin

우리 삶속의 문제를 해결하는 제품을 소개합니다.

Mobbin Website : https://mobbin.com/

Mobbin은 디자이너들이 최신 모바일 앱 트렌드를 쉽게 파악할 수 있도록 다양한 UI/UX 패턴을 제공하는 제품 디자인 레퍼런스 툴입니다. 다양한 글로벌 서비스의 30만개 이상의 스크린샷을 카테고리별로 제공해 손쉽게 확인할 수 있습니다.

국내외에는 Refero, 디자이너스, WWIT 등 다양한 유/무료 레퍼런스 서비스가 있습니다. *Mobbin은 국내 서비스 화면을 제공하지 않는 큰 단점이 있음에도 불구하고, 유료로 구독하고 있습니다. 이는 Mobbin이 단순히 화면을 나열하는 데 그치지 않고, 사용자의 문제를 해결하는 명확한 가치를 제공하기 때문입니다.

*2025년 1월 기준 국내 서비스인 지그재그가 추가되었습니다.

문제발견 : 효율적인 레퍼런스 탐색의 어려움

Mobbin의 주 사용자인 UX/UI 디자이너에게 레퍼런스를 파악하는것은 필수적입니다. 디자이너는 레퍼런스를 통해 계속해서 바뀌는 트렌드를 파악해 사용자의 기대에 부응하고, 효율적으로 작업할 수 있습니다.

하지만 디자이너가 적절한 레퍼런스를 찾는 과정은 매우 까다롭습니다. 직접 서비스를 사용해보거나, 핀터레스트나 구글 같은 이미지 플랫폼을 이용하는 방법은 많지만, 이들은 프로젝트 요구에 정확히 맞는 레퍼런스를 제공하지 못하며, 많은 시간과 리소스를 소모하게 만듭니다. 특히 한정된 작업 시간 속에서 모든 것을 처음부터 새로 디자인하는 것은 비효율적이기 때문에, 검증된 디자인 패턴을 빠르게 적용할 수 있는 레퍼런스의 효율적인 탐색이 필수적입니다.

문제해결 : 편리한 탐색

Mobbin은 분류와 필터를 통해, 디자이너들이 레퍼런스 탐색에서 겪는 문제를 효과적으로 해결합니다.

1. '지금' 필요한 레퍼런스를 탐색하기

Mobbin은 단순히 화면을 모아놓는 것을 넘어, 사용자가 서비스를 이용하는 상황에 적합한 탐색 기능을 제공하고 있습니다. 기본적인 서비스별 및 화면별 탐색 외에도, Bottomsheet, Textfield 등의 UI 엘리먼트별 탐색과 Onboarding, Logging in 등의 플로우 탐색도 지원합니다.

특히 플로우 탐색의 경우 프로젝트를 진행하며 기능을 구성하는데 큰 도움이 되었습니다. 클릭 요소를 보여주는 hotspot 기능과 영상을 함께 제공하여 실제로 화면이 어떻게 동작하는지 사용자가 명확하게 파악할 수 있도록 하는 부분이 큰 장점으로 느껴졌습니다. 이 외에도 화면 내 텍스트를 검색하는 기능도 제공하고 있습니다.

2. 동일한 서비스라도 OS별로 확인하기

Web, IOS, Android별 화면 스크린샷을 제공합니다. 이를 통해 같은 서비스가 OS별로 어떻게 변형되는지 파악하기에 용이합니다. 특히 다양한 도메인의 구축 프로젝트를 진행하는 디자이너라면 프로젝트별로 다양한 반응형 웹/앱에 대응할 일들이 많은데, 다양한 케이스에서 화면의 변화를 확인하고 대응하기에 유용합니다.

+ 추가적으로 피그마 플러그인을 통해 편리하게 수십장의 페이지를 피그마로 한번에 가져올 수 있습니다.