어포던스 (Affordance)

개요·정의

<img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663429662740/ffcjRzrXsTCDKgX6s8aDwC/articles/1788074051604-e052515f8c87cb95.webp" alt="" data-orientation="original" data-original-src="https://d2xsxph8kpxj0f.cloudfront.net/310519663429662740/ffcjRzrXsTCDKgX6s8aDwC/articles/1788074053247-f3b0e68ef0e6301b.webp" width="600" />

© Dyson OnTrac

어포던스(Affordance)는 사람과 사물 사이에서 가능한 행동을 가리키는 개념이다. 손잡이는 잡거나 당길 수 있고, 버튼은 누를 수 있으며, 넓고 평평한 면은 물건을 올려놓거나 앉는 데 사용할 수 있다. 사람의 신체와 사물의 형태가 만났을 때 어떤 행동이 가능한지가 핵심이다.

이 개념은 심리학자 제임스 J. 깁슨이 환경과 생물 사이의 관계를 설명하면서 제시했고, 도널드 노먼이 제품과 인터페이스 디자인으로 넓히면서 디자인 분야에서 널리 알려졌다.

디자인에서는 실제로 가능한 행동뿐 아니라 사용자가 그 가능성을 얼마나 쉽게 알아차리는지도 중요하다. 화면 속 버튼에는 물리적인 돌출부가 없지만 배경색과 테두리, 위치를 달리하면 누를 수 있는 요소라는 점을 알 수 있다. 노먼은 이런 단서를 설명하면서 지각된 어포던스와 시그니파이어의 역할을 구분했다.

특징

어포던스가 분명한 제품은 설명을 읽기 전에 기본적인 사용 방법을 짐작할 수 있다. 둥근 다이얼은 돌리는 동작과 잘 맞고, 길게 튀어나온 손잡이는 잡거나 당기는 행동으로 이어지기 쉽다. 형태와 가능한 동작이 자연스럽게 맞물리는 것이다.

서로 다른 기능에는 서로 다른 형태를 주는 방법도 있다. 볼륨 조절과 곡 넘기기를 같은 모양의 버튼 여러 개에 배정하면 사용자는 위치를 외워야 한다. 하나는 돌리고 다른 하나는 좌우로 미는 구조로 만들면 손끝에서도 기능을 구분하기 쉬워진다.

디지털 화면에서는 물리적인 깊이가 없기 때문에 시각적인 단서를 더 적극적으로 사용한다. 입력창에 배경을 넣고 드롭다운에 테두리를 주거나, 누를 수 있는 요소를 일반 글자와 다른 형태로 만들면 조작할 수 있는 대상을 더 쉽게 찾을 수 있다.

어포던스와 피드백은 서로 다른 단계에서 작동한다. 어포던스가 행동하기 전에 무엇을 할 수 있는지 짐작하게 한다면, 피드백은 행동한 뒤 그 입력이 제대로 전달됐는지 알려준다. 다이얼을 돌릴 수 있다는 형태와 실제로 돌렸을 때 값이 변하는 화면이 함께 있어야 조작 과정이 자연스럽게 이어진다.

사례

낫싱 헤드폰 (1)

낫싱은 2025년 출시한 헤드폰 (1)(Headphone (1))에서 터치패드 대신 서로 다른 형태의 물리 컨트롤을 사용했다. 롤러(Roller)는 손가락으로 굴리는 형태이고, 패들(Paddle)은 좌우로 미는 구조다. 별도의 버튼도 따로 둔다.

롤러를 굴리면 볼륨이 바뀌고 누르면 재생과 일시정지가 작동한다. 패들을 좌우로 밀면 이전 곡과 다음 곡으로 이동하고, 길게 밀면 재생 위치를 빠르게 움직인다. 기능마다 손가락이 하는 동작 자체를 다르게 만들어 위치와 기능을 외워야 하는 부담을 줄였다.

헤드폰처럼 눈으로 컨트롤을 확인하기 어려운 제품에서 형태와 움직임만으로 기능을 구분했다는 점에서 물리적 어포던스를 설명하기 좋은 최근 사례다.

다이슨 온트랙

2024년 출시된 다이슨 온트랙(Dyson OnTrac)은 오른쪽 이어컵 뒤쪽에 작은 조이스틱을 배치했다. 조이스틱을 위아래로 밀면 볼륨이 바뀌고, 좌우로 움직이면 곡을 넘기거나 되돌린다. 가운데를 누르면 재생과 일시정지가 작동한다.

하나의 조작부가 실제 움직임의 방향과 기능을 연결한다는 점이 특징이다. 볼륨을 높일 때 위로 밀고 낮출 때 아래로 내리는 방식은 화면을 보지 않아도 움직임과 결과를 연결하기 쉽다.

노이즈 캔슬링은 조이스틱에 다시 넣지 않고 이어컵을 두 번 두드리는 별도 행동으로 분리했다. 하나의 컨트롤에 모든 기능을 몰아넣기보다 움직임의 종류를 나눠 기능을 구분한 사례다.

피그마 UI3

피그마는 2024년 공개한 UI3에서 기존 인터페이스의 조작 단서를 다시 손봤다. 기능이 계속 늘어나면서 아이콘만으로 무엇을 누르고 어떻게 조작해야 하는지 파악하기 어려워진 문제가 있었기 때문이다.

UI3에서는 입력 영역에 배경을 넣고 드롭다운에 테두리를 추가했으며 모서리 형태도 이전보다 분명하게 구분했다. 아이콘만으로 기능을 파악하기 어려운 사용자를 위해 필요한 경우 라벨도 표시할 수 있도록 했다.

실제 물리 버튼이 없는 전문 소프트웨어에서도 어느 부분이 입력창이고, 어느 요소를 누르면 메뉴가 열리며, 무엇을 조절할 수 있는지를 시각적인 형태로 알려줘야 한다. 디지털 인터페이스에서 지각된 어포던스가 어떻게 만들어지는지 보여주는 사례다.

```