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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

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

.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)

<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

<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)

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

// 매 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

.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)

// 매 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