[UIUX] 디자인 시스템 파헤치기 2편 - UI요소

안녕하세요. 민트소프트 UIUX 디자이너 최현아입니다.

 

저번 포스팅에서 UI요소에 대한 주제를 다뤘는데요😉 이번에도 그 주제를 이어서 써보려고 합니다.

 

Slide

슬라이드는 동선 내 사용자 위치를 정확하게 안내 및 표시하기 위해 사용하는 요소입니다. 슬라이드 내부에는 Dot Indicator 또는 Number Indicator 가 들어갈 수 있습니다.

 

Text filed

텍스트 필드는 본문 외 정보 또는 주의, 강조형 정보로 강조가 필요시 사용합니다. 입력 폼의 개수는 가능한 최소의 갯수로 해야 합니다. 필수 입력이 아닌 경우 선택적 질문임을 명확히 표시되도록 해야하며, 사용자가 무엇을 요청받고 있는지 구분하고 이해할 수 있도록 관련 필드를 그룹화 시켜야 좋습니다.

 

Tag

태그는 부가적인 정보를 전달하거나, 타입이나 상태 등등을 구분하며, Badge와 각각 분리하여 기능을 정의합니다. 정보 검색을 쉽게 할 수 있도록 부여하는 키워드가 될 수도 있고, 크게 "추천"과 "연관"으로 활용이 됩니다.

 

Tab

탭은 페이지 내 유사한 콘텐츠를 그룹화하여 섹션 간 이동 시 사용합니다. 해당 페이지를 벗어나지 않고 섹션 별 콘텐츠 둘러보기 가능합니다. Selected 상태로 사용자 위치를 쉽고 빠르게 나타내므로 시각적 일관성이 필요합니다. 탭의 구성요소로는 Text area, Border area, Selected border, Badge area, Background area, Tab Item 으로 구분할 수 있습니다.

 

Snackbar

스낵바는 유저의 이용 흐름을 방해하지 않으면서 일시적인 피드백을 제공할 때 사용합니다. Toast 컴포넌트와 비슷한 형태인데, 이는 모두 짧고 간결한 피드백을 제공한다는 점에서 동일하지만, Snackbar가 Toast와 달리 액션을 제공할 수 있다는 점에서 좀 더 활용도가 높은 컴포넌트라고 할 수 있습니다. 이 때 액션은 1개의 액션만 제공할 수 있습니다.

 

Modal

모달은 기존에 열려있는 화면 위에 새로운 창이 아닌 레이어를 까는 형태 입니다. 원래 브라우저와 종속적인 관계, 부모/자식의 형태를 가지고 있으며, 브라우저 옵션과 관계없이 띄울 수 있습니다.

 

Toast

토스트는 팝업 형태의 한 종류로, 화면 하단에 위치하여 나타났다 사라지는 작은 메시지 입니다. 사용자가 요청한 작업에 대한 결과를 빠르게 피드백하기 위해 사용합니다. 선택 사항으로 닫기 버튼을 추가하여 수동으로 해제할 수 있지만, 기본 형태는 닫기 버튼 없이 2~3초 가량 유지되었다 자동으로 사라지는 인터렉션을 가집니다. 그래서 Toast는 일시적이며, 강조가 적은 컴포넌트라고 할 수 있습니다.

 

Checkbox

체크박스는 요소를 선택하기 위해 사용하는 선택 Control입니다. Checkbox는 선택 컨트롤 중 유일하게 복수선택이 가능합니다. 구성요소로는 Background area, Icon/Number area로 구분할 수 있습니다.

 

Radio button

라디오 버튼은 단일선택을 해야하는 곳에 사용합니다. 다른 Radio button 선택 시 기존에 선택되어 있었던 Radio button이 선택 해제됩니다. 구성요소로는 Background area, Inner circle로 구분할 수 있습니다.

 

Toggle switch

토글 스위치는 특정 옵션을 켜고 끌 수 있는 컨트롤입니다. 사용자는 Switch의 상태를 보고 옵션의 설정 여부를 파악할 수 있습니다. 구성요소로는 Background area, Inner circle로 구분할 수 있습니다.

 

Pagination

페이지네이션은 말 그대로 페이지 입니다. 대부분의 온라인 쇼핑몰 사이트의 리스트를 떠올리시면 됩니다. 페이지 하단에 있는 버튼을 눌러 더 많은 결과를 로드할 수 있습니다.

 

Tooltip

툴팁은 사용자의 인터페이스의 보조 설명을 제공하는 요소 입니다. 이는 2가지 형태로 나뉘는데, 사용자가 화면에 접속했을 때 나타났다가 몇 초 후 자동으로 사라지는 방식과 화면에 고정으로 보이다가 사용자가 닫기 버튼을 실행했을 때 제거되는 방식으로 나뉩니다. 이 때, 나타났다가 사라지는 방식은 사용자의 시선을 불필요하게 주목시킬 수 있고, 고정으로 보이는 방식은 매번 사용자가 닫기를 클릭해야 하는 번거로움이 있을 수 있습니다.

 

다음편에서는 국내/해외 디자인 시스템을 파헤쳐 보도록 하겠습니다.

감사합니다😊

---

민트소프트는 모바일 앱 개발 전문회사입니다. 하이브리드앱,크로스플랫폼,네이티브영역 전반에 걸친 모바일 앱을 개발하고 있습니다.

하이브리드는 민트앱이라는 솔루션을 보유하고 있어서 Time To Market에 매우 유리합니다. 

언제는 찾아주시면 신속하고 빠른 상담을 진행하도록 하겠습니다. 

 

https://www.mint-soft.com