없는 페이지(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'>;
}

simple은 회색 「404」, 제목, 설명, 파란 「홈으로 가기」 버튼(글자는 왼쪽, 화살표는 오른쪽 끝)을 쌓고 그 아래에 「새로 올라온 글」을 번호 줄로 이어요. directory는 같은 머리 아래에서 왼쪽 좁은 칸에 「주제별로 찾기」(주제 이름과 글 수 줄)를, 오른쪽 넓은 칸에 새 글 목록을 나란히 둬요.

길을 잃은 방문자에게 홈 버튼 하나와 새 글만 주려면 simple이 깔끔해요. 주제가 여럿이라 바로 찾아가게 하려면 directory가 맞아요. 둘 다 그림이나 일러스트 없이 글자만으로 끝나서 차분하지만 친근한 느낌은 적어요.

이럴 때 — 변형 2

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