A/B 테스트 (A/B Testing) A/B 테스트는 두 가지 버전의 웹 페이지 또는 앱 디자인을 비교하여 어떤 버전이 사용자에게 더 나은 결과를 제공하는지를 확인하는 실험적인 방법입니다. 이를 통해 디자인, 콘텐츠, 레이아웃, 기능 등의 요소를 수정하고 최적화하여 사용자…
Alt 속성 (Alt Attribute) Alt 속성, 또는 대체 텍스트(Alternative Text)는 HTML에서 이미지 태그(<img>)에 사용되는 속성입니다. 이 속성은 이미지를 표시할 수 없거나, 이미지를 인식할 수 없는 사용자를 위한 텍스트 정보를 제공합니다. Alt 속성은 웹 접근성이 중요한 부분…
App Bar App Bar는 안드로이드 앱에서 사용자 인터페이스의 중요한 요소로, 화면 상단에 위치하며 사용자에게 앱 이름, 네비게이션, 액션 등을 표시한다. 이는 사용자에게 현재 어떤 화면에 위치해 있는지를 명확하게 보여주고, 사용자가 앱 내에서 쉽게 이동하거나…
CRUD CRUD는 컴퓨터 프로그래밍에서 데이터의 기본적인 네 가지 함수를 가리킵니다: 생성(Create), 읽기(Read), 업데이트(Update), 삭제(Delete). 이러한 함수들은 대부분의 시스템에서 데이터와 상호작용하는 기본적인 방법을 제공합니다. 프로그래핑 개념이지만, UXUI 디자이너로서 웹 혹은 앱 애플리케이션 디자인시 CRUD…
CTA(Call To Action) CTA는 '호출 행동'을 의미하며, 웹사이트나 앱, 광고 등에서 사용자에게 특정 행동을 취하도록 유도하는 설계 기술입니다. CTA는 보통 버튼 또는 링크의 형태를 띠며, "구매하기", "더 알아보기", "가입하기"와 같은 강력한 동사를 사용하여 사용자의 의사결정을…
CTR (Click-Through Rate) CTR 또는 클릭률은 디지털 마케팅에서 광고의 효과를 측정하는 데 사용되는 지표 중 하나입니다. 이는 광고를 본 사람들 중 실제로 그 광고를 클릭하여 해당 웹사이트나 제품에 방문한 사람들의 비율을 의미합니다. CTR은 아래의 공식으로…
dp (Density Independent Pixel) DP (Density Independent Pixel)는 안드로이드에서 사용하는 단위로, 디스플레이의 밀도와 관련된 독립적인 픽셀 단위이다. 화면의 크기와 비율에 관계없이 일관된 크기로 보이도록 해주며, 다양한 디스플레이 밀도를 가진 디바이스에서도 같은 크기의 UI를 보여줄 수 있다.…
dpi, ppi 이미지의 해상도를 표현하는 단위. PPI PPI는 Pixels Per Inch로 1인치당 얼마나 많은 픽셀이 들어가느냐로 PC, Mobile 등 다양한 디지털 스크린에 대한 단위. DPI DPI는 Dots Per Inch로 1인치당 얼마나 많은 점으로 표현되는지로…
F-패턴 (F-Pattern)과 Z-패턴 (Z-Pattern) F-패턴이란? F-패턴은 웹페이지의 내용을 읽는 데 사용자들이 가장 자주 따르는 눈의 움직임 패턴입니다. 이는 사용자가 페이지의 왼쪽 상단부터 읽기 시작하여 수평으로 이동한 후, 다시 아래로 이동하여 새로운 정보를 찾는 방식을 따릅니다. F-패턴…
FAB(Floating Action Button) FAB 이란, 플로팅 액션 버튼의 줄임말로, UI 내에 특정 위치에 고정되어 떠있는 요소로 사용자에게 중요한 행동을 언제든지 클릭할 수 있도록 제공함. 주로 안드로이드에서 볼 수 있는 유형으로 리스트 내에서 액션을 유도하는 버튼임.…
pt (Point) PT (Point)는 디자인에서 자주 사용되는 단위로, 이는 일반적으로 화면의 물리적 크기에 의존하는 것으로 알려져 있다. 이 단위는 주로 애플의 iOS에서 사용되며, 1pt는 물리적으로 약 1/72 인치를 의미한다. 이 단위는 디바이스의 화면 크기와…
sp (Scale-independent Pixels) SP (Scale-independent Pixels)는 텍스트 크기를 결정하는데 주로 사용되는 단위로, 안드로이드 환경에서 많이 사용된다. SP는 DP와 매우 유사하지만, 추가적으로 사용자의 글꼴 크기 설정에 따라 크기가 조절되는 특징을 가지고 있다. 안드로이드에서는 디바이스의 화면 크기와…
가시화 (Visualization) 가시화는 데이터나 정보를 이미지나 그래프 등의 시각적 형태로 표현하는 과정이나 결과입니다. 이는 복잡한 데이터를 이해하기 쉽게 만들며, 패턴, 트렌드 및 인사이트를 식별하는 데 도움을 줍니다. 예시 UX/UI 디자이너는 사용자가 정보를 쉽게 이해하고…
개념 증명 (Proof of Concept, POC) 개념 증명(POC)은 Proof of Concept의 약자로, 신규 개발 제품, 서비스, 솔루션 등의 이론이나 아이디어가 실제로 실행 가능한 것을 보여주기 위한 시험, 테스트 또는 실험을 의미합니다. 그래서 어떤 아이디어나 기술이 실제로 실행 가능하고,…
게슈탈트 이론(Gestalt Theory) 게슈탈트 이론은 인식과 인식 심리학에 관한 이론으로, 전체가 부분의 합보다 더 큰 의미를 갖는다는 개념을 강조합니다. 이 이론은 UX/UI 디자인 분야에서 중요한 원리로 활용되며, 사용자의 인식과 인지를 이해하고 설계에 적용하는 데 도움이…
구분선(Divider) 구분선은 UI 요소들 사이에 가시적인 경계를 만들어, 컨텐츠를 명확하게 구분하는데 사용된다. 이는 사용자가 인터페이스를 이해하는 데 도움을 주며, 정보의 그룹화를 촉진한다. 사용 예시 구분선은 메뉴 항목, 리스트 항목, 섹션 등, 서로 다른…
그리드시스템(Grid System) 그리드 시스템은 레이아웃을 잡기 위한 가이드로 콘텐츠 폭, 컬럼, 거터, 마진 4가지 요소로 구성됨.다양한 해상도와 비율의 디바이스에 최적화된 레이아웃을 구현하기 위해서는 그리드 시스템은 필수다. Desktop, Laptop에서는 12단을 추천하며, Tablet은 6단, Mobile은 4단을…
넛지(NUDGE) 넛지(NUDGE)는 사용자의 행동을 유도하거나 관찰된 동작에 대한 간접적인 힌트를 제공하여 사용자 경험을 개선하는 기술적인 개념입니다. UX/UI 디자이너는 넛지를 활용하여 사용자의 행동을 유도하고 원하는 방향으로 인터랙션을 유도할 수 있습니다. "어떤 행동을 하도록 부추기며…
네비게이션(Navigation) 유저가 웹 혹은 앱 서비스 내에서 특정 페이지로 이동하는 탐색 유형을 말함. 웹에서는 주로 헤더, 사이드바에 네비게이션을 제공하며 앱에서는 주로 App bar Top이나 Bottom Navigation Bar에 해당 기능을 제공함. 웹과 앱은 환경이…
네비게이션바(Navigation Bar) 네비게이션바는 웹사이트 또는 앱에서 주로 상단에 위치하는 인터페이스 요소로, 페이지 간의 이동이나 메뉴 항목에 접근하는데 사용된다. 이는 사용자가 앱의 구조를 이해하고, 주요 기능에 빠르게 접근할 수 있도록 돕는다. 사용 예시 네비게이션바는 웹사이트의…
네이티브 앱 (Native App) 네이티브 앱은 특정 운영 체제에서 실행되도록 그 체제의 고유 프로그래밍 언어로 작성된 애플리케이션입니다. 예를 들어, Android 운영 체제의 경우 Java 또는 Kotlin, iOS의 경우 Objective-C 또는 Swift로 개발됩니다.그로 인해, 각 OS마다 제공하는…
다이어로그(Dialogs) 다이어로그는 사용자의 주의를 요구하거나 선택을 하도록 유도하는 UI 컴포넌트이다. 이는 앱의 주요 콘텐츠 위에 나타나며, 사용자가 선택사항을 확인하거나 특정 작업을 완료하기 전에 추가 정보를 제공한다. 사용 예시 다이어로그는 사용자가 앱에서 민감한 작업을…
다크 모드(Dark Mode) 다크 모드는 사용자 인터페이스의 색상 스키마를 어둡게 바꾸는 기능을 의미한다. 밝은 텍스트가 어두운 배경에 표시되며, 이는 야간 사용이나 어두운 환경에서의 가독성을 높이고 눈의 피로를 줄여준다하여 사용되었다. 하지만, 특정 연구에 의하면 다크모드를 사용시…
다크 패턴 (Dark Patterns) 다크 패턴은 사용자 인터페이스 디자인에서 사용자를 의도적으로 혼란스럽게 하거나 오해하도록 만들어, 사용자가 원하지 않는 행동을 하도록 유도하는 유해한 디자인 전략을 말합니다. 이는 일반적으로 비윤리적으로 간주되며, 사용자 경험에 부정적인 영향을 미칩니다. 다크 패턴은…
더블 다이아몬드 프로세스 (Double Diamond process) 더블 다이아몬드는 디자인 프로세스를 구조화한 방법론으로, 영국 디자인 위원회(British Design Council)가 제안한 디자인 생각 프로세스 모델입니다. 문제를 정의하고 해결하는 네 단계를 두 개의 다이아몬드 모양으로 표현한 것이 특징입니다. 이 모델의 기본 원칙은…
데이터 포맷(Data formats) 데이터 형식은 다양한 유형의 숫자 및 언어 데이터를 나타냄. UI 내 시간, 요일, 날짜(Month, day, and year) 등 상황에 맞게 UI에 표기해야 함.타임 존이란 지역마다 시간대가 다르므로 구체적인 표기가 필요함. 예) UTC+5:00…
데이트 피커(Date Pickers) 데이트 피커는 사용자가 날짜를 선택하도록 돕는 사용자 인터페이스 요소다. 이를 통해 사용자는 달력 형태의 UI를 통해 특정 날짜를 쉽게 선택할 수 있다. 사용 예시 데이트 피커는 예약 시스템, 이벤트 생성, 생일 입력…
도허티의 임계(Doherty Threshold) 도허티의 임계는 사용자와 컴퓨터 간의 인터랙션 시 가장 적절한 시간 범위를 나타내는 개념입니다. 이 임계는 사용자 경험 디자인과 인터페이스 디자인 관점에서 중요한 원리로 적용됩니다. "사용자의 주의가 분산되는 것을 막고 생산성을 높이려면 시스템의…
드롭다운(Drop-down) 드롭다운은 사용자가 선택할 수 있는 여러 옵션들을 목록 형태로 표시하는 UI 컴포넌트다. 사용자가 드롭다운 메뉴를 클릭하면, 이용 가능한 옵션들이 목록으로 펼쳐진다.Android에서는 Menus라고 불린다. 사용 예시 드롭다운은 폼에서 사용자에게 여러 선택지 중 하나를…
디자인 윤리 (Design Ethics) 디자인 윤리는 디자인 프로세스와 그 결과물이 사회와 개인에 미치는 영향에 대한 가치 판단을 포함합니다. 디자이너는 단순히 보기 좋고 기능적인 제품을 만드는 것뿐만 아니라, 그 제품이 사람들과 그들의 생활에 어떤 영향을 미칠지 고려해야…
딥링크 (Deep Linking) 딥링크는 앱이나 웹사이트의 특정 페이지 또는 위치를 직접 연결해주는 URL입니다. 기본적인 링크는 웹사이트의 홈페이지를 연결해주지만, 딥링크는 그 이상으로 들어가 사용자가 바로 특정 내용이나 페이지에 접근할 수 있도록 합니다. 웹에서 앱으로 이동시키는 기술로…
라디오 버튼(Radio Button) 라디오 버튼(Radio Button)은 웹 개발에서 사용되는 입력 요소 중 하나로, 사용자가 여러 옵션 중 하나만 선택할 수 있는 버튼을 의미합니다. 라디오 버튼은 주로 선택지가 여러 개 있을 때, 사용자가 단 하나의 옵션만…
랜딩 페이지 (Landing Page) 랜딩 페이지는 특정 목표를 달성하기 위해 설계된 웹페이지입니다. 이는 일반적으로 디지털 광고 캠페인을 통해 사용자들이 '착륙'하는 곳입니다. 목표는 보통 구매, 등록, 문의, 다운로드 등과 같은 사용자 행동을 유도하는 것입니다. 예시 UX/UI 디자이너는…
런처 아이콘(launcher icon) 런처 아이콘은 애플리케이션의 시작화면을 의미하며 앱을 실행할 때 가장 먼저 보는 앱 아이콘이다. 런처 아이콘은 앱의 브랜드 아이덴티티를 대표하여 사용자에게 좋은 인상을 주어야 한다. 앱 아이콘, 폴더 아이콘 등 OS에서 제공하는 기본…
레거시 (Legacy) 레거시는 기술, 시스템, 소프트웨어 등이 오래되어 새로운 버전이나 표준에 대체되어야 하지만 여전히 사용되고 있는 상태를 의미합니다. 레거시 시스템은 종종 업데이트가 어렵고, 유지 관리가 비용이 많이 들며, 새로운 기술과의 호환성 문제를 가질 수…
레이블(Label) 레이블은 사용자 인터페이스에서 정보의 종류를 설명하거나, 입력 필드와 같은 요소의 목적을 명시하는 데 사용되는 텍스트 요소다. 레이블은 사용자가 인터페이스를 더 쉽게 이해하고 사용할 수 있도록 돕는 요소이다. 라벨이라고도 불린다. 사용 예시 레이블은…
리스트(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에서 잠깐 나타났다가 사라지는 짧은 메시지를 보여주는 컴포넌트로, 사용자에게 앱의 상태나 작업의 결과를 간결하게 전달하는데 사용된다. 이는 화면 하단에 일시적으로 나타나며, 보통 일정 시간이 지나거나 사용자가 액션을 취하면 사라진다. 사용…
스켈레톤 UI(Skeleton UI) 스켈레톤 UI는 페이지나 앱의 콘텐츠가 로드되는 동안 사용자에게 표시되는 비어있는 버전의 페이지나 앱의 레이아웃을 의미한다. 이는 사용자 경험을 향상시키기 위한 로딩 전략 중 하나로, 콘텐츠가 완전히 로드되기 전에도 사용자에게 앱의 구조를 보여줌으로써…
스크럼 (Scrum) 스크럼은 소프트웨어 개발을 위한 애자일 프레임워크 중 하나로, 복잡하고 예측 불가능한 프로젝트를 관리하는 방법론입니다. 작은 단위로 나누어진 작업들을 주기적으로 반복하며 프로젝트를 진행합니다. 스크럼 팀은 일반적으로 제품 소유자(Product Owner), 스크럼 마스터(Scrum Master), 개발팀(Development…
스크린 리더 (Screen Reader) 스크린 리더는 시각 장애인 또는 저시력자들이 컴퓨터나 모바일 기기를 사용할 수 있도록 도와주는 소프트웨어입니다. 스크린 리더는 컴퓨터 화면에 표시된 텍스트나 이미지를 오디오 출력으로 변환하여 사용자에게 정보를 제공합니다. 스크린 리더는 웹사이트, 이메일, 앱,…
스타일 가이드(Style guide) 일관된 브랜드 경험을 주기 위해 기본이 되어야 하는 스타일에 대한 규칙을 말함. 주로, 브랜드 컬러와 그래픽 모티프에 의한 그래픽 가이드라인, 아이콘 스타일, 전용 서체, 포토그래피 등의 가이드를 말함. 디자인 가이드라인이라고도 하고 브랜드…
스티키(Sticky) 웹 혹은 앱 내에서 스크롤을 할 경우 특정 영역에 도달했을때 대상이 고정되는 방식을 말함. 사용자 입장, 혹은 비즈니스 측면에서 고정했을 때 도움이 될 요소만 고정하는 것이 중요함. 스티키 인터렉션 예시 ©Apple 주의점…
스프린트 (Sprint) 스프린트는 애자일 프레임워크인 스크럼에서 사용하는 주요 개념 중 하나로, 프로젝트의 특정 부분에 집중하는 제한된 시간 간격을 나타냅니다. 일반적으로 스프린트의 기간은 1~4주 사이이며, 그 기간 동안 팀은 사전에 정의된 작업 목록을 완료하는 데…
슬라이더(Slider) 슬라이더(Slider)는 사용자가 값을 선택하거나 조절할 수 있는 가로 또는 세로 방향의 바 형태를 가지는 컴포넌트입니다. 슬라이더를 사용하면 사용자가 범위 내에서 값을 선택하거나 설정할 수 있습니다.웹에서는 Range 타입의 인풋으로 사용됩니다. 사용 예시: 볼륨…
심미적 사용성 효과(Aesthetic-Usability Effect) 심미적 사용성 효과는 디자인 요소의 시각적인 매력이 사용자의 인식과 경험에 어떤 영향을 미치는지를 나타내는 개념입니다. 이 효과는 사용자 경험 디자인과 인터페이스 디자인 관점에서 중요한 원리로 적용됩니다. "심미성이 좋은 디자인은 사용성이 더 뛰어난…
아이코노그래피(Iconography) 도상학이라고도 하며, 아이콘에 대한 것으로 여러 가지 접근 방식이 있지만, 단순 스타일로 접근하기보다 기호학에 의거하여 최대한 직관적인 정보 전달에 우선순위를 두어야 함. 아이콘 아이콘은 기호의 일종으로 의미와 형태를 파악할 수 있도록 사용되는…
애자일 방법론 (Agile Methodology) 애자일 방법론은 프로젝트를 관리하고 소프트웨어를 개발하기 위한 유연한 접근법으로, 개발 과정을 작은 단위로 나눠 반복하며 진행합니다. 애자일 방법론은 변화에 빠르게 대응하고, 고객의 피드백을 적극적으로 수용하여 사용자 중심의 결과물을 만들어 내는 것을 목표로…
액션시트 (Action Sheet) 액션시트는 사용자에게 세트의 선택 사항 중 하나를 선택하도록 요청하는 슬라이드 업 메뉴나 대화 상자를 의미한다. 이는 주로 모바일 앱에서 사용되며, 사용자에게 현재 컨텍스트와 관련된 여러 작업 중에서 선택을 요구할 때 사용된다. 사용…
앤드유저 (End User) 앤드유저는 특정 제품, 서비스, 시스템 또는 디자인의 최종 사용자를 의미합니다. 이들은 일반적으로 특정 솔루션의 목표 고객으로서, 그 솔루션을 구매하고 사용하여 목표를 달성합니다. 앤드유저는 기술적 지식이 별로 없을 수도 있고, 제품이나 서비스의 내부…
어포던스 (Affordance) 어포던스는 디자인 요소가 사용자에게 제공하는 행동 가능성을 나타내는 용어입니다. 이 개념은 사용자 인터페이스(UI) 디자인에서 중요한 역할을 하며, 사용자가 제품 또는 서비스를 어떻게 사용할지 이해하게 돕습니다. UX/UI 디자이너들은 애플리케이션의 각 요소가 어떤 동작을…
엣지 케이스(Edge Case) 엣지 케이스는 대부분의 상황에서는 발생하지 않는 소수의 특정 상황 또는 사용자를 가리킵니다. UX/UI 디자이너는 이러한 엣지 케이스를 고려하여 디자인을 조정하고 다음과 같은 접근 방식을 사용해야 합니다. 엣지 케이스는 주요한 사용자 그룹이 아닌…
엣지케이스(Edge case) 엣지케이스는 소프트웨어나 시스템에서 예상치 못한 상황이나 특정 조건에 따라 동작이나 결과가 변하는 경우를 가리킵니다. 엣지케이스는 일반적인 시나리오와는 다른 동작을 포함하고 있으며, 소프트웨어나 시스템의 안정성과 사용자 경험에 영향을 미칠 수 있습니다. 예시 네트워크…
오프라인 상태 (Offline States) 오프라인 상태는 인터넷 연결이 불안정하거나 없을 때 앱이나 웹사이트가 어떻게 동작하는지를 나타냅니다. 사용자가 오프라인 상태에서 앱이나 웹사이트를 사용하려고 할 때, 그들에게 명확한 피드백을 제공하여 현재의 연결 상태를 알릴 수 있어야 합니다. 사용…
온보딩 페이지 (Onboarding Page) 앱 온보딩은 사용자가 앱을 처음 실행했을 때 핵심 정보를 전달하고, 앱의 사용 가능한 기능을 소개하는 과정이다. 온보딩 화면은 슬라이드 형식으로 제공되며, 사용자는 건너뛰기 버튼을 통해 빠르게 온보딩을 완료할 수 있다. 일반적으로 사용자가…
워터폴 모델 (Waterfall Model) 워터폴 모델 혹은 폭포수 모델은 소프트웨어 개발 과정에서 가장 초기에 사용된 프로젝트 관리 방법론 중 하나로, 각 단계가 이전 단계의 결과에 기반을 두고 순차적으로 진행되는 것을 특징으로 합니다. 워터폴 모델은 일반적으로 요구사항…
웹 접근성 (Web Accessibility) 웹 접근성은 웹 사이트나 애플리케이션에서 제공되는 정보에 대한 접근을 제한 없이 모든 사용자가 동등하게 이용할 수 있도록 보장하는 것을 의미합니다. 장애를 가진 사람, 고령자, 시각, 청각, 운동 기능 등의 제약을 가진 사람뿐만…
유니버설 디자인 (Universal Design) 유니버설 디자인이란 가능한 많은 사용자가 접근하고 이해하고 사용할 수 있도록 제품이나 환경을 설계하는 방식을 의미합니다. 이는 나이, 능력, 성별, 문화적 배경 등과 관계없이 모든 사람들을 포함하는 디자인 접근법입니다. 유니버설 디자인의 주요 목표는…
인지심리학 (Cognitive Psychology) 인지심리학은 사람이 정보를 인지하고 처리하는 방식을 연구하는 심리학의 한 분야입니다. 이 분야는 사람의 지각, 기억, 학습, 문제 해결, 언어 사용 등에 대한 연구를 포함합니다. 인지심리학은 인간의 마음을 정보 처리 시스템으로 이해하려는 접근…
인터렉션(Interaction) 인터렉션이란 유저가 특정 행동을 한 것에 대한 반응으로 제스처, 셀렉션, 상태 3가지로 구분할 수 있음. 제스처(Gesture) 웹에서는 마우스와 키보드를 활용하며 클릭, 마우스오버, 마우스 인아웃, 프레스, 키 다운, 키 업 등이 있으며, 앱에서는…
인풋 (Input) 인풋(Input)은 웹 개발에서 사용되는 요소로, 사용자로부터 정보를 입력받을 수 있는 상자나 필드를 의미합니다. 사용자가 텍스트, 숫자, 선택 옵션 등을 입력하거나 선택할 수 있도록 도와주는 역할을 합니다. 인풋 종류 텍스트 인풋(Text Input): 사용자가…
재방문율 (Retention) 재방문율(리텐션)은 웹사이트나 앱에 사용자가 얼마나 자주 돌아오는지 측정하는 데 사용됩니다. 이를 통해 고객의 충성도, 서비스의 만족도, 제품의 장기적인 가치 등을 추정할 수 있습니다. 디자이너 입장에서 사용성 개선 및 신규 서비스 런칭등 성과…
적응형 웹(Adaptive Web) 적응형 웹은 웹사이트를 다양한 화면 크기와 장치에 맞게 최적화하는 웹 디자인 접근법입니다. 적응형 웹 디자인은 다양한 미리 정의된 화면 크기 (일반적으로 스마트폰, 태블릿, 데스크탑 등의 기기를 대표하는)에 대해 개별적으로 최적화된 레이아웃을 생성합니다.…
전환율 (Conversion Rate) 전환율은 마케팅 및 웹 분석에서 사용하는 중요한 지표로, 특정 행동을 완료한 사용자의 비율을 의미합니다. 웹사이트를 방문한 100명의 사용자 중 5명이 제품을 구매했다면, 전환율은 5%가 됩니다.이 행동은 웹사이트 방문, 앱 다운로드, 구독, 구매,…
정보구조 (Information Architecture) 정보구조는 웹사이트, 앱 또는 소프트웨어 내의 정보를 조직화하고 구조화하는 방식을 말합니다. 사용자가 정보를 쉽게 찾을 수 있도록 도와주며, 사용자 경험(UX)의 핵심 요소 중 하나입니다. 정보구조는 일반적으로 네비게이션 시스템, 카테고리 분류, 사이트맵, 콘텐츠…
제스처(Gestures) 제스처는 사용자가 애플리케이션과 상호작용하는 방법을 나타낸다. 웹에서는 마우스와 키보드를 활용한 클릭, 마우스오버, 마우스 인아웃, 프레스, 키 다운, 키 업 등이 있으며, 모바일 앱에서는 손가락을 활용한 탭, 스크롤, 팬, 드래그, 스와이프, 핀치 등의…
제이콥의 법칙 (Jakob’s Law) 제이콥의 법칙(Jakob's Law)은 사용자 인터페이스(UI) 디자인에 관한 원칙 중 하나로, 사용자들이 이미 익숙한 인터페이스 패턴에 대해 학습하고 익숙해진다는 것을 강조한다. 사용자들은 이미 자주 사용하는 웹사이트나 앱의 인터페이스 패턴에 익숙해져 있다. 따라서, 새로운…
지연된 로딩(Lazy Loading) 지연된 로딩(Lazy Loading)은 웹사이트나 애플리케이션의 성능 최적화를 위해 사용되는 기술 중 하나입니다. 이를 통해 초기 로딩 속도를 개선하고 사용자 경험을 향상시킬 수 있습니다. 사용 예시 웹사이트에서 모든 이미지를 한 번에 로드하게 되면…
차트(Chart) 차트는 데이터 시각화와 관련되며 라인, 바, 캔들, 타임라인 등 다양한 타입으로 활용됨. 보여주고자 하는 데이터의 성향과 가짓수에 따라 적합한 유형을 잘 선택해야 함. 시간의 경과에 따라 변하는 값를 보여주기 추세 그래프에 적합한…
체크박스(Checkbox) 체크박스(Checkbox)는 웹 개발에서 사용되는 입력 요소 중 하나로, 사용자가 하나 이상의 옵션을 선택할 수 있는 상자를 의미합니다. 체크박스는 주로 사용자가 동의, 선택, 허용 등의 선택 사항을 선택하거나 해제할 때 사용됩니다. 사용 예시…
최소 기능 제품 (Minimum Viable Product, MVP) 최소 기능 제품(MVP)은 제품 개발 과정에서 새로운 제품이나 서비스를 출시하는 최소한의 기능을 가진 프로토타입을 의미합니다. 이것은 사용자들에게 제공되어 피드백을 얻고, 그 피드백을 바탕으로 제품이나 서비스를 개선하고 반복적으로 업데이트하는 것을 목표로 합니다. UX/UI…
칩(Chips) 칩(Chips)은 안드로이드 디자인에서, 간략한 텍스트 또는 그림으로 구성된 사용자 입력 항목을 나타내는 UI 요소이다. 일반적으로 선택 또는 필터링과 같은 작업에 사용된다. 사용 예시 칩은 사용자가 선택한 값을 표시하거나 선택할 수 있는 옵션을…
카드(Cards) 카드는 정보나 콘텐츠를 시각적으로 그룹화하고 표시하기 위해 사용되는 컨테이너 요소다. 카드는 일반적으로 사진, 텍스트, 버튼 등 다양한 내용을 포함하며, 웹사이트나 앱에서 다양한 목적으로 사용된다. 사용 예시 카드는 블로그 게시물, 제품, 뉴스 기사,…
캐로셀 (Carousel) 회전목마를 Carousel이라 하는데, 떠올려보면 한 방향으로 회전하는 것이죠. 캐로셀은 여러 콘텐츠를 한 영역 안에서 회전하며 보여주는 UI 패턴입니다.주로 이미지, 카드, 또는 다른 UI 요소를 표시하는 데 사용되며, 사용자가 앱 내에서 콘텐츠를 탐색하고,…
컨버전스 (Convergence) 컨버전스는 서로 다른 기술, 제품, 서비스 또는 시장이 통합되거나 합쳐지는 현상을 의미합니다. 이는 종종 신규 기술의 발전이나 새로운 사용자 요구의 충족을 통해 발생합니다. 이는 다양한 산업에서 나타나며, 특히 디지털 기술, 통신 및…
컬러 시스템(Color System) 컬러 시스템이란, 브랜드 또는 스타일을 반영하기 위한 색상 테마를 결정짓는 컬러 정보. UI에서 컬러를 활용하여 우선순위 및 계층적인 개념을 표현할 수 있으며 상호작용 요소로 활용되기도 함. 또한, 접근성에 대한 개념을 염두해서 컬러에…
콘택트 폼(Contact Form) 콘택트 폼(Contact Form)은 웹사이트나 웹 애플리케이션에서 사용자가 메시지를 보낼 수 있는 폼입니다. 사용자는 폼을 통해 이름, 이메일, 전화번호, 메시지 내용 등과 같은 정보를 입력하여 웹사이트의 관리자나 소유자에게 메시지를 전송할 수 있습니다. 콘택트…
콤보 박스(Combo Box) 콤보 박스는 텍스트 필드와 드롭다운 리스트를 결합한 형태의 UI 컴포넌트다. 사용자는 주어진 목록에서 선택을 할 수 있으며, 동시에 텍스트 필드를 통해 직접 입력도 가능하다. 사용 예시 콤보 박스는 사용자가 표준 옵션 중…
크로스 플랫폼 (Cross-Platform) 크로스 플랫폼은 여러 운영 체제(예: iOS, Android, Windows 등)에서 실행되도록 설계된 소프트웨어의 형태를 의미합니다. 이 접근법은 하나의 코드베이스를 작성하고 이를 여러 플랫폼에 적용할 수 있도록 해주므로, 개발 시간을 절약하고 코드의 재사용성을 높일…
타이포그래피(Typography) 타이포그래피는 단순 폰트에 대한 것은 아니며, 폰트의 사이즈, 두께, 서체 종류 등을 조절하여 화면 내 위계질서를 시각적으로 나타내는 개념. UI에서 크게 제목용(헤드라인)와 본문용(바디)으로 나뉘며, 웹이냐 앱이냐에 따라 해상도와 화면과의 거리 등의 환경…
탭바(Tab Bar) 탭바는 Apple의 iOS 사용자 인터페이스 요소 중 하나로, 사용자가 앱의 다른 부분 사이를 쉽게 전환할 수 있도록 도와주는 하단 바입니다. 주로 앱의 주요 기능이나 화면 사이를 이동하는데 사용됩니다. 사용 예시 iPhone의 전화…
테슬러의 법칙(Tesler’s Law) 테슬러의 법칙은 "사용자는 항상 적어도 하나 이상의 작업을 수행하기 위해 필요한 기능을 기대한다"는 원칙을 나타내는 개념입니다. 이 법칙은 사용자 경험 디자인과 인터페이스 디자인 관점에서 중요한 원리로 적용됩니다. 또한, 모든 프로세스에는 디자인으로 처리할…
테이블(Table) 테이블 또는 데이터 테이블은 정보를 테이블 형식으로 보여주는 UI 요소다. 주로 테이블 헤더와 바디로 나뉘며, 정보의 정렬, 필터링, 비교, 이해를 돕는다. 사용 예시 테이블은 복잡한 정보를 효과적으로 조직하고 표시하는데 이용된다. 사용자가 정보의…
텍스트필드(Text field) 텍스트필드는 사용자가 텍스트를 입력할 수 있는 UI 컴포넌트이다. 폼을 통해 사용자로부터 정보를 수집하거나, 검색 쿼리를 입력 받는 등의 상황에서 사용된다. 이는 앱이나 웹 사이트에 유연성을 제공하며, 사용자의 입력에 따라 동적으로 내용이 변경된다.…
툴팁(Tooltip) 툴팁(Tooltip)은 웹 애플리케이션 또는 웹사이트에서 사용되는 사용자 인터페이스 요소로, 마우스를 해당 요소 위로 이동할 때 나타나는 작은 정보나 설명을 제공하는 도구입니다. 주로 추가 설명이 필요한 요소에 사용되며, 사용자가 요소에 대한 추가 정보를…
트랜지션(Transition) 트랜지션이란 페이지 간 이동할때 적용하는 애니메이션을 말함. 페이지와 페이지 사이의 정보 구조 및 연계성을 시각적으로 인식시켜주기 위한 방법. 트랜지션을 결정하는 두 가지 기준은 페이지 간 이동 방식과 애니메이션에 대한 시간임. 유저가 특정 행동을…
파레토 법칙 (Pareto Principle) 파레토 법칙, 또는 80/20 법칙이라고도 불리는 이 원칙은 19세기 이탈리아의 경제학자 빌프레도 파레토가 제시한 이론입니다. 그는 이탈리아 사회의 부의 분포를 연구하면서 20%의 사람들이 전체 부의 80%를 차지하고 있음을 발견했습니다. 이후 이 비율은…
파비콘 (Favicon) 파비콘(Favicon)은 웹사이트의 아이콘을 나타내는 작은 그래픽 파일이다. 이 아이콘은 주로 브라우저의 주소창, 북마크 목록, 개방된 탭 등에서 웹사이트를 식별하는데 사용된다. 사용 예시 웹사이트의 브랜드를 나타내거나, 사용자가 웹사이트를 쉽게 인식하고 탐색할 수 있도록…
퍼널 (Funnel) 퍼널이란, 마케팅과 UX/UI 디자인에서 흔히 사용되는 용어로, 사용자들이 특정 목표(구매, 가입, 정보 제공 등)를 달성하기 위해 거쳐야 하는 단계들을 시각화한 모델을 의미합니다. 퍼널은 그 이름처럼 가장 넓은 부분(시작)에서 가장 좁은 부분(목표)까지 점점…
페르소나(Persona) 페르소나(Persona)은 특정 사용자 그룹을 대표하는 가상의 인물을 나타내는 개념입니다. 페르소나는 사용자 연구와 사용자 중심 디자인(User-Centered Design) 접근법에서 활용되며, 디자인 과정에서 사용자의 필요와 요구를 이해하고 고려하기 위해 사용됩니다. 구성 요소 이름과 신원: 페르소나는…
페이지네이션(Pagination) 페이지네이션은 사용자가 정보나 내용의 일부분을 한 페이지 단위로 볼 수 있게 하는 사용자 인터페이스 패턴이다. 이는 대량의 정보를 효과적으로 관리하고 사용자의 이해를 돕는 데 중요한 역할을 한다.비슷하지만, 다른 사용성을 가진 요소로는 무한…
포스텔의 법칙(Postel’s Law) 포스텔의 법칙은 컴퓨터 네트워크의 설계 원칙 중 하나로, "관대하게 수신하고 엄격하게 송신하라"는 원칙을 제시합니다. 이 법칙은 1980년대에 인터넷 프로토콜의 설계자 중 한 명인 조나단 포스텔(Jonathan Postel)에 의해 제안되었습니다. 포스텔의 법칙은 네트워크 프로토콜의…
폰 레스토프 효과(Von Restorff Effect) 폰 레스토프 효과는 동일한 요소들 중에서 눈에 띄는 요소가 기억에 더 오래 남는 현상을 말합니다. 이 효과는 사용자 경험 디자인과 인터페이스 디자인 관점에서 중요한 원리로 적용됩니다. "비슷한 사물 여러개 있으면 그중에서 가장…
푸터(Footer) 웹사이트 내에 하단 영역에 브랜드 로고부터 사이트 맵, 필수 페이지에 대한 링크, 소셜 정보, 저작권 표기, 언어 설정 등의 기능을 모아놓은 영역. 어떤 서비스인지 제공하는 규모에 따라 더 복잡할 수도 있고 간소화할…
프로그래스바 (Progress Bar) 프로그래스바는 작업의 진행 상황을 시각적으로 표시하는 UI 요소입니다. 사용자에게 작업이 완료되기까지의 예상 시간을 알려주거나, 작업의 진행 상황을 보여줌으로써 사용자의 기다림을 완화하고, 애플리케이션이 여전히 작동 중임을 보여줍니다. 사용 예시 프로그래스바는 파일 업로드, 다운로드,…
프로토타이핑 (Prototyping) 프로토타이핑은 제품이나 서비스의 초기 버전을 만들어 내는 과정입니다. 이는 디자인팀이 실제 제품과 유사한 환경에서 디자인을 테스트하고, 사용자 피드백을 수집하며, 이를 바탕으로 제품을 개선할 수 있게 해줍니다. 프로토타입은 단순히 제품의 외관을 보여주는 것이…
플로우차트 (Flowchart) 플로우차트는 일련의 작업이나 절차를 시각적으로 표현한 도표입니다. 각 단계는 일반적으로 상자로 표시되며, 상자 사이의 화살표는 단계 간의 연결성을 나타냅니다. 플로우차트는 복잡한 프로세스를 단순화하고 이해하기 쉽게 만들어, 이해를 돕고 문제 해결에 필요한 의사…
피츠의 법칙(Fitts’s Law) 피츠의 법칙은 인간의 운동능력과 움직임을 설명하는 심리학적인 원리로, 움직이는 대상의 크기와 거리가 움직임의 정확성과 속도에 영향을 미치는 관계를 제시합니다. 이 법칙은 웹 디자인, 사용자 인터페이스(UI) 디자인, 인간-컴퓨터 상호작용 등 다양한 분야에서 활용되며,…
픽셀(Pixel) 픽셀은 디지털 이미지의 기본 단위로, 그래픽 디스플레이에서 최소 단위의 색상 영역을 의미합니다. 웹 및 앱 디자인에서 픽셀은 화면에 표시되는 요소의 크기를 정의하는데 사용되는 중요한 단위입니다. 해상도를 이해할 때도 px 단위를 이해해야 하며,…
하이브리드 앱 (Hybrid App) 하이브리드 앱은 웹 애플리케이션을 네이티브 앱 셸로 둘러싼 것으로, 웹 기술(HTML, CSS, JavaScript)을 사용하여 개발하고 네이티브 웹 뷰 컴포넌트를 통해 실행됩니다. 이는 웹 애플리케이션의 접근성과 유연성을 유지하면서도, 네이티브 애플리케이션과 같은 사용자 인터페이스를…
해상도 해상도는 선명도 또는 화질이라고도 불리며, 스크린 화면에 표현된 이미지나 영상, 텍스트 등이 표현된 섬세함의 정도를 나타내는 말. 디지털에서는 이미지를 Pixel로 표현함. 해상도가 높을수록 선명하게 보이며 그만큼 용량이 커짐. 디스플레이 해상도 데스크탑, 랩탑…
햄버거 메뉴 (Hamburger Menu) 햄버거 메뉴는 세 개의 수평선으로 구성된 아이콘으로, 웹사이트나 앱의 탐색 메뉴를 표현합니다. 햄버거 메뉴 아이콘을 클릭하거나 터치하면 주요 탐색 옵션들이 드롭다운 메뉴 또는 사이드 메뉴 형태로 표시됩니다. 주로 반응형 웹에서 테블릿 혹은…
햅틱, 사운드 디자인(Sound Design) UI에서는 주로 시각적인 방식으로 전달되지만, 유저의 행동에 대해 *햅틱 기술을 활용한 진동(촉각)을 통한 피드백과 사운드 디자인(청각)을 통해 피드백을 주는 역할을 하여 더 풍부한 사용자 경험(UX)을 줄 수 있음. 주로 성공, 주의, 에러…
헤더(Header) 웹사이트 내에 상단 영역에 로고부터 내비게이션, 액션 버튼을 모아놓은 영역.회원가입, 문의하기 등 사용자에게 유도하고자 하는 CTA는 다른 메뉴와 다르게 잘 보이도록 디자인하는 것을 지향함. 헤더는 스크롤에 따라 같이 이동하거나 상단에 고정되는 방식을…
힉의 법칙 (Hick’s Law) 힉의 법칙(Hick's Law)은 선택 시간과 선택의 복잡성 간의 관계를 설명하는 법칙으로, 의사결정에 소요되는 시간은 선택지의 개수와 복잡성에 비례한다는 원칙을 말한다. 이 법칙은 사용자의 선택 과정을 효율적으로 개선하기 위해 인터페이스 디자인에 활용된다. 선택할…