파비콘 (Favicon) 파비콘(Favicon)은 웹사이트의 아이콘을 나타내는 작은 그래픽 파일이다. 이 아이콘은 주로 브라우저의 주소창, 북마크 목록, 개방된 탭 등에서 웹사이트를 식별하는데 사용된다. 사용 예시 웹사이트의 브랜드를 나타내거나, 사용자가 웹사이트를 쉽게 인식하고 탐색할 수 있도록…
액션시트 (Action Sheet) 액션시트는 사용자에게 세트의 선택 사항 중 하나를 선택하도록 요청하는 슬라이드 업 메뉴나 대화 상자를 의미한다. 이는 주로 모바일 앱에서 사용되며, 사용자에게 현재 컨텍스트와 관련된 여러 작업 중에서 선택을 요구할 때 사용된다. 사용…
스켈레톤 UI(Skeleton UI) 스켈레톤 UI는 페이지나 앱의 콘텐츠가 로드되는 동안 사용자에게 표시되는 비어있는 버전의 페이지나 앱의 레이아웃을 의미한다. 이는 사용자 경험을 향상시키기 위한 로딩 전략 중 하나로, 콘텐츠가 완전히 로드되기 전에도 사용자에게 앱의 구조를 보여줌으로써…
페이지네이션(Pagination) 페이지네이션은 사용자가 정보나 내용의 일부분을 한 페이지 단위로 볼 수 있게 하는 사용자 인터페이스 패턴이다. 이는 대량의 정보를 효과적으로 관리하고 사용자의 이해를 돕는 데 중요한 역할을 한다.비슷하지만, 다른 사용성을 가진 요소로는 무한…
데이트 피커(Date Pickers) 데이트 피커는 사용자가 날짜를 선택하도록 돕는 사용자 인터페이스 요소다. 이를 통해 사용자는 달력 형태의 UI를 통해 특정 날짜를 쉽게 선택할 수 있다. 사용 예시 데이트 피커는 예약 시스템, 이벤트 생성, 생일 입력…
레이블(Label) 레이블은 사용자 인터페이스에서 정보의 종류를 설명하거나, 입력 필드와 같은 요소의 목적을 명시하는 데 사용되는 텍스트 요소다. 레이블은 사용자가 인터페이스를 더 쉽게 이해하고 사용할 수 있도록 돕는 요소이다. 라벨이라고도 불린다. 사용 예시 레이블은…
구분선(Divider) 구분선은 UI 요소들 사이에 가시적인 경계를 만들어, 컨텐츠를 명확하게 구분하는데 사용된다. 이는 사용자가 인터페이스를 이해하는 데 도움을 주며, 정보의 그룹화를 촉진한다. 사용 예시 구분선은 메뉴 항목, 리스트 항목, 섹션 등, 서로 다른…
다크 모드(Dark Mode) 다크 모드는 사용자 인터페이스의 색상 스키마를 어둡게 바꾸는 기능을 의미한다. 밝은 텍스트가 어두운 배경에 표시되며, 이는 야간 사용이나 어두운 환경에서의 가독성을 높이고 눈의 피로를 줄여준다하여 사용되었다. 하지만, 특정 연구에 의하면 다크모드를 사용시…
콤보 박스(Combo Box) 콤보 박스는 텍스트 필드와 드롭다운 리스트를 결합한 형태의 UI 컴포넌트다. 사용자는 주어진 목록에서 선택을 할 수 있으며, 동시에 텍스트 필드를 통해 직접 입력도 가능하다. 사용 예시 콤보 박스는 사용자가 표준 옵션 중…
드롭다운(Drop-down) 드롭다운은 사용자가 선택할 수 있는 여러 옵션들을 목록 형태로 표시하는 UI 컴포넌트다. 사용자가 드롭다운 메뉴를 클릭하면, 이용 가능한 옵션들이 목록으로 펼쳐진다.Android에서는 Menus라고 불린다. 사용 예시 드롭다운은 폼에서 사용자에게 여러 선택지 중 하나를…
다이어로그(Dialogs) 다이어로그는 사용자의 주의를 요구하거나 선택을 하도록 유도하는 UI 컴포넌트이다. 이는 앱의 주요 콘텐츠 위에 나타나며, 사용자가 선택사항을 확인하거나 특정 작업을 완료하기 전에 추가 정보를 제공한다. 사용 예시 다이어로그는 사용자가 앱에서 민감한 작업을…
텍스트필드(Text field) 텍스트필드는 사용자가 텍스트를 입력할 수 있는 UI 컴포넌트이다. 폼을 통해 사용자로부터 정보를 수집하거나, 검색 쿼리를 입력 받는 등의 상황에서 사용된다. 이는 앱이나 웹 사이트에 유연성을 제공하며, 사용자의 입력에 따라 동적으로 내용이 변경된다.…