해외에서 진짜 많이 쓰는 웹 UI 레퍼런스 5가지

웹 UI 작업할 때 레퍼런스 없이 맨땅에 시작하면 시간만 날린다. 국내 사이트도 좋지만, 해외 디자이너/개발자들이 실제로 많이 쓰는 사이트 위주로 정리했다. 요즘 AI로 개발하다보면 디자인을 놓치기 쉬운데 아래 사이트를 참고해서 예쁘게 만들어 보자.

---

1. Dribbble

🔗 https://dribbble.com

디자이너 포트폴리오 플랫폼의 원조격이다. 전 세계 디자이너들이 자기 작업물을 올리는 곳인데, 웹 UI뿐만 아니라 앱 UI, 일러스트, 아이콘 등 거의 모든 디자인 분야를 커버한다.

뭐가 좋은지:

• 한 화면에 디자인 샷이 쭉 나와서 빠르게 훑기 좋다
• "Web Design", "Mobile", "Dashboard" 같은 태그 필터링이 잘 되어 있다
• 무료로도 충분히 많이 볼 수 있다 (Pro 없어도 됨)
• 컬러 팔레트 검색이 가능해서, 특정 색상 기반으로 레퍼런스를 찾을 수 있다
• 각 샷에 사용된 색상 코드가 표시되어서 바로 가져다 쓸 수 있다

아쉬운 점:

• 실제 서비스가 아니라 "예쁜 목업"인 경우가 많다. 실제 구현 가능한지는 별개의 문제다.
• 무료 계정은 검색 필터에 제한이 있다

---

2. Behance

🔗 https://www.behance.net

Adobe에서 운영하는 크리에이티브 포트폴리오 플랫폼이다. Dribbble이 한 장짜리 "샷" 중심이라면, Behance는 프로젝트 단위로 올라온다.

뭐가 좋은지:

• 프로젝트 전체 과정을 볼 수 있다 (리서치 → 와이어프레임 → 최종 디자인)
• "왜 이렇게 디자인했는지" 설명이 같이 올라오는 경우가 많아서, 디자인 의도를 파악하기 좋다
• Adobe 계정만 있으면 무료로 다 볼 수 있다
• 웹/앱뿐만 아니라 브랜딩, 모션그래픽, 3D까지 범위가 넓다
• Figma 임베드를 지원해서 실제 디자인 파일 구조를 볼 수 있는 프로젝트도 있다

아쉬운 점:

• 프로젝트가 길어서 빠르게 훑기에는 Dribbble보다 느리다
• 퀄리티 편차가 크다 (큐레이션이 Dribbble보다 약함)

---

3. Awwwards

🔗 https://www.awwwards.com

웹사이트 디자인 어워드 사이트다. 여기가 다른 사이트들과 다른 점은, 실제 라이브 웹사이트를 심사한다는 것이다. 전문 심사위원단이 디자인, 사용성, 크리에이티비티, 개발 퀄리티 4개 항목으로 점수를 매긴다.

뭐가 좋은지:

• "Site of the Day" 코너가 핵심이다. 매일 하나씩 선정되니까 매일 들어가면 된다
• 실제 돌아가는 사이트라서, 인터랙션/애니메이션을 직접 만져볼 수 있다
• 개발 퀄리티도 심사 기준이라 프론트엔드 구현 참고용으로 최고다
• 기술 스택 태그가 있어서 React, Three.js 같은 기술 기반으로도 필터링 가능하다
• Collections 기능으로 다른 사람이 큐레이션한 모음집을 볼 수 있다

아쉬운 점:

• 수상작 위주라 퀄리티가 "너무" 높다. 현실적인 레퍼런스보다는 영감용에 가깝다
• 무료 계정에서는 일부 필터/컬렉션에 접근 제한이 있다

---

4. Mobbin

🔗 https://mobbin.com

이건 좀 결이 다르다. 실제 서비스들의 UI 스크린샷을 패턴별로 정리해둔 라이브러리다. 모바일 앱 위주였는데 요즘은 웹 UI도 많이 추가됐다.

뭐가 좋은지:

• UI 패턴별로 검색할 수 있다 (Onboarding, Settings, Checkout, Profile 등)
• "로그인 화면 요즘 어떻게 생겼지?" 같은 실무적인 질문에 바로 답이 나온다
• 실제 서비스 캡처라서 현실적인 레퍼런스를 얻을 수 있다 (목업이 아님)
• iOS/Android/Web 플랫폼별로 필터링 가능하다
• Flow 기능으로 화면 전환 흐름까지 볼 수 있다 (단일 화면이 아니라 시나리오 전체)

아쉬운 점:

• 무료 계정은 하루 검색 횟수에 제한이 있다
• 유료 플랜이 좀 비싼 편이다 (월 $12~)

---

5. Land-book

🔗 https://land-book.com

이름에서 알 수 있듯이 랜딩 페이지 디자인에 특화된 큐레이션 사이트다. SaaS, 앱 소개, 포트폴리오, 에이전시 등 카테고리별로 잘 정리되어 있다.

뭐가 좋은지:

• 랜딩 페이지/소개 페이지를 만들 때 레이아웃 잡기에 최적이다
• 컬러, 산업군, 스타일별 필터가 잘 되어 있다
• 큐레이션 퀄리티가 높다 (쓸데없는 것들이 별로 없음)
• 실제 사이트 링크가 바로 연결되어 있어서 라이브로 확인 가능하다
• 무료로 거의 다 볼 수 있다

아쉬운 점:

• 랜딩 페이지에 특화되어 있어서, 대시보드나 앱 내부 UI 레퍼런스는 약하다
• 업데이트 주기가 위의 사이트들보다 느린 편이다

---

검색 꿀팁

Dribbble에서 원하는 레퍼런스 빨리 찾는 법

검색창에 키워드 조합으로 입력한다:
- "dashboard dark mode" → 다크 모드 대시보드
- "saas pricing page" → SaaS 가격 페이지
- "mobile app onboarding" → 앱 온보딩 화면
- "medical app UI" → 의료 앱 UI

추가 필터:
- Color 필터로 원하는 색상 톤 지정
- "Following" 탭에서 실력 좋은 디자이너를 팔로우하면 피드 퀄리티가 올라간다

Behance에서 케이스 스터디 찾는 법

검색 후 "Recommended" 정렬을 쓰면 Adobe 알고리즘이 퀄리티 높은 것부터 보여준다.
"Most Appreciated" 정렬도 좋다.

키워드 예시:
- "Web app redesign case study"
- "SaaS dashboard UX"
- "Healthcare app design system"

Awwwards에서 기술 기반 레퍼런스 찾는 법

상단 메뉴 → "Websites" → 왼쪽 필터 패널에서:
- Technologies: React, Vue, Three.js, GSAP 등으로 필터링
- Categories: Portfolio, E-Commerce, Agency 등
- Color: 메인 컬러 기반 검색

"Nominees"도 꼭 보자. 수상작은 아니지만 퀄리티 좋은 것들이 많다.

Mobbin에서 특정 패턴 찾는 법

가장 유용한 검색 방식:
1. Screens 탭에서 패턴 키워드 검색 (예: "empty state", "error", "permission")
2. Flows 탭에서 플로우 검색 (예: "signup", "checkout", "payment")
3. Apps 탭에서 특정 앱 이름 검색 → 그 앱의 전체 스크린 모아보기

Android 앱 레퍼런스가 필요하면 플랫폼 필터에서 "Android" 선택.
iOS와 비교해보면 같은 서비스도 플랫폼별로 UI가 다른 걸 확인할 수 있다.

🌠공통 팁🌠

1. 레퍼런스는 "수집"이 아니라 "분석"이다
   → 예쁜 거 모으기만 하면 의미 없다. "이 레이아웃은 왜 이렇게 했을까?"를 생각하자.

2. 비슷한 서비스 3~5개를 동시에 비교해보자
   → 같은 기능인데 서비스마다 다르게 풀어낸 방식을 비교하면 인사이트가 나온다.

3. 스크린샷 찍을 때 URL도 같이 메모하자
   → 나중에 다시 찾으려면 필요하다. 특히 Awwwards에서 본 사이트는 링크 꼭 저장.

4. 최신 트렌드를 보려면 정렬을 "Recent"로 바꾸자
   → 기본 정렬은 인기순인 경우가 많은데, 트렌드를 보려면 최신순이 맞다.

5. 특정 앱을 벤치마킹할 때는 Mobbin 먼저
   → Spotify, Uber, Airbnb 같은 메이저 앱의 UI는 Mobbin에 거의 다 있다.

 

---

 

사이트 검색 중 마음에 드는 web 디자인 발견..! 진짜 깔끔하고 색상도 마음에 든ㄷ ㅏ!

 

한눈에 비교

사이트 특징 주 용도 무료 사용성

Dribbble	디자인 샷 중심, 빠른 브라우징	비주얼 영감, 컬러 참고	⭐⭐⭐⭐
Behance	프로젝트 케이스 스터디	디자인 프로세스 이해	⭐⭐⭐⭐⭐
Awwwards	라이브 사이트 심사	인터랙션/애니메이션 참고	⭐⭐⭐
Mobbin	실제 앱 UI 패턴 라이브러리	특정 UI 패턴 검색	⭐⭐⭐
Land-book	랜딩 페이지 큐레이션	랜딩/소개 페이지 레이아웃	⭐⭐⭐⭐⭐

---

처음 시작한다면 Dribbble + Mobbin 조합을 추천한다. Dribbble에서 전체적인 비주얼 감을 잡고, Mobbin에서 구체적인 UI 패턴을 찾는 식으로 쓰면 효율적이다.