상자나 선으로 화면의 한 부분을 둘러, 확대하지 않고도 대상을 짚어 줍니다.
<div class="stage"><div class="screen"><div class="title">WORKFLOW</div><div class="item"><b>01</b><span>Choose a file</span></div><div class="item active"><b>02</b><span>Review settings</span></div><div class="item"><b>03</b><span>Export result</span></div></div>
<svg class="leader" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M58 55 C72 55 68 30 83 30"/></svg><div class="box"></div><div class="callout">STEP 02 <i></i></div>
</div>.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.screen{position:absolute;left:15%;top:14%;width:53%;height:70%;padding:5%;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 20px #0001}
.title{font:9px ui-monospace,monospace;letter-spacing:.12em;color:var(--muted);margin-bottom:9%}
.item{display:flex;align-items:center;gap:10px;height:22%;border-top:1px solid var(--line);font:clamp(9px,2vw,13px) system-ui}
.item b{font:10px ui-monospace,monospace;color:var(--muted)}.item span{color:var(--fg)}
.box{position:absolute;left:24%;top:47%;width:38%;height:19%;border:2px solid var(--accent);border-radius:3px;animation:pulse 1.8s ease-in-out infinite}
.leader{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.leader path{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-dasharray:3 2;animation:dash 1.2s linear infinite}
.callout{position:absolute;left:73%;top:23%;padding:8px 10px;border:1px solid var(--accent);background:var(--surface);font:10px ui-monospace,monospace;color:var(--fg)}
.callout i{position:absolute;left:-5px;bottom:-5px;width:8px;height:8px;background:var(--surface);border-left:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:rotate(45deg)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.035);opacity:1}}
@keyframes dash{to{stroke-dashoffset:-10}}콜아웃과 하이라이트 상자는 화면 위에 테두리·원·화살표를 겹쳐 특정 대상을 가리킵니다. 보여 주는 크기를 유지하므로 위치 관계를 그대로 설명할 수 있습니다.
대상의 좌표에 투명한 테두리를 놓고, 선과 짧은 설명을 연결합니다. 데모는 강조 상자가 한 항목을 둘러싸고 선이 콜아웃 꼬리까지 이어지는 모습을 반복합니다.
스포트라이트는 주변 전체를 어둡게 만드는 방식이고, 콜아웃은 도형으로 대상을 표시합니다. 상자와 라벨이 원래 화면의 중요한 글자를 덮지 않도록 여백을 확보하세요.
설명할 대상이 작아도 확대하지 않고 위치와 주변 관계를 함께 보여 주고 싶을 때 씁니다.