[TIL] 24.10.14(월)

피그마 3주차 강의 내용 정리(8~10강)

버튼 컴포넌트

컴포넌트의 종류 중 '액션'에 해당하는 컴포넌트, 누름으로써 중요한 동작을 수행하는 요소

행동 유도성(Affordance): 상호작용이 가능한 물체는 상호작용이 가능하다는 시각적인 단서를 제공해야 한다는 뜻

즉, 버튼을 설계할 때는 누를 수 있다는 시각적인 힌트를 충분히 드러내야 함

= 행동을 유도하는 속성 = 행동 유도성 = 어포던스(Affordance)

* 버튼뿐만 아니라 모든 UI를 설계할 때 UI의 개념과 목적을 최우선으로 고려해야 함

 

버튼의 구조

1. 컨테이너: 안에 있는 요소를 감싸고 있는 프레임(버튼의 높이는 컨테이너 안의 상하 여백+안에 있는 요소의 높이로 정해짐)

2. 라벨/레이블(Label): 버튼의 행동을 안내하는 글자

* UI에서 사용자가 입력하는 글자: 텍스트 / UI가 사용자에게 '이렇게 하세요'를 안내하는 글자: 라벨

3. 리딩 엘리먼트(Leading Element): 버튼 라벨보다 더 앞쪽에 있다는 뜻에서 리딩(이끄는) 엘리먼트라고 부름 (엘리먼트=요소)

4. 트레일링 엘리먼트(Trailing Element): 버튼 라벨보다 더 뒤쪽에 있다는 뜻에서 트레일링(뒤따르는) 엘리먼트라고 부름

 

버튼의 종류(크게 4가지로 분류)

1. 박스 버튼, 일반 버튼, 솔리드 버튼: 주로 프라이머리 버튼으로 사용

2. 아웃라인 버튼, 고스트 버튼, 엠티 버튼: 주로 덜 중요한 버튼으로 사용

3. 스플릿 버튼: 주요 액션과 관련된 보조 액션을 제공해야 할때 사용, 주요 액션과 보조 액션이 나뉘어 있어서 스플릿(Split, 쪼개진) 버튼

4. 텍스트 버튼: 글자로만 이루어진 버튼으로 주요 액션에 비해 비중이 낮고 별로 중요하지 않은 기능을 수행할 때 사용

 

텍스트필드 컴포넌트

컴포넌트의 종류 중 '인풋'에 해당하는 컴포넌트, 사용자가 무언가를 입력할 수 있게 하는 컴포넌트로 텍스트필드가 가장 대표적

 

텍스트필드의 구조

1. 인풋 컨테이너(Input Container): 글자를 입력하는 부분

2. 라벨/레이블(Label): 입력해야 하는 값이 무엇인지 알려주는 텍스트

3. 리딩 엘리먼트(Leading Element): 텍스트보다 더 앞쪽에 있는 엘리먼트

4. 트레일링 엘리먼트(Trailing Element): 텍스트보다 더 뒤쪽에 있는 엘리먼트

5. 헬퍼 텍스트(Helper Text): 유효성 검사 결과를 보여주거나 입력해야 하는 값의 가이드라인을 제공하는 도움말

 

플레이스 홀더

플레이스(자리를) + 홀더(지키고 있는 것)으로, 한국말로는 '자리표시자'라고 함

사용자가 입력해야 하는 예시를 제공하는 용도로 사용

사용자가 글자를 입력하기 시작하면 사라지고, 글자를 모두 지우면 다시 나타남

* 플레이스홀더 자리에는 입력값의 조건을 적지 않는 것을 권장

* 플레이스홀더는 값을 입력하기 시작하면 사라짐

* 조건이 복잡하지 않은 경우에는 괜찮지만, 조건이 복잡하거나 어려운 경우에는 사용자가 입력 중에 조건을 까먹을 수 있음 > 그렇게 되면 사용자는 쓰던 걸 지우고 다시 플레이스홀더를 봐야하는 불편함이 생김 > 플레이스홀더에는 조건 대신 '입력 예시'를 넣어야 함

(텍스트필드에 입력해야하는 값의 조건은 '헬퍼 텍스트'로 적어야 함)

 

유효성 검사(Validation Check) > 줄여서 '밸리데이션'이라 하기도 함

텍스트필드에서 사용자가 입력한 텍스트가 유효한지 아닌지를 검사해주는 것(이름에 특수문자, 생년월일이나 핸드폰에 숫자가 하나 더 있는 경우, 이메일 형식이 잘못된 경우 등 사용자에게 '입력한 텍스트에 문제가 있으니 다시 확인해주세요'라는 이야기를 해줘야 한다는 뜻

* 사용자는 서비스마다 달성해야하는 목적(커머스=구매 / 커뮤니티=소통 등)존재 > 이 과정에서 사용자에게 방해가 발생했을 때 그걸 자연스럽게 피하거나 해결할 수 있도록 도와주는 것 > 유효성 검증은 적절한 문구와 안내를 담당하는 중요한 부분

* 인간은 기본적으로 부정적인 것에 거부 반응을 보임 > 오류는 부정적인 인식을 주는 요소 > 오류가 발생하더라도 차선책이나 해결책을 자연스럽게 제시 > 오류에 대한 부담이나 거부감을 최소화 해야함 > 부정적인 문구보다는 최대한 긍정적인 방향으로 사용자에게 안내해야함

 

컨트롤 컴포넌트

컨트롤 컴포넌트는 사용자가 선택지를 특정할 수 있도록 하는 요소 > 여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 돕는 요소

 

컨트롤 컴포넌트의 종류

- 체크박스: 여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트로 일반적으로 라벨과 함께 사용, 아무것도 선택 X 가능

- 라디오: 여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컴포넌트로 일반적으로 라벨과 함께 사용, 아무것도 선택 X 불가능

- 스위치(토글)

- 슬라이더

 

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

- 컨트롤 요소의 최소 터치 영역: 컨트롤 요소는 버튼 등 타 UI에 비하면 크기가 매우 작음 > 주변으로 최소 크기 범위를 만들어 줘야 함

- 컨트롤 요소는 대부분 라벨과 같이 쓰임 > 라벨을 누르더라도 컨트롤 요소가 작동되게 하는 것이 일반적(컨트롤 요소를 배치할 때는 간격을 충분히 줘서 잘못 누르는 일을 방지해야함)

- 컨트롤 요소와 라벨을 깔끔하게 정렬하려면 두 요소의 세로값을 같게 해두는게 좋음 > 라벨의 세로=행간 > 컨트롤의 사이즈를 행간에 사용한 값들로 만들어두면 정렬이 쉬움

UI 학습 시 도움되는 관점

컴포넌트의 모양이 아니라 목적과 기능이 중요한 이유

버튼마다 모양도, 색상도 다 다르지만 같은 버튼으로 인식하는 이유 > 버튼의 생김새가 아닌 '버튼이 하는 일'을 기준으로 생각하기 때문

> UI의 모양과 형태보다는, UI의 기능과 목적에 초점을 두고 공부해야 함 = UI의 기능주의적 관점