제로베이스 학습 노트

[제로베이스 UI/UX 파트타임 스쿨] 5주차 - (수) Selection control & Badge

thinkuser 2025. 4. 16. 23:51

제로베이스 31일차 학습노트이다.

오늘은 엘리먼트들을 배웠다. 사용자의 인터렉션이 들어가는 선택 하는 것과 정보를 알려주는 뱃지이다. 두가지 모두 모바일이나 웹에서 흔히 보이는 엘리먼트들이었고, 이를 하나하나 만들어보니 생각보다 시간이 꽤나 들어서 쉽지 않은 작업임을 알 수 있었다. 이 작업을 하는 것에 의미보다는 이 요소들을 처음 만든 사람은 누구며 어떤 논리로 이것들을 만들었는지가 더 궁금해졌다.


오늘의 강의 내용

 

1. Selection control

셀렉션 컨트롤은 체크박스, 라디오 버튼, 스위치 컨트롤로 나뉘며, 먼저 체크박스는 말그대로 여러개를 선택할 때 하나씩 체크하는 박스이다. 그리고 라디오 버튼은 미리 정의된 옵션이 '하나' 표시되는 버튼이며, 체크박스와는 다르게 정의된 목록 중 하나만 선택해야하는 경우 사용된다. 그리고 스위치 컨트롤은 특정 옵션을 켜고 끌 수 있는 컨트롤이며 이를 통해 설정값을 사용자가 알게 된다.

 

2. Badge

뱃지는 쉽게말해서 카카오톡 알림의 빨간 뱃지이다. 뱃지에도 여러종류가 있는데 뉴뱃지, 닷뱃지, 넘버뱃지, 플래그가 있다. 뉴뱃지는 말그대로 새로운 업데이트가 있을 때 원에 N이 들어간 형태로 표시되고, 닷뱃지는 점 하나만 표시되어 알림을 준다. 또한 넘버 뱃지는 알림의 개수를 표기한다. 플래그는 좀 더 많은 정보를 주는데, 네모 형태 안에 NEW, D-10, 이벤트 종료 등 다양한 정보를 간단히 표시하여 강조할 때 사용된다.


사실 툴을 배우다 보면 반복되고 약간은 지루한 작업들이 계속될 때가 있다. 특히 이번 강의들이 우리가 정말 많이 봤지만, 그걸 만드는 것에는 새로움보다는 지겨움이 존재하는 작업들인 것 같다. 하지만 이러한 기초적인 것이 쌓여 시각적으로 보기 좋고, 논리적으로도 빈틈없는 화면구성이 나오므로 계속해서 연습해야하는 것 같다. 특히 뱃지는 광고 페이지에서 정말 잘 쓰이는데, 사용자는 실제 인터렉션을 할 버튼보다도 뱃지를 더 우선적으로 보고 가장 필요한 정보를 얻는 것 같다는 생각이 들었다.

 

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발최하여 작성되었습니다.