[UI/UX] 1. Label과 Badge 구별하기
라벨과 뱃지는 어떻게 사용되며, 어떻게 구별하는 게 좋을까?
나의 첫 번째 브런치 글이다.
브런치에 글을 올려야겠다고 결심한 건, UIUX 디자이너 주니어로서 배울 게 산더미라서다.
얼추 알고는 있는데 헷갈리고 제대로 정리되지 못한 지식들을 이곳에 정리하며
나와 같은 주니어들에게 도움을 주고 도움을 받고자 함에 있다.
1. Label(라벨)과 Badge는 어떻게 구별할까?
현재 이직 포트폴리오를 만들고 있는데, 나는 유독 디자인하는 것보다 네이밍 하는 것과 카테고리 짓는 것을 더 어렵게 느낀다. 현재 이직 포트폴리오를 만들고 있는데, 디자인 시스템을 구축하다가 문득 Label 컴포넌트 그룹에 라벨과 뱃지가 혼동되어 있다는 생각이 들었다. 두 가지를 분리하여 정리하고 싶었으나 형태가 비슷비슷해 보여 헷갈렸다. 그리하여 바로 구글링을 시작했다. 우선 한글로 검색했더니 더 헷갈리는 결과들만 나왔기 때문에 영어로 검색하여 UX 커뮤니티에서 답을 얻을 수 있었다.
100% 이것이 정답이라고 할 수는 없겠지만, 가이드를 잡을 때 나름의 규칙을 만들어 놓는다면 분명 업무에도 도움이 될 것이라 생각한다.
1) Badge
뱃지는 요소(링크)와 연결된 항목 수량을 집계하거나 숫자 값에 대한 빠른 시각적 인식을 돕기 위한 요소이며 대부분 정수로 사용되고 있다.
이미지 편집: 본인 / UI 출처 이미지 내 표기- 블라인드 앱의 채널 목록에는 그 채널에 올라온 신규 게시글들에 대한 수량이 빨간색 Badge로 표현되어 있다.
- 네이버 카페의 새 글피드 탭에는 아직 읽지 않은 새 글의 개수가 Tab bar의 Badge에 표기된다.
- 오늘의 집의 마이페이지에는 내가 스크랩한 글들과 내가 작성한 리뷰의 개수가 Badge로 표기된다.
- Badge의 디자인은 배경이 있는 형태와 숫자만 있는 형태 등 다양하다.
2) Label
기본적으로 Label은 추가적인 정보를 나타내는 데 사용된다. 또한 분류 및 검색을 위한 분류법(태그)에서 사용되거나 빠른 인식을 위해 UI 개체에 시각적으로 Tag를 지정하는 방식으로 사용된다.
Label에는 아이콘이 포함될 수 있다. 유의할 점은 Label은 다른 시각적 Tag와 같은 요소와 함께 사용할 시 시각적 피로도가 늘어나고, 제 기능을 못할 수도 있다.(복잡도가 올라갈 수도 있으니)
- 당근마켓의 동네 생활 Tab에는 글의 성격을 빠르게 인식할 수 있게 Label로 상단에 카테고리를 표기한다.
- 원티드는 채용공고에 AI 합격률을 표기하여 구직자들의 선택과 집중을 돕고 있다.
글을 마치며
The mess component of my project...현재 포트폴리오를 제작 중인데, 중구난방한 컴포넌트들을 정리하는 데에 요소들의 명확한 기능 정의가 필요했다. 아직 디자인 시스템을 제대로 운영하는 회사에 다녀보질 못해서 이 방법이 맞다고 확신할 수는 없지만,
이전 중소기업 인하우스 디자이너로 일했을 때의 경험을 살려 나와 같은 어려움을 겪는 주니어 디자이너들에게 조금이나마 도움을 주고싶다.
참고
