TIL_1W3D_마스터 컴포넌트와 인스턴스

디자인 카타
오늘의 토픽 - 하나의 정보 입력 완료 방식, A와 B는 각각 어떤 장단점이 있을까요?

선택 A안
실수를 종종하는 편이기 때문에 정보를 입력하고 확인 후 넘어갈 수 있는 A안 CTA 버튼을 골랐음

B안을 선택하지 않은 이유로는 자동적으로 확인하여 섹션을 이동하면 실수로 주민등록번호를 잘못치는 경우
오류 메세지가 나올 것 이기 때문에 A안은 다시 한 번 잘 입력하였는지 확인 할 수 있기 때문임

컴포넌트는 구성품이라는 뜻
UI 디자인에서 컴포넌트는 파운데이션을 조합해 만들어지는 구성품을 말함

마스터 컴포넌트는 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심
원본이며, 복사된 디자인들을 한번에 수정하거나 편집할 수 있는 중요한 기능임
원본 그대로 이기 때문에 수정이 필요할 시 수정, 지우고 싶을 시 지우면 됨
마스터 컴포넌트를 복제 시 복제본인 인스턴스가 생성됨

인스턴스는 마스터 컴포넌트의 복제본임
따라서 마스터 컴포넌트를 복사 시 인스턴스가 생기는데, 컴포넌트의 속성을 그대로 이어 받아옴
다만 인스턴스는 ◇ 아이콘이 붙어있는데 무언가의 복제본이라는 뜻임

마스터 컴포넌트와 인스턴스의 관계
편의를 위하여 마스터 컴포넌트를 컴포넌트라고 불러서 작성한 것
컴포넌트를 수정 시 인스턴스에도 반영이 됨

인스턴스를 먼저 수정 시 컴포넌트를 이후에 수정하여도 반영이 안됨
인스턴스 수정한 것이 컴포넌트 변경사항 보다 우선 순위로 작용

컴포넌트를 지워도 인스턴스는 남아있음
다만, 인스턴스를 편집하거나 수정하려면 컴포넌트를 복구해야함

연결 해제 시 인스턴스는 컴포넌트와 분리되며, 일반 프레임으로 변경됨
연결 해제를 Detech(디태치;분리하다)라고 함

제품(프로덕트)란 우리가 웹사이트나 앱을 디자인 하는데 여기서, 웹과 앱을 말함
프로덕트를 만드는 디자이너들은 사용자들이 겪는 문제를 찾아 디자인으로 개선

비유1. 단어와 문법
언어를 배울 때 단어와 문법을 배우는데, 단어만 알고 있으면 의사소통은 어느정도 가능하나 제약이 많음
그래서 단어를 조합하고 연결하는 시스템인 문법을 배우는데, UI키트는 단어만 있는 셈

비유2. 재료와 레시피

유의할 점
디자인 시스템이라고 좋고 UI키트라고 무조건 나쁜 것이 아님
서로 합이 잘 맞거나 팀 인원이 적으면 오히려 완벽한 문서를 갖추는 것이 비효율적일 수 있음
그런 경우 UI키트 수준 유지가 더 효율적

디자인 시스템의 장단점
장점
디자인 반복해서 사용할 수 있어 시간과 비용 감소
누가 만들어도 동일한 품질의 제품 설계 가능
단점
다양한 형태 UI를 모아 하나로 통일하는 과정이 매우 오래 걸림
필요한 건 몇개 없는데, 그에 비해 UI가 과하게 많아질 수 있음
새로운 디자인 필요 시, 디자인 시스템 활용하려다 보니 혁신 줄어듬

아토믹 디자인 시스템(Atomic Design System)은 원자를 영어로 Atom이라고 하는데, '원자를 결합하는 개념의 디자인 시스템'을 의미함!

UI의 분류
액션(Action) 사용자가 중요한 행동을 수행할 때 사용

인풋(Input) 사용자의 입력을 받을 때 사용
텍스트를 입력할 수 있는 텍스트필드
미리 정해둔 옵션 중 하나를 선택할 수 있는 셀렉트박스 등이 여기 포함

인포메이션(Information) 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용
토스트 메시지나 스낵바, 라벨 등이 여기 포함

컨테이너(Container) 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트
카드, 바텀시트, 리스트처럼 복잡한 구조인 경우가 많음

네비게이션(Navigation) 사용자가 페이지를 이동할 때 사용
네비게이션 바, 앱 바, 화면 하단의 탭 바, 사이드 바 등이 여기 포함

컨트롤(Control) 사용자가 설정이나 값을 수정할 때 사용
라디오, 체크박스, 스위치 등이 여기 포함

분류는 임의적인 것이라 더 잘게 분류나 더 합쳐서 분류할 수 있음
관점에 따라 어떨 때는 컨트롤, 어떨 때는 인풋으로 분류해도 상관없는 UI들 존재
중요한 것은 UI가 어떤 상황에서 어떤 기능을 하는지임

컴포넌트가 기본 자체는 유지한 채, 상황에 따라 다른 스타일을 가지는 경우가 있음
그런 다른 스타일을 의사 상태라고 함
의사 상태에서 의사란 가짜의, 가상의(pseudo;'수도'라고 읽음)라는 뜻
의사 상태는 컴포넌트의 가상의 상태를 표시할 때 사용

의사 상태 설계 시 주의해야 할 것

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

버튼 설계 시 유의할 점
우리가 직관적으로 아는 것들과 다른 ->

행동 유도성은 상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적인 단서를 제공해야 한다는 뜻임
이걸 우리는 행동을 유도하는 속성이라고 해서 행동유도성, 즉 '어포던스'라고 함

따라서 모든 UI를 설계할 때 UI의 개념, 목적을 최우선 고려

버튼의 구조

리딩과 트레일링에서 '앞'과 '뒤'는 어떤 뜻인가?

버튼의 종류
박스버튼, 일반버튼은 우리가 일반적으로 아는 버튼
박스처럼 생겨서 박스(Box) 버튼이라고 부름
색상이 안에 꽉 차있어서 솔리드(Soild, 단단한, 꽉 찬) 버튼이라고도 부름

아웃라인 버튼, 고스트 버튼, 엠티 버튼은 테두리가 있고 속이 빈 듯한 형태의 버튼
테두리만 있어서 아웃라인(Outline) 버튼이라고 부르고, 유령처럼 속이 비어있어 고스트(Ghost) 혹은 엠티(Empty) 버튼이라고 부를 수 있음

스플릿 버튼은 주요 액션과 관련된 보조 액션 제공해야 할 시 사용하는 버튼
주요 액션과 보조 액션이 나뉘어 있어 스플릿(Split, 쪼개진) 버튼이라고 부름

텍스트 버튼은 배경색이나 테두리 없이 글자로만 이루어진 버튼
주요 액션에 비해 비중이 낮고, 별로 중요하지 않은 기능을 수행할 때 사용

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

텍스트필드의 구조

플레이스홀더는 플레이스(자리를) + 홀더(지키고 있는 것)로, 한국말로는 '자리표시자'임
사용자가 입력해야 하는 예시를 제공하는 용도로 사용
사용자가 글자 입력하기 시작 시 사라지고, 글자를 모두 지우면 다시 나타남

플레이스홀더를 쓸 때 유의할 것

유효성 검사는 텍스트필드에서 중요한 게 사용자가 입력한 텍스트가 유효한지 아닌지 검사해주는 것
밸라데이션 체크(Validation Check)라고도 부름

유효성 검사를 하는 이유
사용자는 앱 사용하면서 달성해야 하는 목적이 있음
커머스라면 구매, 커뮤니티라면 소통을 해야하는 것 등을 말함
따라서 구매나 소통 과정을 방해하는 순간이 없는 것도 중요하지만, 방해 발생 시 그걸 자연스럽게 피하거나 해결할 수 있도록 도와주는 것 역시 중요함
유효성 검증은 그 적절한 문구와 안내를 담당하는 중요한 부분임

유효성 검사 시 주의사항

버튼 및 텍스트필드 만들기

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

컨트롤 컴포턴트의 종류
디자인 시스템마다 차이가 있지만, 대부분 아래의 4개 컨트롤은 포함됨

컨트롤 요소 설계 시 참고할 점
컨트롤 요소의 최소 터치 영역
컨트롤 요소는 버튼 등 다른 UI에 비해 크기가 매우 작음
따라서 컨트롤 요소 자체는 작더라고, 그 주변으로 최소 크기 범위를 만들어야 함

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

컨트롤 요소는 라벨과 같이 잘 쓰이는데, 컨트롤 요소와 라벨을 좀 더 깔끔하게 정렬하기 위해서 두 요소의 세로를 같게 해두는 것이 좋음
라벨의 세로는 행간과 같으므로, 컨트롤의 사이즈를 행간에 사용한 값들로 만들어두면 정렬을 좀 더 쉽게 할 수 있음

체크박스 컴포넌트의 정의
체크박스는 여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트이며 일반적으로 라벨과 함께 쓰임

체크박스의 의사 상태
체크박스는 기본적으로 2가지 의사 상태를 가지는데
자세하게 설계 시 더 많은 상태를 가질 수 있음

체크박스의 특징
체크박스는 여러개를 선택할 수 있음
체크박스는 아무것도 선택하지 않을 수 있음
하위 항목 있을 때, 일부만 선택할 수 있음
하위 항목 일부를 체크하거나 해제하면 상위 항목의 상태가 '결정되지 않은'이라는 뜻의 Indetermined 상태로 변함

라디오 컴퍼넌트의 정의
라디오는 여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컴포넌트이며 일반적으로 라벨과 함께 쓰임

체크박스와 마찬가지로, 라디오 역시 자세하게 설계 시 더 많은 상태 가질 수 있음

라디오의 특징
라디오는 여러개를 동시에 선택할 수 없으며 하나 선택 시 이미 선택한 다른 선택지에 영향을 미침
라디오는 아무것도 선택하지 않는 게 불가능함
사용자가 많이 선택하는 항목을 기본값으로 설정해두면 사용자가 더 편히 진행할 수 있음

체크박스 및 라디오 만들기

컴포넌트 모양이 아니라 기능이 중요한 이유
만약 생김새로만 UI를 구분하면 조금이라도 다르게 생긴 UI가 나오는 순간 그때까지 알고 있던 기준점이 모두 사라짐
따라서 UI를 비교하고 공부할 때 형태가 아닌 반드시 UI의 목적, UI의 기능에 초점을 두고 공부해야 함
이걸 우리는 UI의 기능주의적 관점이라고 함

3주차 숙제
재미따...⭐