UX/UI 디자인 레퍼런스 사이트 추천｜실무 디자이너가 매일 보는 무료 사이트 9곳

UX/UI 디자인 레퍼런스 사이트 추천｜실무 디자이너가 매일 보는 무료 사이트 9곳

UX/UI 디자인 레퍼런스 사이트를 추천해 달라는 질문이 커뮤니티에 반복적으로 올라옵니다.
비싼 강의보다 좋은 레퍼런스 사이트 하나가 실력을 더 빠르게 올려 주기 때문입니다.

실무 디자이너들은 아이디어가 막힐 때마다 검증된 사이트 몇 곳을 돌아봅니다.
모션 타이밍, UI 패턴, AB 테스트 결과, 앱 스토어 스크린샷까지 카테고리별로 나눠 매일 확인하는 것이 루틴입니다.

실제로 현업에서 쓰이는 사이트와 유행처럼 퍼지는 사이트는 다릅니다.

지금 소개하는 9곳은 실무 디자이너들이 검색 없이 바로 열어보는 북마크 목록입니다.

카테고리별로 정리했으니 지금 바로 폴더를 만들고 저장하세요.

• 2026년 UX/UI 디자인 트렌드 10가지: XR부터 바이브까지
• 2026 디자인 영감 사이트 추천 TOP 8
• 앱 시안 10분 완성 방법 (피그마 없이 클로드 디자인 리얼 후기)

UX/UI 디자인 레퍼런스 사이트가 실력을 올리는 이유

툴 실력보다 보는 눈이 먼저입니다

Figma를 능숙하게 다뤄도 결과물이 어색하게 느껴지는 이유는 하나입니다. 좋은 디자인을 충분히 보지 않았기 때문입니다.

실무 디자이너들이 레퍼런스 수집을 습관처럼 반복하는 이유가 여기에 있습니다.

모션의 타이밍, 컴포넌트 패턴, AB 테스트 결과까지 분석하며 보는 것이 진짜 공부입니다. 아래 9곳은 그 기준으로 엄선한 무료 UX/UI 디자인 레퍼런스 사이트입니다.

실무 디자이너가 추천하는 무료 UX/UI 디자인 레퍼런스 사이트 9곳

1. 모션 UX/UI 레퍼런스 사이트: 60fps.design

60fps.design은 고품질 모션 UI 레퍼런스를 모아놓은 무료 사이트입니다. 60프레임의 부드러운 인터랙션 예시들을 카테고리별로 확인할 수 있습니다.

모션 디자인은 감각만으로 배우기 어려운 영역입니다. 전환 애니메이션의 이징, 딜레이 타이밍, 스크롤 인터랙션 패턴을 눈으로 직접 보면서 익힐 수 있습니다.

Figma 프로토타입 작업 전 이 사이트에서 레퍼런스를 먼저 확인하십시오.

👉 60fps.design 바로가기

60fps.design 활용 팁

단순히 “예쁘다”로 끝내지 마십시오. 왜 이 타이밍인지, 왜 이 방향으로 움직이는지를 분석하며 보는 습관을 들이면 모션 감각이 빠르게 늡니다.

2. UX/UI 패턴 레퍼런스 사이트: catalogue.projectsbyif.com

catalogue.projectsbyif.com은 데이터 수집·공유·활용과 관련된 UX/UI 패턴을 체계적으로 정리한 카탈로그입니다. ProjectsByIF 리서치 그룹이 운영합니다.

개인정보 동의, 설정 화면, 데이터 공유 플로우 등 실제 서비스에서 반복적으로 등장하는 UX 패턴을 카테고리별로 분류해 제공합니다.

스크린샷만 나열하는 게 아니라 패턴의 목적과 맥락까지 설명하기 때문에 UX 기획 공부에도 효과적입니다.

👉 catalogue.projectsbyif.com 바로가기

catalogue.projectsbyif.com 활용 팁

특정 플로우 설계에 막힐 때 이 카탈로그에서 비슷한 사례를 먼저 찾아보십시오. 이미 검증된 UX/UI 패턴을 참고하면 설계 시간을 크게 줄일 수 있습니다.

3. AB 테스트 UX/UI 레퍼런스 사이트: abtest.design

abtest.design은 실제 서비스에서 진행된 AB 테스트 결과를 UX/UI 디자인 관점에서 정리한 무료 사이트입니다.

버튼 색상, CTA 문구, 레이아웃 변경이 전환율에 어떤 영향을 줬는지 실제 데이터로 확인할 수 있습니다.

디자인 결정을 직관이 아닌 데이터로 뒷받침하는 사고 방식을 기르고 싶다면 반드시 북마크해야 할 UX/UI 레퍼런스 사이트입니다.

UX 디자이너나 프로덕트 디자이너를 목표로 한다면 특히 유용합니다.

👉 abtest.design 바로가기

abtest.design 활용 팁

결과만 보지 말고 가설과 설계 방식을 함께 분석하십시오. 같은 변수도 맥락에 따라 결과가 달라지기 때문입니다.

4. UX/UI 영감 수집 레퍼런스 사이트: designspells.com

designspells.com은 실제 출시된 프로덕트의 디테일한 UX/UI 순간들을 큐레이션하는 무료 사이트입니다. 마이크로 인터랙션, 마이크로카피, 빈 상태(Empty State) 화면 등 현업에서 바로 참고할 수 있는 레퍼런스가 풍부합니다.

화려한 개인 포트폴리오 작품이 아닌 실제 서비스의 UX/UI라는 점이 차별점입니다. UX/UI 디자인 레퍼런스 사이트 중 초보자에게 가장 먼저 추천하는 곳입니다.

👉 designspells.com 바로가기

designspells.com 활용 팁

마음에 드는 사례는 Figma에서 직접 재현해 보십시오. 보는 것과 만드는 것의 차이가 실력 격차를 만듭니다.

5. UX 분석 레퍼런스 사이트: uxsnaps.com

uxsnaps.com은 다양한 앱과 웹 서비스의 UX 흐름을 스냅샷 형태로 제공하는 무료 사이트입니다.

온보딩, 결제, 회원가입, 설정 등 주요 UX 시나리오별로 실제 서비스의 화면 흐름을 한눈에 확인할 수 있습니다.

경쟁 서비스 UX 벤치마킹을 할 때 직접 앱을 설치하고 캡처하는 수고를 덜 수 있습니다.

1인 디자이너나 스타트업 환경에서 특히 시간을 절약해 주는 UX 레퍼런스 사이트입니다.

👉 uxsnaps.com 바로가기

uxsnaps.com 활용 팁

같은 기능을 여러 서비스가 어떻게 다르게 풀어냈는지 비교하며 보십시오. UX 패턴의 차이에서 인사이트가 나옵니다.

6. UI 컴포넌트 레퍼런스 사이트: uiplaybook.dev

uiplaybook.dev는 버튼, 폼, 카드, 모달 등 주요 UI 컴포넌트를 올바르게 설계하는 방법을 정리한 무료 가이드 사이트입니다.

각 컴포넌트의 동작 규칙과 설계 원칙을 설명하기 때문에 디자인 시스템 구축에 직접 참고할 수 있습니다.

접근성(Accessibility) 기준도 포함되어 있어 개발자와 협업 시 명확한 기준을 제시하고 싶은 UX/UI 디자이너에게 특히 유용합니다.

👉 uiplaybook.dev 바로가기

uiplaybook.dev 활용 팁

“이 규칙이 없으면 어떤 UX 문제가 생기는가”를 생각하며 보십시오. 원칙의 이유를 이해할수록 응용력이 높아집니다.

컴포넌트 원칙을 익혔다면 실제 앱 시안 제작에 바로 적용해 볼 수 있습니다. 피그마 없이 10분 만에 앱 시안을 완성하는 방법도 함께 참고해 보십시오.

👉 앱 시안 10분 완성 방법 (피그마 없이 클로드 디자인 리얼 후기)

7. 앱 스토어 스크린샷 레퍼런스 사이트: asoinspo.com

asoinspo.com은 App Store와 Google Play에서 실제로 사용되는 앱 스토어 스크린샷을 카테고리별로 모아볼 수 있는 무료 사이트입니다.

앱 스토어 스크린샷은 다운로드 전환율에 직결되는 UX/UI 디자인 영역이지만 체계적인 레퍼런스를 찾기 어렵습니다.

업종별, 스타일별 필터링이 가능해 앱 마케팅 디자인 작업에 바로 활용할 수 있습니다.

👉 asoinspo.com 바로가기

asoinspo.com 활용 팁

경쟁 앱의 스크린샷 스타일을 먼저 파악한 뒤 차별화 포인트를 찾으십시오. 카피 문구와 색상만 바꿔도 전혀 다른 분위기가 납니다.

8. 로고 디자인 레퍼런스 사이트: logoinspo.com

logoinspo.com은 전 세계 브랜드 로고를 스타일, 업종, 색상별로 정리한 무료 레퍼런스 사이트입니다.

워드마크, 레터마크, 심볼 등 유형별로 분류되어 있어 원하는 방향의 로고 레퍼런스를 빠르게 찾을 수 있습니다.

로고 디자인은 취향이 아닌 전략적 판단이 필요한 작업입니다. 같은 업종에서 어떤 스타일과 색상이 주류인지 파악하는 것이 출발점입니다.

👉 logoinspo.com 바로가기

logoinspo.com 활용 팁

예쁜 것만 모으지 말고 왜 이 업종에서 이 스타일이 통하는지 분석 메모를 함께 남겨 두십시오.

9. 웹디자인 UX/UI 레퍼런스 사이트: webinspoo.com

webinspoo.com은 랜딩 페이지, 포트폴리오, SaaS 프로덕트 페이지 등 다양한 유형의 웹사이트 UX/UI 디자인을 큐레이션하는 무료 사이트입니다.

Awwwards 같은 대형 갤러리보다 실용적인 수준의 레퍼런스가 많아 현업 프로젝트에 바로 적용하기 좋습니다.

👉 webinspoo.com 바로가기

webinspoo.com 활용 팁

비주얼만 보지 말고 정보 구조(IA)와 UX 섹션 구성 순서를 함께 분석하십시오. 콘텐츠 배치 순서가 전환율을 크게 좌우합니다.

UX/UI 디자인 레퍼런스 사이트를 실력으로 연결하는 3가지 방법

보는 것에서 만드는 것으로 넘어가십시오

레퍼런스 사이트를 “보는 것”으로만 활용하면 감각은 늘어도 손이 따라가지 않습니다. 마음에 드는 UX/UI 레퍼런스는 Figma에서 직접 재현해 보십시오.

완성도 있게 만들기 위해 고민하는 과정에서 진짜 실력이 쌓입니다.

요일마다 카테고리를 정해 순환하십시오

9개 사이트를 매일 한꺼번에 보려고 하면 금방 지칩니다.

요일마다 카테고리를 하나씩 정해 루틴을 만드십시오. 월요일 모션, 화요일 패턴, 수요일 영감 식으로 순환하면 꾸준히 유지할 수 있습니다.

분석 노트를 함께 운영하십시오

Notion에 UX/UI 레퍼런스 분석 노트를 만들어 두십시오.

스크린샷 + 분석 메모 + 활용 아이디어를 함께 기록하면 단순한 저장소가 아닌 자신만의 디자인 지식 베이스가 됩니다.

레퍼런스를 충분히 수집했다면 이제 직접 만들 차례입니다.

클로드 디자인으로 앱 시안을 10분 만에 완성하는 방법을 참고하면 피그마 없이도 바로 시작할 수 있습니다.

맺음말

UX/UI 디자인 실력은 단시간에 만들어지지 않습니다. 하지만 좋은 레퍼런스 사이트를 꾸준히 보고 분석하는 습관은 그 과정을 훨씬 빠르게 만들어 줍니다.

오늘 소개한 9곳은 모두 무료로 이용할 수 있습니다.

지금 바로 북마크 폴더를 만들고 하나씩 저장해 두십시오. 아이디어가 막힐 때마다 꺼내 쓰는 레퍼런스 라이브러리가 될 것입니다.

앞으로도 실무에서 바로 쓸 수 있는 UX/UI 디자인 리소스를 꾸준히 소개할 예정입니다.

FAQ: UX/UI 디자인 레퍼런스 사이트 추천 관련 자주 묻는 질문

Q1. UX/UI 디자인 레퍼런스 사이트는 초보자도 활용할 수 있습니까?

A. 가능합니다. 특히 designspells.com과 uiplaybook.dev는 디자인 원칙부터 실제 사례까지 함께 볼 수 있어 UX/UI 독학 초보자에게 가장 먼저 추천합니다.

Q2. 위 UX/UI 레퍼런스 사이트들은 한국어를 지원합니까?

A. 대부분 영어로 운영됩니다. 하지만 시각적으로 확인하는 레퍼런스 중심이기 때문에 영어 실력과 무관하게 활용할 수 있습니다.

Q3. UX/UI 디자인 레퍼런스를 많이 보면 표절 문제가 생기지 않습니까?

A. 레퍼런스는 아이디어를 자극하는 도구입니다. 원칙과 패턴을 추출해 자신의 맥락에 맞게 재해석하는 것이 올바른 활용법이며 표절과 다릅니다.

Q4. UX와 UI 중 어느 쪽 레퍼런스를 먼저 봐야 합니까?

A. 목표 직군에 따라 다르지만, UI 컴포넌트와 모션 레퍼런스로 시작해 UX 플로우 분석으로 넓혀 가는 순서가 초보자에게 자연스럽습니다.

Q5. AB 테스트 레퍼런스를 공부하면 UX/UI 디자인에 어떤 도움이 됩니까?

A. 디자인 결정을 데이터 기반으로 사고하는 습관이 생깁니다. 주니어와 시니어 UX/UI 디자이너의 가장 큰 차이 중 하나가 바로 이 사고 방식입니다.

Q6. 로고 디자인 레퍼런스도 UX/UI 디자이너에게 필요합니까?

A. 필수는 아니지만 브랜딩 작업 시 도움이 됩니다. 스타트업 환경에서는 로고부터 앱 UX/UI까지 전반을 다뤄야 하는 경우가 많습니다.

Q7. 레퍼런스 수집 외에 UX/UI 디자인 실력을 높이는 가장 빠른 방법은 무엇입니까?

A. 레퍼런스를 보고 Figma에서 직접 재현하는 모작 연습이 가장 효과적입니다. 보는 것과 만드는 것의 간극을 줄이는 과정에서 실력이 빠르게 오릅니다.