2nd/10_Wiki/Topics/Architecture/어포던스(Affordances).md

---
id: wiki-2026-0508-어포던스-affordances
title: 어포던스(Affordances)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Affordance, Perceived Affordance, Signifier]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [ux, design, hci, norman, affordance]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react
---

# 어포던스(Affordances)

## 매 한 줄
> **"매 object 의 possible action 의 perception"**. Gibson (1979) 의 ecological psychology 에서 origin — 매 environment 의 actor 에게 offer 하는 action possibility. Norman (1988) 가 design 에 도입 — 매 *perceived* affordance + signifier 의 구분. 2026 년 매 mobile/AR/voice UI 의 affordance 의 redesign 의 active.

## 매 핵심

### 매 Gibson vs Norman
- **Gibson (real)**: 매 actor-environment relation 의 objective property — 매 perception 의 independent.
- **Norman (perceived)**: 매 user 의 *perceive* 하는 action possibility — 매 design 의 target.
- **Signifier (Norman 2013)**: 매 affordance 의 hint — icon, label, shadow.

### 매 6 categories (Gaver 1991)
- **Perceptible**: affordance + signifier 의 모두 — 매 button 의 click.
- **Hidden**: affordance 의 있음 + signifier 의 X — 매 secret keyboard shortcut.
- **False**: signifier 의 있음 + affordance 의 X — 매 fake button.
- **Correct rejection**: affordance + signifier 의 모두 X — 매 nothing 의 there.

### 매 응용
1. UI button — 매 raised + shadow 의 click 의 signifier.
2. Mobile gesture — 매 swipe edge indicator.
3. AR/VR — 매 spatial affordance (grab, pull).

## 💻 패턴

### Button affordance (modern CSS)
```css
.button {
  /* Perceptible: padding + bg + shadow → "clickable" 의 perceive */
  padding: 12px 24px;
  background: var(--accent);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.1s;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); box-shadow: none; } /* "pressed" feedback */
```

### Disabled state (correct rejection)
```tsx
<button
  disabled={!canSubmit}
  aria-disabled={!canSubmit}
  className={canSubmit ? 'button' : 'button button--disabled'}
>
  Submit
</button>
// CSS: opacity 0.5 + cursor: not-allowed → "매 click 의 X" 의 signify.
```

### Drag handle signifier
```tsx
<div className="card" draggable>
  <span className="drag-handle" aria-label="Drag to reorder">⋮⋮</span>
  {/* 매 dotted icon 의 "draggable" affordance 의 signify */}
  <h3>{title}</h3>
</div>
```

### Swipe affordance (mobile)
```tsx
function SwipeableRow({ children, onDelete }) {
  return (
    <div className="row">
      {children}
      {/* Edge gradient: swipe affordance 의 hint */}
      <div className="swipe-hint" aria-hidden>
        <span>← Swipe to delete</span>
      </div>
    </div>
  );
}
```

### Voice UI affordance
```typescript
// 매 voice UI 의 invisible — 매 explicit prompt 의 affordance signal.
const greeting = `Hi! You can ask me to:
- "Set a timer for 10 minutes"
- "Play jazz"
- "What's the weather?"`;
// 매 example utterance 의 affordance 의 surface.
```

### Cursor as affordance
```css
.link        { cursor: pointer; }     /* clickable */
.text-input  { cursor: text; }        /* type-able */
.draggable   { cursor: grab; }
.dragging    { cursor: grabbing; }
.resizable-h { cursor: ew-resize; }
.disabled    { cursor: not-allowed; }
```

### AR object affordance (WebXR)
```javascript
// 매 grabbable object 의 outline glow.
function highlightGrabbable(object3D, isHovered) {
  const outline = object3D.getObjectByName('outline');
  outline.material.opacity = isHovered ? 0.8 : 0;
  // 매 glow 의 "grab me" 의 signifier.
}
```

## 매 결정 기준
| 상황 | Affordance approach |
|---|---|
| Touch UI primary action | Large button + shadow + label |
| Hidden power feature | Tooltip + onboarding hint |
| Destructive action | Red color + confirm dialog (anti-affordance) |
| Mobile gesture | Edge indicator + first-time tutorial |
| Voice/Conversational | Explicit example prompts |

**기본값**: 매 perceptible affordance — signifier 의 visible.

## 🔗 Graph
- 부모: [[HCI]]
- 변형: [[Signifier]] · [[Feedback Loop]]

## 🤖 LLM 활용
**언제**: UI element 의 user 의 action possibility 의 perceive 의 design 시.
**언제 X**: backend logic 또는 algorithm — 매 affordance 무관.

## ❌ 안티패턴
- **Mystery meat navigation**: 매 unlabeled icon — 매 affordance 의 hidden.
- **False affordance**: 매 underlined text 의 link 의 X — 매 user 의 confuse.
- **Ghost button**: 매 outline-only button 의 affordance 의 weak.
- **Flat design extreme**: 매 모든 visual hint 의 remove — 매 button 의 plain text 의 indistinguishable.

## 🧪 검증 / 중복
- Verified (Gibson 1979 *Ecological Approach*; Norman 1988/2013 *Design of Everyday Things*; Gaver 1991 *Technology Affordances*).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Gibson/Norman + 6 categories + UI patterns |