Hero Section
히어로 섹션
hero section은 페이지의 첫 화면이에요. 누구를 위한지, 어떤 약속을 하는지, 증거는 무엇인지, 다음에 할 행동은 무엇인지 빠르게 알려줘요.
Name it. Build it.
Move from a rough description to a precise pattern.
Explore atlas실제 예시
급여 페이지는 결과를 강조하는 제목과 제품 미리보기를 보여주며 시작해요. 체험하기 버튼과 신뢰할 수 있다는 표시도 있어요.
주요 부분
- 01Trigger or task context
- 02Primary control surface
- 03Feedback, focus, and dismissal
사용할 때
랜딩 페이지가 그 가치와 다음 단계를 빠르게 설명해야 할 때 사용하세요.
다음 경우에는 사용하지 마세요
거대한 장식 배너가 첫 화면에서 제품, 증거, 행동을 밀어내지 않게 하세요.
코드에서 사용된 이름
<section> + heading + primary action 출시하기 전에
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome：Complete the task with 히어로 섹션 (Hero Section)。 User context：급여 페이지는 결과를 강조하는 제목과 제품 미리보기를 보여주며 시작해요. 체험하기 버튼과 신뢰할 수 있다는 표시도 있어요. Recommended pattern：히어로 섹션 (Hero Section)。 Why it fits：랜딩 페이지가 그 가치와 다음 단계를 빠르게 설명해야 할 때 사용하세요. Do not use it when：거대한 장식 배너가 첫 화면에서 제품, 증거, 행동을 밀어내지 않게 하세요. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：하나의 공식 표준이 전체 용어를 통제하지 않음. 의미는 팀, 플랫폼 또는 프레임워크마다 달라질 수 있음. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 히어로 섹션 (Hero Section) is used now. Definition: hero section은 페이지의 첫 화면이에요. 누구를 위한지, 어떤 약속을 하는지, 증거는 무엇인지, 다음에 할 행동은 무엇인지 빠르게 알려줘요. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.