처음 MDN에서 Web API 전체 목록을 열어보고 압도당하는 것은 모든 프론트엔드 개발자가 겪는 아주 자연스러운 통과의례입니다. 실험적(Experimental), 폐기된(Deprecated), 비표준(Non-standard), 그리고 브라우저 지원이 제한적인(Limited availability) API들은 모두 과감하게 쳐냈습니다. 남은 정상적이고 표준적인 API들을 프론트엔드 개발자의 실무 활용도와 학습 우선순위에 따라 4단계로 나누어 정리해 드립니다.
🥇 1순위: 프론트엔드 개발의 뼈대 (반드시 완벽히 이해해야 함)
이 API들은 매일 숨 쉬듯이 사용하게 될 핵심 중의 핵심입니다. 가장 먼저, 그리고 가장 깊게 공부하셔야 합니다.
- Document Object Model (DOM) & HTML DOM API: 웹 페이지를 조작하는 가장 기본이자 근본입니다.
- Fetch API: 서버와 데이터를 주고받는 표준 방법입니다. (과거의
XMLHttpRequest를 완벽히 대체합니다) - Web Storage API:
localStorage와sessionStorage. 브라우저에 간단한 데이터를 저장할 때 필수입니다. - URL API: URL을 파싱하고 조작할 때 문자열 조작 대신 반드시 써야 하는 API입니다.
- History API: SPA(Single Page Application) 라우팅(React Router 등)이 어떻게 동작하는지 이해하기 위한 핵심입니다.
- Console API:
console.log,console.error등 디버깅의 영원한 친구입니다.
🥈 2순위: 모던 웹 UI/UX를 위한 필수 무기 (실무 빈도 매우 높음)
1순위를 익히셨다면, 이제 웹을 더 '앱'처럼 매끄럽게 만들기 위해 꼭 알아야 할 API들입니다.
- Intersection Observer API: 무한 스크롤, 이미지 지연 로딩(Lazy loading) 등을 구현할 때 성능 저하 없이 요소를 감지하는 필수 API입니다.
- Resize Observer API: 요소의 크기 변화를 감지하여 반응형 컴포넌트를 만들 때 사용합니다.
- Web Workers API: 무거운 연산을 메인 스레드(UI 스레드)에서 분리하여 브라우저 버벅임을 막아줍니다.
- Canvas API: 동적인 2D 그래픽, 차트 그리기, 간단한 게임 등에 널리 쓰입니다.
- Clipboard API: "복사하기/붙여넣기" 기능을 구현할 때 필수입니다.
- Popover API: 최근 표준이 된 API로, 툴팁이나 모달을 아주 쉽게 만들 수 있습니다.
- View Transition API: 화면 전환 시 끊김 없이 부드러운 애니메이션(SPA/MPA 모두)을 제공하는 떠오르는 핵심 API입니다.
🥉 3순위: 알아두면 든든한 기능 확장 API (필요할 때 찾아 쓰기)
이 API들은 당장 달달 외울 필요는 없습니다. "아, 브라우저에 이런 기능도 있구나" 정도만 인지해 두고, 실무에서 해당 기능이 필요할 때 MDN을 열어보고 적용하시면 됩니다.
- 통신 및 백그라운드:
- WebSocket API: 실시간 양방향 통신 (채팅 등).
- Service Worker API: 오프라인 캐싱과 PWA(Progressive Web App)의 핵심.
- Server-sent events: 서버에서 클라이언트로 단방향 실시간 데이터 밀어주기.
- 파일 및 기기 제어:
- File API: 사용자가 업로드한 파일을 브라우저에서 다룰 때 사용.
- Geolocation API: 사용자의 현재 위치(GPS) 정보 가져오기.
- Media Capture and Streams API: 웹캠, 마이크 접근.
- 사용자 경험(UX):
- Web Animations API: CSS 애니메이션을 JS로 더 정교하게 제어.
- Fullscreen API: 영상이나 특정 요소를 전체 화면으로 만들기.
- HTML Drag and Drop API: 드래그 앤 드롭 구현.
💼 4순위: 특정 도메인 전용 API (해당 분야로 갈 때만 공부)
아래 API들은 매우 강력하지만, 일반적인 웹 서비스보다는 특수한 목적(웹 게임, 화상 회의, 보안 등)의 서비스를 개발할 때만 사용됩니다. 지금은 우선순위에서 완전히 미루셔도 좋습니다.
- 그래픽 및 미디어:
WebGL,WebGPU,Web Audio API,WebRTC API(화상 회의),WebCodecs API - 보안 및 암호화:
Web Crypto API,Web Authentication API - 결제 및 알림:
Payment Request API,Push API,Notifications API - 데이터베이스:
IndexedDB API(프론트엔드에서 대용량 데이터를 다뤄야 할 때)
4순위로 분류했던 API들은 일반적인 웹 페이지 개발보다는 특정 도메인의 전문적인 웹 애플리케이션(웹 게임, 화상 회의, 암호화폐 지갑 등)을 만들 때 빛을 발하는 강력한 도구들입니다.
각각 어떤 역할을 하는지 뼈대만 간단히 짚어드리겠습니다.
🎮 1. 그래픽 및 미디어 (Graphics & Media)
브라우저를 단순한 문서 뷰어가 아닌, 고성능 애플리케이션이나 게임 엔진처럼 동작하게 만드는 API들입니다.
- WebGL API: 브라우저에서 그래픽 카드(GPU)를 활용해 고성능 2D 및 3D 그래픽을 렌더링합니다. 직접 다루기엔 난이도가 매우 높아, 실무에서는 주로
Three.js같은 라이브러리를 통해 간접적으로 사용합니다. - WebGPU API: WebGL의 후속작으로 등장한 차세대 그래픽 API입니다. 하드웨어(GPU)에 훨씬 더 가깝게 접근할 수 있어, WebGL보다 압도적으로 뛰어난 렌더링 성능과 연산 능력을 제공합니다.
- Web Audio API: 단순한
<audio>태그 재생을 넘어섭니다. 소리에 에코를 넣거나, 여러 소리를 믹싱하고, 오디오 파형을 분석해 시각화하는 등 브라우저용 '음악 편집기' 수준의 정교한 오디오 처리가 가능합니다. - WebRTC API: 서버를 거치지 않고 사용자 간(Peer-to-Peer) 직접 비디오, 오디오, 임의의 데이터를 실시간으로 주고받게 해줍니다. 구글 미트(Google Meet)나 디스코드 같은 화상 회의, 음성 채팅 서비스의 핵심 기술입니다.
- WebCodecs API: 비디오나 오디오의 압축(인코딩)과 압축 해제(디코딩)를 프론트엔드에서 직접 제어할 수 있는 아주 낮은 수준(Low-level)의 API입니다. 웹 기반 동영상 편집기 등을 만들 때 사용합니다.
🔒 2. 보안 및 암호화 (Security & Encryption)
사용자의 민감한 데이터를 보호하고 안전한 인증을 구현할 때 사용합니다.
- Web Crypto API: 브라우저 자체적으로 안전한 난수를 생성하거나, 데이터를 암호화/복호화하고, 해시(Hash) 값을 만드는 등 보안 관련 수학적 연산을 수행합니다. 비밀번호 관리자나 암호화폐 지갑 등에서 필수적입니다.
- Web Authentication API (WebAuthn): 귀찮고 불안전한 '비밀번호'를 대체하는 최신 표준입니다. 노트북의 지문 인식기, 스마트폰의 Face ID, 혹은 USB 보안 키(YubiKey) 등을 사용해 웹사이트에 로그인할 수 있게 해줍니다.
💸 3. 결제 및 알림 (Payment & Notifications)
모바일 앱과 유사한 사용자 경험(UX)과 기능을 웹에서 제공하기 위한 API들입니다.
- Payment Request API: 쇼핑몰마다 제각각인 결제 폼을 입력하는 대신, 브라우저가 제공하는 깔끔하고 통일된 결제 UI를 띄워줍니다. 사용자가 브라우저에 미리 저장해 둔 신용카드 정보나 배송지를 바로 불러올 수 있어 결제 이탈률을 줄여줍니다.
- Push API: 웹 브라우저가 꺼져 있어도, 심지어 모바일 화면이 잠겨 있어도 서버로부터 푸시 메시지를 받아올 수 있게 해줍니다. (3순위의
Service Worker와 짝꿍으로 동작합니다.) - Notifications API: 운영체제(Windows, macOS, Android 등)의 네이티브 알림 창을 띄워주는 기능입니다. 카카오톡 웹버전에서 새 메시지가 왔을 때 화면 구석에 뜨는 바로 그 알림입니다.
🗄️ 4. 데이터베이스 (Database)
- IndexedDB API:
localStorage는 용량이 매우 적고(약 5MB) 동기적으로 동작하여 메인 스레드를 멈추게 하는 단점이 있습니다. IndexedDB는 기가바이트 단위의 크고 복잡한 구조화된 데이터를 비동기적으로 브라우저에 저장할 수 있는 진짜 '클라이언트용 데이터베이스'입니다. 오프라인에서도 작동하는 웹 앱(PWA)을 만들 때 유용합니다.
