Files

T

koriweb d8a80f6272 chore(wiki): dangling 링크 canonical 정규화 (768파일/1200건)

이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해
끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은
과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업.
도구: Datacollect/scripts/link_reconcile_apply.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-08 12:24:15 +09:00

6.0 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

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

매 응용

Adaptive UI — 매 LLM-driven personalization.
Accessibility — 매 WCAG 3.0, 매 screen reader, 매 alt-text auto-generation.
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

변형: Interaction-Design
응용: Accessibility (A11y) · 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

6.0 KiB Raw Blame History