P Primer · 02

사이트 발

Site footer

흰 바탕에 위 선 하나, 작은 회색 글자로 조용히 끝나요. 앱 맨 아래 발처럼 보여요.

쓰는 규칙디자인 출처 표기가 모든 페이지 발에 있어야 한다(KRDS 는 정해진 문장이 빠지면 검사가 막는다). 쿠팡과 관계없다는 고지는 굵게 쓴다.

다른 이름: SiteFooter
···
usage (Astro)
---
// src/layouts/Base.astro
import { SiteFooter } from '../components/registry';
---
<SiteFooter
  site={site}
  links={footerLinks(IS_HUB)}
  related={related}
  notice={FOOTER_TEXT.notice}
  medical={FOOTER_TEXT.medical}
  affiliate={FOOTER_TEXT.affiliate}
  credit={designCredit()}
  year={new Date().getFullYear()}
/>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "SiteFooter": "columns" }
}
props (TypeScript)
export interface SiteFooterProps {
  site: SiteConfig;
  /** 소개·면책·개인정보·RSS */
  links: Link[];
  related: SiteLink[];
  /** 쿠팡 비공식 고지 — 굵게 */
  notice: string;
  medical: string;
  affiliate: string;
  /** 디자인 시스템 출처 표기 — 감싸는 요소에 data-design-credit 필수(seo:audit 가 KRDS 문구를 찾는다) */
  credit: { text: string; href?: string; creditsHref: string };
  year: number;
  variant?: VariantOf<'SiteFooter'>;
}

columns는 왼쪽에 표식·이름·한 줄 소개, 가운데에 「사이트 정보」 링크, 오른쪽에 「함께 보는 사이트」가 서고, 선 아래에 고지가 이어져요. compact는 맨 위 한 줄에 표식·© 이름·링크가 가로로 이어지고, 그 아래 「함께 보는 사이트」 한 줄, 맨 아래에 작은 고지가 와요. 두 변형 모두 쿠팡과 관계없다는 고지는 굵게, 나머지 안내와 디자인 출처(「디자인 토큰: Primer Primitives(MIT) · 아이콘: Octicons(MIT)」)는 작은 글자로 붙어요.

링크가 많고 자매 사이트도 여럿이면 columns가 정리돼 보이고, 짧게 끝내려면 compact가 맞아요. 둘 다 장식이 거의 없어서 어느 사이트에 붙여도 튀지 않아요. 글자가 작고 회색이라 폰에서는 링크 사이 간격이 좁게 느껴질 수 있어요.

푸터의 출처 한 줄은 Primer·Octicons 를 밝히고, 끝의 「디자인·글꼴 출처」 링크로 MIT 고지가 있는 소개 페이지로 이어져요. Primer는 표기가 필수는 아니지만 우리 쪽에서 모든 페이지에 넣어요.

이럴 때 — 변형 2

  1. columns세 칸 함께 보는 사이트가 여럿이라 따로 한 칸이 필요할 때.쓰는 사이트 4곳: babyfood, babyplay, milestone, toddlerfood
  2. compact한 덩어리 발을 짧게 끝내고 싶을 때, 링크가 몇 개 안 될 때.쓰는 사이트 7곳: babysick, babysleep, birthprep, feeding, newborn, vaccination, 허브
페이지로 열기 ↗

항목 추가 요청

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