📌
1. 디자인 시스템
2. 컴포넌트 제작
3. UI의 기능주의적 관점

1. 디자인 시스템

📌UI 키트

UI 키트는 사용하는 규칙과 방법 없이 단순히 필요한 UI만 모아둔 것 (재료 목록)

📌디자인 시스템

디자인 시스템은 UI구조, UI의 규격, 사용 사례, 주의사항 등 필요한 내용들을 상세하게 적어놓은 문서 (레시피)

장점

1. 디자인을 반복해서 사용할 수 있기 때문에 시간과 비용이 줄어들고 효율적으로 관리할 수 있다.
2. 어떤 디자이너가 만들어도 동일한 퀄리티의 디자인을 설계할 수 있다.
3. 개발자와 협업을 할 때 소통이 용이하다.

단점

1. 다양한 형태의 UI를 모아 하나로 통일하는 과정이 오래걸린다.
2. 필요 없는 UI가 과도하게 많아질 수도 있다.
3. 새로운 디자인이 필요할 때 디자인 시스템만을 활용한다면 디자인의 신선함이 줄어든다.

📌아토믹 디자인 시스템 (Atomic Design System)

색상, 둥글기, 여백, 폰트, 아이콘 등을 가장 작은 알갱이인 원자(Atom)에 비유하여 그러한 원자들을 모아 분자 즉, UI를 만드는 것이 아토믹 디자인 시스템의 핵심 개념

2. 컴포넌트 제작

- 버튼 컴포넌트

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

설계 시 주의사항

버튼을 설계할 때, 누를 수 있다는 시각적 힌트를 버튼 디자인에 드러내야한다. (행동 유도성을 가지도록 디자인한다.)
버튼의 목적 : 누를 수 있고 누르면 어떠한 기능을 한다.

📌 행동 유도성 (Affordance)
상호작용이 가능하다는 시각적인 단서를 제공하는 것
ex. 스위치를 보면 불을 껐다 켤 수 있겠구나 생각

버튼 컴포넌트의 구조

1. 컨테이너

안에 있는 요소를 감싸고 있는 프레임
버튼 높이 = 상하 여백 + 내부 컨텐츠

2. 라벨 / 레이블

버튼의 행동을 안내하는 글자
(↔️ 텍스트 : 아무런 지시가 없는 혹은 사용자가 입력하는 글자)
ex. 취소하기, 삭제, 확인 등

3. 리딩 엘리먼트 (Leading Element)

버튼 라벨 보다 더 앞쪽에 있는 요소

4. 트레일링 엘리먼트 (Trailing Element)

버튼 라벨보다 더 뒤쪽에 있는 요소

📌
우리나라처럼 글을 왼쪽에서 오른쪽으로 읽고 쓰는 문화 (LTR)
아랍처럼 글을 오른쪽에서 왼쪽으로 글을 읽고 쓰는 문화 (RTL)

버튼 컴포넌트의 종류

1. 박스버튼, 일반버튼

박스 버튼이라고도 불리며 색상이 안에 꽉 차있어서 솔리드 (Solid)버튼이라고도 불린다.
중요도가 높을 때 사용 (시각적 효과가 더 크기 때문)

2. 아웃라인 버튼, 고스트 버튼, 엠티 버튼

테두리만 있고 속이 빈 듯한 형태의 버튼
중요도가 비교적 낮을 때 사용

3. 스플릿 버튼

주요 액션과 관련된 보조 액션을 제공해야할 때 사용되는 버튼
가운데가 쪼개져 (split)있기 때문에 스플릿 버튼이라고 불림

4. 텍스트 버튼

배경색과 테두리 없이 글자로만 이루어진 버튼
중요하지 않은 기능을 수행할 때 사용

- 텍스트필드 컴포넌트

컴포넌트 종류 중 인풋에 해당하는 컴포넌트
사용자가 무언가를 입력할 수 있다.

텍스트필드 컴포넌트의 구조

1. 인풋 컨테이너

글자를 입력하는 부분

2. 라벨 / 레이블

입력해야하는 값이 무엇인지 알려주는 텍스트
ex. 이메일, 비밀번호

3. 헬퍼 텍스트

사용자가 입력해야하는 값이 무엇인지 가이드라인을 제공하는 도움말
ex. '사용하실 아이디를 입력하세요.'

4. 플레이스 홀더 (Placeholder)

자리 표시자
사용자가 입력해야하는 값의 예시를 제공하는 용도로 사용
조건보다는 입력 예시를 작성한다.
ex. 010-1234-5678

5. 유효성 검사 (Validation Check)

사용자가 입력한 텍스트가 유효한지 아닌지를 검사해주는 것
사용자가 입력한 값에 오류가 있다면 메세지를 띄워줌
ex. 특수 문자를 입력하지 않았을 경우 ‘특수문자를 포함해주세요’ 등

➡️오류가 발생했더라도 사용자가 오류라고 느껴지지 않도록 차선책이나 해결책을 제안해야한다.

- 컨트롤 컴포넌트

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

컨트롤 컴포넌트의 종류

1. 체크박스
2. 라디오
3. 토글 (스위치)
4. 슬라이더

설계 시 참고할 점

1. 컨트롤 요소의 크기

버튼, 인풋 등의 다른 요소에 비해 크기가 작기 때문에 사용자가 터치를 할 때 불편함을 느낄 수 있다.
따라서 컨트롤 요소 자체의 크기가 작더라도 그 주변으로 최소 크기 범위를 만들어줘야한다.
일반적으로 실제 화면 크기를 기준으로 최소 1cm X 1cm 권장

2. 라벨 클릭 시

컨트롤 요소는 대부분 라벨과 같이 쓰인다.
따라서 라벨을 누르더라도 컨트롤 요소가 작동할 수 있도록 해야한다.
여러 요소를 배치한다면 간격을 충분히 줘야한다.

3. 컨트롤 요소와 라벨의 정렬

두 요소의 높이 값을 동일하게 설정

- 체크박스 컴포넌트

특징

1. 여러 선택지 중 1개 이상을 선택할 때 사용된다. (여러개 선택 가능)

2. 일반적으로 라벨과 함께 사용된다.

3. 기본적으로 체크 된 상태, 체크 되지 않은 상태, 두가지 의사 상태를 가진다. (디테일하게 디자인할 경우 여러가지 상태 추가 가능)

4. 아무것도 선택되지 않는 경우도 있다. (진행과는 별개)

5. 체크박스의 디자인은 디자인 시스템마다 다르기 때문에 자유롭게 제작이 가능하다.

제작 시 주의 사항

체크 박스를 만들 때 24px의 정사각형 프레임안에 20px의 정사각형 프레임을 위치시킨다.

체크박스는 주로 라벨과 함께 사용되는데 라벨의 폰트 크기가 16px일 때 실제 라벨의 높이는 20px이지만 우리의 눈은 그 라벨의 높이를 24px로 인식한다.
따라서 체크 박스의 크기 자체를 24px로 지정하면 라벨에 비해 크게 인식되기 때문에 24px의 프레임 안에 20px의 체크 모양을 위치시킨다.

- 라디오 컴포넌트

특징

1. 여러 선택지 중 1개를 선택할 때 사용된다. (여러개 선택 불가)
2. 일반적으로 라벨과 함께 사용된다.
3. 라디오도 선택됨, 선택되지 않음 두가지 의사 상태를 가진다. (디테일하게 디자인할 경우 여러가지 상태 추가 가능)
4. 아무것도 선택하지 않는 것이 불가능하다. (기본값으로 선택된 상태 지정)
5. 하나를 선택하면 이미 선택한 다른 선택지에 영향을 미친다.
   

3. UI의 기능주의적 관점

우리는 버튼마다 모양, 색상, 크기 등이 다르지만 같은 버튼으로 인식한다.
우리는 버튼의 생김새가 아닌 버튼이 하는 일을 기준으로 생각하기 때문이다.
따라서 UI를 설계하거나 비교할 때 형태가 아닌 UI의 목적, 기능에 집중해야한다.

🐥 다음시간에 학습할 내용
컴포넌트 프로퍼티의 이해
버튼 컴포넌트 제작 및 활용
합성 컴포넌트와 네스티드 인스턴스