본문 바로가기

UI디자인4

로딩 & 상태 표시 관련 UI용어 스피너 (Spinner)설명: 로딩 상태를 표시하는 원형 애니메이션입니다. 사용자가 기다리고 있다는 것을 시각적으로 알리기 위해 사용됩니다.사용 예시: 페이지가 로드되는 동안 나타나는 원형 스피너특징: 계속 회전하는 애니메이션으로 로딩 중임을 직관적으로 보여주며, 로딩이 진행 중임을 사용자에게 전달합니다.  프로그래스 인디케이터 (Progress Indicator)설명: 진행 상황을 막대 형태로 시각적으로 표현하는 요소입니다. 특정 작업이나 로딩이 어느 정도 진행되었는지를 사용자에게 알려줍니다.사용 예시: 파일 업로드 진행 상황을 표시하는 막대특징: 진행 상황을 시각적으로 표시하여 사용자에게 언제 작업이 완료될지 예측할 수 있게 해줍니다.   로딩 인디케이터 (Loading Indicator)설명: 페이.. 2025. 2. 14.
버튼 어포던스(Affordance), 제대로 이해하고 있나요? 버튼 어포던스(Affordance), 제대로 이해하고 있나요?UI 디자인에서 "버튼"은 가장 기본적인 요소지만, 생각보다 많은 사람이 버튼의 역할과 디자인 원칙을 놓치고 있어요. 오늘은 버튼의 어포던스(Affordance) 개념을 쉽게 풀어볼게요!이미지 출처1. 어포던스란?어포던스는 사용자가 "이걸 누르면 뭔가 될 것 같은데?"라는 직관적인 느낌을 받을 수 있도록 하는 디자인 원칙이에요. 쉽게 말해, 버튼이 버튼처럼 보여야 한다는 거죠.✅ 예시:네이버 로그인 버튼 👉 초록색, 둥근 사각형, 선명한 텍스트페이스북 좋아요 버튼 👉 엄지 모양 아이콘이처럼 우리는 버튼을 보고 바로 기능을 유추할 수 있어야 해요.2. 버튼 디자인의 핵심 요소버튼의 어포던스를 높이려면 다음 요소를 신경 써야 해요.🔹 시각적 .. 2025. 2. 13.
🌐⚙️ "UI 디자인의 핵심! GNB, SNB, LNB, FNB로 완성하는 효율적 네비게이션 안녕하세요! 오늘은 웹사이트 기획자라면 꼭 알아야 할 UI 용어인 GNB, LNB, SNB, FNB에 대해 자세히 알아보려고 해요.이 용어들은 웹사이트의 사용자 경험을 향상시키는 데 매우 중요한 역할을 하거든요. 그럼 하나씩 살펴볼까요? 1. GNB (Global Navigation Bar)GNB는 웹사이트의 최상단에 위치한 메뉴로, 전체 사이트에서 공통적으로 노출되는 메뉴를 의미해요.사용자가 웹사이트의 주요 카테고리로 빠르게 이동할 수 있도록 도와주는 역할을 하죠.GNB는 웹사이트의 이탈률과 전환율에 큰 영향을 미치기 때문에, 배열 순서를 충분히 고려해서 배치해야 해요.예를 들어, 가장 중요한 메뉴는 왼쪽에 배치하고, 덜 중요한 메뉴는 오른쪽에 배치하는 것이 좋답니다.이미지 출처2. LNB (Local.. 2025. 2. 8.
버튼 상태값 완벽 정리!! UI 디자인에서 버튼은 사용자의 상호작용을 이끌어내는 중요한 요소예요. 버튼의 상태값을 이해하는 것은 성공적인 UI 디자인에 있어서 필수적이랍니다. 오늘은 버튼의 다양한 상태값을 정리해보려고 해요. 크게 총 다섯 가지 상태값이 있어요.버튼의 상태값은 사용자가 버튼과 상호작용할 때 버튼이 어떻게 반응하는지를 나타내는 지표예요. 이 상태들은 사용자가 현재 버튼이 어떤 기능을 하는지 즉각적으로 알 수 있게 도와줍니다. 버튼 상태는 크게 다음과 같은 다섯 가지로 나눌 수 있어요.Enabled : 상호작용이 가능한 상태Disabled : (어떤 이유로든) 동작할 수 없는 비활성 상태Hover : 마우스 또는 포인터가 올려진 상태Focused : 키보드 또는 음성 등의 입력을 통해 강조된 상태Pressed : 마우.. 2025. 2. 8.

티스토리툴바