카드(Cards) 카드는 정보나 콘텐츠를 시각적으로 그룹화하고 표시하기 위해 사용되는 컨테이너 요소다. 카드는 일반적으로 사진, 텍스트, 버튼 등 다양한 내용을 포함하며, 웹사이트나 앱에서 다양한 목적으로 사용된다. 사용 예시 카드는 블로그 게시물, 제품, 뉴스 기사,…
리스트(Lists) 리스트 타입은 정보를 순차적으로 표시하기 위해 사용되는 UI 요소다. 주로 항목 목록, 메뉴, 태그, 할 일 목록 등 다양한 형태로 사용된다. 사용 예시 리스트 타입은 웹사이트의 사이드바 메뉴, 블로그의 글 목록, 앱의…
네비게이션바(Navigation Bar) 네비게이션바는 웹사이트 또는 앱에서 주로 상단에 위치하는 인터페이스 요소로, 페이지 간의 이동이나 메뉴 항목에 접근하는데 사용된다. 이는 사용자가 앱의 구조를 이해하고, 주요 기능에 빠르게 접근할 수 있도록 돕는다. 사용 예시 네비게이션바는 웹사이트의…
세그먼트 컨트롤(Segmented Control) 세그먼트 컨트롤은 사용자가 여러 옵션 중 하나를 선택할 수 있는 컨트롤 요소로, 주로 선택적인 작업 또는 필터링에 사용된다. 이는 주로 모바일 앱에서 사용되며, 간단하고 직관적인 선택 기능을 제공한다. 사용 예시 세그먼트 컨트롤은…
파비콘 (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 컴포넌트이다. 폼을 통해 사용자로부터 정보를 수집하거나, 검색 쿼리를 입력 받는 등의 상황에서 사용된다. 이는 앱이나 웹 사이트에 유연성을 제공하며, 사용자의 입력에 따라 동적으로 내용이 변경된다.…
스낵바(Snackbars) 스낵바(Snackbars)는 안드로이드 UI에서 잠깐 나타났다가 사라지는 짧은 메시지를 보여주는 컴포넌트로, 사용자에게 앱의 상태나 작업의 결과를 간결하게 전달하는데 사용된다. 이는 화면 하단에 일시적으로 나타나며, 보통 일정 시간이 지나거나 사용자가 액션을 취하면 사라진다. 사용…
App Bar App Bar는 안드로이드 앱에서 사용자 인터페이스의 중요한 요소로, 화면 상단에 위치하며 사용자에게 앱 이름, 네비게이션, 액션 등을 표시한다. 이는 사용자에게 현재 어떤 화면에 위치해 있는지를 명확하게 보여주고, 사용자가 앱 내에서 쉽게 이동하거나…
sp (Scale-independent Pixels) SP (Scale-independent Pixels)는 텍스트 크기를 결정하는데 주로 사용되는 단위로, 안드로이드 환경에서 많이 사용된다. SP는 DP와 매우 유사하지만, 추가적으로 사용자의 글꼴 크기 설정에 따라 크기가 조절되는 특징을 가지고 있다. 안드로이드에서는 디바이스의 화면 크기와…
pt (Point) PT (Point)는 디자인에서 자주 사용되는 단위로, 이는 일반적으로 화면의 물리적 크기에 의존하는 것으로 알려져 있다. 이 단위는 주로 애플의 iOS에서 사용되며, 1pt는 물리적으로 약 1/72 인치를 의미한다. 이 단위는 디바이스의 화면 크기와…