기존 2D 앱을 공간 안에 떠 있는 직사각형 유리 패널로 보여주는 기본 단위. 크기·위치는 사용자가 자유롭게 옮긴다.
디자인 아틀라스<div class="room"><div class="win" id="win">
<div class="bar"><span></span><span></span><span></span></div>
<div class="body"><div class="ln l1"></div><div class="ln l2"></div><div class="ln l3"></div></div>
</div></div>body{background:linear-gradient(180deg,#191a2e,#0c0c16)}
.room{position:absolute;inset:0;display:grid;place-items:center}
.win{width:min(60%,280px);height:min(70%,190px);border-radius:18px;padding:14px 16px;
background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);
box-shadow:0 30px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.25);
animation:float 5s ease-in-out infinite}
.bar{display:flex;gap:6px;margin-bottom:12px}
.bar span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35)}
.body{display:grid;gap:9px}
.ln{height:9px;border-radius:5px;background:rgba(255,255,255,.22)}
.l1{width:80%}.l2{width:95%}.l3{width:60%}
@keyframes float{0%,100%{transform:translateY(0) rotateX(2deg)}50%{transform:translateY(-14px) rotateX(-1deg)}}공간 컴퓨팅에서 가장 기본적인 콘텐츠 단위다. 평평한 2D 인터페이스(버튼, 리스트, 텍스트)를 그대로 담되, 창 자체는 방 안 어딘가에 떠 있는 유리판처럼 렌더링된다. 사용자가 손잡이를 잡아 옮기거나 크기를 조절할 수 있고, 놓아두면 그 자리(또는 사용자를 따라오는 자리)에 계속 떠 있다.
윈도우는 완전한 몰입(immersive space)과 대비되는 "얕은" 공간 콘텐츠다 — 방 안의 다른 것들(실제 배경, 다른 창)이 여전히 보인다. 그래서 여러 창을 나란히 띄워 멀티태스킹하는 것도 자연스럽다.
데모는 유리 재질 패널이 천천히 위아래로 떠다니며(부유), 은은한 그림자로 방과의 거리감을 표현한다. 완전히 정지해 있으면 오히려 배경에 붙어버린 것처럼 보이기 때문에, 아주 미세한 움직임을 넣는 경우가 많다.
기존 2D 앱을 공간 UI로 옮기는 첫 단계로 적합합니다. 콘텐츠가 3D여야만 의미가 있다면(모델 감상 등) volume을 대신 쓰세요.