Human-Computer Interaction & Graphics

1. Overview

인간-컴퓨터 상호작용 및 그래픽스(Human-Computer Interaction & Graphics, HCG)는 디지털 정보의 수리적 추상성을 인간의 감각이 수용 가능한 물리적 실체로 변환하고, 그 과정에서 발생하는 인지적·심리적 피드백 루프를 설계하는 '경험적 시각 공학'입니다. 본 카테고리에서는 인간의 뇌가 정보를 받아들이는 인지 모델부터, 빛과 물질의 상호작용을 시뮬레이션하는 렌더링, 그리고 복잡한 상호작용을 구현하는 엔진 아키텍처 및 시각 컴퓨팅을 다룹니다.

CS2023의 HCI (Human-Computer Interaction) 및 GV (Graphics and Visual Computing) 지식 영역을 근간으로 삼아, 하드웨어의 연산 파워를 인간의 직관과 행동으로 치환하는 하이엔드 인터페이스 거버넌스 역량을 탐구합니다.

2. Scope & Boundaries

In-Scope

• 인지 모델 및 HCI: 사용자 경험(UX) 설계 원칙, 게슈탈트 시각 법칙, 인간 인지 과부하 제어.
• 시각 컴퓨팅 및 렌더링: 기하학적 변환, 래스터화(Rasterization), 레이 트레이싱(Ray Tracing), 최신 셰이더 프로그래밍.
• 가상 세계 시뮬레이션: 게임 엔진 아키텍처(ECS), 물리 시뮬레이션, 실시간 애니메이션 기법.
• 고도화된 가시화: 고차원 데이터 시각화(Data Visualization), 혼합 현실(XR) 인터랙션 기술.

Out-of-Scope

• 순수 조형 디자인: Photoshop/Figma 툴의 기능적 사용법이나 예술적 심미성 논의 (디자인 전문 영역 위임).
• GPU 펌웨어 최적화: 그래픽 카드 하드웨어 드라이버 수준의 로직 (02. CAES 노드로 위임).
• 일반 비즈니스 UI 구현: HCI 설계 원리 없는 단순한 웹 페이지 마크업 (14. Web 노드로 위임).

Boundaries

• HCG는 데이터의 '고정된 값'보다 그 값이 **'어떻게 인지(Perception)되는가'**와 **'어떻게 가시화(Visualization)되는가'**의 동적 기전에 집중합니다.

3. Counterexample

• UI 컴포넌트 라이브러리 사용: 단순히 버튼이나 모달을 배치하는 것은 HCG 학습이 아닙니다. 왜 특정 위치의 버튼이 인간의 **시각적 주의력(Visual Attention)**을 끌어들이는지, 레이아웃의 여백이 **피츠의 법칙(Fitts's Law)**을 어떻게 충족하는지 분석해야 합니다.
• 게임 엔진 에디터 조작: Unity나 Unreal의 UI를 익히는 것보다, 엔진 내부의 드로우 콜(Draw Call) 최적화가 렌더링 파이프라인의 수리적 처리량에 미치는 영향을 이해하는 것이 HCG의 공학적 핵심입니다.

4. Prerequisites

• 수학적 모델링 (Basic): 3D 공간 변환을 위한 선형대수학(벡터, 행렬 연산) 및 삼각함수 기본. (P1)
• 컴퓨터 구조 (Recommended): 병렬 연산을 수행하는 GPU 아키텍처 및 비디오 메모리 계층 구조 이해. (P1)
• 자료구조 (Practical): 가시성 연산 및 충돌 감지를 위한 공간 분할 트리(Octree, BVH) 지식. (P1)

5. Learning Map

1. Information Perception: 인간 시각 반응의 물리적 한계와 인지적 체제화 원리를 학습합니다. (P1)
2. Visual Computing Mechanics: 3D 공간의 수치를 픽셀 단위로 투영하는 기하학적 파이프라인을 익힙니다. (P1)
3. Interactive Simulation: 물리 법칙과 실시간 반응성을 결합하여 객체 간 상호작용을 처리하는 아키텍처를 배웁니다.
4. Symbiotic Interface: 보편적 설계(Accessibility)를 통해 기술과 인간의 장벽 없는 공생형 상호작용을 실무에 적용합니다.

6. Learning Topics

Basic

Core Topic 01: 인간 인지 공학과 인터페이스 원칙 (Cognitive Models & HCI)

• Why to Learn: 사용자의 실수를 물리적으로 방지하고, 별도 교육 없이도 직관적으로 도구를 다루게 만들기 위함입니다.
• What to Learn:
  • Concepts: Fitts's Law, Hick's Law, Affordance(행동 유도성), 게슈탈트 시각 법칙.
  • Skills: 인지 부하(Cognitive Load) 측정 및 해소를 위한 레이아웃 최적화 설계.
  • Tools: 사용성 평가 프레임워크, GOMS 모델.
  • Trade-offs: 정보의 상세성(Accuracy) vs 전달의 즉시성(Simplicity).
• How to Learn:
  • 1단계: 일상적인 앱 중 가장 쓰기 편한 것과 불편한 것을 골라 인지 모델 원칙에 따라 비교 분석합니다.
  • 2단계: 특정 복합 기능을 수행하는 UI의 단계를 줄이기 위해 행동 유도성을 어떻게 강화할지 설계안을 짭니다.
• Implement: 특정 도메인 서비스의 UX 사용성 평가 리포트 및 개선 프로토타입.

Recommended

Core Topic 02: 렌더링 파이프라인과 컴퓨터 그래픽스 (Rendering & Graphics)

• Why to Learn: 3D 디지털 좌표를 시각 정보로 변환하는 물리적 과정을 이해하여 하이엔드 시각 효과를 직접 구현하기 위함입니다.
• What to Learn:
  • Concepts: 좌표계 변환(MVP), 래스터화, 조명 모델(Phong/PBR), 텍스처 매핑 기술.
  • Skills: GPU 파이프라인의 각 단계에 개입하는 셰이더(Shader) 개발 및 최적화.
  • Tools: OpenGL/WebGL, GLSL, RenderDoc (디버깅).
  • Trade-offs: 현실적인 광원 묘사(Quality) vs 실시간 프레임 유지(Performance).
• How to Learn:
  • 1단계: WebGL로 직접 정점(Vertex)을 정의하고 화면에 삼각형을 띄우는 기하 연산 과정을 코딩합니다.
  • 2단계: 커스텀 셰이더를 작성하여 물의 일렁임이나 금속의 반사 광택을 물리 수식으로 표현해 봅니다.
• Implement: 실시간 렌더링 파이프라인이 구현된 소규모 그래픽스 엔진 혹은 시각 효과 라이브러리.

Practical

Core Topic 03: 실시간 시뮬레이션 기반 엔진 설계 (Game Engine & Simulation)

• Why to Learn: 수천 개의 움직이는 객체를 성능 저하 없이 실시간으로 제어하고 물리적 일관성을 유지하기 위함입니다.
• What to Learn:
  • Concepts: ECS(Entity Component System), Scene Graph, Occlusion Culling, 실시간 충돌 해석.
  • Skills: 대규모 트래픽 처리를 위한 데이터 중심 설계와 오브젝트 풀링(Pooling) 최적화.
  • Tools: Unity/Unreal Engine 내부 구조 연구, 물리 라이브러리(PhysX 등).
  • Trade-offs: 데이터 지향적 성능 향상(Speed) vs 객체 지향적 코드 유연성(Flexibility).
• How to Learn:
  • 1단계: 직접 10,000개 이상의 물리 객체가 격돌하는 환경을 구축하고 ECS 적용 전후의 프레임 차이를 봅니다.
  • 2단계: 메시 오버드로우(Overdraw) 문제를 진단하고 컬링 기법을 적용해 렌더링 효율을 높이는 실험을 합니다.
• Implement: 물리 상호작용과 최적화 전략이 반영된 인터랙티브 시뮬레이션 템플릿.

Advanced

Core Topic 04: 고수준 시각 가시화 및 XR 인터랙션 (Advanced GV & XR)

• Why to Learn: 영화적 퀄리티의 시각 정보와 인간-공간 지능이 결합된 차세대 컴퓨팅 환경을 리딩하기 위함입니다.
• What to Learn:
  • Concepts: Global Illumination, 실시간 Ray Tracing, 햅틱 피드백 모델, 공간 컴퓨팅(Spatial Computing).
  • Skills: 고차원 대용량 데이터에서 인사이트를 추출하기 위한 비주얼라이제이션 설계.
  • Tools: NVIDIA RTX SDK, VR/AR 원조 프레임워크.
  • Trade-offs: 연산 비중의 클라우드 오프로딩 vs 디바이스 온보드 추론 성능.
• How to Learn:
  • 1단계: 가상의 3D 공간에서 음향과 시각적 피드백이 동시에 발생하는 XR 인터랙션 루프를 구현합니다.
  • 2단계: 빛의 반사 경로를 수학적으로 추적하는 레이 트레이싱 알고리즘을 셰이더 수준에서 구현해 봅니다.
• Implement: 데이터 기반 통찰력 혹은 초실감 가상 환경을 제공하는 하이테크 가시화 프로젝트.

7. Terminology

8. References

Primary References

• [P1] CS2023: HCI — Human-Computer Interaction Areas.
• [P1] CS2023: GV — Graphics and Visual Computing Areas.
• [P5] SFIA v9: User Experience — 사용자 도구 설계 및 사용성 분석 역량.

Secondary References

• [Fundamentals of Computer Graphics] Steve Marschner — 그래픽스 수리 모델의 교과서적 표준.
• [The Design of Everyday Things] Don Norman — HCI 및 행동 유도성(Affordance)의 이론적 토대.

Industry References

• [Apple Human Interface Guidelines] — 플랫폼 디자인과 사용자 인지의 실무 표준 지침.
• [NVIDIA Developer Resources] — 전역 조명 및 실시간 셰이더 관련 최첨단 기술 기술 문서.

9. Final Checklist

Primary Checklist

• 타겟 사용자의 인지 모델(기억력, 반응 시간)을 수치적으로 고려하여 레이아웃과 반응 속도를 설계했는가? (P1-HCI)
• 시각적 위계(Visual Hierarchy)가 명확하여 사용자의 시선이 중요한 비즈니스 정보에 자연스럽게 도달하는가? (P1-HCI)

Secondary Checklist

• 3D 공간의 정점을 2D 화면으로 투영하는 좌표 변환 행렬(MVP)의 수리적 결함이 없는지 검증했는가?
• 렌더링 성능 하락 시 CPU의 드로우 콜 과다인지 GPU의 고도 연산 부하인지 툴로 진단할 수 있는가?

Industry Checklist

• 지체 장애인 및 고령자도 정보를 취득할 수 있도록 보편적 설계(WCAG) 표준의 기술적 요구사항을 충족했는가?
• 게임 엔진 기반 시스템에서 메모리 파편화 및 GC Spike로 인한 프레임 드랍 방지 로직이 적용되어 있는가?