Human-Computer Interaction & Graphics

1. Overview

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

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

과거의 HCG가 2D 화면에서의 마우스 클릭(WIMP)과 단순 3D 폴리곤 렌더링에 국한되었다면, 현대의 HCG는 공간 컴퓨팅(Spatial Computing), 햅틱 피드백, 뇌-컴퓨터 인터페이스(BCI), 포토리얼리스틱(Photorealistic) 실시간 레이 트레이싱, 그리고 보편적 접근성(Accessibility)을 아우르는 융합 공학으로 진화하고 있습니다.

2. Scope & Boundaries

In-Scope

• 인지 공학 및 HCI: 사용자 경험(UX) 설계 원칙, 게슈탈트 시각 법칙, 인간 인지 과부하 제어, 피츠의 법칙(Fitts's Law), 힉의 법칙(Hick's Law), 접근성(A11y).
• 시각 컴퓨팅 및 렌더링: 기하학적 3D 변환(행렬 기반), 래스터화(Rasterization) 파이프라인, 레이 트레이싱(Ray Tracing), 셰이더 프로그래밍(GLSL/HLSL).
• 시뮬레이션 및 엔진 아키텍처: 게임 엔진 아키텍처(ECS: Entity Component System), 물리 시뮬레이션(Collision, Kinematics), 공간 분할 및 컬링(Culling).
• 고도화된 가시화 및 융합: 데이터 시각화(Data Visualization) 매핑 기법, 혼합 현실(XR: AR/VR/MR) 인터랙션 렌더링.

Out-of-Scope

• 순수 조형 예술 및 디자인 툴 기능: Photoshop, Figma, Blender 등 툴 자체의 단축키나 심미적 예술성 논의 → 디자인/아트 전문 영역으로 위임.
• GPU 하드웨어 드라이버 최적화: 그래픽 카드 펌웨어 수준의 명령어 스케줄링이나 발열 제어 로직 → 02. CAES(아키텍처) 노드로 위임.
• 일반 비즈니스 폼 입력 페이지 구현: HCI적 고민(인지 공학)이 배제된 단순한 CRUD 기반의 웹 페이지 마크업(HTML/CSS) 작업 → 14. Web 노드로 위임.

Boundaries

• HCG는 데이터의 '고정된 값(06. DIM)' 자체보다 그 값이 인간에게 **'어떻게 인지(Perception)되는가'**와 3D 공간에서 **'어떻게 가시화(Visualization)되는가'**의 동적 기전에 집중합니다.
• 데이터 처리 효율성(AL)이 백엔드의 핵심이라면, HCG는 인간의 제한된 정보 처리 용량 내에서 인지 효율성(Cognitive Load)을 극대화하는 프론트엔드의 핵심입니다.

3. Counterexample

• 유행하는 UI 컴포넌트 라이브러리 맹목적 사용: 단순히 Tailwind CSS나 Material-UI의 모달과 버튼을 가져다 예쁘게 배치하는 것은 HCG 학습이 아닙니다. 왜 특정 색상과 위치의 버튼이 인간의 **시각적 주의력(Visual Attention)**을 무의식적으로 끌어들이는지, 레이아웃의 여백과 버튼 크기가 피츠의 법칙을 어떻게 수리적으로 충족하는지 인간 공학적 원리를 분석해야 합니다.
• 게임 엔진 에디터 수동 조작: Unity나 Unreal의 에디터 UI 조작법을 익히고 에셋을 드래그 앤 드롭하는 것은 툴 사용법입니다. 스크립트 레벨에서 드로우 콜(Draw Call) 최적화가 렌더링 파이프라인의 GPU 처리량에 미치는 영향을 이해하거나, **공간 분할(Octree)**을 통해 충돌 감지 연산 복잡도를 O(n^2)에서 어떻게 낮추는지 엔진 아키텍처 측면에서 접근해야 합니다.

4. Prerequisites

• 수리 및 기하학 (Basic): 3D 공간에서의 객체 변환(이동, 회전, 크기 조절)을 위한 선형대수학(벡터, 행렬 곱) 및 삼각함수 기본 지식. (P1)
• 컴퓨터 구조 (Recommended): 수천 개의 코어가 병렬 연산을 수행하는 GPU 아키텍처(SIMD) 및 비디오 메모리 계층 구조 이해. (P1)
• 자료구조 (Practical): 렌더링 가시성 연산(Culling) 및 물리 충돌 감지를 위한 공간 분할 트리(Octree, KD-Tree, BVH) 개념 파악. (P1)

5. Learning Map

6. Learning Topics

Basic

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

• Why to Learn: 사용자의 휴먼 에러(Human Error)를 물리적으로 방지하고, 별도 교육이나 매뉴얼 없이도 시스템을 직관적으로 조작하게 만들어 인지적 마찰(Cognitive Friction)을 줄이기 위함입니다.
• What to Learn:
  • Concepts: 피츠의 법칙(Fitts's Law, 도달 시간 모델), 힉의 법칙(Hick's Law, 선택지 개수와 인지 부하), 어포던스(Affordance, 행동 유도성), 게슈탈트 시각 법칙(Gestalt Principles), 멘탈 모델(Mental Model).
  • Skills: 인지 과부하를 유발하는 UI 병목 구간 진단, 시선 추적(Eye Tracking) 데이터 해석, 접근성(A11y, WCAG 가이드라인) 준수 설계.
  • Tools: 와이어프레이밍/프로토타이핑(Figma, ProtoPie), GOMS 모델, 휴리스틱 평가(Heuristic Evaluation) 지표.
  • Trade-offs: 단일 화면 내 최대한 많은 정보 제공(탐색 단계 감소) vs 여백과 단순함을 강조(인지 부하 감소 및 학습 용이성).
• How to Learn:
  • 1단계: 일상적으로 사용하는 엔터프라이즈 소프트웨어에서 가장 쓰기 불편한 폼(Form)을 골라 피츠/힉의 법칙에 위배되는 요소를 분석하고 와이어프레임 수준에서 재설계합니다.
  • 2단계: 화면 낭독기(Screen Reader)를 켜고 시각 정보를 완전히 차단한 상태에서 마크업 스크립트만으로 웹페이지 결제가 가능한지 접근성 테스트를 수행합니다.
• Implement: 특정 도메인 서비스(예: B2B 대시보드)의 휴리스틱 UX 사용성 평가 리포트 및 접근성을 고려한 인터랙티브 프로토타입.

Recommended

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

• Why to Learn: 3D 가상 공간의 수학적 좌표 데이터를 시각 정보(픽셀)로 변환하는 물리적 연산 과정을 이해하여, 하이엔드 그래픽 효과를 프레임 드랍 없이 직접 구현하기 위함입니다.
• What to Learn:
  • Concepts: 좌표계 기하 변환(MVP: Model, View, Projection 행렬), 래스터화(Rasterization), 조명 모델(Phong/PBR: Physically Based Rendering), 텍스처 밉맵(Mipmap) 및 노멀 매핑.
  • Skills: GPU 파이프라인의 각 단계에 개입하는 정점/픽셀 셰이더(Vertex/Fragment Shader) 개발 및 드로우 콜(Draw Call) 병목 최적화.
  • Tools: 그래픽스 API(OpenGL, WebGL, Vulkan, DirectX), 셰이딩 언어(GLSL/HLSL), RenderDoc (GPU 디버깅 프로파일러).
  • Trade-offs: 현실적인 광원 및 재질 묘사(Photorealistic Quality) vs 실시간 초당 프레임(FPS) 방어를 위한 연산 생략(Performance).
• How to Learn:
  • 1단계: WebGL(또는 Three.js)로 외부 라이브러리 없이 정점(Vertex)을 직접 정의하고, 행렬 변환을 통해 회전하는 3D 큐브를 화면에 렌더링하는 과정을 코딩합니다.
  • 2단계: 커스텀 셰이더를 작성하여 불타는 이펙트, 물의 일렁임이나 금속의 반사 광택을 물리 수식으로 계산하여 픽셀에 덧칠해 봅니다.
• Implement: 실시간 렌더링 파이프라인과 조명/그림자 효과가 수학적으로 구현된 소규모 3D 렌더러 모듈.

Practical

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

• Why to Learn: 메타버스나 디지털 트윈 환경에서 수만 개의 움직이는 객체를 성능 저하 없이 실시간으로 제어하고, 물리적 법칙(중력, 충돌)의 일관성을 유지하기 위함입니다.
• What to Learn:
  • Concepts: 게임 루프(Game Loop), ECS(Entity Component System) 아키텍처, 씬 그래프(Scene Graph), 오클루전 컬링(Occlusion Culling) 및 절두체(Frustum) 컬링, 강체 물리(Rigid Body) 시뮬레이션.
  • Skills: 대규모 트래픽/연산 처리를 위한 데이터 지향 설계(Data-Oriented Design) 및 객체 생성을 최소화하는 오브젝트 풀링(Object Pooling).
  • Tools: Unity(C#), Unreal Engine(C++), 물리 연산 엔진(NVIDIA PhysX, Havok).
  • Trade-offs: 데이터 지향적 메모리 연속성 배치(캐시 히트율 증가, 압도적 속도) vs 전통적 객체 지향적 설계(코드의 직관적 유연성과 상속 이점).
• How to Learn:
  • 1단계: 10,000개 이상의 물리 객체가 바닥에 떨어지는 환경을 구축하고, 전통적인 MonoBehaviour(OOP) 방식과 ECS 패러다임 적용 전후의 CPU 캐시 성능(FPS) 차이를 벤치마킹합니다.
  • 2단계: 카메라 시야각 바깥의 수많은 객체들을 연산에서 제외하는 공간 분할(Quadtree/Octree) 알고리즘을 씬 매니저에 직접 구현합니다.
• Implement: 데이터 지향적 최적화(ECS) 전략과 기초적인 물리 충돌 연산이 반영된 실시간 인터랙티브 시뮬레이션 엔진 템플릿.

Advanced

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

• Why to Learn: 단순한 2D 모니터 스크린을 벗어나, 영화적 퀄리티의 시각 정보와 인간-공간 지능이 결합된 차세대 공간 컴퓨팅(Spatial Computing) 환경을 리딩하기 위함입니다.
• What to Learn:
  • Concepts: 전역 조명(Global Illumination), 실시간 레이 트레이싱(Ray Tracing), 햅틱(Haptic) 피드백 모델, 6-DoF 공간 추적(Spatial Tracking), 체적 렌더링(Volumetric Rendering).
  • Skills: 대규모 센서 데이터나 다차원 통계에서 인간이 즉각적으로 인사이트를 추출할 수 있도록 돕는 인터랙티브 비주얼라이제이션 설계.
  • Tools: NVIDIA RTX SDK(OptiX), OpenXR, WebXR, D3.js (고도화된 2D/3D 데이터 가시화).
  • Trade-offs: 무거운 렌더링 연산의 클라우드 엣지 컴퓨팅 오프로딩(네트워크 지연 민감) vs XR 디바이스 온보드 추론(발열 및 배터리 소모 한계).
• How to Learn:
  • 1단계: VR/AR 프레임워크를 사용하여 가상의 3D 공간에서 음향(Spatial Audio)과 시각적 피드백이 물리적 충돌과 정확히 동기화되는 XR 인터랙션 루프를 구현합니다.
  • 2단계: 빛의 반사, 굴절, 산란 경로를 물리 광선(Ray) 단위로 추적하는 기초적인 레이 트레이싱 알고리즘을 컴퓨트 셰이더(Compute Shader) 수준에서 스크래치 구현해 봅니다.
• Implement: 대용량 실시간 데이터를 기반으로 통찰력을 제공하는 3D 대시보드 또는 초실감 메타버스 가상 훈련 환경 프로토타입.

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로 인한 프레임 드랍 방지 로직이 적용되어 있는가?