웹 화면을 가상의 휴대기기 틀 안에 넣어, 어떤 기기에서 보이는지 함께 보여 줍니다.
<div class="stage"><div class="device"><div class="speaker"></div><div class="glass"><div class="ui"><div class="ui-head"></div><div class="ui-card"></div><div class="ui-line"></div><div class="ui-line short"></div><div class="ui-card small"></div></div></div><div class="home"></div></div>
<div class="caption">DEVICE MOCKUP <span>screen inside frame</span></div>
</div>.stage{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 70%,var(--line),var(--bg) 62%)}
.device{position:absolute;left:50%;top:50%;height:min(86%,330px);aspect-ratio:.58;transform:translate(-50%,-50%) rotate(-5deg);border:5px solid #333;border-radius:clamp(20px,5vw,38px);background:#222;box-shadow:0 14px 28px #0003;animation:tilt 4s ease-in-out infinite alternate}
.glass{position:absolute;inset:6px;border-radius:inherit;overflow:hidden;background:var(--bg)}
.speaker{position:absolute;z-index:2;left:40%;top:4px;width:20%;height:5px;border-radius:5px;background:#151515}
.home{position:absolute;z-index:2;left:45%;bottom:4px;width:10%;height:3px;border-radius:4px;background:#eee}
.ui{position:absolute;inset:10% 10%;animation:scroll 3.8s ease-in-out infinite alternate}
.ui-head{height:11%;border-bottom:1px solid var(--line);margin-bottom:9%;background:linear-gradient(90deg,var(--accent) 0 28%,transparent 28%)}
.ui-card{height:28%;border:1px solid var(--line);background:var(--surface);margin-bottom:8%;position:relative}
.ui-card:after{content:"";position:absolute;left:8%;right:25%;top:36%;height:3px;background:var(--line);box-shadow:0 11px 0 var(--line)}
.ui-line{height:3px;width:90%;margin:8% 0;background:var(--line)}.ui-line.short{width:62%}
.ui-card.small{height:21%}
.caption{position:absolute;left:12px;bottom:12px;padding:5px 8px;background:var(--surface);border:1px solid var(--line);font:9px ui-monospace,monospace}
.caption span{margin-left:7px;color:var(--muted)}
@keyframes tilt{to{transform:translate(-50%,-50%) rotate(5deg)}}
@keyframes scroll{to{transform:translateY(-13%)}}디바이스 목업은 화면 캡처를 휴대전화나 태블릿처럼 보이는 틀 안에 넣는 구성입니다. 앱 화면만 보여 주는 것보다 실제 기기에서 쓰는 장면을 떠올리기 쉽습니다.
둥근 기기 프레임과 안쪽 화면을 만들고, 화면 비율에 맞게 캡처를 자릅니다. 데모의 일반적인 세로 기기는 살짝 기울고 안쪽 정보가 천천히 이동합니다.
목업은 기기의 실제 두께·버튼·화면 반사를 정확히 재현하는 사진이 아니라 설명을 위한 프레임입니다. 실제 기기 성능이나 최종 UI와 같다고 오해되지 않게 과한 반사와 가짜 상태 표시를 피하세요.
앱 화면을 소개하거나 모바일 환경의 비율과 배치를 보여 줄 때 씁니다. 실제 기기에서 동작을 검증한 화면과 구분해 표현하세요.