런처 아이콘(launcher icon) 런처 아이콘은 애플리케이션의 시작화면을 의미하며 앱을 실행할 때 가장 먼저 보는 앱 아이콘이다. 런처 아이콘은 앱의 브랜드 아이덴티티를 대표하여 사용자에게 좋은 인상을 주어야 한다. 앱 아이콘, 폴더 아이콘…
지연된 로딩(Lazy Loading) 지연된 로딩(Lazy Loading)은 웹사이트나 애플리케이션의 성능 최적화를 위해 사용되는 기술 중 하나입니다. 이를 통해 초기 로딩 속도를 개선하고 사용자 경험을 향상시킬 수 있습니다. 사용 예시 웹사이트에서 모든 이미지를…
칩(Chips) 칩(Chips)은 안드로이드 디자인에서, 간략한 텍스트 또는 그림으로 구성된 사용자 입력 항목을 나타내는 UI 요소이다. 일반적으로 선택 또는 필터링과 같은 작업에 사용된다. 사용 예시 칩은 사용자가 선택한 값을 표시하거나…
dp (Density Independent Pixel) DP(Density Independent Pixel)은 안드로이드에서 사용하는 픽셀 단위로, 다양한 화면 밀도와 해상도를 가진 디바이스에서 일관된 크기의 UI 요소를 보여주기 위해 설계된 단위입니다. DP는 디스플레이의 밀도에 독립적인 픽셀로, 화면 크기와…
차트(Chart) 차트는 데이터 시각화와 관련되며 라인, 바, 캔들, 타임라인 등 다양한 타입으로 활용됨. 보여주고자 하는 데이터의 성향과 가짓수에 따라 적합한 유형을 잘 선택해야 함. 시간의 경과에 따라 변하는 값를…
데이터 포맷(Data formats) 데이터 포맷(Data Formats)은 숫자, 언어, 날짜, 시간 등의 다양한 유형의 데이터를 나타내는 형식을 의미합니다. UI에서 시간, 요일, 날짜(예: 월, 일, 연도) 등의 정보를 표시할 때 사용자의 지역과 서비스…
햅틱, 사운드 디자인(Sound Design) UI에서는 주로 시각적인 방식으로 전달되지만, 유저의 행동에 대해 *햅틱 기술을 활용한 진동(촉각)을 통한 피드백과 사운드 디자인(청각)을 통해 피드백을 주는 역할을 하여 더 풍부한 사용자 경험(UX)을 줄 수 있음.…
FAB(Floating Action Button) FAB(Floating Action Button)은 UI 내 특정 위치에 고정되어 떠 있는 버튼으로, 사용자에게 중요한 행동을 언제든지 클릭할 수 있도록 제공하는 UI 요소입니다. 주로 안드로이드에서 자주 사용되는 유형으로, 리스트나 콘텐츠…
헤더(Header) 웹사이트 내에 상단 영역에 로고부터 내비게이션, 액션 버튼을 모아놓은 영역.회원가입, 문의하기 등 사용자에게 유도하고자 하는 CTA는 다른 메뉴와 다르게 잘 보이도록 디자인하는 것을 지향함. 헤더는 스크롤에 따라 같이…
푸터(Footer) 웹사이트 내에 하단 영역에 브랜드 로고부터 사이트 맵, 필수 페이지에 대한 링크, 소셜 정보, 저작권 표기, 언어 설정 등의 기능을 모아놓은 영역. 어떤 서비스인지 제공하는 규모에 따라 더…
브레드 크럼(Breadcrumbs) 브레드 크럼이란 빵 부스러기로 헨젤과 그레텔에서 따온 용어로 사이트의 전체 구조를 한눈에 볼 수 있어 사용자가 현 위치에 대한 맥락을 쉽게 알 수 있음. 홈부터 상위 카테고리(2depth), 하위…
마이크로 인터랙션(Micro interaction) 마이크로 인터랙션이란 유저가 웹 혹은 앱 서비스를 사용할 때 마이크로한 영역에 대한 피드백 말함. 예를 들면, 페이스북 혹은 인스타그램의 '좋아요' 버튼 클릭 시 아이콘의 모션을 통해 피드백을 줌.…
스티키(Sticky) 웹 혹은 앱 내에서 스크롤을 할 경우 특정 영역에 도달했을때 대상이 고정되는 방식을 말함. 사용자 입장, 혹은 비즈니스 측면에서 고정했을 때 도움이 될 요소만 고정하는 것이 중요함. 스티키…
인터렉션(Interaction) 인터렉션이란 유저가 특정 행동을 한 것에 대한 반응으로 제스처, 셀렉션, 상태 3가지로 구분할 수 있음. 제스처(Gesture) 웹에서는 마우스와 키보드를 활용하며 클릭, 마우스오버, 마우스 인아웃, 프레스, 키 다운, 키…
네비게이션(Navigation) 네비게이션(Navigation)은 웹이나 앱 서비스 내에서 사용자가 특정 페이지로 이동할 수 있도록 하는 탐색 경로를 말합니다. 사용자는 네비게이션을 통해 원하는 정보를 쉽게 찾고, 서비스 내에서의 위치를 파악할 수 있습니다.…
트랜지션(Transition) 트랜지션이란 페이지 간 이동할때 적용하는 애니메이션을 말함. 페이지와 페이지 사이의 정보 구조 및 연계성을 시각적으로 인식시켜주기 위한 방법. 트랜지션을 결정하는 두 가지 기준은 페이지 간 이동 방식과 애니메이션에 대한…
아이코노그래피(Iconography) 도상학이라고도 하며, 아이콘에 대한 것으로 여러 가지 접근 방식이 있지만, 단순 스타일로 접근하기보다 기호학에 의거하여 최대한 직관적인 정보 전달에 우선순위를 두어야 함. 아이콘 아이콘은 기호의 일종으로 의미와 형태를…
컬러 시스템(Color System) 컬러 시스템이란, 브랜드 또는 스타일을 반영하기 위한 색상 테마를 결정짓는 컬러 정보. UI에서 컬러를 활용하여 우선순위 및 계층적인 개념을 표현할 수 있으며 상호작용 요소로 활용되기도 함. 또한, 접근성에…
스타일 가이드(Style guide) 일관된 브랜드 경험을 주기 위해 기본이 되어야 하는 스타일에 대한 규칙을 말함. 주로, 브랜드 컬러와 그래픽 모티프에 의한 그래픽 가이드라인, 아이콘 스타일, 전용 서체, 포토그래피 등의 가이드를 말함.…
타이포그래피(Typography) 타이포그래피는 단순 폰트에 대한 것은 아니며, 폰트의 사이즈, 두께, 서체 종류 등을 조절하여 화면 내 위계질서를 시각적으로 나타내는 개념. UI에서 크게 제목용(헤드라인)와 본문용(바디)으로 나뉘며, 웹이냐 앱이냐에 따라 해상도와…