아이콘과 글자는 가운데를 맞춰라

KRDS DS-095 — 아이콘을 텍스트와 함께 사용할 경우 텍스트와 중앙 정렬되게 적용하고 있다.

0. 들어가며 — 아이콘과 텍스트의 정렬

아이콘과 텍스트가 가로로 나란히 놓일 때(아이콘 + “검색”), 둘의 수직 정렬이 중요합니다. 이번 95편은 아이콘을 텍스트와 중앙 정렬하라는 규칙입니다.

아이콘이 글자보다 위로 뜨거나 아래로 처지면 어색하고 정돈되지 않아 보이죠. 아이콘과 글자의 세로 중심을 맞춰 중앙 정렬하면 깔끔합니다. 이번 편은 아이콘-텍스트 중앙 정렬을 풀어냅니다.

1. 규칙 원문 — 중앙 정렬

DS-095 (디자인 스타일 > 아이콘) “아이콘을 텍스트와 함께 사용할 경우 텍스트와 중앙 정렬되게 적용하고 있다.”

아이콘과 텍스트를 가로로 쓸 때 세로 중심을 맞춰(중앙 정렬) 하라는 뜻입니다.

정리: 아이콘과 텍스트를 세로 중앙 정렬하라. 이게 DS-095입니다.

2. 왜 중앙 정렬인가

아이콘과 텍스트가 세로로 안 맞으면 — 아이콘이 글자 윗부분에 붙거나 아랫부분으로 처지면 — 둘이 따로 노는 어색한 느낌을 줍니다. 사람 눈은 나란한 요소의 정렬 불일치를 민감하게 감지하죠(47편·54편).

세로 중심을 맞춰 중앙 정렬하면, 아이콘과 글자가 한 줄에 가지런히 놓여 ’하나의 단위’로 보입니다. 아이콘과 레이블은 함께 의미를 전달하는 짝이므로(92편), 시각적으로도 가지런히 묶여야 자연스럽죠. CSS로는 보통 align-items: center로 구현됩니다.

이는 정렬 일관성(54편 그리드, 66편 근접성)이 아이콘-텍스트 짝에 적용된 것입니다. 작은 디테일이지만, 중앙 정렬이 안 맞으면 화면 곳곳의 아이콘-글자 짝이 어긋나 전체적으로 정돈되지 않은 인상을 줍니다. 가지런한 정렬은 화면의 완성도를 높이죠.

3. 점검 / 개선

무엇을 점검하나

중앙 정렬 — 아이콘과 텍스트의 세로 중심이 맞는가.

일관성 — 모든 아이콘-텍스트 짝이 중앙 정렬됐는가.

Before / After

/* ✅ 아이콘-텍스트 중앙 정렬 */ .btn-with-icon { display: inline-flex; align-items: center; gap: 8px; }

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

역할	책임
퍼블리셔/개발	아이콘-텍스트 중앙 정렬 구현
디자이너	정렬 설계

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

아이콘+텍스트를 쓰는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘과 텍스트의 세로 중심이 맞나요?

□ 아이콘이 글자 위로 뜨거나 아래로 처지지 않나요?

□ 모든 아이콘-텍스트 짝이 가지런한가요?

❓ FAQ

Q1. baseline 정렬은 안 되나요? 아이콘은 보통 중앙 정렬(center)이 자연스럽습니다. baseline은 글자 기준선에 맞추는 것으로, 아이콘과는 중앙 정렬이 더 가지런합니다. Q2. CSS로 어떻게 하나요? flex 컨테이너에 align-items: center를 적용합니다. Q3. KRDS를 채택하면 자동인가요? KRDS 아이콘+텍스트 컴포넌트는 중앙 정렬돼 있습니다.

6. 마무리

DS-095의 메시지:

아이콘과 텍스트는 세로 중앙 정렬 — 한 줄에 가지런히, 한 단위로.

아이콘과 글자의 세로 중심을 맞추면 둘이 한 단위로 가지런히 묶입니다. 작은 정렬 디테일이지만 화면 완성도를 좌우하죠. 정렬 일관성 원리의 적용입니다.

다음 편은 아이콘 카테고리의 마지막, 아이콘과 텍스트의 크기 매칭을 다룹니다. DS-096 — “아이콘을 텍스트와 함께 사용할 경우 매칭된 사이즈로 적용한다.”

다음 편 예고 ▶ 「096. 아이콘을 텍스트와 함께 사용할 경우 매칭된 사이즈로 적용하고 있다.」

ViewCheck는 아이콘과 텍스트가 중앙 정렬됐는지를 진단합니다.

📚 참고 출처

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

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

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