피드로 돌아가기
I built a zero-dependency markdown folder viewer for AI context engineering (one .html file)
Dev.toDev.to
Frontend

File System Access API 기반 Zero-Dependency 컨텍스트 분석 도구 설계

I built a zero-dependency markdown folder viewer for AI context engineering (one .html file)

Bao_Chill_Chill2026년 5월 15일2분intermediate

AI 요약

Context

AI 컨텍스트 엔지니어링 과정에서 Markdown 문서 증가로 인한 토큰 소모량 파악의 어려움 발생. IDE의 개별 파일 브라우징 방식으로는 전체 구조 파악 및 Token Bloat 제어가 불가능한 한계 존재.

Technical Solution

  • File System Access API를 통한 로컬 파일 시스템 직접 접근으로 서버리스 환경 구현
  • cl100k tokenizer의 브라우저 내 실행을 통한 실시간 파일별 Token Count 계산
  • marked.js와 highlight.js CDN 라이브러리 결합으로 단일 HTML 파일 내 렌더링 파이프라인 구축
  • webkitdirectory 속성을 활용한 Firefox 브라우저 호환성 확보
  • 750 라인의 HTML/CSS/JS 구조로 배포 및 설정 비용을 제거한 Zero-Setup 아키텍처 설계
  • Token Count 기준 정렬 기능을 통한 컨텍스트 예산 최적화 워크플로우 제공

실천 포인트

- AI 프롬프트 효율화를 위해 6k 토큰 초과 문서에 대한 정기적인 Context Audit 수행 - 설치 및 설정 비용을 최소화하기 위해 CDN 기반의 Single-File Tooling 검토 - 로컬 파일 접근 권한 API를 활용한 클라이언트 사이드 데이터 처리 가능성 확인

태그

#Zero-dependency#Frontend Architecture#Context Engineering#Tokenization#File System Access API
원문 읽기