Web & Emerging Technologies

1. Overview

웹 및 신기술(Web & Emerging Technologies, WET)은 현대 브라우저가 제공하는 고성능 런타임 환경과, 개방형 표준(Open Web Standards)을 근간으로 물리적 세계 및 분산 시스템으로 확장되는 **차세대 플랫폼 공학(Next-Gen Platform Engineering)**을 다룹니다. 본 카테고리는 단순한 문서 표시 웹페이지 구축을 넘어, V8/WebKit 엔진의 JIT 컴파일 메커니즘, WebAssembly(WASM)를 통한 네이티브 코드의 웹 이식, 그리고 HTTP/3 및 서버리스 엣지 컴퓨팅(Serverless Edge) 생태계를 탐구합니다.

CS2023의 Software Systems (Web-based Systems) 지식 영역과 SWEBOK의 플랫폼 품질 역량을 준거로 삼아, 플랫폼 독립성이라는 웹의 철학 위에서 안전하고 빠른 엔터프라이즈급 풀스택 어플리케이션을 설계하는 원리를 체계적으로 다룹니다.

과거의 웹이 HTML/CSS 기반의 정적 정보 제공에 머물렀다면, 현대의 웹은 React/Next.js 기반의 복잡한 클라이언트-서버 렌더링 스펙트럼(CSR, SSR, SSG, RSC)을 통제하고, WebGPU를 통한 브라우저 내 딥러닝 추론, 오프라인 우선(PWA) 지원, 나아가 블록체인 기반의 Web3 및 분산 신원(DID) 기술로 외연을 폭발적으로 확장하고 있습니다.

2. Scope & Boundaries

In-Scope

• 브라우저 인터널 및 런타임: DOM/CSSOM 렌더링 파이프라인(CRP: Critical Rendering Path), V8 자바스크립트 엔진의 이벤트 루프(Event Loop)와 가비지 컬렉션 물리.
• 모던 풀스택 아키텍처: 컴포넌트 기반 아키텍처, 상태 관리 패러다임(Signals, Flux), 서버 사이드 렌더링(SSR/RSC) 역학, Hydration 최적화.
• 고성능 웹 API 및 브라우저 탈출: WebAssembly(WASM), 서비스 워커(Service Worker) 캐싱, WebGPU, WebRTC 통신, Node.js/Deno/Bun 런타임 차이.
• 웹 보안 아키텍처: CORS/SOP 정책의 존재 이유, CSP(Content Security Policy), XSS/CSRF 방어 메커니즘, OAuth/OIDC 인증 체계.
• 차세대 에코시스템: QUIC/HTTP3 기반 통신, 엣지 컴퓨팅(Edge Functions), 탈중앙화 웹(Web3) 및 DID 기술.

Out-of-Scope

• 그래픽스 심화 및 시각적 미학: 픽셀 완벽주의(Pixel Perfect)를 위한 예술적 컬러 가이드 및 타이포그래피 → 12. HCG(그래픽스) 노드로 위임.
• 분산 데이터베이스 물리 커널: 백엔드 서버 측의 RDBMS 커널 튜닝 및 디스크 I/O 인덱스 물리 구조 → 06. DIM 노드로 위임.
• 엔터프라이즈 모노리스 아키텍처: MSA 분할 전략, 쿠버네티스 기반의 복잡한 백엔드 인프라 설계 → 07. SADS 노드로 위임.

Boundaries

• WET은 단순히 정보를 '표시'하는 UI 구현을 넘어, 브라우저라는 '이질적이고 제약된 가상 실행 환경(Sandbox)' 내에서 제한된 메인 스레드 자원을 어떻게 효율적으로 배분하고 보안 경계를 유지할 것인가에 집중합니다.
• MCP(13)가 네이티브 OS 런타임의 하드웨어 통제력에 집중한다면, WET은 **'단일 코드베이스로 가장 넓은 도달력(Reach)'**을 확보하기 위해 발생하는 추상화 비용(Overhead)의 최소화를 다룹니다.

3. Counterexample

• 프레임워크 API의 맹목적 암기 및 복붙: 단순히 React의 useEffect나 Vue 문법을 외워서 복사해 쓰는 것은 WET 학습이 아닙니다. 해당 훅(Hook)의 렌더링 사이클이 브라우저의 메인 스레드 점유 시간(TBT) 및 **레이아웃 스래싱(Layout Thrashing)**에 물리적으로 어떤 악영향을 주는지 브라우저 렌더러 관점에서 분석하고 최적화할 수 있어야 합니다.
• 단순 외부 SDK 묻지마 연동: 라이브러리를 설치해 결제 기능을 띄우는 것보다, 브라우저의 **동일 출처 정책(SOP)**이 왜 외부 데이터 통신을 차단하는지 보안 철학을 이해하고, Preflight(OPTIONS) 요청 및 CORS 헤더를 통해 프로토콜 수준의 해결책을 설계하는 과정이 공학적 접근입니다.

4. Prerequisites

• 네트워크 및 프로토콜 (Basic): HTTP/1.1, HTTP/2, HTTP/3 각 버전의 물리적 전송 차이, TCP 3-way 핸드셰이크와 TLS 암호화 과정 이해. (P1:NC, P1:SEC)
• 운영체제 및 동시성 (Recommended): 커널의 프로세스/스레드 모델, 메모리 힙(Heap)과 스택(Stack), 브라우저의 멀티 프로세스 샌드박스 아키텍처 및 IPC 통신 기초. (P1:OS)
• 컴퓨터 구조 (Practical): 어셈블리와 기계어 컴파일 원리(WASM 이해용), CPU 캐시 로컬리티가 자바스크립트 배열 순회 성능에 미치는 영향. (P1:AR)

5. Learning Map

6. Learning Topics

Basic & Recommended

Core Topic 01: 모던 웹 및 프레임워크 물리 (Modern Web & Framework Physics)

• Why to Learn: 자바스크립트 프레임워크의 추상화에 가려진 렌더링 원리와 메모리 클로저 현상을 파악하여, 불필요한 메인 스레드 병목을 원천적으로 방지하는 아키텍처를 설계하기 위함입니다.
• What to Learn:
  • Concepts: WebAssembly(WASM) 실행 모델, Virtual DOM 디핑(Diffing) 알고리즘, 컴포넌트 생명주기 및 클로저(Closure) 역학, 상태 투영(Signals), 서버 컴포넌트(RSC) 및 하이드레이션(Hydration).
  • Skills: JS 한계를 돌파하는 WASM 브릿지 설계, 불변성(Immutability)을 활용한 렌더링 최적화, 훅(Hooks) 내부의 사이드 이펙트(Side-Effect) 통제, 세밀한 반응성(Fine-grained Reactivity) 구현.
  • Tools: Chrome DevTools(Performance), React/Next.js 코어 아키텍처 모델, SolidJS/Zustand 등 상태 관리 패러다임 비교.
  • Trade-offs: SSR을 통한 초기 로딩 속도 및 SEO 이점(FCP 향상) vs 서버 연산 부하 및 하이드레이션 지연으로 인한 인터랙션 블로킹(TTI 증가).
• How to Learn:
  • 1단계: Virtual DOM과 Signals 방식의 상태 관리가 실제 브라우저 레이아웃(Reflow) 단계에서 발생시키는 연산량 차이를 벤치마크 테스트를 통해 정량적으로 비교합니다.
  • 2단계: React Hooks나 Vue Composition API가 내부적으로 스코프(Scope)와 메모리를 어떻게 가두는지(Closure) 추적하여 안티패턴을 유발하는 원리를 역어셈블해 봅니다.
• Implement: 복잡한 클라이언트 상태와 비동기 서버 상태(RSC)가 엄격히 분리되어 메인 스레드 점유율(TBT)을 최소화한 확장 가능한 프론트엔드 보일러플레이트.

Practical & Advanced

Core Topic 02: 차세대 융합 기술 및 물리 시스템 (Emerging Tech & Physical Systems)

• Why to Learn: 웹과 클라우드의 경계를 넘어, 수학적 암호학(블록체인), 입자 물리(양자), 기계 공학(로보틱스), 소형 하드웨어(IoT) 등 딥테크(Deep Tech) 영역으로 소프트웨어 제어력을 확장하기 위함입니다.
• What to Learn:
  • Concepts: 블록체인 합의 알고리즘과 가스(Gas) 역학, 큐비트(Qubit) 중첩 및 양자 내성 암호(PQC), 로보틱스 동역학과 PID/칼만 필터, IoT MQTT 프로토콜과 엣지 컴퓨팅.
  • Skills: 스마트 컨트랙트 불변성 설계, ROS(Robot Operating System) 노드 간 메시지 큐 통신, 초소형 기기의 배터리 및 메모리 제약 하에서의 데이터 오프로딩(Offloading).
  • Tools: Solidity(EVM), Qiskit(양자 시뮬레이션), ROS 2 아키텍처, IoT 프로토콜 분석기.
  • Trade-offs: 탈중앙화를 통한 단일 장애점(SPOF) 해소 및 검열 저항성 확보 vs 합의 과정에 소모되는 천문학적인 연산 지연 및 트랜잭션 수수료(Gas).
• How to Learn:
  • 1단계: 기존의 중앙 집중형 데이터베이스 모델과 블록체인의 머클 트리(Merkle Tree) 구조를 비교하며, 분산 환경에서 어떻게 상태 일관성을 검증하는지 수학적으로 증명합니다.
  • 2단계: 로봇의 센서 값(노이즈 발생)을 보정하는 칼만 필터(Kalman Filter)와 모터 제어(PID) 알고리즘을 물리 시뮬레이션 환경에서 구현하여 소프트웨어가 물리 세계를 통제하는 역학을 이해합니다.
• Implement: 초저전력 IoT 디바이스에서 수집한 센서 데이터를 엣지 런타임에서 1차 가공 후, 분산 원장(Blockchain)에 무결성을 보장하며 기록하는 차세대 데이터 파이프라인 프로토타입.

7. Terminology

8. References

Primary References

• [P1] CS2023: Software Systems — Web-based and Mobile Systems KAs.
• [P2] SWEBOK v4.0: Quality — Platform Compliance & Performance.
• [P5] SFIA v9: Digital Transformation — 신기술 도입 및 최신 웹 표준 설계 역량.

Secondary References

• [W3C Standards] — 글로벌 개방형 웹 기술 표준 상세 규격서.
• [MDN Web Docs] — 웹 개발 API 및 브라우저 호환성의 가장 공신력 있는 참조처.

Industry References

• [Google V8 Engineering] — 엔진 레벨의 자바스크립트 최적화 및 물리 구조 연구 보고서.
• [Cloudflare Learning] — 엣지 컴퓨팅 및 HTTP/3 차세대 네트워크 운영 가이드라인.

9. Final Checklist

Primary Checklist

• 브라우저 렌더링 전 과정을 이해하고 특정 CSS 속성 변경이 레이아웃에 미치는 수리적 오버헤드를 설명할 수 있는가? (P1)
• 동일 출처 정책(SOP) 및 CORS 설정이 서비스의 데이터 보안 경계를 어떻게 결정하는지 명확히 알고 있는가? (P1-WB)

Secondary Checklist

• 서비스 워커를 통해 네트워크 가용 수치가 0인 환경에서도 사용자 상태 정보가 보존되도록 설계했는가?
• 어플리케이션의 핵심 웹 성능 지표(Core Web Vitals)를 모니터링하고 임계치 미달 시의 개선안을 도출했는가?

Industry Checklist

• 고도화된 스크립트 공격(XSS) 방지를 위해 엄격한 Content Security Policy(CSP)를 적용하고 관리하는가?
• 연산량이 많은 복잡한 로직을 WASM으로 이식하여 메인 스레드의 응답성(Responsiveness)을 확보했는가?