0109_figma (+컨트롤 요소)

01. 컨트롤 요소 이해하기

1) 컨트롤 컴포넌트
- 컨트롤 컴포넌트는 사용자가 선택지를 특정할 수 있는 요소

- 여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 돕는 요소

 

2) 컨트롤 컴포넌트의 종류

- 왼쪽부터 순서대로 체크박스, 라디오, 스위치(토글), 슬라이더

 

3) 컨트롤 요소 설계 시 참고할 점

-1) 컨트롤 요소의 최소 터치 영역
- 컨트롤 요소는 버튼 등 다른 UI에 비하면 크기가 매우 작다.

- 사용자들이 작은 요소를 손가락으로 제대로 누르기엔 불편할 것.

- 컨트롤 요소 자체는 작더라도, 그 주변으로 최소 크기 범위로

📌 닐슨 노먼 그룹에서는 실제 화면 크기를 기준으로 최소 1cm*1cm 정도를 권장.

 

-2) 컨트롤 요소의 라벨

- 컨트롤 요소는 대부분 라벨과 쓰인다.

- 라벨을 누르더라도 컨트롤 요소가 작동하게 하는 것이 일반적

 

 

02. 체크박스 컴포넌트

1) 체크박스 컴포넌트의 정의

- 체크박스는 여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트

- 일반적으로 라벨과 함께 같이 스인다.

 

2) 체크박스의 의사 상태

- 체크박스는 기본적으로 2가지 의사 상태를 갖는다.

 

3) 체크박스의 특징

-1) 체크박스는 여러개 선택할 수 있다.

-체크박스는 하나를 선택한다고 해서 다른 선택지에 영향을 주지 않아요.

 

2) 체크박스는 아무것도 선택하지 않을 수 있다.

진행이 가능한지 아닌지와는 별개로, 아무것도 체크하지 않은 상태를 만들 수 있다.

 

3) 하위 항목이 있을 때 일부만 선택할 수도 있다.

- 상위 항목을 선택하면 하위가 모두 선택 된다.

- 하위 항목 일부를 체쿠하거나 해제하면 상위 항목의 상태가 '결정되지 않은'이라는 뜻의 Indetermined 상태로 변한다.

 

4) 체크박스 만들기

기본형태 만들기

-1) 가로 24px, 세로 24px의 프레임을 만든다.

- 체크박스와 라디오의 기본 크기를 24px로 만든 것이 권장. 4배수나 8배수 그리드에서 사용하기 적합한 크기면서, 동시에 기본 폰트 스타일의 행간 크기인 24px과도 크기가 맞기 때문에 더 쉽게 정렬 가능.

-2) 가로 20px, 세로 20px의 프레임을 안에 넣고 이름을 Container로 변경.

- 왜 20*20 인지?
- 폰트 행간이라는 높이가 있고, 글자 자체의 크기는 그보다 더 작다.

- 24*24 크기의 프레임에 체크박스를 바로 만들게 되면 체크박스가 더 커보인다.
- 20px*20px 크기로 만들어 폰트와 같이 사용했을 때 균형을 맞추기 위함이에요.

-3) 체크 아이콘을 Container안에 넣는다.

 

 *꿀팁
체크 아이콘의 위치를 시각적으로 보정하는 방법

체크 아이콘을 컨테이너에 넣을 때, 수치로는 가운데 있지만 눈으로 보면 어딘가 모르게 중심이 맞지 않는 것 처럼 느껴진다. 

 

- 4) 스타일 적용한다.

- Container의 배경색을 프라이머리 색상으로 적용

- 체크 아이콘의 색상은 흰색으로 적용

- Container의 끝을 조금 둥글게 하고 싶다면 2~4 정도의 곡률을 적용해 주세요.

* 곡률은 실무에서 더 정확한 표현으로는 border-radius라고 부른다.

* 곡률을 높이의 50%크기로 적용하면 끝이 완전히 둥근 모양이 나온다.

 

5) 이름을 Checkbox로 변경하고 컴포넌트로 만든다.

 

의사상태 적용하기

1) 배리언츠를 생성

2) 배리언츠의 이름을 Checked로 적용

3) 체크박스의 Checked 값을 True로 만들고, 배리언츠를 하나 추가

4) 새로 만든 배리언츠의 값을 False로 적용

5) False 배리언츠에 스타일을 적용

-1) 컨테이너의 배경색을 흰색으로 적용

-2) 컨테이너의 테두리를 추가하고 색상은 gray300을 적용

-3) 체크 아이콘의 색상 역시 gray300으로 적용

 

06. 라디오 컴포넌트

1) 라디오 컴포넌트의 정의

- 라디오는 여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컴포넌트

- 일반적으로 라벨과 함께 같이 쓰인다.

2) 라디오의 의사 상태

3) 라디오의 특징

- 1) 라디오는 여러개를 동시에 선택할 수 없어요.

- 라디오는 하나를 선택하면 이미 선택한 다른 선택지에 영향을 미쳐요.

2) 라디오는 아무것도 선택하지 않는 게 불가능

- 라디오는 반드시 선택되어 있어야 한다.

*사용자가 많이 선택하는 항목을 기본값으로 설정해두면, 사용자가 더 편하게 진행할 수 있다.

 

 

4) 라디오 만들기

기본형태 만들기

1) 가로 24px, 세로 24px의 프레임을 만들기

2) 가로 20, 세로 20의 프레임을 안에 넣고, 이름을 Container로 변경