◫ 공간 UI·XR

컴포트 존

Comfort zone

고개를 돌리지 않고 편하게 보고 손을 뻗어 닿을 수 있는 시야·팔 반경 — 상시 UI는 이 안에 배치한다.

다른 이름: FOV comfort zoneReach zoneField of view guideline

···

html

<svg viewBox="0 0 300 200" class="cz"></svg>

css

body{background:radial-gradient(circle at 50% 90%,#1a1c30,#0a0a12 70%)}
.cz{width:min(100%,420px);height:auto}

js

const svg=document.querySelector('.cz');
const NS='http://www.w3.org/2000/svg';
function el(name,attrs){ const n=document.createElementNS(NS,name); for(const k in attrs) n.setAttribute(k,attrs[k]); return n; }
const cx=150, cy=196;
function wedge(r, deg, fill, stroke){
  const a1=(-90-deg)*Math.PI/180, a2=(-90+deg)*Math.PI/180;
  const x1=cx+r*Math.cos(a1), y1=cy+r*Math.sin(a1), x2=cx+r*Math.cos(a2), y2=cy+r*Math.sin(a2);
  return el('path',{d:'M '+cx+' '+cy+' L '+x1+' '+y1+' A '+r+' '+r+' 0 0 1 '+x2+' '+y2+' Z', fill, stroke, 'stroke-width':1.5});
}
svg.appendChild(wedge(178,60,'rgba(91,91,247,.10)','rgba(91,91,247,.4)'));
svg.appendChild(wedge(70,60,'rgba(255,122,89,.16)','rgba(255,122,89,.55)'));
svg.appendChild(el('circle',{cx,cy,r:6,fill:'#fff'}));
const labels=[['Field of view','rgba(180,190,255,.9)',150,20],['Reach','rgba(255,190,170,.95)',150,138]];
labels.forEach(([t,c,x,y])=>{
  const n=el('text',{x,y,fill:c,'font-size':10,'font-weight':700,'text-anchor':'middle'});
  n.textContent=t; svg.appendChild(n);
});
const nodes=[[150,40,'far'],[76,72,'ui'],[224,72,'ui'],[150,150,'ui']];
nodes.forEach(([x,y,kind])=>{
  const c=el('circle',{cx:x,cy:y,r:kind==='ui'?9:7,fill:kind==='ui'?'#5b5bf7':'rgba(255,255,255,.5)'});
  svg.appendChild(c);
});

헤드셋의 렌즈는 사람 눈보다 넓게 보이지만, 그 전부가 "편한" 시야는 아니다. 정면 기준 좌우 약 30~60도 정도가 눈만 움직여 편하게 볼 수 있는 범위이고, 그보다 벗어나면 고개를 돌려야 한다. 손이 닿는 범위(팔 반경, 대략 40~70cm)도 따로 있다 — 시야 안에 있어도 팔이 안 닿으면 조작할 수 없다.

상시 표시되는 UI(툴바, 알림, 컨트롤)는 이 두 원(시야 컴포트 존, 팔 반경) 안에 둬야 한다. 그 밖에 두면 사용자가 매번 고개를 돌리거나 몸을 기울여야 해서 짧은 작업도 피곤해진다. 반대로 배경·환경 콘텐츠는 이 범위 밖으로 얼마든지 확장해도 된다 — 계속 상호작용할 게 아니기 때문이다.

데모는 사용자를 위에서 내려다본 평면도로 두고, 시야 컴포트 존(넓은 부채꼴)과 팔 반경(좁은 원)을 겹쳐 그린다. 부채꼴 경계를 넘어가는 UI 조각이 흐려지는 것으로 "여긴 고개를 돌려야 닿는 범위"임을 표시한다.

언제 쓰나

자주 쓰는 컨트롤은 반드시 이 범위 안에. 사진·비디오처럼 감상만 하는 콘텐츠는 범위를 벗어나도 괜찮습니다.