빌더로 앱 개발하기
빌더는 PlantPulse Studio 의 작업대입니다. 왼쪽 채팅창에 우리말로 지시하면 AI 에이전트가 실제 앱을 고치고, 가운데 미리보기가 곧바로 바뀌며, 다 되면 [배포] 한 번으로 현장에 내보냅니다.
빌더를 여는 방법은 두 가지입니다.
- 홈에서 한 문장으로 앱을 만들면 빌더가 바로 열립니다 → 홈에서 앱 만들기
- 이미 만든 앱은 사이드바의 애플리케이션(fa-grid-2) 에서 카드의 [열기] → 앱 카탈로그와 공유
화면 구성
빌더는 세로로 세 칸입니다.
| 위치 | 이름 | 하는 일 |
|---|---|---|
| 왼쪽 | Agent Console | 에이전트와 대화하는 채팅창. 무엇을 만들지·고칠지 지시합니다 |
| 가운데 | Live Preview | 지금 만들어지고 있는 앱 화면. 지시가 끝나면 자동으로 새로고침됩니다 |
| 오른쪽 | Context | 이 앱이 쓰는 데이터·스킬·상태를 보여주는 얇은 레일. 기본은 닫혀 있습니다 |
왼쪽과 가운데 사이의 세로선을 마우스로 끌면 채팅창 폭을 넓히거나 좁힐 수 있습니다.
위쪽 도구 막대
왼쪽부터 뒤로(fa-arrow-left, 애플리케이션 목록으로), 앱 이름, 상태 표시등(세션 준비 중… →
준비됨 → 지시를 처리하는 동안 생성 중…) 이 있고, 오른쪽에는 다음 버튼이 있습니다.
| 버튼 | 아이콘 | 설명 |
|---|---|---|
| 배포 | fa-rocket-launch | 지금 상태를 현장에서 쓸 수 있게 내보냅니다 |
| 스킬 추출 | fa-lightbulb | 이번 대화에서 얻은 노하우를 스킬로 저장 → 현장 스킬 |
| 템플릿으로 저장 | fa-bookmark | 이 앱 구성을 다음 앱의 출발점으로 저장 |
| 데이터 | fa-database | 데이터 탐색기 열기 |
| 코드 | fa-code | 코드 보기 열기 |
| 히스토리 | fa-clock-rotate-left | 변경 이력 열기 |
| 내보내기 | fa-download | 앱 파일 전체를 압축 파일로 내려받기 |
| 원격 푸시 | fa-cloud-arrow-up | 회사 Git 저장소로 보내기(관리자 설정 필요) |
| 컨텍스트 레일 | fa-sidebar-flip | 맨 오른쪽 버튼. 오른쪽 레일을 열고 닫습니다 |
배포를 한 번이라도 했다면 [배포] 옆에 v1 앱 열기 ↗ 칩이 생기고, 그 옆 아이콘으로 링크 공유와
배포 버전 목록을 바로 열 수 있습니다.
맨 아래 상태 표시줄의 앱 항목을 누르면 앱이 지금 실행 중인지 정지됨인지, 로그는 어떤지
확인하고 [재시작] 할 수 있습니다.
첫 지시 보내기
채팅창 머리의 [빌드] / [질의] 토글에서 빌드가 선택돼 있는지 확인하고 하고 싶은 일을 적습니다. (질의는 앱을 고치지 않고 데이터만 물어보는 모드입니다 → 채팅으로 데이터 질의)
- Enter 로 전송, Shift+Enter 로 줄바꿈
- 클립(fa-paperclip)으로 사진·스케치·CSV 를 붙이면 그 화면을 그대로 옮겨 만듭니다
- 처리 중에는 전송 버튼이 빨간 중단 버튼으로 바뀝니다
대화가 비어 있으면 사이트 목록을 카드로 보여줘 같은 예시 문구가 뜨니 눌러서 시작해도 됩니다.
한 번에 하나씩, 구체적으로. 3번 라인 온도·압력을 큰 숫자 카드로 보여주고, 90도가 넘으면 빨갛게 표시해줘 처럼 대상 · 표현 방식 · 조건을 적으면 결과가 훨씬 정확합니다.
에이전트가 일하는 동안 채팅에는 도구 호출: …, 파일 변경: …, 커밋 … 같은 작업 기록이 쌓입니다.
파일 변경: 줄을 누르면 코드 보기가 그 파일을 펴서 보여줍니다.
3가지 모드
채팅 입력창 바로 위에 플랜 · 자동 · 수락 세그먼트가 있습니다. 고른 모드는 다음에 열 때도 유지됩니다.
| 모드 | 아이콘 | 동작 | 이럴 때 쓰세요 |
|---|---|---|---|
| 플랜 | fa-list-check | 바로 만들지 않고 화면 구성안을 먼저 보여줍니다. 빌드 플랜 카드에서 화면·위젯·필요한 데이터를 확인하고 [승인하고 빌드] 를 눌러야 실제 작업이 시작됩니다 | 처음 만드는 화면, 요구사항이 큰 작업. 엉뚱한 방향으로 가는 것을 미리 막습니다 |
| 자동 | fa-bolt | 지시하면 곧바로 고치고 저장까지 자동(기본값) | 작은 수정, 빠른 반복 |
| 수락 | fa-check-double | 고치되 저장은 보류합니다. 미리보기로 확인한 뒤 직접 수락해야 확정됩니다 | 운영 중인 앱을 손볼 때, 결과를 꼭 눈으로 확인하고 넘어가고 싶을 때 |
수락 모드에서 변경이 생기면 입력창 위에 노란 리뷰 바가 뜹니다.
변경 검토 대기 — 프리뷰에서 확인한 뒤 수락하거나 되돌리세요 [되돌리기] [수락(커밋)]
- [수락(커밋)] — 변경을 확정하고 변경 이력에 남깁니다
- [되돌리기] — 이번 변경을 통째로 버리고 직전 상태로 돌립니다
빌드 플랜 카드의 [닫기] 를 누르면 원래 요청 문장이 입력창으로 돌아옵니다. 문장을 고쳐서
다시 보내면 새 구성안을 받습니다. 작성이 오래 걸릴 땐 [취소] 로 멈출 수 있습니다.
슬래시 명령
입력창에 / 를 치면 명령 목록이 뜹니다. 빌드 모드에서만 동작합니다.
| 명령 | 인자 | 하는 일 |
|---|---|---|
/plan | 필요 | 화면 구성안을 먼저 받아 승인 후 빌드 |
/build | 필요 | 이 내용으로 바로 빌드 |
/review | — | 최근 변경 리뷰(파일 수정 없음) — 문제점과 개선안만 알려줍니다 |
/fix | — | 오류를 찾아 수정 지시 |
/test | — | 타입 검사(tsc) 실행 — 앱에 문법·타입 오류가 없는지 점검 |
/loop | 선택 | 검사를 통과할 때까지 수정 반복(최대 3회) |
/deploy | — | 배포 다이얼로그 열기 |
/plan·/build 는 뒤에 내용을 붙여야 합니다(예: /plan 보일러 압력 대시보드). 빠뜨리면
이 명령에는 내용이 필요합니다 안내가 뜨고 입력은 그대로 남습니다.
/test 로 먼저 오류가 있는지 확인하고, 있으면 /loop 를 돌리세요. 진행 중에도 중단 버튼으로
멈출 수 있고, 끝나면 ✅ /loop 완료 또는 ⚠️ /loop 3회 반복 후에도 오류가 남았습니다 로
결과를 알려줍니다.
미리보기 활용하기
미리보기 머리줄에서 화면 크기를 바꿔 볼 수 있습니다 — 데스크톱(fa-display) · 태블릿(fa-tablet-screen-button) · 모바일(fa-mobile-screen-button). 현장에서 폰으로 볼 앱이라면 모바일로 두고 만드세요. 옆의 새로고침(fa-rotate-right)·새 탭(fa-arrow-up-right-from-square)도 자주 쓰게 됩니다.
고칠 부분을 직접 찍어서 지시하기
말로 위치를 설명하기 어려울 때 씁니다.
- 미리보기 머리줄의 [요소 선택](fa-arrow-pointer) 을 누릅니다 →
요소를 클릭하세요…로 바뀝니다 - 미리보기에서 고치고 싶은 부분을 클릭합니다
- 채팅 입력창 위에 선택한 요소 이름과 함께 빠른 지시 버튼이 뜹니다 — 문구 수정 · 색 변경 · 더 크게 · 삭제, 그리고 직접 입력
버튼을 누르면 선택한 요소 [○○] — 색 변경 같은 문장이 곧바로 전송되고, 직접 입력을 고르면
그 문장이 입력창에 채워져 뒤에 원하는 내용을 이어 쓸 수 있습니다.
4개의 서랍
도구 막대 아이콘을 누르면 오른쪽에서 서랍이 열립니다. Esc 로 닫습니다.
| 서랍 | 여는 곳 | 내용 |
|---|---|---|
| 변경 이력 | fa-clock-rotate-left | 지금까지의 변경 목록. 줄을 누르면 무엇이 바뀌었는지 펼쳐 보여줍니다 |
| 코드 | fa-code | 앱을 이루는 파일 목록과 내용(읽기 전용) |
| 배포 버전 | v1 칩의 fa-chevron-down | 배포된 버전 목록·롤백·공개 여부 전환 |
| 데이터 탐색기 | fa-database | 사이트 → 자산 → 태그를 눌러 들어가며 확인하고, [삽입] 으로 그 대상을 채팅 입력에 붙여넣습니다 |
데이터 탐색기의 [삽입]은 특히 유용합니다. 설비 이름과 ID 가 정확히 입력되므로 에이전트가 엉뚱한 설비를 잡는 일이 줄어듭니다.
변경 이력과 되돌리기
지시 한 번이 끝날 때마다 그 시점의 앱 상태가 자동으로 저장됩니다. 따로 저장 버튼을 누를 필요가 없고, 마음에 안 들면 언제든 과거로 돌아갈 수 있습니다.
- 도구 막대의 히스토리(fa-clock-rotate-left) 를 엽니다
- 맨 위 항목에
현재배지가 붙어 있습니다. 각 줄을 누르면 변경 내용이 펼쳐집니다 - 돌아가고 싶은 시점에서 [이 시점으로] → 확인창에서 승인
이후 변경은 사라집니다. 되돌린 시점보다 나중에 한 작업은 없어집니다. 되돌리기 전에 미리보기와
변경 내용을 확인하세요.
변경 이력은 앱마다 자동으로 남는 기록이고, 여러분이 채팅에 적은 문장이 그 기록에 그대로 남을 수
있습니다. API 키·비밀번호·토큰은 채팅창에 붙여넣지 말고, 관리자에게 요청해
환경설정 에서 등록하세요.
스튜디오가 sk-…, glpat-…, Bearer … 처럼 널리 알려진 형태의 키는 자동으로 *** 로
가리지만, 세상의 모든 키 형태를 알아볼 수는 없습니다.
오른쪽 컨텍스트 레일
도구 막대 맨 오른쪽 fa-sidebar-flip 으로 엽니다. 이 앱이 무엇을 재료로 쓰고 있는지 한눈에 보여줍니다.
- 데이터 연결 — 이 앱이 다룰 사이트·설비·태그를 미리 정해 둡니다. [데이터 연결] 을 눌러 고르면 에이전트가 ID 를 추측하지 않고 정확한 대상으로 만듭니다. 앱을 만들기 전에 한 번 지정해 두면 결과 품질이 크게 좋아집니다
- 데이터 바인딩 — 지금 화면이 실제로 쓰고 있는 설비 ID·조회 경로
- 적용 스킬 — 이번 작업에 참고한 현장 스킬
- 상태 — 마지막 저장 지점과 배포 버전
배포하기
도구 막대의 [배포] 를 누르면 진행 창이 뜨고 빌드 준비 → 프로덕션 빌드 → 서빙 버전 전환 3단계가 지나갑니다. 보통 20~60초 걸리며, 진행 중에는 창을 닫을 수 없습니다.
끝나면 v1 배포됨 과 함께 QR 코드가 나타납니다. 현장 폰으로 스캔하면 바로 열립니다.
- 배포할 때마다 버전이 하나씩 쌓입니다(v1, v2, v3 …)
- 문제가 생기면 배포 버전 서랍에서 예전 버전의 [이 버전으로] 를 눌러 되돌립니다.
현재 서비스 중인 버전에는
서빙 중배지가 붙습니다 - 같은 서랍 위쪽에서 공개 / 비공개를 전환합니다. 누가 볼 수 있는지, 링크·QR 로 어떻게 나눠주는지는 앱 카탈로그와 공유 에서 설명합니다
배포는 그 시점의 사본을 내보내는 것입니다. 배포 후에도 빌더에서 계속 고칠 수 있고, 현장에서 쓰는 앱은 다시 배포하기 전까지 바뀌지 않습니다.
막혔을 때
| 증상 | 이렇게 해보세요 |
|---|---|
| 미리보기가 계속 준비 중 | 잠시 기다린 뒤 [재시도]. 그래도 안 되면 상태 표시줄의 앱 → [재시작] |
| 화면이 하얗게 보임 | /test 로 오류 확인 → /loop 로 자동 수정 |
| 지시가 엉뚱하게 반영됨 | 변경 이력에서 직전 시점으로 되돌린 뒤, 더 구체적으로 다시 지시 |
| 응답이 너무 오래 걸림 | 중단 버튼으로 멈추고, 요청을 작게 쪼개서 다시 |
| 연결이 끊겼다는 안내가 뜸 | 결과가 반영됐을 수 있습니다. 미리보기와 변경 이력을 먼저 확인하세요 |
더 자세한 대처는 트러블슈팅 을 참고하세요.