디자인 팩 아틀라스
EN
K KRDS · 13

본문

Body text

본문을 넉넉한 글자 크기와 줄 간격으로 읽게 하고, 표·타임라인·체크리스트·인용에 모양을 입혀요. 변형은 선과 상자의 양이 달라요.

쓰는 규칙본문 글자는 폰 17px·넓은 화면 18px, 줄 간격 1.8 — 어느 팩도 이걸 줄이지 않는다. 글 구조는 공통이고 팩은 모양만 바꾼다.

다른 이름: Prose
···
usage (Astro)
---
// src/pages/[post].astro
import { Prose } from '../components/registry';
---
<Prose>
  <Content />
</Prose>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "Prose": "ruled" }
}
props (TypeScript)
export interface ProseProps {
  variant?: VariantOf<'Prose'>;
  careVariant?: VariantOf<'CareGuide'>;
  /** 정적 페이지(소개 등)처럼 표·병원 카드가 없는 글 */
  plain?: boolean;
}

네 팩 나란히 보기 →

···

Primer

13본문Body text

깃허브 문서 본문처럼 제목 아래에 가는 선이 그어지고(open 은 선 없이 크게), 표·체크리스트·인용도 그 모양을 따라요.

···

Carbon

13본문Body text

제목은 굵지 않은 가는 글씨, 체크리스트는 빈 네모 칸이에요. 표는 회색 머리 줄에 가로선만(ruled), 바깥 상자에 줄마다 번갈아 회색(boxed), 머리 바탕 없이 아래 선만(open)으로 달라져요.

···

shadcn/ui

13본문Body text

제목 아래 가는 선, 바깥 상자 없이 가로선만 있는 표가 기본(ruled)이에요. 상자로 감싸는 boxed, 여백이 넓고 제목이 큰 open 으로 바꿀 수 있어요.

ruled 는 표에 가로선만 있고 바깥 상자가 없으며, 제목 위에 얇은 선이 있고 타임라인은 점과 세로선이에요. boxed 는 표 칸마다 선이 있고 머리가 회색이며, 제목은 선 없이 여백이 넓고, 타임라인 항목은 테두리 상자예요. open 은 표 머리만 회색이고 세로선이 없으며, 제목이 가장 크고, 타임라인이 「시기 | 내용」 두 칸으로 나뉘어요.

정보를 표로 많이 담는 글은 boxed 가 칸 구분이 가장 분명하고, 읽기 중심 글은 open 이나 ruled 가 가벼워요. 도식 그림(회색 상자 안 단계 그림)은 세 변형 모두 본문 폭의 약 70% 정도이고 왼쪽에 붙어 보여요.

본문 마크업은 사이트가 정하고, 이 팩은 모양만 입혀요. 읽기 규칙(폰 17·넓은 화면 18 크기, 줄 간격 1.8)은 KRDS 본문(17 크기·줄 간격 1.5)을 우리 쪽에 맞게 바꾼 거예요.

이럴 때 — 변형 3

  1. ruled가로선 표가 많고 차분하게 읽혀야 할 때 — 표는 가로선만, 타임라인은 점과 선.쓰는 사이트 4곳: feeding, toddlerfood, vaccination, 허브
  2. boxed칸 선 용량표·월령표처럼 칸을 짚어 가며 읽어야 할 때.쓰는 사이트 4곳: babyfood, babysick, milestone, newborn
  3. open넓은 여백 시기별 내용이 많은 글 — 큰 소제목, 시기 칸 | 내용.쓰는 사이트 3곳: babyplay, babysleep, birthprep
페이지로 열기 ↗

항목 추가 요청

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