디자인 레퍼런스 사이트 가이드: 웹·UI·광고, 무엇부터 볼까 (2026)

디자인 레퍼런스 사이트: 지금 풀어야 할 질문에서 출발한다

• 이 글은 사이트를 많이 모아둔 목록이 아니라 어떤 레퍼런스 글부터 열어야 하는지 정하는 길잡이입니다.
• 랜딩페이지의 메시지·신뢰·CTA가 막혔다면 웹·랜딩페이지 글, 앱의 가입·결제·설정 흐름이 막혔다면 UI/UX 글을 먼저 봅니다.
• 브랜딩·광고·편집물은 결과물의 종류와 관찰할 단서가 달라 같은 목록에서 섞어 보면 판단이 흐려집니다.
• 아래 링크는 질문별 전용 글로 이어집니다. 한 번에 모든 사이트를 보지 말고, 오늘 해결할 과업 하나를 고르세요.

디자인 레퍼런스가 필요한 이유는 취향을 넓히기 위해서만은 아닙니다. 랜딩페이지의 정보 순서, 앱의 결제 플로우, 브랜드의 실제 접점을 각각 다른 질문으로 보고, 그 질문에 맞는 사례를 빠르게 비교하기 위해서입니다.

그래서 이 글은 웹·UI/UX·광고·브랜딩·패키지·편집 디자인을 한꺼번에 경쟁시키지 않습니다. 분야별 아카이브와 이미 발행한 전용 가이드를 연결해, 검색창을 다시 여는 대신 바로 맞는 출발점으로 갈 수 있게 구성했습니다.

먼저 고를 질문

이 구분이 중요한 이유는 간단합니다. 예쁜 한 장은 분위기를 잡아주지만, 제품 화면이나 캠페인은 결국 맥락 속에서 작동하기 때문입니다.

웹 디자인 레퍼런스: 페이지가 어떻게 설득하는지 보기

웹 디자인 레퍼런스는 시각 스타일을 베끼기보다, 한 페이지가 정보를 어떤 순서로 꺼내는지 보기 좋습니다. 랜딩페이지, 포트폴리오, 제품 소개 페이지를 만들 때는 첫 화면의 약속, 기능 설명의 리듬, 신뢰를 보여주는 위치를 따로 살펴보는 편이 효율적입니다.

• Land-book — 카테고리와 섹션을 나눠 웹사이트 사례를 탐색할 수 있는 큐레이션 갤러리입니다.
• Awwwards — 인터랙션과 아트디렉션의 상한선을 확인할 때 적합합니다. 실제 프로젝트에 적용할 땐 접근성·성능·제작 범위를 별도로 판단해야 합니다.
• One Page Love — 한 메시지를 긴 페이지로 전개하는 랜딩페이지의 흐름을 볼 때 유용합니다.

이미 발행한 관련 글

웹 디자인 레퍼런스 사이트 12곳: 랜딩페이지·기업 홈페이지 분석법

랜딩페이지와 기업 홈페이지를 히어로, 정보 구조, CTA 단위로 나눠 보는 기준이 필요할 때 이어서 읽기 좋습니다.

UI/UX 레퍼런스: 화면이 아니라 흐름을 보기

앱 UI는 한 장의 스크린샷보다 앞뒤 화면이 더 많은 것을 말해줍니다. 온보딩, 검색, 장바구니, 결제, 권한 요청처럼 사용자가 망설일 수 있는 장면은 실제 플로우를 나란히 비교해 봐야 합니다.

• Mobbin — 모바일 앱·웹 앱·웹사이트의 UI/UX 레퍼런스를 제품 유형과 화면 흐름으로 탐색할 수 있습니다.
• Refero — 특정 기능이나 패턴을 찾아 비교할 때 열기 좋은 UI 레퍼런스 도구입니다.
• Behance — 완성 화면뿐 아니라 프로젝트가 어떤 문제와 맥락으로 구성됐는지 살펴볼 수 있습니다.

레퍼런스를 저장할 때는 이미지와 함께 “어떤 상황에서 쓸 수 있는가”를 적어두는 편이 좋습니다. 예를 들어 ‘좋은 결제 화면’보다 ‘구독 전환에서 가격 비교를 먼저 보여주는 방식’처럼 저장하면 다음 프로젝트에서 다시 찾기 쉬워집니다.

이미 발행한 관련 글

• 현업 디자이너가 매일 쓰는 디자인 레퍼런스 사이트 17곳
• 온보딩 UX 사례: 첫 방문자를 다음 행동으로 이끄는 화면 흐름 12가지
• AI가 만든 UI, 접근성은 어떻게 검사할까? 디자이너용 체크리스트

대시보드·제품 레퍼런스: 정보의 우선순위와 다음 행동 보기

대시보드와 제품 화면에서는 화면을 채우는 것보다, 사용자가 지금 판단해야 할 정보와 다음 행동을 먼저 분리하는 일이 중요합니다. 같은 데이터나 기능도 비교, 입력, 승인, 결과 확인 중 무엇을 돕는 화면인지에 따라 구조가 달라집니다.

이때는 화면 한 장보다 상태 전환과 행동의 순서를 중심으로 레퍼런스를 모으는 편이 좋습니다. UI/UX 아카이브에서 비슷한 제품 흐름을 찾고, 아래 글에서는 제품 화면이 역할에 따라 어떻게 나뉘는지 이어서 볼 수 있습니다.

이미 발행한 관련 글

• Generative UI란? 디자이너가 AI에게 화면을 맡기기 전에 설계할 5가지
• AI 에이전트 UX는 왜 챗봇에서 멈추면 안 될까? 디자이너를 위한 화면 전환 기준
• 온보딩 UX 사례: 첫 방문자를 다음 행동으로 이끄는 화면 흐름 12가지

광고·마케팅 레퍼런스: 실행 중인 소재와 캠페인을 나눠 보기

광고 레퍼런스에는 두 종류가 있습니다. 지금 플랫폼에서 노출되는 실행 중 소재와, 시간이 지나도 남아 있는 캠페인 아카이브입니다. 전자는 메시지·포맷·경쟁 상황을 읽을 때, 후자는 아이디어와 제작 방식을 해석할 때 쓰임이 다릅니다.

• Meta Ad Library — Meta 제품에서 실행 중인 광고를 검색할 수 있습니다.
• TikTok Creative Center — 광고 예시와 트렌드·크리에이티브 리소스를 함께 살펴볼 수 있습니다.
• Ads of the World — 캠페인과 컬렉션을 주제별로 탐색하기 좋은 광고 아카이브입니다.

이미 발행한 관련 글

• 광고 레퍼런스 사이트 추천 15곳: 경쟁사 광고 소재를 실시간으로 보는 법
• 영상광고 레퍼런스 사이트: TVC 아카이브와 유튜브 채널 12곳

광고를 볼 때는 “예쁜가”보다 첫 장면에서 무엇을 약속하는지, 제품·고객·CTA가 어떤 순서로 나오는지를 기록해 보세요. 그 기록이 다음 소재의 브리프가 됩니다.

브랜딩·패키지·편집 레퍼런스: 결과보다 적용 장면을 보기

브랜드 레퍼런스는 로고 한 장에서 끝나면 실제 작업에 옮기기 어렵습니다. 색·타입·이미지·문장·패키지·공간·디지털 화면이 같은 방향을 가리키는지까지 보는 편이 낫습니다.

• Brand New — 로고·아이덴티티·브랜딩 프로젝트를 사례와 의견 중심으로 다룹니다.
• Packaging of the World — 제품군과 국가, 디자이너 정보를 단서로 패키지 사례를 찾아볼 수 있습니다.
• Behance — 브랜드 프로젝트의 전체 적용물과 과정 설명을 함께 읽을 수 있습니다.

이미 발행한 관련 글

• 포스터·편집 디자인 스튜디오 15곳, 워크룸부터 펜타그램까지
• 국내 공간 브랜딩 에이전시 30곳
• 해외 가구 브랜드 20곳, 허먼 밀러부터 프리츠 한센까지
• 브랜딩 에이전시 고르는 법: 포트폴리오보다 먼저 확인할 7가지

레퍼런스를 내 작업으로 가져오는 법

레퍼런스는 답안지가 아닙니다. 한 사례를 저장했다면 다음 세 가지를 같이 적어두세요.

1. 무엇이 눈에 들어왔는가 — 색, 타이포그래피, 이미지, 움직임처럼 관찰 가능한 요소
2. 왜 이 작업에 맞았는가 — 브랜드의 성격, 사용자의 상황, 매체의 제약
3. 내 프로젝트에서는 무엇을 바꿔야 하는가 — 그대로 가져올 수 없는 전제와 새로 정해야 할 조건

이 세 단계를 거치면 레퍼런스는 스크랩이 아니라 판단 재료가 됩니다. 필요한 분야의 아카이브를 먼저 열고, 한 장면이 아니라 그 장면을 가능하게 한 구조까지 읽어보면 다음 화면과 다음 캠페인을 더 빠르게 결정할 수 있습니다.

질문 하나를 결정 메모로 바꾸기

예를 들어 데모 신청 페이지에서 망설임이 생긴다면 랜딩페이지 글을 먼저 열고, 사례 세 곳에서 신청 전에 어떤 조건을 보여주는지 비교해 보세요. 신청 뒤 첫 사용이 막힌다면 레퍼런스 종류를 바꿔 온보딩 UX 사례에서 첫 가치까지 필요한 행동을 살펴보는 편이 맞아요. 저장할 때는 내 문제, 참고한 해결 방식, 그대로 옮길 수 없는 조건을 한 줄씩 적으면 됩니다.