IoT & 라즈베리파이

라즈베리파이 5 + 신상 3D 프로젝트 파스칼 에디터: 브라우저에서 즐기는 초고성능 3D 웹 에디터 구축 가이드

by 프리땐서.블로그 2026. 3. 23.

라즈베리파이 위에서 3D 빌딩 에디터를 돌릴 수 있다는 사실, 알고 계셨나요? pascalorg/editor는 React Three Fiber와 WebGPU를 기반으로 만들어진 오픈소스 3D 에디터입니다!

 

GitHub에서 누구나 내려받아 로컬 환경에서 실행할 수 있습니다. 이 글에서는 라즈베리파이 4/5(64비트 OS)에 Bun 패키지 매니저를 설치하고, pascalorg/editor를 처음부터 끝까지 구동하는 방법을 단계별로 안내합니다.

📌 이 글에서 배울 수 있는 것

  1. pascalorg/editor의 기술 스택(React Three Fiber, WebGPU, Bun, Next.js)과 라즈베리파이 호환 조건
  2. 라즈베리파이 4/5에서 Bun을 설치하고 의존성을 구성하는 구체적인 명령어 시퀀스
  3. Chromium 브라우저에서 WebGPU를 활성화해 3D 에디터를 정상 렌더링하는 방법

pascalorg/editor란 무엇인가

pascalorg/editor는 GitHub Stars 1,400개를 넘긴 오픈소스 3D 건물(빌딩) 에디터입니다. React Three Fiber(Three.js의 React 래퍼)와 차세대 그래픽 API인 WebGPU를 활용해 브라우저 안에서 건물의 층(Level), 구역(Zone), 노드(Node)를 직접 편집할 수 있습니다.

프로젝트 구조는 Turbo 모노레포로 구성되어 있습니다:

  • apps/editor — Next.js 기반 에디터 앱 (포트 3000)
  • packages/core — 스키마 정의, 상태 관리, 씬 시스템
  • packages/viewer — 3D 렌더링 컴포넌트

패키지 매니저로는 Bun(JavaScript 올인원 런타임 + 패키지 매니저)을 사용하며, npm이나 yarn이 아니라 bun install, bun dev 명령어로 구동합니다.

라스베리 파이 5 개발서버 실행 후 웹브라우저 접속 화면

pascalorg/editor 라스베리 파이 5 실행 후 브라우저 접속화면 — 3D 빌딩 에디터 화면

필수 준비물 및 호환성 체크

설치 전에 반드시 아래 조건을 확인하세요. 특히 Bun은 64비트 OS 전용이므로, 32비트 환경에서는 동작하지 않습니다.

항목 최소 사양 권장 사양
라즈베리파이 모델 Raspberry Pi 4 (4GB) Raspberry Pi 5 (8GB)
운영체제 Raspberry Pi OS 64-bit (Bookworm) Raspberry Pi OS 64-bit (Bookworm) 최신판
아키텍처 aarch64 (arm64) aarch64 (arm64)
저장 공간 16GB SD 카드 32GB 이상 SD 카드 또는 SSD
인터넷 연결 필수 (의존성 다운로드) 유선 LAN 권장
Bun 버전 1.x 이상 (arm64) 최신 안정 버전

⚠️ 주의: Raspberry Pi 3 이하, Pi Zero, Pi Zero W는 32비트 OS 기반이거나 RAM이 부족해 Bun 설치 자체가 불가능하거나 Next.js 빌드 중 OOM(메모리 부족)이 발생할 수 있습니다. Pi 4/5의 64비트 OS 환경을 강력히 권장합니다.

64비트 Raspberry Pi OS 설정

먼저 라즈베리파이에 64비트 Bookworm OS가 설치되어 있는지 확인합니다. 터미널에서 아래 명령어를 입력하세요.

uname -m

출력 결과가 aarch64이면 64비트 환경입니다. armv7l이나 armv6l이 출력되면 32비트 OS이므로 Raspberry Pi Imager로 64비트 OS를 새로 설치해야 합니다. (출처: Raspberry Pi 공식 사이트)

OS 설치 후, 시스템 패키지를 먼저 업데이트합니다:

sudo apt update && sudo apt upgrade -y

그리고 Git과 curl이 설치되어 있는지 확인합니다:

sudo apt install -y git curl

⚠️ 스왑(Swap) 메모리 확장 권장: Next.js 의존성 빌드 시 RAM이 부족할 수 있습니다. 4GB 모델을 사용 중이라면 스왑을 2GB 이상으로 늘려두는 것이 좋습니다.

sudo dphys-swapfile swapoff
sudo nano /etc/dphys-swapfile
# CONF_SWAPSIZE=2048 로 수정 후 저장
sudo dphys-swapfile setup
sudo dphys-swapfile swapon
시스템이 64bit인지 확인 결과

라즈베리파이 터미널에서 uname -m 결과 화면

Bun 패키지 매니저 설치

Bun은 JavaScript/TypeScript의 빠른 올인원 툴킷으로, Node.js와 npm을 대체하는 현대적인 런타임입니다. pascalorg/editor는 Bun을 기반으로 동작하므로 반드시 설치해야 합니다.

Step 1. Bun 공식 설치 스크립트 실행

curl -fsSL https://bun.sh/install | bash

설치가 완료되면 터미널에 아래와 같은 안내가 출력됩니다:

bun was installed successfully to ~/.bun/bin/bun

Step 2. 환경변수 PATH 적용

설치 후 새 터미널 세션에 자동 반영되지 않을 수 있습니다. 아래 명령어로 즉시 적용합니다:

export BUN_INSTALL="$HOME/.bun"
export PATH="$BUN_INSTALL/bin:$PATH"
source ~/.bashrc

Step 3. 설치 확인

bun --version

버전 번호가 출력되면 정상입니다. 만약 No such file or directory 오류가 발생한다면 OS가 32비트이거나 PATH가 적용되지 않은 것입니다. 반드시 64비트 OS에서 진행하세요.

필자가 직접 Raspberry Pi 5 (8GB, Bookworm 64비트) 환경에서 테스트한 결과, curl 설치 스크립트 한 줄로 Bun이 정상 설치되었으며 bun --version이 즉시 응답했습니다.

레포지토리 클론 및 실행

Step 1. 레포지토리 클론

cd ~
git clone https://github.com/pascalorg/editor.git
cd editor

Step 2. 의존성 설치

프로젝트 루트 디렉터리에서 실행해야 합니다. Turbo가 @pascal-app/core@pascal-app/viewer 패키지를 함께 빌드합니다.

bun install

⚠️ 주의: 의존성 설치 중 RAM 부족으로 프로세스가 종료될 수 있습니다. 앞서 안내한 스왑 메모리 확장을 미리 완료해 두세요. 인터넷 속도에 따라 3~10분 정도 소요됩니다.

Step 3. 개발 서버 실행

bun dev

이 명령어 하나로 아래 3가지 작업이 동시에 실행됩니다:

  1. @pascal-app/core 패키지 빌드 (감시 모드)
  2. @pascal-app/viewer 패키지 빌드 (감시 모드)
  3. Next.js 에디터 개발 서버 시작 → http://localhost:3000

서버가 준비되면 라즈베리파이의 Chromium 브라우저에서 http://localhost:3000을 열면 에디터가 로드됩니다.

pascalorg editor bun dev 실행 터미널

라스베리 파이 5 bun dev 실행 후 터미널 출력 화면

전체 빌드가 필요한 경우

개발 서버가 아닌 프로덕션 빌드가 필요하다면 turbo build를 사용합니다:

# 모든 패키지 빌드
bun run turbo build

# 특정 패키지만 빌드
bun run turbo build --filter=@pascal-app/core

브라우저 WebGPU 활성화

pascalorg/editor는 WebGPU(차세대 GPU 그래픽 API)를 사용합니다. 라즈베리파이의 기본 Chromium 브라우저는 WebGPU가 비활성화 상태일 수 있으므로, 아래 방법으로 활성화해야 합니다. 맥 미니 M4 크롬 브라우저로 접속 했을 때는 별도 설정이 필요 업습니다.

방법 1: Chromium 플래그로 WebGPU 활성화

터미널에서 Chromium을 플래그와 함께 실행합니다:

chromium-browser --enable-unsafe-webgpu http://localhost:3000

방법 2: chrome://flags 설정

  1. Chromium 주소창에 chrome://flags 입력
  2. WebGPU 검색
  3. Unsafe WebGPU 항목을 Enabled로 변경
  4. 브라우저 재시작

⚠️ 보안 안내: --enable-unsafe-webgpu 플래그는 개발 및 테스트 목적의 설정입니다. 로컬 개발 환경에서 사용하는 것을 권장하며, 인터넷 브라우징에는 적용하지 않는 것이 좋습니다.

자주 발생하는 오류와 해결법

오류 1: Illegal instruction (core dumped)

Bun 1.1.16 버전에서 Raspberry Pi 4(ARM64)에서 이 오류가 보고된 바 있습니다. 최신 버전으로 업그레이드하거나, 이전 안정 버전으로 다운그레이드하는 방법을 시도하세요.

# Bun 최신 버전으로 업그레이드
bun upgrade

# 특정 버전 설치 (예: 1.1.15)
curl -fsSL https://bun.sh/install | bash -s "bun-v1.1.15"

오류 2: -bash: bun: command not found

PATH가 적용되지 않은 경우입니다. ~/.bashrc 또는 ~/.profile에 아래 줄을 추가하세요:

export BUN_INSTALL="$HOME/.bun"
export PATH="$BUN_INSTALL/bin:$PATH"

이후 source ~/.bashrc를 실행합니다.

오류 3: bun install 중 프로세스 강제 종료

메모리 부족(OOM)이 원인입니다. 스왑 크기를 늘리거나, --smol 옵션으로 메모리 사용을 줄여보세요:

bun install --smol

오류 4: 브라우저에서 3D 화면이 검게 보임

WebGPU가 비활성화된 상태입니다. 앞서 안내한 --enable-unsafe-webgpu 플래그 또는 chrome://flags 설정을 확인하세요.

오류 5: turbo: command not found

turbo는 Bun 의존성으로 포함되어 있습니다. bun install을 먼저 완료한 후 아래와 같이 실행하세요:

bun run turbo build

자주 묻는 질문 (FAQ)

Q. 라즈베리파이 3에서도 설치할 수 있나요?

Pi 3에서 64비트 OS를 사용하는 경우 Bun 설치는 가능하지만, RAM이 1GB에 불과해 Next.js 의존성 빌드 중 메모리 부족으로 실패할 가능성이 높습니다. Pi 4 (4GB 이상) 또는 Pi 5 사용을 권장합니다.

Q. npm이나 yarn으로도 설치할 수 있나요?

공식 README에는 Bun 사용을 명시하고 있습니다. 이론적으로 npm도 가능할 수 있으나, bun.lock 파일 기반의 의존성 해석 방식이 다를 수 있어 예상치 못한 버전 충돌이 생길 수 있습니다. 가능하면 Bun을 그대로 사용하는 것을 권장합니다.

Q. 외부 기기의 브라우저에서 접근하려면 어떻게 하나요?

bun dev는 기본적으로 localhost:3000에 바인딩됩니다. 같은 네트워크의 다른 기기에서 접근하려면 Next.js 설정에서 호스트를 0.0.0.0으로 변경하거나, apps/editor/package.json의 dev 스크립트에 -H 0.0.0.0 옵션을 추가하세요. 그 후 라즈베리파이의 IP 주소(hostname -I로 확인)로 접근할 수 있습니다.

Q. 에디터에서 작업한 데이터는 어디에 저장되나요?

공식 문서에 따르면 씬 데이터(노드, 루트 ID 등)는 IndexedDB에 퍼시스턴트 저장되며, undo/redo 기능은 Zundo 라이브러리를 통해 구현됩니다. 따라서 브라우저를 닫았다 열어도 작업 내용이 유지됩니다.

Q. 32비트 Raspberry Pi OS를 64비트로 바꾸지 않고도 실행할 방법이 있나요?

현재 Bun은 arm32 빌드를 공식 지원하지 않습니다. Node.js를 사용해 Next.js를 직접 실행하는 방법을 시도해볼 수 있지만, 공식 지원 방식이 아니어서 의존성 호환성 문제가 발생할 수 있습니다. 장기적으로는 64비트 OS로 전환하는 것이 가장 확실한 해결책입니다.

Q. bun dev를 실행할 때 루트 디렉터리가 중요한가요?

예, 매우 중요합니다. 공식 README에서도 "반드시 루트 디렉터리에서 bun dev를 실행하라"고 강조합니다. apps/editor 내부에서 실행하면 패키지 감시자가 작동하지 않아 핫 리로드가 적용되지 않습니다.

Q. Raspberry Pi에서 성능이 많이 느린가요?

WebGPU 렌더링은 GPU 성능에 의존합니다. Pi 5의 VideoCore VII GPU는 이전 세대보다 향상되었지만, 복잡한 3D 씬에서는 데스크톱 GPU에 비해 속도가 느릴 수 있습니다. 간단한 빌딩 편집 작업에는 충분히 사용 가능한 수준입니다.

Q. 부팅 시 자동으로 서버를 시작하게 하려면 어떻게 하나요?

systemd 서비스를 등록하는 방법을 권장합니다. ExecStart에 Bun의 전체 경로(/home/pi/.bun/bin/bun dev)를 지정해야 합니다. 단순히 bun만 입력하면 PATH가 없어 command not found 오류가 발생할 수 있습니다.

마무리

지금까지 GitHub pascalorg/editor를 라즈베리파이에 설치하고 실행하는 전 과정을 살펴봤습니다. 핵심을 정리하면 다음과 같습니다.

  • 반드시 64비트 OS + arm64 환경(Pi 4/5) 사용
  • Bun 설치 후 PATH 환경변수 적용 필수
  • 스왑 메모리 2GB 이상으로 확장 권장
  • 프로젝트 루트 디렉터리에서 bun installbun dev 순서 실행
  • Chromium에서 WebGPU 플래그 활성화http://localhost:3000 접속

라즈베리파이라는 소형 컴퓨터 위에서 3D 빌딩 에디터를 직접 구동해보는 경험은 꽤 흥미롭습니다. 혹시 설치 과정에서 막히는 부분이 있다면, 위의 오류 해결 섹션과 FAQ를 다시 한번 확인해 보시기 바랍니다.   

 

ℹ️ 이 블로그는 Google 애드센스를 통해 광고 수익을 얻을 수 있습니다. 자세한 내용은 개인정보처리방침을 참고하세요.

※ 이 글은 2026-03-23 기준으로 작성되었습니다. 최신 정보는 pascalorg/editor GitHubBun 공식 사이트에서 확인하세요.