1. 시작하기
GB Coder는 원격 서버나 가입 절차 없이 브라우저 내부에서 온전히 실행됩니다.
시스템 요구사항 및 브라우저
정적 에디터는 IndexedDB를 지원하는 모든 최신 브라우저에서 구동됩니다. 고급 WebContainer 환경은 SharedArrayBuffer와 교차 출처 격리(COOP/COEP)를 지원하는 Chrome, Edge, Brave, Firefox를 권장합니다.
첫 프로젝트 생성하기
/app/projects 로 이동하여 대시보드에서 "New Project"를 클릭하고 원하는 개발 환경을 선택하세요.
2. 정적 HTML/CSS/JS 워크플로우
빌드 지연 없이 즉각적인 화면 결과를 확인합니다.
3분할 에디터 활용
HTML, CSS, JavaScript를 분리된 패널에서 입력하면 실시간으로 미리보기 창에 반영됩니다.
<!-- index.html -->
<div class="card">
<h1>GB Coder 시작하기</h1>
<button id="btn">클릭 수: 0</button>
</div>
<script>
let n = 0;
document.getElementById('btn').onclick = () => { n++; document.getElementById('btn').textContent = `클릭 수: ${n}`; };
</script>외부 CDN 라이브러리 추가
Tailwind CSS, Bootstrap 등을 HTML 헤더에 직접 링크하여 손쉽게 사용할 수 있습니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />3. 템플릿 갤러리 및 프로젝트 구성
실전에 바로 투입 가능한 모던 웹 스타터.
스타터 템플릿 선택
랜딩 페이지, 대시보드, 유틸리티 앱 템플릿을 통해 빠르게 개발을 시작할 수 있습니다.
다중 파일 프로젝트 관리
하위 폴더 생성, 스타일시트 분리, 표준 ES 모듈 import를 완벽하게 지원합니다.
4. React 및 Vue 스타터
컴포넌트 중심의 모던 프론트엔드 개발.
React 18 컴포넌트 개발
JSX 및 TypeScript를 지원하여 빠른 반응형 컴포넌트 작성이 가능합니다.
import React, { useState } from 'react';
export default function App() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>클릭: {n}</button>;
}Vue 3 Single-File Components (.vue)
template, script setup, scoped style을 포함하는 .vue 파일을 브라우저에서 즉시 컴파일합니다.
5. WebContainer IDE 및 터미널
브라우저에서 실행되는 완벽한 Node.js 런타임.
xterm.js 터미널 활용
npm install 및 package 스크립트를 브라우저 터미널에서 직접 실행하세요.
npm install
npm run dev실시간 미리보기 포트 포워딩
개발 서버가 구동되면 내장 미리보기 화면으로 자동 연결됩니다.
6. 로컬 저장소 및 프라이버시
IndexedDB를 통한 안전한 데이터 보존.
IndexedDB 아키텍처
모든 파일과 설정은 사용자의 로컬 브라우저 IndexedDB에만 보관됩니다.
오프라인 환경 지원
네트워크 연결이 끊겨도 로컬 저장소를 통해 계속해서 작업할 수 있습니다.
7. ZIP 백업 및 프로젝트 복원
자유로운 데이터 이동성과 무결성 검증.
SHA-256 검증 포함 ZIP 내보내기
프로젝트 전체를 표준 ZIP 파일로 다운로드하며 해시 무결성을 함께 기록합니다.
안전한 프로젝트 가져오기
ZIP 파일을 드래그 앤 드롭하여 기존 작업 공간을 온전히 복원할 수 있습니다.
8. 전역 검색 및 단축키
효율적인 작업 흐름을 위한 단축키 안내.
주요 단축키
Ctrl+S(저장), Ctrl+P(파일 전환), Ctrl+`(터미널 열기/닫기)를 지원합니다.
프로젝트 전역 파일 검색
정규식과 대소문자 구분을 지원하여 원하는 코드를 즉시 찾고 바꿀 수 있습니다.
9. 문제 해결 및 호환성
자주 발생하는 상황별 대처 방법.
WebContainer 비활성화 시
HTTPS 접속 여부 및 COOP/COEP 헤더가 정상적으로 제공되는지 확인하세요.
캐시 초기화 안내
이전 버전의 스크립트가 남아 있는 경우 Ctrl+Shift+R로 강력 새로고침을 실행하세요.