좋은 레퍼런스는 많이 저장한 화면이 아니라, 지금 만드는 화면의 문제를 풀어주는 사례다. 랜딩페이지의 섹션, 앱의 사용자 흐름, 브랜드의 인터랙션은 서로 다른 곳에서 찾는 편이 빠르다.
랜딩페이지 구조는 Landbook·Lapa Ninja, 제품 UI 흐름은 Mobbin·Refero, 과감한 시각 표현은 Awwwards·Recent에서 시작해보자. 아래 캡처는 각 서비스의 첫 화면이므로, 개별 작품의 랜딩페이지와 혼동하지 않는다.
이 글은 2026년 10월 1일 공식 공개 페이지를 기준으로 정리했다. 무료 탐색과 유료 기능의 경계는 바뀔 수 있으므로 가입·결제 전 각 사이트의 현재 안내를 확인한다. 기존 Godly 주소는 Recent로 이동하므로 2번 항목에 변경을 반영했다.
1. Awwwards — 수상작의 시각적 완성도를 볼 때
브랜드 첫 화면과 인터랙션의 표현 범위를 살펴보기 좋다.
적용 전 점검: 강한 연출은 로딩 속도와 접근성 비용이 따를 수 있다. 효과를 그대로 옮기기 전에 콘텐츠 전달을 먼저 점검한다.
2. Recent (옛 Godly) — 최근 디자인 표현을 넓게 훑을 때
웹, 인터페이스, 브랜딩, 타이포, 모션을 한 피드에서 비교하기 좋다.
적용 전 점검: 갤러리 썸네일은 실제 사용성을 보증하지 않는다. 후보를 고른 뒤 원본 사이트를 확인한다.
3. Landbook — 랜딩페이지의 특정 섹션을 찾을 때
페이지 전체와 Hero·Pricing·Footer 같은 섹션을 나눠 탐색할 수 있다.
적용 전 점검: 보기 좋은 섹션이라도 자사 메시지와 구매 흐름에 맞는지는 별도로 판단한다.
4. Mobbin — 실제 앱 화면과 사용자 흐름을 볼 때
로그인, 온보딩, 결제처럼 여러 화면이 이어지는 패턴을 조사하기 좋다.
적용 전 점검: 다른 앱의 흐름을 그대로 복사하기보다 우리 서비스의 단계 수와 필수 정보에 맞춰 줄인다.
5. Lapa Ninja — 랜딩페이지의 전체 정보 흐름을 볼 때
실제 사이트의 첫 화면부터 하단까지 섹션 순서를 비교하기 좋다.
적용 전 점검: 사례가 많아 목적 없이 훑기 쉽다. 같은 업종의 3~5개만 먼저 비교한다.
6. Siteinspire — 그리드와 타이포의 균형을 볼 때
절제된 레이아웃과 콘텐츠 중심 사이트를 찾는 데 유용하다.
적용 전 점검: 앱의 세부 기능 흐름보다 웹사이트 전체 분위기를 보는 용도에 더 적합하다.
7. Refero — 웹과 모바일 제품 UI를 함께 볼 때
마케팅 화면과 제품 안쪽의 인터페이스를 한 주제 안에서 조사하기 좋다.
적용 전 점검: 일부 상세 화면과 기능은 로그인이나 요금제에 영향을 받을 수 있다. 사용 전 현재 조건을 확인한다.
8. Httpster — 익숙하지 않은 레이아웃을 찾을 때
소규모 스튜디오와 브랜드의 독특한 웹 표현을 찾아보기 좋다.
적용 전 점검: 개성 있는 배치가 정보 탐색을 방해하지 않는지 메뉴와 모바일 화면을 따로 검토한다.
9. Typewolf — 제목과 본문의 서체 조합을 고를 때
실제 사이트에서 쓰인 폰트와 글자 계층을 관찰하기 좋다.
적용 전 점검: 영문 사례의 조합을 한글 화면에 그대로 옮기면 무게와 줄바꿈이 달라진다.
10. Dribbble — 초기 비주얼 방향을 넓힐 때
카드, 아이콘, 대시보드 등 특정 요소의 시각적 후보를 빠르게 모으기 좋다.
적용 전 점검: 콘셉트 작업도 많다. 실제 서비스의 사용성과 구현 가능성을 별도로 검증한다.
11. 작업 목적별로 한눈에 비교하기
검색을 시작하기 전에 지금 필요한 산출물이 무엇인지 정하면 후보가 빠르게 줄어든다.
| 사이트 | 잘 맞는 작업 | 첫 확인 포인트 |
|---|---|---|
| Awwwards | 수상작의 시각적 완성도를 볼 때 | 상단 수상작과 카테고리 탐색 메뉴를 본 뒤, 후보 사이트를 열어 실제 스크롤과 전환을 확인한다 |
| Recent (옛 Godly) | 최근 디자인 표현을 넓게 훑을 때 | Design의 범주 필터와 Websites 탭을 오가며 히어로 영역의 색·타이포·이미지 비율을 비교한다 |
| Landbook | 랜딩페이지의 특정 섹션을 찾을 때 | 상단 Sections 메뉴에서 지금 만드는 부분을 먼저 고르고, 산업·스타일 필터로 후보를 줄인다 |
| Mobbin | 실제 앱 화면과 사용자 흐름을 볼 때 | 홈 화면의 Screens·UI Elements·Flows 분류를 보고 한 기능의 시작, 오류, 완료 상태를 함께 수집한다 |
| Lapa Ninja | 랜딩페이지의 전체 정보 흐름을 볼 때 | 업종별 사례에서 히어로 → 혜택 → 사회적 증거 → CTA의 순서를 표시해본다 |
| Siteinspire | 그리드와 타이포의 균형을 볼 때 | Styles·Types·Subjects 분류로 비슷한 목적의 사이트를 묶고 여백과 글자 계층을 비교한다 |
| Refero | 웹과 모바일 제품 UI를 함께 볼 때 | 웹 화면과 앱 화면을 같은 기능 기준으로 모아 검색·필터·대시보드의 정보 밀도를 비교한다 |
| Httpster | 익숙하지 않은 레이아웃을 찾을 때 | Styles의 Grid·Minimal·Unusual Layout 등을 비교해 첫 시안과 다른 방향을 찾는다 |
| Typewolf | 제목과 본문의 서체 조합을 고를 때 | 큰 제목, 본문, 숫자, 버튼 글자의 대비를 살펴보고 우리 언어와 글자 길이에도 적용 가능한지 테스트한다 |
| Dribbble | 초기 비주얼 방향을 넓힐 때 | 구체적인 기능명으로 검색하고 색·구도·컴포넌트 표현만 추려 무드보드에 담는다 |
비교표는 선택 도구다. 각 서비스의 요금·열람 범위는 캡처 시점과 달라질 수 있다.
12. 레퍼런스를 실제 디자인에 적용하는 순서
① 문제를 한 문장으로 적는다.
예를 들어 “SaaS 요금제 차이를 모바일에서 쉽게 보여주고 싶다”처럼 화면과 사용 목적을 함께 적는다.
② 목적에 맞는 두 곳에서 3~5개를 고른다.
예시라면 Landbook의 Pricing 섹션과 Lapa Ninja의 SaaS 랜딩페이지를 본다. 로그인 흐름이라면 Mobbin을 먼저 연다.
③ 공통 패턴과 다른 점을 적는다.
제목 길이, 정보 순서, CTA 위치, 모바일 줄바꿈을 기록한다. 좋아 보인다는 느낌만 남기면 다음 시안에서 다시 헤맨다.
④ 우리 콘텐츠로 다시 설계한다.
로고·이미지·문구·레이아웃을 그대로 복제하지 않는다. 브랜드 톤, 접근성, 성능, 라이선스, 실제 사용 흐름을 확인한 뒤 필요한 원리만 적용한다.
랜딩페이지는 Landbook·Lapa Ninja, 제품 흐름은 Mobbin·Refero, 타이포는 Typewolf에서 출발한다. 먼저 해결할 화면 문제를 정하고 작은 후보 묶음으로 비교해보자.
자주 묻는 질문
무료 사이트만으로 시작할 수 있나? 공개 갤러리만으로도 시각적 방향을 잡을 수 있다. 다만 전체 사용자 흐름이나 저장·검색 기능은 서비스마다 제한이 다르다.
캡처를 그대로 시안에 써도 되나? 이 글의 캡처는 서비스 소개와 화면 분석을 위한 자료다. 타인의 이미지·문구·UI를 결과물에 재사용할 때는 원저작자의 이용 조건을 확인한다.