Leaning Technologies가 브라우저에서 풀스택 앱을 빠르게 만들고 공유할 수 있는 개발 환경 BrowserCode를 공개했다. 무료로 이용할 수 있으며, 설치 없이 기기 안에서 실행되고 웹사이트에 삽입할 수도 있다.
BrowserCode는 파일 트리와 코드 편집기, 검색창, 터미널, 실시간 미리보기를 제공한다. Vite, React, Svelte, Vue, Next.js, Nuxt, Express 템플릿으로 시작할 수 있고, GitHub 저장소를 작업공간에 복제하는 기능은 베타다. 개발 서버를 실행하면 BrowserPod가 무작위 공개 URL인 Portal을 제공해 배포하지 않고도 다른 사람에게 작업물을 보여줄 수 있다.
Claude Code, Codex CLI, Pi 같은 AI 코딩 CLI도 브라우저 안에서 실행할 수 있다. 이용자는 각 에이전트 제공업체 계정이나 API 키로 로그인하며, 인증 정보는 브라우저에 남는다. 파일과 작업은 샌드박스 안에서 처리된다. 프로젝트 파일은 업로드되지 않고 사용자의 기기에 저장된다.
BrowserCode는 웹어셈블리 샌드박스 BrowserPod를 기반으로 한다. 현재 Node.js v22와 Rust를 지원하며 Python은 미리보기 단계다. 파일 시스템은 OPFS 또는 IndexedDB를 사용해 프로젝트를 세션 간 로컬에 저장한다. 외부 네트워크 연결은 허용 목록에 있는 HTTPS 트래픽으로 제한된다.
웹페이지에 삽입할 때는 iframe을 사용할 수 있지만, BrowserPod에 필요한 SharedArrayBuffer를 위해 삽입 페이지가 교차 출처 격리를 활성화해야 한다. 페이지에 Cross-Origin-Opener-Policy: same-originCross-Origin-Embedder-Policy: require-corp 헤더를 보내고 iframe에 allow="cross-origin-isolated" 속성을 설정해야 한다. 자세한 설정은 삽입 안내를 참고하면 된다.
호스팅 서비스는 browsercode.io에서 무료로 이용할 수 있으며, 소스 코드는 GitHub에 Apache 2.0 라이선스로 공개됐다. 자체 운영에는 BrowserPod API 키가 필요하다. 무료 요금제는 개인 및 비상업 프로젝트를 대상으로 월 최대 1,000시간의 컴퓨팅, 동시 샌드박스와 저장 공간 무제한을 제공한다.
다만 네이티브 바이너리를 지원하지 않아 네이티브 의존성이 있는 패키지는 설치되지 않을 수 있다. 샌드박스의 외부 연결은 443번 포트의 HTTPS와 허용 목록으로 제한되며, 일반 HTTP, SSH 원격 저장소, 다른 포트, 샌드박스 내부에서의 localhost 연결은 차단된다. 에이전트가 평소 방식으로 먼저 동작하려 할 수도 있다. 현재 Java 지원과 편집기 내 버전 관리 기능은 개발 중이다.
부록: 원문 예시
<iframe src="https://browsercode.io/embed?framework=vite&view=preview" allow="cross-origin-isolated" style="width: 100%; height: 600px; border: 0"></iframe>
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요