Diegetic UI

다이제틱 UI (세계관 내 UI)

Showing information as an object that exists inside the game world — a wrist display, a dashboard gauge — instead of overlaying it on the screen.

Also known as: 다이제틱 인터페이스In-world UI월드 UI
···
html
<div class="durow">
<div class="ducol"><div class="dulabel">OVERLAY</div><div class="dustage"><div class="duworld"></div><div class="duoverlay"><div class="duobar"><div class="duofill" id="of"></div></div></div></div></div>
<div class="ducol"><div class="dulabel">DIEGETIC</div><div class="dustage"><div class="duworld"></div><div class="dupanel" id="panel"><div class="dupbar"><div class="dupfill" id="pf"></div></div></div></div></div>
</div>
css
.durow{display:flex;gap:clamp(8px,3.4vmin,18px);width:100%;height:100%;padding:4%}
.ducol{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.dulabel{font:700 clamp(7px,2.2vmin,9px) monospace;color:var(--muted);letter-spacing:.1em;text-align:center}
.dustage{position:relative;flex:1;border-radius:8px;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.duworld{position:absolute;inset:0;background:
  radial-gradient(circle at 30% 70%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 55%),
  radial-gradient(circle at 75% 30%, color-mix(in srgb,var(--accent-3) 14%,transparent), transparent 50%)}
.duoverlay{position:absolute;top:8%;left:8%;right:8%}
.duobar{height:6px;border-radius:3px;background:color-mix(in srgb,var(--fg) 15%,transparent);border:1px solid var(--line);overflow:hidden}
.duofill{height:100%;width:80%;background:var(--accent-2);transform-origin:left;transition:transform .4s}
.dupanel{position:absolute;left:20%;bottom:14%;width:56%;padding:5%;border-radius:5px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);
  transform:perspective(200px) rotateX(28deg) rotateY(-6deg);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.dupbar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--fg) 15%,transparent);overflow:hidden}
.dupfill{height:100%;width:80%;background:var(--accent-3);transform-origin:left;transition:transform .4s}
js
const of=document.getElementById('of');
const pf=document.getElementById('pf');
const panel=document.getElementById('panel');
let hp=0.8;
function damage(){
  hp=Math.max(0.15, hp-0.28);
  of.style.transform='scaleX('+hp+')';
  pf.style.transform='scaleX('+hp+')';
  panel.style.transform='perspective(200px) rotateX(28deg) rotateY(-6deg) translateY(-3px)';
  setTimeout(function(){ panel.style.transform='perspective(200px) rotateX(28deg) rotateY(-6deg)'; }, 160);
  if(hp<=0.15){
    setTimeout(function(){
      hp=0.8;
      of.style.transform='scaleX('+hp+')';
      pf.style.transform='scaleX('+hp+')';
    }, 900);
  }
}
setInterval(damage, 1400);

A standard HUD is an overlay — pinned to screen coordinates, staying in the same spot no matter where the camera looks. Diegetic UI does the opposite: it turns that information into an object that actually exists in the world — a holographic display on a character's forearm, a fuel gauge on a dashboard, a sign on a wall — visible only when the camera looks at it, and subject to perspective and lighting like anything else in the scene.

The payoff is immersion. With no numbers or icons floating over the screen, the information blends into the scene without registering as "UI" at all. The tradeoff is that checking it costs more — the player has to actually look toward it or approach it, unlike an overlay that's always right there.

That's why most real games use a hybrid rather than going fully diegetic: health stays as an always-visible overlay, while secondary information — ammo count, status effects — goes diegetic (a magazine readout built into the weapon model, say). Making everything diegetic slows down exactly the checks that need to be instant, and gets in the way of play.

When to use

Secondary information in immersion-heavy genres — survival, horror, simulation. Keep must-check-instantly info like health or threats on the overlay.