손가락이 닿는 화면, 가장자리가 위험하다

KRDS DS-052 — 모바일 환경에서 가장자리 요소 터치 오류 방지를 위해 최소한의 스크린 마진을 필수로 설정하고 있다. (large: 최소 24px, medium: 최소 24px, small: 최소 16px)

0. 들어가며 — 마진의 ‘터치’ 관점

지난 51편에서 스크린 마진의 기본을 봤습니다. 이번 52편은 그 마진의 구체적 최소값과, 특히 모바일 터치 오류 방지 관점을 다룹니다.

마우스로 클릭하는 PC와 달리, 모바일은 손가락으로 터치합니다. 손가락은 마우스 포인터보다 둔탁하고, 화면을 잡을 때 가장자리에 손이 닿기 쉽죠. 그래서 화면 가장자리에 버튼·링크가 바짝 붙어 있으면 잘못 누르거나 누르기 어렵습니다. DS-052는 이를 막기 위해 최소 스크린 마진을 못 박습니다 — large·medium 최소 24px, small 최소 16px. 이번 편은 터치 정확성을 위한 마진의 의미를 풀어냅니다.

1. 규칙 원문 — 구체적 최소값

DS-052 (디자인 스타일 > 레이아웃) “모바일 환경에서 가장자리 요소 터치 오류 방지를 위해 최소한의 스크린 마진을 필수로 설정하고 있다. (large: 최소 24px, medium: 최소 24px, small: 최소 16px)”

화면 구간별 최소 마진

화면 구간	최소 스크린 마진
large (큰 화면)	24px
medium (중간)	24px
small (작은 화면·모바일)	16px

이 값들은 ’최소’입니다. 그 이상으로 화면에 맞게 줄 수 있되, 이 아래로는 내려가면 안 됩니다.

정리: 가장자리 터치 오류 방지를 위해 최소 마진(large·medium 24px, small 16px)을 필수로 지켜라. 이게 DS-052입니다.

2. 왜 터치 오류 방지인가

모바일에서 가장자리 마진이 부족하면 생기는 문제를 봅시다.

손가락으로 화면을 조작할 때, 사용자는 종종 화면 가장자리를 잡거나 스와이프합니다. 그 과정에서 가장자리에 바짝 붙은 버튼·링크를 의도치 않게 누르게 되죠. 또 가장자리 요소는 손가락으로 정확히 겨냥하기 어려워, 누르려 해도 빗나가기 쉽습니다. 작은 화면일수록 이 문제가 심각합니다.

최소 마진은 가장자리 요소를 화면 끝에서 안쪽으로 들여놓습니다. 16~24px의 여백이 있으면, 가장자리를 잡아도 요소에 닿지 않고, 요소를 누를 때도 충분한 여유가 생깁니다. 즉 마진이 ’실수 영역’과 ’조작 영역’을 분리하는 완충지대 역할을 하는 것이죠. 이는 단순한 미관이 아니라 조작 정확성과 직결된 기능적 여백입니다.

특히 정부 서비스의 사용자층(고령자 등)을 고려하면 더 중요합니다. 손가락 조작이 정밀하지 않은 사용자에게, 가장자리 여백은 잘못 누름을 막는 안전장치입니다. 신청·결제 같은 중요한 작업에서 실수 터치는 큰 문제가 될 수 있으니, 최소 마진은 사용자를 보호하는 장치이기도 합니다.

3. 화면별 값의 의미 — 작을수록 좁게, 단 한계는 있다

값을 보면 large·medium은 24px, small은 16px입니다. 작은 화면일수록 마진이 좁죠. 왜일까요?

작은 화면(모바일)은 콘텐츠를 담을 공간 자체가 좁습니다. 여기에 큰 마진(24px)을 양옆에 주면, 정작 콘텐츠가 들어갈 공간이 너무 줄어듭니다. 그래서 작은 화면은 마진을 16px로 약간 줄여 콘텐츠 공간을 확보합니다. 반면 큰 화면(large·medium)은 공간에 여유가 있어 24px의 넉넉한 마진을 줄 수 있죠.

핵심은 이것이 ‘최소값’ 이라는 점입니다. small이 16px이라고 해서 ’16px로 고정’이 아니라 ’최소 16px, 그 이상 가능’입니다. 콘텐츠 공간과 터치 안전 사이의 균형을 맞추되, 어떤 경우에도 이 최소선 아래로는 내려가지 말라는 것이죠. 작은 화면이라도 터치 안전을 위해 16px은 반드시 확보해야 합니다. 공간이 좁다고 마진을 0으로 만들면 터치 오류가 생기니까요.

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

흔한 위반 패턴

함정 ① 최소 마진 미달. 모바일 마진이 16px 미만 → 터치 오류. → 최소 16px. 함정 ② 마진 0. 가장자리 꽉 참 → 잘못 누름. → 최소 마진 확보. 함정 ③ 큰 화면 마진 부족. large·medium이 24px 미만 → 답답. → 최소 24px.

무엇을 점검하나

최소값 준수 — large·medium 24px, small 16px 이상인가.

모바일 터치 — 가장자리 요소가 터치하기 안전한가.

화면별 적정 — 각 구간에서 마진이 적정한가.

Before / After

/* ❌ Before: 모바일 마진 부족 */ .container { padding: 0 4px; } /* 16px 미만 — 터치 오류 */ /* ✅ After: 최소 마진 준수 */ .container { padding: 0 16px; } /* small 최소 16px */ @media (min-width: 768px) { .container { padding: 0 24px; } /* medium·large 최소 24px */ }

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

역할	책임
디자이너	화면별 최소 마진 설계
퍼블리셔/개발	반응형 최소 마진 구현
접근성 담당	모바일 터치 정확성 검증

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

모바일을 지원하는 모든 사이트 = 해당.

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모바일(small) 스크린 마진이 16px 이상인가요?

□ 큰 화면(large·medium) 마진이 24px 이상인가요?

□ 가장자리 버튼·링크를 안전하게 터치할 수 있나요?

□ 화면을 잡을 때 가장자리 요소가 잘못 눌리지 않나요?

❓ FAQ

Q1. 16px·24px은 절대값인가요? ’최소값’입니다. 그 이상으로 화면에 맞게 줄 수 있되, 이 아래로는 안 됩니다. 작은 화면은 콘텐츠 공간을 위해 16px, 큰 화면은 24px 이상이 기준입니다.

Q2. 마진보다 터치 타깃 크기가 중요하지 않나요? 둘 다 중요합니다. 터치 타깃 크기(44×44px 등)는 별도 영역이고, 스크린 마진은 ’가장자리 안전 여백’입니다. 함께 지켜야 터치 정확성이 확보됩니다.

Q3. 가로 모드에서도 같나요? 가로/세로에 따라 화면 너비가 바뀌면 해당 구간의 마진을 적용합니다. 핵심은 ’가장자리 안전 여백 최소값’을 어떤 방향에서도 지키는 것입니다.

Q4. KRDS를 채택하면 자동인가요? KRDS 그리드의 스크린 마진이 이 최소값으로 정의돼 있습니다. 채택하면 DS-052가 충족됩니다.

7. 마무리 — 손가락을 위한 여백

DS-052의 메시지는 터치 시대의 배려를 담습니다.

모바일 가장자리 여백은 미관이 아니라 터치 정확성의 문제다 — 최소 16~24px을 반드시.

손가락으로 조작하는 모바일에서, 가장자리에 바짝 붙은 요소는 잘못 눌리거나 누르기 어렵습니다. 최소 스크린 마진(large·medium 24px, small 16px)은 가장자리 요소를 안쪽으로 들여 터치 오류를 막는 완충지대입니다. 특히 손가락 조작이 정밀하지 않은 사용자를 보호하죠. 작은 여백 하나가 중요한 작업에서의 실수를 막습니다.

다음 편은 화면을 나누는 ’칼럼(column)’을 다룹니다. DS-053 — “칼럼 수를 백분율로 설정하여 화면 크기에 맞춰 유동적으로 변경되게 적용한다.” 반응형 그리드의 칼럼 개념을 살펴봅니다.

다음 편 예고 ▶ 「053. 칼럼 수를 백분율로 설정하여 화면 크기에 맞춰 유동적으로 변경되게 적용하고 있다.」

우리 사이트의 모바일 마진이 안전한지 확인하려면? ViewCheck는 스크린 마진이 최소값(large·medium 24px, small 16px)을 지키는지, 가장자리 터치 안전성을 진단합니다.

📚 참고 출처

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

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

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