Material Design3 탐구하기 : 체크박스

 

- Materia Design3 시스템 가이드 살펴보기
- 체크박스는 언제 쓰이는걸까?

 

최근 정말 야매로 진행하는 프로젝트를 하게 되어 진행하게 되었다.

PM도 없고, 정말 기획단계가 없는 상태에서 개발자를 구해서
어떻게든 꾸역꾸역 일정을 만들어 소화하고 있었는데 처음시작하다보니
MVP를 만드는 것임에도 페이지가 30~40장이 넘는 페이지를 디자인을 해야했다.

처음 해보는 내가 일관성있게 디자인 할 수 있을까 겁이 났고 

그제서야 디자인 시스템 가이드에 대한 탐구를 하게 되었던 것 같다.

 

특히 시스템가이드에서는 산개되어있는 정보만을 서칭하다 대표적인 두 업체인 애플과 구글 중

그나마 친숙하게 사용하던 웹사이트 툴인 크롬이기에  Material design3를 참고하면 좋겠다 싶어

Material 디자인3를 차근차근 읽어나가고 있다. 

 

UXUI 오픈카톡에서 3일이면 읽는다던데...

그건 아무래도 어느정도 기본기가 있는 실무자 입장인 것 같다.

우선 구글 페이지에서 번역을 키더라도 몇개의 번역이 안되는 언어의 장벽을 크게 느껴

번역기와 chat gpt를 동원해 해석하고, 검증과 복습을 해 나가는 과정이 있으니깐 

엄청난 시간이 걸리게 되었다. 물론 그 검증과 복습을 여기서 풀어볼까 생각중이다. 

출처: Google Material Design3-체크박스

 

서론이 길다. 우선 그나마 친숙하게 생각되어지는 체크박스에 대해 이야기 해볼까 한다.

---

체크박스란?

출처: Google Material Design3-체크박스

체크박스는 선택을 관장하는 솔루션이다.
하지만, 이 외에도 선택과 관련된 솔루션은
라디오버튼과 스위치버튼 등 두 가지가 더 있다. 

한데 그러면 어느 선택지에서
체크박스를 쓰는걸까?

출처: Google Material Design3-체크박스

체크박스는 여러 옵션 중 다중 선택이 가능한 항목이다.
즉 중복으로 선택해도 무방하며, 사용자가 선택을 할 수 있게 하는 상황에 쓰이는 것이다.

방금 말한 스위치와 라디오 버튼은 아래와 같은 기능을 담당하며
체크박스와는 다른 항목에서 선택하는 것이 좋다.

 스위치
독립된 한 선택지 내에서 ON / OFF로 결정되는 버튼

라디오 버튼  

다양한 항목 중 단 1개의 항목을 선택하는 버튼

 

---

체크박스의 종류

체크 박스는 항목의 선택 방법에 따라 3가지의 형태를 가지고 있다.

1) 미선택

아직 선택되지 않은 항목으로 체크가 되지 않은 빈 사각형의 형태를 띄고 있다.

2) 선택

선택은 체크박스가 체크된 상태로, 항목에 대한 선택을 표시하며 대게 체크 표시의 형태를 보인다.

 

3) 불안정선택

불안정 선택은 체크박스 항목 중 자식의 형태에 항목을 가지고 있으며 

자식이 모두 선택되지 않고 일부만 선택되었을 때 불안정 선택의 - 표시를 띈다.

---

체크박스 사용시 주의사항은?
Material Design에서는 체크박스를 사용할시에 주의할 점을 3가지를 꼽는다.

1) 라벨 텍스트는 명확하게 보여야 한다.

출처: 자체제작.

라벨텍스트는 항목선택지에 표시되는 텍스트를 만한다.

Material에서는 체크 표시가 되더라도 우리가 보는 텍스트의 색은

일관성 있게 표시되어야 한다고 말한다.

라벨 텍스트가 선택될때마다 색이나 형태가 변한다면,

사용자가 다른 선택지와 함께 비교하거나 생각할 때 시각적인 방해를 줄 수 있기 때문이다.

 

2) 선택된 항목이 선택되지 않은 항목보다 눈에 잘 띄어야 한다.

출처: 자체제작

1번과 교묘하게 대척을 이루는 말 같지만, 여기선 체크박스에 주된 이미지의 변화를 

말한다. 대게 외곽선에서 클릭시 채워진 컨테이너에 체크 표시가 있는 형태를 보여지며

메인 컬러가 해당색으로 들어가는 것이 일반적이다. 

이러한 형태로 선택 항목이 선택되지 않은 항목보다

시각적으로 높은 위계를 가지고 있는 것을 보여주는 것이다.

 

3) 사용자는 텍스트라벨을 선택하더라도 선택되게 해야한다.(최소 48dp 영역을 확보할 것)

출처: Google Material Design3-체크박스

사용자가 선택을 할시에 불편을 느끼지 않게 하기 위해 

텍스트라벨을 클릭시에도 선택을 하게 하며, 
또한 체크박스 근방을 클릭하더라도 클릭이 가능할 수 있도록 클릭 가능영역을

**48dp(1dp는 피그마에서 1px을 의미)를 확보해달라는 것이다.

** 이 부분은 다음시간에 제대로 알아보도록 하자

물론 우리의 체크박스는 그대로지만, 보이지 않는 48dp의 영역을

여백으로서 확보해두 는 것이다.

---

Material Design은 디자인과 관련된 가이드가 아주 상세하게 나와있기 때문에
만약 조금 더 관련된 정보를 찾고 싶다면 Material Design을 하나씩 분석하는 시간을 가지면 좋을 것 같다. 
https://m3.material.io/components/checkbox/overview

특히 요새는 Chat gpt와 함께 분석한다면 조금 더 딥하게 사고 실험을 할 수 있어 최상의 조건인 듯 하다.

다음시간에는 칩 메뉴와 관련하여 이야기를 해보겠다.