2nd/10_Wiki/Topics/Human_Computer_Interaction.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-human-computer-interaction	Human Computer Interaction	10_Wiki/Topics	verified	self	HCI UX-Engineering	none	A	0.9	applied	hci ux interaction-design accessibility		2026-05-10	pending	language framework TypeScript 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

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

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

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

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

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

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

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

• 부모: Cognitive-Science · Design
• 변형: UX-Design · Interaction-Design · Service-Design
• 응용: Accessibility · Voice-UI · AR-VR · BCI
• Adjacent: Cognitive-Load · Information-Architecture · 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