본문 바로가기

UI30

레이아웃 & 디자인 관련 UI 용어 레이아웃 & 디자인 관련 요소 디바이더 (Divider)설명: 콘텐츠나 섹션을 구분하기 위해 사용하는 수평 또는 수직 선입니다. 시각적으로 공간을 나누어주는 역할을 합니다.사용 예시: 섹션 간의 구분을 위해 텍스트 블록이나 이미지 사이에 사용특징: 페이지의 시각적 구조를 명확하게 하고, 내용의 흐름을 돕는 역할을 합니다. 카드 (Card)설명: 정보를 작은 구획으로 나누어 구성된 블록형 요소입니다. 이미지를 포함할 수 있으며, 클릭 가능한 형태로 정보를 전달합니다.사용 예시: 상품, 블로그 포스트, 사용자 프로필 등의 정보를 담는 카드특징: 정보나 콘텐츠를 구조적으로 배치할 수 있어, 사용자가 쉽게 이해하고 액션을 취할 수 있도록 도와줍니다. 레이어 (Layer)설명: 다른 콘텐츠 위에 겹쳐서 나타나는 .. 2025. 2. 15.
로딩 & 상태 표시 관련 UI용어 스피너 (Spinner)설명: 로딩 상태를 표시하는 원형 애니메이션입니다. 사용자가 기다리고 있다는 것을 시각적으로 알리기 위해 사용됩니다.사용 예시: 페이지가 로드되는 동안 나타나는 원형 스피너특징: 계속 회전하는 애니메이션으로 로딩 중임을 직관적으로 보여주며, 로딩이 진행 중임을 사용자에게 전달합니다.  프로그래스 인디케이터 (Progress Indicator)설명: 진행 상황을 막대 형태로 시각적으로 표현하는 요소입니다. 특정 작업이나 로딩이 어느 정도 진행되었는지를 사용자에게 알려줍니다.사용 예시: 파일 업로드 진행 상황을 표시하는 막대특징: 진행 상황을 시각적으로 표시하여 사용자에게 언제 작업이 완료될지 예측할 수 있게 해줍니다.   로딩 인디케이터 (Loading Indicator)설명: 페이.. 2025. 2. 14.
팝업 & 알림 관련 UI 용어 🔹 팝업 & 알림 관련 요소툴팁 (Tooltip)설명: 사용자가 특정 요소에 마우스를 올리거나 포커스를 맞추면 해당 요소에 대한 간단한 설명이나 힌트를 표시하는 작은 팝업입니다.사용 예시: 버튼 위에 마우스를 올리면 버튼의 기능을 설명하는 텍스트가 나타남특징: 마우스를 올리거나 클릭할 때 표시되며, 간단한 정보나 힌트를 제공하여 사용자의 이해를 돕습니다.대화상자 (Dialog Box)설명: 사용자와의 상호작용을 요구하는 팝업으로, 메시지나 확인을 받기 위한 창입니다. 사용자가 선택하거나 응답해야 합니다.사용 예시: "정말 삭제하시겠습니까?"와 같은 확인 대화상자특징: 중요하거나 긴급한 알림을 전달할 때 사용되며, 보통 사용자의 응답을 요구합니다.라이트박스 (Lightbox)설명: 이미지를 확대하여 보여.. 2025. 2. 14.
네비게이션&메뉴관련 UI 용어 🔹 네비게이션 & 메뉴 관련 요소헤더 (Header)설명: 웹사이트나 애플리케이션 상단에 위치한 영역으로, 주로 로고, 네비게이션 메뉴, 검색창 등이 포함됩니다. 사용자에게 사이트의 주요 정보를 전달하는 첫 번째 위치에요.사용 예시: 웹사이트의 로고, 사이트명, 주요 메뉴 항목 등특징: 방문자가 사이트를 인식할 수 있게 돕는 주요 요소로, 보통 사이트의 상단에 고정되어 있습니다.푸터 (Footer)설명: 페이지 하단에 위치한 영역으로, 저작권 정보, 개인정보 처리방침, 연락처, 사이트 맵 등이 포함됩니다. 페이지 끝에서 자주 찾을 수 있는 요소에요.사용 예시: 사이트 맵, 저작권 정보, 외부 링크특징: 페이지를 끝낼 때 중요한 링크나 정보를 제공하여, 페이지의 하단에서 추가적인 탐색을 돕습니다.GNB .. 2025. 2. 14.
버튼 일관성: 작은 차이가 UX를 만든다 버튼 일관성: 작은 차이가 UX를 만든다버튼 디자인이 페이지마다 다르다면 사용자는 어떤 느낌을 받을까요?"이 버튼이 진짜 중요한 버튼인가?""아까랑 색이 다른데, 같은 기능 맞나?""뭐가 뭔지 헷갈려서 쓰기 어렵네..."이처럼 버튼의 디자인과 동작이 일관되지 않으면 사용자는 혼란을 느끼고, UX는 나빠질 수밖에 없어요. 그래서 오늘은 **버튼 일관성(Button Consistency)**이 왜 중요한지, 그리고 어떻게 적용하면 좋은지 알아볼게요!1. 버튼 일관성이 왜 중요할까?버튼은 단순한 디자인 요소가 아니라, 사용자가 서비스를 이용하는 행동의 출발점이에요. 일관성이 없으면 사용자 경험이 단절되고, 서비스에 대한 신뢰도가 낮아질 수 있어요.✅ 버튼 일관성이 없으면?같은 기능인데 페이지마다 다른 디자인 .. 2025. 2. 13.
버튼 가시성: 눈에 띄는 버튼이 더 좋은 UX를 만든다! 버튼 가시성: 눈에 띄는 버튼이 더 좋은 UX를 만든다! 버튼이 눈에 보이지 않는다면? 사용자는 클릭하고 싶어도 클릭할 수 없어요.UI에서 버튼은 단순한 요소가 아니라 사용자의 행동을 유도하는 핵심 도구예요.그래서 오늘은 버튼의 가시성을 높이는 방법에 대해 이야기해볼게요!1. 버튼 가시성이 중요한 이유버튼이 눈에 잘 띄어야 사용자가 원하는 행동을 빠르게 할 수 있어요. 가시성이 낮으면?❌ 찾기 어려움 → 사용자가 어디를 클릭해야 할지 몰라 헤맴❌ 사용 흐름 단절 → 중요한 버튼을 놓쳐서 이탈 가능성 증가❌ 접근성 저하 → 특정 사용자(시력이 약한 사용자 등)에게 불편함 초래반대로 버튼이 눈에 잘 띄면?✅ 빠른 인식 → 원하는 기능을 바로 찾을 수 있음✅ 높은 전환율 → 주요 버튼(예: 구매하기, 회원가입.. 2025. 2. 13.

티스토리툴바