브라우저의 재발견

./libs/

인터넷 없이 도는 이중 로딩

해결하는 문제

망분리 PC에서는 CDN 주소가 막혀 라이브러리를 못 불러온다.

라이브러리를 먼저 같은 폴더의 ./libs/에서 찾고, 없을 때만 CDN에서 받는 방식으로 인터넷 없이도 동작하게 합니다.

체험하기

서버 의존도

서버 없이 브라우저 기본 기능만 씁니다.

브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요

데이터가 흐르는 길

무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.

들어오는 것필요한 라이브러리 목록
브라우저가 하는 일로컬 폴더 우선 시도 후 실패하면 CDN
나오는 것어디서나 같은 동작

쓰는 브라우저 기술

script 동적 로딩onerror 대체 경로

라이브러리와 모델

외부 라이브러리 없이 브라우저 기본 기능만 씁니다.

바꿀 수 있는 옵션

  • 로컬 폴더 경로
  • 버전 고정
  • 글꼴·모델 파일도 함께 묶기

자주 막히는 곳

  • .wasm·모델 파일은 더블클릭(file://)으로는 못 읽어 로컬 서버가 필요하다
  • CDN과 로컬 버전이 다르면 동작이 달라진다

이 능력으로 만들 수 있는 서비스

같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.

AI 서비스
  • 오프라인 AI 실습 꾸러미
웹 서비스
  • 강의장 네트워크를 믿지 않는 교안
피지컬 AI
  • 현장 장비 PC용 오프라인 도구

넓히는 방법

  • AI 모델 파일까지 오프라인 꾸러미로
  • USB 배포판

지원 브라우저

PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다

코딩 에이전트에게 줄 프롬프트

복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.

Chart.js를 먼저 ./libs/chart.min.js에서 불러오고 실패하면 CDN에서 불러오는 이중 로딩 구조로 이 HTML을 고쳐줘.

같은 분류의 능력

02 로컬 저장·오프라인 DB에 속한 다른 능력입니다.

무료로 보는 것

체험 페이지, 한 줄 설명, 미리보기 영상

스킬팩 구성

full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md