세로 카드 리스트는 가터값으로

KRDS DS-068 — 세로형 카드 리스트의 간격을 gutter값으로 적용하고 있다.

0. 들어가며 — 세로 리스트와 가터

지난 67편에서 카드 간격(gap-7, 24px)을 봤습니다. 이번 68편은 그중 세로형 카드 리스트의 간격을 가터 (gutter)값으로 맞추는 규칙입니다.

55편에서 가터(칼럼 사이 간격)를 봤습니다. DS-068은 세로로 쌓인 카드 리스트의 간격을 이 가터값과 맞추라고 규정합니다. 카드 리스트의 세로 간격이 그리드의 가로 간격(가터)과 일치하면, 화면의 가로·세로 리듬이 통일 되죠. 이번 편은 세로 카드 리스트 간격을 가터값으로 맞추는 의미를 풀어냅니다.

1. 규칙 원문 — 가터값 적용

DS-068 (디자인 스타일 > 레이아웃) “세로형 카드 리스트의 간격을 gutter값으로 적용하고 있다.”

세로로 쌓인 카드 리스트의 간격을 그리드의 가터(gutter)값과 같게 하라는 뜻입니다.

정리: 세로형 카드 리스트의 간격을 그리드 가터값으로 맞춰라. 이게 DS-068입니다.

2. 왜 가터값으로 맞추나

가터는 그리드에서 칼럼 사이의 간격입니다(55편). 즉 화면의 ’가로 방향 간격’을 결정하는 값이죠. 세로형 카드 리스트의 간격을 이 가터값과 맞추면, 화면의 가로 간격과 세로 간격이 통일됩니다.

만약 가로 카드 간격(가터)은 24px인데 세로 카드 리스트 간격이 16px이면, 같은 카드들인데 가로로는 24px, 세로로는 16px 떨어져 어긋난 느낌을 줍니다. 가터값으로 통일하면 가로·세로 어느 방향이든 카드 간격이 같아, 정돈된 격자 리듬을 유지하죠. 이는 일관성(47편·62편) 원리의 가로-세로 통합입니다.

또한 가터값을 기준으로 하면 그리드 시스템과 자연스럽게 정합됩니다. 그리드의 칼럼 간격(가터)과 리스트의 세로 간격이 같으니, 카드들이 가로로 놓이든 세로로 놓이든 같은 격자 위에 있는 것처럼 보이죠. 그리드를 기반 으로 하는 레이아웃의 일관성이 완성됩니다. 67편(카드 24px)과 68편(세로 리스트 가터값)이 함께, 카드 배치의 가로·세로 간격을 통일하는 것입니다.

3. 흔한 위반 패턴 / 점검 / 개선

흔한 위반 패턴

함정 ① 가로-세로 불일치. 가로 카드 24px, 세로 리스트 16px → 어긋남. → 가터값 통일. 함정 ② 임의 세로 간격. 리스트 간격을 감각으로 → 그리드와 불일치. → 가터값.

무엇을 점검하나

세로 간격 = 가터 — 세로 카드 리스트 간격이 가터값인가.

가로-세로 통일 — 카드의 가로·세로 간격이 일치하는가.

Before / After

/* ✅ 세로 카드 리스트 = 가터값(예: 24px) */ .card-list { display: flex; flex-direction: column; gap: 24px; } /* 가로 그리드 가터도 24px → 통일 */ .card-grid { display: grid; gap: 24px; }

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	세로 리스트 간격을 가터값으로 구현
디자이너	가로·세로 간격 통일 설계

기관 유형	DS-068 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (세로 카드 리스트 사용 시)

세로 카드 리스트를 쓰는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 세로 카드 리스트 간격이 가터값인가요?

□ 카드의 가로·세로 간격이 통일됐나요?

□ 그리드와 리스트 간격이 정합되나요?

❓ FAQ

Q1. 가터값이 얼마인가요? 브레이크포인트별 그리드 가터값입니다(DS-058). 보통 24px(gap-7) 안팎입니다. KRDS 그리드 정의를 따릅니다.

Q2. 67편(카드 24px)과 다른가요? 67편은 카드 간격 일반(24px), 68편은 세로 리스트 간격을 ’가터값’으로 맞추라는 것입니다. 둘이 함께 가로·세로 간격을 통일합니다.

Q3. KRDS를 채택하면 자동인가요? KRDS 그리드·카드 컴포넌트는 가터값으로 간격이 정합돼 있습니다. 채택하면 DS-068이 충족됩니다.

6. 마무리 — 가로와 세로의 통일

DS-068의 메시지는 격자 일관성을 담습니다.

세로 카드 리스트 간격을 가터값으로 맞추면, 화면의 가로·세로 간격이 통일된다.

가터(가로 간격)와 세로 리스트 간격을 같게 하면, 카드들이 어느 방향이든 같은 간격으로 정돈된 격자 리듬을 유지합니다. 그리드 시스템과의 정합이 완성되죠. 이는 일관성 원리의 가로-세로 통합입니다.

다음 편은 인풋(입력 필드)의 간격을 다룹니다. DS-069 — “인풋과 인풋, 카드, 셀렉트 등 가로형으로 조합할 경우 사이 간격은 gap-5(16px) 토큰을 사용한다.” 가로 조합 요소의 간격을 살펴봅니다.

다음 편 예고 ▶ 「069. 인풋과 인풋, 카드, 셀렉트 등 가로형으로 조합할 경우의 사이 간격은 gap-5(16px) 토큰을 사용하고 있다.」

우리 사이트의 세로 카드 리스트 간격이 가터값인지 확인하려면? ViewCheck는 세로 카드 리스트 간격이 그리드 가터값과 정합되는지를 진단합니다.

📚 참고 출처

KRDS 레이아웃(Layout)·디자인 토큰 가이드 — https://www.krds.go.kr/html/site/style/style_04.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준