# Hero Section

> 페이지 상단의 대형 섹션으로 주요 메시지와 비주얼을 강력하게 전달합니다.

- 층: 아카이브 (UI 패턴)
- ID: hero-section
- 연도: 2010s
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/hero-section

## 정의

페이지 상단의 대형 섹션으로 주요 메시지와 비주얼을 강력하게 전달합니다.

## 주요 특징

- 대형 이미지/비디오
- 명확한 헤드라인
- 강력한 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과 충분한 크기 차이

## 설계 제약

### 하면 안 되는 것

- 약한 CTA 버튼 금지 — hero의 목적은 CTA 클릭
- 텍스트 없는 hero 금지 — 최소 headline + CTA
- 배경 이미지 위 텍스트 대비 미확보 금지

### 반드시 포함할 것

- 명확한 headline
- 강한 CTA 버튼 (1~2개)
- above-the-fold 완결 — 스크롤 없이 핵심 전달

### 모션 가이드

페이지 진입 시 hero 요소 순차 fade-in. headline → subtext → CTA 순서. 500ms 이내 완료.

## 사용 사례

- SaaS 랜딩 페이지
- 이커머스 메인 배너
- 포트폴리오 첫 화면
- 이벤트 등록 페이지

## 추천 프로젝트 유형

- SaaS 랜딩
- 이커머스 메인
- 포트폴리오 첫 화면
- 이벤트 등록 페이지

## 장단점

### 장점

- 첫 방문자에게 강력한 첫인상
- 브랜드 메시지를 즉각 전달
- 전환율(CTA 클릭) 향상에 효과적

### 단점·한계

- 스크롤을 유도하지 못하면 이탈 발생
- 대형 배경 이미지·비디오로 로딩 속도 저하
- 모바일에서 표현력 제한

## 실제 사용 제품·서비스

- Stripe 랜딩 페이지
- Airbnb 메인
- Apple 제품 페이지

## 자주 묻는 질문

### Q1. Hero Section이란 무엇인가요?

페이지 상단의 대형 섹션으로 주요 메시지와 비주얼을 강력하게 전달합니다.

### Q2. Hero Section의 핵심 디자인 원칙은 무엇인가요?

Hero Section의 핵심 원칙은 첫인상, 명확한 메시지, 행동 유도입니다.

### Q3. Hero Section은 어떤 프로젝트에 적합한가요?

Hero Section은 SaaS 랜딩 페이지, 이커머스 메인 배너, 포트폴리오 첫 화면, 이벤트 등록 페이지, SaaS 랜딩, 이커머스 메인, 포트폴리오 첫 화면, 이벤트 등록 페이지 등의 프로젝트에 적합합니다.

### Q4. Hero Section의 장단점은 무엇인가요?

장점으로는 첫 방문자에게 강력한 첫인상, 브랜드 메시지를 즉각 전달, 전환율(CTA 클릭) 향상에 효과적이 있습니다. 단점으로는 스크롤을 유도하지 못하면 이탈 발생, 대형 배경 이미지·비디오로 로딩 속도 저하, 모바일에서 표현력 제한이 있습니다.

### Q5. Hero Section에서 색상은 어떻게 사용하나요?

강렬한 첫인상을 위한 색상. 전체 페이지 중 가장 강한 색상 대비와 임팩트 색상 역할은 hero-background: 브랜드 색 또는 강렬한 이미지/그라데이션, hero-text: 배경 위 최고 대비 색 (주로 흰색), cta-button: 배경과 강하게 대비되는 색 — 페이지에서 가장 눈에 띄어야 함입니다. 주의사항: CTA 버튼이 배경에 묻히면 안 됨 — 가장 강한 대비 확보, hero 배경 너무 복잡하면 텍스트 가독성 저하.

### Q6. Hero Section에 어울리는 폰트 스타일은 무엇인가요?

Hero Section에는 브랜드를 가장 잘 표현하는 폰트. hero는 최초이자 가장 강한 인상 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: hero heading 매우 크게 (48px 이상 권장), subtext는 heading과 충분한 크기 차이.

### Q7. Hero Section 디자인에서 하면 안 되는 것은 무엇인가요?

Hero Section에서 피해야 할 것: 약한 CTA 버튼 금지 — hero의 목적은 CTA 클릭, 텍스트 없는 hero 금지 — 최소 headline + CTA, 배경 이미지 위 텍스트 대비 미확보 금지.

### Q8. Hero Section을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Hero Section을 적용한 대표적인 제품·서비스로는 Stripe 랜딩 페이지, Airbnb 메인, Apple 제품 페이지 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #6366F1
- secondary: #8B5CF6
- accent: #EC4899
- background: #FFFFFF
- surface: #F9FAFB
- text: #111827
- textSecondary: #6B7280
- border: #E5E7EB

### 타이포그래피

- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 800
- bodyWeight: 400
- letterSpacing: -0.02em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 2
- borderRadius: sm 6px / md 12px / lg 20px / full 9999px
- shadow sm: 0 1px 2px rgba(0, 0, 0, 0.05)
- shadow md: 0 4px 6px rgba(0, 0, 0, 0.1)
- shadow lg: 0 10px 15px rgba(0, 0, 0, 0.1)
- border: 1px solid #E5E7EB

### 컴포넌트 형태

- button: rounded / hover lift / text none
- card: elevated / hover lift
- input: outlined / focus ring
- badge: pill / solid
- icon: lucide / stroke 1.5 / size 24px
- layout: boxed / section spacious
- animation: 300ms ease
- specialEffects: gradientText

## 관련 링크

### 관련 스타일

- [Z-Pattern Layout](https://ui.buildersgate.com/styles/z-pattern)
- [Storytelling Design](https://ui.buildersgate.com/styles/storytelling-design)
- [Parallax Scrolling](https://ui.buildersgate.com/styles/parallax-scrolling)

---

HTML 버전: https://ui.buildersgate.com/styles/hero-section

이 문서는 https://ui.buildersgate.com/styles/hero-section.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.