AI가 코드를 짜주고, 디자인도 뚝딱 만들어주는 세상이에요. 근데 진짜 문제는 그 다음이에요. AI가 만든 결과물이 좋은 건지 나쁜 건지, 그걸 판단할 눈이 없으면 아무 소용이 없거든요.
이게 뭔데?
요즘 Cursor, Claude Code, Bolt 같은 AI 코딩 도구로 앱을 만드는 사람들이 폭발적으로 늘고 있어요. "바이브 코딩"이라는 말까지 생겼잖아요. 근데 코드는 AI가 대신 짜줘도, 결과물의 품질을 판단하는 건 결국 사람의 몫이에요.
디자인 레퍼런스 사이트는 실제 출시된 앱과 웹서비스의 UI/UX를 체계적으로 수집·분류해둔 라이브러리예요. 에이전시 디자이너들이 프로젝트 시작 전에 반드시 참고하는 필수 도구이기도 하고요. 전문 디자이너가 아니더라도, "좋은 디자인이 어떤 느낌인지"를 눈에 익히는 가장 빠른 방법이에요.
특히 AI 시대에는 이런 레퍼런스의 가치가 더 올라갔어요. AI에게 "이런 느낌으로 만들어줘"라고 지시하려면, 내가 먼저 "이런 느낌"이 뭔지 알아야 하니까요. 한 디자이너는 "좋은 레퍼런스를 찾아 자신만의 인사이트를 쌓는 것이 중요하다"고 말하기도 했어요.
오늘 소개할 4개 사이트는 각각 다른 강점을 가지고 있어요. 인터랙션 영상, 화면 스크린샷, 제품 UI 아카이브, UX 플로우 녹화까지 — 목적에 따라 골라 쓸 수 있습니다.
뭐가 달라지는 건데?
"Dribbble이나 Behance 같은 거 아니야?"라고 생각하실 수 있어요. 전혀 달라요. Dribbble이나 Behance는 디자이너들의 작품이에요. 실제 출시된 제품이 아니라 포트폴리오용으로 만든 컨셉 디자인이 대부분이고요. 반면에 오늘 소개하는 사이트들은 실제 운영 중인 앱과 서비스의 진짜 화면을 모아둔 거예요.
| 포트폴리오형 (Dribbble 등) | 실제 제품 레퍼런스 | |
|---|---|---|
| 콘텐츠 | 컨셉 디자인, 목업 | 실제 출시된 앱 UI |
| UX 플로우 | 단일 화면 위주 | 온보딩→결제 전체 흐름 |
| 실무 적용성 | 영감 수준 | 바로 참고 가능 |
| AI 프롬프트 활용 | 추상적 레퍼런스 | 구체적 패턴 지시 가능 |
실무에서의 차이는 확실해요. 예를 들어 "결제 화면을 만들어줘"라고 AI에게 시키면 평범한 결과가 나오지만, Mobbin에서 Airbnb의 체크아웃 플로우를 먼저 보고 "이런 패턴으로 만들어줘"라고 하면 결과가 완전히 달라지거든요. Figma의 Marco Cornacchia도 "Mobbin은 실제 앱들이 특정 UI 패턴과 플로우를 어떻게 처리하는지 볼 수 있어 가장 좋아하는 리소스"라고 했어요.
이제 4개 사이트를 하나씩 뜯어볼게요.
| 사이트 | 강점 | 콘텐츠 형태 | 가격 |
|---|---|---|---|
| Mobbin | UX 플로우별 분류, 60만+ 스크린샷 | 스크린샷 + 플로우 영상 | 무료 (Pro 유료) |
| 60fps.design | 인터랙션/애니메이션 영상 수집 | 영상 캡처 1,880+ | 무료 |
| Refero | SaaS/웹 제품 UI + MCP 지원 | 데스크톱 스크린샷 + 플로우 | 무료 (Pro 유료) |
| Page Flows | UX 플로우 녹화 영상 + 어노테이션 | 화면 녹화 영상 | 유료 ($99/년) |
핵심만 정리: 목적별 사이트 활용법
- 인터랙션·애니메이션 영감이 필요할 때 → 60fps.design
1,880개 이상의 앱 인터랙션을 영상으로 캡처해둔 사이트예요. 버튼 애니메이션, 스와이프, 로딩, 온보딩 등 88가지 필터로 분류되어 있어요. 62,800명 이상의 디자이너가 구독 중이고, Duolingo·Airbnb·Instagram 등 유명 앱의 디테일한 인터랙션을 영상으로 직접 확인할 수 있어요. 앱의 "느낌"을 전달할 때 가장 유용합니다. - 특정 UX 패턴을 찾을 때 → Mobbin
1,150개 이상의 앱에서 추출한 601,500개 스크린샷과 320,000개 플로우를 보유한 압도적인 규모의 레퍼런스 사이트예요. "온보딩" "결제" "프로필" 등 UX 플로우별로 검색할 수 있고, Figma 플러그인으로 바로 디자인을 복사할 수도 있어요. Visa, Shopify, Figma 등의 디자인팀이 실무에서 사용 중이에요. 무료로 시작할 수 있어서 진입 장벽도 낮습니다. - SaaS·웹 제품 UI를 참고할 때 → Refero
Stripe, Shopify, Notion 같은 실제 SaaS 제품의 데스크톱 UI를 수집하는 라이브러리예요. 45가지 페이지 타입, 87가지 UX 패턴, 69가지 UI 요소로 분류되어 있어서 검색이 강력해요. 특이한 건 AI 에이전트용 MCP(Model Context Protocol)도 지원한다는 점이에요. AI 코딩 도구가 Refero의 레퍼런스를 직접 참조해서 더 나은 디자인을 만들 수 있게 되는 거예요. Product Hunt 4.9점도 인상적이고요. - 전체 사용자 여정을 영상으로 볼 때 → Page Flows
실제 앱의 UX 플로우를 화면 녹화 영상으로 제공하는 사이트예요. 스크린샷만으로는 파악하기 어려운 전환 효과, 마이크로 인터랙션, 실제 사용 흐름을 영상으로 볼 수 있어요. Airbnb, Dropbox, Slack 등 2,000개 이상의 플로우 녹화가 있고, 10만 명 이상의 디자이너가 사용 중이에요. 유료($99/년)지만 3일 무료 체험이 있습니다.
AI 프롬프트에 레퍼런스를 활용하는 팁
AI에게 디자인을 요청할 때, 레퍼런스 사이트에서 본 패턴을 구체적으로 설명하면 결과 품질이 확 올라가요. "결제 화면 만들어줘" 대신 "Airbnb 스타일의 단계별 체크아웃 플로우로, 프로그레스 바가 상단에 있는 형태로 만들어줘"처럼요.
