웹게임 에디터 구조

Zeroad 웹게임 에디터는 브라우저 미리보기 런타임 위에 크리에이터 도구를 얹은 구조입니다. 바이브 모드와 코드 모드의 레이아웃은 다르지만, 공통적으로 ‘파일 · 미리보기 · AI · 에셋’ 네 축으로 이해하면 됩니다.

코드 에디터 레이아웃

• 프로젝트 트리 — HTML·CSS·JS·에셋 경로를 탐색합니다. 활성 파일이 코드 편집기와 뷰포트에 연결됩니다.
• 에셋 라이브러리(하단) — 프로젝트에 연결된 이미지·오디오와 업로드 파일을 관리합니다. URL 복사 후 코드에 삽입합니다.
• 게임 뷰포트 — 미리보기 iframe에서 실제 플레이를 재현합니다. 자동 실행·수동 실행을 전환할 수 있습니다.
• 코드 편집기 — Monaco 기반. AI가 제안한 diff는 파일별로 적용·되돌리기할 수 있습니다.
• AI 어시스턴트 — 코드 수정, 이미지 생성 요청, 질문 응답을 대화형으로 처리합니다.

바이브 모드

바이브 모드는 뷰포트를 중심에 두고, 하단에 에셋 스트립·우측(또는 하단)에 채팅형 어시스턴트를 배치합니다. 프롬프트 한 번으로 전체 파일 세트가 갱신되며, 이후 대화로 점진적으로 다듬습니다.

저장과 발행

편집 내용은 자동 저장과 수동 저장(헤더 저장 버튼)을 함께 지원합니다. 발행 요청 전에 뷰포트에서 모바일·데스크톱 비율을 확인하고, 썸네일·태그·장르 메타데이터를 검토하세요.