디자인이나 리서치할 때 아직도 핀터레스트나 비핸스만 보고 계신가요? 혹은 원하는 기능의 레퍼런스를 찾기 위해 매번 앱을 직접 다운로드해 확인하시나요? 이런 고민을 덜어줄, UX/UI 레퍼런스 사이트들 중 가장 많이 보는 3가지만 추천합니다.
1. 유아이볼
제 기준 국내 서비스 중에서 가장 정리가 잘 되어 있는 서비스입니다. UI 패턴, 카테고리, 컴포넌트별로 분류가 체계적으로 잘 되어 있고, 모바일뿐만 아니라 웹사이트 레퍼런스도 제공합니다. 패턴이나 카테고리, 컴포넌트가 워낙 세부적으로 나뉘어 있어서 웬만한 레퍼런스는 거의 다 찾을 수 있습니다.
장점
- 필터 기능이 정말 잘 되어있습니다. 원하는 도메인의 특정 패턴을 분류해서 볼 수 있고 더 들어가면 컴포넌트로도 확인할 수 있습니다. 예를 들어, 금융과 로그인/회원가입을 선택했다면 다양한 금융 서비스들의 로그인/회원가입 플로우를 한눈에 모아 볼 수 있습니다.
- 웹사이트 레퍼런스 지원합니다. 국내 웹사이트가 많이 아카이브되어 있습니다. 대부분의 웹 레퍼런스 아카이브가 해외 사이트에 집중된 점을 고려하면 매우 유용한 기능입니다.
- 컬러별 분류를 할 수 있습니다. 특정 색상을 사용하는 서비스를 찾아볼 때 유용한 기능으로, 디자인 작업 시 큰 도움이 됩니다.
단점
- iOS 중심입니다. 자료가 대부분 iOS 기반이라, 안드로이드 레퍼런스를 찾기는 어렵습니다.
- 동영상이 없습니다. 스크린샷만 있어서 유저 플로우를 파악하기엔 다소 부족한데, 그래도 워낙 분류가 잘 되어 있어서 참고용으로는 충분합니다.
2. ux design archive
UX Pattern Archive는 UX 패턴별 검색과 서비스별 탐색으로 크게 나뉩니다. 보시다시피 패턴과 도메인이 세분화되어 있어 구조적으로 잘 정리되어 있습니다.
장점
- UX 패턴과 도메인이 세부 카테고리로 나뉘어 있어, 원하는 기능의 레퍼런스를 쉽게 찾을 수 있습니다.
- 한 앱에 포함된 다양한 유즈케이스들이 잘 분류되어 있어 참고하기 좋습니다.
단점
- iOS 중심입니다. 자료가 대부분 iOS 기반이라, 안드로이드 레퍼런스를 찾기는 어렵습니다.
- 스크린샷만으로는 유저 플로우를 이해하기 어려우며, 동영상을 함께 보면 좀 더 이해하기 쉽습니다.
- 특정 도메인 내 여러 서비스를 한눈에 보고 싶지만, 현재는 한 번에 하나의 서비스만 확인할 수 있습니다.
3. Mobbin
프로 모델 구독 중인 서비스입니다. UXUI 레퍼런스 사이트 중 가장 규모가 큰 해외 서비스입니다. 방대한 레퍼런스들을 갖고 있고 iOS, Android, Web까지 지원합니다.
장점
- 직관적인 플로우: 동영상 없이도 스크린샷에 플로우 과정이 명확히 표시되어 있어, 화면만으로도 유저 플로우를 직관적으로 이해할 수 있습니다.
- 피그마 연동: 여러 장의 스크린샷을 피그마에 바로 임포트할 수 있는 기능을 제공합니다. 디자이너들이 작업 과정에서 바로 참고 자료를 활용할 수 있어 생산성이 높아집니다.
- iOS, Android, Web까지: 안드로이드와 웹사이트 레퍼런스도 제공하여 다양한 플랫폼의 디자인 사례를 비교하고 참고할 수 있습니다.
단점
- 국내 앱 부족: 국내 서비스나 앱의 레퍼런스는 상대적으로 부족해, 국내 사례를 참고하려는 경우엔 활용도가 낮을 수 있습니다.
- 무료 버전의 한계: 무료 사용자에게는 열람 가능한 자료의 양이 제한적이며, 핵심 기능을 제대로 사용하려면 유료 플랜이 필요합니다.
마치며
정리하자면 레퍼런스들을 최대한 많이 보고 싶으면 mobbin을, 국내 서비스만 보고 싶으면 유아이볼과 UPA를 추천드립니다.
이렇게 가장 많이 보는 3가지 서비스들만 소개했는데 그 외에도 자주 접하는 레퍼런스 및 유용한 사이트 모음글을 정리할 예정입니다.
감사합니다.
