WebXR 개발의 진입 장벽을 획기적으로 낮춰준 프레임워크, A-Frame의 진가는 복잡한 JavaScript 로직 없이도 HTML 태그 몇 줄만으로 3D 공간을 생성할 수 있다는 점에 있습니다. 이번 가이드에서는 기본적인 환경 설정부터 3D 오브젝트(Primitives)를 배치하는 핵심 원리를 살펴봅니다.
1. 환경 설정: 설치 없는 개발 환경 (CDN)
A-Frame은 별도의 빌드 도구나 무거운 설치 과정이 필요하지 않습니다. HTML 문서의 <head> 영역에 아래의 스크립트 한 줄을 추가하는 것만으로 모든 준비가 끝납니다.
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
2. 모든 것의 시작, <a-scene>
A-Frame의 모든 요소는 <a-scene> 태그 내부에 존재해야 합니다. 이 태그는 3D 공간의 루트(Root) 역할을 하며, 개발자가 복잡하게 설정해야 할 렌더링 루프, 조명(Lighting), 카메라 설정, VR 모드 전환 등을 자동으로 처리해 주는 강력한 컨테이너입니다.
3. 기본 도형(Primitives) 배치하기
A-Frame은 자주 쓰이는 3D 형상을 태그 형태로 제공합니다. 이를 'Primitives'라고 부르며, 각 태그에 속성(Attributes)을 부여하여 위치, 크기, 색상을 조절합니다.
- <a-box>: 정육면체. position, rotation, width, height, depth 등을 설정합니다.
- <a-sphere>: 구체. radius 속성으로 크기를 조절합니다.
- <a-cylinder>: 원기둥. height와 radius를 조절하여 기둥 형태를 만듭니다.
- <a-plane>: 평면 지면. 주로 rotation="-90 0 0"을 주어 바닥으로 활용합니다.
- <a-sky>: 배경(Skybox). 단색 또는 360도 이미지를 입혀 가상 세계의 하늘을 구성합니다.
4. 핵심 개념: 3D 좌표계 (X, Y, Z)
A-Frame은 오른손 법칙(Right-handed coordinate system)을 따르는 미터(meter) 단위의 좌표계를 사용합니다.
- X축: 가로 방향 (양수일수록 오른쪽)
- Y축: 세로 방향 (양수일수록 위쪽)
- Z축: 깊이 방향 (양수일수록 사용자 쪽, 음수일수록 멀어짐)
예를 들어, position="-1 0.5 -3"은 왼쪽으로 1미터, 위로 0.5미터, 사용자로부터 3미터 앞에 물체를 배치하라는 의미입니다.
5. 실전 코드 예시
위의 요소들을 결합하면 아래와 같은 기본적인 VR 씬이 완성됩니다.
<html>
<head>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
💡 Primitives 너머의 ECS 아키텍처
3D 모델링과 게임 엔진(Unreal, Unity)을 다루는 전문가의 시선에서 볼 때, A-Frame의 진정한 강점은 단순한 태그 사용이 아니라 그 저변에 깔린 ECS(Entity-Component-System) 아키텍처에 있습니다.
우리가 사용한 <a-box>는 사실 빈 엔티티(<a-entity>)에 geometry와 material이라는 컴포넌트가 결합된 형태일 뿐입니다. 이러한 구조는 확장이 매우 용이하여, 추후 복잡한 상호작용이나 물리 엔진을 결합할 때도 데이터 기반의 유연한 설계가 가능하게 합니다.
웹 브라우저라는 가벼운 환경에서 이 정도 수준의 3D 공간을 즉각적으로 프로토타이핑할 수 있다는 점은, XR 비즈니스 모델을 기획하거나 프로토타입을 빠르게 검증해야 하는 현장에서 강력한 무기가 될 것입니다.
(참고 자료: 2. Your First A-Frame Scene)
'VR' 카테고리의 다른 글
| [UX Insight] 디지털에 '촉감'을 더하다: 햅틱(Haptics)이 바꾼 사용성의 패러다임 (0) | 2026.04.15 |
|---|---|
| [3D Scan] 현실을 디지털로 옮기는 30일간의 여정: 포토그래메트리 학습 기록 (0) | 2026.04.15 |
| [WebXR Guide] 웹 브라우저, 몰입형 공간의 관문이 되다: WebXR의 이해와 가능성 (0) | 2026.04.13 |
| [Broadcasting] 저널리즘의 새로운 지평: 360도 라이브 스트리밍 가이드 (1) | 2026.04.10 |
| [VR/XR 인사이트] 게임을 넘어선 가상현실(VR): 핵심 개념과 6가지 산업 적용 사례 (1) | 2026.04.09 |