UI | 디자인베이스

레이블(Label)

레이블(Label)은 사용자 인터페이스(UI)에서 정보의 종류나 입력 필드의 목적을 설명하는 텍스트 요소로, 사용자가 UI를 쉽게 이해하고 사용할 수 있도록 돕는 역할을 합니다. 라벨이라고도 불리며, 특히 입력 필드, 체크박스, 라디오…

리스트(Lists)

리스트(Lists)는 정보를 순차적으로 나열하여 표시하는 UI 요소입니다.이는 사용자가 데이터를 쉽게 인식하고 선택할 수 있도록 정리된 형태로 제공하는 것이 목적입니다. 리스트는 텍스트, 이미지, 아이콘, 버튼 등 다양한 UI 요소를…

마이크로인터랙션 (Microinteractions)

마이크로 인터랙션(Micro-Interactions)은 사용자가 디지털 인터페이스에서 수행하는 작은 상호작용을 의미합니다.이는 사용자의 행동에 대한 즉각적인 피드백을 제공하고, 시스템 상태를 시각적으로 나타내며, 전체적인 사용자 경험(UX)을 향상시키는 데 중요한 역할을 합니다. 마이크로…

모달 (Modal)

모달은 사용자의 주의를 특정 작업 또는 내용에 집중시키기 위해 화면 위에 표시되는 대화형 UI 요소입니다.이 요소는 사용자가 모달 내부의 정보를 확인하거나 특정 작업을 완료하기 전까지는 기존 화면과 상호작용할…

모바일 퍼스트(Mobile First)

모바일 퍼스트(Mobile First)란 웹사이트나 애플리케이션을 설계할 때 모바일 환경을 우선적으로 고려한 후, 태블릿과 데스크톱 환경으로 확장하는 디자인 접근법입니다.이는 스마트폰과 태블릿 사용이 증가하면서 모바일 기기가 인터넷 사용의 주요 플랫폼이…

반응형 웹 (Responsive Web)

반응형 웹(Responsive Web)은 웹사이트가 사용자의 디바이스(PC, 태블릿, 스마트폰 등)에 따라 자동으로 화면 크기, 콘텐츠 배치, 인터페이스 요소가 조정되는 웹 디자인 기법을 의미합니다.CSS의 미디어 쿼리(Media Query)를 활용하여 다양한 해상도에…

브레드 크럼(Breadcrumbs)

브레드 크럼(Breadcrumb)은 웹사이트나 애플리케이션에서 사용자의 현재 위치를 시각적으로 나타내는 탐색(Navigation) 요소입니다.이는 사용자가 웹사이트 내에서 이동한 경로를 직관적으로 파악할 수 있도록 도와주는 기능을 하며, 특히 계층 구조가 깊은 웹사이트나…

세그먼트 컨트롤(Segmented Control)

세그먼트 컨트롤(Segmented Control)은 사용자가 여러 옵션 중 하나를 선택할 수 있도록 하는 UI 요소이며, 주로 모바일 애플리케이션에서 필터링, 보기 전환, 설정 변경 등의 기능을 수행하는 데 사용됩니다. 직관적인…

스낵바(Snackbars)

스낵바(Snackbars)는 사용자에게 간단한 피드백을 제공하는 UI 컴포넌트입니다. 일반적으로 화면 하단에 일시적으로 나타났다 사라지는 메시지를 통해 앱의 상태 변화나 작업 결과를 전달하는 용도로 사용됩니다. 중요하지만 즉각적인 조치가 필요하지 않은…

스켈레톤 UI(Skeleton UI)

스켈레톤 UI는 페이지나 앱의 콘텐츠가 로드되는 동안 사용자의 경험을 개선하기 위해 표시되는 임시적인 시각적 레이아웃입니다. 콘텐츠가 로드될 때까지 빈 화면을 보여주는 대신, 실제 콘텐츠의 배치를 모방한 회색 또는…

스타일 가이드(Style guide)

스타일 가이드는 디자인 및 개발 팀이 일관된 비주얼 아이덴티티를 유지하고, 사용자의 경험을 향상시키기 위해 정의한 UI 및 UX 디자인 규칙을 문서화한 자료입니다. 이는 브랜드 아이덴티티를 강화하고, 제품 간의…

스티키(Sticky)

스티키(Sticky)란 웹사이트나 애플리케이션에서 특정 UI 요소가 사용자가 스크롤을 내리거나 올려도 화면의 특정 위치에 고정되어 유지되는 방식을 의미합니다. 이를 통해 사용자 경험을 개선하고 중요한 정보를 항상 노출할 수 있도록…

슬라이더(Slider)

슬라이더(Slider)는 사용자가 특정 범위 내에서 값을 조절하거나 선택할 수 있도록 하는 UI 컴포넌트입니다. 일반적으로 수평(가로) 또는 수직(세로) 바 형태를 가지며, 사용자는 마우스나 터치로 핸들을 움직여 원하는 값을 설정할…

아이코노그래피(Iconography)

아이코노그래피(Iconography)는 시각적 기호를 활용하여 정보를 전달하는 디자인 기법을 의미합니다. 이는 UI/UX 디자인에서 아이콘(icon)을 설계하고 사용하는 원칙을 포함하며, 사용자에게 직관적으로 의미를 전달하는 데 중요한 역할을 합니다. 아이콘은 작은 크기의…