BUILD STUDIO

설치  ·  화면  ·  메뉴별 설명  ·  진행 화면  ·  예제  ·  설정

In English

BUILD STUDIO turns one sentence about what you want to build into a researched development plan, screen mockups, working code, and a shippable installer — without leaving VS Code.

The actual work is done by the AI agent CLIs already installed and signed in on your machine: Claude Code, Codex, or Gemini CLI. BUILD STUDIO decides what to ask them and in what order, and shows you the progress. It never asks for or stores an API key — billing and model choice stay on your own subscription.

⚠️ The interface and all documentation are in Korean. An English UI is not available yet.

만들고 싶은 것을 한 줄로 설명하면 조사해서 개발 계획서를 만들고, 화면을 그려보고, 계획을 따라 실제로 만들고, 실행해 보고, GitHub 에 올리고, 설치파일까지 뽑습니다. 그 사이를 오가느라 창을 옮겨 다닐 일이 없습니다.

VS Code 확장이며, 실제 작업은 이미 여러분의 컴퓨터에 깔려 있고 로그인돼 있는 AI 에이전트 CLI(Claude Code · Codex · Gemini CLI)가 합니다. BUILD STUDIO 는 무엇을 어떤 순서로 시킬지 정하고, 그 진행을 화면에 보여줍니다. API 키를 받아 보관하지 않습니다 — 요금과 모델 선택은 여러분의 구독을 그대로 따릅니다.

설치

1. 확장 설치

VS Code 의 확장(Ctrl+Shift+X) 에서 BUILD STUDIO 를 검색해 설치합니다.

명령줄에서 넣으려면:

code --install-extension buildstudio.buildstudio

git clone https://github.com/xart0425-bit/buildstudio-start.git

powershell -ExecutionPolicy Bypass -File installer\build.ps1

2. 필요한 것

하나만 있어도 시작할 수 있습니다. 자격증명 저장소가 ~/.claude · ~/.codex · ~/.gemini 로 갈라져 있어 전부 로그인해 둬도 서로 간섭하지 않습니다.

스킬은 자동으로 깔립니다. 확장이 켜질 때 skills/buildplanner/ 를 ~/.claude/skills/buildplanner/ 로 복사합니다 (이미 있으면 건드리지 않습니다).

화면 한 바퀴

들어가는 문은 셋입니다 — 활동 표시줄의 아이콘, 상태 표시줄의 BUILD STUDIO, 명령 팔레트의 BUILD STUDIO:. 시작 화면을 열면 자동으로 3분할 배치가 잡힙니다.

화면은 지금 할 수 있는 것만 보여줍니다.

• 폴더가 없으면 카드는 새 프로젝트 하나뿐입니다. 계획서를 저장할 곳이 없으니까요.
• docs/BUILD-PLAN.md 도 docs/TEARDOWN.md 도 없으면 화면 목업 카드는 나오지 않습니다. 눌러봐야 "문서부터 만드세요"를 듣고 돌아 나올 뿐이니까요.
• 카드가 하나뿐이면 한 번 더 누르게 하지 않고 바로 펼칩니다.

메뉴별 설명

	새 프로젝트	폴더를 만들고 그 안에서 시작합니다	<폴더>/
	아이디어를 계획	조사해서 기술 스택과 개발 단계를 정합니다	docs/BUILD-PLAN.md
	역설계	기존 제품의 원리를 뽑아 더 나은 설계를 냅니다	docs/TEARDOWN.md
	화면 목업	문서를 읽어 실제 화면 이미지를 만듭니다	docs/mockups/
	목업 다시 보기	만들어 둔 목업을 다시 열어 반영하거나 고칩니다	—
	만들기	계획서의 다음 단계 하나를 실제로 만듭니다	docs/BUILD-LOG.md
	개발 현황	계획서의 단계를 늘어놓고 그 자리에서 진행합니다	docs/PROGRESS.json
	문서 다시 보기	만든 문서를 미리보기로 엽니다	—
	Dev 모드로 실행	개발 서버를 띄우고 원하는 크기로 엽니다	—
	배포하기	설치파일 · 무설치판 · 웹앱 · iOS · Android	setup.exe 외
	GitHub	로그인 · 저장소 · 버전 · 커밋 · 소개 문서	README.md
	AI 모델 고르기	설계와 이미지를 각각 어떤 AI 로 돌릴지	—
	프로젝트 목록	최근 프로젝트를 열고 · 새 창으로 띄우고 · 지웁니다	—
	3분할 배치	파일 트리 · BUILD STUDIO · Claude 로 다시 세웁니다	—

새 프로젝트

BUILD STUDIO: 새 프로젝트

폴더를 만들고 그 안에서 시작합니다. 계획서 · 목업 · 로그 · 코드가 전부 이 폴더에 모입니다. 새 창으로 열리면 계획 카드가 펼쳐진 채로 이어집니다 — 폴더를 만든 다음 무엇을 해야 하는지 다시 찾을 필요가 없습니다.

아이디어를 계획

BUILD STUDIO: 아이디어를 계획  →  docs/BUILD-PLAN.md

만들고 싶은 것을 한 줄로 적으면, 시작 전에 세 가지를 미리 묻습니다.

작업 도중에 AI 가 되묻는 말은 터미널에 뜨는데, 그때 사용자는 보통 다른 화면을 보고 있습니다. 한 번 물으면 작업이 그대로 멈춥니다. 그래서 갈림길이 될 질문은 앞으로 당겨 버튼으로 받습니다. 건너뛰고 시작 을 누르면 묻지 않습니다.

그다음 GitHub · 모델 · 논문 · 커뮤니티를 실제로 조사해서 기술 스택 · 난이도 · 리스크 · 개발 단계가 담긴 계획서를 씁니다. 조사 없이 일반론으로 채우지 않고, 못 찾은 것은 "해당 없음"으로 남깁니다.

역설계

BUILD STUDIO: 역설계  →  docs/TEARDOWN.md

기존 제품 이름(공식 URL 을 붙이면 정확해집니다)을 넣으면 여섯 단계로 분석합니다.

대상 파악 → 작동 원리 추출 → 균열 찾기(원본이 감수한 타협) → 도약 설계(새 제품) → 차별화 감사(자기 검증) → 문서 작성

베끼기가 아닙니다. 원본이 무엇을 포기했는지 찾아내고, 그 자리에서 더 나은 설계를 뽑아내는 것이 목적입니다. 시작 전에 무엇을 위한 분석인가요?(더 나은 걸 만들려고 · 구조가 궁금해서 · 경쟁 제품 파악)와 어디까지 보나요?(제품 전체 · 특정 기능만)를 묻습니다.

화면 목업

BUILD STUDIO: 화면 목업 만들기  →  docs/mockups/

계획서나 역설계 보고서를 읽어 실제 화면 이미지를 만듭니다. 순서가 중요합니다.

보내기 전에 무엇을 그릴지 적힌 글이 창 하나로 뜹니다. 그 자리에서 고치고 그 자리에서 보냅니다 — 글은 텍스트 영역에, 단추는 바로 아래에 있습니다.

그림이 돌아오면 왼쪽에 그림, 오른쪽에 고칠 말이 있는 창이 뜹니다. 보면서 적고, 적은 채로 누릅니다. 적어 준 말은 다음 프롬프트 뒤에 붙어 다음 그림을 이끕니다.

반영을 누르기 전까지 문서는 손대지 않습니다. 먼저 고쳐 두고 나중에 무르는 방식은, 마음에 안 드는 그림이 잠깐이라도 계획서에 남습니다.

문서가 둘 다 있으면 어느 쪽을 바탕으로 할지 묻습니다. 역설계 보고서를 고르면 분석 대상이 아니라 보고서가 제안한 더 나은 제품의 화면을 그립니다.

그리고 이 그림은 장식이 아닙니다 — 다음 만들기 가 이 화면을 보고 구현합니다.

목업 다시 보기

BUILD STUDIO: 목업 다시 보기

docs/mockups/ 에 그림이 있을 때만 나타납니다. 만들어 둔 목업을 다시 열어 그 자리에서 반영하거나, 고칠 말을 적어 다시 만듭니다.

창을 한 번 닫으면 다시 고를 길이 없어서, 그림이 멀쩡히 남아 있는데도 처음부터 새로 만들어야 했습니다.

만들기

계획이 끝난 자리에서만 나타납니다. 시작 화면의 카드로는 내놓지 않습니다 — 계획서가 있어야 의미가 있는 버튼이기 때문입니다.

기본 순서는 계획 → 화면 목업 → 계획서에 반영 → 개발 현황 → 만들기 입니다. 목업을 반영하면 그대로 이어서 만들기가 시작되고, 목업을 건너뛰고 목업 없이 만들기 를 눌러도 마찬가지입니다 — 어느 쪽이든 docs/PROGRESS.json 이 없으면 그것부터 만든 다음 코드를 씁니다. 현황 파일이 만들어지면 개발 현황 창이 스스로 열립니다.

docs/BUILD-PLAN.md 를 읽고 다음 단계 하나를 실제로 만듭니다. 한 번에 전부 만들지 않습니다.

• 만들기 전에 무엇을 만들지 한 문단으로 먼저 말합니다 — "그건 아닌데"라고 말할 틈을 줍니다.
• 이미 있는 코드를 갈아엎어야 하면 반드시 먼저 묻습니다.
• 껍데기만 만들고 "완성"이라 하지 않습니다. 의존성을 넣으면 실제로 설치하고 실행해서 확인합니다.
• 끝나면 docs/BUILD-LOG.md 에 만든 것 · 확인한 것 · 남은 것을 덧붙입니다. 다음 만들기 가 그 로그를 읽고 이어서 갑니다.

개발 현황

BUILD STUDIO: 개발 현황  →  docs/PROGRESS.json

계획서의 단계를 전부 늘어놓고, 아직 안 끝난 단계마다 진행 버튼을 답니다. 눌러야 할 곳이 화면에 보이므로 "이제 뭘 하지"를 매번 다시 묻지 않아도 됩니다.

• 이 파일은 만들기가 시작될 때 자동으로 만들어집니다. 목업을 계획서에 반영한 뒤든, 목업 없이 만들기를 누른 뒤든 같습니다
• 위쪽에 전체 진행률 · 완료 단계 수 · 지금 차례
• 단계마다 작업 목록과 끝난 표시. 계획서에 없던 것은 계획 밖 으로 따로 답니다
• 파일이 바뀌면 창이 스스로 다시 그립니다

화면이 코드를 짐작해 그리면 실제와 어긋나기 시작하므로, 무엇이 끝났는지는 docs/PROGRESS.json 한 곳에만 적어 둡니다.

모드 토글 — 진행 버튼 옆에 하나씩 확인 과 자동으로 가 있습니다. 자동으로 는 파일을 고칠 때마다 되묻지 않고 갑니다 (--permission-mode acceptEdits). 명령 실행은 그대로 묻습니다. Shift+Tab 으로만 바꿀 수 있던 것을 눌러야 할 버튼 옆으로 꺼내 둔 것입니다 — 무엇이 켜져 있는지 보이지 않으면, 되묻는 창이 뜨는 것도 안 뜨는 것도 다 고장처럼 읽힙니다.

문서 다시 보기

BUILD STUDIO: 문서 다시 보기

docs/ 안의 .md 를 최근 수정순으로 보여줍니다. 파일을 직접 클릭하면 편집기가 열려 원본 마크다운이 나오므로, 여기서는 항상 미리보기로 엽니다. 전용 스타일시트(media/preview.css)가 적용됩니다.

Dev 모드로 실행

BUILD STUDIO: Dev 모드로 실행

package.json 의 scripts 에서 dev → start → serve 순으로 찾아 터미널에서 띄우고, 실제로 열린 포트를 찾아 원하는 곳에 엽니다.

포트를 미리 정해두지 않습니다. 프로젝트마다 다르고(Vite 5173, Next 3000 …) 설정으로 바뀌기도 해서, 추측한 주소를 열면 빈 화면만 나옵니다. 5173 · 3000 · 8080 · 4200 · 5000 · 8000 · 1420 을 40초 동안 훑되, 띄우기 직전에 이미 열려 있던 포트는 제외합니다. 다른 프로젝트의 서버를 우리 것으로 착각해 엉뚱한 앱을 띄우지 않기 위해서입니다.

배포하기

BUILD STUDIO: 배포하기

프로젝트 확인 을 누르면 지난번 배포의 흔적을 찾아 화면을 미리 채웁니다 — package.json 의 productName · build.icon, installer/*.iss 의 #define AppName, assets/ · public/ · src-tauri/icons/ 의 아이콘 파일. 어디서 가져온 값인지 화면에 함께 적습니다. 안 그러면 고쳐야 할 값인지 알 수 없으니까요.

설치 화면 분위기 칸에 "어두운 배경에 얇은 로고, 파란 강조색" 처럼 적으면 그대로 만들어 줍니다.

GitHub

시작 화면 아래 GitHub 버튼. 한 화면에서 상태를 보고, 그 자리에서 처리합니다.

로그인 · 저장소 생성 · 푸시는 되돌리기 어렵거나 대화가 필요해서 터미널에서 돌립니다. 결과와 오류를 그대로 보셔야 합니다 — 조용히 실패하면 남의 계정에 무슨 일이 일어났는지 알 길이 없습니다.

AI 모델 고르기

BUILD STUDIO: AI 모델 고르기 — 화면 아래 설계 Claude · 이미지 Codex 를 눌러도 됩니다.

설계(계획 · 역설계 · 만들기 · 배포)와 이미지(목업)를 각각 따로 고릅니다. 글을 잘 쓰는 모델과 그림을 만들 수 있는 모델이 같지 않아서입니다.

목록에는 깔려 있는지 · 로그인돼 있는지가 함께 뜹니다. 준비 안 된 것을 고르면 무엇이 빠졌는지 알려줍니다. Claude 는 BUILD STUDIO 의 지시서를 슬래시 명령(/buildplanner:plan)으로 알아듣고, Codex · Gemini 는 같은 지시서 파일을 읽혀서 같은 절차를 밟게 합니다.

프로젝트 목록 · 3분할 배치

시작 화면 아래쪽에 최근 프로젝트가 쌓입니다. 누르면 그 폴더로 이동하고, 새 창 은 따로 띄우고, 삭제 는 폴더 이름을 그대로 입력해야 버튼이 켜집니다.

BUILD STUDIO: 3분할 배치로 정리 는 흐트러진 창을 파일 트리 · BUILD STUDIO · Claude 로 다시 세웁니다.

진행 화면

무엇을 시작하든 화면은 진행 화면으로 바뀝니다. 터미널을 들여다보지 않아도 지금 어디쯤인지 보이게 하는 것이 이 화면의 목적입니다.

맨 위의 가느다란 선은 일하는 동안 계속 흐릅니다. 그 움직임은 status.json 과 무관합니다 — 신호가 안 와도 화면은 계속 숨을 쉬어야 멈춘 것으로 보이지 않기 때문입니다. 끝나면 이 선도 멈춥니다 — 결과는 나왔는데 선만 계속 돌면 아직 일하는 중으로 읽힙니다. 경과 시간은 1초마다 갱신됩니다.

어떻게 이걸 아나

AI 는 단계에 들어갈 때마다 워크스페이스의 .buildstudio/status.json 을 덮어씁니다.

{ "kind": "plan", "step": 2, "label": "조사 중 — GitHub, 모델, 논문, 커뮤니티", "done": false }

확장은 이 파일을 감시하다 화면에 반영하고, 다 끝나면 이렇게 받습니다.

{ "kind": "plan", "step": 4, "label": "완료", "done": true, "file": "docs/BUILD-PLAN.md" }

단계 표시는 없어도 되는 정보로만 씁니다. AI 가 이 파일을 안 쓰더라도 화면은 계속 동작해야 하고, 실제 결과는 문서와 코드로 남기 때문입니다.

멈춘 것 같을 때

2분 동안 아무 신호도 오지 않으면 진행 화면 위에 경고가 뜹니다. 상태 표시줄에도 색이 들어간 항목이 하나 생깁니다.

대개는 AI 가 무언가 물어놓고 답을 기다리는 중입니다.

끝나면

문서가 자동으로 미리보기로 열리고, 진행 화면은 다음 할 일로 바뀝니다.

만들기 를 누르면 같은 자리에서 곧바로 다음 진행 화면이 시작됩니다.

단계 목록

처음부터 끝까지 — Time Timer 만들기

남은 시간이 빨간 원판이 줄어드는 것으로 보이는 타이머를 만든다고 해봅시다. 아이가 쓸 것이라 숫자보다 그림이 먼저입니다.

1  ·  폴더를 만든다

새 프로젝트 → 이름 time-timer → 새 창이 열리고 계획 카드가 펼쳐진 채로 시작됩니다.

2  ·  아이디어를 계획한다

입력칸에 이렇게 적습니다.

남은 시간이 빨간 원판으로 줄어드는 타이머. 아이가 쓸 것

세 가지를 묻습니다 — 웹앱 · 일반에 배포 · 새로 시작. 시작 을 누르면 진행 화면으로 넘어가고, 3~5분 뒤 docs/BUILD-PLAN.md 가 미리보기로 열립니다.

3  ·  화면을 먼저 본다

계획서가 생겼으니 이제 화면 목업 카드가 나타납니다. 프롬프트가 편집기에 뜨고("한가운데 커다란 빨간 원판, 아래에 시작/정지…"), 고칠 게 없으면 그대로 진행합니다. 1~3분 뒤 이미지가 열립니다. 마음에 들면 반영, 아니면 버리고 다시 만들기.

4  ·  만든다

만들기 를 누르면 Claude 창에 먼저 이렇게 뜹니다.

1단계를 만듭니다. src/Dial.jsx 에 SVG 원호를, src/useTimer.js 에 requestAnimationFrame 기반 카운트다운을 두겠습니다. 계획서의 "원판이 도는 화면"까지입니다. 소리와 설정은 다음 단계입니다.

전부 만들지 않습니다. 1단계 하나입니다. 끝나면 docs/BUILD-LOG.md 에 만든 것 · 확인한 것 · 남은 것이 남습니다.

5  ·  돌려본다

Dev 모드로 실행 → 모바일 (390 × 844). 터미널에서 npm run dev 가 돌고, 확장이 실제로 열린 포트(여기서는 5173)를 찾아 위 그림 같은 창으로 엽니다. 아이 손에 쥐여줄 화면 그대로입니다 — 원판이 도는지, 60초가 정말 60초인지 눈으로 봅니다.

6  ·  올린다

GitHub → 로그인 → 저장소 만들기(공개) → 커밋 메시지 1단계 — 원판이 도는 화면 → 커밋하고 올리기. 기능 소개 생성 을 누르면 코드를 읽어 README.md 를 써줍니다.

7  ·  이어서 만든다

만들기 를 다시 누릅니다. 이번엔 docs/BUILD-LOG.md 를 읽고 2단계(시간 설정과 일시정지)부터 시작합니다. 3단계, 4단계도 같은 방식입니다.

8  ·  내보낸다

배포하기 → 웹앱 → 프로젝트 확인(이름 Time Timer, 버전 0.4.0 이 자동으로 채워집니다) → 배포 준비 시작. 데스크톱 앱으로도 주고 싶다면 Windows 설치파일 을 고르고 아이콘 파일과 "밝은 배경에 빨간 원, 흰 글씨" 같은 분위기를 적어주면 됩니다.

설정

파일 ▸ 기본 설정 ▸ 설정 에서 buildstudio 로 검색합니다.

어떻게 만들어졌나

extension.js      시작 화면 · 진행 감시 · 실행 · 배포 · GitHub · 프로젝트 관리
engines.js        어떤 AI 로 돌릴지 한 곳에서 판정 (설치 · 로그인 · 명령 조립)
mockup.js         문서를 읽어 목업 프롬프트를 만들고, 물어본 뒤 문서에 반영
status.js         개발 현황 화면 — 계획서 단계를 늘어놓고 그 자리에서 진행
codexImages.js    Codex 로 이미지 만들기
geminiImages.js   Gemini API 로 이미지 만들기

skills/buildplanner/skills/
  plan · teardown · build · release · readme     AI 에게 건네는 지시서

installer/
  build.ps1       VSIX 포장 + Inno Setup 컴파일
  sync-fork.ps1   포크 앱 내장본 동기화

몇 가지 결정과 그 이유:

• AI 를 직접 부르지 않습니다. 이미 깔려 있고 로그인돼 있는 CLI 에 일을 넘깁니다. API 키를 받아 보관할 일이 없고, 요금·모델은 사용자의 구독을 그대로 따릅니다.
• 문서화된 인터페이스만 씁니다. Claude Code 확장의 내부 API 를 부르는 편이 화면상 매끄럽지만, 그건 번들 내부라 확장이 업데이트되면 조용히 깨집니다.
• 진행 상황은 파일로 주고받습니다. .buildstudio/status.json 하나로 어느 엔진에서 돌든 같은 화면이 나옵니다.
• 작업은 단계로 쪼갭니다. 한 번에 전부 만들면 사람이 확인할 수 없는 크기가 됩니다.
• 되돌리기 어려운 일은 터미널에서 보여주며 합니다. GitHub 푸시, 저장소 생성, 폴더 삭제.

알아둘 것

• Claude 창에서는 Enter 를 한 번 눌러야 시작됩니다. Claude 확장이 프롬프트를 입력창에 적어주는 것까지만 허용하고, 밖에서 보낼 방법을 열어두지 않았습니다. 누르는 즉시 시작되길 원하시면 buildstudio.runIn 을 terminal 로 바꾸세요. 대신 되묻는 말이 터미널 글자로 뜹니다.
• 제한 모드(신뢰하지 않은 폴더)에서는 아무것도 시작되지 않습니다. 터미널을 만드는 것 자체가 막히기 때문입니다. 시작 화면은 열리고, 폴더를 신뢰하면 하던 작업을 이어갑니다.
• 상단 메뉴 항목은 없습니다. VS Code 는 확장이 최상위 메뉴를 만드는 것을 허용하지 않습니다. 활동 표시줄 · 상태 표시줄 · 명령 팔레트로 들어갑니다.
• 목업은 문서가 있어야 만들 수 있습니다. docs/BUILD-PLAN.md 또는 docs/TEARDOWN.md 중 하나는 있어야 합니다.
• 만들기 는 한 단계씩만 합니다. 계획서 전체를 한 번에 만들지 않습니다.
• 프로젝트 삭제는 되돌릴 수 없습니다. 폴더를 통째로 지웁니다. 그래서 이름을 그대로 입력해야만 버튼이 켜집니다.
• iOS · Android 배포는 macOS 또는 해당 도구가 갖춰진 환경이 필요합니다.
• 서명 없는 설치파일은 Windows SmartScreen 경고를 띄웁니다. Smart App Control 이 켜진 PC 에서는 실행이 막힐 수 있습니다.

MIT License