2nd/10_Wiki/Topics/Human_Computer_Interaction.md

---
id: wiki-2026-0508-human-computer-interaction
title: Human Computer Interaction
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [HCI, UX-Engineering]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [hci, ux, interaction-design, accessibility]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript
  framework: React/SwiftUI
---

# Human Computer Interaction

## 매 한 줄
> **"매 humans + computers — interface as cognitive contract."** Sutherland Sketchpad (1963) → Engelbart "Mother of All Demos" (1968) → Xerox PARC GUI → modern multimodal (touch, voice, gesture, AR/VR, BCI). 매 2026 inflection — 매 LLM as interface (chat, agent, voice), 매 ambient computing, 매 brain-computer interfaces (Neuralink, Synchron).

## 매 핵심

### 매 Foundational principles
- **Affordance** (Gibson/Norman): 매 perceived action possibilities.
- **Feedback**: 매 action → immediate response (≤100ms feels instant).
- **Discoverability**: 매 features 의 findable.
- **Consistency**: 매 platform conventions 의 respect.
- **Error tolerance**: 매 undo, 매 confirmation, 매 graceful degradation.

### 매 Cognitive load (Sweller)
- **Intrinsic** — 매 task 의 inherent complexity.
- **Extraneous** — 매 poor design 의 added burden.
- **Germane** — 매 schema construction.

### 매 Modalities (2026)
- **Touch / pointer** — 매 still dominant.
- **Voice** — 매 LLM 의 robust (Whisper, Voxtral).
- **Multimodal LLM** — 매 image + text + voice (Claude Opus 4.7, GPT-5).
- **AR/VR** — 매 Vision Pro 2, Meta Quest 4.
- **BCI** — 매 emerging (Neuralink N1, Synchron Stentrode).

### 매 응용
1. Adaptive UI — 매 LLM-driven personalization.
2. Accessibility — 매 WCAG 3.0, 매 screen reader, 매 alt-text auto-generation.
3. Voice-first products — 매 in-car, 매 smart home, 매 wearable.

## 💻 패턴

### Fitts's Law calculator
```typescript
// time = a + b * log2(distance / width + 1)
function fittsTime(distancePx: number, targetWidthPx: number,
                   a = 50, b = 150): number {
  return a + b * Math.log2(distancePx / targetWidthPx + 1);
}
// 매 button placement decision: minimize time
```

### Optimistic UI
```typescript
// React — 매 perceived latency reduction
function useOptimisticToggle(initial: boolean, save: (v: boolean) => Promise<void>) {
  const [value, setValue] = useState(initial);
  const toggle = async () => {
    const next = !value;
    setValue(next);  // 매 instant feedback
    try { await save(next); }
    catch { setValue(!next); /* revert */ }
  };
  return [value, toggle] as const;
}
```

### Debounced search (cognitive flow)
```typescript
import { useEffect, useState } from 'react';

function useDebouncedValue<T>(value: T, delayMs: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setDebounced(value), delayMs);
    return () => clearTimeout(t);
  }, [value, delayMs]);
  return debounced;
}
// 매 300ms — 매 typing pause 의 natural query trigger
```

### Accessible button
```tsx
// WCAG 2.2 AA
<button
  onClick={handleClick}
  aria-label="Delete item"
  aria-describedby="delete-help"
  disabled={isLoading}
  className="min-h-[44px] min-w-[44px]"  // 매 touch target
>
  {isLoading ? <Spinner aria-hidden /> : <TrashIcon aria-hidden />}
  <span id="delete-help" className="sr-only">
    매 permanently delete this item
  </span>
</button>
```

### LLM voice interface
```typescript
// 매 speech-to-LLM-to-speech
import Anthropic from '@anthropic-ai/sdk';

async function voiceTurn(audioBlob: Blob): Promise<Blob> {
  const transcript = await transcribe(audioBlob);  // Whisper-v4
  const client = new Anthropic();
  const reply = await client.messages.create({
    model: 'claude-opus-4-7',
    max_tokens: 512,
    messages: [{ role: 'user', content: transcript }],
  });
  return await synthesize(reply.content[0].text);  // ElevenLabs / OpenAI TTS
}
```

### Eye-tracking heatmap (Vision Pro)
```swift
// SwiftUI + visionOS
import SwiftUI
import RealityKit

struct GazeAwareView: View {
    @State private var gazeTarget: Entity?
    var body: some View {
        RealityView { content in
            // ARKit eye tracking
            content.add(makeButton(on: .gaze) { entity in
                gazeTarget = entity
            })
        }
    }
}
```

### Skeleton loader (perceived performance)
```tsx
// 매 content shape preview while loading
function ArticleSkeleton() {
  return (
    <div className="animate-pulse">
      <div className="h-6 bg-gray-200 rounded w-3/4 mb-4" />
      <div className="h-4 bg-gray-200 rounded mb-2" />
      <div className="h-4 bg-gray-200 rounded w-5/6" />
    </div>
  );
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Latency-sensitive UI | Optimistic update + skeleton |
| Form-heavy flow | Inline validation + autosave |
| Voice product | LLM round-trip <800ms target |
| Accessibility | WCAG 2.2 AA minimum, AAA 권장 |
| Multimodal | LLM가 매 modality routing |

**기본값**: 매 100ms feedback, 매 1s task completion, 매 10s context preserve (Nielsen 1993, 매 still holds).

## 🔗 Graph
- 변형: [[Interaction-Design]]
- 응용: [[Accessibility (A11y)|Accessibility]] · [[BCI]]
- Adjacent: [[Cognitive-Load]] · [[Design-Systems]]

## 🤖 LLM 활용
**언제**: copywriting, alt-text generation, A11y review, conversational UI design.
**언제 X**: 매 user research synthesis (real interviews 의 irreplaceable).

## ❌ 안티패턴
- **Dark patterns**: 매 manipulative consent, 매 hidden costs.
- **Touch target <44px**: 매 fat-finger errors.
- **Loading without feedback**: 매 user 의 abandons after 3s.
- **Voice-only critical action**: 매 destructive action 의 confirmation 의 X.

## 🧪 검증 / 중복
- Verified (Norman "Design of Everyday Things", Nielsen Norman Group, WCAG 2.2 W3C).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — HCI principles, modalities, 2026 LLM/AR/BCI integration |