영웅 디자인 시스템

영웅 디자인 시스템은(는) 무엇을 하나요?

목적

영웅 디자인 시스템은 웹페이지의 가장 중요한 공간인 도입부 섹션을 설계하기 위한 방법론을 제공합니다. 성장(Growth) 카테고리의 hero-section-optimization이 메시지와 전환에 초점을 맞추는 반면, 이 디자인 시스템은 영웅의 시각적 해부학(visual anatomy), 공간 구성(spatial composition), 그리고 **레이어링(layering)**에 중점을 둡니다. 콘텐츠와 비주얼이 조화를 이루어 브랜드 권위를 확립하고, 시각적 위계를 유지하며, 모든 기기 유형에서 사용자의 시선을 주요 행동으로 안내하도록 보장합니다.

사용 사례

• 홈페이지 및 랜딩 페이지의 주요 진입점 설계.
• 심층 제품 또는 서비스 페이지를 위한 "서브 영웅(Sub-Hero)" 인트로 생성.
• 다중 페이지 사이트에서 일관된 도입부 패턴 구축.
• 텍스트, 이미지, 인터랙티브 요소의 복잡한 레이어링 관리.
• 몰입형, 미디어 중심의 도입부를 위한 반응형 적응 설계.

사용하지 말아야 할 경우

• 전역 사이트 내비게이션: 지속적인 헤더에는 site-navigation-system을 사용하세요.
• 페이지 수준 길 찾기: 메타데이터를 충격보다 우선시하는 유틸리티 중심 인트로(예: 대시보드 또는 설정)에는 page-header-system을 사용하세요.
• 콘텐츠 기사: 간단한 헤드라인과 바이라인에 초점을 맞춘 경우 표준 타이포그래피 또는 page-header-system을 사용하세요.
• 모달 또는 오버레이: 임시 인터페이스 레이어에는 overlay-and-dialog-system을 사용하세요.

입력값

1. 콘텐츠 우선순위: 헤드라인(H1), 서브헤드라인, 기본 CTA.
2. 시각적 자산: 사진, 일러스트레이션, 비디오 또는 추상 패턴.
3. 레이아웃 모드: 분할(Split), 중앙 정렬(Centered), 전체 너비(Full-Bleed) 중 어떤 구성인가?
4. 유동적 간격 시스템: 일관된 여백, 패딩 및 수직 리듬을 위해.
5. 브랜드 팔레트: 배경 처리 및 오버레이 가독성을 위해.

출력값

1. 영웅 해부학 명세: 콘텐츠 영역(인트로, 핵심, 액션, 비주얼)의 정의.
2. 구성 청사진: 정렬(왼쪽 vs. 중앙) 및 미디어 관계에 대한 규칙.
3. 시각적 레이어링 전략: 텍스트 오버레이, 스크림 및 깊이에 대한 규칙.
4. 반응형 변환 맵: 영웅이 가로 방향에서 세로 방향 뷰포트로 어떻게 적응하는지.

워크플로우

1. 구성 패턴 선택

콘텐츠와 미디어 간의 관계에 따라 패턴을 선택하세요:

• 분할(50/50): 한쪽에는 텍스트, 다른 쪽에는 비주얼. 명확성과 기술 제품에 가장 적합합니다.
• 중앙 스택: 모든 콘텐츠가 중앙에 정렬되며, 종종 배경 이미지나 비디오와 함께 사용됩니다. 강력하고 임팩트 있는 문구에 가장 적합합니다.
• 인세트 콘텐츠: 콘텐츠가 전체 너비 배경 위에 있는 포함된 상자 안에 위치합니다. 프리미엄 또는 에디토리얼 느낌에 가장 적합합니다.
• 오프셋 오버레이: 텍스트가 시각적 요소와 부분적으로 겹쳐져 깊이감을 만듭니다.

2. 공간 계층 구조(해부학) 정의

visual-hierarchy-system을 영웅 영역에 적용하세요:

• 인트로/눈썹(선택 사항): H1 위의 작은 태그 또는 레이블로 맥락을 제공합니다.
• 헤드라인(H1): 페이지에서 가장 큰 텍스트 요소.
• 서브헤드라인: 세부 정보를 제공하는 지원 텍스트(최대 2-3줄).
• 액션 영역: 기본(및 선택적 보조) CTA 버튼.
• 앵커(비주얼): 내러티브를 지원하는 초점.

3. 레이어링 및 가독성 확립

배경 미디어를 사용하는 경우 텍스트가 읽기 쉬운지 확인하세요:

• 스크림 및 그라데이션: imagery-and-media-system의 가독성 레이어(Legibility Layer)를 적용하여 4.5:1 대비를 보장합니다.
• 블러 처리: 텍스트 뒤의 복잡한 배경을 부드럽게 하기 위해 백드롭 필터(backdrop-filter)를 사용하세요.
• 깊이: 그림자 또는 미세한 오프셋을 사용하여 콘텐츠 "평면"과 배경 "평면"을 구분하세요.

4. 수직 리듬 및 간격 적용

fluid-spacing-system을 사용하여 "여유 공간"을 정의하세요:

• 상단/하단 패딩: 영웅이 충분한 수직 높이(일반적으로 데스크톱에서 60vh ~ 90vh)를 가지도록 합니다.
• 내부 간격: H1, 서브헤드 및 CTA 사이에 일관된 간격(일반적으로 --space-m ~ --space-xl)을 사용합니다.

5. 반응형 전환 계획

작은 화면에서 레이아웃이 어떻게 변환되는지 계획하세요:

• 스태킹: 분할 레이아웃은 일반적으로 시각적 요소를 위(맥락을 위해) 또는 아래(H1을 우선시하기 위해)에 쌓습니다.
• 비율 변경: 배경 이미지는 초점을 유지하기 위해 가로(16:9)에서 정사각형 또는 세로(1:1 또는 4:5)로 전환해야 합니다.
• 텍스트 크기 조정: fluid-typography-system을 사용하여 H1이 부드럽게 축소되는지 확인합니다.

의사 결정 규칙

• 단일 H1 규칙: 영웅은 페이지의 단일 H1을 반드시 포함해야 합니다.
• 복잡성보다 명확성: 시각적 자산으로 인해 텍스트를 읽기가 조금이라도 어려워지면 더 단순한 배경이나 더 무거운 스크림을 우선시하세요.
• "엄지" 영역: 모바일에서 CTA가 화면 하단 2/3 지점에 배치되어 쉽게 닿을 수 있도록 하세요.
• 시각적 무게: H1과 기본 CTA는 영웅에서 시각적으로 가장 뚜렷한 두 요소여야 합니다.
• 초점 정렬: 분할 레이아웃에서 이미지의 "주제"는 콘텐츠를 향해야 하며, 반대 방향을 향해서는 안 됩니다.

제약 조건

• 접근성: 이미지 위의 텍스트는 WCAG AA(4.5:1) 대비를 충족해야 합니다. 헤드라인은 의미론적 <h1> 태그를 사용해야 합니다. 영웅에 자동 재생 배경 비디오 또는 애니메이션이 포함된 경우, 보이는 일시 중지 컨트롤(WCAG 2.2.2)을 제공하고 prefers-reduced-motion을 존중해야 합니다.
• 반응성: 영웅은 절대 수평 오버플로우를 유발해서는 안 됩니다. 레이아웃은 다양한 텍스트 길이를 수용할 수 있도록 고정 높이가 아닌 유동적이어야 합니다. 동적 브라우저 크롬에서 오작동하는 모바일에서의 100vh 고정을 피하고, 100dvh 또는 유동적 패딩이 있는 최소 높이를 선호하세요.
• 성능: 배경 비디오는 음소거되어야 하며, 느린 연결을 위한 "포스터" 이미지 폴백이 있어야 합니다.

일반적인 실패 패턴

• "대비 실패": 스크림 없이 복잡하거나 밝은 이미지 위에 흰색 텍스트를 배치하여 헤드라인을 읽을 수 없게 만드는 경우.
• 액션 매몰: CTA를 너무 아래에 배치하여 작은 노트북에서 "스크롤 없이 볼 수 있는 영역" 아래로 잘려 보이지 않는 경우.
• 미디어 과부하: 너무 주의를 산만하게 하여 사용자가 가치 제안을 읽지 못하게 하는 배경 비디오를 사용하는 경우.
• "모바일 찌그러짐": 데스크톱 분할 레이아웃을 모바일에 강제로 적용하여 작은 텍스트와 좁은 이미지가 초래되는 경우.

검증 기준

• 영웅에 가장 눈에 띄는 텍스트 요소인 명확한 H1이 포함되어 있습니다.
• 기본 CTA가 시각적으로 구별되며 interactive-state-system을 따릅니다.
• 텍스트 오버레이가 WCAG AA 대비 요구 사항(4.5:1)을 충족합니다.
• 공간 구성(예: 분할, 중앙 정렬)이 브랜드 목표와 일치합니다.
• 수직 간격(패딩/갭)이 유동적 간격 시스템의 토큰을 사용합니다.
• 모바일 뷰포트에서도 레이아웃이 기능적이고 읽기 쉽습니다.
• 반응형 스태킹 중에 이미지의 초점이 유지됩니다.
• 자동 재생 비디오/애니메이션에 일시 중지 컨트롤이 있으며 prefers-reduced-motion을 존중합니다.