Vanilla Web: You don't need that library

개발#javascript#dom#설계

발표 영상을 보고 정리한 글입니다. 원본 발표: Vanilla Web: You Don’t Need that Library — Maximiliano Firtman

다음은 Maximiliano Firtman이 GOTO Chicago 2024에서 발표한 “Vanilla Web: You don’t need that library” 강연을 상세히 요약한 내용입니다.

서론: 바닐라 웹의 귀환

Maximiliano Firtman은 자신을 1996년부터 HTML, 1998년부터 자바스크립트를 다루어 온 ‘공룡’ 개발자라고 소개하며 강연을 시작합니다. 그는 초창기 웹 개발 시절, 프레임워크나 라이브러리 없이 순수 자바스크립트(바닐라 JS)로 150개 이상의 웹 앱을 만들었던 경험을 공유합니다. 그는 오늘날 웹 개발 생태계가 수많은 라이브러리와 프레임워크, 그리고 node_modules 폴더의 엄청난 복잡성에 압도당하고 있다고 지적합니다. 과거의 단순했던 개발 환경과 현재의 복잡한 환경을 대조하며, 이 강연의 목적이 최신 라이브러리나 트렌드를 맹목적으로 따르는 것이 아니라, 웹 개발의 근본적인 목표, 즉 좋은 사용자 경험(UX), 접근성, 고성능, 훌륭한 소프트웨어 아키텍처를 달성하는 것임을 상기시킵니다. Firtman은 개발자 경험(DX)이 중요하지만, 그것이 최우선 순위가 되어서는 안 되며, 궁극적으로는 ’사용자’를 위한 개발을 해야 한다고 강조합니다.

바닐라 JS에 대한 두려움과 오해 극복하기

Firtman은 많은 개발자들이 바닐라 JS로 프로젝트를 진행하는 것에 대해 몇 가지 큰 두려움을 가지고 있다고 말하며, 이를 하나씩 짚어 나갑니다.

  1. 클라이언트 사이드 라우팅 (Client-side Routing): 대부분의 개발자들은 React Router나 Vue Router 같은 라이브러리 없이는 싱글 페이지 애플리케이션(SPA)의 라우팅 구현이 불가능하다고 생각합니다. 하지만 Firtman은 브라우저에 내장된 History API만으로도 충분히 구현 가능하다고 설명합니다. history.pushState() 메서드를 사용하여 브라우저의 탐색 기록에 ‘가짜’ URL을 추가하고, popstate 이벤트를 리스닝하여 사용자가 뒤로 가기/앞으로 가기 버튼을 눌렀을 때의 변화를 감지할 수 있습니다. 이를 통해 DOM의 일부 콘텐츠만 동적으로 교체함으로써 SPA의 핵심적인 라우팅 기능을 구현할 수 있음을 보여줍니다.
  2. 지나치게 장황한 코드 (Too Verbose): 바닐라 JS 코드가 라이브러리를 사용하는 것보다 훨씬 길고 복잡할 것이라는 우려가 많습니다. Firtman은 이것이 부분적으로는 사실일 수 있지만, 개발자가 직접 마이크로 프레임워크나 유틸리티 함수를 만들어 재사용함으로써 코드의 장황함을 충분히 줄일 수 있다고 주장합니다. 즉, 모든 것을 처음부터 다시 만드는 것이 아니라, 프로젝트에 맞는 자신만의 작은 도구를 만드는 것입니다.
  3. 상태 관리 (State Management): Redux, Vuex, Pinia와 같은 상태 관리 라이브러리는 복잡한 애플리케이션의 상태를 관리하는 데 필수적이라고 여겨집니다. Firtman은 바닐라 JS의 Proxy 객체와 옵저버 패턴(Observer Pattern)을 결합하면 간단하면서도 강력한 반응형 프로그래밍(Reactive Programming)을 구현할 수 있다고 설명합니다. Proxy를 사용해 데이터 객체를 감싸고, get과 set 핸들러를 통해 데이터의 읽기와 쓰기를 가로챕니다. set 핸들러 내에서 UI를 업데이트하는 로직을 실행하면, 데이터가 변경될 때마다 UI가 자동으로 동기화되는 반응형 시스템을 만들 수 있습니다. 이는 복잡한 라이브러리 없이도 ‘단일 진실 공급원(Single Source of Truth)’ 패턴을 유지할 수 있게 해줍니다.
  4. 템플릿팅 (Templating): JSX나 Vue 템플릿과 같은 선언적 UI 작성 방식에 익숙한 개발자들은 바닐라 JS에서의 DOM 조작이 번거롭다고 느낍니다. Firtman은 ES6의 태그된 템플릿 리터럴(Tagged Template Literals)을 활용하면 이 문제를 해결할 수 있다고 제안합니다. 이는 lit-html과 같은 마이크로 라이브러리가 사용하는 핵심 기술로, HTML 문자열 내부에 자바스크립트 변수나 표현식을 쉽게 삽입하고, 효율적으로 DOM을 업데이트할 수 있게 해줍니다.
  5. 재사용 가능한 컴포넌트 (Reusable Components): React, Vue, Angular의 가장 큰 장점 중 하나는 컴포넌트 기반 아키텍처입니다. Firtman은 브라우저 표준 기술인 웹 컴포넌트(Web Components)가 바로 이 문제를 해결하기 위해 등장했다고 강조합니다.

웹 컴포넌트: 바닐라 웹의 슈퍼파워

Firtman은 웹 컴포넌트가 바닐라 웹 개발의 핵심적인 솔루션이라고 말하며, 이를 구성하는 세 가지 주요 표준 기술을 상세히 설명합니다.

  1. 커스텀 엘리먼트 (Custom Elements): 개발자가 자신만의 HTML 태그를 정의하고, 그 태그에 특정 동작과 기능을 부여할 수 있게 해주는 API입니다. customElements.define() 메서드를 사용하여 태그 이름과 해당 태그의 동작을 정의하는 자바스크립트 클래스를 연결합니다. 이렇게 만들어진 커스텀 엘리먼트는 일반 HTML 태그처럼 문서 내에서 자유롭게 사용할 수 있습니다.
  2. HTML 템플릿 (<template> Element): <template> 태그 안에 포함된 HTML 콘텐츠는 초기에 렌더링되거나 파싱되지 않습니다. 이는 재사용할 UI 조각을 미리 정의해두고, 필요할 때마다 자바스크립트를 통해 복제하여 DOM에 삽입하는 용도로 사용됩니다. 이를 통해 초기 렌더링 성능을 향상시키고, 마크업 구조를 깔끔하게 유지할 수 있습니다.
  3. 섀도우 DOM (Shadow DOM): 웹 컴포넌트의 가장 강력한 기능 중 하나로, 컴포넌트의 내부 DOM 트리(섀도우 트리)를 외부의 메인 DOM과 완전히 격리시킵니다. 이 격리된 환경 덕분에 컴포넌트 내부의 CSS 스타일이 외부 문서에 영향을 주지 않고, 반대로 외부의 스타일이 컴포넌트 내부에 영향을 주는 것을 막을 수 있습니다. 이는 진정한 의미의 캡슐화와 스타일 스코핑(style scoping)을 가능하게 하여, CSS 충돌 문제를 원천적으로 해결합니다.

Firtman은 이 세 가지 기술을 조합하면, 프레임워크에 의존하지 않고도 모듈화되고, 재사용 가능하며, 캡슐화된 컴포넌트를 만들 수 있음을 강조합니다.

웹 앱의 진정한 힘: PWA와 브라우저 API

강연의 마지막 부분에서 Firtman은 현대 웹이 단순히 문서를 보여주는 것을 넘어, 네이티브 앱과 유사한 강력한 경험을 제공할 수 있는 플랫폼임을 역설합니다. 그는 자신이 구글과 함께 제작한 무료 온라인 강좌인 ’Learn PWA’를 소개하며 프로그레시브 웹 앱(Progressive Web Apps, PWA)의 중요성을 설명합니다. PWA는 웹 앱을 사용자의 홈 화면에 설치하고, 오프라인에서도 동작하게 하며, 푸시 알림과 같은 네이티브 기능을 사용할 수 있게 해줍니다. 이 모든 것이 서비스 워커(Service Worker), 캐싱 API, 웹 앱 매니페스트와 같은 바닐라 웹 표준 기술을 통해 구현됩니다.

또한 그는 웹 플랫폼 베이스라인(Web Platform Baseline)이라는 새로운 개념을 소개합니다. 이는 주요 브라우저(Chrome, Edge, Firefox, Safari) 벤더들이 공동으로 안정적이라고 합의한 웹 API의 목록입니다. 개발자들은 베이스라인에 포함된 기능들을 사용함으로써, 브라우저 호환성 걱정 없이 최신 웹 기술을 안전하게 프로젝트에 적용할 수 있습니다.

결론: 현명한 개발자의 길

Firtman은 2007년 스티브 잡스가 아이폰을 처음 소개하며 “개발자를 위한 혁신적인 방법”으로 웹 2.0과 AJAX(즉, 웹 앱)를 제시했던 순간을 회상하며 강연을 마무리합니다. 그는 웹 플랫폼 자체가 이미 엄청난 힘을 가지고 있으며, 이 힘은 시간이 지남에 따라 더욱 강력해지고 있다고 말합니다.

그가 전하는 핵심 메시지는 “라이브러리를 쓰지 말라”가 아니라, “자신이 사용하는 도구를 깊이 이해하고, 문제에 맞는 최적의 도구를 선택하라”는 것입니다. 바닐라 JS와 웹 표준 기술은 이제 그 자체로 매우 강력한 ’도구’이며, 모든 프로젝트에 거대한 프레임워크라는 ’망치’를 사용할 필요는 없다는 것입니다. 바닐라 웹 기술을 익히는 것은 단순히 라이브러리 없이 개발하는 능력을 넘어, 자신이 사용하는 라이브러리가 내부적으로 어떻게 동작하는지 이해하게 하고, 결과적으로 더 나은 웹 개발자가 되는 길이라고 강조하며 강연을 마칩니다.