육아 정보 사이트 열 곳과 허브는 같은 틀 위에서 디자인 팩 하나를 골라 입습니다. 팩은 네 가지 — 정부 누리집 같은 KRDS, GitHub 문서 같은 Primer, IBM 업무 도구 같은 Carbon, 요즘 서비스 같은 shadcn — 이고, 팩마다 같은 컴포넌트 20개를 그 디자인 시스템답게 다시 그렸습니다.
이 사이트는 그중 하나를 고르려고 만들었습니다. 컴포넌트마다 「쓰는 규칙」 한 문장과 변형별 「이럴 때」를 붙였고, 팩 비교에서 같은 컴포넌트를 네 팩으로 나란히 보며 고르고 의견을 남길 수 있습니다.
데모는 그림이 아닙니다. 육아 사이트 저장소(partnerscoupang-sites, design-systems@22083bd)의 컴포넌트 갤러리를 팩마다 빌드해, 이유식 사이트(babyfood)의 실제 글·데이터로 그려진 HTML 과 팩 CSS 를 그대로 가져왔습니다(2026-10-13). 그래서 여기서 이상해 보이면 실제 사이트에서도 이상합니다. 팩이 바뀌면 같은 스크립트로 다시 가져옵니다.
「공통 계약 · 하지 않는 것」 분야는 어느 팩을 고르든 똑같이 지키는 약속과, 어느 팩에서도 하지 않는 모양(상자 색 띠·이모지·사이트마다 다른 색 등)을 모았습니다. 「하지 않는 것」의 왼쪽 예시만 설명하려고 그린 그림이고, 오른쪽은 실제 렌더입니다.
출처와 라이선스
팩의 디자인 토큰·아이콘·글꼴은 각 디자인 시스템에서 가져왔습니다. 공식 사이트가 아니며, 각 상표는 그 주인의 것입니다.
대한민국 정부 디자인 시스템(KRDS)
본 저작물은 행정안전부에서 2024년 작성하여 공공누리 제1유형으로 개방한 ‘범정부 UI/UX 디자인시스템(KRDS)’을 이용하였으며, 해당 저작물은 ‘KRDS 디자인시스템 홈페이지(www.krds.go.kr)’에서 무료로 다운받으실 수 있습니다. (www.krds.go.kr)
- 디자인 토큰·아이콘: 범정부 UI/UX 디자인시스템(KRDS) — 공공누리 제1유형 · 행정안전부
- 글꼴: Pretendard GOV — SIL Open Font License 1.1 · Copyright (c) 2021, Kil Hyung-jin
함께 실은 문서: ATTRIBUTION.md · KRDS-copyright-2026-10-13.txt · OFL-PretendardGOV.txt
Primer (GitHub 디자인 시스템)
- 디자인 토큰: Primer Primitives 11.10.0 — MIT · Copyright (c) 2018 GitHub Inc.
- 아이콘: Octicons 19.38.0 — MIT · Copyright (c) 2026 GitHub Inc.
- 한글 글꼴: Pretendard — SIL Open Font License 1.1 · Copyright (c) 2021, Kil Hyung-jin
함께 실은 문서: ATTRIBUTION.md · MIT-octicons.txt · MIT-primer-primitives.txt
Carbon Design System (IBM)
- 디자인 토큰: @carbon/themes 11.82.0 · @carbon/type 11.68.0 · @carbon/layout 11.60.0 · @carbon/styles 1.116.0 — Apache License 2.0 · Copyright IBM Corp. 2018, 2023
- 아이콘: @carbon/icons 11.89.0 — Apache License 2.0 · Copyright IBM Corp.
- 글꼴: IBM Plex Sans KR — SIL Open Font License 1.1 · Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
함께 실은 문서: ATTRIBUTION.md · Apache-2.0-carbon.txt · OFL-IBMPlexSansKR.txt
shadcn/ui · zinc 중립 팔레트
- 디자인 토큰: shadcn/ui (zinc 테마, db2db46) — MIT · Copyright (c) 2023 shadcn
- 크기·그림자 단계: Tailwind CSS 4.3.3 — MIT · Copyright (c) Tailwind Labs, Inc.
- 아이콘: Lucide 1.48.0 — ISC · Copyright (c) 2026 Lucide Icons and Contributors
- 글꼴: Geist — SIL Open Font License 1.1 · Copyright (c) 2023 Vercel, in collaboration with basement.studio
- 한글 글꼴: Pretendard — SIL Open Font License 1.1 · Copyright (c) 2021, Kil Hyung-jin
함께 실은 문서: ATTRIBUTION.md · ISC-lucide.txt · MIT-shadcn-ui.txt · MIT-tailwindcss.txt · OFL-Geist.txt