import map
빌드 없는 import 한 줄
해결하는 문제
라이브러리를 쓰려면 npm과 빌드 도구가 필요하다고 생각한다.
브라우저가 직접 이해하는 모듈 방식(ES Modules)과 import map으로, 설치·빌드 없이 import 한 줄로 라이브러리를 씁니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것라이브러리 주소
브라우저가 하는 일브라우저가 모듈을 받아 연결
나오는 것빌드 없는 동작
쓰는 브라우저 기술
script type=moduleimport mapdynamic import()
라이브러리와 모델
esm.sh·jsDelivr 같은 모듈 CDN
바꿀 수 있는 옵션
- 버전 고정
- import map으로 이름 짧게
- 로컬 복사본 경로
자주 막히는 곳
- 모듈은 더블클릭(file://)으로 열면 막힌다
- CDN이 막힌 망분리 환경에서는 로컬 복사본이 필요하다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- AI가 쓴 코드를 빌드 없이 바로 실행
웹 서비스
- 교육용 즉석 실험 페이지
피지컬 AI
- 기기 제어 라이브러리 즉시 사용
넓히는 방법
- 로컬 libs 폴더와 이중 로딩
- 작은 앱을 여러 모듈 파일로 나누기
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
npm 없이 script type=module과 import map으로 Three.js를 불러와 회전하는 상자를 띄우는 HTML 파일 하나를 만들어줘.
같은 분류의 능력
09 개발 도구로서의 브라우저에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md