Hero Section
페이지 상단의 대형 섹션으로 주요 메시지와 비주얼을 강력하게 전달합니다.
- YEAR
- 2010s
#6366F1
- 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
Classic Hero Section
중앙 정렬된 클래식 히어로 섹션
Build Something Amazing
Create beautiful, modern websites with our powerful design tools
Split Hero Section
이미지와 콘텐츠가 분리된 히어로
Launch Your Product
Everything you need to bring your ideas to life. Fast, reliable, and scalable.
Full-Screen Hero
전체 화면 히어로 섹션
Welcome to the Future
Experience the next generation of design and technology
Minimal Hero
미니멀한 히어로 섹션
Simple. Powerful. Beautiful.
The only tool you need to create stunning designs
Video Background Hero
비디오 배경이 있는 히어로 섹션
See It In Action
Watch how our platform transforms the way you work
Hero with Features
주요 기능을 강조하는 히어로
Everything You Need
All-in-one platform for modern teams
Fast
Lightning-fast performance
Secure
Enterprise-grade security
Scalable
Grows with your business
이웃 스타일
어디에 쓰나
실제로 쓰는 곳
- Stripe 랜딩 페이지
- Airbnb 메인
- Apple 제품 페이지
사용 사례
- SaaS 랜딩 페이지
- 이커머스 메인 배너
- 포트폴리오 첫 화면
- 이벤트 등록 페이지
이런 프로젝트에 맞습니다
- SaaS 랜딩
- 이커머스 메인
- 포트폴리오 첫 화면
- 이벤트 등록 페이지
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 첫인상
- 명확한 메시지
- 행동 유도
주요 특징
- 대형 이미지/비디오
- 명확한 헤드라인
- 강력한 CTA
- 시선 집중
- 브랜드 메시지 전달
장점과 한계
장점
- 첫 방문자에게 강력한 첫인상
- 브랜드 메시지를 즉각 전달
- 전환율(CTA 클릭) 향상에 효과적
한계
- 스크롤을 유도하지 못하면 이탈 발생
- 대형 배경 이미지·비디오로 로딩 속도 저하
- 모바일에서 표현력 제한
컬러 시스템
강렬한 첫인상을 위한 색상. 전체 페이지 중 가장 강한 색상 대비와 임팩트
색의 역할
- hero-background: 브랜드 색 또는 강렬한 이미지/그라데이션
- hero-text: 배경 위 최고 대비 색 (주로 흰색)
- cta-button: 배경과 강하게 대비되는 색 — 페이지에서 가장 눈에 띄어야 함
- subtext: hero-text보다 약간 낮은 대비 — 보조 설명
제약
- CTA 버튼이 배경에 묻히면 안 됨 — 가장 강한 대비 확보
- hero 배경 너무 복잡하면 텍스트 가독성 저하
다크모드 — hero 배경 어둡게 또는 다크 이미지로 교체
명도 대비 — hero 텍스트 WCAG AA 이상 — 이미지 배경 위는 text-shadow 또는 overlay로 보완
타이포그래피
브랜드를 가장 잘 표현하는 폰트. hero는 최초이자 가장 강한 인상
글꼴은 최대 2종 · 스케일 비율 1.5 이상
- hero heading 매우 크게 (48px 이상 권장)
- subtext는 heading과 충분한 크기 차이
설계 제약
반드시 포함
- 명확한 headline
- 강한 CTA 버튼 (1~2개)
- above-the-fold 완결 — 스크롤 없이 핵심 전달
하지 말 것
- 약한 CTA 버튼 금지 — hero의 목적은 CTA 클릭
- 텍스트 없는 hero 금지 — 최소 headline + CTA
- 배경 이미지 위 텍스트 대비 미확보 금지
모션 — 페이지 진입 시 hero 요소 순차 fade-in. headline → subtext → CTA 순서. 500ms 이내 완료.
자주 묻는 질문
Hero Section이란 무엇인가요?
페이지 상단의 대형 섹션으로 주요 메시지와 비주얼을 강력하게 전달합니다.
Hero Section의 핵심 디자인 원칙은 무엇인가요?
Hero Section의 핵심 원칙은 첫인상, 명확한 메시지, 행동 유도입니다.
Hero Section은 어떤 프로젝트에 적합한가요?
Hero Section은 SaaS 랜딩 페이지, 이커머스 메인 배너, 포트폴리오 첫 화면, 이벤트 등록 페이지, SaaS 랜딩, 이커머스 메인, 포트폴리오 첫 화면, 이벤트 등록 페이지 등의 프로젝트에 적합합니다.
Hero Section의 장단점은 무엇인가요?
장점으로는 첫 방문자에게 강력한 첫인상, 브랜드 메시지를 즉각 전달, 전환율(CTA 클릭) 향상에 효과적이 있습니다. 단점으로는 스크롤을 유도하지 못하면 이탈 발생, 대형 배경 이미지·비디오로 로딩 속도 저하, 모바일에서 표현력 제한이 있습니다.
Hero Section에서 색상은 어떻게 사용하나요?
강렬한 첫인상을 위한 색상. 전체 페이지 중 가장 강한 색상 대비와 임팩트 색상 역할은 hero-background: 브랜드 색 또는 강렬한 이미지/그라데이션, hero-text: 배경 위 최고 대비 색 (주로 흰색), cta-button: 배경과 강하게 대비되는 색 — 페이지에서 가장 눈에 띄어야 함입니다. 주의사항: CTA 버튼이 배경에 묻히면 안 됨 — 가장 강한 대비 확보, hero 배경 너무 복잡하면 텍스트 가독성 저하.
Hero Section에 어울리는 폰트 스타일은 무엇인가요?
Hero Section에는 브랜드를 가장 잘 표현하는 폰트. hero는 최초이자 가장 강한 인상 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: hero heading 매우 크게 (48px 이상 권장), subtext는 heading과 충분한 크기 차이.
Hero Section 디자인에서 하면 안 되는 것은 무엇인가요?
Hero Section에서 피해야 할 것: 약한 CTA 버튼 금지 — hero의 목적은 CTA 클릭, 텍스트 없는 hero 금지 — 최소 headline + CTA, 배경 이미지 위 텍스트 대비 미확보 금지.
Hero Section을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Hero Section을 적용한 대표적인 제품·서비스로는 Stripe 랜딩 페이지, Airbnb 메인, Apple 제품 페이지 등이 있습니다.