brunch

라이킷 98 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 레오 Apr 23. 2024

UX/UI 레퍼런스 200% 활용법

수많은 레퍼런스를 평소에, 업무과정에서 어떻게 활용하면 좋을까요?

* UX 분석 스터디 운영 경험과 최근 업무를 통해 배운 점을 정리해보았습니다 :)

안녕하세요, 레오입니다. 오늘은 UX/UI 레퍼런스 활용에 대한 글을 써보았습니다.

평소에 레퍼런스를 어디에서 탐색할 수 있고 어떤 생각을 하면서 레퍼런스를 보면 좋을 지 / 업무 과정에서는 언제 어떻게 활용하면 좋을 지 등에 대한 생각을 담았습니다.

1. 레퍼런스, 어디에서 찾을 수 있을까?

(1) 아래 사이트들에서는 보통 '레퍼런스' 라고 부르는, 캡쳐 화면이 포함된 다양한 구현 사례들을 확인할 수 있습니다.

- UPA : 국내 앱서비스 기준 사진 캡쳐 뿐 아니라 동영상 캡쳐와 설명을 함께 볼 수 있는 곳. https://diby.io/upa

- 국내 모바일 서비스 레퍼런스 볼 수 있는 곳 https://wwit.design

- 해외 레퍼런스 mobbin.design/browse/ios/apps

- 디자인어스 레퍼런스 모음집 (서비스/스크린으로) https://designus.io/reference

- GDWEB ( 우수디자인 수상작 등 레퍼런스 참고가능) https://www.gdweb.co.kr/main

- 해외 Design Inspiration 모음사이트들

비핸스 - https://www.behance.net

드리블 - https://dribbble.com

무즐리 - https://muz.li

*피그마 자체 커뮤니티에서도 특정 키워드로 검색하면 좋은 레퍼런스를 생각보다 많이 찾을 수 있습니다. https://www.figma.com/community

- 앱을 다운받지 않아도 ux ui browse할 수 있는 라이브러리

- 모빈 https://mobbin.design/browse/ios/apps

- fnd : ios기준으로 국가별 서비스 검색 / 앱 검색 가능 사이트 https://fnd.io/#

(2) 아래 사이트들에서는 분석글, 아티클 등을 보고 인사이트를 얻을 수 있습니다.
- 팁스터 https://maily.so/tipster

- 지금 써보러 갑니다. http://icunow.co.kr (디자인 뿐 아니라 UX UI인사이트도 얻을 수 있음.)

- 서핏 : https://www.surfit.io (UXUI분야 최신 아티클들 편하게 받아볼 수 있는 사이트. Chrome extension까지 제공됨)

- 요즘 IT : https://yozm.wishket.com/ (IT 분야 아티클 사이트. 기획, 디자인 카테고리 내 아티클을 참고해보세요!)

2. 평소에 레퍼런스를 볼 때는 어떻게?

우선 평소에 다양한 앱이나 웹 서비스를 써보고 & 흥미로운 부분이 있다면 이곳저곳 둘러보고 & 아티클도 주기적으로 읽는 습관을 만드는게 Best 라고 생각합니다. 사실 당연한 말이기도 하죠.

그리고 이런 행동을 억지로, 단순히 많이 해서는 습관을 만들기 힘들다고 생각합니다. 단기적으로는 효과가 있을 지 몰라도 동기부여가 일시적으로 줄어들거나 잠깐 다른 사정으로 레퍼런스 탐색 등 행동이 뜸해지는 등 변수가 생겨 행동이 중단되면 다시 이어가기가 정말 힘듭니다.

아이가 도서관에 흥미를 가지게 만들기 위해 도서관에서 라면을 먹고 놀다가 돌아오는 것 처럼, 레퍼런스 탐색이나 아티클 탐색도 좋아하는 것들, 재밌어 보이는 것들부터 조금씩 해나가면 어느정도 흥미를 붙일 수 있다고 생각합니다. 그래서 저는 스터디 운영 과정에서도 '한 화면이나 문구에 대한 리뷰도 좋고 정말 간단한 리뷰라도 좋으니 흥미로운 레퍼런스나 아티클만 골라서 리뷰해보세요!' 라고 멤버 분들에게 자주 말합니다.

이제 일단 레퍼런스 탐색 시작에 성공했다면 어떤 생각을 하면서 or 어떤 점에 집중해서 레퍼런스를 살펴보면 좋을까요? 기왕 시간과 노력을 들여서 보는 김에 더 많은 인사이트를 얻을 수 있으면 좋겠죠! 그 방법에 대한 제 생각은 아래와 같습니다 :)

(1)겉으로 보이는 디테일한 문구, 디자인, 인터렉션 등을 보며 '오 이런 디자인도 있네 / 오 이런 인터렉션도 가능하네 / 오 이런 배치도 가능하구나!' 처럼 생각하는 것도 좋습니다.

ux 스터디를 운영하거나, 다양한 uxui커뮤니티에서 활동한 제 경험에 비추면 평소에 요 범위 내에서 레퍼런스를 바라보고 캡쳐해서 아카아빙하는 분들이 많았던 것 같습니다.

다만 (2) '이 기능은 왜 만든 것일까? / 같은 기능이라도 A처럼 풀 수 있었을텐데 B의 방식으로 풀어낸 이유는 무엇일까? / 이 기능을 통해 해결하려는 문제, 달성하려는 지표는 무엇일까? / 이 기능에서 전달하고자 하는 메시지는 무엇일까?' 등 처럼 왜? 에 대한 질문을 던지며 생각하는 것이 정말 중요하고, (2) 처럼 생각하면 비슷한 수의 레퍼런스를 보더라도 더 많은 인사이트를 얻을 수 있다고 생각합니다.

(2) 처럼 생각하는 것이 왜 중요할까요?

uxui에 입문하는 분들이나 초심자 분들이라면 (1)의 방식으로도 충분히 많은 점을 배울 수 있지만, 이 방식에서 얻을 수 있는 인사이트에는 한계가 있다고 봅니다. (2)처럼 생각하는게 생각의 범위나 학습 과정이 더 뻗쳐나갈 수 있는 가능성이 훨씬 큽니다.

예를 들어, 만보기 기능을 리뷰할 때 '왜 만보기를 도입했을까?' -> '앱에 자주 방문하도록 유도하기 위함' -> '앱에 자주 방문하도록 유도하는 다른 기능들엔 뭐가 있을까?' -> '고양이 키우기 등의 기능도 비슷한 목적이구나!' -> '출석체크도 비슷한 맥락인 것 같고 출석체크가 방문 유도가 더 확실하고 개발 리소스도 덜 들 것 같은데 다양한 리텐션 유도 기능 중에 고양이 키우기만 도입한 이유는 무엇일까?' -> '그나저나 이런 것들은 활성 사용자를 대상으로만 유효할 것 같은데 비활성 사용자를 활성 사용자로 전환하는 방법엔 뭐가 있을까? 관련 아티클들 찾아봐야지' -> '리텐션을 되게 체계적으로 쪼개서 설명하는 자료가 있네? 이것도 봐볼까?' 처럼 왜? 에 대해 파고 들면 정말 다양한 생각을 할 수 있는 것 같습니다.

그리고 아래에서 다루겠지만 업무 과정에서 레퍼런스는 특정 지표를 높이기 위해, 특정 사용자의 문제를 해결하기 위해, 특정 유형의 기능을 기획하기 위해, 즉 필요에 의해 적절한 레퍼런스를 쇽쇽 골라오는 느낌으로 많이 활용된다고 봅니다. (2) 처럼 생각하는 훈련이 충분히 되면 목적과 필요에 맞는 레퍼런스를 연결지어서 생각할 수 있고, 업무 과정에서도 효율적으로 활용할 수 있습니다.

+ 운영 중인 UX 스터디에서도 참여하는 분들이 비슷한 방식으로 생각해보실 수 있게 참여 가이드 문서 내에서도 왜 이렇게 설계한 것 같은지? 의도 추론 / 아쉬웠던 점 & 개선방안 및 이유 / 나에게 활용할만한 부분 등을 포함해서 템플릿을 마련해두었습니다.

3. 업무 과정에서 레퍼런스를 활용할 때는 어떻게?

(1) 레퍼런스는 언제 탐색하면 좋을지?

최근에 기획 초반부터 바로 레퍼런스부터 탐색하는 것은 비효율적이라는 것을 느꼈습니다.

기능을 통해 달성하고자 하는 목표가 무엇인지, 해결해야 하는 문제가 무엇인지, 이 기능을 통해 사용자에게 전달하려는 메시지나 수행하게끔 만드려는 액션이 무엇인지 등이 명확히 정의된 이후에 레퍼런스를 탐색하는게 좋다고 생각합니다.

위의 것들이 정의되지 않은 채로 레퍼런스 부터 탐색하면, 정작 문제 정의 이후에 돌이켜보니 비슷한 종류의 기능이더라도 A라는 문제를 해결하는 레퍼런스가 없었다거나, 매우 적어서 다시 살펴봐야 하는 등의 상황이 발생할 수 있습니다. 혹은 머릿속에 너무 많은 레퍼런스가 있어서 이게 좋을까? 저게 좋을까? 이건 왜그럴까? 등등 불필요한 생각이 떠올라 해결해야 하는 것은 잊고 레퍼런스의 늪에 빠져 의미없는 고민만 반복될 가능성이 높아진다고 생각합니다.

해결해야 하는 문제 / 필요한 이유 / 전달하는 메시지 / 유도하는 액션 등이 명확히 정의되어 있다면 레퍼런스를 보다 효율적으로 탐색할 수 있습니다.

+ 물론 경쟁사나 비슷한 도메인의 앱을 살펴보는 등의 상황에선 위처럼 명확히 문제나 목표를 정의한 후 레퍼런스를 찾기 시작하는 절차가 적합하지 않을 수 있습니다. 기능 전반을 살펴보는 등의 행동을 통해 우리 팀과 경쟁사가 바라보는 방향이나 해결하려는 문제의 차이를 비교하는 등의 과정을 거쳐 인사이트를 얻을 수 있으니까요.

(2) 어떤 레퍼런스를 탐색하면 좋을지?

도메인/ 기능명을 기준으로? (X) 해결해야 하는 문제, 달성해야 하는 목표를 기준으로 (O)

저도 최근에 배운 점인데요, 전혀 다른 도메인의 레퍼런스가 좋은 솔루션이 되는 경우가 많았던 것 같습니다.

예를 들어 최근 만들고 있는 앱테크 서비스의 프로필 기획 과정에서는 프로필 질문 응답율 100% 달성을 유도하기 위한 레퍼런스로 배달의 민족 장바구니 UI나 최소주문 금액 관련 UI가 활용되었습니다.

앱테크나 프로필 등 키워드는 잊고 '달성을 유도하는 특정 수준이나 %가 있고 & 현재 progress 정도를 보여주면서도 & 달성 시 이득을 보여주는 레퍼런스가 뭐가 있을까?' 라는 생각으로 레퍼런스를 찾아 보다보니 'n만원 이상 주문시 배달팁 무료!' 문구와 함께 현재 주문액을 Progress bar 느낌으로 보여주는 배달의 민족의 예시가 떠올랐습니다.

만약 "앱테크"라는 도메인과 "프로필"이라는 기능명에만 갇혀 다양한 앱테크 서비스들 내에서 프로필이나 프로필 설문에 대한 레퍼런스만 뒤져봤다면 별 소득이 없었을 것 같습니다.

'음 프로필용 설문은 그냥 강제로 다 시켜야 하나?' '일부분만 응답을 제출하는 곳도 없고, 완성율을 보여주는 곳이 없네. 우리만 이상한 것을 만드는걸까?'등의 고민으로 이어지거나 레퍼런스를 아무리 열심히 예쁘게 정리했다고 해도 정작 필요한 레퍼런스는 앱테크나 프로필 보다는 '달성율, 달성유도' 등과 관련 있기 때문에 무의미한 작업이 되었을지 모릅니다.

(3) 적절한 레퍼런스들을 찾았다면 우리 서비스에 어떻게 녹여내면 좋을 지?

1. 해결하려는 문제에 맞는 적절한 레퍼런스 후보를 찾았다면 이제는 우리 서비스에 적용하기 위해 아래 내용 등에 대해 생각해봅니다.

- 레퍼런스의 출처가 되는 서비스와 우리 서비스의 고객층 차이

- 말투 컬러 등 톤 앤 매너의 차이

- 해당 화면을 마주하는 상황의 차이

- 공략하는 니즈와 페인포인트의 차이 등..

2. 이를 바탕으로 레퍼런스가 되는 기능의 수많은 디테일이나 동작방식 등 중에 우리 서비스에 활용할 수 있는 부분을 추립니다.

3. 이후 다시 레퍼런스 탐색 전에 정의한 "해결해야 하는 문제 / 달성해야 하는 목표 / 전달해야 하는 메시지 / 유도해야 하는 행동 / 요구사항" 등에 대한 부분으로 돌아가서 추가되어야 하는 부분이 뭔지 파악해 필요한 내용을 추가하고 디테일을 가다듬습니다.

이런 과정을 거치면 레퍼런스를 활용해 적절한 솔루션을 효율적으로 찾을 수 있다고 생각합니다.

마무리

돌고 돌아 레퍼런스는 도구이자 수단이다! 라는 내용으로 글을 정리할 수 있는 것 같습니다.

공구함에서 공구를 찾기 전에 어떤 작업에 필요한지, 작업 환경은 어떤지, 작업자는 누구인지, 얼마나 힘이 필요한지 등을 생각한 뒤 적절한 도구를 찾는 것처럼 레퍼런스를 평소에 탐색하거나 업무 과정에서 활용할 때도 "왜? 언제? 누가?" 등 맥락에 대한 질문을 던져 충분히 사전 정보를 수집하면 더 큰 임팩트를 만들어낼 수 있다고 생각합니다.