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

오너먼트

Ornament

창 본체는 건드리지 않고, 그 가장자리(주로 아래쪽)에 붙어 함께 떠다니는 작은 컨트롤 패널.

다른 이름: visionOS OrnamentAttached toolbar
···
html
<div class="room2"><div class="stack">
  <div class="win2"><div class="l"></div><div class="l"></div></div>
  <div class="orn">
    <span class="ic"></span><span class="ic active"></span><span class="ic"></span>
  </div>
</div></div>
css
body{background:linear-gradient(180deg,#1a1c30,#0b0b14)}
.room2{position:absolute;inset:0;display:grid;place-items:center}
.stack{display:flex;flex-direction:column;align-items:center;gap:0;perspective:700px}
.win2{width:min(56%,240px);height:min(60%,140px);border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
  box-shadow:0 24px 40px rgba(0,0,0,.5);padding:16px;display:grid;gap:8px;align-content:start;
  animation:winf 4.6s ease-in-out infinite}
.win2 .l{height:8px;border-radius:4px;background:rgba(255,255,255,.2)}
.win2 .l:first-child{width:70%}.win2 .l:last-child{width:90%}
.orn{margin-top:-8px;display:flex;gap:10px;padding:9px 16px;border-radius:999px;
  background:rgba(20,20,32,.75);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);
  box-shadow:0 18px 30px rgba(0,0,0,.55);animation:ornf 4.6s ease-in-out infinite;animation-delay:-.15s}
.ic{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.3)}
.ic.active{background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}
@keyframes winf{0%,100%{transform:translateY(0) rotateX(2deg)}50%{transform:translateY(-10px) rotateX(-1deg)}}
@keyframes ornf{0%,100%{transform:translateY(0) translateZ(30px)}50%{transform:translateY(-7px) translateZ(30px)}}

재생/일시정지 버튼, 탭 전환처럼 창의 "주변부 컨트롤"을 창 본문 안에 끼워 넣지 않고 창 밖에, 하지만 창과 시각적으로 묶인 채로 띄우는 요소다. 창을 옮기면 오너먼트도 같은 상대 위치를 유지하며 따라온다.

오너먼트를 쓰는 이유는 두 가지다. 창 본문의 콘텐츠 영역을 그대로 보존할 수 있고, 오너먼트는 창보다 사용자 쪽으로 살짝 더 가깝게(z 값이 더 크게) 띄워서 항상 손이 먼저 닿는 계층에 둘 수 있다.

데모는 유리 창 아래에 작은 알약 모양 툴바가 살짝 더 앞으로 떠서, 창과 함께 흔들리되 미묘하게 다른 위상으로 움직이는 걸 보여준다 — 같은 그룹이지만 다른 깊이라는 느낌이다.

언제 쓰나

창 콘텐츠와 무관한 전역 컨트롤(닫기, 재생 컨트롤, 탭)에 씁니다. 콘텐츠와 직접 관련된 버튼은 창 안에 두세요.