Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

5.1 KiB

Raw Blame History

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

title

어포던스(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.

매 응용

UI button — 매 raised + shadow 의 click 의 signifier.
Mobile gesture — 매 swipe edge indicator.
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

5.1 KiB Raw Blame History