UIUX - 컴포넌트 실무용어 02

사진출처 : 안시스터즈

1) 스피너 (Spinner)

• 스피너는 숫자 입력 컨트롤을 말하며, 위 아래 화살표 버튼을 사용하여 값을 조절하거나 필드에 직접 원하는 숫자를 입력할 수 있다.
  예시)
  

2) 슬라이더(Sider)

• 슬라이더는 입력 값이 제한되어 있음을 시각적으로 인지하고, 밀고 당기는 형식으로 값을 조절한다. 주로 스피커(음량)조절 및 음악을 재생할때 주로 사용한다.
  예시 1) 기본 슬라이더
  
  예시 2) 음악 재생 바 & 스피커 조절 바 - 슬라이더(Apple Music)
  

3) 텍스트 필드(Text input Field)

• 텍스트 필드는 앱과 웹에서 텍스트를 입력할수 있는 필드를 말하며, 키보드로 직접 텍스트를 입력할 수 있는 곳이다.
  예시)
  
• 1번째 input은 입력 필드가 기본적으로 비어 있는 Default 상태로, 사용자가 아무런 입력을 하지 않은 상태로, 아무런 에러 메시지나 강조 표시가 없음
• 2번째 input은 사용자가 입력 필드를 클릭했거나 텍스트를 입력하기 시작한 active 상태로, 필드가 강조 표시되며, 사용자가 입력할 준비가 되어 있음
• 3번째 input은 사용자가 입력한 값이 유효하지 않거나 필수 입력 항목이 비어 있을 때 사용자에게 강조해서 보여주는 상태를 말함

4) 플레이스 홀더(Place Holder)

• 플레이스홀더는 사용자가 값을 입력하기 전에 도움을 줄 수 있는 힌트를 Input박스 안에 표시해주는 것을 말하며, 사용자가 input에 텍스트등 그에 맞는 값을 입력하면 Placeholder는 사라진다.
  예시)
  

5) CTA(Call To Action : 행동유도버튼)

• CTA는 사용자의 클릭을 통해 즉각적인 응답을 유도하는'행동유도버튼'을 의미한다. 주로 물건을 판매하도록 유도하거나 사용자들을 서비스 이용에 유도할수 있도록 하기 위해 사용하기도 한다.
  예시)
  

6) 캐러셀(Carousel)

• 슬라이드 형태로 이미지 혹은 영상이 순환하며 콘텐츠를 노출시키는 형태의 Interface 이다.
  예시 1) 기본 캐러셀
  

예시 2) 캐러셀 - 로드맵(RoadMap)