# Hero Section — 디자인 스타일 가이드

## 기본 정보
- **ID**: hero-section
- **카테고리**: ui-pattern
- **연도**: 2010s

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

## 핵심 원칙
- 첫인상
- 명확한 메시지
- 행동 유도

## 주요 특징
- 대형 이미지/비디오
- 명확한 헤드라인
- 강력한 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 제품 페이지

## 관련 스타일
- [z-pattern](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)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

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

### 헤더
- background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)
- textColor: #FFFFFF
- accentColor: #EC4899

### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 800
- bodyWeight: 400
- letterSpacing: -0.02em

### 스페이싱
- unit: 8px
- scale: 2

### 그림자 (Shadows)
- sm: 0 1px 2px rgba(0, 0, 0, 0.05)
- md: 0 4px 6px rgba(0, 0, 0, 0.1)
- lg: 0 10px 15px rgba(0, 0, 0, 0.1)
- xl: 0 25px 50px rgba(0, 0, 0, 0.15)

### Border Radius
- none: 0
- sm: 6px
- md: 12px
- lg: 20px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E5E7EB

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.3s ease

### 애니메이션
- duration: 300ms
- easing: ease

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=pill / style=solid
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24

### 레이아웃
- containerStyle: boxed
- sectionSpacing: spacious

### 특수 효과
- glassmorphism: false
- gradientText: true
- animatedBackground: false
- scanlines: false
- noise: false

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=hero-section
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=hero-section&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Hero Section

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

연도

2010s

#6366F1

핵심 원칙

1

첫인상

2

명확한 메시지

3

행동 유도

주요 특징

  • 대형 이미지/비디오
  • 명확한 헤드라인
  • 강력한 CTA
  • 시선 집중
  • 브랜드 메시지 전달

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

실제 사용 예시

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

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 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

미니멀한 히어로 섹션

✨ New Feature

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

관련 스타일 탐색

Z-Pattern Layout

시선이 Z자 형태로 움직이도록 설계된 레이아웃 패턴입니다.

Storytelling Design

스크롤과 애니메이션을 활용하여 이야기를 전달합니다.

Parallax Scrolling

배경과 전경이 다른 속도로 움직여 깊이감과 몰입감을 제공하는 스크롤 기법입니다.