클라이언트 측 웹 API 입문: 브라우저에서 복잡한 기능을 빌려 쓰는 규칙

한 문장으로 이해하기

클라이언트 측 웹 API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 복잡한 내부 코드를 감추고, 개발자가 더 쉬운 방식으로 기능을 사용하도록 돕는 프로그래밍 인터페이스다.

이 강좌를 마치면 첫째, 클라이언트 측 웹 API가 복잡한 코드를 추상화하는 인터페이스임을 자기 말로 설명할 수 있다. 둘째, 브라우저 API와 서드파티 API(제3자 제공 API)를 구분할 수 있다. 셋째, 객체·진입점·이벤트가 API 사용에서 하는 역할을 설명할 수 있다.

왜 필요한가

어떤 기능은 내부 작동이 매우 복잡하다. 그 복잡한 부분을 매번 직접 다뤄야 한다면 웹 개발은 훨씬 어려워진다. API는 복잡한 코드를 추상화한다. 추상화란 어려운 세부 사항을 감추고 꼭 필요한 사용 방법만 밖으로 드러내는 것을 말한다. 덕분에 개발자는 저수준 제어 코드를 직접 작성하는 것보다 훨씬 다루기 쉬운 방식으로 기능을 사용할 수 있다.

클라이언트 측 자바스크립트에서 API는 두 갈래로 나뉜다. 브라우저 API는 웹 브라우저 안에 내장되어 있다. 서드파티 API는 브라우저에 기본 내장되지 않으며, 일반적으로 웹의 외부 제공처에서 코드나 정보를 가져와 사용한다.

어느 쪽이든 개발자가 내부 구현을 몰라도 된다는 점은 같다. 짧은 비유를 하나만 덧붙이면, 집에서 전자기기를 쓸 때 전력 공급망에 전선을 직접 배선하지 않고 콘센트에 플러그를 꽂기만 하면 되는 것과 같다. API도 정해진 접점만 알면 기능을 쓸 수 있다.

어떻게 이루어지는가

API마다 세부 방식은 조금씩 다르지만, 사용 흐름은 대체로 다음 단계를 따른다.

1. 진입점을 확인한다. 진입점이란 그 API의 기능을 사용하기 시작하는 출발 지점이다.
2. 진입점에 해당하는 객체를 만들거나 참조한다. 객체는 데이터를 담는 속성과, 사용할 수 있는 기능을 담는 메서드로 이루어진 묶음이다.
3. 객체의 속성과 메서드를 통해 원하는 기능을 사용한다. 자바스크립트 코드는 이렇게 하나 이상의 객체를 통해 API와 상호작용한다.
4. 필요하면 이벤트를 처리한다. 이벤트란 재생 종료 같은 상태 변화가 일어난 순간을 알려주는 신호다. 일부 API는 이벤트를 사용하지 않지만, 대부분은 상태 변화에 대응할 수 있는 이벤트를 적어도 일부 제공한다.

즉 객체와 진입점은 API 사용에서 반복해서 나타나는 특징이고, 이벤트 지원 여부는 API마다 다르다.

하나의 예시로 따라가기

아래는 실제 서비스 사례가 아니라, 출처인 MDN 문서의 교육용 코드 예시를 바탕으로 재구성한 설명이다. 브라우저 내장 API인 Web Audio API로 웹 페이지에서 소리를 다루는 과정을 따라가 보자.

1. 진입점 객체인 AudioContext(오디오 컨텍스트)를 만든다. Web Audio API에서는 이 객체가 진입점 역할을 하므로, 여기서부터 오디오 기능을 사용하기 시작한다.
2. 페이지의 오디오 요소를 소리의 출발점, 즉 소스로 만든다.
3. 소스를 음량을 조절하는 노드에 연결한다. 노드란 소리 신호가 거쳐 가는 처리 단위를 말한다.
4. 음량 조절 노드를 출력 목적지에 연결한다. 목적지는 소리가 최종적으로 나가는 지점이다.

앞의 4단계 흐름이 그대로 나타난다. 진입점 객체를 먼저 만들고, 그 객체가 제공하는 메서드로 소스와 노드를 만들어 연결한다. 개발자는 소리 처리의 내부 구현을 전혀 건드리지 않는다. API가 그 복잡함을 감추고 있기 때문이다.

언제 쓰고 언제 쓰지 않는가

브라우저 API는 브라우저에 내장되어 있으므로, 브라우저 환경에서 자바스크립트로 바로 접근해 쓰기에 적합하다. 외부 서비스의 기능이나 정보가 필요할 때는 서드파티 API를 살펴보되, 브라우저에 기본 내장되지 않으므로 일반적으로 외부 제공처에서 코드나 정보를 가져오는 절차가 필요하다는 점을 기억한다.

주의할 점도 있다. API마다 작동 방식이 조금씩 다르므로, 사용하기 전에 그 API의 진입점이 무엇인지, 어떤 객체·속성·메서드를 제공하는지 문서에서 확인해야 한다. 또 이벤트는 모든 API의 공통 요소가 아니다. 일부 API에는 이벤트가 없으므로, 상태 변화에 반응하는 코드를 쓰려면 그 API가 어떤 이벤트를 제공하는지 먼저 확인해야 한다. 마지막으로 이 강좌의 범위는 클라이언트 측 자바스크립트 API다. 여기서 배운 내용이 모든 종류의 API에 그대로 적용된다고 단정하지 않는 것이 안전하다.

핵심 정리와 확인문제

핵심 정리 — 클라이언트 측 웹 API는 복잡한 내부 코드를 추상화해 개발자가 더 쉬운 방식으로 기능을 쓰게 해준다. 브라우저 API는 브라우저에 내장되고, 서드파티 API는 일반적으로 외부 제공처에서 코드나 정보를 가져온다. 자바스크립트는 객체를 통해 API와 상호작용하고 진입점에서 사용을 시작하며, 이벤트 지원 여부는 API마다 다르다.

확인문제 1. 브라우저 API와 서드파티 API의 차이를 한 문장으로 설명해 보자.

정답·해설: 브라우저 API는 웹 브라우저에 내장되어 있고, 서드파티 API는 브라우저에 기본 내장되지 않아 일반적으로 웹의 외부 제공처에서 코드나 정보를 가져와야 한다.

확인문제 2. Web Audio API 예시에서 AudioContext를 가장 먼저 만드는 이유는 무엇이며, 이 과정은 API의 추상화 역할을 어떻게 보여주는가?

정답·해설: AudioContext가 Web Audio API의 진입점이기 때문이다. 진입점은 API 기능을 사용하기 시작하는 출발 지점이므로, 이 객체를 먼저 만든 뒤에야 소스와 노드를 만들어 연결할 수 있다. 이 과정에서 개발자는 소리 처리의 복잡한 내부 구현을 전혀 다루지 않고 객체의 메서드만 사용한다. 어려운 세부 사항은 API가 감추고 꼭 필요한 사용 방법만 드러내는 것, 이것이 바로 추상화다.

확인문제 3. “모든 웹 API는 이벤트를 제공한다"는 말은 맞는가? 이유와 함께 답해 보자.

정답·해설: 맞지 않다. 일부 API는 이벤트를 사용하지 않는다. 다만 대부분의 API는 상태 변화에 대응할 수 있는 이벤트를 적어도 일부 제공하므로, 사용 전에 해당 API의 문서에서 확인하면 된다.

참고자료

• 웹 API 입문 참고자료