현업 디자이너가 매일 쓰는 디자인 레퍼런스 사이트 17곳 (2026)

디자인 레퍼런스 사이트를 찾을 때 제일 아까운 시간은 ‘예쁜 화면’을 넘기는 시간이 아닙니다. 지금 풀어야 할 문제와 맞지 않는 화면을 계속 보는 시간입니다.

로그인·온보딩·결제처럼 실제 사용자 흐름이 궁금하다면 앱 스크린 아카이브를, SaaS 대시보드의 정보 구조가 필요하다면 웹 프로덕트 레퍼런스를, 전환이 되는 첫 화면을 잡고 있다면 랜딩 페이지 갤러리를 열어야 합니다.

아래 17곳은 2026년 8월 22일 기준으로 접속을 확인한 UI UX 디자인 레퍼런스 사이트입니다. 단순히 많이 모으기보다, 실무에서 어떤 질문에 열면 좋은지 기준으로 나눴습니다.

앱 UI·UX 레퍼런스: 실제 화면과 플로우를 볼 때

앱을 만들거나 개선할 때는 ‘이 버튼을 예쁘게 만드는 법’보다, 다른 제품이 같은 상황에서 사용자에게 어떤 순서로 선택을 받는지를 보는 쪽이 훨씬 유용합니다.

1. Mobbin

모바일 앱과 웹 서비스의 실제 화면을 패턴·컴포넌트·플로우 기준으로 찾기 좋은 대표적인 UI UX 레퍼런스 사이트입니다. 로그인, 바텀시트, 결제, 설정처럼 이미 이름을 아는 문제를 빠르게 비교할 때 가장 먼저 열게 됩니다.

이럴 때 좋습니다: 경쟁 서비스가 온보딩이나 구독 전환을 어떤 화면 순서로 처리하는지 보고 싶을 때.

2. WWIT (What Was IT)

국내 서비스 화면을 보고 싶을 때 가장 먼저 보기 좋습니다. 금융, 커머스, 배달처럼 한국 사용자에게 익숙한 서비스 카테고리와 로그인·회원가입·바텀시트 같은 패턴 분류가 함께 있어, 로컬 UX 문법을 확인하기 편합니다.

이럴 때 좋습니다: 토스·네이버페이 같은 국내 서비스의 정보 밀도, 용어, 결제 전후 화면을 참고할 때.

3. Appshots

모바일과 웹의 실제 제품 화면을 플로우 단위로 살펴보는 라이브러리입니다. 특정 화면 한 장보다 흐름 전체를 보고 싶은 경우에 특히 유용합니다.

이럴 때 좋습니다: 가입 후 권한 요청, 첫 설정, 빈 화면에서 활성화까지 이어지는 UX 흐름을 찾을 때.

4. ScreensDesign

기존 scrnshts.club과 UISources는 현재 ScreensDesign으로 연결됩니다. 앱스토어 스크린샷과 앱 화면을 카테고리별로 찾아볼 수 있어, 제품 자체의 UI뿐 아니라 마켓에서 보이는 첫인상도 함께 참고하기 좋습니다.

이럴 때 좋습니다: 앱 출시 직전, 앱스토어 스크린샷 구성과 캡션·강조 장면을 점검할 때.

웹·SaaS UI 레퍼런스: 화면 구조와 제품 흐름을 볼 때

웹 서비스는 모바일보다 정보의 밀도가 높고, 화면 하나가 맡는 역할도 복잡합니다. 이때는 화려한 랜딩 페이지보다 제품이 일을 시키는 화면을 먼저 보는 편이 낫습니다.

5. Page Flows

웹과 모바일 제품의 주요 사용자 흐름을 화면과 영상 중심으로 볼 수 있는 서비스입니다. 온보딩, 계정 생성, 업그레이드, 설정처럼 정적인 이미지로는 이해하기 어려운 흐름을 살필 때 좋습니다.

이럴 때 좋습니다: ‘이 기능을 어디에서, 어떤 타이밍에 보여줘야 하나’를 고민할 때.

6. Refero

웹 UI, SaaS 대시보드, 랜딩 페이지를 화면·섹션 단위로 탐색하기 좋은 디자인 레퍼런스 사이트입니다. 화면의 구조를 빠르게 비교하는 데 강합니다.

이럴 때 좋습니다: 테이블, 대시보드, 설정 화면처럼 B2B SaaS의 정보 구조를 잡을 때.

7. Nicelydone

웹 앱 중심의 UI·UX 인스피레이션 아카이브입니다. 실제 제품 같은 밀도를 가진 웹 화면을 보고 싶을 때 도움이 됩니다.

이럴 때 좋습니다: 관리 도구, 협업 서비스, 대시보드처럼 ‘작동하는 화면’의 분위기와 구조를 함께 보고 싶을 때.

랜딩 페이지 레퍼런스: 첫 화면과 전환을 설계할 때

랜딩 페이지는 멋진 비주얼을 모으는 곳이 아니라, 누구에게 어떤 가치를 약속하고 다음 행동을 어떻게 받는가를 보는 곳입니다. 레퍼런스를 볼 때는 헤드라인, 증거, CTA의 순서를 같이 보세요.

8. Landingfolio

랜딩 페이지뿐 아니라 가격, 로그인, 가입 같은 페이지와 컴포넌트 예시를 함께 찾을 수 있습니다. 업종·색상·기기 기준 필터도 제공해 디자인 톤을 좁히기 좋습니다.

이럴 때 좋습니다: SaaS의 히어로 섹션, 가격 정책, 기능 소개 섹션을 설계할 때.

9. SaaS Landing Page

SaaS 랜딩 페이지를 집중적으로 보고 싶을 때 열기 좋습니다. 제품 설명, 고객 로고, 사용 사례, 가격 안내가 어떤 순서로 설득을 만드는지 비교해 보세요.

이럴 때 좋습니다: B2B 제품의 메시지와 데모 CTA를 한 화면에서 정리해야 할 때.

10. Fountn

AI 디자인, Figma, UI 리소스를 포함해 폭넓은 디자인 자료를 모아둔 허브입니다. 특정 레퍼런스 하나보다, 프로젝트에 필요한 리소스를 탐색하는 출발점으로 유용합니다.

이럴 때 좋습니다: 디자인 툴·UI 키트·생산성 리소스까지 함께 찾아야 할 때.

웹 디자인 트렌드: 레이아웃·타이포그래피·인터랙션을 볼 때

이 섹션의 사이트는 그대로 베끼기보다, 브랜드가 화면의 속도와 여백, 전환 순간을 어떻게 다루는지 보는 데 적합합니다. 사용성이 최우선인 제품 화면과는 별도로 보세요.

11. Recent

기존 Godly.website는 현재 Recent로 연결됩니다. 최신 웹사이트를 빠르게 훑으며 화면의 분위기와 인터랙션 방향을 잡기 좋습니다.

이럴 때 좋습니다: 브랜드 사이트나 포트폴리오에서 조금 더 강한 시각적 인상을 만들어야 할 때.

12. Awwwards

수상작 중심의 웹 디자인 아카이브입니다. 인터랙션, 타이포그래피, 아트 디렉션이 강한 사이트를 볼 수 있지만, 제품 UX의 정답지로 보기보다는 표현의 기준을 넓히는 용도로 추천합니다.

이럴 때 좋습니다: 브랜드 캠페인, 포트폴리오, 에디토리얼 사이트의 완성도를 끌어올리고 싶을 때.

13. Httpster

독립적이고 실험적인 웹 디자인을 모아보기에 좋습니다. 다소 과감한 레이아웃과 타이포그래피를 보며 평소의 안전한 선택에서 벗어날 수 있습니다.

이럴 때 좋습니다: 브랜드 톤을 새로 잡거나, 평범한 카드·그리드 레이아웃이 지겨워졌을 때.

케이스 스터디와 영감: 넓게 보고 깊게 파고들 때

UI 화면을 빠르게 비교했다면, 여기서는 프로젝트 전체의 맥락을 봅니다. 단, 콘셉트 샷은 실제 제품의 제약과 다를 수 있으니 구조와 의도를 가져오고 구현 난도는 따로 판단하는 게 좋습니다.

14. Dribbble

짧은 UI 샷과 시각적 아이디어를 빠르게 탐색하기 좋습니다. 색, 그래픽, 컴포넌트 조합, 마이크로 인터랙션의 단서를 얻는 데 유용합니다.

이럴 때 좋습니다: 빈 화면에서 시작해야 해서, 우선 시각적 방향을 넓게 펼쳐 보고 싶을 때.

15. Behance

프로젝트 단위의 케이스 스터디를 볼 수 있어 결과물 뒤의 브랜딩, 디자인 시스템, 화면 구성까지 따라가기 좋습니다.

이럴 때 좋습니다: 앱 하나의 화면이 아니라 리브랜딩이나 서비스 전반의 디자인 방향을 공부할 때.

16. Growth.Design

UX 패턴을 단순한 화면 모음이 아닌 사례 연구로 해석해 줍니다. 왜 그 장면에서 사용자가 움직이는지, 어떤 설계가 문제를 만드는지 생각하고 싶을 때 좋습니다.

이럴 때 좋습니다: 전환·리텐션·다크 패턴을 팀과 논의할 근거가 필요할 때.

17. GDWeb

국내 웹사이트와 모바일 사이트를 폭넓게 훑기 좋습니다. 국내 브랜드와 기업이 실제로 어떤 톤과 구조를 선택하는지 빠르게 파악할 수 있습니다.

이럴 때 좋습니다: 국내 클라이언트·산업군에 맞는 웹 디자인 레퍼런스를 찾아야 할 때.

모바일 앱 UI는 Mobbin과 WWIT에서, 웹 서비스 흐름은 Page Flows와 Refero에서, 랜딩 페이지는 Landingfolio에서 먼저 시작해 보세요. 레퍼런스를 많이 보는 것보다, 지금 풀고 있는 문제에 맞는 세 곳을 번갈아 보는 편이 결과가 좋습니다.