[아티클 스터디] UX/UI 레퍼런스 200% 활용법

UXUI 아티클  스터디

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

 

 

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

 

(1) 캡쳐 화면이 포함된 다양한 사례들을 확인할 수 있는 레퍼런스

-  UPA : 국내 앱서비스, 사진 캡쳐, 동영상 캡쳐와 함께 설명 https://diby.io/upa
-  국내 모바일 서비스 레퍼런스  https://wwit.design 

- 디자인어스 레퍼런스 모음집 (서비스/스크린으로)  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
- 좋아하는 것, 재밌어 보이는 것부터 시작해보자

(1) 디테일한 문구, 디자인, 인터렉션 등을 보며 '오 이런 것도 있네! 같은 생각하기

(2) 질문 던지기 (이 기능은 왜 만든 것일까? 왜 A가 아닌 B의 방식을 선택했을까? 등)
생각범위나 학습 과정이 뻗쳐나가도록 질문에 꼬리를 물면서 다양한 생각하기

(3) 목적과 필요에 맞는 레퍼런스 연결짓고, 활용하기

 

 

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

 

(1) 레퍼런스는 언제?
- 초반부터 바로 탐색하지 않고
  해결해야 하는 문제, 필요한 이유, 전달하는 메세지 등이 명확히 정의된 이후에 탐색

(2) 어떤 레퍼런스를?
- 도메인이나 기능명을 기준으로 하지 않고,
  해결해야하는 문제, 달성해하는 목표를 기준으로 할 것
- 전혀 다른 도메인의 레퍼런스가 좋은 솔루션이 될 수 있음

(3) 레퍼런스를 우리 서비스에 어떻게 녹여낼까?
- 레퍼런스의 서비스와 우리 서비스의 고객층 차이
- 말투, 컬러 등 톤 앤 매너의 차이 
- 해당 화면을 마주하는 상황의 차이
- 공략하는 니즈와 페인 포인트의 차이 등.. 

이를 바탕으로 수많은 디테일이나 동작 방식 등 우리 서비스에 활용할 수 있는 부분 추려내기

 

좋았던 점 : 다양한 레퍼런스 사이트를 알 수 있어서 좋았다.

아쉬운 점 : 레퍼런스를 활용한 방법들을 이미지와 함께 보여주면
이해하기가 더 좋을 것 같다.

전혀 다른 도메인이 좋은 솔루션이 될 수 있다는 것이 신선했다.
항상 도메인이나 기능명으로만 찾았는데, 레퍼런스 활용하기 전에 
해결해야하는 문제가 무엇인지 목적, 목표를 먼저 정의하는 것이
선행되어야 한다는 것을 알 수 있었다.

 

 

출처

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