DevSpace 딥다이브
— ChatGPT를 내 컴퓨터에 안전하게 연결하는 MCP 서버

1프로젝트 한줄 요약

한 문장으로 이 프로젝트가 뭘 하는지부터.

DevSpace = "ChatGPT에게 내 컴퓨터의 특정 폴더만 안전하게 빌려주는 원격 작업실." 보통 ChatGPT에게 코드를 봐 달라고 하려면 파일을 복사해 붙여넣어야 한다. 길고 번거롭고, 실제로 실행해 볼 수도 없다. DevSpace를 켜면 ChatGPT가 내 진짜 프로젝트 폴더를 직접 열어 파일을 읽고, 코드를 고치고, 검색하고, 테스트·빌드 명령까지 돌린 뒤 "무엇이 바뀌었는지" 보여 준다. 단, 아무 폴더나 되는 게 아니라 내가 허락한 폴더(allowlist)만, 내 비밀번호로 승인한 연결에서만 가능하다.

정리하면 DevSpace의 핵심 약속은 세 가지다. ① ChatGPT/Claude가 실제 로컬 코드를 읽고 고치고 실행한다(복붙 불필요). ② 코드는 클라우드로 안 올라간다(셀프호스팅). ③ 접근 범위·출입구·승인을 전부 사용자가 통제한다(allowlist + 터널 + Owner 비밀번호). AGENTS.md가 직접 못 박는다 — "보안은 나중에 붙이는 게 아니라 핵심 설계의 일부다."

2왜 주목받는가

"ChatGPT를 진짜 코드에 연결"하려는 수요 + "보안을 기본값으로" 설계.

2025~2026년은 AI 코딩 에이전트가 폭발한 시기다. 하지만 대부분은 "복사-붙여넣기" 또는 "코드를 클라우드에 올리기"에 머물렀다. DevSpace가 주목받는 이유는, 그 사이의 빈칸 — "내 코드는 내 컴퓨터에 두되, ChatGPT가 직접 만지게" — 를 보안 우선으로 채웠기 때문이다. 다섯 가지로 본다.

① "ChatGPT를 Codex로" — 시점이 정확하다

ChatGPT가 앱/MCP를 통해 외부 도구를 쓰는 흐름이 커지면서, "그럼 내 로컬 코드도 직접 다루게 하면?"이라는 자연스러운 수요가 생겼다. DevSpace는 바로 그 다리를 놓는다 — 별도 IDE 플러그인 없이, MCP를 지원하는 호스트라면 어디서든.

② 보안을 "기능"이 아니라 "전제"로 둔다

원격에서 내 컴퓨터에 명령을 실행한다는 건 무서운 일이다. DevSpace는 이를 정면으로 다룬다 — 좁은 파일 allowlist(roots)로 접근 범위를 묶고, Owner 비밀번호 승인 페이지로 연결을 검문하며, 내가 통제하는 터널로만 노출한다. "신뢰하는 코딩 파트너에게 기계 접근권을 주는 것과 같다"고 솔직하게 경고하는 태도도 신뢰를 준다.

③ 검증된 코딩 도구를 재발명하지 않는다

파일 읽기·수정·grep·find·ls·bash 같은 까다로운 코딩 원시기능을 직접 다시 짜지 않고, 성숙한 Pi 코딩 에이전트 SDK(@earendil-works/pi-coding-agent)를 백엔드 어댑터로 쓴다. DevSpace는 그 위에 "원격 MCP 인터페이스 + 보안 + 워크스페이스 관리"라는 자기 가치를 얹는다. 영리한 레버리지다.

④ 워크스페이스 + Git 워크트리 모델

폴더마다 open_workspace를 한 번 호출해 workspaceId를 받고 이후 재사용하는 깔끔한 모델을 쓴다. 게다가 격리된 Git 워크트리로 "병렬 코딩 세션"을 지원해, 여러 작업을 서로 간섭 없이 돌릴 수 있다. AGENTS.md/CLAUDE.md 지침도 자동으로 모델에 전달한다.

⑤ ChatGPT Apps 호환 UI + 변경 미리보기

단순 텍스트 응답을 넘어, ChatGPT Apps 호환 호스트에서 툴 카드·변경 요약 UI를 보여 준다(React로 작성된 src/ui/). "무엇을 바꿨는지" диff를 사람이 검토(review)할 수 있는 체크포인트도 있어, 자율 실행의 불안을 줄인다.

3기술 스택 전체 지도

package.json · src/ 소스 트리에서 실제로 확인한 구성.

DevSpace는 전부 TypeScript로 짜인 Node 서버다. 역할별로 ⓐ MCP 서버 본체, ⓑ 코딩 도구(Pi SDK), ⓒ 저장소, ⓓ ChatGPT용 UI, ⓔ CLI·보안으로 나뉜다. 핵심은 "직접 만든 부분(보안·워크스페이스·원격 인터페이스)"과 "빌려 온 부분(코딩 원시기능)"의 조합이다.

ⓐ MCP 서버 계층 — 원격으로 도구를 노출

ⓑ 코딩 도구 계층 — 실제 파일 작업(빌려 온 엔진)

ⓒ 저장소 계층 — 워크스페이스 상태 기억

ⓓ UI 계층 + ⓔ CLI·보안

ChatGPT Apps 호환 호스트에서 보일 툴 카드·변경 요약 UI는 React 19로 작성돼 src/ui/에 있고(workspace-app.tsx·review-payload.tsx), vite로 빌드된다. diff 렌더는 @pierre/diffs를 쓴다. 사용자 진입점인 CLI(src/cli.ts)는 @clack/prompts로 init 마법사(루트·포트·터널 URL 입력, Owner 비밀번호 생성)와 serve·doctor를 제공한다. 보안은 src/oauth-provider.ts(OAuth 승인 흐름)와 ~/.devspace/auth.json(Owner 자격) 중심이다.

4아키텍처 심화 분석

먼저 전체 그림을 한 장으로 본 뒤, "ChatGPT가 파일을 하나 수정하기까지"를 끝까지 따라간다.

DevSpace의 일은 "원격 AI 클라이언트의 도구 호출을, 허용된 로컬 폴더 안의 실제 파일 작업으로 안전하게 중계하는 것"이다. 큰 그림은 이렇다. (1) 클라우드의 ChatGPT가 (2) 내가 통제하는 터널을 거쳐 (3) 내 컴퓨터의 DevSpace 서버에 닿고, (4) Owner 비밀번호로 승인되면, (5) open_workspace로 허용된 폴더를 열어 workspaceId를 받고, (6) 그 ID로 read/edit/shell 도구를 호출하면 (7) 서버가 allowlist를 검사한 뒤 Pi SDK로 실제 작업을 수행한다. 부품 이름보다 숲을 먼저 보자.

독수리 시점 — 전체 구조 한 장

흐름 ① — "ChatGPT가 파일 하나를 고치기까지" (해피패스)

사용자가 "이 프로젝트의 버그를 고쳐 줘"라고 했을 때, 막 뒤에서 벌어지는 일을 순서대로 풀면(실제 server.ts의 도구 흐름):

// 사전: devspace init(루트·비번 설정) → 터널 켜기 → devspace serve
1. 연결·승인  ChatGPT가 공개 /mcp 에 접속 → Owner 비밀번호 승인 페이지 통과
2. 워크스페이스 열기  open_workspace("~/myproj") → roots 검사 OK → workspaceId 발급
3. 맥락 로드  AGENTS.md/CLAUDE.md·사용 가능한 skills 를 함께 반환(모델이 먼저 읽음)
4. 탐색       search/grep(workspaceId, "buggyFn") → 의심 파일 위치 찾기
5. 읽기      read_file(workspaceId, "src/x.ts") → 내용 확인
6. 수정       edit_file(workspaceId, oldText→newText) → resolveAllowedPath 검사 후 적용
7. 검증      shell(workspaceId, "npm test") → 테스트 실행
8. 변경 요약  show changes → 작업 전 체크포인트와 diff 비교해 "무엇이 바뀌었나" 카드

핵심 관례 둘. 첫째, 경로는 매번 다시 검문한다 — workspaceId가 있어도 resolveAllowedPath가 "이 경로가 허용 루트 안인가"를 한 번 더 확인한다(이중 잠금). 둘째, 서버 프롬프트가 모델에게 "파일 생성·수정은 shell로 하지 말고 edit/write 도구로 하라"고 명시한다(셸 리다이렉트·sed -i 등 금지). 도구마다 책임을 못 박아, 변경이 추적 가능하고 안전하게 흐르도록 설계했다.

흐름 ② — 워크트리로 "병렬 코딩 세션"

open_workspace에 mode:"worktree"를 주면, DevSpace가 격리된 Git 워크트리를 만들어(git-worktrees.ts) 그 안에서 작업한다. 같은 저장소를 두고 여러 작업을 서로 간섭 없이 동시에 돌릴 수 있다(예: 한쪽은 기능 개발, 한쪽은 리뷰). 기본은 실제 체크아웃(checkout)이고, 사용자가 "분리된 세션"을 원할 때만 워크트리를 쓴다 — 안전한 기본값 + 필요 시 확장이라는 좋은 패턴이다.

5디렉토리 구조 해부

복잡성의 대부분은 src/server.ts(1,453줄)에 모여 있다. 큰 것만 본다.

모든 게 src/ 안에 있고, 그중 server.ts가 MCP 서버 + 도구 등록의 심장이다. 나머지는 server가 부르는 부품들 — 보안(roots·oauth), 워크스페이스(workspaces·store·worktrees), 도구(pi-tools), UI(ui/), 저장(db/)로 묶어 보면 길이 보인다.

6학습 포인트 (기술별)

이 레포 한 채로 "MCP 서버 + 원격 보안 + ChatGPT Apps UI"를 한 번에 본다.

DevSpace는 "AI에게 시스템 접근권을 안전하게 주는 법"이라는, 요즘 가장 뜨거운 주제의 살아 있는 예제다. 기술별로 무엇을 건질지 짚는다.

7시스템 요구사항

GPU 불필요. "Node + Git + Bash"와 "내가 통제하는 터널"이면 충분하다.

DevSpace는 추론 모델이 아니라 중계 서버라 고사양·GPU가 필요 없다. 대신 Node 런타임, Git, Bash 호환 셸, 그리고 외부에서 내 서버에 닿게 할 터널이 필요하다. Windows는 PowerShell/cmd 단독으론 안 되고 Git Bash나 WSL이 있어야 한다.

가장 빠른 점검은 devspace doctor다 — Node·Git·Bash 등 로컬 환경이 준비됐는지 한 번에 확인해 준다. 그다음 devspace init으로 허용 폴더·포트·터널 URL을 정하고 비밀번호를 받은 뒤, 터널을 켜고 devspace serve로 서버를 띄우면 된다.

8직접 해볼 수 있는 실습 과제

"doctor·init"은 10분, "터널 연결·워크트리"는 한나절. 난이도 순으로.

9관련 기술 심화 학습 로드맵

DevSpace를 100% 소화하기 위한 6주 코스(주당 5~7시간 가정).

10핵심 키워드 사전

이 문서와 레포에 등장한 용어를 한자리에.

11참고 링크

원문·문서·관련 기술 더 파기.

• GitHub 저장소 — github.com/Waishnav/devspace (README·소스·docs)
• 설치/설정 가이드 — docs/setup.md
• 보안 모델 — docs/security.md (꼭 읽을 것)
• ChatGPT 코딩 워크플로 — docs/chatgpt-coding-workflow.md
• npm 패키지 — npmjs.com/package/@waishnav/devspace
• MCP 공식 — modelcontextprotocol.io (프로토콜 개념)
• Cloudflare Tunnel — 문서 (터널 노출 방법)
• 제작자 X — @wshxnv · TrendShift — trendshift.io