겹친 아이콘도 위치·여백을 통일

KRDS DS-087 — 겹친 형태(stack)의 아이콘은 겹쳐진 위치와 여백을 동일하게 표현하고 있다.

0. 들어가며 — 겹친 형태(stack) 아이콘

어떤 아이콘은 여러 요소가 겹쳐(stack) 표현됩니다 — 여러 장의 카드/문서가 겹친 아이콘, 여러 사진이 쌓인 아이콘처럼요. 이번 87편은 이 겹친 위치와 여백을 동일하게 표현하라는 규칙입니다.

겹친 아이콘에서 요소들이 쌓이는 위치(오프셋)와 사이 여백이 아이콘마다 다르면 일관성이 깨집니다. DS-087은 이를 통일하라고 규정하죠. 이번 편은 스택 아이콘 일관성을 간단히 풀어냅니다.

1. 규칙 원문 — 위치·여백 동일

DS-087 (디자인 스타일 > 아이콘) “겹친 형태(stack)의 아이콘은 겹쳐진 위치와 여백을 동일하게 표현하고 있다.”

겹친 아이콘에서 요소들의 겹침 위치와 사이 여백을 일관되게 하라는 뜻입니다.

정리: 겹친 아이콘의 겹침 위치·여백을 동일하게 통일하라. 이게 DS-087입니다.

2. 왜 통일하나

겹친 아이콘의 위치·여백이 제각각이면, 여러 스택 아이콘이 함께 있을 때 어긋나 보입니다. 한 아이콘은 요소가 오른쪽 아래로 겹치고, 다른 건 왼쪽 위로 겹치면 통일성이 깨지죠.

겹침 위치(어느 방향으로 쌓이나)와 여백(요소 사이 간격)을 통일하면, 모든 스택 아이콘이 같은 패턴으로 보여 일관됩니다. 이는 두께 통일(82편)·모서리 통일(83편)과 같은 ‘아이콘 디테일 일관성’ 원리입니다. 겹침이라는 디테일도 통일되어야 아이콘 세트가 정돈되죠. 구체적 순서·여백은 다음 편(DS-088)에서 좌→우, 1.6px로 정해 집니다.

3. 점검 / 개선

무엇을 점검하나

위치 통일 — 겹친 요소의 위치가 일관된가.

여백 통일 — 겹친 요소 사이 여백이 동일한가.

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

역할	책임
디자이너	스택 아이콘 위치·여백 통일 제작

기관 유형	DS-087 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (스택 아이콘 사용 시)

겹친 아이콘을 쓰는 사이트 = 해당. KRDS 아이콘 사용 시 자동.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 겹친 아이콘의 겹침 위치가 통일됐나요?

□ 겹친 요소 사이 여백이 동일한가요?

❓ FAQ

Q1. 어느 방향으로 겹치나요? 좌→우 순서로 쌓고 여백 1.6px입니다(다음 편 DS-088). 통일이 핵심입니다. Q2. KRDS를 채택하면 자동인가요? KRDS 스택 아이콘은 위치·여백이 통일돼 있습니다.

6. 마무리

DS-087의 메시지:

겹친 아이콘도 위치·여백을 통일 — 디테일이 통일되어야 일관된다.

스택 아이콘의 겹침 위치·여백을 통일하면 여러 아이콘이 같은 패턴으로 정돈됩니다. 아이콘 디테일 일관성 원리의 적용이죠.

다음 편은 그 구체적 규격을 다룹니다. DS-088 — “겹친 아이콘은 좌→우 순서로 쌓고, 여백은 1.6px로 한다.”

다음 편 예고 ▶ 「088. 겹친 형태(stack)의 아이콘은 좌측에서 우측으로 쌓는 순서를 통일하고, 겹쳐진 여백은 1.6px로 사용하고 있다.」

ViewCheck는 스택 아이콘의 겹침 위치·여백이 통일됐는지를 진단합니다.

📚 참고 출처

KRDS 아이콘(Icon) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_05.html

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

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