Run & Preview

코드를 고치고 → 실행하고 → 결과를 확인하는 루프가 Blyck 안에서 끝납니다. 에러는 에디터 마커로 돌아오고, 웹 화면은 패널에 바로 임베드되며, AI가 화면을 직접 보고 검증합니다.

Run & Observe — 실행하고 관찰하기

▶ 실행 — 출력 패널과 오류 마커

▶ 실행 버튼을 누르면 출력이 그냥 흘러가지 않습니다. Problem Matcher가 실시간 출력에서 에러를 파싱해 파일 · 줄 · 심각도로 구조화하고, 해당 위치에 에디터 마커(빨간 밑줄)를 찍습니다. 에러 메시지를 눈으로 좇아 파일을 찾아갈 필요가 없습니다.

실행 명령 자동 감지

프로젝트 루트의 마커 파일을 보고 기본 실행 명령을 자동으로 제안합니다.

감지 파일	제안 명령
`package.json`	`npm start` (build · test 스크립트도 인식)
`go.mod`	`go run .`
`Cargo.toml`	`cargo run`
`*.csproj` / `.sln`	`dotnet run`
`pyproject.toml` / `setup.py`	`pytest`
`Makefile`	`make`
단일 `.py` / `.js` 파일	`python <파일>` / `node <파일>`

명령은 자유롭게 수정할 수 있고 프로젝트별로 저장됩니다. 출력 패널에는 명령($)·표준출력(흰색)·표준오류(빨간색)가 실시간으로 흐르며, 최대 5,000줄을 표시합니다. 실행 중에는 버튼이 ■ 정지로 바뀌고 클릭 즉시 프로세스를 중단합니다.

언어별 에러 파싱 (Problem Matcher)

언어 / 도구	파싱 대상
Python	트레이스백 (`File "...", line N`)
Go / Rust	컴파일 에러 (`filename:line:col`)
C / C++ (gcc · clang)	경고·오류
C# (MSBuild · dotnet)	빌드 오류
Node.js	스택 트레이스
커스텀	정규식으로 matcher 직접 추가

파싱된 에러는 출력 패널에서 파일명:줄번호 형태로 강조 표시되고, 클릭하면 편집기가 해당 줄로 이동합니다.

Live Preview — 앱 안의 브라우저

웹 미리보기 — 로컬 개발 서버 페이지

개발 서버를 실행한 뒤 패널에 웹 화면을 바로 임베드합니다. 브라우저를 별도로 열어 창을 오갈 필요 없이 코드 · 터미널 · 화면을 한 시야에 유지합니다.

미리보기 열기

먼저 터미널에서 개발 서버를 실행합니다 (npm run dev, python -m http.server 등).
새 탭 메뉴(+) → 🌐 웹 미리보기… 선택.
URL 입력창에 서버 주소를 입력합니다 (예: http://localhost:3000).

헤더 컨트롤

버튼	동작
새로고침	현재 URL 재로드
줌 `25%~500%`	배율 조절. 배율 숫자를 클릭하면 100%로 즉시 복귀
URL 표시줄	다른 경로로 직접 이동

콘솔 로그와 fetch/XHR 네트워크 응답은 각각 최근 200개까지 자동 수집됩니다. AI가 진단할 때 이 데이터를 활용합니다.

AI Live Preview 도구

AI 채팅에서 미리보기 패널을 직접 조작할 수 있습니다. AI 채팅의 Act(⚡) 또는 Auto(🚀) 모드에서 아래 도구들이 활성화됩니다.

도구	동작
`panel_screenshot`	현재 화면 캡처 → AI가 이미지로 확인 (어떤 패널이든 종류 자동감지)
`preview_navigate`	지정 URL로 이동
`preview_click`	좌표 또는 셀렉터 클릭
`preview_type`	텍스트 입력
`preview_eval`	페이지 안에서 JavaScript 실행 후 결과 반환
`preview_wait`	셀렉터 또는 N초 대기 (페이지 로드 완료 대기용)
`preview_console_logs`	콘솔 에러·경고 조회
`preview_network`	네트워크 요청 목록 조회

paneId를 생략하면 현재 활성 미리보기 패널에 적용됩니다.

예시 프롬프트:

로그인 폼에 테스트 계정(test@example.com / 1234)을 넣고 제출해봐.
콘솔 에러가 있으면 원인을 찾아서 고쳐줘.

AI는 preview_type → preview_click → preview_wait → panel_screenshot → preview_console_logs 순서로 자동 실행합니다.

AI 비전 회귀 검증

“고쳤다”는 말 대신 화면으로 증명합니다. 코드 수정 전후 화면을 픽셀 단위로 비교해 의도하지 않은 시각적 변화를 자동으로 감지합니다.

비전 회귀 흐름

baseline 저장 — 수정 전 원하는 상태에서 preview_baseline_set 실행
코드 수정 — AI 또는 직접 편집
비교 — preview_baseline_diff 실행 → 변화율(%)과 변화 영역을 빨간 박스로 합성한 이미지 반환

AI가 스크린샷을 vision으로 읽고 콘솔 로그를 교차 확인하므로, 의도한 변경만 일어났는지 · 다른 곳이 깨지지 않았는지(시각 회귀)를 자동으로 잡아냅니다.

도구	동작
`preview_baseline_set`	현재 화면을 baseline으로 저장
`preview_baseline_diff`	현재 화면과 baseline 픽셀 비교, 변화율 + diff 이미지 반환

데스크톱 앱도 지원

웹이 아닌 데스크톱 앱은 데스크톱 미러로 같은 흐름을 사용합니다. 새 탭 메뉴 → 🖥️ 데스크탑 캡처… → 앱 창 선택 시 라이브 스트리밍(보기 전용). AI는 panel_screenshot 도구로 창을 캡처하고, 앱을 재시작해도 창 제목으로 다시 찾아 연결합니다.

제한사항

Live Preview의 자동 조작(클릭 · 입력)은 임베드된 미리보기 패널 안에서만 동작합니다. 외부 브라우저 창은 조작할 수 없습니다.
시각 회귀 비교는 baseline을 저장한 시점의 창 크기 기준입니다. 패널 크기가 바뀌면 baseline을 다시 저장하세요.
▶ 실행 버튼은 로컬 저장 파일에서만 표시됩니다. 원격 SFTP 파일에서는 비활성됩니다.
run_observe 도구(AI 자율 실행)는 ⚡ 실행+검토 · 🚀 자동 모드에서만 동작합니다. 💬 채팅·📋 계획 모드에서는 사용할 수 없습니다.
서버형 프로세스(npm run dev 등)는 run_observe 타임아웃이 30초로 제한됩니다.

FAQ

Q. ▶ 실행 버튼이 보이지 않아요. → 원격(SFTP) 파일이거나 아직 저장되지 않은 파일입니다. 로컬에 저장한 뒤 다시 열면 표시됩니다.

Q. 미리보기가 로드되지 않아요. → 개발 서버가 실행 중인지 확인하세요. 서버 없이는 동작하지 않습니다. 터미널에서 npm run dev 등으로 서버를 먼저 실행하세요. 자세한 내용은 문제 해결 페이지를 참고하세요.

Q. AI 미리보기 도구를 쓰려면 어떻게 해야 하나요? → AI 채팅에서 ⚡ 실행+검토(Ctrl+3) 또는 🚀 자동(Ctrl+4) 모드로 전환한 뒤 미리보기 패널이 열려 있는 상태에서 요청하세요.

Q. preview_eval이 즉시 실패해요. → 페이지가 아직 로드 중입니다. preview_wait로 로드 완료를 기다린 뒤 재시도하세요.

Q. 에러 마커가 에디터에 안 찍혀요. → Problem Matcher가 지원하는 언어인지 확인하세요. 커스텀 에러 형식은 정규식 matcher를 추가해 등록할 수 있습니다.

Q. 비전 회귀 비교가 엉뚱하게 나와요. → baseline 저장 이후 패널 크기가 달라졌을 수 있습니다. preview_baseline_set으로 baseline을 다시 저장한 뒤 비교하세요.

Q. AI가 자동으로 테스트를 실행하게 하려면? → 🚀 자동 모드에서 “테스트 실행하고 에러 고쳐줘”처럼 요청하면 AI가 run_observe로 실행→에러 파싱→코드 수정 루프를 자율로 반복합니다. 관련 내용은 AI 채팅 페이지를 참고하세요.