UI 디자인 영감의 원천: 자주 사용하는 6가지 참고 사이트

Mobbin은 제가 가장 많이 사용하는 디자인 참고 사이트입니다. 단연 1위입니다.

핵심 가치는 실제 제품의 UI를 검색 가능한 디자인 패턴 라이브러리로 분해해 놓았다는 것입니다. 네 가지 차원에서 탐색할 수 있습니다: 앱 카테고리(AI, 건강, 음식 등), 화면 패턴(Dashboard, 필터 정렬, 알림 등), UI 요소(Text Field, Bottom Sheet, Tab Bar 등), 사용자 플로우(Onboarding, 로그인, 결제 등).

iOS와 웹 두 가지 플랫폼을 모두 지원합니다. 웹 쪽에서는 스타일별 필터링도 추가로 지원하는데—Dark, Minimal, Colorful, Motion 등으로 랜딩 페이지 영감을 찾을 때 특히 유용합니다.

추천 활용 사례: 특정 기능을 디자인할 때 "다른 제품은 어떻게 했을까" 궁금할 때. 예를 들어 "구독 페이지는 보통 어떤 모습인가", "Onboarding 플로우는 어떻게 설계하는가" 같은 질문에 답을 찾을 수 있습니다.

무료 vs 유료: 무료 사용자는 최신 4개 앱/사이트를 열람할 수 있으며, Pro 버전에서 전체 콘텐츠를 이용할 수 있습니다.

Mobbin이 글로벌 제품을 다룬다면, UI Notes는 중국 제품 디자인의 백과사전이라 할 수 있습니다.

396개 앱, 152,592장의 스크린샷—이 데이터 규모 자체가 모든 것을 말해줍니다. 그리고 오직 "출시된 디자인"만 수록하며, 컨셉 목업(실제 출시되지 않은 디자인)은 없습니다. 여기서 보이는 모든 스크린샷은 실제로 서비스 중인 인터페이스입니다.

수록된 앱은 실제로 널리 사용되는 것들입니다: 더우바오(豆包), DeepSeek, 코우쯔(扣子), 홍궈단쥐(红果短剧), 위안바오(元宝), TapTap 등. 회사별(바이트댄스, 텐센트, 알리바바 등)이나 업종별로 필터링할 수 있습니다. 각 앱에는 버전 번호와 업데이트 시간이 표시되어 제품 반복 과정을 추적할 수 있습니다.

추천 활용 사례: 중국 시장을 타겟으로 하는 제품을 만들 때, 경쟁 제품의 전체 인터페이스 스크린샷과 디자인 트렌드를 확인하고 싶을 때.

무료 vs 유료: 기본 열람은 무료이며, 회원 가입 시 더 많은 기능을 이용할 수 있습니다.

이 사이트는 접근 방식이 완전히 다릅니다—다른 사람의 디자인을 보여주는 것이 아니라, 무언가를 디자인할 때 무엇에 주의해야 하는지를 알려줍니다.

56개의 체크리스트가 다섯 가지 대분류로 나뉩니다:

• Website(13개): Login 페이지, Billing, Blog Post, 장바구니, FAQ 등
• Components(24개): Button, Modal, Input Field, Toast, Carousel 등
• Flows(13개): 장바구니 추가, 구독 취소, 비밀번호 재설정, 계정 삭제 등
• Topics(3개): 반응형, UX 카피라이팅, 다크 모드
• Brand(3개): Logo, Typography, Tone of Voice

각 체크리스트는 일련의 모범 사례 항목으로 구성되어 있습니다. 예를 들어 "Login 페이지에는 비밀번호 표시/숨기기 토글이 있어야 한다", "Modal은 ESC 키로 닫을 수 있어야 한다" 같은 것들입니다. Figma 플러그인도 있어서 디자인 도구 안에서 직접 체크할 수 있습니다.

추천 활용 사례: 디자인 완료 후 자체 점검, 또는 특정 컴포넌트를 처음 만들 때 기준을 세우고 싶을 때. 특히 초보자가 디자인 규범 의식을 키우는 데 적합합니다.

무료 vs 유료: 완전 무료입니다.

다른 사이트들이 단일 스크린샷을 보여준다면, Page Flows는 완전한 사용자 플로우를 보여줍니다.

핵심은 화면 녹화입니다—실제 사용자가 앱을 열고 특정 작업을 완료하기까지의 전체 과정을 볼 수 있으며, 단계별 주석도 함께 제공됩니다. 예를 들어 "Airbnb의 검색 플로우가 사용자를 어떻게 안내하는가", "Dropbox의 Onboarding은 어떻게 설계되어 있는가" 같은 것을 확인할 수 있습니다.

iOS, Android, Web, Emails 네 가지 플랫폼을 아우르며, 10만 명 이상의 디자이너가 사용하고 있습니다. 카테고리, 업종, UX 패턴별 필터링을 지원합니다.

추천 활용 사례: 사용자 플로우(Onboarding, 회원가입, 결제 등)를 설계할 때, 선도 제품이 어떻게 디자인했는지 참고하고 싶을 때.

무료 vs 유료: 3일 무료 체험 후, 월 $8.25(연간 결제) 또는 월 $13(분기 결제)입니다.

Refero는 최근 발견한 숨은 보석 같은 사이트로, 모든 사이트 중 가장 세밀한 분류 체계를 갖추고 있습니다.

여섯 가지 차원을 모두 다룹니다:

• Page Types(45종): Dashboard, Landing, Paywall, 404, Blog, Profile 등
• Flows(44종): 회원가입, 로그인, 구독, 장바구니 추가, 채팅, 편집, 계정 삭제 등
• UX Patterns(87종): Testimonials, Filter & Sorting, Dark Mode, Shopping 등
• UI Elements(69종): Modal, Cards, Table, Tabs, Skeleton, Chart 등
• Sites(업종별): AI Tool, SaaS, Finance, Education, Food 등
• Fonts: 특정 폰트를 사용한 제품 페이지를 폰트별로 필터링

수록된 제품은 Stripe, Calendly, n8n, Shopify, Coinbase 등 업계를 선도하는 제품들입니다.

가장 인상적이었던 점은 MCP 통합을 제공한다는 것입니다—AI Agent가 Refero의 디자인 라이브러리에 직접 접근하여 AI로 웹사이트를 구축할 때 실제 제품 디자인을 참고할 수 있습니다. "AI스러운" 인터페이스가 아닌 실제 제품 수준의 디자인을 만들 수 있게 해줍니다.

추천 활용 사례: 웹 제품 디자인 리서치, 특히 SaaS 제품에 적합합니다.

무료 vs 유료: 7일 무료 체험 후, 유료 구독입니다.

마지막 사이트는 조금 특별합니다—Lovable 자체는 AI 웹 빌딩 도구이지만, Discover 페이지는 훌륭한 디자인 영감의 원천이 됩니다.

여기에 전시된 모든 애플리케이션은 AI 대화를 통해 구축된 것으로, "현재 AI 웹 빌딩이 어느 수준까지 가능한지"를 직관적으로 체감할 수 있습니다. CRM, 이벤트 마케팅, 음악 플레이어부터 아이콘 라이브러리까지 다양한 카테고리를 아우릅니다.

각 애플리케이션에는 즐겨찾기 데이터가 표시되며(Iconstack 1221 favorites, Attendflow 813 favorites), 커뮤니티의 인정도를 확인할 수 있습니다. Featured, Builders, Personal, Marketing, Company 등의 분류로 탐색할 수 있습니다.

추천 활용 사례: AI 웹 빌딩의 실제 결과물을 확인하거나 빠른 프로토타이핑 영감을 찾을 때. 팀에 AI 웹 빌딩 도입을 제안할 때 사례로 활용하기에도 적합합니다.

무료 vs 유료: 열람은 무료이며, Lovable로 웹사이트를 구축할 때 무료 크레딧이 제공되고 고급 기능은 유료입니다.