웹디자인 참고 사이트 모음: 카테고리별 추천 15선 (2026년)

이 가이드에서는 웹디자인 작업 시 실무에서 자주 활용되는 참고 사이트를 카테고리별로 정리합니다. 어워드 사이트부터 레퍼런스 갤러리, 색상·폰트·아이콘 리소스까지 목적에 맞게 골라 사용할 수 있도록 구성했습니다.

웹디자인 참고 사이트를 카테고리로 나눠야 하는 이유

웹디자인 참고 사이트는 크게 네 가지 목적으로 나뉩니다. 어워드 수상작을 통한 고퀄리티 트렌드 파악, 레퍼런스 갤러리를 통한 업종별 사례 수집, 컬러·폰트·아이콘 리소스 확보, 인터랙션·모션 아이디어 수집이 대표적입니다.

목적 없이 여러 사이트를 돌아다니면 시간만 낭비됩니다. 원하는 결과물의 방향을 먼저 정한 뒤, 해당 카테고리 사이트를 집중적으로 활용하는 것이 효율적입니다.

디자인 방향을 설정하는 단계라면 웹디자인 컨셉 잡는 4단계 프로세스 가이드를 먼저 참고하면 레퍼런스 수집이 더 효과적입니다.

어워드 사이트: 최고 수준의 디자인을 확인할 때

어워드 사이트는 전 세계 최상위 웹디자인 수상작을 모아놓은 갤러리입니다. 트렌드를 파악하거나 클라이언트에게 높은 퀄리티의 예시를 제시할 때 활용합니다.

Awwwards (어워즈)

세계적으로 가장 권위 있는 웹디자인 어워드 플랫폼입니다. 매일 새로운 사이트가 심사되며 Site of the Day, Site of the Year 등 수상작을 확인할 수 있습니다.

• URL: awwwards.com
• 특징: 디자인·유용성·창의성·콘텐츠 기준 종합 평가
• 활용법: Collections 탭에서 업종별 필터링 가능

CSS Design Awards

CSS 기반 인터랙션과 비주얼 완성도에 집중하는 어워드 사이트입니다. 모션과 타이포그래피 중심의 실험적인 작업이 많아 인터랙티브 디자인 레퍼런스로 적합합니다.

• URL: cssdesignawards.com
• 특징: 기술적 구현 난이도가 높은 사이트 위주
• 활용법: Innovation Award 수상작 중심으로 탐색

The FWA (Favourite Website Awards)

2000년부터 운영된 오래된 웹디자인 어워드입니다. 브랜드 캠페인 사이트와 실험적 인터랙션 작업이 많습니다.

• URL: thefwa.com
• 특징: 브랜드 캠페인 사이트 레퍼런스에 강점

레퍼런스 갤러리: 업종별 사례를 수집할 때

레퍼런스 갤러리는 실제 운영 중인 사이트를 카테고리별로 모아놓은 아카이브입니다. 업종이나 스타일별로 필터링할 수 있어 클라이언트 제안이나 기획 단계에서 특히 유용합니다.

Land-book

랜딩페이지와 홈페이지 디자인을 모아놓은 갤러리입니다. SaaS, 에이전시, 포트폴리오 등 카테고리별로 정리되어 있어 원하는 스타일을 빠르게 찾을 수 있습니다.

• URL: land-book.com
• 특징: 깔끔한 UI의 실용적 사이트 위주
• 활용법: 색상 팔레트·레이아웃 패턴 파악에 적합

Siteinspire

미니멀하고 타이포그래피 중심의 사이트를 엄선해 소개하는 큐레이션 갤러리입니다. 디자인 에이전시·스튜디오 사이트 레퍼런스가 많습니다.

• URL: siteinspire.com
• 특징: Style, Type, Subject 기준 필터 제공
• 활용법: 고급스러운 B2B·에이전시 사이트 참고에 적합

Httpster

실제 운영 중인 사이트를 카테고리별로 수집한 갤러리입니다. 국내외 다양한 업종의 사이트를 볼 수 있어 업종별 참고에 유리합니다.

• URL: httpster.net
• 특징: 비교적 접근하기 쉬운 디자인 수준의 사이트 포함
• 활용법: 실제 구현 가능한 디자인 레퍼런스 탐색에 적합

Lapa Ninja

랜딩페이지 디자인 전문 갤러리입니다. 색상, 카테고리, 레이아웃 스타일별로 검색할 수 있어 랜딩페이지 기획 시 빠르게 활용할 수 있습니다.

• URL: lapa.ninja
• 특징: 랜딩페이지 특화 아카이브
• 활용법: 히어로 섹션·CTA 구성 패턴 참고에 적합

컬러·폰트·아이콘 리소스: 디자인 요소를 찾을 때

직접 사용할 수 있는 디자인 에셋(asset)을 제공하는 사이트입니다. 색상 팔레트 생성, 폰트 조합, 아이콘 다운로드 등 실무에서 반복적으로 사용됩니다.

Coolors

색상 팔레트를 자동 생성해 주는 도구입니다. 스페이스바를 누를 때마다 새로운 조합이 생성되며, 특정 색상을 고정하고 나머지를 변경하는 기능이 실용적입니다.

• URL: coolors.co
• 특징: 색상 추출, 대비 확인, 팔레트 저장 기능 제공
• 활용법: 브랜드 컬러 기반으로 보조 색상 조합 탐색

Google Fonts

구글이 제공하는 무료 웹폰트 라이브러리입니다. 1,500개 이상의 폰트를 제공하며, 한국어 폰트도 포함되어 있습니다. 웹사이트에 직접 임베드해 사용할 수 있습니다.

• URL: fonts.google.com
• 특징: 무료·상업적 이용 가능, CDN 방식 임베드 지원
• 활용법: 본문용·제목용 폰트 조합 미리보기 기능 활용

Heroicons / Phosphor Icons

SVG 형식의 오픈소스 아이콘 라이브러리입니다. 크기 조정이 자유롭고 색상 변경이 쉬워 웹디자인에 바로 적용할 수 있습니다.

• Heroicons URL: heroicons.com
• Phosphor Icons URL: phosphoricons.com
• 특징: MIT 라이선스, 상업적 이용 가능
• 활용법: UI 구성 요소에 시각적 보조 역할로 활용

인터랙션·모션 레퍼런스: 동적 요소 아이디어가 필요할 때

스크롤 인터랙션, 호버 효과, 페이지 전환 애니메이션 등 동적 요소에 대한 아이디어를 얻을 수 있는 사이트입니다.

Codrops

CSS·JavaScript를 활용한 UI 컴포넌트와 인터랙션 튜토리얼을 제공하는 사이트입니다. 구현 방법까지 함께 제공되어 개발자와 협업할 때 유용합니다.

• URL: tympanus.net/codrops
• 특징: 소스 코드 포함 제공, 데모 확인 가능
• 활용법: 원하는 인터랙션 효과를 개발팀에 레퍼런스로 전달할 때 활용

UI Movement

실제 앱·웹의 UI 인터랙션 영상을 수집한 갤러리입니다. 버튼, 네비게이션, 카드, 폼 등 컴포넌트별로 탐색할 수 있습니다.

• URL: uimovement.com
• 특징: 컴포넌트 단위 인터랙션 영상 제공
• 활용법: 특정 UI 요소의 동작 방식 아이디어 수집

상황별 추천 사이트 요약

어떤 상황에서 어떤 사이트를 활용해야 하는지 정리했습니다.

정리

웹디자인 참고 사이트는 목적에 따라 구분해서 활용할 때 효과가 큽니다. 모든 사이트를 돌아다니기보다, 현재 작업 단계에 맞는 카테고리의 사이트를 선별해 집중적으로 탐색하는 것을 권장합니다.