디자인 레퍼런스 사이트 추천: 웹·UI·광고·브랜딩 가이드 (2026)

디자인 레퍼런스 사이트를 찾을 때 가장 먼저 정해야 할 것은 취향이 아니라 작업의 질문입니다. 랜딩페이지의 정보 순서가 막힌 것인지, 앱의 결제 플로우가 어려운 것인지, 브랜드가 실제 접점에서 어떻게 유지되는지 보고 싶은 것인지에 따라 먼저 열어야 할 곳이 다릅니다.

이 글은 웹·UI/UX·광고·브랜딩·패키지·편집 디자인을 위한 디자인 레퍼런스 사이트 허브입니다. 한곳에서 모든 답을 찾기보다, 필요한 순간에 맞는 아카이브로 바로 갈 수 있게 정리했습니다.

먼저 고를 질문

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

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

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

웹/UI 디자인 레퍼런스 사이트 가이드
화면 단위, 컴포넌트 단위, 플로우 단위로 탐색하는 방법을 정리하는 후속 글입니다. 발행 후 이 자리에서 연결합니다.

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

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

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

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

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

브랜드·패키지 디자인 레퍼런스 사이트 가이드
로고가 아니라 제품, 패키지, 편집물, 디지털 접점까지 하나의 시스템으로 관찰하는 기준을 정리하는 후속 글입니다. 발행 후 이 자리에서 연결합니다.

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

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