showSaveFilePicker
내 컴퓨터 파일 메모장
해결하는 문제
설치 없는 편집기로 내 PC 파일을 직접 고치고 싶다.
파일 핸들을 받아 내 컴퓨터의 파일을 열고, 같은 파일에 그대로 덮어 저장합니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것내 PC의 글 파일
브라우저가 하는 일파일 핸들로 읽고 같은 파일에 쓰기
나오는 것저장된 파일과 자동 저장본
쓰는 브라우저 기술
File System Access APIcreateWritableDrag & DroplocalStorage
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- types: 허용할 확장자
- 핸들을 보관해 바로 다시 저장
- 지원하지 않는 브라우저는 내려받기로 저장
자주 막히는 곳
- 사파리와 파이어폭스는 같은 파일 덮어쓰기를 지원하지 않는다
- 권한은 탭을 닫으면 다시 받아야 한다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 문서 요약·교정 버튼
- 폴더 안 파일 의미 검색
웹 서비스
- 망분리 PC용 설치 없는 편집기
- 설정 파일 편집기
피지컬 AI
- 보드 설정 파일을 고쳐 시리얼로 전송
- 데이터 로거 CSV 정리
넓히는 방법
- 폴더 통째로 열기 (showDirectoryPicker)
- 마크다운 미리보기
- IndexedDB에 핸들 기억
지원 브라우저
PC 크롬·엣지된다
맥 사파리일부
안드로이드 크롬일부
아이폰 사파리일부
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
내 컴퓨터의 텍스트 파일을 열어 고치고 같은 파일에 바로 저장하는 메모장 웹페이지를 File System Access API로 만들어줘.
같은 분류의 능력
01 문서·파일 처리에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md