웹사이트 폰트, 컬러, 애니메이션 사이트 모음
웹디자인 참고 사이트에서 전체적인 스타일 방향을 잡았다면, 다음 단계는 구체적인 디자인 요소별 레퍼런스를 수집하는 것입니다. 이 가이드에서는 컬러, 타이포그래피, 레이아웃, 인터랙션 등 디자인 요소별로 특화된 레퍼런스 사이트를 정리합니다.
참고 사이트와 레퍼런스 사이트의 차이
참고 사이트는 “어떤 느낌의 홈페이지를 만들까?”를 결정할 때 사용합니다. Awwwards, Behance, GDWEB 같은 곳에서 전체적인 디자인 스타일과 방향을 잡는 단계입니다.
레퍼런스 사이트는 “이 요소를 구체적으로 어떻게 디자인할까?”를 결정할 때 사용합니다. 색상 조합, 폰트 선택, 버튼 스타일, 애니메이션 효과 등 세부 요소를 결정하는 단계에서 활용합니다.
ℹ️ 참고
전체적인 디자인 방향을 잡기 위한 참고 사이트 목록은 웹디자인 참고 사이트 10선을 확인하세요.
컬러 레퍼런스 사이트
Coolors
스페이스바를 누르면 조화로운 색상 팔레트가 자동 생성되는 도구입니다. 마음에 드는 색상은 고정하고 나머지만 변경할 수 있어, 브랜드 메인 컬러를 기준으로 보조 색상을 찾을 때 유용합니다. 생성된 팔레트는 HEX, RGB 코드와 함께 바로 내보내기가 가능합니다.
Adobe Color
색상 이론(보색, 유사색, 삼각 배색 등)에 기반한 팔레트를 생성할 수 있습니다. ‘탐색’ 탭에서는 다른 디자이너들이 만든 인기 팔레트를 확인할 수 있고, 이미지를 업로드하면 해당 이미지에서 색상을 자동 추출해줍니다.
Color Hunt
4색 팔레트를 큐레이션하는 사이트로, 트렌디/파스텔/빈티지/다크 등 분위기별로 분류되어 있습니다. 디자인 전문 지식 없이도 분위기에 맞는 색상 조합을 빠르게 찾을 수 있어 비전공자에게 특히 추천합니다.
💡 실무 팁
에이전시에 디자인을 의뢰할 때, 원하는 색상 팔레트를 HEX 코드(#FFFFFF 형식)로 전달하면 의도한 색감을 정확하게 반영받을 수 있습니다.
타이포그래피 레퍼런스 사이트
Google Fonts
무료로 사용할 수 있는 웹 폰트 라이브러리입니다. 한국어 폰트(Noto Sans KR, Pretendard 등)도 다수 포함되어 있으며, 폰트를 선택한 뒤 바로 웹사이트에 적용할 수 있는 코드를 제공합니다. 기업 홈페이지에 가장 많이 사용되는 폰트 소스입니다.
Typewolf
실제 웹사이트에서 사용된 폰트 조합을 분석해 보여주는 사이트입니다. 제목 폰트와 본문 폰트를 어떻게 조합했는지 실사례로 확인할 수 있어, “이 사이트에서 쓴 폰트가 뭐지?” 궁금할 때 유용합니다.
눈누 (Noonnu)
상업적 무료 사용이 가능한 한글 폰트만 모아놓은 사이트입니다. 라이선스 정보가 명확하게 표기되어 있어, 기업 홈페이지에 안심하고 적용할 수 있는 한글 폰트를 찾을 때 필수적으로 확인해야 하는 곳입니다.
레이아웃·구조 레퍼런스 사이트
Land-book
랜딩페이지와 홈페이지 디자인을 유형별로 모아놓은 갤러리입니다. SaaS, Agency, Portfolio 등 업종별 필터와 함께, 색상·스타일별 필터도 제공합니다. 메인 페이지의 섹션 구성과 CTA(Call to Action) 배치를 참고하기에 적합합니다.
One Page Love
한 페이지로 구성된 웹사이트(원페이지 사이트)를 전문으로 큐레이션합니다. 스크롤 하나로 모든 정보를 전달해야 하는 랜딩페이지나 소규모 기업 사이트를 기획할 때 섹션 배치 순서와 정보 구조를 참고하기 좋습니다.
Saaspo
SaaS(서비스형 소프트웨어) 웹사이트 디자인을 전문으로 수집하는 사이트입니다. 가격 페이지, 기능 소개 페이지, FAQ 페이지 등 페이지 유형별로 분류되어 있어, 특정 페이지의 구조를 기획할 때 직접적인 참고가 됩니다.
인터랙션·애니메이션 레퍼런스 사이트
60fps.design
부드러운 전환 효과와 모션 디자인이 적용된 웹사이트를 큐레이션합니다. 스크롤 애니메이션, 호버 효과, 페이지 전환 등 동적 요소가 잘 구현된 사례를 확인할 수 있습니다. “우리 사이트에도 이런 움직임을 넣고 싶다”는 요청을 할 때 레퍼런스로 전달하기에 적합합니다.
LottieFiles
가벼운 웹 애니메이션(Lottie) 파일을 무료로 제공하는 플랫폼입니다. 로딩 화면, 아이콘 애니메이션, 상태 표시 등에 활용할 수 있는 애니메이션을 검색하고 바로 다운로드할 수 있습니다.
⚠️ 주의
과도한 애니메이션은 오히려 사용자 경험을 해칩니다. 특히 모바일 환경에서는 페이지 로딩 속도에 영향을 줄 수 있으므로, 인터랙션 요소는 핵심 영역에만 선택적으로 적용하는 것이 좋습니다.
디자인 시스템 레퍼런스
Material Design (Google)
Google이 공개한 디자인 시스템으로, 버튼, 입력 필드, 카드, 내비게이션 등 UI 컴포넌트의 설계 원칙과 사용 가이드라인을 제공합니다. “이 버튼의 크기와 여백을 어떻게 잡아야 하지?”와 같은 세부 규격이 필요할 때 참고하기 좋습니다.
Apple Human Interface Guidelines
Apple의 UI 디자인 원칙을 정리한 가이드라인입니다. 접근성, 타이포그래피, 색상 활용 등에 대한 체계적인 기준을 제공하며, 사용자 중심 디자인의 교과서로 활용됩니다.
💡 실무 팁
홈페이지 제작을 에이전시에 의뢰할 때는 “전체 분위기 레퍼런스 2~3개 + 요소별 레퍼런스(색상, 폰트, 레이아웃) 각 1~2개”를 정리해서 전달하면 커뮤니케이션이 훨씬 수월합니다. 레퍼런스가 너무 많으면 오히려 방향이 흐려질 수 있으니, 핵심만 간추려 전달하세요.
정리
📋 핵심 정리
- 레퍼런스 사이트는 디자인의 세부 요소(컬러, 폰트, 레이아웃, 인터랙션)를 결정할 때 활용합니다.
- 컬러는 Coolors·Adobe Color, 폰트는 Google Fonts·눈누, 레이아웃은 Land-book·Saaspo를 각각 참고하세요.
- 디자인 시스템(Material Design, Apple HIG)은 UI 컴포넌트의 규격과 원칙을 확인하는 데 유용합니다.
- 에이전시에 의뢰할 때는 전체 분위기 + 요소별 레퍼런스를 함께 정리해 전달하면 효과적입니다.