팩 나란히 보기
컴포넌트 20개를 번호 순서로 묶었습니다. 하나를 열면 변형마다 네 팩의 실제 렌더가 나란히 나오고, 맨 아래에서 「이 컴포넌트는 어느 팩이 나은지」 고르고 의견을 남길 수 있어요. 고른 결과는 이 브라우저에 저장되고 한 번에 복사할 수 있습니다.
내가 고른 팩
아직 고른 컴포넌트가 없어요. 비교 화면 맨 아래에서 고를 수 있어요.
사이트 틀 01–05
- 01사이트 머리
SiteHeader메뉴는 스크립트 없이 열리고 닫히고, 지금 보고 있는 주제는 화면 읽기 프로그램에도 「현재 페이지」로 알린다.bar · stacked · compact - 02사이트 발
SiteFooter디자인 출처 표기가 모든 페이지 발에 있어야 한다(KRDS 는 정해진 문장이 빠지면 검사가 막는다). 쿠팡과 관계없다는 고지는 굵게 쓴다.columns · compact - 03현재 위치
Breadcrumbs마지막 칸은 링크가 아니라 「지금 여기」로 표시한다.chevron · slash - 04주제·안내 페이지 머리
PageHead페이지 제목(h1)은 이 안에 하나뿐이다. 주제 페이지는 글 수와 다른 주제로 가는 길을 함께 둔다.band · plain - 05없는 페이지(404)
NotFound왼쪽 정렬로 쓴다. 가운데에 큰 숫자만 있는 화면으로 만들지 않는다.simple · directory
홈 06–09
- 06홈 머리
HomeHero홈의 유일한 제목(h1)이 여기 있다. 허브(사이트 모음)는 대표 글 대신 아기 시기 링크를 둔다.editorial · finder · featured - 07주제 목록
TopicIndex대표 글은 여기에 다시 나오지 않는다 — 같은 글이 홈에 두 번 보이지 않게. 「찾기」 홈 머리와 「바로가기」 목록은 같은 링크라 함께 고르지 않는다.sections · index · lead - 08함께 보는 사이트
RelatedSites사이트는 모노그램(이름 글자 표식)과 이름으로 구분한다 — 사이트마다 다른 색을 쓰지 않는다.cards · list · inline - 09허브 사이트 목록
HubDirectory시기마다 이름표가 있어서 홈 머리의 시기 링크를 누르면 그 자리로 바로 내려간다.stages · table · timeline
글 머리 10–12
글 본문 13–17
- 13본문
Prose본문 글자는 폰 17px·넓은 화면 18px, 줄 간격 1.8 — 어느 팩도 이걸 줄이지 않는다. 글 구조는 공통이고 팩은 모양만 바꾼다.ruled · boxed · open - 14위급도 안내
CareGuide위급 색은 「바로 119」 쪽에만 쓴다. 카드 머리에 색 띠를 두르지 않고, 굵은 테두리와 큰 제목으로 무게를 준다.stack · split · plain - 15출처 상자
TrustBox목록 표시는 출처에만 쓴다 — 검사가 목록 줄 수로 출처를 센다.panel · ledger · notes - 16자주 묻는 질문
Faq화면에 보이는 질문·답과 검색엔진에 알려 주는 질문·답이 같은 내용이어야 한다.accordion · open - 17추천 준비물
ProductList대가성 문구가 상품 묶음 바로 위에 붙어 있고, 링크는 광고 링크로 표시한다. 실제 링크가 없는 준비물은 글자로만 둔다.rows · table · checklist
글 목록 18–20
결과가 없습니다