그림과 글자를 같이

KRDS CP-138 — [모바일] 모든 탭 버튼은 아이콘과 레이블을 함께 사용하고 있다.

0. 들어가며 — 아이콘만으론 무슨 뜻인지 모른다

이번 258편은 모든 탭 버튼에 아이콘과 레이블을 함께 사용하라는 규칙입니다.

탭 바를 아이콘만으로(글자 없이) 만들면 깔끔해 보이지만 — 사용자는 그 아이콘이 무슨 뜻인지 추측해야 하죠. 하트 아이콘이 ’좋아요’인지 ’즐겨찾기’인지 ’건강’인지 모호합니다. 반대로 글자만 있으면 직관적 인지가 느리고요. CP-138은 아이콘(빠른 인지)과 레이블(명확한 의미)을 함께 써서 둘의 장점을 합치라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 아이콘+레이블 병행

CP-138 (컴포넌트 > 탭 바) [모바일] “모든 탭 버튼은 아이콘과 레이블을 함께 사용하고 있다.”

탭 바의 각 탭을 아이콘만 또는 글자만으로 두지 말고, 아이콘과 텍스트 레이블을 함께 표시해 의미를 명확히 전하라는 뜻입니다.

정리: 모든 탭은 아이콘 + 레이블을 함께 써라. 이게 CP-138입니다.

2. 왜 아이콘과 레이블을 함께 쓰나

아이콘과 텍스트는 각각 장단점이 있습니다. 둘을 함께 쓰면 서로의 약점을 보완하죠.

아이콘만의 문제 — 의미 모호성. 아이콘은 시각적으로 빠르게 인지되고 공간을 적게 차지하는 장점이 있습니다. 하지만 의미가 모호한 경우가 많죠. 보편적으로 통하는 아이콘(집=홈, 돋보기=검색)도 있지만, 상당수는 해석이 갈립니다 — 하트는 ‘좋아요/즐겨찾기/건강’, 별은 ‘즐겨찾기/평점/중요’, 사람 모양은 ‘프로필/연락처/마이페이지’ 등. 같은 아이콘도 맥락·문화에 따라 다르게 읽히죠. 아이콘만 있으면 사용자는 ‘이게 무슨 메뉴지?’ 하고 눌러보기 전엔 확신할 수 없습니다. 이는 추측을 강요하는 나쁜 사용성이고, 접근성(인지 장애 사용자)에도 불리합니다.

텍스트만의 문제 — 인지 속도. 반대로 글자만 있으면 의미는 명확하지만 — 읽어야 알 수 있어 인지가 느리고, 시각적 변별력이 약합니다(글자들이 비슷하게 보임). 탭 바처럼 빠르게 훑고 누르는 내비게이션엔 아이콘의 시각적 구별력이 도움이 되죠.

함께 쓰면 — 빠른 인지 + 명확한 의미. 아이콘(빠른 시각 인지·구별)과 레이블(명확한 의미)을 함께 두면 둘의 장점이 합쳐집니다. 사용자는 아이콘으로 탭을 시각적으로 빠르게 구별하고, 레이블로 그 의미를 확신하죠. 익숙한 사용자는 아이콘만 보고 빠르게, 처음 온 사용자나 모호한 아이콘은 레이블로 확인합니다. 둘이 서로를 보강해 어떤 사용자에게도 명확하죠.

접근성 관점. 레이블(텍스트)은 스크린 리더에도 직접 읽힙니다 — 아이콘만 있으면 별도 aria-label(CP-130 페이지네이션 아이콘 버튼처럼)을 줘야 하지만, 텍스트 레이블이 함께 있으면 그것이 자연스럽게 탭의 이름이 되죠. 또 인지 장애·저시력 사용자에게도 글자가 의미를 명확히 합니다. ‘아이콘+텍스트’ 병행은 WCAG·KWCAG가 권장하는 ‘색·아이콘만이 아닌 텍스트 병행’(SC 1.4.1 등) 정신과도 통합니다.

그래서 CP-138은 모든 탭에 아이콘+레이블을 함께 두라고 합니다. 일부 탭만 글자가 있고 일부는 아이콘만 있으면 일관성도 깨지죠(CP-136의 일관성 정신). 모든 탭이 ‘아이콘 위 + 레이블 아래’(흔한 배치)로 통일돼야 정돈되고 명확합니다. 다만 레이블은 짧고 간결해야 좁은 탭에서 잘리지 않죠 — 이는 다음 편 CP-139에서 다룹니다.

3. 점검 / 개선

무엇을 점검하나

아이콘+레이블 — 모든 탭에 아이콘과 텍스트 레이블이 함께 있는가.

일관 배치 — 모든 탭이 동일한 구성(예: 아이콘 위·레이블 아래)인가.

레이블 가독 — 레이블이 잘리지 않고 읽히는가(CP-139).

개선 방향

아이콘만의 탭에 텍스트 레이블 추가. 모든 탭 구성 통일.

레이블을 짧게(CP-139) 해 좁은 탭에서도 안 잘리게.

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

역할	책임
디자이너	아이콘+레이블 구성·배치 정의
퍼블리셔/개발	모든 탭 아이콘+레이블 구현

기관 유형	CP-138 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (모바일 탭 바 사용 시)

모바일 하단 탭 바를 쓰는 사이트·앱이 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 탭에 아이콘과 레이블이 함께 있나요?

□ 모든 탭이 동일한 구성(아이콘 위·레이블 아래 등)인가요?

□ 레이블이 잘리지 않고 읽히나요?

❓ FAQ

Q1. 아이콘만으로 깔끔하게 하면 안 되나요? 아이콘은 의미가 모호한 경우가 많아 사용자가 추측해야 합니다. 레이블을 함께 줘 의미를 명확히 합니다. Q2. 보편적 아이콘(집=홈)도 레이블이 필요한가요? 일관성·접근성을 위해 모든 탭에 레이블을 둡니다. 익숙한 사용자는 아이콘만 봐도 되지만, 레이블이 확신을 줍니다. Q3. 레이블이 길면 어쩌나요? 짧고 간결하게(CP-139) 작성해 좁은 탭에서도 안 잘리게 합니다.

6. 마무리

CP-138의 메시지:

그림과 글자를 같이 — 모든 탭에 아이콘과 레이블을 함께.

아이콘은 빠른 인지를, 레이블은 명확한 의미를 줍니다. 둘을 함께 쓰면 서로를 보강해 어떤 사용자에게도 명확하고, 스크린 리더·인지 장애 사용자에게도 유리하죠. 모든 탭에 일관되게 적용해야 합니다. 다음 편은 레이블을 짧고 간결하게 쓰는 규칙입니다.

다음 편 예고 ▶ 「259. (CP-139) [모바일] 레이블 텍스트는 짧고 간결하게 작성하여 잘리지 않도록 하고 있다.」

ViewCheck는 탭 바의 모든 탭이 아이콘과 레이블을 함께 사용하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 탭 바(Tab bars) 가이드 — https://www.krds.go.kr/html/site/component/component_11.html

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

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