브라우저 에디터

한 화면에 연결된 작업공간

Cake20 브라우저 에디터는 단순한 코드 입력창이 아닙니다. 왼쪽 파일 탐색기, 가운데 스크립트와 Console·Chat, 오른쪽 WEB PREVIEW가 같은 웹사이트 소스를 기준으로 함께 움직입니다.

내 사이트는 AI코딩 오른쪽의 확장 아이콘 없는 에디터 버튼으로 기본 주소를 전체화면 새 탭에 엽니다. 에디터가 마지막 모드를 브라우저에 기억해 복원하며 저장된 선택이 없으면 개발모드로 시작합니다. 이지모드는 AI 계정이 하나 이상 연결된 경우에만 선택할 수 있으며, AI 미연결 상태에서 이지모드 주소로 들어와도 개발모드로 이동합니다.

에디터 내부의 이지모드는 /editor/{사이트 ID}/easy를 열고 왼쪽 AI Chat과 오른쪽 Preview만 표시합니다. Preview 상단에는 요소선택과 해상도 선택만 남기고 Chat 입력창은 3줄로 표시하며, 요소선택은 고른 요소의 페이지, Cake20 View 파일, 태그, source offset, selector를 짧게 AI Chat 입력란에 넣어 항상 AI코딩 방식으로 수정하게 합니다. 숨겨진 Preview 표시 대상은 항상 고정으로 유지합니다. 개발모드와 이지모드 모두 Chat 입력박스 내부 오른쪽의 지시문 버튼에서 웹사이트 작업용 만들기·수정·디자인·점검 메뉴를 최대 4개까지 같은 형태로 엽니다. 버튼은 hover 상태에서도 투명합니다. 두 모드 모두 여러 줄 입력창의 같은 우측 상단 위치에 붙입니다. 넓은 목록에는 지시문 내용 일부까지 보여줍니다. 선택한 지시문은 AI Chat 입력란에만 채우고 사용자가 수정하거나 확인한 뒤 직접 전송합니다. F1~F4 단축키는 사용하지 않습니다. 우측에는 검수 사이트 상태에 따라 시작과 종료로 바뀌는 버튼 하나와 실행 중인 사이트를 새 창으로 여는 열기 버튼을 표시합니다. 시작이 가능한 동안에는 시작 버튼을, 열기가 가능한 동안에는 매우 연한 회색 테두리의 열기 버튼을 부드럽게 반복 페이드합니다. 글자와 아이콘 색은 유지하고 배경색만 변화시키며 시작 버튼은 페이드 정점에서 거의 흰색, 열기 버튼은 중간 회색으로 표시합니다. 이지모드 상단바 중앙에는 추천 지시문과 관리자 설정의 추천 멘트 중 하나를 말줄임 없이 한 줄 전체로 표시하고 약 1분마다 다음 문장으로 바꿉니다. 클릭하면 설명 팝오버에서도 문장을 확인할 수 있습니다. 지시문 팝오버의 설정 아이콘에서는 사이트별 메뉴와 지시문을 추가·수정·삭제하고 순서를 바꿀 수 있습니다. 편집 중인 설정은 버전형 JSON으로 복사·붙여넣거나 파일로 내보내고 가져와 다른 사이트·사용자와 공유할 수 있습니다. 가져온 설정은 저장 전 초안으로 표시합니다. 별도 설정이 없으면 범용 기본값을 자동으로 사용하며 AI도 같은 설정을 읽고 변경할 수 있습니다. 숨겨진 개발 기능과 MCP 제어는 그대로 작동합니다. 두 모드의 최상단 좌측 같은 위치에는 투명 배경의 모드 버튼 하나를 둡니다. 개발모드의 Project Files 표시는 없애고 상단바를 작업공간 왼쪽 끝까지 연장합니다. 개발모드는 밝은 하늘색, 이지모드는 밝은 초록색 아이콘과 글자로 구분합니다. 개발모드의 열린 파일 탭은 스크립트창의 왼쪽 경계부터 시작하고 새 탭은 오른쪽에 추가합니다. Workspace를 다시 열지 않고 전환해 Chat, Preview와 편집 상태를 유지합니다. 연결된 AI 계정이 없거나 로그인 연결이 끊기면 Chat 입력과 파일 첨부를 비활성화해 요청이 입력되지 않게 합니다.

에디터 브라우저 탭 제목은 Cake Studio - {사이트 이름}으로 표시합니다.

사용자와 MCP AI는 하나의 Git-backed 소스 작업공간을 공유합니다. 한쪽에서 파일이 바뀌면 에디터가 변경을 표시하고, 같은 파일을 늦게 저장하려는 경우 hash 충돌로 덮어쓰기를 막습니다.

• FILES에서 app, public, server, shared와 package.json을 탐색합니다.
• FILES의 최초 상태는 server 폴더만 펼치고 app, public과 shared는 닫힌 상태로 시작합니다.
• Cake20 View·TypeScript·JavaScript·HTML·CSS·JSON은 CodeMirror로 편집하고 저장할 때 Cake20 내부 Oxfmt 규칙을 적용합니다.
• 파일 내용 검색은 Ctrl+Shift+F 또는 Cmd+Shift+F로 열며 대소문자, 전체 단어, 정규식과 확장자 필터를 지원합니다.
• API, route, job, task, WebSocket과 SSE 파일은 선택만으로 실행하지 않고 테스트 실행을 눌렀을 때만 검사하거나 연결합니다.
• Console 우측의 실행·중지 아이콘으로 선택 파일을 테스트합니다. 테스트 준비·결과와 SSE·WebSocket 송수신은 Test 출력으로 표시합니다.
• Console은 테스트 출력, Server 로그와 Preview 브라우저 출력을 한곳에 구분해 표시합니다. 지우개는 현재 세 출력을 함께 비웁니다.
• 새 출력은 Console 끝을 자동으로 따라가며 사용자가 위로 스크롤하면 추적을 멈춥니다. Console 도구막대의 복사 아이콘은 현재 Test·Server·Preview 출력을 한 번에 클립보드로 복사합니다.
• 하단 패널은 Console과 Chat을 전환하며 선택한 패널과 분할 크기를 유지합니다. 저장된 선택이 없는 최초 기본값은 Console입니다.
• Console은 과거 저장 로그를 불러오지 않고 에디터 진입 이후 출력만 휘발성으로 수집합니다.
• 상단 로그 버튼은 콘솔 로그, 영구 Chat 로그와 MCP 작업 로그를 한 창에서 전환합니다. 확인하지 않은 MCP 완료·실패는 버튼 색과 점멸로 알리고 MCP 작업 중에는 버튼 테두리를 표시합니다.
• 에디터 안에는 별도 언어 선택기가 없습니다. 메인 화면 상단의 한국어·English 선택이 에디터에도 적용되며 저장된 선택이 없으면 English로 시작합니다.

화면에서 시작해 소스로 연결

• WEB PREVIEW에서 페이지를 고르고 데스크톱·태블릿·모바일 화면을 실제 viewport 비율로 확인합니다.
• 요소선택은 화면의 정적 문구·스타일·이미지를 Cake20 View 원본 위치에 연결해 코드를 직접 찾지 않고 수정하게 합니다.
• 줄바꿈이나 하위 태그로 나뉜 정적 문구도 편집창에 모두 표시하고, 여러 Cake20 View 파일에 연결된 변경은 전체 원본을 검증해 함께 저장합니다.
• 이지모드의 요소선택은 직접 편집 창을 열지 않고 페이지, 파일, 태그, source offset, selector를 짧은 AI Chat 입력 초안으로 보내 사용자가 수정 요청을 덧붙이게 합니다.
• 요소편집은 최근 100개 직접 편집을 Ctrl+Z 또는 Cmd+Z로 되돌립니다.
• 문구와 정적 스타일은 저장하면 현재 iframe과 컴포넌트 상태를 유지한 채 Vite HMR로 즉시 반영합니다.
• 변수·API·DB처럼 화면에서 직접 저장할 수 없는 요소는 경로, selector, 표시 내용과 Cake20 View 소스 힌트를 포함해 AI Chat으로 넘깁니다.
• AI가 파일을 수정하는 동안 에디터는 변경 파일을 표시하고 작업이 끝나면 현재 Preview를 자동으로 갱신합니다.

저장·검수·운영의 경계

에디터에서 저장한 내용은 바로 운영 웹사이트에 반영되지 않습니다. 디자인 Preview와 격리된 검수 환경에서 확인한 뒤 별도의 배포와 시작 단계를 거쳐 운영 release가 됩니다.

• 디자인 Preview는 웹사이트 Bun 서버·DB를 시작하지 않는 내부 Vite 개발 서버입니다.
• 실제 API·인증·이벤트 검수는 분리된 -test 주소와 build/debug Runtime을 사용하지만 DB·Redis·files는 운영 Release와 공유합니다.
• 배포점검은 별도 탭 없이 공개 전 기술 검사와 AI 수정 연결을 바로 제공합니다.
• 데이터베이스 오른쪽 펼침 메뉴의 스토리지는 운영 사용자 파일 관리 화면을 새 탭으로 엽니다.
• 검수 빌드는 운영 Release 코드를 덮어쓰지 않지만 검수 중 DB·Redis·files 변경은 공용 데이터에 반영됩니다.