실행 · 미리보기 · 디자인

만든 프로그램을 돌려 보고(실행), 속을 들여다보고(디버깅), 웹 화면을 보고(웹 미리보기), 디자인을 검수하는(디자인 워크벤치) 기능입니다. 고치고 → 돌리고 → 확인하는 일이 Blyck 안에서 끝납니다.

기능	무료 / Pro
▶ 실행, 출력 창, 오류 위치 표시	무료
디버그 창(`Ctrl+Shift+D`) 보기	무료
웹 미리보기, 북마크	무료
캡처·녹화를 AI 채팅에 보내기	Pro
AI가 실행·관찰(Run & Observe), AI 디버그 도구·자동 조사, AI가 미리보기 조작, 시각 회귀, 디자인 워크벤치	Pro

코드 실행 (▶ 실행)

편집기 ▶ 실행으로 stock_report.py를 실행하고 아래 출력 창에서 결과를 보는 화면

▶ 실행 — 로컬에 저장된 파일을 버튼 하나로 실행(실행 중에는 ■ 중지) · 옆 ▾에서 "디버그"(F5)도 고릅니다(Python · JavaScript)
상태 글 — 끝나면 "종료 코드 0" · [■ 중지] [지우기] [✕]
출력 창 — 맨 위 $ 명령(호박색), 프로그램 출력, 끝에 [종료 코드 0](초록)

편집기에서 지금 파일(또는 그 프로젝트)을 버튼 하나로 실행하고, 편집기 아래 출력 창에서 결과를 실시간으로 봅니다.

사용 순서

파일을 먼저 저장합니다(Ctrl+S). ▶ 실행은 디스크에 저장된 내용을 실행합니다.
편집기 머리 줄의 **[▶ 실행]**을 누릅니다(Ctrl+F5). 출력 창이 열립니다.
실행 중에는 버튼이 빨간 **[■ 중지]**로 바뀝니다.
끝나면 **종료 코드 {n}**과, 오류를 찾았으면 문제 {n}건이 보입니다.

▶ 실행은 로컬에 저장된 파일에서만 보입니다(원격 파일·이름 없는 파일에는 없음).

어떤 명령으로 실행하나

Blyck이 파일과 프로젝트를 보고 명령을 자동으로 정합니다.

대상	실행 명령
`.py` · `.rb` · `.php` · `.lua` · `.sh` 파일	그 파일을 바로 실행(`python 파일` 등) — 프로젝트보다 먼저
`go.mod`	`go run .`
`Cargo.toml`	`cargo run`
`.sln` · `.csproj`	`dotnet run`
`pubspec.yaml`	`flutter run`
`pom.xml` / `build.gradle`	`mvn exec:java` / `gradle run`
`package.json`	`npm start`
표시 파일 없는 `.js` / `.go`	`node 파일` / `go run 파일`

출력 창과 오류 위치

맨 위 $ 명령, 일반 출력, 오류 출력(빨간색), 끝에 종료 코드가 보입니다. 최근 5,000줄까지 보관합니다.
**[지우기]**는 출력 지우기, **[✕]**는 창 숨기기입니다(프로그램은 멈추지 않음).
출력에서 오류 형식(Python, Go, Rust, gcc/clang, C#, TypeScript 등)을 알아보고 열려 있는 파일에 빨간(오류)·노란(경고) 밑줄을 붙입니다. 오류 줄을 누르면 그 파일의 그 줄로 갑니다.

디버그로 실행 — 빨간 점에서 멈추고 값 보기

이 PC에 저장된 Python · JavaScript 파일을 원하는 줄에서 멈추게 하고, 그때의 변수 값을 보며 한 줄씩 진행합니다. print를 넣지 않아도 됩니다.

멈출 줄의 줄 번호 왼쪽을 누르거나 F9 — **빨간 점(중단점)**이 생깁니다.
머리 줄 ▶ 실행 ▾ → 디버그(또는 F5). Python은 처음 한 번 디버거(debugpy, 약 33MB)를 받습니다. JavaScript는 Node.js에 든 디버거를 씁니다.
멈추면 그 줄이 노랗게 칠해지고, 줄 끝에 지금 값이 흐리게 붙고, 아래에 변수 · 호출 순서 칸이 열립니다. 변수에 마우스를 올리면 값이 보입니다.
계속(F5) · 다음 줄(F10) · 함수 안으로(F11) · 함수 밖으로(Shift+F11) · 디버그 중지(Shift+F5).

멈춘 자리에서 AI에게 묻기를 누르면 멈춘 줄 · 오류 · 지금 값 · 호출 순서 · 출력을 같이 보냅니다 (Pro).
AI 채팅이 직접 디버깅 (Pro): “원인 찾아 줘”라고 하면 AI가 빨간 점을 걸고, 디버그로 실행해 값을 읽습니다(dbg_breakpoint · dbg_start · dbg_step · dbg_inspect). 내 편집기 화면이 그대로 같이 움직이고, 상태 줄에 AI 채팅이 디버깅 중이 보입니다. ⚡ 실행 · 🚀 자동 모드에서 됩니다.
원격(SFTP) 파일과 그 밖의 언어는 아직 안 됩니다.

AI가 실행하고 고치기 — Run & Observe (Pro)

AI 채팅에 “테스트 돌려 보고 실패하면 고쳐 줘”라고 하면, AI가 직접 실행 → 출력·오류 확인 → 코드 수정 → 다시 실행을 반복합니다. 출력을 복사해 붙일 필요가 없습니다.

AI 채팅 모드를 ⚡ 실행 또는 🚀 자동으로 둡니다(💬 채팅·📋 계획 모드에서는 실행 못 함).
“pytest 돌려서 실패 고쳐 줘”처럼 부탁합니다.
파일을 옮기거나 덮어쓰는 명령은 승인 카드가 뜹니다. 아주 위험한 명령은 🚀 자동 모드에서도 묻습니다.

기본 기다리는 시간은 30초입니다. 서버처럼 계속 도는 프로그램은 그때까지의 출력을 돌려줍니다.
AI 채팅의 프로젝트 폴더가 원격(SSH)이면 서버에서 실행합니다.

디버그 창과 AI Debug Bridge

Ctrl+Shift+D로 여는 🐞 Debug Bridge 창 — 모인 @BLYCK@ 기록이 실시간으로 보임

거르기 — label · loc 칸, level · source 고르기 / 🔕 AI 자동 조사 · ⏸ 일시정지 · 🗑 지우기 · ✕ 닫기
기록 한 줄 — [단계] 이름 값 · 출처(terminal / preview)

프로그램이 돌아가는 중의 **속 값(변수 값 등)**을 AI가 직접 읽게 해 주는 장치입니다. 코드에 @BLYCK@ … 모양의 기록 한 줄을 넣어 두면, 그 줄이 Blyck 터미널이나 웹 미리보기에 찍힐 때 Blyck이 모아 두고 AI가 읽어 원인을 찾습니다. 보통 AI가 직접 넣고, 다 쓰면 직접 지웁니다.

Ctrl+Shift+D로 모인 기록을 실시간으로 보는 🐞 Debug Bridge 창을 엽니다(무료). 이름·위치·단계로 거를 수 있습니다.
🔔 AI 자동 조사(Pro, 기본 꺼짐)를 켜면 error·assert 기록이 생길 때 AI가 자동으로 조사를 시작합니다. AI를 쓰므로 비용이 듭니다.
▶ 실행 출력 창이나 Blyck 밖에서 찍힌 기록은 모으지 않습니다.

자세한 사용법은 AI 디버그 브리지를 보세요.

웹 미리보기 (Live Preview)

왼쪽 편집기에 app.py, 오른쪽 웹 미리보기에 그 코드가 만든 쇼핑몰 관리 화면

편집기 — 화면을 만드는 코드(app.py)
웹 미리보기 막대 — ← → ↻ ☆ · 주소 칸 · − 100% + · 📷 캡처 · 녹화
Blyck 안의 작은 브라우저에 띄운 개발 중인 화면

만들고 있는 웹사이트를 Blyck 칸 안에 띄워 보는 작은 브라우저입니다. 직접 눌러 볼 수 있고, AI도 화면을 보고 조작할 수 있습니다. 미리보기 자체는 무료입니다.

사용 순서

먼저 개발 서버를 실행합니다(예: 터미널에서 npm run dev).
Ctrl+Alt+B(또는 새 탭 메뉴 → 웹 미리보기 칸)을 누릅니다.
주소를 씁니다(기본값 http://localhost:3000). [열기].

http://를 안 쓰면 자동으로 붙습니다. 내 PC의 HTML 파일은 file:///C:/…/index.html처럼 엽니다.

위쪽 막대

버튼	하는 일
← / → / ↻	뒤로 / 앞으로 / 새로고침
☆	북마크(브라우저에서 가져오기)
주소 칸	주소를 쓰고 `Enter`
− / 100% / +	축소 / 배율(누르면 100%로) / 확대. 25%~500%
📷 캡처	화면을 찍어 캡처 편집기를 연 뒤 AI 채팅에 붙임
빨간 점 녹화	0.5초마다 화면을 찍음(최대 60장, 약 30초) → 보낼 장면을 골라 AI 채팅에 붙임

캡처·녹화를 AI로 보내는 것은 Pro입니다. 보내기 전에 AI 채팅 칸을 먼저 열어 두세요(없으면 그린 그림이 사라집니다).
☆ 북마크: 처음 누르면 [{브라우저}에서 가져오기] 버튼이 보입니다. Chrome·Edge·Brave·Vivaldi(맥은 Safari도)의 기본 프로필 북마크를 가져옵니다. Firefox는 안 됩니다.
구글·GitHub 같은 새 창 로그인은 진짜 창으로 열려 로그인이 됩니다.
콘솔 기록과 네트워크 기록을 각각 최근 200개씩 모아 둡니다(AI가 읽음).
앱을 다시 켜면 주소만 복원됩니다.

AI가 미리보기를 보고 조작하기 (Pro)

AI 채팅이 웹 미리보기를 직접 보고, 누르고, 입력하고, 콘솔 오류를 읽어 고칩니다.

로그인 폼에 테스트 계정을 넣고 제출해 봐. 콘솔 오류가 있으면 원인을 찾아서 고쳐 줘.

AI는 입력 → 기다림 → 화면 찍기 → 콘솔 읽기 순서로 진행합니다.

할 수 있는 일	승인
화면 찍기, 콘솔·네트워크 기록 읽기, 주소 이동, 기다리기	필요 없음
요소 누르기, 글자 입력, 페이지에서 JS 실행	⚡ 실행 모드에서 필요

누르기·입력·JS 실행은 💬 채팅·📋 계획 모드에서 막힙니다.
AI가 화면을 찍으려면 미리보기 칸이 화면에 보여야 합니다.

시각 회귀 — 고치기 전과 후 화면 비교 (Pro)

코드를 고치기 전 화면을 기준으로 저장해 두고, 고친 뒤 화면과 비교해 “의도하지 않게 화면이 깨졌는지” 찾습니다. 웹 미리보기, 데스크탑 미러, 디자인 워크벤치에서 됩니다.

이 기능은 AI에게 말로 시킵니다. 사용자가 누르는 버튼은 없습니다.

“지금 화면 기준으로 잡고, 버튼 색 바꾼 다음 비교해 줘”라고 부탁합니다.
AI가 기준 화면을 저장하고, 코드를 고친 뒤, 비교합니다.

판정	뜻
통과	바뀐 점이 2% 이하
확인 필요	2% 초과
회귀	화면 크기 자체가 바뀜(레이아웃 깨짐 의심)

비교 그림은 왼쪽 BEFORE, 오른쪽 AFTER, 바뀐 곳에 빨간 상자로 보입니다. 기준 화면은 메모리에만 있어서, 칸을 닫거나 앱을 다시 켜면 사라집니다.

디자인 워크벤치 (Pro)

AI가 만든 디자인 부품(색·간격 같은 토큰, 버튼 같은 컴포넌트, 화면, 화면 흐름)을 카드 목록으로 모아 보고, 웹·태블릿·휴대폰 크기로 미리 보며 검수하는 칸입니다(이름표 디자인, 🎨).

프로젝트 폴더의 design-system 폴더에 디자인 목록 파일 _ds_manifest.json을 둡니다. 보통 AI(Claude·Codex)가 만들어 줍니다.
AI 채팅(⚡ 실행 또는 🚀 자동 모드)에 “디자인 패널 열어 줘”라고 합니다. 새 탭 메뉴나 단축키로는 열 수 없습니다.
카드를 누르면 크게 봅니다(웹이면 모바일·태블릿·데스크탑 세 칸). ← 목록으로 돌아갑니다.

버튼	하는 일
[토큰 export ↓]	디자인 토큰을 Flutter(`app_tokens.dart`)·CSS(`tokens.css`) 파일로 내보내기
[골든 하니스 ↓]	iOS·Android 화면 비교 테스트 파일(.dart) 만들기
플랫폼 고르기	전체 / web / desktop / iOS / Android

디자인 칸이 열려 있으면 AI는 목록의 토큰·컴포넌트를 다시 쓰라는 안내를 함께 받습니다.
시각 비교에서 문제가 보이면 답변 아래에 [디자인 재생성] / [무시] 버튼이 붙습니다.
원격(SFTP) 프로젝트 폴더의 design-system은 읽지 않습니다.

자주 묻는 질문

Q. ▶ 실행 버튼이 안 보여요. 원격 파일이거나 한 번도 저장하지 않은 이름 없는 파일입니다. 로컬에 저장한 파일에서만 보입니다.

Q. “실행 명령을 찾지 못함”이 떠요. 지원하지 않는 종류이거나 CMake·Make 프로젝트입니다. 터미널에서 직접 실행하세요.

Q. 고친 내용이 실행에 반영되지 않아요. 저장하지 않았습니다. Ctrl+S 후 다시 실행하세요.

Q. 웹 미리보기가 하얗거나 “페이지 로드 실패”가 떠요. 개발 서버가 켜져 있는지, 주소·포트가 맞는지 확인한 뒤 ↻를 누르세요. 원격 프로젝트라면 서버는 원격에서 돌고 있으니 서버의 주소로 여세요.

Q. AI가 화면을 못 찍어요. 미리보기 칸이 가려져 있습니다. 그 탭을 앞으로 꺼내 보이게 하세요.

Q. 디버그 창에 아무것도 안 나와요. ▶ 실행 출력 창이나 Blyck 밖에서 실행했습니다. Blyck 터미널이나 웹 미리보기에서 실행하세요.

Q. 시각 비교가 “baseline 없음”이라고 해요. 앱 재시작이나 칸 닫기로 기준이 사라졌습니다. AI에게 기준부터 다시 잡게 하세요.

Q. 디자인 패널이 안 열려요. 💬 채팅·📋 계획 모드입니다. ⚡ 실행 모드로 바꾸고 다시 부탁하세요.

Q. (맥) 북마크에 Safari가 없어요. 시스템 설정 → 개인정보 보호 및 보안 → 전체 디스크 접근 권한에서 Blyck을 허용하세요.