선 끝은 둥글게

KRDS DS-084 — 라인 모서리의 모양을 end cap의 둥근 형태로 사용하고 있다.

0. 들어가며 — 선 끝의 모양, end cap

지난 83편(모서리 통일)에 이어, 이번 84편은 그 구체적 형태 — end cap의 둥근 형태 입니다.

라인 아이콘에서 선이 끝나는 부분을 ’end cap(엔드 캡)’이라 합니다. 이 끝을 각지게(square) 할지 둥글게 (round) 할지에 따라 아이콘 인상이 달라지죠. KRDS는 둥근 end cap을 표준으로 정합니다. 이번 편은 둥근 선 끝의 의미를 풀어냅니다.

1. 규칙 원문 — 둥근 end cap

DS-084 (디자인 스타일 > 아이콘) “라인 모서리의 모양을 end cap의 둥근 형태로 사용하고 있다.”

아이콘 선의 끝(end cap)과 꺾임을 둥근 형태로 처리하라는 뜻입니다.

정리: 아이콘 선의 끝·꺾임은 둥근 형태(round cap/join)로 하라. 이게 DS-084입니다.

2. 왜 둥근 형태인가

둥근 end cap은 아이콘에 부드럽고 친근한 인상을 줍니다. 각진 끝(square cap)은 단단하고 딱딱한 느낌을, 둥근 끝은 부드럽고 현대적인 느낌을 주죠(레디어스 43편에서 본 각짐 vs 둥근 인상과 같음).

정부 서비스는 신뢰감과 친근함의 균형이 필요한데, 둥근 end cap은 너무 딱딱하지 않으면서 깔끔한 인상을 만듭니다. 또 둥근 끝은 작은 크기에서도 부드럽게 렌더링되어, 각진 끝보다 시각적으로 안정적이죠. 그래서 많은 현대 아이콘 세트가 둥근 end cap을 표준으로 씁니다.

핵심은 이것이 83편(모서리 통일)의 구체적 답이라는 것입니다. “모서리를 통일하라(83)”의 통일 기준이 “둥근 end cap(84)”인 것이죠. 모든 아이콘이 둥근 끝·꺾임을 쓰면, 세트가 일관되고 부드러운 성격을 갖습니다. CSS로는 stroke-linecap: round, stroke-linejoin: round로 구현됩니다.

3. 점검 / 개선

무엇을 점검하나

둥근 end cap — 아이콘 선 끝이 둥근가.

통일 — 모든 아이콘이 둥근 형태인가.

Before / After

✅ stroke-linecap: round; stroke-linejoin: round; (각진 square cap이 아니라 둥근 round cap)

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

역할	책임
디자이너	둥근 end cap으로 아이콘 제작

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘 선 끝이 둥근가요(round cap)?

□ 선 꺾임도 둥근가요(round join)?

□ 모든 아이콘이 둥근 형태로 통일됐나요?

❓ FAQ

Q1. 각진 끝은 안 되나요? KRDS 표준은 둥근 end cap입니다. 부드럽고 친근한 인상을 위해서입니다. 일관되게 둥근 형태를 씁니다. Q2. CSS로 어떻게 하나요? SVG에 stroke-linecap: round, stroke-linejoin: round를 적용합니다. Q3. KRDS를 채택하면 자동인가요? KRDS 아이콘은 둥근 end cap으로 제작돼 있습니다.

6. 마무리

DS-084의 메시지:

아이콘 선 끝은 둥글게(round end cap) — 부드럽고 친근한 인상으로 통일.

둥근 end cap은 부드럽고 현대적인 인상을 주고, 작은 크기에서도 안정적입니다. 83편의 ’모서리 통일’을 ’둥근 형태’로 구체화한 것이죠.

다음 편은 ‘꺼짐’ 표시를 다룹니다. DS-085 — “꺼짐(‘off’ slash)의 방향을 통일하여 표현한다.”

다음 편 예고 ▶ 「085. 꺼짐(‘off’ slash)의 방향을 통일하여 표현하고 있다.」

ViewCheck는 아이콘 선 끝이 둥근 end cap으로 통일됐는지를 진단합니다.

📚 참고 출처

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

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

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