아티클

UI를 위한 컴포넌트

박종민| 2022.06.07

컴포넌트는 사용자와 상호작용하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위입니다. 컴포넌트에서 가장 중요한 속성은 재사용으로 어떤 맥락에서도 사용자가 동일하게 이해하고 사용할 수 있어야 합니다. 특정 영역에서만 사용 가능하지 않도록 용도를 명확하게 정의하고, 색, 텍스트, 아이콘 등을 이용해 시각적으로 적절하게 구성해야 합니다.



정의 Definition

사용자가 사용하는 최소 단위로 다른 요소와 구분하고, 행동에 반응하고, 현재 상태에 대한 정보를 전달해야합니다. 컴포넌트는 크게 5가지의 속성을 가집니다.



형태 Shape

형태를 정의해 다른 컴포넌트와 구분합니다. 서비스 내에서 일관되게 사용해 사용자가 컴포넌트가 어떻게 동작하는지 쉽게 예측할 수 있게 만듭니다. 모양, 색, 아이콘, 텍스트 등의 시각 요소를 조합하고, 위계에 맞춰 주목도를 조절합니다.

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



동작 Behavior

사용자의 행동에 대한 결과를 알려줍니다. 터치나 클릭에 대한 즉각적인 반응을 알려주거나, 해당 컴포넌트가 현재 어떤 상태인지를 알려줍니다. 실제 물리적인 환경의 시각 효과를 따르는 편입니다.



상태 Status

현재 컴포넌트의 상태를 알려줍니다. 사용자의 행동에 대한 결과뿐만 아니라, 다양한 조건에 따른 상태를 알려주어 사용자가 현재 상황을 파악할 수 있게 돕습니다. 조건이 맞지 않아 현재 사용할 수 없음을 알려주거나, 로딩 애니메이션을 표시해 데이터를 불러오는 중으로 조금 더 기다려야 함을 알려주기도 합니다.



맥락 Context

맥락에 따라 컴포넌트 쓰임새가 다릅니다. 동일한 컴포넌트라도 다양한 환경에 따라 쓰임새가 다릅니다. 모든 디자인 요소는 상대적이기 때문에 배치되는 공간, 함께 사용하는 다른 컴포넌트 요소, 사용자가 사용하는 상황에 알맞게 컴포넌트의 쓰임새를 정의합니다.



종류 Type

컴포넌트 종류는 디지털 서비스의 역사만큼이나 다양합니다. 컴포넌트는 사용자가 디지털 디바이스를 조작할 때를 기준으로 크게 3가지의 카테고리로 나눌 수 있습니다.



탐색 Navigation

정보를 탐색할 때 사용하는 컴포넌트입니다. 정보를 담는 최소 단위를 위한 컴포넌트, 압축된 정보를 펼치는 컴포넌트, 화면을 갱신해 다른 정보를 보여주는 컴포넌트 등이 있습니다.

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



입력 Input

정보를 입력할 때 사용하는 컴포넌트입니다. 사용자의 선택이나 구체적인 정보를 전달할 때 사용하며, 입력하는 정보의 종류에 따라 다양한 컴포넌트를 사용합니다. 오랜 시간 동안 다양한 플랫폼에서 지속적으로 사용된 컴포넌트로 사용자가 혼란스럽지 않게 기존에 사용되던 모양을 따르는 편입니다.



정보 Information

정보를 전달할 때 사용하는 컴포넌트입니다. 사용자의 선택이나 구체적인 정보를 전달할 때 사용하며, 입력하는 정보의 종류에 따라 다양한 컴포넌트를 사용합니다. 오랜 시간 동안 다양한 플랫폼에서 지속적으로 사용된 컴포넌트로 사용자가 혼란스럽지 않게 기존에 사용되던 모양을 따르는 편입니다.

좋아요 4
공유하기

박종민

누구나 디자인 언어를 이해하고 말할 수 있는 세상을 꿈꿉니다. 스스로 생각하고 자신만의 언어를 만들 수 있는 지침이 되는 나침반이 되길 바라며 글을 중심으로 블로그, 브런치, 뉴스레터를 운영하고 있습니다.
목록으로

TOP