좌→우로 쌓고 여백 1.6px

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

0. 들어가며 — 스택 아이콘의 구체적 값

지난 87편(스택 위치·여백 통일)에 이어, 이번 88편은 그 구체적 규격 — 좌→우 쌓기 순서, 겹침 여백 1.6px 입니다.

87편이 ’통일하라’는 원칙, 88편이 ’좌→우, 1.6px’이라는 구체값이죠. 이번 편은 스택 아이콘의 정확한 규격을 풀어냅니다.

1. 규칙 원문 — 순서와 여백

DS-088 (디자인 스타일 > 아이콘) “겹친 형태(stack)의 아이콘은 좌측에서 우측으로 쌓는 순서를 통일하고, 겹쳐진 여백은 1.6px로 사용 하고 있다.”

순서: 좌측 → 우측으로 쌓음

여백: 겹친 요소 사이 = 1.6px

정리: 겹친 아이콘은 좌→우 순서로 쌓고, 겹침 여백은 1.6px로. 이게 DS-088입니다.

2. 왜 좌→우, 1.6px인가

좌→우 순서

좌측에서 우측으로 쌓는 것은 읽기 방향(좌→우)과 맞아 자연스럽습니다. 모든 스택 아이콘을 이 순서로 통일하면, 겹침 방향이 일관되어 정돈된 인상을 주죠(87편의 통일을 구체화).

여백 1.6px

겹친 요소들이 너무 붙으면 한 덩어리로 보여 ’여러 장’임이 안 드러나고, 너무 떨어지면 흩어져 보입니다. 1.6px 여백은 요소들이 겹쳐 있되 각 요소가 구분되는 적정값입니다. 이 작은 여백이 ’여러 개가 쌓여 있다’를 명확히 보여주죠. 이는 선 두께(1.5~2px, 80편)와 비슷한 스케일의 미세 여백으로, 아이콘 디테일의 정밀 규격입니다.

방향·여백까지 정확히 정하는 것은 86편(꺼짐 사선)처럼 아이콘 디테일의 픽셀 단위 표준화입니다. 모든 스택 아이콘이 좌→우, 1.6px로 통일되면 겹침 표현이 완전히 일관되죠.

3. 점검 / 개선

무엇을 점검하나

순서 — 좌→우로 쌓는가.

여백 — 겹침 여백이 1.6px인가.

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

역할	책임
디자이너	스택을 좌→우·1.6px 여백으로 제작

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 겹친 아이콘이 좌→우 순서로 쌓이나요?

□ 겹침 여백이 1.6px인가요?

□ 겹친 요소들이 각각 구분되나요?

❓ FAQ

Q1. 왜 좌→우인가요? 읽기 방향과 맞아 자연스럽습니다. 통일된 방향으로 겹침을 일관되게 표현합니다. Q2. 1.6px이 정확해야 하나요? 겹친 요소가 구분되되 너무 흩어지지 않는 적정 여백입니다. KRDS 규격을 따릅니다. Q3. KRDS를 채택하면 자동인가요? KRDS 스택 아이콘은 이 규격으로 제작돼 있습니다.

6. 마무리

DS-088의 메시지:

겹친 아이콘은 좌→우로 쌓고 여백 1.6px — 겹침 표현을 픽셀 단위로 통일.

순서(좌→우)와 여백(1.6px)까지 정확히 정해 스택 표현을 일관되게 합니다. 작은 디테일까지 표준화하는 846개 규칙의 세밀함이죠.

다음 편은 아이콘 색 대비를 다룹니다. DS-089 — “인접 색상과 최소 3:1의 대비율을 준수한 아이콘을 적용 한다.”

다음 편 예고 ▶ 「089. 인접 색상과 최소 3:1의 대비율을 준수한 아이콘을 적용하고 있다.」

ViewCheck는 스택 아이콘이 좌→우·1.6px 규격을 따르는지를 진단합니다.

📚 참고 출처

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

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

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