카드 사이는 24px

KRDS DS-067 — 카드 세로형, 가로형, 모듈형을 gap-7(24px)의 간격으로 적용하고 있다.

0. 들어가며 — 구체적 간격 토큰의 시작

지금까지 간격의 체계(8pt 그리드, 62편)·반응형·위계를 봤습니다. 이번 67편부터는 그 체계를 컴포넌트별 구체적 값으로 적용합니다. 그 첫 주제가 카드 사이 간격 — gap-7(24px)입니다.

카드(card)는 정보를 담는 박스형 컴포넌트로, 여러 개가 나란히 배치되는 경우가 많습니다. 그 카드들 사이의 간격을 얼마로 할지, KRDS는 gap-7(24px) 으로 못 박습니다. 세로형·가로형·모듈형 어떤 배치든 카드 간격은 24px이죠. 이번 편은 카드 간격 표준값의 의미를 풀어냅니다.

1. 규칙 원문 — 카드 간격 24px

DS-067 (디자인 스타일 > 레이아웃) “카드 세로형, 가로형, 모듈형을 gap-7(24px) 의 간격으로 적용하고 있다.”

“gap-7(24px)”

8포인트 그리드 기반 간격 토큰 중 24px에 해당하는 단계입니다(8×3=24). 카드 사이 간격을 이 값으로 통일합니다.

“세로형, 가로형, 모듈형”

카드의 배치 형태입니다 — 세로로 쌓인 카드, 가로로 나열된 카드, 격자(모듈)로 배치된 카드. 어떤 형태든 카드 간격은 24px입니다.

정리: 카드 사이 간격은 배치 형태와 무관하게 gap-7(24px)로 통일하라. 이게 DS-067입니다.

2. 왜 24px인가 / 왜 통일하나

24px(gap-7)은 카드 사이 간격으로 적정한 값입니다. 너무 좁으면(8px) 카드들이 답답하게 붙고, 너무 넓으면 (40px+) 카드들이 따로 놀죠. 24px은 카드들이 적절히 구분되면서도 하나의 그룹으로 보이는 균형점입니다.

그리고 배치 형태(세로·가로·모듈)와 무관하게 24px로 통일하는 것이 핵심입니다. 카드가 세로로 쌓이든 가로로 놓이든 격자로 배치되든, 간격이 같아야 일관됩니다. 한 화면에서 세로 카드는 24px, 가로 카드는 16px이면 형태 톤이 안 맞죠. 통일된 카드 간격은 화면 전체의 카드 배치를 일관되게 만듭니다.

이는 8포인트 그리드(62편)와 레디어스 일관성(47편)의 구체적 적용입니다. ’간격을 8의 배수로, 같은 종류는 같은 값으로’라는 원리가 카드라는 구체적 컴포넌트에 ’gap-7(24px)’로 정해진 것이죠. 이런 구체적 토큰 규칙 덕분에 디자이너·개발자가 ’카드 간격은 24px’을 고민 없이 적용할 수 있습니다.

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

흔한 위반 패턴

함정 ① 임의 카드 간격. 카드 사이를 20px·30px 등으로 → 표준 미준수. → gap-7(24px). 함정 ② 형태별 다른 간격. 세로·가로 카드 간격이 다름 → 불일치. → 24px 통일.

무엇을 점검하나

카드 간격 — 카드 사이가 24px(gap-7)인가.

형태 무관 통일 — 세로·가로·모듈 모두 24px인가.

Before / After

/* ✅ 카드 간격 gap-7(24px) 통일 */ .card-grid { display: grid; gap: 24px; } /* 모듈형 */ .card-list-vertical { display: flex; flex-direction: column; gap: 24px; } .card-row { display: flex; gap: 24px; } /* 가로형 */

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

역할	책임
퍼블리셔/개발	카드 간격을 gap-7(24px) 토큰으로 구현
디자이너	카드 배치 시 24px 간격 적용

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

카드를 쓰는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 카드 사이 간격이 24px(gap-7) 인가요?

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

□ 카드 간격이 토큰으로 관리되나요?

❓ FAQ

Q1. gap-7이 뭔가요? 8포인트 그리드 기반 간격 토큰 중 24px 단계입니다(8×3). KRDS 간격 토큰 체계의 한 값입니다.

Q2. 모바일에서도 24px인가요? 기본은 24px이되, 반응형으로 모바일에서 조정될 수 있습니다(63편). 기본 표준은 gap-7(24px)입니다.

Q3. 카드 안 패딩도 24px인가요? 카드 ‘사이’ 간격이 24px이고, 카드 ‘안’ 패딩은 별도 규칙(DS-073)입니다. 사이와 안을 구분하세요.

Q4. KRDS를 채택하면 자동인가요? KRDS 카드 컴포넌트는 gap-7(24px) 간격으로 설계돼 있습니다. 채택하면 DS-067이 충족됩니다.

6. 마무리 — 카드는 24px

DS-067의 메시지는 구체적 표준을 담습니다.

카드 사이는 배치 형태와 무관하게 gap-7(24px) — 통일된 간격이 일관된 배치를 만든다.

24px은 카드들이 적절히 구분되면서도 한 그룹으로 보이는 균형값이고, 형태 무관 통일은 일관성을 줍니다. 이는 8포인트 그리드와 일관성 원리가 카드에 구체화된 것이죠. 토큰 규칙 덕에 ’카드 간격 24px’을 고민 없이 적용할 수 있습니다.

다음 편은 세로형 카드 리스트의 간격을 다룹니다. DS-068 — “세로형 카드 리스트의 간격을 gutter값으로 적용한다.” 세로 리스트 간격의 기준을 살펴봅니다.

다음 편 예고 ▶ 「068. 세로형 카드 리스트의 간격을 gutter값으로 적용하고 있다.」

우리 사이트의 카드 간격이 표준인지 확인하려면? ViewCheck는 카드 사이 간격이 gap-7(24px)로 통일됐는지를 진단합니다.

📚 참고 출처

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

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

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