표제지
목차
ABSTRACT 11
제1장 서론 14
제1절 연구의 필요성 14
제2절 연구의 차별성 18
1. 클라이언트 레벨의 CPU, GPU 통합 가속화 기술 18
2. 범용 웹 브라우저 기반 멀티플랫폼 가속화 실행 기술 18
3. 바이너리 실행파일 포맷 기반 소스 코드 보안성 향상 19
4. 웹 브라우저 하드웨어 가속 옵션과의 차이점 19
제3절 연구 목표 및 기대효과 21
1. 연구 목표 21
2. 기대 효과 22
제2장 관련연구 25
제1절 웹 표준 기술 25
1. WebCL 30
2. WebGL 32
3. WebGPU 33
4. WebWorker 35
5. WASM(Web Assembly) 36
6. 관련 기술들과 본 연구와의 비교 분석 38
제2절 웹 기반 병렬처리 기술 39
1. HighWeb 39
2. gpu.js 40
제3절 고성능 웹 애플리케이션 개발 사례 분석 41
1. 웹 기반 인공지능 기술 41
2. 웹 기반 이미지 프로세싱 44
3. 웹 브라우저 이외의 실행 환경에서 웹 표준 기술 적용 사례 46
제3장 HiWA 프레임워크 51
제1절 시스템 구성도 51
제2절 프로그램 로더 54
1. HiWA 프로그램 로더 54
2. WASM 파일 로딩 프로세스 55
3. WebGPU Shader 로딩 프로세스 57
4. 프레임워크 API (Application Programming Interface) 57
제3절 작업 할당 관리자 59
1. 작업 할당 프로세스 59
2. HiWA 프레임워크의 작업 타입 61
3. 실행 환경 정보 프로파일러 62
제4절 HiWA 파일 생성 및 패키징 파일 포맷 64
1. HiWA 파일 생성 프로세스 64
2. HiWA 소스 코드 작성 예시 66
3. HiWA 실행 파일 포맷 구조 67
제4장 구현 및 성능 평가 71
제1절 성능 향상 기법 적용 71
1. GPU 셰이더의 중첩 실행 기법 71
2. 사전 컴파일된 WASM 바이너리 재사용 기법 73
3. SharedArrayBuffer 공유 메모리 기반 설계 76
제2절 행렬곱셈을 이용한 성능 평가 76
1. 행렬곱셈 알고리즘 76
2. 실험환경 정보 78
3. 실험 결과 80
4. 웹 브라우저에 따른 처리 속도 측정 결과 82
제3절 이미지 필터 알고리즘을 이용한 성능 평가 84
1. 이미지 필터 알고리즘 개요 84
2. 실험 환경 정보 88
3. 실험 결과 90
제5장 결론 및 향후 계획 93
제1절 결론 93
제2절 향후 계획 94
1. 주요 웹 개발 프레임워크 및 IDE 개발 도구와의 연동 94
2. 다양한 응용 애플리케이션 개발을 통한 확장 및 검증 95
3. IoT 및 엣지 컴퓨팅으로의 확장 적용 방안 연구 95
참고문헌 98
부록 105
[부록 1] Matrix Multiplication Code - Javascript 105
[부록 2] Matrix Multiplication Code - WASM 106
[부록 3] Matrix Multiplication Code - WebGPU Shader 107
국문초록 108
〈표 1-1〉 웹 브라우저 가속 옵션 적용과의 비교 분석 21
〈표 2-1〉 공개 프로젝트별 WebCL 구현현황 31
〈표 2-2〉 웹 고속화 기술 및 제안 시스템의 비교 분석 38
〈표 2-3〉 컴퓨팅 기술 타입에 따른 특장점 비교 분석 49
〈표 3-1〉 HiWA 프레임워크의 주요 모듈에 대한 설명 52
〈표 3-2〉 웹 어셈블리 지원 여부를 체크하는 로직 55
〈표 3-3〉 HiWA 프레임워크의 주요 API 명세서 57
〈표 3-4〉 Env Profiler에서 제공하는 스캔 항목 63
〈표 4-1〉 컴파일된 WASM 코드를 캐시에 저장한 후 재사용하는 예시 코드 74
〈표 4-2〉 행렬 곱셈 알고리즘 의사코드 77
〈표 4-3〉 실험 환경 정보 79
〈표 4-4〉 실험에 사용된 웹 브라우저 정보 83
〈표 4-5〉 실험 데이터 내용 90
〈그림 1-1〉 고성능 웹 애플리케이션의 적용 분야 14
〈그림 1-2〉 웹 브라우저 발전에 따른 응용 애플리케이션 적용 범위의 확장 15
〈그림 1-3〉 CPU 및 GPU 기반 클라이언트 레벨에서의 가속화 실행 구조 17
〈그림 1-4〉 크롬 웹 브라우저의 하드웨어 가속 옵션 20
〈그림 1-5〉 CPU-GPU 이종환경 기반의 통합 엔진 구조 22
〈그림 2-1〉 웹 브라우저 및 관련 기술의 발전사 26
〈그림 2-2〉 CPU-GPU 환경에 따른 웹 고속화 기술 발전사 27
〈그림 2-3〉 WebCL API 구조도 30
〈그림 2-4〉 WebGL 기반 주요 3D 그래픽 라이브러리 32
〈그림 2-5〉 WebGPU 시스템 계층 33
〈그림 2-6〉 크롬 웹 브라우저의 WebGPU 구현 사례 34
〈그림 2-7〉 WebWorker의 동작 구조 35
〈그림 2-8〉 WASM 파일 생성 과정 36
〈그림 2-9〉 웹 브라우저 내부의 WebAssembly 코드 실행 아키텍처 37
〈그림 2-10〉 gpu.js 라이브러리 기반 WebGL Shader 코드로 생성/빌드 구조 41
〈그림 2-11〉 Apache TVM의 시스템 구성도 42
〈그림 2-12〉 TensorFlow.js 라이브러리 기반 시스템 구조 43
〈그림 2-13〉 TensorFlow.js 아키텍쳐 44
〈그림 2-14〉 Photopea - 웹 기반 그래픽 에디터 44
〈그림 2-15〉 photon 라이브러리의 동작 예시 45
〈그림 2-16〉 다양한 플랫폼에서 실행 가능한 WASM 바이너리의 생태계 48
〈그림 3-1〉 HiWA 기반 제안 시스템의 구성도 51
〈그림 3-2〉 HiWA 프로그램 로더의 동작 구조 54
〈그림 3-3〉 WebAssmbly 파일 로드 및 커널 코드 실행 프로세스 55
〈그림 3-4〉 WebGPU Shader 로드 및 커널 코드 실행 프로세스 56
〈그림 3-5〉 Task Assignment 모듈의 작업 할당 구성도 59
〈그림 3-6〉 CPU 및 GPU 연산 중첩 실행을 통한 성능 개선 60
〈그림 3-7〉 Environment Profiler의 실행 환경 정보 스캔 결과 화면 62
〈그림 3-8〉 HiWA 코드 빌드 및 패키징 프로세스 65
〈그림 3-9〉 HiWA 가속화 코드의 작성 예시 67
〈그림 3-10〉 Universal binary 파일 포맷의 구조와 디버깅 화면 68
〈그림 3-11〉 HiWA 실행 파일 포맷 구조 69
〈그림 4-1〉 순차 실행과 동시 실행 71
〈그림 4-2〉 중첩 실행을 통한 성능 측정 비교 결과 72
〈그림 4-3〉 WebAssembly 코드 실행시 처리 구간별 시간 측정 결과 73
〈그림 4-4〉 HiWA 기반 행렬곱 가속화 코드 실행 구조 78
〈그림 4-5〉 코드 타입별 행렬곱 코드 작성 예시 78
〈그림 4-6〉 코드 타입별 Matrix Multiplication 연산 시간 측정 결과 81
〈그림 4-7〉 웹 브라우저별에 따른 시간 측정 결과 82
〈그림 4-8〉 실행 코드 종류에 따른 Matrix 크기별 실행 속도 비교 83
〈그림 4-9〉 웹 기반 이미지 에디터 서비스 예시 84
〈그림 4-10〉 웹 이미지 필터 알고리즘의 실험 구성도 86
〈그림 4-11〉 실행 시퀀스가 적용된 CPU, GPU 커널 코드 실행 프로세스 88
〈그림 4-12〉 실험 데이터 이미지 89
〈그림 4-13〉 이미지 프로세싱 처리 실험 화면 89
〈그림 4-14〉 이미지 필터 실행 시간 측정 결과(이미지#1, 해상도: 400x300) 91
〈그림 4-15〉 이미지 필터 실행 시간 측정 결과(이미지#2, 해상도: 1280x1920) 91
〈그림 4-16〉 이미지 필터 실행 시간 측정 결과(이미지#3, 해상도: 2610 x 4540) 92
〈그림 5-1〉 컴퓨팅 코드 타입에 따른 엣지 컴퓨팅 시스템의 차이 96