디자인 아틀라스
EN
◆ 게임 UI·게임 필

조준점 (크로스헤어)

Crosshair

화면 중앙에 사격 정확도를 실시간으로 드러내는 표시. 움직이거나 발사하면 벌어지고, 가만히 있으면 좁아진다.

다른 이름: 조준선Reticle조준 UI
···
html
<div class="chstage"><div class="chgrid"></div><div class="chwrap" id="chwrap"><div class="chline up" id="cu"></div><div class="chline down" id="cd"></div><div class="chline left" id="cl"></div><div class="chline right" id="cr"></div><div class="chdot"></div></div><div class="chstate" id="chstate">IDLE</div></div>
css
.chstage{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg)}
.chgrid{position:absolute;inset:-10%;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:30px 30px;opacity:.4}
.chwrap{position:absolute;left:50%;top:44%;width:0;height:0}
.chline{position:absolute;background:var(--fg);box-shadow:0 0 0 1px color-mix(in srgb,var(--bg) 70%,transparent)}
.chline.up,.chline.down{width:2px;height:10px;left:-1px}
.chline.left,.chline.right{height:2px;width:10px;top:-1px}
.chline.up{top:calc(-1 * var(--gap,8px) - 10px)}
.chline.down{top:calc(var(--gap,8px))}
.chline.left{left:calc(-1 * var(--gap,8px) - 10px)}
.chline.right{left:calc(var(--gap,8px))}
.chdot{position:absolute;left:-1.5px;top:-1.5px;width:3px;height:3px;border-radius:50%;background:var(--accent-2)}
.chstate{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);font:700 clamp(8px,2.4vmin,10px) monospace;color:var(--muted);letter-spacing:.1em}
js
const wrap=document.getElementById('chwrap');
const state=document.getElementById('chstate');
function setGap(px){ wrap.style.setProperty('--gap', px+'px'); }
function anim(from,to,ms,label){
  return new Promise(function(res){
    state.textContent=label;
    const start=performance.now();
    function step(now){
      const p=Math.min(1,(now-start)/ms);
      setGap(from+(to-from)*p);
      if(p<1) requestAnimationFrame(step); else res();
    }
    requestAnimationFrame(step);
  });
}
async function seq(){
  await anim(8,8,300,'IDLE');
  await anim(8,26,500,'MOVING');
  await anim(26,26,400,'MOVING');
  await anim(26,44,90,'FIRE');
  await anim(44,26,350,'RECOVER');
  await anim(26,8,600,'IDLE');
  setTimeout(seq, 400);
}
seq();

동적 크로스헤어는 네 개(또는 그 이상)의 짧은 선분이 중심에서 방사형으로 떨어져 있는 형태를 쓴다. 그 간격(스프레드)이 곧 "실제 탄이 흩어지는 범위"를 시각적으로 그대로 보여준다 — 숫자로 된 정확도 스탯을 읽지 않아도, 선이 벌어진 정도만 보면 지금 쏘면 얼마나 빗나갈지 감이 온다.

스프레드는 상태에 따라 즉시 반응해야 한다. 이동하면 벌어지고, 멈추면 서서히 좁아지고, 발사하는 순간 크게 벌어졌다가 다시 회복된다. 조준(에임 다운 사이트) 중에는 아예 크로스헤어를 숨기고 조준경 자체가 그 역할을 대신하는 경우도 많다.

크로스헤어는 화면 중심의 아주 작은 요소지만 슈팅 게임에서는 초당 수십 번 눈이 머무는 지점이다. 배경색과 대비가 약하면(밝은 배경 위의 흰 선 등) 순간적으로 안 보이므로, 테두리에 어두운 외곽선을 한 겹 더하는 처리가 흔하다.

언제 쓰나

슈팅·조준 기반 전투가 있는 1인칭·3인칭 게임. 조준 개념이 없는 장르에는 불필요.