[2023 Google I/O] Advanced web APIs in real world apps

원본 링크: https://io.google/2023/program/e282fcf3-5eaf-44ae-99d0-11175ec2ccfc/

Google I/O 2023

 

위 세션은 Advanced web API들을 실제로 사용한 어플리케이션들과 사용된 API를 소개하고 있다.

구글의 Project Fugu에서는 Native App과 Web의 간극을 줄이기 위해 2018년도 부터 노력하고 있다고 한다.
이로 인해 Chromium 기반 브라우저에서 사용할 수 있는 API들이 많아졌고, 해당 API를 통해 Web에서도 App처럼 개발을 할 수 있게 되었다.

간략히 정리해보면 아래와 같다.

1. Photopea: 파일 처리 시 window.LaunchQueue API 사용

API: https://developer.mozilla.org/en-US/docs/Web/API/Window/launchQueue

• 온라인 사진 편집기 Photopea
• JPEG 등 이미지 형식 처리
• PWA 실행 시 커스텀 실행 네비게이션을 가능하게 하는 API LaunchQueue
• API를 통해 Photopea를 기본값으로 하여 이미지 열기

2. Blockbench: window.EyeDropper API 사용

API: https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper

• 저폴리 3D 모델 에디터 Blockbench
• 화면 색상 선택 API EyeDropper
• API를 통해 화면 어디에서나 색상 선택

3. Construct 3: 파일 시스템 접근 API 사용

API: https://developer.mozilla.org/en-US/docs/Web/API/Window/showSaveFilePicker

• 게임 제작 소프트웨어 Construct 3
• 파일 시스템 접근 API window.showSaveFilePicker
• API를 통해 사용자의 게임 파일 시스템에 직접 저장

4. Boxy SVG: 로컬 폰트 접근 API 사용

API: https://developer.mozilla.org/en-US/docs/Web/API/Window/queryLocalFonts

• SVG 생성 및 편집 도구 Boxy SVG
• 사용자의 로컬 폰트 접근 API window.queryLocalFonts
• API를 통해 SVG 편집 시 설치된 폰트 선택 가능

5. Adobe Photoshop: 오리진 프라이빗 파일 시스템 (OPFS)사용

관련 링크: https://developer.chrome.com/articles/origin-private-file-system/

• Adobe Photoshop
• 이미지 확대 성능 최적화
• 빠른 접근을 위한 미리 계산된 Zoom 레벨 저장
• OPFS는 브라우저에서 파일 핸들링을 더 빠르게 할 수 있도록 하는 API
• OPFS를 통해 루트 디렉토리 얻기, 파일 핸들 만들기, 접근 핸들 생성

 

이전 글 https://blue-tang.tistory.com/73 "What's new in web"에서는 웹 표준으로 추가된 기능들을 보았다.

이번에는 달리 Chromium 기반 브라우저에 제약된 신기능들을 살펴보았다. 타 브라우저에서 사용할 수 없으므로 일반적인 웹 개발에 도입하기는 무리가 있을 수 있다. 하지만 적어도 Chromium 세계 안에서는 이런 API들을 통해 원하는 목표를 달성하기 더 쉬워질 것 같다.