Advertisement
  1. Web Design
  2. Glossary
Webdesign

웹 디자인 용어: "어포던스(Affordance)"란?

by
Length:ShortLanguages:

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

"어포던스"는 웹 디자인 세계에서 자주 듣게 될 용어입니다. 이 용어는 Tuts+의 튜토리얼에서 일상적으로 보입니다. 그런 이유로 이 글에서는 용어에 관해 생기는 불확실함을 말끔히 씻어내도록 정의를 내려보겠습니다.

일반적인 정의

가끔 어포던스 주위에서 조금 혼돈이 생깁니다. 자, 세 가지의 중요한 관련 용어를 살펴봅시다. 

어포던스

1970년대로 되돌아가 제임스 J 깁슨에 의해 최초로 정의된 어포던스는 물체와 개인 사이에 가능한 액션입니다.  손잡이가 고전적으로 사용되는 예제 중 하나이죠. 이 손잡이는 돌리는(twisting) 동작을 유도합니다. 개인이 그 동작의 가능성을 알아채느냐 여부는 상관이 없습니다. 어포던스는 여전히 존재하니까요.

인지되는 어포던스

우리가 요즘에 자주 사용하는 이 용어는 도널드 노먼의 책 The Design of Everyday Things ("The Psychology of Everyday Things"로 처음에 출간됨)에서 주류가 되었으며, 깁슨과는 약간 상충합니다. 노먼은 어포던스에서 개념적인 아이디어(conceptual idea)을 취했고 거기에 "사람의 해석"을 가미했으며, 그것이 그가 말하는 "인지되는 어포던스(perceived affordance)"입니다.

손잡이로 돌아가 보죠. 손잡이는 하나의 물체로 그 형태는 사용자에게 손잡이를 활용하는 방법을 전달합니다. 디자인이 효과적으로 되었다면, 사용자는 누를지, 당길지, 돌릴지 등을 직관적으로 알 것입니다.

노먼은 어포던스가 실제로 가능한 동작과 그 가능성을 알기 쉽게 인지하는 것이 조화를 이루어야 한다는 발상을 좋아합니다.

인지되는 어포던스는 특히 인터페이스 디자인과 관련이 있습니다. 인터페이스 디자인에 대해 잠시 후에 살펴볼 것입니다.

시그니파이어(Signifiers)

시그니파이어는 노먼의 정의에서 한 몫을 합니다. 물체의 특성은 개인에게 어떤 동작이 가능한지를 다양한 방식으로 연상시켜줍니다. 시그니파이어는 "어포던스 중에서 인지할 수 있는 부분"입니다. 손잡이 예제를 한 번 더 이용하면, 둥그런 형태가 돌릴 수 있다는 것을 보여 줍니다.

인터랙션 디자인

우리는 웹 디자이너로서 인터페이스가 보이고 동작하는 방식을 구체화하며, 때때로 버튼, 입력 컨트롤, 내비게이션 요소 등을 통해 사용자가 인터페이스와 상호작용하는 방식에 영향을 줍니다.

우리는 사용자들이 UI 요소들과 어떻게 상호작용해야 할지 인식하도록 시각적인 상세 부분을 시그니파이어로 사용합니다.

"플랫"의 모든 것

컴퓨터 모니터에서 보이는 것은 평평(flat)합니다. 픽셀 집합에 불과하죠. 하지만 깊이와 면을 그래픽으로 보여주어 인지되는 어포던스(perceived affordances)를 사용자에게 유익하게끔 조화시킬 수 있습니다. 버튼을 예로 들겠습니다. 아래의 두 버튼 중에 어느 버튼이 누르는 동작을 더 효과적으로 "유도하는 것"처럼 인지되나요?

아래 버튼에서 보이는 깊이감이 눌러질 수 있다는 것을 "알려줍니다."

이는 플랫 디자인 트렌드를 크게 반박하는 것일지 모릅니다. 미니멀로 가려고 디테일을 없애서 인지되는 어포던스를 가로막는 때가 종종 있습니다. 가령, 여러분은 아래와 같은 형태를 접해본 적이 있습니까?

어느 것이 버튼인가?

너무 미니멀하게 해서 전송(submit) 버튼과 입력 박스의 구별이 사라져버렸습니다. (입력 박스 안의 그림자와 버튼의 둥근 모서리 같은) 시그니파이어는 입력 박스가 텍스트를 담는 컨테이너이고 버튼이 "누르는" 용도라고 시각적으로 전달했을 것입니다.

"훌륭한 디자이너는 적절한 동작을 인식할 수 있게 하며, 부적절한 동작을 보이지 않게 합니다." – 도널드 노먼

고려할 사항

  • 사용자 모두가 똑같지 않습니다! 어떤 사용자는 어포던스를 인지하지 못하고, 의미를 똑같이 받아들이지 않을 수 있습니다.
  • 인터페이스 디자인에서 레이블과 설명은 유용하지만, 다른 시각적인 힌트로 뒷받침해주어야 합니다.
  • 그래픽 인터페이스에 관한 일에 "인지되는 어포던스"를 얘기합니다. 제품 디자인에서와 달리 실질적인 물리적 속성이 없기 때문입니다.
  • "플랫" 디자인은 스큐어모피즘만큼 효과적으로 똑같이 어포던스를 전달할 수 있습니다. 디자인할 때 동작이 반드시 인지되도록 해주세요.

읽어볼 자료

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.