마이크로인터랙션 (Microinteractions) 마이크로인터랙션은 사용자와 디자인 요소 간의 작은 상호작용을 말합니다. 이는 사용자의 행동에 반응하거나 시스템 상태를 나타내는 방법 등에 사용됩니다. 마이크로인터랙션은 사용자 경험(UX)을 높이는 데 중요한 역할을 합니다. 예시 버튼을 클릭하면 색상이 변하거나, 애니메이션이…
탭바(Tab Bar) 탭바는 Apple의 iOS 사용자 인터페이스 요소 중 하나로, 사용자가 앱의 다른 부분 사이를 쉽게 전환할 수 있도록 도와주는 하단 바입니다. 주로 앱의 주요 기능이나 화면 사이를 이동하는데 사용됩니다. 사용 예시 iPhone의 전화…
프로토타이핑 (Prototyping) 프로토타이핑은 제품이나 서비스의 초기 버전을 만들어 내는 과정입니다. 이는 디자인팀이 실제 제품과 유사한 환경에서 디자인을 테스트하고, 사용자 피드백을 수집하며, 이를 바탕으로 제품을 개선할 수 있게 해줍니다. 프로토타입은 단순히 제품의 외관을 보여주는 것이…
Alt 속성 (Alt Attribute) Alt 속성, 또는 대체 텍스트(Alternative Text)는 HTML에서 이미지 태그(<img>)에 사용되는 속성입니다. 이 속성은 이미지를 표시할 수 없거나, 이미지를 인식할 수 없는 사용자를 위한 텍스트 정보를 제공합니다. Alt 속성은 웹 접근성이 중요한 부분…
오프라인 상태 (Offline States) 오프라인 상태는 인터넷 연결이 불안정하거나 없을 때 앱이나 웹사이트가 어떻게 동작하는지를 나타냅니다. 사용자가 오프라인 상태에서 앱이나 웹사이트를 사용하려고 할 때, 그들에게 명확한 피드백을 제공하여 현재의 연결 상태를 알릴 수 있어야 합니다. 사용…
햄버거 메뉴 (Hamburger Menu) 햄버거 메뉴는 세 개의 수평선으로 구성된 아이콘으로, 웹사이트나 앱의 탐색 메뉴를 표현합니다. 햄버거 메뉴 아이콘을 클릭하거나 터치하면 주요 탐색 옵션들이 드롭다운 메뉴 또는 사이드 메뉴 형태로 표시됩니다. 주로 반응형 웹에서 테블릿 혹은…
모달 (Modal) 모달은 사용자의 주의를 특정 작업 또는 내용에 집중시키기 위해 주로 사용되는 대화형 UI 요소입니다. 사용자가 모달 내의 정보를 주시하거나 요구되는 작업을 완료하도록 강제하기도 합니다. 웹 브라우저에서 자체적으로 제공하는 모달 얼럿도 있지만, 경우에…
프로그래스바 (Progress Bar) 프로그래스바는 작업의 진행 상황을 시각적으로 표시하는 UI 요소입니다. 사용자에게 작업이 완료되기까지의 예상 시간을 알려주거나, 작업의 진행 상황을 보여줌으로써 사용자의 기다림을 완화하고, 애플리케이션이 여전히 작동 중임을 보여줍니다. 사용 예시 프로그래스바는 파일 업로드, 다운로드,…
픽셀(Pixel) 픽셀은 디지털 이미지의 기본 단위로, 그래픽 디스플레이에서 최소 단위의 색상 영역을 의미합니다. 웹 및 앱 디자인에서 픽셀은 화면에 표시되는 요소의 크기를 정의하는데 사용되는 중요한 단위입니다. 해상도를 이해할 때도 px 단위를 이해해야 하며,…
CTA(Call To Action) CTA는 '호출 행동'을 의미하며, 웹사이트나 앱, 광고 등에서 사용자에게 특정 행동을 취하도록 유도하는 설계 기술입니다. CTA는 보통 버튼 또는 링크의 형태를 띠며, "구매하기", "더 알아보기", "가입하기"와 같은 강력한 동사를 사용하여 사용자의 의사결정을…
적응형 웹(Adaptive Web) 적응형 웹은 웹사이트를 다양한 화면 크기와 장치에 맞게 최적화하는 웹 디자인 접근법입니다. 적응형 웹 디자인은 다양한 미리 정의된 화면 크기 (일반적으로 스마트폰, 태블릿, 데스크탑 등의 기기를 대표하는)에 대해 개별적으로 최적화된 레이아웃을 생성합니다.…
모바일 퍼스트(Mobile First) 모바일 퍼스트는 웹사이트나 애플리케이션을 설계할 때, 먼저 모바일 환경을 고려하고 그 이후에 더 큰 화면(태블릿, 데스크탑 등)을 위한 설계를 확장하는 방법론입니다. 이는 현대의 인터넷 사용 패턴에서 모바일 디바이스의 중요성이 계속해서 증가하고 있음을…
캐로셀 (Carousel) 회전목마를 Carousel이라 하는데, 떠올려보면 한 방향으로 회전하는 것이죠. 캐로셀은 여러 콘텐츠를 한 영역 안에서 회전하며 보여주는 UI 패턴입니다.주로 이미지, 카드, 또는 다른 UI 요소를 표시하는 데 사용되며, 사용자가 앱 내에서 콘텐츠를 탐색하고,…
게슈탈트 이론(Gestalt Theory) 게슈탈트 이론은 인식과 인식 심리학에 관한 이론으로, 전체가 부분의 합보다 더 큰 의미를 갖는다는 개념을 강조합니다. 이 이론은 UX/UI 디자인 분야에서 중요한 원리로 활용되며, 사용자의 인식과 인지를 이해하고 설계에 적용하는 데 도움이…
콘택트 폼(Contact Form) 콘택트 폼(Contact Form)은 웹사이트나 웹 애플리케이션에서 사용자가 메시지를 보낼 수 있는 폼입니다. 사용자는 폼을 통해 이름, 이메일, 전화번호, 메시지 내용 등과 같은 정보를 입력하여 웹사이트의 관리자나 소유자에게 메시지를 전송할 수 있습니다. 콘택트…
슬라이더(Slider) 슬라이더(Slider)는 사용자가 값을 선택하거나 조절할 수 있는 가로 또는 세로 방향의 바 형태를 가지는 컴포넌트입니다. 슬라이더를 사용하면 사용자가 범위 내에서 값을 선택하거나 설정할 수 있습니다.웹에서는 Range 타입의 인풋으로 사용됩니다. 사용 예시: 볼륨…
툴팁(Tooltip) 툴팁(Tooltip)은 웹 애플리케이션 또는 웹사이트에서 사용되는 사용자 인터페이스 요소로, 마우스를 해당 요소 위로 이동할 때 나타나는 작은 정보나 설명을 제공하는 도구입니다. 주로 추가 설명이 필요한 요소에 사용되며, 사용자가 요소에 대한 추가 정보를…
라디오 버튼(Radio Button) 라디오 버튼(Radio Button)은 웹 개발에서 사용되는 입력 요소 중 하나로, 사용자가 여러 옵션 중 하나만 선택할 수 있는 버튼을 의미합니다. 라디오 버튼은 주로 선택지가 여러 개 있을 때, 사용자가 단 하나의 옵션만…
체크박스(Checkbox) 체크박스(Checkbox)는 웹 개발에서 사용되는 입력 요소 중 하나로, 사용자가 하나 이상의 옵션을 선택할 수 있는 상자를 의미합니다. 체크박스는 주로 사용자가 동의, 선택, 허용 등의 선택 사항을 선택하거나 해제할 때 사용됩니다. 사용 예시…
인풋 (Input) 인풋(Input)은 웹 개발에서 사용되는 요소로, 사용자로부터 정보를 입력받을 수 있는 상자나 필드를 의미합니다. 사용자가 텍스트, 숫자, 선택 옵션 등을 입력하거나 선택할 수 있도록 도와주는 역할을 합니다. 인풋 종류 텍스트 인풋(Text Input): 사용자가…