실시간 프론트엔드 역량 강화: 파일 시스템 디렉토리 감시 심층 분석

로컬 디스크의 프로젝트 폴더에 변경 사항을 적용하면 즉시 반영되는 웹 기반 코드 에디터를 상상해 보세요. 카메라에서 새 이미지를 추가하면 자동으로 업데이트되는 브라우저 기반 사진 갤러리를 떠올려 보세요. 또는 로컬 로그 파일이 업데이트될 때 실시간으로 차트를 다시 그리는 데이터 시각화 도구를 생각해 보세요. 수십 년 동안 로컬 파일 시스템과의 이러한 수준의 통합은 네이티브 데스크톱 애플리케이션의 전유물이었습니다. 브라우저는 보안상의 이유로 샌드박스 안에서 안전한 거리를 유지해야 했습니다.

오늘날, 그 패러다임은 극적으로 변화하고 있습니다. 최신 브라우저 API 덕분에 웹과 데스크톱 애플리케이션 간의 경계가 모호해지고 있습니다. 이러한 변화를 이끄는 가장 강력한 도구 중 하나는 File System Access API입니다. 이 API는 웹 애플리케이션에 사용자의 로컬 파일 및 디렉토리의 변경 사항을 읽고, 쓰고, 그리고 이 글의 핵심 주제인 모니터링할 수 있는 권한 기반의 접근을 허용합니다. 디렉토리 감시 또는 파일 변경 모니터링으로 알려진 이 기능은 강력하고, 반응성이 뛰어나며, 고도로 통합된 웹 경험을 창출할 수 있는 새로운 지평을 열어줍니다.

이 종합 가이드에서는 프론트엔드 파일 시스템 디렉토리 감시의 세계를 심층적으로 탐구할 것입니다. 우리는 기반이 되는 API를 살펴보고, 견고한 감시기를 처음부터 구축하는 기술을 분석하며, 실제 사용 사례를 검토하고, 성능, 보안 및 사용자 경험의 중요한 과제들을 탐색할 것입니다. 차세대 웹 기반 IDE를 구축하든 간단한 유틸리티 도구를 만들든, 이 기술을 이해하는 것은 현대 웹의 모든 잠재력을 끌어내는 데 핵심적인 열쇠입니다.

진화 과정: 단순한 파일 입력에서 실시간 모니터링까지

File System Access API의 중요성을 완전히 이해하려면 웹에서 파일 처리가 걸어온 길을 되돌아보는 것이 도움이 됩니다.

고전적인 접근 방식: <input type="file">

오랫동안 사용자의 파일 시스템에 접근할 수 있는 유일한 관문은 보잘것없는 <input type="file"> 요소였습니다. 이것은 단순한 파일 업로드를 위한 신뢰할 수 있는 일꾼이었고 지금도 그렇습니다. 하지만 그 한계는 명확합니다.

• 사용자 주도 및 일회성: 사용자는 매번 수동으로 버튼을 클릭하고 파일을 선택해야 합니다. 영속성이 없습니다.
• 파일 전용: 하나 이상의 파일을 선택할 수는 있었지만, 전체 디렉토리를 선택할 수는 없었습니다.
• 모니터링 불가: 파일이 선택되면, 브라우저는 디스크 상의 원본 파일에 무슨 일이 일어났는지 알 수 없었습니다. 파일이 수정되거나 삭제되어도 웹 앱은 알지 못했습니다.

한 걸음 더 나아가: 드래그 앤 드롭 API

드래그 앤 드롭 API는 사용자가 파일과 폴더를 웹 페이지에 직접 끌어다 놓을 수 있게 하여 훨씬 개선된 사용자 경험을 제공했습니다. 이것은 더 직관적이고 데스크톱과 유사한 느낌을 주었습니다. 그러나 파일 입력과 근본적인 한계를 공유했습니다. 즉, 일회성 이벤트라는 점입니다. 애플리케이션은 특정 순간에 끌어온 항목의 스냅샷을 받았을 뿐, 소스 디렉토리와의 지속적인 연결은 없었습니다.

게임 체인저: File System Access API

File System Access API는 근본적인 도약을 의미합니다. 이 API는 웹 애플리케이션에 네이티브 애플리케이션에 필적하는 기능을 제공하여 사용자의 로컬 파일 시스템과 지속적이고 강력한 방식으로 상호 작용할 수 있도록 설계되었습니다. 핵심 원칙은 보안, 사용자 동의 및 기능성을 중심으로 구축되었습니다.

• 사용자 중심 보안: 접근 권한은 절대 자동으로 부여되지 않습니다. 사용자는 항상 네이티브 브라우저 대화 상자를 통해 특정 파일이나 디렉토리에 대한 권한을 부여하라는 메시지를 받습니다.
• 영속적인 핸들: 일회성 데이터 덩어리(blob)를 받는 대신, 애플리케이션은 핸들(FileSystemFileHandle 또는 FileSystemDirectoryHandle)이라는 특수 객체를 받습니다. 이 핸들은 디스크 상의 실제 파일이나 디렉토리에 대한 영속적인 포인터 역할을 합니다.
• 디렉토리 수준 접근: 이것이 핵심 기능입니다. API는 사용자가 애플리케이션에 모든 하위 디렉토리와 파일을 포함한 전체 디렉토리에 대한 접근 권한을 부여할 수 있도록 합니다.

프론트엔드에서 실시간 파일 모니터링을 가능하게 하는 것은 바로 이 영속적인 디렉토리 핸들입니다.

File System Access API 이해하기: 핵심 기술

디렉토리 감시기를 만들기 전에, 이를 가능하게 하는 API의 주요 구성 요소를 이해해야 합니다. 전체 API는 비동기적이므로 파일 시스템과 상호 작용하는 모든 작업은 Promise를 반환하여 사용자 인터페이스가 반응성을 유지하도록 보장합니다.

보안 및 권한: 사용자가 통제권을 가집니다

이 API의 가장 중요한 측면은 보안 모델입니다. 웹사이트는 임의로 사용자의 하드 드라이브를 스캔할 수 없습니다. 접근은 엄격하게 옵트인(opt-in) 방식입니다.

• 최초 접근: 사용자는 버튼 클릭과 같은 액션을 트리거해야 하며, 이는 window.showDirectoryPicker()와 같은 API 메서드를 호출합니다. 그러면 익숙한 OS 수준의 대화 상자가 열리고, 사용자는 디렉토리를 선택한 후 명시적으로 "액세스 권한 부여" 또는 유사한 버튼을 클릭합니다.
• 권한 상태: 특정 핸들에 대한 사이트의 권한은 'prompt' (기본값, 사용자에게 질문 필요), 'granted' (사이트가 접근 권한을 가짐), 또는 'denied' (사이트가 접근할 수 없으며 동일한 세션에서 다시 요청할 수 없음)의 세 가지 상태 중 하나일 수 있습니다.
• 영속성: 더 나은 사용자 경험을 위해, 브라우저는 설치된 PWA나 참여도가 높은 사이트에 대해 세션 간에 'granted' 권한을 유지할 수 있습니다. 즉, 사용자가 애플리케이션을 방문할 때마다 프로젝트 폴더를 다시 선택할 필요가 없을 수도 있습니다. 현재 권한 상태는 directoryHandle.queryPermission()으로 확인할 수 있으며, directoryHandle.requestPermission()으로 권한 상향을 요청할 수 있습니다.

접근 권한을 얻기 위한 주요 메서드

API의 진입점은 window 객체에 있는 세 가지 전역 메서드입니다.

• window.showOpenFilePicker(): 사용자에게 하나 이상의 파일을 선택하라는 메시지를 표시합니다. FileSystemFileHandle 객체의 배열을 반환합니다.
• window.showDirectoryPicker(): 이것이 우리의 주요 도구입니다. 사용자에게 디렉토리를 선택하라는 메시지를 표시합니다. 단일 FileSystemDirectoryHandle을 반환합니다.
• window.showSaveFilePicker(): 사용자에게 파일을 저장할 위치를 선택하라는 메시지를 표시합니다. 쓰기용 FileSystemFileHandle을 반환합니다.

핸들의 힘: FileSystemDirectoryHandle

FileSystemDirectoryHandle을 얻으면, 해당 디렉토리를 나타내는 강력한 객체를 갖게 됩니다. 이 객체는 디렉토리의 내용을 포함하지는 않지만, 내용과 상호 작용할 수 있는 메서드를 제공합니다.

• 반복: 비동기 이터레이터(async iterator)를 사용하여 디렉토리의 내용을 반복할 수 있습니다: for await (const entry of directoryHandle.values()) { ... }. 각 entry는 FileSystemFileHandle 또는 다른 FileSystemDirectoryHandle이 됩니다.
• 특정 항목 확인: directoryHandle.getFileHandle('filename.txt') 또는 directoryHandle.getDirectoryHandle('subfolder')를 사용하여 특정 파일이나 하위 디렉토리에 대한 핸들을 얻을 수 있습니다.
• 수정: 위 메서드에 { create: true } 옵션을 추가하여 새 파일 및 하위 디렉토리를 만들거나, directoryHandle.removeEntry('item-to-delete')로 삭제할 수 있습니다.

문제의 핵심: 디렉토리 감시 구현하기

여기에 중요한 세부 사항이 있습니다: File System Access API는 Node.js의 fs.watch()와 같은 네이티브, 이벤트 기반 감시 메커니즘을 제공하지 않습니다. directoryHandle.on('change', ...)와 같은 메서드는 없습니다. 이는 자주 요청되는 기능이지만, 현재로서는 우리가 직접 감시 로직을 구현해야 합니다.

가장 일반적이고 실용적인 접근 방식은 주기적인 폴링(polling)입니다. 이는 일정한 간격으로 디렉토리 상태의 "스냅샷"을 찍고 이전 스냅샷과 비교하여 변경 사항을 감지하는 것을 포함합니다.

단순한 접근법: 간단한 폴링 루프

기본적인 구현은 다음과 같을 수 있습니다:

// 개념을 설명하기 위한 단순화된 예제

let initialFiles = new Set();

async function watchDirectory(directoryHandle) {

  const currentFiles = new Set();

  for await (const entry of directoryHandle.values()) {

    currentFiles.add(entry.name);

  }

  // 이전 상태와 비교 (이 로직은 매우 단순함)

  console.log("디렉토리 확인됨. 현재 파일들:", Array.from(currentFiles));

  // 다음 확인을 위해 상태 업데이트

  initialFiles = currentFiles;

}

// 감시 시작

async function start() {

  const directoryHandle = await window.showDirectoryPicker();

  setInterval(() => watchDirectory(directoryHandle), 2000); // 2초마다 확인

}

이것은 작동하지만 매우 제한적입니다. 최상위 디렉토리만 확인하고, 추가/삭제만 감지할 수 있으며(수정은 감지 불가), 캡슐화되어 있지 않습니다. 시작점은 되지만, 훨씬 더 잘 만들 수 있습니다.

더 정교한 접근법: 재귀적인 Watcher 클래스 구축하기

정말로 유용한 디렉토리 감시기를 만들려면 더 견고한 솔루션이 필요합니다. 디렉토리를 재귀적으로 스캔하고, 파일 메타데이터를 추적하여 수정을 감지하며, 다양한 유형의 변경에 대해 명확한 이벤트를 발생시키는 클래스를 설계해 봅시다.

1단계: 상세한 스냅샷 찍기

먼저, 디렉토리를 재귀적으로 순회하고 그 내용의 상세한 맵을 구축할 수 있는 함수가 필요합니다. 이 맵에는 파일 이름뿐만 아니라 변경 감지에 중요한 lastModified 타임스탬프와 같은 메타데이터도 포함되어야 합니다.

// 디렉토리의 스냅샷을 재귀적으로 생성하는 함수

async function createSnapshot(dirHandle, path = '') {

  const snapshot = new Map();

  for await (const entry of dirHandle.values()) {

    const currentPath = path ? `${path}/${entry.name}` : entry.name;

    if (entry.kind === 'file') {

      const file = await entry.getFile();

      snapshot.set(currentPath, {

        lastModified: file.lastModified,

        size: file.size,

        handle: entry

      });

    } else if (entry.kind === 'directory') {

      const subSnapshot = await createSnapshot(entry, currentPath);

      subSnapshot.forEach((value, key) => snapshot.set(key, value));

    }

  }

  return snapshot;

}

2단계: 스냅샷을 비교하여 변경 사항 찾기

다음으로, 이전 스냅샷과 새 스냅샷을 비교하여 정확히 무엇이 변경되었는지 식별하는 함수가 필요합니다.

// 두 스냅샷을 비교하고 변경 사항을 반환하는 함수

function compareSnapshots(oldSnapshot, newSnapshot) {

  const changes = {

    added: [],

    modified: [],

    deleted: []

  };

  // 추가 및 수정된 파일 확인

  newSnapshot.forEach((newFile, path) => {

    const oldFile = oldSnapshot.get(path);

    if (!oldFile) {

      changes.added.push({ path, handle: newFile.handle });

    } else if (oldFile.lastModified !== newFile.lastModified || oldFile.size !== newFile.size) {

      changes.modified.push({ path, handle: newFile.handle });

    }

  });

  // 삭제된 파일 확인

  oldSnapshot.forEach((oldFile, path) => {

    if (!newSnapshot.has(path)) {

      changes.deleted.push({ path });

    }

  });

  return changes;

}

3단계: 로직을 DirectoryWatcher 클래스로 캡슐화하기

마지막으로, 상태와 폴링 간격을 관리하고 간단한 콜백 기반 API를 제공하는 깔끔하고 재사용 가능한 클래스로 모든 것을 감쌉니다.

class DirectoryWatcher {

  constructor(directoryHandle, interval = 1000) {

    this.directoryHandle = directoryHandle;

    this.interval = interval;

    this.lastSnapshot = new Map();

    this.intervalId = null;

    this.onChange = () => {}; // 기본 빈 콜백

  }

  async check() {

    try {

      const newSnapshot = await createSnapshot(this.directoryHandle);

      const changes = compareSnapshots(this.lastSnapshot, newSnapshot);

      if (changes.added.length > 0 || changes.modified.length > 0 || changes.deleted.length > 0) {

        this.onChange(changes);

      }

      this.lastSnapshot = newSnapshot;

    } catch (error) {

      console.error("파일 변경 확인 중 오류 발생:", error);

      // 디렉토리에 더 이상 접근할 수 없는 경우 감시 중단 가능

      this.stop();

    }

  }

  async start(callback) {

    if (this.intervalId) {

      console.log("감시기가 이미 실행 중입니다.");

      return;

    }

    this.onChange = callback;

    // 즉시 초기 확인 수행

    this.lastSnapshot = await createSnapshot(this.directoryHandle);

    this.intervalId = setInterval(() => this.check(), this.interval);

    console.log(`"${this.directoryHandle.name}" 디렉토리 감시를 시작했습니다.`);

  }

  stop() {

    if (this.intervalId) {

      clearInterval(this.intervalId);

      this.intervalId = null;

      console.log(`"${this.directoryHandle.name}" 디렉토리 감시를 중단했습니다.`);

    }

  }

}

// DirectoryWatcher 클래스 사용 방법

const startButton = document.getElementById('startButton');

const stopButton = document.getElementById('stopButton');

let watcher;

startButton.addEventListener('click', async () => {

  try {

    const directoryHandle = await window.showDirectoryPicker();

    watcher = new DirectoryWatcher(directoryHandle, 2000); // 2초마다 확인

    watcher.start((changes) => {

      console.log("변경 사항 감지됨:", changes);

      // 이제 이 변경 사항을 기반으로 UI를 업데이트할 수 있습니다

    });

  } catch (error) {

    console.error("사용자가 대화 상자를 취소했거나 오류가 발생했습니다.", error);

  }

});

stopButton.addEventListener('click', () => {

  if (watcher) {

    watcher.stop();

  }

});

실용적인 사용 사례 및 글로벌 예시

이 기술은 단순한 이론적 연습이 아닙니다. 전 세계 사용자가 접근할 수 있는 강력한 실제 애플리케이션을 가능하게 합니다.

1. 웹 기반 IDE 및 코드 에디터

이것은 전형적인 사용 사례입니다. VS Code for the Web이나 GitHub Codespaces와 같은 도구는 개발자가 로컬 프로젝트 폴더를 열 수 있게 해줍니다. 그러면 디렉토리 감시기가 변경 사항을 모니터링할 수 있습니다.

• 파일 트리 동기화: 디스크에서 파일이 생성, 삭제 또는 이름이 변경되면(아마도 다른 애플리케이션을 사용하여), 에디터의 파일 트리가 즉시 업데이트됩니다.
• 실시간 리로드/미리보기: 웹 개발의 경우, HTML, CSS 또는 JavaScript 파일에 저장된 변경 사항은 에디터 내의 미리보기 창을 자동으로 새로 고칠 수 있습니다.
• 백그라운드 작업: 파일 수정은 백그라운드에서 린팅, 타입 검사 또는 컴파일을 트리거할 수 있습니다.

2. 크리에이티브 전문가를 위한 디지털 자산 관리(DAM)

전 세계 어디에서든 사진작가가 카메라를 컴퓨터에 연결하면 사진이 특정 "수신" 폴더에 저장됩니다. 이 폴더에 접근 권한을 부여받은 웹 기반 사진 관리 도구는 새로운 추가 항목이 있는지 감시할 수 있습니다. 새로운 JPEG 또는 RAW 파일이 나타나자마자 웹 앱은 수동 개입 없이 자동으로 이를 가져와 썸네일을 생성하고 사용자 라이브러리에 추가할 수 있습니다.

3. 과학 및 데이터 분석 도구

연구소의 장비는 시간당 수백 개의 작은 CSV 또는 JSON 데이터 파일을 지정된 출력 디렉토리에 생성할 수 있습니다. 웹 기반 대시보드는 이 디렉토리를 모니터링할 수 있습니다. 새로운 데이터 파일이 추가되면 이를 파싱하여 그래프, 차트 및 통계 요약을 실시간으로 업데이트하여 진행 중인 실험에 대한 즉각적인 피드백을 제공합니다. 이는 생물학에서 금융에 이르기까지 전 세계적으로 적용 가능합니다.

4. 로컬 우선 노트 필기 및 문서 앱

많은 사용자는 노트를 로컬 폴더에 일반 텍스트나 마크다운 파일로 보관하여 Obsidian이나 Typora와 같은 강력한 데스크톱 편집기를 사용하는 것을 선호합니다. 프로그레시브 웹 앱(PWA)은 이 폴더를 감시하는 동반자 역할을 할 수 있습니다. 사용자가 파일을 편집하고 저장하면 웹 앱은 수정을 감지하고 자체 뷰를 업데이트합니다. 이는 네이티브 도구와 웹 도구 간에 원활하고 동기화된 경험을 만들어내며, 사용자의 데이터 소유권을 존중합니다.

과제, 한계 및 모범 사례

디렉토리 감시 구현은 매우 강력하지만, 일련의 과제와 책임이 따릅니다.

브라우저 호환성

File System Access API는 최신 기술입니다. 2023년 말 기준으로, 주로 Google Chrome, Microsoft Edge, Opera와 같은 Chromium 기반 브라우저에서 지원됩니다. Firefox나 Safari에서는 사용할 수 없습니다. 따라서 다음이 중요합니다.

• 기능 감지: API를 사용하기 전에 항상 'showDirectoryPicker' in window의 존재 여부를 확인하십시오.
• 대체 수단 제공: API가 지원되지 않는 경우, 경험을 우아하게 저하시키십시오. 전통적인 <input type="file" multiple> 요소로 대체하고, 지원되는 브라우저에서 사용할 수 있는 향상된 기능에 대해 사용자에게 알릴 수 있습니다.

성능 고려 사항

폴링은 본질적으로 시스템 수준의 이벤트 기반 접근 방식보다 효율성이 떨어집니다. 성능 비용은 감시 대상 디렉토리의 크기와 깊이, 그리고 폴링 간격의 빈도와 직접적으로 관련됩니다.

• 대규모 디렉토리: 수만 개의 파일이 있는 디렉토리를 매초 스캔하는 것은 상당한 CPU 자원을 소모하고 노트북의 배터리를 고갈시킬 수 있습니다.
• 폴링 빈도: 사용 사례에 허용되는 가장 긴 간격을 선택하십시오. 실시간 코드 에디터는 1-2초 간격이 필요할 수 있지만, 사진 라이브러리 임포터는 10-15초 간격으로도 충분할 수 있습니다.
• 최적화: 우리의 스냅샷 비교는 파일 내용을 해싱하는 것보다 훨씬 빠른 lastModified와 size만 확인하여 이미 최적화되어 있습니다. 절대적으로 필요한 경우가 아니면 폴링 루프 내에서 파일 내용을 읽지 마십시오.
• 포커스 변경: 현명한 최적화 방법은 페이지 가시성 API(Page Visibility API)를 사용하여 브라우저 탭이 포커스를 잃었을 때 감시기를 일시 중지하는 것입니다.

보안 및 사용자 신뢰

신뢰는 가장 중요합니다. 사용자는 웹사이트에 로컬 파일 접근 권한을 부여하는 것에 대해 당연히 신중합니다. 개발자로서 이 권한을 책임감 있게 관리해야 합니다.

• 투명성 유지: UI에서 디렉토리 접근이 왜 필요한지 명확하게 설명하십시오. "폴더 열기"라는 일반적인 버튼보다 "프로젝트 폴더를 선택하여 실시간 파일 동기화를 활성화하세요"와 같은 메시지가 훨씬 좋습니다.
• 사용자 행동에 따라 접근 요청: 버튼 클릭과 같은 직접적이고 명백한 사용자 행동 없이는 절대 showDirectoryPicker() 프롬프트를 트리거하지 마십시오.
• 거부 처리: 사용자가 "취소"를 클릭하거나 권한 요청을 거부하는 경우, 애플리케이션은 중단 없이 이 상태를 우아하게 처리해야 합니다.

UI/UX 모범 사례

좋은 사용자 경험은 이 강력한 기능을 직관적이고 안전하게 느끼게 하는 데 핵심입니다.

• 명확한 피드백 제공: 현재 감시 중인 디렉토리의 이름을 항상 표시하십시오. 이는 사용자에게 어떤 접근 권한이 부여되었는지 상기시켜 줍니다.
• 명시적인 제어 기능 제공: 명확한 "감시 시작" 및 "감시 중지" 버튼을 포함하십시오. 사용자는 항상 프로세스를 제어하고 있다고 느껴야 합니다.
• 오류 처리: 앱이 실행되는 동안 사용자가 감시 중인 폴더의 이름을 바꾸거나 삭제하면 어떻게 될까요? 다음 폴링에서 오류가 발생할 가능성이 높습니다. 이러한 오류를 포착하고 사용자에게 알려, 감시기를 중지하고 새 디렉토리를 선택하도록 유도할 수 있습니다.

미래: 웹에서의 파일 시스템 접근, 다음 단계는?

현재의 폴링 기반 접근 방식은 영리하고 효과적인 해결책이지만, 이상적인 장기 솔루션은 아닙니다. 웹 표준 커뮤니티는 이를 잘 알고 있습니다.

가장 기대되는 미래의 발전은 API에 네이티브, 이벤트 기반 파일 시스템 감시 메커니즘이 추가될 가능성입니다. 이것은 진정한 게임 체인저가 될 것이며, 브라우저가 운영 체제 자체의 효율적인 알림 시스템(Linux의 inotify, macOS의 FSEvents, Windows의 ReadDirectoryChangesW 등)에 연결될 수 있게 할 것입니다. 이는 폴링의 필요성을 없애고, 특히 대규모 디렉토리와 배터리로 구동되는 장치에서 성능과 효율성을 극적으로 향상시킬 것입니다.

이러한 기능에 대한 확정된 일정은 없지만, 그 잠재력은 웹 플랫폼이 나아가고 있는 방향을 명확하게 보여줍니다. 즉, 웹 애플리케이션의 능력이 브라우저의 샌드박스가 아닌 오직 우리의 상상력에 의해서만 제한되는 미래를 향하고 있습니다.

결론

File System Access API로 구동되는 프론트엔드 파일 시스템 디렉토리 감시는 혁신적인 기술입니다. 이는 웹과 로컬 데스크톱 환경 사이의 오랜 장벽을 허물고, 정교하고 상호작용적이며 생산적인 차세대 브라우저 기반 애플리케이션을 가능하게 합니다. 핵심 API를 이해하고, 견고한 폴링 전략을 구현하며, 성능 및 사용자 신뢰에 대한 모범 사례를 준수함으로써 개발자는 이전보다 훨씬 더 통합되고 강력하게 느껴지는 경험을 구축할 수 있습니다.

현재는 자체 감시기를 구축하는 데 의존하고 있지만, 우리가 논의한 원칙들은 근본적입니다. 웹 플랫폼이 계속 진화함에 따라, 사용자의 로컬 데이터와 원활하고 효율적으로 상호 작용하는 능력은 현대 애플리케이션 개발의 초석으로 남을 것이며, 개발자들이 브라우저만 있으면 누구나 접근할 수 있는 진정한 글로벌 도구를 구축할 수 있도록 힘을 실어줄 것입니다.