좋은 UI를 위한 컴포넌트 가이드

안녕하세요 찐망고입니다.

오늘도 시작해 볼까요?

컴포넌트

컴포넌트는 사용자와 상호작용하는 기본적인 형태로, 

어떤 공간에서든지 기능을 수행할 수 있는 가장 작은 단위입니다.

컴포넌트의 가장 중요한 특성은 재사용성이며, 어떤 문맥에서든지 사용자에게 이해하기 쉽고 사용하기 편리해야 합니다.

이의 목적은 특정 영역에만 제한되지 않고 명확하게 정의되어야 하며,

색상, 텍스트, 아이콘 등을 시각적으로 조직화하여 사용자에게 제공되어야 합니다.

 

 

 

 

Definition

컴포넌트는 사용자가 다른 요소와 쉽게 구별하고, 사용자의 행동에 적절하게 반응하며, 

현재 상태에 대한 정보를 명확하게 전달하는 가장 작은 단위입니다.

컴포넌트는 다섯 가지 특성을 가지고 있습니다.

• Usage: 컴포넌트의 목적과 역할을 정의
• Shape: 다른 요소와 구별되고 주목받을 수 있는 모양을 정의
• Behavior: 클릭 또는 터치와 같은 동작에 기반하여 컴포넌트의 동작을 정의
• Status: 현재 상태를 알리는 방법을 정의
• Context: 배치된 공간에 따라 다른 용도로 사용되는 방법을 정의

Usage

 

Shape

컴포넌트를 다른 컴포넌트와 구별하기 위해 독특한 모양을 정의하세요. 

서비스 내에서 일관성 있게 사용하여 사용자가 컴포넌트의 동작을 예측하기 쉽도록 하세요. 

모양, 색상, 아이콘, 텍스트 등 시각적 요소를 조합하고, 주의를 계층적으로 조절하세요.

 

Shape

아이콘과 텍스트 사이의 주목도 차이는 상황에 따라 달라질 수 있습니다.

 

 

Behavior

사용자가 자신의 행동에 대한 결과를 알 수 있도록 도와줍니다. 

터치나 클릭에 즉각적으로 반응하거나, 현재 컴포넌트의 상태를 표시함으로써 사용자에게 정보를 전달합니다. 

또한, 실제 물리적인 환경에서 볼 수 있는 시각적인 효과를 따르는 경향이 있습니다.

 

Behavior

 

 

 

 

Status

현재 컴포넌트의 상태를 알려줍니다. 

사용자의 행동 결과뿐만 아니라 다양한 조건에 따른 상태를 보고, 사용자가 현재 상황을 이해하는 데 도움을 줍니다. 

조건이 충족되지 않아 현재 사용 불가능한 상태를 나타낼 수도 있으며, 

데이터가 로딩 중임을 알리고 조금만 기다려야 함을 알려주기 위해 로딩 애니메이션을 표시할 수도 있습니다.

• Normal: 사용자가 상호작용할 수 있는 요소
• Focus: 해당 요소가 선택되었음을 나타내고,
  이 상태는 키보드 탭을 눌러 요소를 전환하거나 반환 키로 작동하는 상황과 같을 때 사용
• Hover: 사용자가 커서를 대면 상호작용 요소에 대해 더 강력한 알림을 제공
• Loading: 데이터가 아직 로딩 중임을 나타냅니다. 기다려야 하는 상태를 나타냄
• Disabled: 현재 조건이 충족되지 않아 사용할 수 없음을 알림

Status

 

 

 

 

Context

컴포넌트의 사용법은 문맥에 따라 다르며, 동일한 컴포넌트라도 다른 환경에서 다양하게 활용될 수 있습니다. 

모든 디자인 요소는 상대적이기 때문에, 

컴포넌트의 목적은 해당 공간, 다른 컴포넌트 요소와 함께 사용하는 방법, 

사용자가 해당 컴포넌트를 이용하는 문맥에 따라 정의됩니다.

• 고정/변경 가능(fixed/Variable): 크기가 변경 가능한지 아니면 고정된지를 정의
• 좁은/넓은(Narrow/Wide): 공간의 너비에 따라 사용법을 정의
• 계층 구조(Hierarchy): 동일한 기능이라도 계층 구조에 따라 사용법을 정의
• 부동(Floating): 접근성에 따라 항상 부유하도록 할지, 스크롤에 따라 움직이도록 할지를 정의

Context

 

 

 

 

Type

컴포넌트의 유형은 디지털 서비스의 역사와 같이 다양합니다. 

사용자가 디지털 기기를 조작하는 시점에 따라 대략적으로 세 가지 범주로 나눌 수 있습니다.

• 네비게이션: 이 컴포넌트는 정보를 탐색하는 데 사용
• 입력: 이 컴포넌트는 사용자가 정보를 입력하는 경우에 사용
• 정보: 이 컴포넌트는 사용자에게 정보를 전달하는 데 사용

Type

 

 

 

Navigation

정보를 탐색하는 데 사용되는 컴포넌트입니다.

정보를 담고 있는 가장 작은 단위인 "카드", 압축된 정보를 펼치는데 사용되는 컴포넌트,

화면을 업데이트하여 다른 정보를 보여주는 컴포넌트 등이 있습니다.

• 카드(Card): 정보를 담고 있는 가장 작은 단위
• 리스트(List): 동일한 속성의 정보를 쉽게 인식하기 위해 정렬하는 데 사용
• 갤러리(Gallery): 카드나 정보 단위를 두 개의 열로 표시하는 데 사용
• 캐러셀(Carousel): 세로 스크롤 대신 가로로 스크롤하는 데 사용
• 탭(Tab): 다양한 속성으로 대량의 정보를 표시하는 데 사용
• 메뉴(Menu): 탭으로 표시하기 어려운 복잡한 계층 구조의 대량 정보를 표시하는 데 사용

이 외에도 무수히 많은 다른 컴포넌트가 있습니다.

Navigation

 

 

 

 

Input

이 컴포넌트는 정보를 입력하는 데 사용됩니다. 

사용자의 선택 또는 특정 정보를 전달하기 위해 사용되며, 

입력해야 할 정보의 유형에 따라 다양한 컴포넌트가 사용됩니다. 

다양한 플랫폼에서 오랜 시간 동안 지속적으로 사용되어 왔기 때문에 

사용자가 혼란스럽지 않도록 기존의 형태를 따르는 경향이 있습니다.

• 체크박스: 여러 요소를 선택해야 할 때 사용
• 라디오 버튼: 여러 요소 중 하나만 선택해야 할 때 사용
• 텍스트 필드: 사용자가 텍스트 정보를 입력해야 할 때 사용
• 드롭다운: 다양한 정보를 확인하기 위해 창을 열 때 사용
• 버튼: 다양한 상황에서 사용자 결정에 대한 정보를 입력하기 위해 사용
• 토글: 특정 상태를 켜거나 끌 때 사용

input

 

 

 

 

Infomation

정보를 전달하기 위해 사용되는 컴포넌트입니다. 

사용자의 선택 또는 특정 정보를 전달하기 위해 사용되며, 

입력해야 할 정보의 유형에 따라 다양한 컴포넌트가 사용됩니다. 

다양한 플랫폼에서 오랜 기간 동안 지속적으로 사용되어 왔기 때문에 

사용자가 혼란스럽지 않도록 기존의 형태를 따르는 경향이 있습니다.

• Guide Text: 다양한 상황에서 자세한 정보를 제공하기 위해 사용
• Tool Tips: 텍스트만으로 전달하기 어려운 많은 정보를 전달하기 위해 사용
• Toast: 행동의 결과를 가볍게 전달하기 위해 사용
• Alert: 사용자가 명확하게 인식해야 할 정보를 전달하기 위해 사용
• Dialog: 사용자가 선택을 해야 하는 정보를 전달하기 위해 사용
• Coach Mark: 이해가 필요한 낯선 개념에 대한 정보를 전달하기 위해 사용

Infomation

 

 

참고사이트

Ultimate Guide for a Good UI: Component