기존 웹 애플리케이션에서는 <input type="file"> 태그를 통해 단방향으로 파일을 읽어들인 뒤, 결과물을 매번 새로운 다운로드 파일이나 압축 ZIP 파일로 내려받아야 했습니다. 그러나 W3C/WICG에서 제정한 File System Access API의 등장으로 웹 앱에서도 사용자의 허가 아래 실제 로컬 디렉토리의 파일을 직접 열고, 덮어쓰고, 이름을 변경할 수 있게 되었습니다.
1. showDirectoryPicker()를 통한 디렉토리 핸들 획득
웹 사이트가 사용자의 디스크에 임의로 접근하는 것을 방지하기 위해, 반드시 사용자의 명시적인 클릭 제스처(User Action)를 통해서만 브라우저 고유의 폴더 선택 팝업이 호출됩니다.
// 사용자가 선택한 디렉토리 핸들 획득 (읽기/쓰기 권한 요청)
const dirHandle = await window.showDirectoryPicker({
mode: 'readwrite'
});
// 하위 파일 순회 및 로컬 파일 접근
for await (const entry of dirHandle.values()) {
if (entry.kind === 'file') {
const file = await entry.getFile();
console.log(`파일명: ${file.name}, 크기: ${file.size} bytes`);
}
}
2. 보안 샌드박스와 권한 모델
- 사용자 승인 필수: 웹 사이트는 사용자가 선택한 특정 폴더 외부(예: C:\Windows 등 시스템 폴더)에는 절대 접근할 수 없습니다.
- 세션별 권한 관리: 브라우저 탭을 닫으면 권한이 자동 소멸되며, 다시 열었을 때 명시적인 재승인이 요구됩니다.
- HTTPS 필수: 중간자 공격을 방지하기 위해 오직 보안 연결(HTTPS) 환경에서만 API가 활성화됩니다.