UI 컴포넌트

처음에는 컴포넌트를 인식하지 못하고 디자인 시스템에 있는 컴포넌트를 그대로 가져다 쓰는 것에 그쳤지만,
작업자가 왜 그 컴포넌트가쓰였는지를 설명하지 못한다면
제대로 된 설계라고 부르기 어렵다고 생각이 들었다.

단순하게 UI 컴포넌트를 정의하는 것에 그치지않고 사용자 행동을 기준으로 다시 이해하고 정리하여 기록해보았다.

컴포넌트란?

: 웹·모바일 화면에서 사용자의 행동을 유도하고 결과를 만들어내는 재사용 가능한 최소 기능 단위.
▶ 행동, 결과, 재사용 가능

컴포넌트의 특징

• 재사용성
  : 지속적으로 사용될 요소로 어디서 사용하든지 사용자가 동일한 기능으로 인식하여 사용할 수 있어야한다.
• 일관성,통일성
  : 어느 하나가 튀거나 다른 컴포넌트와 따로인 듯한 느낌을 주면 안된다.
  ▶ 일관성이 깨지면 사용자는 매번 새로운 학습을 해야하기 때문에 일관성있게 작업되어야 함.
• 보편성
  : 사용자가 쉽게 이해할 수 있도록 보편적인 사용 규칙에 의해 제작되어야 한다.
  ▶ 한번 학습하게 되면 설명을 두번,세번 할 필요가 없음.

---

컴포넌트의 상태

: 사용자의 행동에 대한 결과뿐만 아니라, 다양한 조건에 따른 상태를 알려주어 사용자가 현재 상황을 파악할 수 있게 돕는다.

• Normal : 사용자가 상호작용 할 수 있는 요소라는 것을 알려줌.
• Forcus: 요소가 선택되어 있음을 알려줌. 키보드 탭을 눌러 요소들을 전환하고 리턴키로 동작할 때와 같은 상황을 위한 상태.
• Hover : 사용자가 반응하는 요소 위에 커서를 놓은 상태로 상호작용이 가능한 요소를 더 강력하게 알려줌.
• Loading : 아직 데이터를 불러오는 중임을 알려줌.
• Disabled : 현재 조건이 맞지 않아 사용할 수 없음을 알려줌.
• Error : 입력값이나 조건이 잘못되었음을 알려주는 상태
• Success : 작업이 정상적으로 완료되었음을 알려주는 상태

---

컴포넌트의 종류

Navigation (탐색)

: 사용자가 정보를 이동하며 탐색할 때 사용하는 컴포넌트. 정보의 구조를 드러내거나, 다른 화면으로 전환하는 역할.

• card : 정보를 담는 최소 단위
• List : 같은 속성의 정보를 알아보기 쉽게 정렬할 때 사용
• Gallery : 카드나 정보 단위를 2단으로 표시할 때 사용
• Carousel : 스크롤이 세로로 길어지지 않게 가로로 스크롤 할 때 사용
• Tab : 성격이 다른 많은 양의 정보를 표시할 때 사용
• Menu : 탭으로 표시하기 어려운 많은 양의 복잡한 계층 구조를 표시할 때 사용

Input (입력)

: 정보를 입력할 때 사용하는 컴포넌트. 사용자의 선택이나 구체적인 정보를 전달할 때 사용하여 입력하는 정보의 종류에 따라 다양한 컴포넌트를 사용한다.

• Checkbox : 여러 요소를 선택할 수 있을 때 사용
• Radio button : 여러 요소 중에서 1가지만 선택할 수 있을 때 사용
• Text Fields : 사용자가 텍스트 정보를 입력할 때 사용
• Dropdown : 창을 펼쳐 여러 정보를 확인하는 형태일 때 사용
• Buttons : 사용자의 의도를 확정하고 행동을 실행할 때 사용
• Toggle : 특정 상태를 켜고 끌 때 사용

Infomation (정보)

: 정보를 전달할 때 사용하는 컴포넌트. 사용자의 선택이나 구체적인 정보를 전달할 때 사용하며, 입력하는 정보의 종류에 따라 다양한 컴포넌트를 사용.

• Guide Text : 여러 상황에 맞춰 정보를 자세히 알려줄 때 사용
• Tool Tips : 텍스트만으로 전달이 어려운 많은 정보를 알려줄 때 사용
• Toast : 행동에 대한 결과를 가볍게 전달할 때 사용
• Alert : 사용자가 명확하게 인지해야 하는 정보를 전달할 때 사용
• Dialog : 사용자가 선택해야하는 정보를 전달할 때 사용
• Coach Mark : 이해가 필요한 생소한 개념에 대한 정보 전달할 때 사용

▶ 사용자의 행동을 유도하기보다는, 현재 상태를 이해시키고 판단을 돕는 역할을 한다.

참고/예시 링크

https://brunch.co.kr/@blckschrl/66