리스트(Lists) 리스트 타입은 정보를 순차적으로 표시하기 위해 사용되는 UI 요소다. 주로 항목 목록, 메뉴, 태그, 할 일 목록 등 다양한 형태로 사용된다. 사용 예시 리스트 타입은 웹사이트의 사이드바 메뉴, 블로그의 글 목록, 앱의…
마이크로 인터랙션(Micro interaction) 마이크로 인터랙션이란 유저가 웹 혹은 앱 서비스를 사용할 때 마이크로한 영역에 대한 피드백 말함. 예를 들면, 페이스북 혹은 인스타그램의 '좋아요' 버튼 클릭 시 아이콘의 모션을 통해 피드백을 줌. 다른 예시로 구글 드라이브에…
마이크로인터랙션 (Microinteractions) 마이크로인터랙션은 사용자와 디자인 요소 간의 작은 상호작용을 말합니다. 이는 사용자의 행동에 반응하거나 시스템 상태를 나타내는 방법 등에 사용됩니다. 마이크로인터랙션은 사용자 경험(UX)을 높이는 데 중요한 역할을 합니다. 예시 버튼을 클릭하면 색상이 변하거나, 애니메이션이…
모달 (Modal) 모달은 사용자의 주의를 특정 작업 또는 내용에 집중시키기 위해 주로 사용되는 대화형 UI 요소입니다. 사용자가 모달 내의 정보를 주시하거나 요구되는 작업을 완료하도록 강제하기도 합니다. 웹 브라우저에서 자체적으로 제공하는 모달 얼럿도 있지만, 경우에…
모바일 퍼스트(Mobile First) 모바일 퍼스트는 웹사이트나 애플리케이션을 설계할 때, 먼저 모바일 환경을 고려하고 그 이후에 더 큰 화면(태블릿, 데스크탑 등)을 위한 설계를 확장하는 방법론입니다. 이는 현대의 인터넷 사용 패턴에서 모바일 디바이스의 중요성이 계속해서 증가하고 있음을…
밀러의 법칙(Miller’s Law) 밀러의 법칙은 인간의 작업 기억 용량과 작업의 복잡도 사이의 관계를 설명하는 심리학적인 원리입니다. 이 법칙은 1956년에 조지 A. 밀러(George A. Miller)에 의해 제안되었으며, "매직 넘버 7±2"라고도 알려져 있습니다. 밀러의 연구에 따르면 대부분의…
반응형 레이아웃 레이아웃이란, 컴퓨터 그래픽 디자인이나 소프트웨어 디자인에서 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 것.반응형이란 다양한 해상도의 디바이스에 최적화 시키는 것으로 그리드 시스템을 바탕으로 레이아웃을 구성하는 것이 중요함.그리드 시스템을 활용해서 레이아웃을 만드는 이유…
브레드 크럼(Breadcrumbs) 브레드 크럼이란 빵 부스러기로 헨젤과 그레텔에서 따온 용어로 사이트의 전체 구조를 한눈에 볼 수 있어 사용자가 현 위치에 대한 맥락을 쉽게 알 수 있음. 홈부터 상위 카테고리(2depth), 하위 카테고리(3depth), 현 위치 순으로…
빈 공간 (Empty States) 빈 공간 또는 빈 상태는 앱 내에 특정 콘텐츠나 데이터가 없는 경우에 보여주는 화면을 의미한다. 이는 초기 사용자가 앱을 처음 사용하거나, 검색 결과가 없거나, 목록의 항목이 없는 경우 등에 주로 사용된다. 빈…
사용자 여정 지도 (User Journey Map) 사용자 여정 지도는 특정 사용자가 제품이나 서비스를 이용하는 과정을 시각적으로 표현한 도구입니다. 이는 사용자의 경험과 감정, 상호작용, 과정 등을 명확하게 이해하고, 제품이나 서비스의 강점과 약점, 개선의 기회를 파악하는 데 도움을 줍니다. 사용자…
세그먼트 컨트롤(Segmented Control) 세그먼트 컨트롤은 사용자가 여러 옵션 중 하나를 선택할 수 있는 컨트롤 요소로, 주로 선택적인 작업 또는 필터링에 사용된다. 이는 주로 모바일 앱에서 사용되며, 간단하고 직관적인 선택 기능을 제공한다. 사용 예시 세그먼트 컨트롤은…
스낵바(Snackbars) 스낵바(Snackbars)는 안드로이드 UI에서 잠깐 나타났다가 사라지는 짧은 메시지를 보여주는 컴포넌트로, 사용자에게 앱의 상태나 작업의 결과를 간결하게 전달하는데 사용된다. 이는 화면 하단에 일시적으로 나타나며, 보통 일정 시간이 지나거나 사용자가 액션을 취하면 사라진다. 사용…