UI/UX 디자인 초보를 위한 레퍼런스 사이트 총정리
디자인 아이디어 막힐 때, 꼭 북마크해야 할 레퍼런스 사이트 5곳
안녕하세요! 신입 디자이너 비니입니다~
신입 디자이너라면 누구나 한 번쯤 겪는 순간이 있어요.
화면 앞에 앉아 마우스를 잡았는데,
머릿속이 하얘지고 아무 아이디어도 떠오르지 않는 순간이죠...
저 역시 처음 업무를 시작할 때,
무작정 빈 화면을 응시하며 "대체 어디서부터 시작해야 하지?"라는 고민을 수없이 했답니다.
이럴 때 도움이 되는 건 바로 '레퍼런스 사이트'에요!
이번 글에서는 제가 실제로 자주 쓰고, 초보자도 쉽게 접근할 수 있는
디자인 레퍼런스 사이트 5곳을 소개해 드릴게요!
(순서는 순위와 무관합니다..!)
1. Behance – 글로벌 디자이너들의 포트폴리오 성지
Behance는 전 세계 디자이너들의 포트폴리오가 모여 있는 플랫폼이에요!
UI/UX뿐 아니라 그래픽, 모션, 브랜딩 등 다양한 분야의 작업물을 볼 수 있죠.
제가 Behance를 즐겨 찾는 이유는,
단순히 작품을 보는 데 그치지 않고 작업 과정까지 확인할 수 있다는 점이에요.
어떤 툴을 사용했고 어떤 단계를 거쳤는지를 보면, 마치 선배 디자이너의 노트를 훔쳐보는 기분도 들죠.
활용 팁!
검색창에 "App design"이나 "UI kit"을 입력해 보세요.
바로 실무에 참고할 수 있는 자료가 쏟아집니다.
2. Dribbble – 트렌디한 UI/UX 영감 찾기
Dribbble은 최신 UI 스타일, 앱 화면 디자인, 웹 레이아웃을 빠르게 파악할 수 있는 트렌드 쇼케이스에요.
저는 프로젝트 시작 전,
Dribbble을 훑어보면서 최근 많이 쓰이는 컬러 팔레트나 버튼 스타일을 감 잡곤 했어요.
특히 '북마크 기능'을 활용하면 내가 좋아하는 디자인만 따로 모아둘 수 있어 유용하답니다!
활용 팁!
마음에 드는 디자인을 저장해두면, 나만의 미니 레퍼런스 라이브러리를 만들 수 있어요!
3. Awwwards – 전 세계 수상작으로 보는 웹디자인 교과서
웹디자인 분야에서 가장 권위 있는 어워드 사이트인데요,
매일 전 세계에서 출품된 웹사이트를 심사해 수상작을 공개해, 그 자체가 교과서 역할을 한답니다!
저는 포트폴리오 웹사이트를 만들 때, Awwwards 수상작을 하나하나 뜯어보며 배웠어요.
특히 스크롤 연출이나 인터랙션 방식을 참고하면,
"웹사이트도 이렇게 재미있게 표현할 수 있구나"라는 영감을 얻게 되죠.
활용 팁!
'Site of the Day'를 즐겨찾기해 두면 최신 웹디자인 흐름을 매일 빠르게 확인할 수 있어요!
4. Mobbin – 실무 UI/UX 패턴 참고 사이트
Mobbin은 실무 디자이너들이 가장 많이 쓰는 UI/UX 레퍼런스 아카이브에요.
글로벌 앱들의 실제 화면을 캡처해둔 자료라서,
특정 상황에서 다른 앱은 어떻게 디자인했는지를 바로 확인할 수 있답니다!
예를 들어 "넷플릭스는 회원가입을 어떻게 구성했을까?" 하고 검색하면,
실제 플로우를 단계별로 볼 수 있어요.
저는 회원가입·결제 UX를 설계할 때 자주 참고했어요.
활용 팁!
무료 버전도 충분히 유용하지만, 프로젝트가 많아지면 유료 플랜을 고려해보세요!
5. Pinterest – 무궁무진한 무드보드 아이디어
Pinterest는 무드보드를 만들 때 가장 유용한 플랫폼이에요.
색감, 레이아웃, 타이포그래피 등 다양한 이미지를 모아 프로젝트 초기 방향성을 잡을 때 딱이죠.
저는 종종 "UI color palette"라는 키워드로 검색해 컬러 감각을 키웠어요.
마음에 드는 이미지를 보드에 모아두면, 나만의 '아이디어 지도'가 완성된답니다!
활용 팁!
프로젝트별 보드를 만들어두면 팀과 공유하기도 쉬워요.
정리 & 활용 팁
디자인이 막막할 때는 혼자 머리 싸매는 것보다,
잘 정리된 레퍼런스를 참고하는 게 훨씬 효율적이라고 생각해요.
아이디어가 필요할 때 → Behance, Dribbble
최신 트렌드 확인 → Awwwards
실무 UX 패턴 참고 → Mobbin
무드보드 정리 → Pinterest
마무리하며
디자인은 혼자서 모든 걸 떠올리는 게 아니라,
잘 정리된 자료에서 영감을 얻고 나만의 해석을 더하는 과정이라고 생각해요.
저 역시 이 다섯 가지 사이트를 꾸준히 활용하면서, '빈 화면 공포증'에서 벗어날 수 있었어요.
하지만 영감을 얻는 것과 그것을 실제 화면에 구현하는 건 또 다른 문제겠죠!
저도 컬러 팔레트와 UI패턴은 레퍼런스 사이트를 통해 쉽게 가져올 수 있었지만,
실제로 앱이나 웹 구조 안에 녹여내는 과정에서 난관에 부딪히는 경우가 참 만있는데요,
이럴 때 똑똑한개발자로부터 많은 도움을 받았어요!
프로토타입 단계에서 인터렉션 구현이 막혔을 때,
퍼블리싱 단계에서 반응형 문제가 발생했을 때 협업을 진행했는데요,
똑똑한개발자는 AI 기반 자동화 도구 활용, UI 시안 구현, 웹·앱 퍼블리싱 최적화경험을 바탕으로
제 아이디어를 실제 서비스 수준까지 안정화해줬습니다.
레퍼런스 사이트를 활용해 출발하고, 똑개팀과의 협업을 통해 현실화하면서
수월하게 프로젝트를 완성할 수 있었어요~ 정말 감사했답니다!ㅎㅎ
비슷한 고민을 하고 계신 분들을 위해서 링크도 남겨드릴게요!
