어포던스(Affordance): 1부

Today : 2024-10-22 Tuesday

현재 경제노트 가족은 388,872명 입니다.
당신은 14,355,396번째 방문객 입니다.

회원가입없이 경제노트를 이메일로 받고 싶으신 분은 이름과 이메일을 입력해 주세요

개인정보 수집및 이용 안내에 동의
(확인하기)

추천인

이름

메일

추천받는 분

이름

메일

인사말

개인정보 수집및 이용 안내에 동의
(확인하기)

IT과학

웹

일반글

어포던스(Affordance): 1부

입력 2004-09-20 오전 12:00:00

항공기 조종석의 각종 장치를 보면, 누르는 버튼, 돌리는 다이얼, 위아래로 움직이는 토글 스위치, 밀고 당기는 레버, 정확한 위치를 선택하는 슬라이딩 버튼 등이 배치되어 있으며, 이 장치들은 자신의 기능에 부합되는 형태를 가지고 있다.

조종사들은 이런 형태를 직관적으로 지각함으로써 짧은 시간 동안에도 여러가지 중요한 태스크를 수행할 수 있게 된다.

이처럼 물건(object)과 유기체(organism, 사람) 사이의 독특한 관계에 따라서 나타날 수 있는 사용(uses), 동작(actions), 기능(functions)의 가능성을 어포던스(Affordance)라고 한다(J.J. Gibson). 즉 물건의 어포던스는 그 물건의 사용가능한 특징을 표현하는 것이다.

우리는 칼을 사용하면서 칼날을 잡을 걱정을 하진 않는다. 그 이유는 칼의 모양이 무엇에 사용해야 할지 용도를 분명히 알려주기 때문이다. 일반 건물의 화장실 문은 나올 때 밀어야할 지 당겨야할 지 망설여진다. 화장실 손잡이가 아무런 어포던스를 제공하지 못하기 때문이다.

사용자는 웹사이트에서 보고 느끼고 생각하고 동작하는 과정을 반복한다. 보이는 대로 동작했는데 예상 밖의 결과가 나타나거나(시행착오의 경험), 어떤 동작을 해야 할 지 필요 이상의 생각이 요구된다면(인지적 부담의 가중)은 그것은 좋은 디자인이라 할 수 없다.

클릭해야 하는 것과 그렇지 않은 것을 쉽게 구분되도록 디자인해야 하는 것은 웹디자인의 기본적인 가이드라인이다. 그러나 이런 기본은 잘 지켜지지 않고 있다. 아래 그림은 수준 높은 UI 디자인을 실천한다는 ‘야후 코리아’의 초기화면 일부이다. 클릭해야 하는 것과 그렇지 않은 것을 구분해보라. Linked와 Unlinked는 매우 다른 의미를 갖고 있음에도 디자인적으로 이를 명확히 구분하지 않았기 때문에 모호함이 증가하고, 그만큼 사용자 오류도 증가할 수 밖에 없다.

이런 모호함은 줄이기 위해서는 ‘클릭’이라는 동작을 쉽게 유도할 수 있어야 하며, 이것은 링크된 텍스트는 밑줄로 표시한다는 HTML의 표준이면 충분하다.

아래 그림은 1년전 ‘야후 코리아’의 초기화면이다. 링크된 것은 모두 밑줄이 있다. 심지어는 로고 양측의 6개 GIF 파일에 있는 그래픽 텍스트도 밑줄이 있다. 이런 디자인은 클릭을 해야할 지 말아야할 지를 망설일 이유가 없으므로 그만큼 사용성이 향상될 것이다.

링크된 텍스트의 밑줄을 과감히(?) 없앤 이유가 한글의 형태적 특징으로 인해 밑줄이 가독성을 저하시키다는 우려일수도 있다. 그래서 포털의 초기화면처럼 거의 모든 텍스트가 링크된 경우, 과연 밑줄이 생기게 할 것인가 말아야 할 것인가는 섣불리 판단하기는 어려운 것 같다.

다만 표준에 대한 문제과 클릭을 유발시키는 성질, 즉 어포던스에 대한 문제에 대해 고민해 볼 필요가 있다고 본다.

1년전 야후 코리아의 초기화면

아래 그림은 옥션의 검색영역이다. 검색필드 부분을 보면 CSS로 처리하여 음영없이 라인만으로 깔끔하게 디자인하였다. 이런 디자인은 음영이 있는 디자인에 비해 키워드를 입력하고 싶은 느낌이 줄어든다. 그만큼 키워드 입력의 어포던스가 부족한 것이다. 옥션은 이용자가 천만명을 넘었으며 다른 전자상거래 사이트에 비해 검색의 비중이 현저히 높다. 그렇다면 검색창은 좀 투박하더라도 HTML 형식(default)으로 두는 게 더 낫지 않을까.