pascalorg-editor 딥다이브
— 브라우저 3D 건축 편집기에서 "AI가 집을 짓는" MCP 플랫폼으로

1프로젝트 한줄 요약

이 저장소가 대체 무엇인가.

README의 자기소개는 짧고 명확하다: "A 3D building editor built with React Three Fiber and WebGPU." 실제로 열어 보면 Site → Building → Level → (Wall/Slab/Ceiling/Roof/Zone) → Item의 계층 구조 위에서, 각 요소가 Zod 스키마로 타입 검증되고 Zustand 스토어에 플랫 딕셔너리로 저장된다.

루트 AGENTS.md(=CLAUDE.md=GEMINI.md 심링크)는 이 레포가 "Consumed both as npm packages and (in pascalorg/private-editor) as a git submodule"라고 밝힌다 — 즉 이 공개 레포가 상용 서비스(private-editor)의 엔진 역할도 겸한다. 오픈소스 코어 위에 비공개 프로덕트를 얹는 전형적인 "오픈 코어" 전략이다.

2왜 주목받는가

WebGPU 실전 적용 · MCP로 "AI가 집 짓기" · IFC 건축 표준 지원 · 서드파티 플러그인 생태계.

3월 분석 대비 무엇이 달라졌나

경쟁 제품 비교

주목도를 끌어올린 구체적 요인은 다음과 같다. ① "AI가 집을 짓는다"는 화제성. MCP 서버 하나로 Claude가 create_room·add_door·furnish_room을 호출해 실제 3D 건물을 만드는 데모는 AI 에이전트 시대의 대표적 활용 사례가 됐다.
② Vision AI 파이프라인. analyze_floorplan_image·analyze_room_photo·photo_to_scene 툴로 스마트폰 사진 한 장을 3D 씬으로 역변환하는 기능은 실측(measurement) 도구로도 활용 가치가 크다.
③ 프로덕션급 아키텍처 문서. wiki/architecture/의 17개 문서와 .agents/skills/review-architecture/는 대규모 오픈소스 프로젝트가 AI 코딩 에이전트와 협업하는 법을 실전으로 보여준다.

3기술 스택 전체 지도

프론트엔드(R3F/WebGPU) · MCP 백엔드(Bun+SQLite) · Turborepo 10패키지 인프라.

① 프론트엔드 (UI & 렌더링)

② 상태관리 & 데이터 검증

③ 3D 지오메트리 & 연산

④ MCP 백엔드 (packages/mcp) — 신규 축

⑤ 빌드 & 개발 도구

4아키텍처 심화 분석

3계층 레이어 경계 + 3체크박스 노드 정의 모델 + MCP↔브라우저 실시간 동기화.

Pascal Editor의 아키텍처는 AGENTS.md가 못박은 세 개의 엄격한 레이어 경계 위에 서 있다. packages/core는 Three.js를 몰라야 하고(순수 도메인 로직), packages/viewer는 에디터 개념(툴·패널·모드)을 몰라야 하며(뷰어 격리), apps/editor만 이 둘을 조합해 실제 편집 경험을 만든다. 이 경계 위에 MCP 서버가 core를 헤드리스로 직접 구동하는 네 번째 진입점이 얹혀 있다.

먼저 전체 그림 한 장으로 숲을 본다.

이제 대표 흐름 한 줄기 — "AI가 벽 하나를 새로 만들면 브라우저 화면에 어떻게 나타나는가" — 를 입력부터 출력까지 손으로 따라가 본다.

이 레포에서 "정상"이 뭔지 — 3체크박스 노드 정의 모델

Pascal에서 흔한 모양새는 노드 종류(kind)마다 NodeDefinition의 독립적인 3개 필드 중 필요한 조합만 켜는 것이다. 조건 분기 대신 "필드 존재 여부 = 참여 여부"로 다형성을 표현한다.

// shelf — 순수 geometry만, React·프레임 로직 없음
export const shelfDefinition: NodeDefinition<typeof ShelfNode> = {
  geometry: buildShelfGeometry,         // geometry.ts의 순수 함수
}

// door — 순수 geometry + 애니메이션 system 병행
export const doorDefinition: NodeDefinition<typeof DoorNode> = {
  geometry: buildDoorGeometry,
  system: { module: () => import('./animation') },  // operationState 진행
}

MCP와 브라우저가 같은 씬을 동시에 편집할 수 있다는 점도 이 레포의 특징이다. 저장 전 버전을 체크해, 두 클라이언트가 동시에 저장하면 live_sync_version_conflict를 반환하고 재로드하게 한다 — 낙관적 동시성 제어(optimistic concurrency)의 실전 사례다. 이 흐름의 세부 예외 처리(충돌 재시도 로직 등)는 이 문서에서는 생략한다.

5디렉토리 구조 해부

2개 앱 + 10개 패키지 Turborepo 모노레포 — 1,302개 TS/TSX 파일.

6학습 포인트 (기술별)

이 저장소에서 "무엇을 배울 수 있는가" — 개념 → 코드 위치 → 실습 아이디어.

코드 예시 하나로 낙관적 동시성 제어의 감을 잡아보자. "업데이트는 사람이든 MCP든 같은 경로를 탄다"는 점이 핵심이다.

// 업데이트 시 dirtyNodes에 자동 추가 (사람이든 MCP든 동일 경로)
useScene.getState().updateNode(wallId, { thickness: 0.2 })

// GeometrySystem 렌더 루프: dirty 노드 중 def.geometry 보유자만 처리
useFrame(() => {
  for (const id of dirtyNodes) {
    const group = sceneRegistry.nodes.get(id)          // O(1)
    const built = def.geometry(node, ctx, ...)
    disposeOldChildren(group); group.add(...built.children)
    clearDirty(id)
  }
})

7하드웨어 / 시스템 요구사항

WebGPU 지원 브라우저 필수 · MCP 서버는 Bun만 있으면 헤드리스로 별도 구동.

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

난이도별로 손을 움직여 보는 5가지 — 3D 에디터부터 MCP AI 연동까지.

git clone https://github.com/pascalorg/editor.git
cd editor
bun install
bun dev
# http://localhost:3002 에서 에디터 열기

# 리포 루트에서
bun run --filter=@pascal-app/mcp build
claude mcp add pascal bun /absolute/path/to/editor/packages/mcp/dist/bin/pascal-mcp.js

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

5주 코스 — R3F/WebGPU 기초부터 MCP 서버 직접 만들기까지.

10핵심 키워드 사전

이 프로젝트를 읽을 때 반복 등장하는 용어 정리.

11참고 링크

원본을 직접 확인하고 싶을 때.

• GitHub 저장소: github.com/pascalorg/editor (MIT)
• 아키텍처 위키: wiki/architecture/
• MCP 서버 문서: packages/mcp/README.md
• npm — @pascal-app/core: npmjs.com/package/@pascal-app/core
• npm — @pascal-app/viewer: npmjs.com/package/@pascal-app/viewer
• React Three Fiber 공식 문서: r3f.docs.pmnd.rs
• Model Context Protocol 명세: modelcontextprotocol.io
• WebGPU 명세(W3C): w3.org/TR/webgpu
• three-bvh-csg: github.com/gkjohnson/three-bvh-csg
• Trendshift 프로젝트 페이지: trendshift.io/repositories/23831