최소한 PC와 모바일은 다르게

KRDS DS-064 — PC와 모바일 두 가지 주요 디바이스 유형에 대한 반응형 간격을 설정하고 있다.

0. 들어가며 — 반응형 간격의 최소 구성

지난 63편에서 “간격을 화면 크기에 따라 조정하라”고 했습니다. 이번 64편은 그 최소 기본 구성 — PC와 모바일 두 가지 유형에 대한 반응형 간격을 다룹니다.

63편이 ’반응형 간격을 하라’는 원칙이었다면, 64편은 ’최소한 PC와 모바일 두 유형은 구분하라’는 구체적 기준 입니다. 두 디바이스 유형은 화면 크기 차이가 가장 크고 사용 환경도 달라, 간격을 다르게 해야 하죠. 이번 편은 이 두 유형 구분의 의미를 풀어냅니다.

1. 규칙 원문 — 두 유형

DS-064 (디자인 스타일 > 레이아웃) “PC와 모바일 두 가지 주요 디바이스 유형에 대한 반응형 간격을 설정하고 있다.”

최소한 PC용 간격과 모바일용 간격, 두 가지를 구분해 설정하라는 뜻입니다.

정리: 간격을 최소한 PC·모바일 두 유형으로 구분해 반응형으로 설정하라. 이게 DS-064입니다.

2. 왜 PC와 모바일인가

PC와 모바일은 화면 크기뿐 아니라 사용 환경 자체가 다릅니다.

PC — 큰 화면, 마우스 조작, 멀리서 봄. 넉넉한 간격이 여유롭고 정돈된 느낌을 줍니다.

모바일 — 작은 화면, 손가락 터치, 가까이서 봄. 좁은 간격으로 공간을 절약하되, 터치 영역은 확보해야 합니다.

두 환경의 차이가 가장 크기 때문에, 간격도 이 두 유형은 반드시 구분해야 합니다. PC의 넉넉한 간격을 모바일에 그대로 쓰면 공간이 낭비되고, 모바일의 좁은 간격을 PC에 쓰면 답답하죠. 그래서 ’최소한 두 유형’이 반응형 간격의 기본 구성입니다.

63편(반응형 간격)이 더 세밀한 브레이크포인트별 조정까지 포함한다면, 64편은 ’최소한 이 둘은 꼭’이라는 하한선입니다. 더 세밀하게 나눌 수도 있지만(태블릿 등), 적어도 PC와 모바일은 반드시 구분하라는 것이죠. 이는 반응형의 가장 기본적인 두 축입니다.

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

흔한 위반 패턴

함정 ① 단일 간격. PC·모바일 구분 없이 한 간격 → 한쪽에서 부적절. → 두 유형 구분. 함정 ② 모바일 무시. PC 기준만 만들고 모바일 미조정 → 모바일 공간 낭비. → 모바일 간격 설정.

무엇을 점검하나

두 유형 구분 — PC·모바일 간격이 구분돼 있는가.

PC 적정 — PC에서 간격이 여유로운가.

모바일 적정 — 모바일에서 간격이 공간을 절약하되 터치는 확보되는가.

Before / After

/* ❌ Before: 단일 간격 */ .list { gap: 32px; } /* 모바일에서 과함 */ /* ✅ After: PC·모바일 두 유형 */ .list { gap: 16px; } /* 모바일 */ @media (min-width: 1024px) { .list { gap: 32px; } /* PC */ }

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

역할	책임
디자이너	PC·모바일 간격 설계
퍼블리셔/개발	두 유형 반응형 간격 구현

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

반응형 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 간격이 PC·모바일 두 유형으로 구분되나요?

□ 모바일 간격이 공간을 절약하나요?

□ PC 간격이 여유로운가요?

□ 모바일에서 터치 영역이 확보되나요?

❓ FAQ

Q1. 63편과 64편이 비슷한데요? 63편은 ’반응형 간격을 하라’는 원칙, 64편은 ’최소한 PC·모바일 두 유형은 구분하라’는 하한 기준입니다. 63편이 더 세밀한 조정까지 포함하고, 64편은 기본 두 축을 못 박습니다.

Q2. 태블릿은요? PC·모바일이 최소 구성이고, 태블릿 등 중간 유형을 추가하면 더 세밀합니다(63편·56편의 단계). 적어도 두 유형은 필수입니다.

Q3. 간격을 얼마나 다르게 하나요? 보통 모바일은 PC의 한두 단계 작은 간격을 씁니다(PC 32px → 모바일 16px 등). 8포인트 그리드 안에서 조정 하세요(62편).

Q4. KRDS를 채택하면 자동인가요? KRDS는 PC·모바일 반응형 간격을 정의합니다. 채택하면 DS-064가 충족됩니다.

6. 마무리 — 최소한 두 축

DS-064의 메시지는 반응형 간격의 기본을 담습니다.

간격은 최소한 PC와 모바일 두 유형은 구분해야 한다 — 두 환경의 차이가 가장 크니까.

PC와 모바일은 화면 크기·조작 방식·시야 거리가 모두 달라, 같은 간격이 맞지 않습니다. 최소한 이 두 유형은 구분해 PC는 넉넉히, 모바일은 절약하되 터치를 확보하는 것 — 이것이 반응형 간격의 기본 구성입니다.

다음 편은 큰 화면 레이아웃 간격을 다룹니다. DS-065 — “일관성을 유지하기 위해 큰 화면의 레이아웃 요소의 간격을 정의한다.” 큰 화면에서 레이아웃 간격을 정의하는 의미를 살펴봅니다.

다음 편 예고 ▶ 「065. 일관성을 유지하기 위해 큰 화면의 레이아웃 요소의 간격을 정의하고 있다.」

우리 사이트의 PC·모바일 간격이 구분됐는지 확인하려면? ViewCheck는 간격이 PC·모바일 두 유형으로 적절히 구분됐는지를 진단합니다.

📚 참고 출처

KRDS 레이아웃(Layout) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_04.html

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

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