좌상→우하, 여백 0.8px

KRDS DS-086 — 꺼짐(‘off’ slash)의 방향을 좌측 상단에서 우측 하단 방향으로 표현하고, 오브제와 슬래시의 여백을 선 두께의 1/2(0.8px)로 사용하고 있다.

0. 들어가며 — 꺼짐 사선의 구체적 값

지난 85편(꺼짐 방향 통일)에 이어, 이번 86편은 그 구체적 규격 — 좌상→우하 방향, 오브제와 사선 여백 선 두께의 1/2(0.8px) 입니다.

85편이 ’방향을 통일하라’는 원칙이었다면, 86편은 ’정확히 어느 방향, 어느 여백’이라는 구체값입니다. 좌측 상단에서 우측 하단으로 사선을 긋고, 아이콘 본체(오브제)와 사선 사이 여백을 선 두께의 절반(0.8px)으로 두는 것이죠. 이번 편은 꺼짐 사선의 정확한 규격을 풀어냅니다.

1. 규칙 원문 — 방향과 여백

DS-086 (디자인 스타일 > 아이콘) “꺼짐(‘off’ slash)의 방향을 좌측 상단에서 우측 하단 방향으로 표현하고, 오브제와 슬래시의 여백을 선 두께의 1/2(0.8px) 로 사용하고 있다.”

방향: 좌측 상단 → 우측 하단(↘)

여백: 아이콘 본체와 사선 사이 = 선 두께의 1/2(약 0.8px)

정리: 꺼짐 사선은 좌상→우하로, 본체와 여백은 선 두께의 절반(0.8px)으로. 이게 DS-086입니다.

2. 왜 이 방향과 여백인가

좌상→우하 방향

좌측 상단에서 우측 하단(↘)은 읽기 방향(좌→우)과 자연스럽게 맞고, 금지·취소를 나타내는 보편적인 사선 방향입니다. 이 방향을 모든 꺼짐 아이콘에 통일하면, 사용자가 ’↘ 사선 = 꺼짐’을 일관되게 인식하죠(85편의 통일을 구체화).

여백 0.8px (선 두께의 1/2)

사선이 아이콘 본체에 바짝 붙으면 둘이 뭉개져 구분이 안 되고, 너무 떨어지면 어색합니다. 본체와 사선 사이에 선 두께의 절반(약 0.8px) 여백을 두면, 사선이 본체와 명확히 구분되면서도 자연스럽게 어우러집니다. 이 작은 여백이 사선을 또렷하게 보이게 하죠. 1.5~2px 선 두께(80편)의 절반이 0.8px 안팎인 것입니다.

이렇게 방향·여백까지 정확히 규정하는 것은 아이콘 디테일의 표준화입니다. 모든 꺼짐 아이콘이 같은 방향·여백을 쓰면, 꺼짐 표현이 픽셀 단위로 일관되죠. 작은 디테일까지 정해 일관성을 완성하는, 846개 규칙의 세밀함을 보여주는 예입니다.

3. 점검 / 개선

무엇을 점검하나

방향 — 꺼짐 사선이 좌상→우하인가.

여백 — 본체와 사선 여백이 선 두께의 1/2(0.8px)인가.

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

역할	책임
디자이너	꺼짐 사선을 좌상→우하·여백 0.8px로 제작

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 꺼짐 사선이 좌상→우하(↘) 방향인가요?

□ 본체와 사선 여백이 선 두께의 절반(0.8px) 인가요?

□ 사선이 본체와 명확히 구분되나요?

❓ FAQ

Q1. 왜 좌상→우하인가요? 읽기 방향과 맞고 금지·취소의 보편적 사선 방향입니다. 통일된 방향으로 꺼짐을 일관되게 인식하게 합니다. Q2. 0.8px이 정확해야 하나요? 선 두께의 1/2이 기준입니다. 1.5~2px 선이면 절반이 0.8px 안팎이죠. 본체와 사선이 명확히 구분되되 어우러지는 여백입니다. Q3. KRDS를 채택하면 자동인가요? KRDS 꺼짐 아이콘은 이 규격으로 제작돼 있습니다.

6. 마무리

DS-086의 메시지:

꺼짐 사선은 좌상→우하, 본체 여백은 선 두께의 절반 — 픽셀 단위로 통일.

방향(좌상→우하)과 여백(0.8px)까지 정확히 규정해 꺼짐 표현을 일관되게 합니다. 작은 디테일까지 표준화하는 846개 규칙의 세밀함이죠.

다음 편은 겹친 아이콘을 다룹니다. DS-087 — “겹친 형태(stack) 아이콘은 겹쳐진 위치와 여백을 동일하게 표현한다.”

다음 편 예고 ▶ 「087. 겹친 형태(stack)의 아이콘은 겹쳐진 위치와 여백을 동일하게 표현하고 있다.」

ViewCheck는 꺼짐 사선이 좌상→우하 방향과 0.8px 여백 규격을 따르는지를 진단합니다.

📚 참고 출처

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

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

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