컨테이너 안쪽 여백도 표준으로, 모바일은 줄여서

KRDS DS-073 — 카드, 모달, 인포박스, 알럿 등의 컨테이너 내부의 패딩을 padding-card 토큰으로 적용하고, 모바일에서는 공간 제약을 반영하여 패딩 크기를 다르게 적용하고 있다.

0. 들어가며 — 컨테이너 ‘안쪽’ 여백

지금까지 요소 ‘사이’의 간격을 봤습니다. 이번 73편은 컨테이너 ’안쪽’ 여백 — 패딩(padding) 입니다.

카드·모달·인포박스·알럿 같은 컨테이너에는 안쪽 여백(패딩)이 있습니다. 콘텐츠가 컨테이너 가장자리에 바짝 붙지 않게 하는 여백이죠(49편의 레디어스-콘텐츠 패딩과도 연결). DS-073은 이 패딩을 padding-card 토큰으로 표준화하고, 모바일에서는 공간 제약을 반영해 다르게 적용하라고 규정합니다. 이번 편은 컨테이너 패딩의 표준화와 반응형을 풀어냅니다.

1. 규칙 원문 — 패딩 토큰 + 반응형

DS-073 (디자인 스타일 > 레이아웃) “카드, 모달, 인포박스, 알럿 등의 컨테이너 내부의 패딩을 padding-card(padding8-10) 토큰으로 적용하고, 모바일에서는 공간 제약을 반영하여 패딩 크기를 다르게 적용하고 있다.”

“padding-card 토큰”

컨테이너 내부 패딩을 위한 표준 토큰입니다(padding8-10 단계).

“모바일에서는 다르게”

좁은 모바일에서는 공간 제약 때문에 패딩을 줄여서 적용한다는 뜻입니다.

정리: 컨테이너 내부 패딩을 padding-card 토큰으로 표준화하되, 모바일에서는 줄여서 적용하라. 이게 DS-073입니다.

2. 왜 패딩을 표준화하고, 모바일은 다르게 하나

표준화 — 일관성

카드·모달·인포박스 등 여러 컨테이너의 내부 패딩이 제각각이면(이 카드는 16px, 저 모달은 20px), 화면이 정돈되지 않습니다. padding-card 토큰으로 통일하면 모든 컨테이너의 안쪽 여백이 일관되어, 정돈된 느낌을 주죠. 이는 간격(62편)·레디어스(47편) 일관성과 같은 원리가 패딩에 적용된 것입니다.

모바일은 줄여서 — 공간 효율

그런데 모바일에서는 사정이 다릅니다. 화면이 좁은데 PC와 같은 큰 패딩을 컨테이너 안에 그대로 두면, 안쪽 여백이 콘텐츠 공간을 과도하게 잡아먹습니다. 가뜩이나 좁은 화면에서 콘텐츠가 더 좁아지죠. 그래서 모바일 에서는 패딩을 줄여 콘텐츠 공간을 확보합니다. 이는 스크린 마진(52편)·반응형 간격(63편)에서 본 ’좁은 화면 에서 공간 절약’의 원리입니다. 컨테이너 안쪽 패딩도 화면 크기에 반응해야 하는 것이죠.

즉 DS-073은 두 가지를 함께 요구합니다 — 패딩을 토큰으로 표준화(일관성)하되, 모바일에서는 반응형으로 조정(공간 효율). 표준과 반응형이 함께 작동해, 일관되면서도 화면에 맞는 패딩을 만듭니다.

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

흔한 위반 패턴

함정 ① 제각각 패딩. 컨테이너마다 다른 패딩 → 불일치. → padding-card 토큰. 함정 ② 모바일 과패딩. 좁은 화면에 큰 패딩 → 콘텐츠 압박. → 모바일 패딩 축소. 함정 ③ 콘텐츠 가장자리 붙음. 패딩 부족 → 답답·콘텐츠 가림(49편). → 충분한 패딩.

무엇을 점검하나

패딩 토큰 — 컨테이너 패딩이 padding-card 토큰인가.

일관성 — 여러 컨테이너 패딩이 통일됐는가.

모바일 조정 — 모바일에서 패딩이 줄어드는가.

Before / After

/* ✅ padding-card 토큰 + 모바일 조정 */ .card, .modal, .info-box, .alert { padding: var(--padding-card); /* PC: padding8-10 */ } @media (max-width: 767px) { .card, .modal, .info-box, .alert { padding: var(--padding-card-mobile); /* 모바일: 축소 */ } }

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

역할	책임
퍼블리셔/개발	컨테이너 패딩을 토큰으로, 모바일 조정 구현
디자이너	컨테이너 패딩 표준·반응형 설계

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

카드·모달 등 컨테이너가 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 컨테이너 내부 패딩이 padding-card 토큰인가요?

□ 여러 컨테이너 패딩이 통일됐나요?

□ 모바일에서 패딩이 줄어드나요?

□ 콘텐츠가 컨테이너 가장자리에 붙지 않나요?

❓ FAQ

Q1. padding-card가 뭔가요? 컨테이너 내부 패딩용 표준 토큰입니다(padding8-10 단계). KRDS 패딩 토큰 체계의 한 종류입니다. Q2. 왜 모바일은 줄이나요? 좁은 화면에서 큰 패딩은 콘텐츠 공간을 과도하게 잡아먹습니다. 패딩을 줄여 콘텐츠 공간을 확보합니다(공간 효율). Q3. 49편(레디어스-패딩)과 다른가요? 49편은 둥근 모서리가 콘텐츠를 가리지 않게 패딩을 충분히, 73편은 컨테이너 패딩을 토큰으로 표준화+반응형입니다. 둘 다 컨테이너 안쪽 여백을 다룹니다. Q4. KRDS를 채택하면 자동인가요? KRDS 컨테이너 컴포넌트는 padding-card 토큰과 반응형이 적용돼 있습니다.

6. 마무리

DS-073의 메시지:

컨테이너 안쪽 여백도 표준 토큰으로 일관되게, 단 모바일에서는 줄여서 공간을 확보한다.

여러 컨테이너의 패딩을 padding-card 토큰으로 통일하면 일관되고, 모바일에서 줄이면 좁은 화면의 콘텐츠 공간을 확보합니다. 표준과 반응형이 함께 작동하는 것이죠. 이는 일관성과 공간 효율의 균형입니다.

다음 편은 레이아웃의 마지막, 텍스트 입력 필드 구성을 다룹니다. DS-074 — “텍스트 입력 필드는 레이블, 부가 설명, 입력 박스, 시스템 메시지 순으로 정렬하고, gap-3(8px)과 padding-6(16px)를 유지한다.”

다음 편 예고 ▶ 「074. 텍스트 입력 필드는 레이블, 부가 설명, 입력 박스, 시스템 메시지 순으로 정렬하고, 각 요소 간의 간격인 gap-3(8px)과 입력 박스의 패딩값인 padding-6(16px)를 유지하여 사용하고 있다.」

ViewCheck는 컨테이너 패딩이 padding-card 토큰으로 일관되고 모바일에서 조정되는지를 진단합니다.

📚 참고 출처

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

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

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