어포던스(Affordance) UI는 사용자가 UI 요소의 사용 방법을 직관적으로 이해할 수 있도록 설계된 인터페이스를 의미합니다. 이 개념은 심리학자 제임스 깁슨(James Gibson)이 제안한 '어포던스'에서 비롯되었으며, 이는 환경이 특정 행동을 유도하는 특성을 말합니다. UI 디자인에서는 사용자가 요소의 기능이나 작동 방식을 직관적으로 알 수 있게 하는 디자인을 강조합니다. Affordance UI
어포던스 UI 사용사례
1. 버튼 디자인
Raised Buttons (입체 버튼): 화면에 약간 돌출된 디자인의 버튼은 누를 수 있다는 느낌을 줍니다. 그림자가 있는 경우 특히나 이 효과가 강화됩니다.
사례: iOS와 Android의 기본 버튼 디자인이 입체적으로 되어 있어, 사용자가 이 요소를 누를 수 있다고 인식하게 합니다.
2. 스크롤바
스크롤바: 화면의 우측이나 하단에 있는 막대 형태의 스크롤바는 사용자가 화면을 더 위나 아래로 이동할 수 있다는 신호를 줍니다.
사례: 웹 브라우저의 스크롤바는 사용자가 페이지의 다른 부분을 보기 위해 스크롤할 수 있음을 직관적으로 알려줍니다.
3. 입력 필드
텍스트 필드: 사각형 안에 깜박이는 커서가 있는 빈 필드는 사용자가 여기에 텍스트를 입력할 수 있음을 암시합니다.
사례: 로그인 화면에서 이메일이나 비밀번호를 입력하는 텍스트 필드는 사용자가 데이터를 입력할 수 있음을 직관적으로 이해하게 합니다.
4. 슬라이더
슬라이더: 막대 위에 위치한 작은 원형 손잡이는 사용자가 이것을 드래그하여 값을 조정할 수 있음을 암시합니다.
사례: 음악 플레이어의 볼륨 조절 슬라이더는 사용자가 볼륨을 조절할 수 있음을 쉽게 이해하도록 돕습니다.
5. 카드 디자인
드래그 가능한 카드: 카드는 그 자체로 움직일 수 있거나 다른 요소와 상호작용할 수 있음을 시각적으로 표현할 수 있습니다.
사례: 트렐로(Trello)와 같은 작업 관리 도구에서 카드 UI는 사용자가 클릭하거나 드래그하여 위치를 변경할 수 있음을 암시합니다.
6. 아이콘 디자인
쓰레기통 아이콘: 쓰레기통 모양의 아이콘은 사용자가 파일이나 메시지를 삭제할 수 있음을 직관적으로 보여줍니다.
사례: Windows나 macOS의 휴지통 아이콘은 사용자가 파일을 끌어다 놓으면 삭제된다는 것을 쉽게 이해하게 합니다.
7. 탭 네비게이션
탭 형태의 메뉴: 물리적인 탭 형태로 디자인된 메뉴는 사용자가 탭을 클릭하여 다른 내용을 볼 수 있음을 암시합니다.
사례: 브라우저의 탭 네비게이션은 사용자가 클릭하여 다른 페이지로 전환할 수 있다는 점을 직관적으로 알 수 있게 해줍니다.
이러한 어포던스 UI는 사용자가 별도의 설명이나 학습 없이도 UI를 이해하고 사용할 수 있게 돕는 중요한 역할을 합니다. 이를 통해 사용자 경험(UX)을 크게 향상시킬 수 있습니다.
토스(Toss)와 같은 금융 서비스 앱은 어포던스 UI를 잘 활용하여 사용자가 직관적으로 서비스를 이용할 수 있도록 설계되어 있습니다. 특히 출금 버튼과 관련된 어포던스 UI 사례를 중심으로 설명드리겠습니다.
토스 어포던스
1. 버튼 디자인
출금 버튼의 크기와 색상: 토스에서 출금 버튼은 눈에 잘 띄는 색상(예: 파란색이나 초록색)으로 디자인되어 있으며, 일반적인 다른 텍스트나 요소보다 크기가 크거나 더 두드러지게 배치되어 있습니다. 이는 사용자가 출금 버튼을 쉽게 찾고, 이 버튼이 눌릴 수 있는 요소임을 직관적으로 인식하게 만듭니다. 버튼의 입체감이나 그림자 효과는 "눌림"을 암시하여 클릭 가능성을 높입니다.
2. 아이콘 사용
출금과 관련된 직관적인 아이콘: 토스에서 출금 버튼 옆에 동반되는 아이콘(예: 은행에서 돈이 빠져나가는 이미지나 화살표 아이콘)은 사용자가 이 버튼이 출금과 관련된 기능임을 직관적으로 이해하게 합니다. 예를 들어, 돈을 상징하는 지폐 아이콘이나 화살표가 은행에서 빠져나가는 모양의 아이콘은 출금이라는 기능을 시각적으로 표현합니다.
3. 컨텍스트 기반 UI
상황에 따른 안내 메시지: 출금을 시도할 때 사용자는 자신의 계좌 잔액과 출금 가능 금액을 명확히 볼 수 있습니다. 이 정보는 출금 버튼 바로 위나 주변에 배치되어 있어, 사용자가 버튼을 클릭하기 전에 필요한 정보를 쉽게 확인할 수 있습니다. 이는 사용자가 출금 버튼을 눌렀을 때 예상되는 결과를 명확히 인지하게 도와줍니다.
4. 애니메이션 효과
버튼 눌림 시 애니메이션: 출금 버튼을 클릭했을 때, 버튼이 살짝 움푹 들어가는 애니메이션 효과가 발생합니다. 이러한 시각적 피드백은 사용자가 버튼이 실제로 눌렸고, 출금 작업이 진행되고 있다는 신호를 직관적으로 인식하게 만듭니다. 애니메이션을 통해 사용자는 자신이 올바른 동작을 수행하고 있다는 확신을 가지게 됩니다.
5. 사용자 경로 안내
다음 단계로의 명확한 이동: 출금 버튼을 눌렀을 때, 즉시 출금 과정의 다음 단계로 안내됩니다. 이 과정에서 사용자는 출금 금액 확인, 인증 절차, 출금 계좌 확인 등의 단계를 차례로 진행하게 됩니다. 각 단계는 명확한 시각적 피드백(예: 체크 표시, 다음 버튼 활성화)으로 연결되어 사용자가 자연스럽게 출금 절차를 완료할 수 있도록 돕습니다.
6. 상황별 기능 활성화
버튼 비활성화 및 활성화: 사용자가 출금 금액을 입력하지 않거나, 출금할 수 없는 상황(예: 잔액 부족)에서는 출금 버튼이 비활성화되어 회색으로 표시됩니다. 이로 인해 사용자는 출금이 불가능한 상황임을 직관적으로 이해할 수 있습니다. 금액을 입력하거나 조건이 충족되면 버튼이 활성화되면서 사용자는 출금이 가능하다는 것을 명확하게 인지하게 됩니다.
이와 같은 사례들은 사용자가 별도의 학습이나 설명 없이도 쉽게 이해하고 사용할 수 있도록 돕는 어포던스 UI의 중요한 예시입니다.
