UI/UX 디자인은 사용자 경험을 최적화하고, 직관적인 인터페이스를 제공하기 위해 다양한 컴포넌트를 활용합니다. 이러한 컴포넌트들은 사용자가 웹사이트나 애플리케이션을 사용할 때 필요한 기능을 제공하며, 디자인의 일관성과 효율성을 높이는 데 중요한 역할을 합니다. 다음은 UI/UX 디자이너가 반드시 알고 있어야 할 주요 컴포넌트 용어들을 정리하였습니다.
용어 & 사진 출처 : 안시스터즈
1) 드롭다운(Drop Down)
- 드롭다운은 버튼을 클릭하거나 커서를 올렸을때,선택할 수 있는 옵션을 목록으로 보여주는 기능을 제공한다.
예시 1) 단일 선택 옵션 드롭다운
예시 2) 복수 선택 드롭다운
2) 콤보박스(Combo Box)
- 콤보박스는 드롭다운과 입력 기능이 있는 입력 필드와 결합한 형태를 뜻한다.
예시)
3) 라디오 버튼(Radio Button)
- 라디오 버튼은 어느 하나를 취소 또는 선택할 수 있도록 하기 위해 사용하는 버튼을 말하며, 하나만 선택할 수 있는 조건을 가지고 있다.
예시)
4) 체크박스 버튼(Check Box)
- 수 많은 선택 사항중에서 여러개를 동시에 선택해야 할때 사용하는 버튼을 말하며, 여러 개를 선택할 수 있는 조건을 가지고 있다.
예시)
5) 브레드 크럼(Breadcrumbs)
- 브래드 크럼은 사이트 이동 경로라고도 하며, 사용자가 현재 어떤 위치에 있는지 시각적으로 나타내어 즉각적으로 파악할 수 있다.
예시 1)
예시 2) - 갓차(Gotcha) 사이트(브래드 크럼)
6) 토글 스위치(Toggle Switch)
- 토글 스위치는 특정 기능을 켜고 끌때 주로 사용하며, 주로 모바일에서 활용하는 스위치 형식의 버튼이다. 특히 스위치와 많이 통용되고 있다.
예시 1)
예시 2) - Off 상태 (Apple 설정 - 와이파이)
예시 3) - On 상태 (Apple 설정 - 와이파이)
7) 툴팁(Tool tip)
- 툴팁은 웹사이트내에서 부연적 설명이 필요할때 사용되는 유용한 요소이며, 사용자가 개체 위에 포인터를 올려놓았을 때 자동으로 표시되는 기능을 가지고 있다.
예시)
안녕하세요 Junior UIUX Designer 입니다 😊