K KRDS · 06

홈 머리

Home hero

그림 없이 글과 링크로만 시작하는 홈 머리예요. 큰 제목, 출처를 밝히는 한 줄, 그리고 읽을 글이나 주제 목록이 따라와요.

쓰는 규칙홈의 유일한 제목(h1)이 여기 있다. 허브(사이트 모음)는 대표 글 대신 아기 시기 링크를 둔다.

다른 이름: HomeHero
···
usage (Astro)
---
// src/pages/index.astro
import { HomeHero } from '../components/registry';
---
<HomeHero
  eyebrow={eyebrow}
  title={IS_HUB ? site.name : site.tagline}
  lead={IS_HUB ? HUB_LEAD : site.description}
  publishers={IS_HUB ? HUB_PUBLISHERS : topPublishers(posts)}
  aboutHref="/about/"
  featured={featured ? postSummary(featured) : undefined}
  topics={IS_HUB ? undefined : await topicLinks()}
  stages={stageGroups.length > 1 ? stageGroups.map((g) => ({ href: `#${g.id}`, label: g.label })) : undefined}
/>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "HomeHero": "editorial" }
}
props (TypeScript)
export interface HomeHeroProps {
  /** 「글 13편 · 10월 13일 업데이트」 */
  eyebrow: string;
  /** 페이지의 유일한 h1 */
  title: string;
  lead: string;
  /** 실제 인용 상위 기관 */
  publishers: string[];
  aboutHref: string;
  /** 사이트 홈: 「처음이라면 여기부터」 대표 글. 허브에는 없다 */
  featured?: PostSummary;
  /** 사이트 홈: 주제(카테고리) */
  topics?: NavLink[];
  /** 허브: 아기 시기 묶음(앵커) */
  stages?: Link[];
  variant?: VariantOf<'HomeHero'>;
}

editorial 은 회색 띠에 큰 제목과 소개, 출처 줄을 두고 그 안에 테두리 있는 흰 상자로 「처음이라면 여기부터」 대표 글을 담아요. finder 는 흰 바탕에서 제목을 조금 작게 하고 「어떤 정보가 필요하세요?」 아래 주제 목록(이름·설명·글 수·꺾쇠)을 주인공으로 둬요. featured 는 회색 띠에서 사이트 제목을 한 줄로 줄이고 대표 글 제목을 가장 크게, 파란 「이 글부터 읽기」 버튼과 함께 보여 줘요.

출처를 밝히는 문장은 editorial·finder 에서는 소개 바로 아래 굵게 보이고, featured 에서는 맨 아래 선 밑에 보통 굵기 회색 글자로 내려가요. 글이 적고 대표 글이 분명하면 featured, 주제로 길을 안내하려면 finder 가 맞아요. 사진 없이 글만 있어 믿음직하지만 시선을 끄는 힘은 약해요.

이럴 때 — 변형 3

  1. editorial제목 중심 사이트가 무엇이고 어느 기관 자료를 보고 쓰는지를 먼저 보여 주고 싶을 때.쓰는 사이트 4곳: babyplay, feeding, toddlerfood, vaccination
  2. finder찾기 검색으로 들어와 주제를 바로 고르는 사람이 많을 때 — 「어떤 정보가 필요하세요?」가 주인공.쓰는 사이트 3곳: babysleep, newborn, 허브
  3. featured대표 글 처음 읽어야 할 글이 분명한 사이트 — 그 글 제목이 가장 크다.쓰는 사이트 4곳: babyfood, babysick, birthprep, milestone
페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.