메인 화면 · HERO

Supahero

첫 화면의 제목·보조문장·CTA·비주얼 배치를 비교하기 좋은 히어로 섹션 라이브러리입니다.

원본 사이트 보기 ↗

사이트 구조 · NAVBAR

Navbar Gallery

정적·스티키·드롭다운·메가메뉴·사이드바·검색·전체화면 메뉴 패턴을 유형별로 살펴봅니다.

원본 사이트 보기 ↗

사이트 구조 · FOOTER

Footer.design

사이트 마지막에 브랜드·연락처·주요 메뉴·뉴스레터·법적 정보를 어떻게 정리하는지 비교합니다.

원본 사이트 보기 ↗

페이지 구성 · SECTION

Unsection

히어로·기능·후기·CTA·블로그·FAQ·팀·연락처 등 페이지 섹션별 구성 사례를 빠르게 비교합니다.

원본 사이트 보기 ↗

메인 화면 · LANDING

Lapa Ninja

랜딩페이지의 메시지 흐름, 카드 배치, 전환 버튼과 업종별 화면 분위기를 한눈에 참고할 수 있습니다.

원본 사이트 보기 ↗

전체 디자인 · GALLERY

SiteInspire

업종·스타일·유형별 완성 사이트를 보면서 색상·타이포그래피·여백·콘텐츠 밀도를 비교합니다.

원본 사이트 보기 ↗

UI · COMPONENT

UIverse

버튼·카드·입력창 등 오픈소스 UI 컴포넌트를 실제 화면에 적용하기 전에 형태와 상태를 비교합니다.

사이트 보기 ↗

TYPOGRAPHY

Google Fonts

한글·영문 글꼴의 조합, 굵기와 가독성을 확인하고 홈페이지의 제목·본문 위계를 설계합니다.

사이트 보기 ↗

COLOR SYSTEM

Coolors

브랜드 주조색·보조색·배경색 조합을 만들고 버튼·카드·링크에 적용할 색상 규칙을 정합니다.

사이트 보기 ↗

ICON · UI

Lucide Icons

상업적 프로젝트에도 활용하기 쉬운 오픈 아이콘을 검색해 메뉴·버튼·상태 표시의 일관성을 맞춥니다.

사이트 보기 ↗

IMAGE · CONTENT

Unsplash

히어로·서비스·사례 영역에 사용할 사진의 분위기와 비율을 정하고 이미지 중심 레이아웃을 참고합니다.

사이트 보기 ↗

ACCESSIBILITY

WebAIM Contrast Checker

텍스트와 배경의 대비를 점검해 작은 글씨·버튼·링크가 다양한 사용자에게 읽히는지 확인합니다.

사이트 보기 ↗

RESPONSIVE · LAYOUT

Bootstrap Examples

반응형 그리드·내비게이션·폼·카드 등 자주 쓰는 웹 화면의 기본 구조와 모바일 대응을 참고합니다.

사이트 보기 ↗

WEB STANDARD

W3C WAI

대체텍스트·키보드 사용·명확한 제목과 같은 웹 접근성 원칙을 공개 전 점검 기준으로 활용합니다.

사이트 보기 ↗