디자인 아틀라스
EN
◫ 공간 UI·XR

뎁스 하이어라키

Depth hierarchy

평면 UI의 z-index 대신, 배경·콘텐츠·컨트롤을 실제 거리(Z 위치)로 떨어뜨려 앞뒤 관계를 표현하는 방식.

다른 이름: Z-depth layeringDepth stacking
···
html
<div class="scene"><div class="stage" id="stage">
  <div class="plane bg">Room</div>
  <div class="plane mid">Content</div>
  <div class="plane fg">Control</div>
</div></div>
css
body{background:radial-gradient(circle at 50% 30%,#22223e,#0b0b16 70%)}
.scene{position:absolute;inset:0;display:grid;place-items:center;perspective:900px}
.stage{position:relative;width:min(70%,320px);height:min(70%,200px);transform-style:preserve-3d;animation:sway 7s ease-in-out infinite}
.plane{position:absolute;inset:0;margin:auto;display:grid;place-items:center;border-radius:16px;font-weight:700;color:#fff;
  font-size:clamp(10px,3vmin,13px);letter-spacing:.02em}
.bg{width:100%;height:100%;background:linear-gradient(135deg,#2b2b52,#15152c);box-shadow:0 30px 60px rgba(0,0,0,.5);transform:translateZ(-150px)}
.mid{width:74%;height:60%;background:linear-gradient(135deg,#4a4ad1,#5b5bf7);box-shadow:0 24px 40px rgba(0,0,0,.4);transform:translateZ(-30px)}
.fg{width:36%;height:24%;background:linear-gradient(135deg,#ff7a59,#f25c8a);box-shadow:0 16px 30px rgba(0,0,0,.4);transform:translateZ(90px)}
@keyframes sway{0%,100%{transform:rotateY(-11deg) rotateX(5deg)}50%{transform:rotateY(11deg) rotateX(-3deg)}}

2D 화면에서는 "이게 저것보다 위에 있다"를 z-index 숫자와 그림자로 흉내 낸다. 공간 UI에서는 진짜로 떨어뜨려 놓을 수 있다 — 배경 패널은 저 뒤, 본문 콘텐츠는 중간, 떠 있는 버튼은 사용자 쪽으로 더 가깝게.

이 간격은 눈의 초점 조절(vergence-accommodation)과 직결된다. 레이어 사이 거리가 너무 촘촘하면 깊이 차이가 안 느껴지고, 너무 크면 시선이 레이어를 오갈 때마다 눈의 초점을 다시 맞춰야 해서 피로해진다. 보통 전경 요소는 배경보다 살짝만(수 cm~수십 cm 상당) 띄운다.

데모는 배경·본문·컨트롤 세 겹을 다른 Z에 놓고 천천히 기울여, 가까운 레이어일수록 더 크게 움직이는 걸 보여준다 — 이게 실제 헤드셋에서 머리를 움직일 때 느끼는 모션 패럴랙스다.

언제 쓰나

레이어가 3개를 넘지 않게 하고, 앞쪽 레이어는 사용자 손이 닿는 범위(컴포트 존) 안에 두세요. 깊이만으로 위계를 표현하되 대비·크기 같은 2D 단서도 함께 남겨두면 접근성이 좋아집니다.