피그마 기초 완전 정복 - 비디자인 환경 이해 및 비요소 만들기 (UI 설계와 제작 실습 2편)

1. 오늘 학습 키워드

- 컨트롤 컴포넌트

- 체크박스 컴포넌트

- 라디오 컴포넌트

---

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

 

<컨트롤 컴포넌트>

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

- 사용자의 선택이나 설정 변경을 위해 사용됨

- 오랫동안 사용되어 온 만큼 구조와 사용 방식이 비교적 표준화되어 있음

- 디자인 시스템마다 차이가 크지 않아 기본 개념만 이해해도 다양한 서비스에 쉽게 적용할 수 있음

 

 

 

 

컨트롤 컴포넌트 종류

- 대부분 4가지 컨트롤 컴포넌트를 기본적으로 제공함

- 체크박스, 라디오, 스위치(토글), 슬라이더

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

 

 

컨트롤 요소 설계 시 주의사항

• 컨트롤 요소의 최소 터치 영역
  - 컨트롤 요소는 크기가 작기 때문에 사용자가 쉽게 누를 수 있도록 충분한 터치 영역을 확보해야 함
  - 요소 자체가 작더라도 주변에 최소 클릭, 터치 영역을 함께 제공하는 것이 중요함
  - 닐슨 노먼 그룹에서는 실제 화면 크기를 기준으로 최소 1cm X 1cm 정도를 권장함
  

  

• 컨트롤 요소의 라벨
  - 컨트롤 요소는 보통 라벨과 함께 사용됨
  - 라벨을 눌러도 함께 동작하도록 설계함
  

  

  
  - 체크박스만 누를 수 있다면 사용자가 정확히 해당 영역만 눌러야 하는 불편함이 생김
  

  

  
  - 여러 컨트롤을 배치할 때는 오작동을 방지하기 위해 충분한 간격을 확보해야 함
  

  

• 컨트롤 요소와 라벨의 정렬
  - 컨트롤 요소와 라벨을 깔끔하게 정렬하려면 두 요소의 세로를 맞추는 것이 좋음
  - 컨트롤 크기를 라벨의 행간(Line Height) 기준으로 설정하면 더 쉽게 정렬할 수 있음
  

  

 

 

 

<체크박스 컴포넌트>

 

- 여러 선택지 중 하나 이상을 선택할 때 사용하는 컨트롤 컴포넌트
- 사용자가 복수의 항목을 선택할 수 있음

- 일반적으로 라벨과 함께 사용함

- 체크박스의 디자인은 디자인 시스템들마다 제각각임

 

체크박스의 의사 상태

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

- 필요에 따라 비활성화(Disabled) 등 추가 상태를 설계할 수도 있음

체크박스의 특징

• 여러개를 선택할 수 있음
  - 각 항목이 독립적으로 동작함
  - 하나를 선택해도 다른 선택지에는 영향을 주지 않음
  

  

• 아무것도 선택하지 않을 수 있음
  - 모든 항목을 선택하지 않은 상태도 허용할 수 있음
  

  

• 하위 항목이 있는 경우엔 부분 선택을 할 수 있음
  - 상위 항목을 선택하면 하위 항목이 모두 선택됨
  - 하위 항목 일부를 체크하거나 해제
  → 상위 항목의 상태가 Indetermined(결정되지 않은) 상태로 변함
  - 구현 복잡도를 줄이기 위해 부분 선택 상태 대신 해제 상태로 통일해 사용하는 경우도 있음
  

  

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

- 체크 아이콘은 수치상 가운데에 있어도 시각적으로는 중심이 어긋나 보일 수 있음
→ 사람의 시각이 착시의 영향을 받기 때문

- 더 균형 있어 보이도록 위치나 크기를 조정하는 시각 보정(Optical Adjustment) 을 적용함

 

 

곡률(Radius) 적용 시 주의사항

- 실무에서는 곡률보다 Border-radius 라는 용어를 더 자주 사용

- 곡률을 높이의 50%로 적용하면 완전히 둥근 형태가 됨

- 곡률은 높이의 50%를 넘지 않도록 설정하는 것을 권장함

 

 

체크박스 만들기

 

 

 

<라디오 컴포넌트>

 

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

- 일반적으로 라벨과 함께 사용함

- 라디오의 디자인은 디자인 시스템들마다 제각각임

 

 

라디오 버튼(Radio Button)의 이름

- 과거 라디오의 버튼 방식에서 유래

- 초기 형태의 라디오는 주파수가 정해진 버튼을 누르는 방식이었음

- 주파수 버튼을 누르면 이미 눌린 다른 주파수 버튼은 꺼지는 방식임

- 라디오 버튼은 여러 선택지 중 하나만 선택할 수 있는 컨트롤 컴포넌트임

 

 

라디오의 의사 상태

 

- 기본 상태 외에도 필요에 따라 다양한 상태를 추가로 설계할 수 있음

 

 

라디오 특징

• 여러개를 동시에 선택할 수 없음
  - 하나를 선택하면 이미 선택한 다른 선택지에 영향을 미침
  

  

• 아무것도 선택하지 않는 게 불가능함
  - 사용자가 가장 많이 선택하는 항목을 기본값으로 설정하면 더 빠르고 편리하게 진행할 수 있음
  

  

라디오 만들기

 

 

 

<컴포넌트의 모양이 아니라 기능이 중요한 이유>

- 모양과 색상이 달라도 버튼으로 인식하는 이유는 버튼이 수행하는 역할이 같기 때문

- 사용자는 버튼의 생김새보다 누를 수 있고 행동을 수행한다는 기능을 기준으로 버튼을 인식함

 

 

UI를 바라보는 기능주의적 관점(Functional Perspective)

- 회사와 팀마다 UI의 형태와 스타일은 모두 다를 수 있음

- 형태만 기준으로 UI를 이해하면 디자인이 바뀔 때마다 새로운 것으로 인식하게 됨

- UI를 학습할 때는 생김새보다 목적과 기능에 집중하는 것이 중요함

---

3. 학습하며 겪었던 문제점 & 에러

1) 

 학습 과정 도중 피그마 기능이 아직 익숙하지 않아 원하는 기능을 바로 찾거나 적용하는 데 어려움이 있었다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 직접 체크박스와 라디오 버튼 컴포넌트를 제작해 보면서 오토레이아웃, 컴포넌트 생성, 정렬 기능 등의 사용법에 점차 익숙해질 수 있었다.

2)

 학습 과정 도중 라디오 버튼이 설문조사나 금융 서비스 외에는 어디에 사용되는지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 배송 방법 선택, 로그인 방식 선택, 정렬 기준 선택, 테마 설정 등 여러 선택지 중 하나만 선택해야 하는 다양한 상황에서 활용된다는 것을 알게 되었다.

3)

 학습 과정 도중 체크박스, 라디오 버튼, 텍스트필드 외에도 다른 컴포넌트가 있는지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 드롭다운, 토글 스위치, 셀렉트박스, 모달, 탭, 카드, 아코디언, 툴팁 등 다양한 컴포넌트가 존재하며, 각 컴포넌트는 사용자에게 필요한 상호작용과 정보를 제공하기 위한 목적에 따라 사용된다는 것을 알게 되었다.