디자이너 필수템! 디자인 레퍼런스 사이트 7곳 총정리

처음 플랫폼을 기획하거나 디자인할때 레이아웃을 어떻게 잡아야할지, 어떤 형태가 사용자에게 적합한지 정리하기가 힘든데요.

레퍼런스를 많이들 참고하고자할 때 유용한 사이트를 공유드립니다.

 

안녕하세요~ 오늘은 제가 진짜 자주 찾는, 그리고 디자이너라면 무조건 알아둬야 하는 디자인 레퍼런스 사이트들을 소개하려구요!

솔직히 디자인 작업하다 보면 "이 버튼은 어떻게 배치해야 하지?, "푸시알림 다들 어떻게 보여주지?" 이런 고민이 무조건 생기죠 ㅎㅎ

그럴 때 그냥 혼자 끙끙대지 말고, 잘 정리된 레퍼런스 사이트만 있으면 해결되는 경우가 많더라구요!

 

저도 예전에 자료 하나 찾으려고 구글링만 몇 시간 했는데, 지금은 사이트 몇 군데만 찜해놓고 필요할 때마다 보니까 작업 속도도 훨씬 빨라지고, 결과물 퀄리티도 눈에 띄게 달라졌어요.

이번에 소개할 사이트들은 단순히 예쁜 UI보는 것에서 끝나는 게 아니라, 컴포넌트나 패턴까지 꼼꼼하게 참고할 수 있어서 디자이너뿐마 아니라 퍼블리셔, 프론트 개발자분들도 도움 많이 되실 거에요.

 

오늘은 제가 직접 써보고 괜찮았던 디자인 레퍼런스 사이트 7곳을 싹 정리해서 공유해보겠습니다!

 

1. 디자이너스 (Designus)

https://ko.designus.design

디자이너스

이 사이트는 진짜 강추!! 이미 많은 사람들이 쓰고 있는 앱,시스템 등의 UI를 쫙 모아놔서, "아, 요즘 서비스들은 이렇게 쓰는구나~" 한눈에 감 잡기 좋아요. 특히 버튼, 카드, 탭 같은 컴포넌트별 정리가 잘 되어 있어서 필요한 부분만 쏙쏙 참고하기 굿, 색상이나 폰트 조합도 참고하기 좋고, 딱 필요한 순간에 꺼내 쓰는 보물창고 같더라구요.

 

2. 윗(WWIT)

https://wwit.design

What Was IT

모바일 앱 위주로 정리된 사이트인데, 앱 디자인 할때는 이만한게 없습니다. 카테고리도 깔끔하게 나눠져 있어서 특정 기능별 패턴 찾기에도 편리했구요. 해외 에서 유명한 Mobbin(모빈)사이트랑 비슷한데, 한국어로도 잘 정리되어 있어서 접근하기 편리합니다. 저처럼 앱 UI를 자주 만지는 분들에게 완전 꿀템 사이트!

해외 모빈 사이트 : https://mobbin.com

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

 

3. UI Bowl

https://uibowl.io/

https://uibowl.io/

이 사이트는 조금 특별합니다. 단순히 화면만 보는게 아니라,푸시알림이나 전체 서비스 플로우까지 같이 볼 수 있다는 점! 요즘 앱들 보면 알림까지도 디자인이 진짜 중요하잖아요? 저는 UI Bowl보면서 알림 문구 스타일도 참고한 적 많아요.ㅎㅎ 디자인뿐 아니라 서비스 패턴 분석할 때도 유용한 사이트입니다.

 

4. GDWEB

https://www.gdweb.co.kr/main/

http://www.gdweb.co.kr

한국 웹디자인 레퍼런스 사이트 중에선 거의 대표격 아닐까 싶어요. 웹사이트, 웹앱, 모바일 앱까지 골고루 다루고 있어서 참고 범위가 넓어요.

특히 국내 웹 디자인 트렌드를 알고 싶을 땐 무조건 여기! 디자이너뿐만 아니라 기획자 분들도 많이 보시더라구요.

 

5.앤트 디자인(Ant Design)

https://ant.design

Ant Design - The world's second most popular React UI framework

이건 사실 디자이너 보다 퍼블리셔나 프론트 개발자 분들에게 더 유용할 수 있어요. 페이지네이션, 드롭다운, 모달 같은 컴포넌트가 깔끔하게 정리되어 있어서 실무에서 바로 가져다 쓰기 좋습니다. 저도 가끔 참고하면서 "아 이렇게 정리하면 되겠구나"하고 배워가요. 프론트 개발자분들이라면 필수 북마크각!

 

6.IBM Carbon Design System

https://www.figma.com/ko-kr/community/file/1157761560874207208/v11-carbon-design-system

이 사이트는 피그마로 바로 열 수 있다는 것이 포인트! 컴포넌트 하나하나 잘 만들어져 있어서, UI키트처럼 가져다 쓸 수 있어요. 특히 큰 프로젝트할 때 규칙 잡기가 힘든데, 이 레퍼런스 보면 구조나 컬러 시스템까지 참고 가능해서 편하더라구요. IBM이 만든 만큼 체계적이라 믿고 참고할 만 해요.

 

7. UX Pattern Archive

https://upa.userspoon.com

세상의 모든 UX 패턴 | UPA

마지막으로 UX에 특화된 사이트! 기능별로 정리되어 있어서 원하는 부분만 빠르게 확인 가능해요. 예를 들어 "로그인 화면은 보통 어떤 플로우로 되어 있지?"싶을 때 바로 찾아볼 수 있거든요. UI보다는 UX적인 흐름을 참고할 때 유용하고, 특히 신입 디자이너 분들한테는 개념 정리하기 딱 좋아요!

 

자주 궁금해하는 부분들

Q1. 디자인 레퍼런스 사이트는 무료인가요?

A1. 대부분은 무료로 볼 수 있지만, 일부 해외 사이트는 더 많은 자료를 보려면 유료 구독이 필요해요. 그래도 제가 소개한 사이트들은 무료로도 충분히 참고할 수 있습니다!

 

Q2. 디자이너 말고 기획자나 개발자도 쓸 수 있나요?

A2. 당연합니다. 오히려 컴포넌트 위주로 정리된 사이트는 개발자 분들이 더 자주 찾으실걸요. 화면 플로우나 UX패턴은 기획자 분들도 참고하기 좋아요.

 

Q3. 어떤 사이트부터 보는 게 좋을까요?

A3. 처음이라면 디자이너스랑 GDWEB부터 보는 걸 추천! 가장 직관적이고 자료도 많아서 감 잡기 딱 좋아요. 그 다음에 세부적으로 필요한 부분이 있으면 UI Blow이나 UX Pattern Archive같은 사이트를 같이 참고하면 좋아요.

 

마무리 대신

 

디자인 작업할 때 레퍼런스 없으면 막막할 때 많죠. 저도 예전에 매번 새로 그리려다 힘 빠지곤 했는데, 요즘은 필요한 순간마다 이런 사이트들 참고하면서 훨씬 빠르고 깔끔하게 마무리하곤 해요.

 

혹시 여러분은 어떤 사이트를 제일 많이 쓰시나요? 아니면 제가 좋친 꿀사이트 있으면 댓글로 알려주세용~ 같이 공유하면 더 많은 레퍼런스를 바탕으로 기획할 수 있으니까요!! ㅎㅎ