WEB PREVIEW

서버를 켜지 않는 디자인 모드

디자인 모드는 에디터가 열려 있는 동안 별도 샌드박스 Vite 개발 서버를 실행합니다. 웹사이트 Bun 프로세스, 인증과 DB를 시작하지 않고 Cake20 View·CSS 변경 모듈만 HMR로 갱신합니다.

• 현재 페이지뿐 아니라 app/pages의 1단계 그룹 페이지를 메뉴에서 직접 선택합니다.
• 동적·선택·catch-all 페이지는 안전한 Preview 경로로 치환해 렌더링합니다.
• 페이지, 컴포넌트와 레이아웃의 sample props를 사용해 독립 화면을 바로 확인할 수 있습니다.
• 보호 페이지나 로그인 화면도 선택한 Preview 경로를 유지하며 디자인 모드에서는 API mutation을 실행하지 않습니다.
• 현재 화면과 스크롤 위치를 기억하고 다시 그릴 때 같은 위치로 복원합니다.
• 상단 Preview 제목은 마우스를 올리면 흰색 원형 두 화살표 reload 커서로 바뀌며 클릭하면 현재 Preview를 새로고칩니다.

기기별 반응형 확인

• package.json의 device와 orientation을 에디터 해상도 메뉴의 최초 선택에 반영합니다. 사용자가 이후 메뉴에서 바꾼 선택은 그대로 유지합니다.
• 데스크톱은 자동 크기, 1920×1080과 1280×768을 제공합니다.
• 태블릿은 iPad Air 13·11, 모바일은 iPhone 17 Max·Pro viewport를 제공합니다.
• 선택한 해상도는 검은 기기 프레임 안에 실제 비율로 축소해 표시합니다.
• 가로·세로 회전과 기기별 마지막 선택을 브라우저에 보관합니다.
• 첫페이지 메뉴에서 index 또는 원하는 페이지를 고르면 다른 소스 파일을 선택해도 그 화면을 고정합니다. 선택 안함을 고르면 현재 페이지·컴포넌트·레이아웃에 맞춰 Preview를 다시 전환합니다.

HTML·SVG·이미지 확인

• HTML은 가운데 영역에서 브라우저로 먼저 표시하고 브라우저와 스크립트를 전환해 확인합니다.
• SVG는 코드 편집과 이미지 Preview를 함께 제공하며 저장 전 결과도 확인할 수 있습니다.
• PNG, JPEG, WebP, GIF, AVIF, BMP와 ICO는 가운데 영역에 이미지로 표시합니다.
• public과 app/assets의 래스터 이미지는 가운데 이미지를 클릭하면 요소선택과 같은 이미지 편집기를 엽니다.
• 이미지나 서버 파일을 선택해도 오른쪽 WEB PREVIEW는 마지막 웹 화면을 유지해 파일과 적용 결과를 나란히 확인할 수 있습니다.

실제 검수 실행

API, 인증, DB, Queue, WebSocket과 SSE까지 확인할 때는 전체 검수를 실행합니다. build/debug 검수 Runtime을 준비하고 모든 서버 테스트가 통과하면 같은 WEB PREVIEW가 -test 웹사이트 검수 화면으로 바뀝니다.

• 상단의 시작·종료 버튼으로 검수 상태를 제어하고, 오른쪽 열기 버튼으로 시작된 검수 사이트를 새 창에서 엽니다.
• 시작이 가능한 동안에는 시작 버튼을, 열기가 가능한 동안에는 매우 연한 회색 테두리의 열기 버튼을 부드럽게 반복 페이드해 다음 동작을 안내합니다. 글자와 아이콘 색은 유지하고 배경색만 변화시키며 시작 버튼은 페이드 정점에서 거의 흰색, 열기 버튼은 중간 회색으로 표시합니다.
• 검수 Runtime 중에는 현재 화면을 유지하고 종료하면 저장해 둔 첫페이지 선택 또는 소스 연동 상태로 돌아갑니다.
• 새 창으로 검수 웹사이트를 열어 실제 브라우저 동작과 로그인도 확인합니다.
• 이미지 편집기에서 저장하면 테스트 사이트 캐시 무효화를 예약합니다. 다음 실행 화면에서 해당 캐시만 비우고 public 파일은 캐시하지 않아 같은 경로의 교체 이미지도 최신 파일로 표시합니다.
• 마지막 에디터 연결이 닫히거나 2분 동안 끊기면 테스트 웹사이트를 자동으로 종료합니다.
• 검수 실행 중 요소선택을 켜면 실행은 유지하고 최신 디자인 Preview에서 요소를 고릅니다. MCP 작업 상태와 관계없이 사용할 수 있으며 같은 파일이 바뀌었다면 저장 직전 충돌 검사를 다시 수행합니다.