XR Blocks 공간앱 프로토타이핑: 헤드셋 없이 시작해 클릭·핀치 검증하기

XR Blocks로 공간앱을 프로토타이핑할 때 헤드셋부터 준비할 필요는 없습니다. 데스크톱 Chrome의 시뮬레이터에서 시작하면 돼요. XR Blocks는 웹 기술로 공간앱 시제품을 만드는 오픈소스 라이브러리이고, 데스크톱에서 동작을 확인한 다음 Android XR 기기로 넘어가 검증을 이어 가는 개발 경로를 제공합니다.

첫 목표는 클릭하면 색이 바뀌는 물체 하나로 잡기를 권합니다. 장면을 크게 만들기 전에 입력과 반응이 제대로 이어지는지부터 확인할 수 있어서예요. 데스크톱에서 클릭에 반응한다면, 그다음은 Android XR 기기에서 핀치로 같은 변화가 일어나는지 볼 차례입니다. 실제 손 입력이나 주변 공간에 대한 반응은 시뮬레이터가 아니라 이 기기 검증 단계에서 확인해야 하는 부분이에요.

클릭과 핀치는 어떻게 같은 반응으로 이어질까

XR Blocks는 three.js 기반이고, 마우스·시선·컨트롤러·손 입력을 하나의 공통 상호작용 체계로 다룹니다. 공식 저장소의 기본 예제를 보면 데스크톱 클릭과 XR 핀치가 같은 원기둥의 색상을 바꿔요. 입력 방식은 달라도, 대상을 선택했을 때 실행할 반응은 하나로 묶어 두는 구조입니다. 처음에는 기능을 여러 개 붙이기보다 이 대응 관계를 이해하는 데 시간을 쓰는 편이 낫다고 봅니다.

손 추적, 환경 인식, 공간 UI는 이 작은 실습이 작동한 뒤에 넓혀 갈 기능으로 미뤄 두세요.

원기둥 예제로 만들고, 돌려 보고, 고치기

공식 시작 문서가 안내하는 경로는 Google AI Studio, Gemini Canvas의 XR Blocks Gem, 그리고 로컬 개발입니다. AI Studio에서는 XR Blocks 프레임워크를 골라 제작하고 바로 미리 볼 수 있어요. Gem은 자연어로 장면을 설명하면 코드가 생성되고, 그 코드를 대화로 고쳐 나가는 방식이고요. 코드를 직접 관리하고 싶다면 로컬 개발 경로를 고르면 됩니다. 이 경우 로컬 프로젝트는 웹 서버로 제공해야 하는데, CDN import map 방식을 쓰면 Node.js도, 별도 빌드 단계도 없이 시작할 수 있습니다.

프롬프트를 쓸 때는 외형보다 검증할 동작을 앞에 두세요.

원기둥 하나를 배치하고 클릭이나 핀치로 색상을 바꿔 주세요. 데스크톱 클릭과 XR 핀치가 같은 색상 변경 동작으로 연결되게 해 주세요.

이 요청에는 대상과 입력, 반응이 모두 분명하게 들어 있습니다. 색상 변화는 결과를 눈으로 바로 확인할 수 있어서 첫 실습에 잘 맞아요. 제작부터 수정까지는 아래 순서로 진행하면 됩니다.

1. 대상과 반응 지정: 원기둥을 조작 대상으로 삼고, 색상 변경을 성공 기준으로 정합니다.
2. 시뮬레이터에서 클릭 확인: 장면이 표시되는지 확인한 뒤, 원기둥을 클릭했을 때 색이 바뀌는지 봅니다.
3. 기기에서 핀치 확인: Android XR 기기에서 같은 원기둥에 핀치 입력을 시도하고 동일한 반응을 확인합니다.
4. 결과에 따라 수정: 어느 환경에서 어떤 입력이 반응하지 않았는지 구체적으로 설명하고, 수정 후 해당 동작을 다시 확인합니다.

4번에서 "안 돼요"라고만 적으면 고칠 방향이 잡히지 않습니다. 시뮬레이터의 클릭인지, 기기의 핀치인지를 나눠서 적는 습관을 들이면 다시 확인할 범위도 좁아져요.

로컬에서 만든 예제라면 작성일과 고정한 SDK 버전을 같이 기록해 두세요. 설치 예제에 나오는 xrblocks@build는 앱을 불러올 때 최신 개발 빌드를 가져옵니다. 그래서 나중에 다시 실행하면 코드가 달라져 있을 수 있어요. 프로젝트 설정 문서대로 build 브랜치의 SHA나 npm 패키지 버전을 고정하면 재현 조건을 분명하게 관리할 수 있습니다.

장면이 열린 것과 조작이 되는 것은 다릅니다

여기서 많이 헷갈립니다. 장면이 떴다고 해서 의도한 조작까지 성공한 건 아니에요. Vibe Coding XR 연구 보고서의 자동 평가는 초기화와 실행 중 예외 발생 여부를 중심으로 하고, 시각적 품질이나 렌더링 성능, 사용자 의도 충족까지는 평가하지 않습니다. 보고서에는 실행 오류가 없는데도 물체를 잡을 수 없는 사례가 나와요. 원기둥 실습에서도 "의도한 입력으로 색이 바뀌는가"를 성공 기준으로 두는 쪽이 정확합니다.

클릭이 성공했다면, 다음 판단은 실제 기기에서 핀치가 어떻게 동작하는지 보고 내리세요. 시뮬레이터에서 성공했다는 사실만으로 모든 WebXR 기기의 호환성이나 실제 성능까지 확대할 근거는 부족합니다.

안내 내용은 2026-11-03 기준 공식 문서와 연구 자료에 따른 것이며, 실제 실행 결과와 기기 성능은 해당 환경에서 별도로 검증해야 합니다.