UI요소

UI요소는 사용자 인터페이스(User Interface, UI)를 구성하는 기본 단위로, 사용자가 소프트웨어 애플리케이션이나 웹사이트와 상호작용할 수 있게 하는 구성요소를 의미합니다. UI요소는 다양한 종류와 형태로 존재하며, 그 역할과 기능에 따라 구분됩니다.

1.버튼(Button)

정의: 사용자가 클릭하여 특정 동작을 실행할 수 있는 인터페이스 요소.

예: 제출 버튼, 취소 버튼, 확인 버튼.

2.입력 필드(Input Field)

정의: 사용자가 데이터를 입력할 수 있는 텍스트 상자.

예: 텍스트 입력 필드, 비밀번호 입력 필드, 이메일 입력 필드.

3.드롭다운 메뉴(Dropdown Menu)

정의: 사용자가 클릭하면 선택할 수 있는 옵션 목록이 나타나는 메뉴.

예: 국가 선택메뉴, 언어 선택 메뉴.

4.체크박스(Checkbox)

정의: 사용자가 여러 옵션 중 하나 이상을 선택할 수 있는 작은 상자.

예: 뉴스레터 구독, 약관 동의.

5.라디오 버튼(Radio Button)

정의: 사용자가 여러 옵션 중 하나만 선택할 수 있게 하는 동그란 버튼.

예: 성별 선택, 결제 방법 선택

6.토글 스위치(Toggle Switch)

정의: 켜짐/꺼짐 상태를 나타내는 스위치.

예: 다크 모드 전환, 알림 설정.

7.슬라이더(Slider)

정의: 사용자가 값을 조절할 수 있는 막대형 컨트롤.

예: 볼륨 조절, 가격 범위 설정.

네비게이션 바(Navigation Bar)

정의: 웹사이트나 애플리케이션의 주요 링크나 메뉴를 포함하는 바.

예: 상단 네비게이션 바, 사이드바 메뉴.

카드(Card)

정의: 정보나 콘텐츠를 시각적으로 구분하여 표시하는 직사각형 상자.

예: 제품 카드, 뉴스 기사 카드.

10.모달(Modal)

정의: 중요한 정보를 표시하거나 사용자 동작을 요구하는 팝업 창.

예: 경고 창, 로그인 창.

11.아이콘(con)

정의: 특정 기능이나 내용을 상징적으로 나타내는 작은 그래픽.

예: 저장 아이콘, 검색 아이콘, 설정 아이콘.

12.프로그래스 바(Progress Bar)

정의: 작업의 진행 상태를 시각적으로 표시하는 막대.

예: 파일 업로드 진행률, 설문조사 진행 상황.

13.튤팁(Tooltip)

정의: 사용자가 특정 UI 요소에 마우스를 올리면 나타나는 설명 창.

예: 아이콘 위에 마우스를 올렸을 때 나타나는 설명.

14.탭(Tab)

정의: 사용자가 다른 페이지나 섹션으로 전환할 수 있게 하는 탭형식 의 메뉴.

예: 설정 메뉴의 탭, 프로필 페이지의 탭.

15. 알림(Notification)

정의: 사용자에게 중요한 정보를 전달하는 메시지.

예: 푸시 알림, 시스템 알림.

이와 같은 UI 요소들은 사용자의 경험을 향상시키고, 애플리케이션이나 웹사이트와의 상호작용을 더욱 직관적이고 효율적으로 만들어 줍니다. 각UI 요소는 사용자의 요구와 사용 시나리오에 맞게 적절하게 설계되고 배치되어야 합니다.