
AR vs VR vs XR: 개발자가 알아야 할 '확장 현실'의 모든 것
포켓몬 GO부터 애플 비전 프로까지. 헷갈리는 AR, VR, MR, XR의 개념을 '창문과 문' 비유로 정리하고, 이커머스 프로젝트에 AR을 도입해 반품률을 30%에서 8%로 줄인 경험을 공유합니다.

포켓몬 GO부터 애플 비전 프로까지. 헷갈리는 AR, VR, MR, XR의 개념을 '창문과 문' 비유로 정리하고, 이커머스 프로젝트에 AR을 도입해 반품률을 30%에서 8%로 줄인 경험을 공유합니다.
공개 API를 운영하다 보면 예상치 못한 대량 요청에 시달릴 수 있다. Rate Limiting과 API Key 관리로 API를 보호하는 방법을 정리했다.

admin/user 두 역할로 시작했는데, 요구사항이 복잡해지면서 RBAC만으로 부족해졌다. ABAC까지 고려한 권한 설계를 정리했다.

서비스가 3개로 늘어나면서 각각 로그인을 구현하는 게 지옥이었다. SSO로 한 번의 인증으로 모든 서비스에 접근하게 만든 이야기.

비밀번호 찾기가 CS의 절반을 차지했는데, Passkey를 도입하니 비밀번호 자체가 필요 없어졌다. 근데 구현이 생각보다 복잡했다.

작년, 저는 인테리어 가구 커머스 스타트업의 개발을 맡고 있었습니다. 당시 우리 서비스의 가장 큰 골칫덩어리는 바로 '반품률'이었습니다. 무려 매출의 30%가 반품으로 증발하고 있었죠.
고객들의 반품 사유 1위는 항상 똑같았습니다. "사진으로 볼 때는 예뻤는데, 막상 우리 집 거실에 놓으니 너무 크네요(또는 작네요/색이 안 어울리네요)."
배송비 손실도 문제였지만, 고객들이 "실패했다"는 부정적인 경험을 갖게 되는 것이 더 치명적이었습니다. 줄자를 들고 사이즈를 재보라고 안내도 해봤지만, 사용자 경험(UX) 측면에서 너무 번거로운 일이었습니다.
그때 결심했습니다. "이케아(IKEA)처럼 우리도 앱에서 카메라를 켜면 가구를 미리 놓아볼 수 있게(AR) 하면 어떨까?"
처음에는 걱정도 있었습니다. "그거 게임이나 포켓몬 GO 같은 데서나 쓰는 거 아니야?", "개발 비용이 너무 많이 들지 않을까?", "웹 개발자인 우리가 할 수 있어?"
하지만 저는 확신이 있었습니다. 그리고 3주간의 프로토타이핑 끝에 웹 기반 AR(WebAR) 기능을 도입했고, 결과는 놀라웠습니다. 반품률이 30%에서 8%로 수직 하락한 것입니다. 고객들은 "우리 집에 미리 놓아보니 확신이 생겨서 결제했다"고 입을 모았습니다.
이 경험을 통해 저는 깨달았습니다. "AR/VR은 단순한 엔터테인먼트가 아니다. 비즈니스 문제를 해결하는 강력한 도구다." 오늘은 헷갈리기 쉬운 AR, VR, MR, XR의 개념을 개발자 관점에서 명확히 정리하고, 실제에 어떻게 적용할 수 있는지 공유하려 합니다.
AR, VR, MR, XR... 용어가 너무 많아서 혼란스럽죠? 가장 직관적인 비유인 "창문(Window) vs 문(Door)" 모델로 정리해봤다.
XR = AR + VR + MR이제 개발자 모드로 들어가 봅시다. "그래서 이걸 코드로 어떻게 구현하는데?"
AR이 단순히 카메라 위에 이미지를 띄우는 게 아닙니다. 핵심은 "여기가 바닥인지 벽인지 아는 것"입니다. 이걸 가능하게 하는 기술이 SLAM입니다. 카메라인지 센서를 통해 주변 공간의 특징점(Feature Point)을 찾고, 3차원 지도를 실시간으로 그리면서 내 위치를 추적합니다.
앱 설치 없이 웹 브라우저에서 바로 AR을 실행하는 것이 접근성이 가장 좋습니다.
<!-- 간단한 마커 기반 AR 예제 -->
<html>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin: 0; overflow: hidden;">
<a-scene embedded arjs>
<!-- 'Hiro'라는 마커를 카메라가 인식하면 -->
<a-marker preset="hiro">
<!-- 그 위에 노란색 3D 박스를 띄운다 -->
<a-box position="0 0.5 0" material="color: yellow;"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
이 코드 10줄이면 스마트폰 웹에서 AR을 돌릴 수 있습니다. 물론 퀄리티 높은 상용 서비스를 만들려면 Three.js나 R3F (React Three Fiber)를 깊게 파야 합니다.
웹 VR도 있지만(WebXR), 고성능 VR 콘텐츠는 대부분 게임 엔진으로 만듭니다.
// Unity C# 예시: VR 컨트롤러 트리거 당기기
using UnityEngine;
using UnityEngine.XR;
public class VRGun : MonoBehaviour {
void Update() {
// 오른쪽 컨트롤러의 트리거 버튼 입력을 감지
if (InputDevices.GetDeviceAtXRNode(XRNode.RightHand).TryGetFeatureValue(CommonUsages.triggerButton, out bool isPressed) && isPressed) {
Fire(); // 발사 로직
}
}
}
2024년, 애플이 '비전 프로(Vision Pro)'를 출시하면서 판도가 바뀌고 있습니다. 애플은 'VR'이나 'AR'이라는 단어 대신 "공간 컴퓨팅(Spatial Computing)"이라는 용어를 밉니다.
기존 컴퓨터는 '모니터'라는 2차원 사각형 안에 갇혀 있었습니다. 마우스 커서도 x, y 좌표뿐이었죠. 공간 컴퓨팅은 "내 방 전체가 모니터"가 되는 개념입니다. 앱 아이콘이 허공에 떠 있고, 손짓(Hand Tracking)과 눈동자(Eye Tracking)로 클릭합니다.
개발자로서 AR/VR 도입을 고민한다면 다음 기준을 따르세요.
물론 장밋빛 미래만 있는 건 아닙니다. 제가 겪은 한계점들은 이렇습니다.
우리는 지금까지
<html>, <body> 태그 안에 갇힌 2D 웹사이트만 만들어왔습니다.
하지만 이제 웹은 3D로, 그리고 공간으로 확장되고 있습니다.
반품률을 줄이기 위해 AR을 도입했던 제 경험처럼, 기술 그 자체보다는 "이 기술이 사용자의 어떤 문제를 해결해 줄 수 있는가?"에 집중해 보세요. 모니터 밖의 세상에도, 여러분의 코드가 실행될 공간은 무한합니다.