UI/UX 디자인 레퍼런스 사이트

디자인은 끊임없이 변화하고 발전하는 분야입니다. 디자이너는 최신 트렌드나 기술을 파악하거나, 특정 스타일이나 기능을 구현하기 위해 레퍼런스 서비스의 도움을 받습니다. UI 엘리먼트, UX를 간접 경험할 수 있는 플로우, HTML/CSS/JS를 사용한 스타일 구현 방법 등 다양한 종류의 레퍼런스 서비스를 소개하도록 하겠습니다. 

 

mobbin : UX/UI 레퍼런스 

https://mobbin.com/

Mobbin — UI & UX design inspiration for mobile & web apps

 

mobbin은 모바일앱(안드로이드/iOS), 웹사이트의 트렌드와 아이디어를 제공합니다. 여러 레퍼런스 서비스 중 mobbin이 좋은 점은 모든 레퍼런스가 실제 서비스되고 있다는 점입니다. 실제 서비스되고 있다는 것은 실현 가능성이 있는 디자인이라는 것을 의미합니다. 기술적 한계를 검증하지 않아도 된다는 뜻이기도 합니다. 같은 문제를 어떻게 다양하게 해결했는지도 확인할 수 있지만, 대다수의 사람들에게 익숙한 UX가 무엇인지도 파악하기 쉽습니다.

그리고 다른 서비스의 UX를 확인하기 위해서는 그 서비스를 실제로 이용해 보는 것이 좋습니다. 하지만 조사를 위해서 그 수많은 서비스에 가입해서 실제 사용하기란 어려운 일입니다. 이럴 때 mobbin에서 스크린을 검색하거나, Flows 탭을 통해 프로토타입의 형태로 경험해 볼 수 있다는 것은 큰 장점입니다. Flows에서는 Figma로 복사해서 가져오는 것도 가능합니다. 단, 이미지의 형태로 피그마에 가져옵니다. 단점은 무료 플랜에서 제공되는 정보의 양이 적다는 점입니다. 

• 구독료 있음 (연간 결제 시 월 14,000원)
• Screen, UI Element, Flows 형태로 정보 제공 
• Figma로 Flows의 화면을 복사하는 기능 제공
• 앱(안드로이드, iOS), 웹 레퍼런스 모두 제공
• 체크박스, 검색창 등 UI 엘리먼트의 이름으로도 검색 가능하지만 Searching&Finding과 같이 흐름을 검색하는 것도 가능

 

Dribbble : 디자이너들의 포트폴리오 

https://dribbble.com/

Dribbble - Discover the World’s Top Designers & Creative Professionals

dribbble도 참 오래된 서비스입니다. 제가 꼬꼬마 디자이너 시절일때부터 많이 찾던 서비스입니다. 

dribbble는 디자이너들의 포트폴리오 SNS 입니다. 전세계의 수많은 디자이너들의 작업물을 살펴볼 수 있습니다. 디자이너를 고용하기 위해 포트폴리오를 살펴보거나, 구직활동을 위해 본인의 포트폴리오를 관리하는 용도로도 활용이 됩니다.

실제로 상용화된 서비스가 아닌 경우가 많아서 구현이 가능한 디자인인지, UX측면에서 과연 훌륭한지 검증할 것이 많지만 실험적인 디자인을 통해 영감을 받기에 좋습니다. 폰트, 로고, UX/UI, 브랜딩, 프린트 등 다양한 디자인 카테고리를 제공합니다. 

 

Behance : 디자이너들의 포트폴리오와 수익 창출의 창구

https://www.behance.net/

Search Projects :: Photos, videos, logos, illustrations and branding :: Behance

Behance도 dribbble과 성격은 비슷합니다. 디자이너별로 검색이 가능하고, 다양한 분야의 디자인을 찾아보기 좋습니다. Behance는 어도비와 연계되어 있다는 점이 특징입니다. Adobe Stock과 통합되어 있어 디자이너의 작업물을 구매하는 것도 가능합니다. 디자이너는 자신의 자산을 업로드할 때 라이선스와 판매 금액을 설정할 수 있습니다. 

 

UIverse : UI 컴포넌트 레퍼런스, 구현된 디자인

https://uiverse.io/

uiverse는 'universe'라는 단어에 영감을 받아 이름이 붙여진 것으로 보입니다. 다양한 UI 컴포넌트를 찾아볼 수 있습니다. 

버튼, 체크박스, 라디오, input 등 다양한 컴포넌트를 이미 구현이 된 상태로 제공을 합니다. 버튼의 :hover, :focus 등 HTML, CSS, JS를 이용해 만들어진 레퍼런스라 인터랙션까지도 볼 수 있다는 점이 큰 장점입니다. 소스코드 형태로 가져가는 것이 가능하기 때문에 활용도가 높습니다. 

 

Figma Component Library : Figma 컴포넌트 레퍼런스

https://www.figcomponents.com/

Free Figma Component Library

피그마 컴포넌트 레퍼런스 사이트 입니다. 피그마로 편집 가능한 상태의 디자인을 가져올 수 있습니다. 메뉴, 사이드바, 테이블 등 컴포넌트 단위로 구분이 되어 있어 자료를 찾기에도 편리합니다.

 

Tailbits : TailwindCSS 컴포넌트 라이브러리

https://www.tailbits.com/

Tailwind Component Library

figmacomponents.com 웹사이트에 들어가보면 가장 좌측에 아이콘 형태로 다양한 라이브러리를 제공하는 것을 알 수 있습니다. Tailbits도 그 중 하나의 서비스입니다. 이 곳은 다양한 디자인을 tailwindcss로 구현을 해서 제공한다는 점이 장점입니다. 썸네일 형태의 목록에서 바로 코드 복사가 가능합니다.