UX 디자인의 핵심, 어포던스(affordance) 알아보기

오늘은 오랜만에 UX 디자인에 대해서 얘기해 보려고 합니다.

그중에서도 UX 디자인의 핵심 개념 중에 하나이자 사용자 경험을 향상시킬 수 있는 중요한 요소인 ‘어포던스(affordance)’에 대해서 다뤄볼까 합니다.

어포던스란 무엇일까요? 간단히 말해서 사물의 특성이 어떻게 사용되어야 하는지를 암시하는 것입니다. 사용자가 별도의 설명 없이도 직관적으로 어떻게 상호작용해야 할지 알 수 있게 하는 디자인 특성이라고 볼 수 있습니다.

이 개념은 원래 심리학자 제임스 J. 깁슨이 소개했는에요. 나중에 도널드 노먼이 HCI(Human-Computre Interaction)와 UX 디자인 분야에 적용했습니다.

어포던스는 크게 두 가지로 나뉩니다.

UX 디자인에서는 주로 지각된 어포던스에 초점을 맞춥니다. 이는 사용자가 어떻게 인터페이스와 상호작용할 수 있는지를 시각적으로 암시하는 것이죠.

어포던스의 주요 특징은 다음과 같습니다.

그렇다면 실제로 어포던스는 어떻게 적용될까요? 몇 가지 구체적인 예시를 통해서 살펴보겠습니다.

버튼 디자인과 링크 스타일

입체감 있는 버튼은 ‘누를 수 있음’을 암시합니다. 또한 마우스를 올렸을 때 색상이 변하는 호버 효과는 ‘클릭 가능함’을 나타내고요.

위의 이미지는 네이버 홈페이지 나오는 언론사 리스트입니다. 각 언론사 로고에 마우스를 올리면 구독, 기사보기 등의 링크가 보입니다.

또한 hover 시 보이는 구독, 기사보기 위에 마우스를 올리면 밑줄이 나오면서 ‘클릭 가능한 링크’로 인식하게 됩니다.

텍스트 상자 모양은 사용자에게 여기에 텍스트를 입력할 수 있음을 알립니다.

위의 이미지는 엔씨온의 서비스 견적 문의 폼입니다. 입력 필드는 보통 필드의 제목이나 부연 설명이 함께 나타나고 사용자가 적합한 정보를 입력할 수 있도록 유도합니다.

주로 모바일 디자인에서 활용되는 햄버거 메뉴라고 불리는 세 개의 가로선은 ‘클릭하면 메뉴가 펼쳐진다’라는 것을 암시합니다.

위 이미지에서는 파이어폭스 웹브라우저에 있는 햄버거 메뉴를 클릭하는 모습입니다. 사용자의 입장에서 햄버거 메뉴가 있다면 당연히 클릭을 해보고 싶어집니다.

일관성을 유지해야 합니다. 유사한 기능의 경우 유사한 시각적 표현을 사용합니다.
관습을 활용하세요. 사용자가 익숙한 디자인 패턴을 활용해야 합니다.
사용자 행동에 대한 즉각적인 반응을 보여줍니다. 예를 들어 입력 필드에 필수적인 데이터를 입력하지 않은 경우 프로세스를 멈추고 경고를 주는 방식입니다.
단순화해야 합니다. 불필요한 시각적 요소를 제거해서 핵심 기능에 집중해야 직관성이 올라갑니다.