Web & Emerging Technologies

1. Overview

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

CS2023의 Software Systems (Web-based Systems) 지식 영역과 SWEBOK의 플랫폼 품질 역량을 준거로 삼아, 개방형 표준 위에서 안전하고 빠른 어플리케이션을 설계하는 원리를 체계적으로 다룹니다.

2. Scope & Boundaries

In-Scope

브라우저 인터널: 렌더링 파이프라인(CRP), JIT 컴파일러 최적화, 가비지 컬렉션 물리.
모던 웹 프레임워크 & 상태: 컴포넌트 아키텍처, 상태 관리(Signals, Store), SSR/SSG 렌더링 역학.
고성능 웹 API: WebAssembly(WASM), 서비스 워커, WebGPU, WebUSB/WebBluetooth 연동.
웹 보안 아키텍처: CORS/SOP 원리, CSP(Content Security Policy), HSTS 및 세션 거버넌스.
차세대 에코시스템: QUIC/HTTP3, 엣지 런타임(Edge Computing), 탈중앙화 웹 및 DID 기술.

Out-of-Scope

그래픽 디자인 요소: 미학적 컬러 가이드 및 타이포그래피 (12. HCG 노드로 위임).
영속성 레이어 물리: 서버측 DB 커널 튜닝 및 인덱스 물리 구조 (06. DIM 노드로 위임).
특정 서비스 비즈니스 프로토콜: 도메인 종속적인 커스텀 API 명세 (07. SADS 노드로 위임).

Boundaries

WET은 단순히 정보를 '표시'하는 것을 넘어, 브라우저라는 **'범용적 가상 실행 환경'**에서 시스템 자원을 어떻게 효율적으로 사용하고 보안 경계를 유지할 것인가에 집중합니다.

3. Counterexample

프레임워크 API 암기: 단순히 React나 Vue의 문법을 외우는 것은 WET 학습이 아닙니다. 해당 프레임워크가 실질적으로 브라우저의 **메인 스레드 점유 시간(TBT)**에 어떤 영향을 주는지 공학적으로 분석하고 최적화할 수 있어야 합니다.
단순 외부 SDK 연동: 라이브러리를 붙여 기능을 구현하는 것보다, 브라우저의 **동일 출처 정책(SOP)**이 왜 데이터 통신을 차단하는지 원리를 이해하고, 인증서 체인 및 프로토콜 수준의 해결책을 설계하는 과정이 핵심입니다.

4. Prerequisites

네트워크 및 통신 (Basic): HTTP 각 버전의 물리적 차이와 TLS 1.3 핸드셰이크 과정 이해. (P1)
컴퓨터 구조 (Recommended): 바이트코드 실행 원리 및 CPU 캐시 로컬리티가 성능에 미치는 영향. (P1)
운영체제 기초 (Practical): 커널의 프로세스/스레드 모델과 브라우저의 멀티 프로세스 아키텍처 상관관계. (P1)

5. Learning Map

Engine Internals: 브라우저가 코드를 해석하고 화면에 픽셀을 그리는 렌더링 파이프라인(CRP)을 파악합니다. (P1 Systems)
Framework Dynamics: 최신 프레임워크가 추구하는 선언적 UI와 효율적인 상태 업데이트 역학을 배웁니다.
Standard APIs: 공식 웹 표준(W3C)과 WASM 등 브라우저의 한계를 넘는 확장 기술을 익힙니다.
Hardened Web Security: 브라우저 환경 고유의 공격 벡터를 분석하고 전사적 보안 정책을 코드로 구현합니다.
Edge & Future Fabric: 웹 기술이 엣지 런타임, IoT, 그리고 분산 신원 증명과 융합되는 지점을 탐구합니다.

6. Learning Topics

Basic

Core Topic 01: 브라우저 렌더링 파이프라인 (Critical Rendering Path)

Why to Learn: 불필요한 레이아웃 재계산(Reflow)과 페인트(Repaint) 공정을 원천적으로 방지하여 부드러운 사용자 경험을 제공하기 위함입니다.
What to Learn:
- Concepts: DOM/CSSOM 생성, 렌더 트리 결합, Layout/Paint/Composite 단계.
- Skills: 하드웨어 가속(GPU)이 적용되는 속성과 메인 스레드 블로킹 요소 식별.
- Tools: Chrome DevTools(Performance), Lighthouse.
- Trade-offs: 고품질 시각 효과 vs 렌더링 처리량(FPS) 확보.
How to Learn:
- 1단계: 브라우저 개발자 도구를 켜고 특정 페이지의 애니메이션 실행 시 발생하는 Reflow 수치를 정량 측정합니다.
- 2단계: RequestAnimationFrame과 레이어 분리 기술을 적용하여 60FPS를 유지하는 렌더링 최적화를 수행합니다.
Implement: 렌더링 단계별 소요 시간을 추적하고 최적화 포인트가 기술된 성능 분석 보고서.

Why to Learn: 네트워크 단절 상황에서도 앱처럼 동작하는 '오프라인 우선' 경험을 통해 서비스 가용성을 극대화하기 위함입니다.
What to Learn:
- Concepts: 서비스 워커 생명주기, Fetch 이벤트 가로채기, Cache Storage API 전략.
- Skills: 정적 자원 및 데이터의 캐싱 정책(Cache First vs Network First) 설계.
- Tools: Workbox, manifest.json.
- Trade-offs: 데이터 최신성(Freshness) 유지 vs 즉각적인 로딩 속도(Performance).
How to Learn:
- 1단계: 직접 서비스 워커를 작성하여 네트워크 연결이 끊긴 상태에서도 특정 페이지가 정상 노출되게 만듭니다.
- 2단계: 백그라운드 동기화(Sync API)를 사용하여 오프라인에서 발생한 요청을 네트워크 복구 시 자동 전송합니다.
Implement: 오프라인 대응 및 푸시 알림 기능이 수치적으로 검증된 PWA(Progressive Web App).

Practical

Core Topic 03: 웹어셈블리 및 저수준 웹 컴퓨팅 (WebAssembly & WASM)

Why to Learn: 자바스크립트의 성능 한계를 넘어 이미지 처리, 물리 연산 등 연산 집약적 작업을 브라우저에서 수행하기 위함입니다.
What to Learn:
- Concepts: WASM 바이너리 포맷, 선형 메모리 모델, JS와 WASM 간의 데이터 교환 인터페이스.
- Skills: C++/Rust 코드를 WASM으로 컴파일하고 브라우저 런타임에서 안정적으로 구동하는 설계.
- Tools: Emscripten, wasm-bindgen, WebAssembly Studio.
- Trade-offs: 저수준 실행 속도 vs 초기 모듈 로딩 시의 지연 시간 및 가독성 저하.
How to Learn:
- 1단계: 특정 암호화 혹은 이미지 필터링 알고리즘을 JS와 WASM으로 각각 구현하여 연산 성능을 정밀 측정합니다.
- 2단계: WASM의 공유 메모리와 워커 스레드를 연동하여 멀티스레딩 성능 향상치를 도출합니다.
Implement: WASM 모듈을 활용하여 대용량 데이터를 처리하는 고효율 웹 분석 컴포넌트.

Advanced

Core Topic 04: 엣지 런타임과 차세대 프로토콜 (Edge Runtime & HTTP/3)

Why to Learn: 고전적인 서버-클라이언트 모델을 탈피하여 사용자에게 가장 가까운 위치(Edge)에서 지능적인 처리를 수행하기 위함입니다.
What to Learn:
- Concepts: 0-RTT 핸드셰이크(QUIC), 서버 푸시, 엣지 사이드 렌더링(ESR), Isomorphic JavaScript.
- Skills: 전역 지연 시간을 최소화하기 위한 엣지 연산 포인트 식별 및 데이터 분산 설계.
- Tools: Cloudflare Workers, Vercel Edge Runtime, QUIC-Go.
- Trade-offs: 응답 속도 극대화 vs 분산된 엣지 노드 간의 상태 동기화 복잡도.
How to Learn:
- 1단계: 엣지 런타임에 경량 API를 배포하고 전 세계 리전별 응답 시간 변화를 벤치마크합니다.
- 2단계: HTTP/3와 HTTP/2 환경에서 대량 자원 로딩 시 헤드 오브 라인 블로킹(HOL) 해소 과정을 비교 분석합니다.
Implement: 엣지 런타임 기반의 동적 콘텐츠 최적화 및 보안 처리 아키텍처 제안서.

7. Terminology

Term (EN / ko, abbr)	1문장 정의	단계(기본/권장/실무/심화)	역할/맥락	관련 개념	유사/대비/함께 사용	오해 포인트	Evidence(Primary/Secondary/Industry)	Flags(core)
JIT Compiler	실행 시점에 빈번히 사용되는 코드 영역을 즉시 기계어로 번역하여 속도를 높이는 최적화 수단입니다.	기본	성능 향상	V8, TurboFan	vs. Interpreter	모든 코드를 시작할 때 한꺼번에 구동한다고 착각함	Industry Blog	core
Service Worker	브라우저 백그라운드에서 실행되며 네트워크 요청 가로채기 및 캐싱을 제어하는 프록시 스크립트입니다.	권장	기능 확장	PWA, Cache	vs. Web Worker	DOM 구조에 직접 접근하여 수정할 수 있다고 오해함	Industry Docs	core
WebAssembly	브라우저 샌드박스 내부에서 네이티브에 가까운 속도로 동작하는 컴팩트 바이트코드 포맷입니다.	실무	가용성 확장	바이너리	vs. JavaScript	자바스크립트를 완전히 대체하기 위해 만든 기술로 오해	Industry Standard	core
Preflight Request	교차 출처(CORS) 요청 시 실제 전송 전 서버의 허가를 미리 확인하는 예비 OPTIONS 요청입니다.	기본	보안 통제	CORS, SOP	vs. Simple Request	단순한 인프라 지연이나 네트워크 오류로 오해하기 쉬움	Industry 6454	core

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)을 확보했는가?