현직 디자이너가 추천하는 uxui 레퍼런스 사이트
레퍼런스 잘 베끼는 3단계 (1) 레퍼런스 찾기
썸네일 출처: 사진: Unsplash의 Sara Kurfeß
회사에 다니며 이래저래 바빠서 정말 오랜만의 글로 찾아오게 되었습니다. 이 글도 초안을 12월에 써놨었는데 이제야 발행하게 되네요.. 앞으로는 좀 더 성실하고 꾸준하게 글을 올려보려고 합니다! 감사합니다.
(웹사이트는 좋은 곳을 찾을 때마다 추가하고 있습니다)
무에서 유를 만드는 게 너무 어려웠던 나에게, 레퍼런스는 떼려야 땔 수 없는 사이였다.
핀터레스트, 비핸스, 노트폴리오를 수시로 왔다 갔다 하고, 앱을 쓰다가도 캡처에 화면 녹화를 수십 번..
핸드폰에는 이미 리서치를 위해 깔아놓은 쓰지 않는 앱들이 수두룩했다.
근데 이 레퍼런스라는 게, 잘 쓰면 약이지만 못쓰면 독이 되는 참 어려운 친구이다. (그래서 레퍼런스를 보지 말라고 하는 디자이너들도 많다.) 하지만 다루기 까다로운 만큼 잘 훈련해 두면 든든한 내 편이 될 수 있다. 혹시나 도움이 될까 하여 정답은 아니지만 오랜 시간 레퍼런스를 잘 베껴먹으며 터득한 나의 레퍼런스 활용법을 정리해 본다.
레퍼런스 찾기
이번 글은 레퍼런스를 참고할 때 제일 먼저 해야 할 레퍼런스 '찾기'에 대해 이야기해 볼 것이다. 나는 프로덕트 디자이너이기에 주로 앱스토어에서 비슷한 서비스를 참고하고, 만약 부족하다면 모빈, 드리블, WWIT 등의 사이트를 활용한다.
각 레퍼런스 출처별 특징
1. 앱스토어
장점: 유저 입장에서 전체 플로우를 사실도 높게 경험할 수 있다(인터렉션 등도 참고 가능), 운영 중인 서비스라 개발/비즈니스적으로 구현 가능한 정도를 알 수 있다, 다양한 상황이 대응되어 있어, 디테일을 참고하기 좋다.
단점: 수많은 앱 다운으로 개인정보유출과 푸시의 늪에 빠지게 된다. 직접 다운로드하여서 플로우를 하나하나 타봐야 한다, 내가 해당하지 않는 경우의 수를 볼 수 없다.
2. 모빈
장점: 직접 다운로드하여서 플로우를 보기 어려운 해외 서비스의 플로우를 참고할 수 있다.(해외 서비스의 경우, 한국에서 다운로드할 수 없거나 가입이 불가한 경우도 많음) 서비스 도메인과 플로우별로 서비스가 분류되어 있다. (온보딩 화면만 보고 싶을 경우 온보딩 화면을 모아볼 수 있음)
단점: 유료다, 없는 서비스도 있고 화면 업데이트가 바로바로 되지는 않는다.(최신화가 잘 안 된다)
3. WWIT
장점: 국내 서비스의 플로우를 참고할 수 있다. 꽤 상세하게 모든 단계가 캡처되어 있다. (모빈의 한국 버전이라고 생각하면 된다.) 아래 캡처에 보이다시피 서비스 카테고리, 플로우, 컴포넌트별로 구분해서 볼 수 있다.
단점: 서비스 종류가 많지 않다, 화면 업데이트가 느리다.
4. 드리블
장점: 노트폴리오 비핸스와 비슷한 포트폴리오 사이트이다. 외국 디자이너들이 많고 다양한 UI 시도를 확인할 수 있다.
단점: 서비스 플로우보다는 UI 트렌드 또는 새로운 UI 시도 등을 참고하기 좋다.
2024.10.07 추가
5. 60 fps
장점: 트렌디한 ui 디자인과 다양한 인터렉션 시도를 볼 수 있다. (특이하게 광고도 모아볼 수 있음)
단점: 서비스 플로우를 참고하기는 어렵다.
6. 유아이볼
장점: 필터링이 상당히 세분화되어 있고(mau, 플로우, 앱도메인, 색상으로 나누어 볼 수 있음) 모바일뿐만 아니라 웹사이트 레퍼런스, 인터렉션 gif도 볼 수 있다(물론 웹사이트는 수가 많지 않음)
단점: 플로우는 꽤 촘촘하게 캡처되어 있지만, 여느 레퍼사이트가 그렇듯이 다양한 케이스를 보기는 어렵다. (예를 들면 오류가 생긴 경우, 특정 유저에게 다르게 뜨는 경우 등)
레퍼런스 찾는 법
참고하기 좋은 곳은 알았는데... 레퍼런스를 어떻게 찾아야 할까?
전체 플로우를 참고하고 싶을 때
서비스 도메인을 키워드로, 관련 있는 서비스들의 플로우를 참고한다. 실제 운영되는 서비스들을 참고하다 보면 법적으로, 개발적으로 어떤 단계들이 필요한지도 파악할 수 있다.
예) 다이어리 서비스면 기록, 일기, 다이어리, 달력, 메모, 보관 등의 키워드로 찾기
UI를 참고하고 싶을 때
서비스 생김새(UI)를 키워드로, 관련 있는 서비스들을 찾아본다. 서비스 성격이 전혀 다를 수도 있다.
예) 지도 서비스면 지도, 맵, 장소, 내비게이션, 배송 등 지도를 쓰는 서비스를 찾아보기
레퍼런스 많이 아는 법
내 데이터 베이스에 아는 서비스들이 많아야 필요할 때 어떤 것을 참고하면 좋을지 알 수 있다. 따라서, 리서치가 필요할 때가 아니더라도 평소에 다른 앱들에 관심을 가지고 살펴보는 것을 추천한다. (생각보다 같은 도메인이 아닌 앱에서 아이디어를 얻을 때가 정말 많다.)
1. 앱 리뷰 하는 뉴스레터나 인스타, 유튜브 구독
2. 그것이 귀찮다면 앱스토어 자주 들어가기
앱스토어 들어가면 투데이 탭과 앱 탭에서 최근 주목받고 있는 앱과 앱 순위를 볼 수 있다.
이마저도 귀찮고 까먹는 사람들을 위해 앱스토어에서 광고 메일도 보내준다. 아래와 같은 메일이 주기적으로 오기 때문에 하루 단 5분이면 내 머릿속에 괜찮은 레퍼런스들을 꽉꽉 채워 넣을 수 있다.
다음 글에서는 이렇게 열심히 모은 레퍼런스를 어떻게 내 것으로 만들어야 하는지에 대해서 이야기해 볼 것이다!
질문이 있다면 편하게 댓글로 남겨주세요 :)
