디자인 아틀라스
EN
⌘ UX 용어·법칙

어포던스

Affordance

사물의 생김새가 "어떻게 쓰는지"를 암시하는 성질. 그림자 있는 버튼은 눌러도 된다는 걸 형태로 말해줍니다.

다른 이름: Perceived affordance
···
html
<div class="stage">
  <div class="pane">
    <button class="real" id="b1">Save</button>
    <div class="cur" id="c1">➤</div>
  </div>
  <div class="pane">
    <span class="flat" id="b2">Save</span>
    <div class="bub" id="q">?</div>
    <div class="cur" id="c2">➤</div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%;align-items:center}
.pane{position:relative;flex:1;height:100%;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.real{padding:10px 22px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-weight:700;box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 60%,#000),0 10px 16px rgba(0,0,0,.2);animation:press 2.4s ease-in-out infinite}
@keyframes press{0%,55%{transform:translateY(0);box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 60%,#000),0 10px 16px rgba(0,0,0,.2)}65%,75%{transform:translateY(6px);box-shadow:0 0 0 transparent}85%,100%{transform:translateY(0);box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 60%,#000),0 10px 16px rgba(0,0,0,.2)}}
.flat{color:var(--fg);font-weight:700;font-size:15px}
.bub{position:absolute;top:24%;left:60%;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;font:700 12px/1 monospace;color:var(--muted);opacity:0;animation:q 2.6s ease-in-out infinite}
@keyframes q{0%,50%{opacity:0;transform:translateY(6px)}65%,85%{opacity:1;transform:translateY(0)}100%{opacity:0}}
.cur{position:absolute;font-size:16px;transform:rotate(-45deg);color:var(--fg)}
#c1{animation:go1 2.4s ease-in-out infinite}
#c2{animation:go2 2.6s ease-in-out infinite}
@keyframes go1{0%{left:20%;top:70%}55%{left:48%;top:47%}100%{left:48%;top:47%}}
@keyframes go2{0%{left:20%;top:70%}60%{left:52%;top:45%}100%{left:56%;top:40%}}

심리학자 제임스 깁슨(James J. Gibson)이 만든 용어를 도널드 노먼(Don Norman)이 저서 《디자인과 인간 심리(The Design of Everyday Things)》에서 UI/UX 맥락으로 가져왔습니다. 노먼은 나중에 "실제 가능한 행동"과 "사용자가 지각하는 행동 가능성(perceived affordance)"을 구분했는데, 디자인에서 중요한 건 후자입니다.

버튼에 그림자·입체감·눌리는 애니메이션을 주면 "누를 수 있다"는 지각적 어포던스가 생깁니다. 평평한 텍스트만 있으면 클릭 가능한지 알 수 없어 사용자가 머뭇거립니다.

플랫 디자인 유행 이후 어포던스가 약해진 UI가 늘었고, 그래서 밑줄·호버 색상 변화 같은 최소한의 신호(→ signifier)를 다시 넣는 추세입니다.

언제 쓰나

새로운 컴포넌트를 만들 때 "이게 눌리는 걸로 보이나?"를 먼저 물어보세요. 클릭 가능 요소는 커서·색상·깊이 중 최소 하나로 신호를 줘야 합니다.