K KRDS · 05

없는 페이지(404)

Not found (404)

가운데 정렬 없이 왼쪽으로 정렬한 404 예요. 파란 홈 버튼 아래에 번호 붙은 글 목록이 이어져요.

쓰는 규칙왼쪽 정렬로 쓴다. 가운데에 큰 숫자만 있는 화면으로 만들지 않는다.

다른 이름: NotFound

···

usage (Astro)

---
// src/pages/404.astro
import { NotFound } from '../components/registry';
---
<NotFound homeHref="/" latest={latest} topics={topics} />

site.json

// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "NotFound": "simple" }
}

props (TypeScript)

export interface NotFoundProps {
  homeHref: string;
  latest: PostSummary[];
  topics: NavLink[];
  variant?: VariantOf<'NotFound'>;
}

「404 · 페이지 없음」 작은 글자, 큰 제목, 한 줄 설명, 파란 「홈으로 가기」 버튼이 왼쪽에 놓여요. simple 은 그 아래 「새로 올라온 글」을 선으로 나눈 01·02·03 줄로 보여 줘요. directory 는 아래를 두 칸으로 나눠 왼쪽에 「주제별 찾기」(주제 이름과 글 수), 오른쪽에 「새로 올라온 글」을 둬요.

길을 잃은 사람이 바로 다음 갈 곳을 찾게 하는 차분한 안내 화면이에요. 주제가 여럿인 사이트는 directory, 단순하게 가려면 simple 이 맞아요.

이 팩은 404 를 가운데 정렬하지 않고 왼쪽 정렬로 그려요.

이럴 때 — 변형 2

simple간단히 글이 많지 않은 사이트 — 홈 버튼과 새 글 몇 편이면 충분할 때.쓰는 사이트 5곳: babyfood, babyplay, babysick, newborn, vaccination
directory바로가기 주제가 많아 길을 다시 찾게 도와야 할 때 — 주제 바로가기와 새 글이 두 칸으로.쓰는 사이트 6곳: babysleep, birthprep, feeding, milestone, toddlerfood, 허브