오늘은 디자이너라면 꼭 알아야하는 모바일 UI 컴포넌트에 대해 소개하려해요. 먼저 아래 5가지 중에 나는 몇 가지에 해당하는 지 체크해볼까요?
□ UI 컴포넌트(Component)가 무슨 뜻인지 설명할 수 있다.
□ 자주 쓰는 UI 컴포넌트 (Component) 이름을 10개 이상 말할 수 있다.
□ 버튼의 상태(States) 5가지를 말할 수 있다.
□ dp 단위를 설명할 수 있다.
□ 메시지 중요도에 따른 Snack Bar, Banner, Dialog 차이를 안다.
5개 모두 체크하셨다면? 박수! 만렙 디자이너로 인정합니다. 모두 체크 못 했다면? 괜찮아요.
이 글을 저장해두고 필요할 때마다 꺼내볼 수 있도록 알려드릴게요.
우선 UI 컴포넌트가 무엇인지부터 알아볼까요?
UI 컴포넌트란 UI를 구성하는 최소 단위로, 버튼이나 필드, 체크박스 등 사용자에게 특정 행동을 유도하거나 전달하는 역할을 해요.
디자이너는 이 컴포넌트를 시각적으로 적절히 구성해야 할 뿐만 아니라 사용자가 원활히 사용할 수 있도록 제작해야 합니다. 버튼이나 박스 등 쉽게 떠오르는 컴포넌트도 있지만, 이름을 몰라 검색도 어려운 컴포넌트도 있을 거예요.
초보 UI 디자이너를 위해 가장 대중적으로 사용되는 구글 머터리얼 디자인 시스템을 바탕으로 실무에 자주 써먹는 UI 컴포넌트 16개를 알려드릴게요.
1. 앱 바 App bar
현재 화면의 정보 및 사용자가 수행 가능한 액션 혹은 기능이 표시되는 컴포넌트
2. 배너 Banner
중요한 메시지를 전달하거나 메시지와 관련된 추가 동작을 제공하는 컴포넌트
3. 바텀 네비게이션 Bottom navigation
서비스의 주요 화면 간 이동을 돕는 컴포넌트
4. 버튼 Button
페이지 이동 및 사용자의 특정 액션 수행을 돕는 컴포넌트
5. 카드 Card
하나의 주제에 대한 정보와 액션을 함께 제공하여 사용자의 작업 수행을 돕는 컴포넌트
6. 칩스 Chips
사용자에게 제공해야 하는 입력 데이터, 필터 옵션, 기능들을 상황에 따라 가변적으로 제공하여 작업 수행을 돕는 컴포넌트
7. 다이얼로그 Dialog
사용자에게 추가적인 정보를 전달하거나 중요한 결정을 요구하는 컴포넌트
8. 플로팅 액션 버튼 FAB
현재 화면에서 중요한 작업이나 공통 기능을 수행하기 위해 화면의 고정된 위치에 제공되는 컴포넌트
9. 리스트 Lists
콘텐츠나 텍스트를 반복적으로 나열하는 컴포넌트
10. 메뉴 Menu
옵션에 대한 목록을 제공하여 사용자가 항목을 확인하고 선택할 수 있도록 돕는 컴포넌트
11. 네비게이션 드로어 Navigation drawer
서비스 내에서 사용자가 원하는 화면으로 이동하기 위해 일시적으로 제공되는 컴포넌트
12. 셀렉션 컨트롤 Selection controls
옵션 선택, 설정 변경 등의 기능을 제공하는 컴포넌트
13. 슬라이더 Slider
사용자가 범위 내에서 값을 선택할 수 있도록 돕는 컴포넌트
14. 스낵바 Snack bar
일시적으로 사용자에게 전달해야 하는 간단한 메세지나 피드백을 제공하는 컴포넌트
15. 탭 Tab
연관된 화면 혹은 콘텐츠 그룹 간의 이동을 돕는 컴포넌트
16. 텍스트 필드 Text field
사용자가 텍스트나 정보를 입력하고 편집할 수 있는 컴포넌트
각 컴포넌트의 상태값과 제작 가이드, 제작 팁, 실제 사례에 대해 더 알고 싶다면 오픈패스의 클래스를 확인해보세요 :)
지금 강의를 구매하면 'UI 컴포넌트 오픈북'을 선물로 드리고 있답니다.