UX 디자인에서 어포던스(Affordance)란?

알아야 할 UX 용어

0. 들어가며

대부분의 프로덕트 개발팀에는 '프로덕트 원칙'이라는 게 있다. 프로덕트 원칙은 쉽게 말해 우리가 프로덕트를 만들 때 함께 지키기로 약속한 기본 규칙들이다.

개발자, 기획자, 디자이너 등 각자 다른 배경을 가진 사람들이 모여 일하다 보면 같은 문제를 바라보는 시각도 제각각이다. 때문에 프로젝트를 진행하다 보면 크고 작은 수많은 결정을 내려야 하는 순간들이 찾아온다. 특히나 UX/UI 디자인 작업에서는 개인의 주관적인 취향이나 판단이 들어갈 여지가 더 많기 때문에 이견이 가장 많이 발생하는 부분 중 하나다.

이때 프로덕트 원칙은 객관적이고 합리적인 사고를 위한 나침반과 같은 역할을 한다. 프로젝트 초기 팀원들과 함께 만든 이 직관적인 원칙들 덕분에, 우리는 "이게 내 취향이라서"가 아니라 "이게 우리의 원칙에 부합하니까"라는 관점으로 생각을 전환하고 통합할 수 있게끔 한다.

서론이 길었다. 나도 서비스 기획 업무를 하다 보면 제 사고의 흐름에만 빠져들 때가 종종 있다. 그럴 때마다 나는 우리 팀의 프로덕트 원칙을 한 번씩 다시 들여다보면서 생각의 방향을 바로잡으려고 노력한다. 우리 프로덕트 원칙에는 직관성이라든지, 개인화와 최적화가 충돌할 때 어떤 걸 우선시할지 등등 내가 팀에 합류하기전에 작성된 다양한 내용들이 담겨 있다. 그중에서도 '어포던스(Affordance)'에 관한 파트가 있었는데, 나에게는 생소한 개념이었다. 처음 봤을 때 "이게 뭐지?" 하는 생각이 들어서 바로 찾아보게 되었다.

1. 어포던스(Affordance)란?

어포던스는 사용자와 사물 사이에서 실제로 가능한 행동을 뜻한다. 예를 들어, 어른에게는 ‘당길 수 있는’ 손잡이가 손잡이에 닿을 수 없는 유아에게는 그 문이 ‘열 수 있음’을 어포드(afford : ~을 제공하다, 가능하게 하다) 하지 않는 것이다. 이처럼 어포던스는 사물 자체의 속성이 아니라 사용자와 사물 간의 관계에서 정의된다.

1977년 심리학자 제임스 깁슨이 제시한 개념으로 사물과 상호작용할 수 있는 모든 행동 가능성을 ‘어포던스’라고 하였다. 이후 1988년 도널드 노먼은 이를 ‘지각 가능한 행동 가능성’으로 재정의해 디자인 분야에 도입했고, 사용자가 실제로 시도해 볼 수 있다고 인식하는 행동을 중시했다.

궁극적으로 웹, 모바일, 기타 디바이스 등등 어떤 제품을 만들든 목표 사용자의 신체적·인지적 능력에 맞춰서 그들이 자연스럽게 “이렇게 쓰면 되겠구나” 하고 이해할 수 있도록 제품이 제공해야 할 어포던스를 명확히 설계해야 한다고 한다.

2. 기표(Signifier)란 무엇인가?

도널드 노먼은 지각 가능한 행동 가능성 즉 ‘지각된 어포던스’의 개념을 제시하며, 다지인에서는 용어 사용 또한 어포던스가 아닌 ‘기표’라고 명칭 해야 한다고 했다. 기표는 식별될 수 있는 표시나 소리 등, 사람이 적절한 행동을 할 수 있도록 안내하는 지각 가능한 모든 지표를 의미한다.

어떤 기표는 세상에 놓인 표지판(signs), 라벨(labels), 그림(drawings) 일 수 있고, 문에 붙은 ‘밀기(PUSH)’, ‘당기기(PULL)’, ‘출구(EXIT)’ 같은 표지판이 기표가 될 수 있다. 또 다른 예시로는 화살표(arrows)나 다이어그램(diagrams)은 사용자가 무엇을 해야 할지, 어떤 방향으로 제스처를 취해야 할지를 알려 준다.

그렇다면, 기표와 어포던스의 관계는 어떨까?

어포던스는 ‘무엇이 가능한가’(행동의 가능성)를 결정한다. 기표는 ‘어디에서 어떻게 해야 하는가’를 알려준다. 예컨대, 화면 전체는 터치가 가능한 어포던스를 갖지만, 기표를 통해 “여기를 터치하세요”라고 알려 주어야 실제로 사용자가 원하는 동작을 수행할 수 있는 것이다.

3. 어포던스, 지각된 어포던스, 기표 개념적 차이 정리

출처 : www.interaction-design.org

1. 어포던스(Affordance)

정의: 대상(object)과 행위자(agent) 간에 실제로 가능한 행동의 가능성.

특징
- 존재 조건 : 물리적·기능적 속성과 사용자의 능력이 모두 갖춰져야 한다.
- 지각 여부 : 반드시 지각되거나 인지될 필요는 없으며, 사용자가 모르는 어포던스도 존재할 수 있다.

예시
- 의자는 ‘앉기’, ‘올라타기’, ‘던지기’ 등을 어포드(afford)함.
- 문 손잡이는 ‘당기기’를, 평판 손잡이는 ‘밀기’를 어포드함.

2. 지각된 어포던스(Perceived Affordance)

정의: 사용자가 “이렇게 할 수 있겠다”라고 지각하는 행동 가능성.

특징
- 사용자 관점 : 실제 가능한 어포던스 중에서, 디자인·환경·경험 등에 의해 사용자가 인지한 것만 포함.
- 디자이너 제어 : GUI·제품 표면·레이블·피드백 등을 통해 의도적으로 조작 가능.

예시
- 비활성화된 버튼은 실제로는 클릭 가능하더라도 회색으로 표현되어 “눌러지지 않는다”라고 지각시킴.
- 터치스크린의 아이콘에 음영과 경계선을 넣어 “여기를 눌러라”는 신호를 줌.

3. 기표(Signifier)

정의: 사용자가 지각된 어포던스를 발견하도록 돕는 시각·청각·촉각적 단서(signal).

특징
- 역할 : “어디에서, 어떻게 상호작용해야 하는지”를 명확히 알림.
- 독립성 : 어포던스 없이도 기표만 존재할 수 있고, 반대로 어포던스는 기표 없이 숨겨질 수도 있음.

예시
- “밀기(PUSH)” 스티커, 화살표 아이콘, 버튼 호버 시 변화하는 애니메이션
- 진동·사운드·툴팁·말풍선, 온보딩 가이드 마크 등

정리해 보면, 어포던스는 “무엇이 가능한가?”에 대한 답으로, 사물이나 인터페이스가 제공하는 실제 행동 가능성을 뜻한다. 지각된 어포던스는 “사용자가 무엇을 할 수 있다고 여기는가?”를 묻는 개념으로, 사용자가 행동 가능성을 어떻게 인식하느냐에 초점을 맞춘다. 기표는 “어디에서 어떻게 해야 한다고 알려 주는가?”를 설명하는 신호로, 사용자가 적절한 행동을 발견하고 실행하도록 안내하는 역할을 한다.

이러한 개념을 UI/UX 설계에 도입해 보면, 먼저 실제 어포던스가 충분히 구현되도록 기능적 조건을 마련한다. 그다음 사용자가 이 어포던스를 직관적으로 인식할 수 있도록 인터페이스 요소를 배치하고 시각적 단서를 제공한다. 그리고 마지막으로 기표를 적절히 활용해 사용자가 필요한 행동을 쉽고 빠르게 찾아 수행할 수 있도록 안내함으로써 제품의 사용성을 보장하는 것이다.

4. 마치며

UI/UX 영역을 파고들수록 그 범위가 정말 방대하고, 맥락은 생각보다 훨씬 깊다는 사실을 깨닫는다.

특히 이번 글을 준비하면서 나는 우리 서비스의 ‘공간 홈’ 기능을 수정했던 순간이 다시금 떠올랐다. 좌측 사이드 바 최상단에 워크스페이스 썸네일을 배치함으로써 사용자는 썸네일을 보고 지금 어느 공간에 있는지 자연스럽게 인지하고 필요할 때 홈으로 이동할 것이라는 전제를 굳게 믿고 있었다.

이에 디자인 리뷰 미팅에서 썸네일 하단에 위치한 공간 홈이라는 레이블이 기존 디자인에서 고려되지 않았던 부분이라는 이야기를 듣자 “음, 원래 디자인 파트에서 고려한 부분이 아니었다니 그럼 그냥 제거해도 사용성에 큰 문제가 없겠다”라고 안일하게 생각하며 제거해도 될 것 같다고 의견을 수용했다.

그리고 며칠이 지났다. 온보딩 직후 각종 화면에서 헤매는 사용자의 흔적이 MS Clarity 세션 레코드에 고스란히 찍혔다. 반복되는 서비스 헤더 로고 클릭과 엉뚱한 경로 이탈(공간 홈이 아닌 다른 서비스 영역)은 썸네일이 전달해야 하는 메시지가 완전히 숨겨져 있었다는 증거였다. 썸네일만으로는 ‘홈으로 이동할 수 있다’는 가능성이 드러나지 않았으니, 이는 지각되지 못한 숨은 어포던스였던 셈이다. 썸네일만으로 미니멀리즘을 좇았던 디자인은 사실상 미스리드를 유발했던 것이다.

부리나케 다시 개발자에게 원래대로 썸네일 아래에 ‘공간 홈’이라는 글자를 다시 덧붙여달라고 요청했다. 온보딩 경험은 되돌릴 수 없기에, 첫 방문자가 느꼈을 당혹감과 그로 인한 이탈 가능성을 떠올리니 마음이 무거웠다. 동시에 내가 무심코 했던 결정 하나가 우리 서비스의 첫인상을 불편함으로 전달했을 수도 있겠다는 생각이 들어 많은 책임감을 느끼게 하였다.

끝으로 지난 공간 홈 작업과 오늘의 어포던스 학습 경험을 통해 우리 서비스를 바라볼 때 “내가 처음 쓰는 사용자라면 이해할 수 있을까?”라는 초심을 되찾을 수 있었다. 앞으로는 아이콘, 텍스트, 테두리 색상 등등 사용자에게는 작은 힌트 하나가 서비스 사용성을 바꿀 수 있음을 기억하고 더 나은 서비스를 만들기 위해 노력해야겠다.

참고자료:

https://www.interaction-design.org/literature/topics/affordances

https://careerfoundry.com/en/blog/ux-design/affordances-ux-design