docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동
최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치. 콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서 전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한 업데이트0615/무제 3.canvas 뿐).
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,160 @@
|
||||
---
|
||||
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 |
|
||||
Reference in New Issue
Block a user