6. UX시작하기(3)-화면설계를 위한 레퍼런스
화면설계를 위한 아이디어를 얻을 수 있는 사이트 소개
라이센스 없는 직장인의 숙명, 슬프게도 우리는 끊임없이 공부해야만 한다.
UX 디자이너로서 실무하면서 참고하기 좋은 정보와 '요즘 OO에서 새로 나온 서비스가 있다더라~'는 대화에 숟가락 얹기 위한 최소한의 정보 소스들을 모아 보았다.
먼저 UX디자이너로서 첫 발을 떼기 위한 화면 설계를 위한 좋은 레퍼런스들을 소개한다.
1. 화면설계를 위한 UI 컴포넌트와 인터랙션
1) Pttrns - https://www.pttrns.com/
모바일 앱들의 화면을 확인할 수 있는 사이트. 참고하기 베끼기 좋은 깔끔한 UI의 최신 앱들의 화면 스크린샷이 주기적으로 업데이트된다.
몇 년 전까지는 무료였는데 지금은 Premium 멤버십을 구독해야만 전부 다 볼 수 있다. (월 $4.99 / 년 $39.99)
2) Mobbin- https://mobbin.design
위의 'Pttrns'와 비슷한 UI 아카이브 서비스. 무료이지만 Pttrns보다 스크린샷의 수는 적다. 개인이 관리해서인지 업데이트 주기가 긴 편이지만 그래도 꽤 엄선된 화면들이 큐레이션되므로 추천.
3) Pageflows - https://pageflows.com
시나리오 문서(a.k.a. 스토리보드) 만들 때 참고하기 좋은 서비스. 현재 출시된 웹/앱 서비스들의 화면들을 복제해온 것은 지금까지의 서비스와 비슷한데, 이를 영상으로 이어붙여서 하나의 Flow로 묶어 보여준다. 무료로는 일부만 볼 수 있고 전부 다 보려면 결제해야 한다. (3개월 $39 / 1년 $99)
4) Collect UI - http://collectui.com
실제 출시된 서비스의 UI가 아닌, Dribbble 등에 올라오는 디자이너들의 작업물들을 아카이빙해놓은 사이트. 모션이 있는 사례들이 많아서 인터랙션을 구상하는 데 참고하기 좋다.
특정한 기능(예. Sign Up) 단위로 카테고라이징을 해 놓았기 때문에 Dribbble 등의 포트폴리오 사이트에서 보는 것보다 훨씬 더 간편하게 필요한 정보를 모아 볼 수 있다.
5) 그날그날 디자인 - https://blog.naver.com/appifystudio
Collect UI와 비슷하게 모션 위주의 디자인 작업물들이 아카이빙된 사이트. 서비스에 위트있는 인터랙션을 넣고자 할 때 참고하기 좋다.
6) UI Movement - https://uimovement.com/
Collect UI와 비슷한 디자인 작업물 아카이빙.
7) Awwwards - https://www.awwwards.com/
PC 웹 위주의 레퍼런스 사이트. 여기 소개되는 사이트들은 실제로 운영중인 사이트이기 때문에 직접 해당 사이트로 가서 만져볼 수 있다는 것이 큰 장점이다. 그러나 올라오는 사례들은 대체로 화려한 인터랙션이 구현된 마이크로사이트가 많아서 정보 구조나 기능적인 부분을 참고하기보다는 인터랙션과 디자인을 참고하기에 적합하다.
분량 조절 실패로 인해 UX리서치 관련 참고 자료와 포트폴리오, 디자인 블로그 등 혼자 공부하기 좋은 소스들을 계속 연재할 예정.
