디바이스 목업

디바이스 목업은 휴대폰, 태블릿, 노트북, 브라우저 창 같은 기기 프레임 안에 스크린샷을 넣은 이미지입니다. 프레임은 인터페이스가 어떤 기기에서 실행되는지 보여줍니다.

목업 템플릿마다 고정된 크기와 화면 비율을 가진 화면 영역이 있습니다. 스크린샷은 이 영역에 맞아야 합니다. 맞지 않으면 늘어나거나, 잘리거나, 빈 공간으로 둘러싸입니다. 사진 기반 템플릿은 원근감을 적용하므로, 스크린샷이 기울어진 화면에 맞게 뒤틀립니다.

목업은 발표용 이미지입니다. 페이지 자체의 렌더링을 바꾸는 기기 에뮬레이션과는 다릅니다.

디바이스 목업이 중요한 이유

웹 페이지에 프레임 없이 올린 휴대폰 스크린샷은 임의의 긴 사각형처럼 보일 수 있습니다. 프레임은 화면 크기와 맥락을 한 번에 알려줍니다. 또한 랜딩 페이지나 슬라이드 덱에서 여러 스크린샷의 모양을 통일합니다.

자주 쓰는 기기 프레임

• 세로 방향 휴대폰. 노치 또는 Dynamic Island 영역이 있거나 없는 형태.
• 세로 또는 가로 방향 태블릿.
• 화면이 기울어진 노트북.
• 웹 앱 스크린샷에 쓰는 단순한 주소창이 있는 브라우저 창.

디바이스 목업을 만드는 방법

1. 프레임의 화면 비율에 맞춰 화면을 캡처합니다.
2. 디자인 도구나 목업 생성기에서 목업 템플릿을 엽니다.
3. 스크린샷을 화면 영역에 넣고 모서리와 노치를 확인합니다.
4. 대상이 요구하는 크기로 내보냅니다.

Temposhot의 Custom Area 선택기에는 iPhone 17 Pro(402×874), iPhone 17 Pro Max(440×956), Galaxy S25(360×780), Pixel 9(360×808) 같은 휴대폰 프리셋이 있습니다. 웹 페이지는 Website Capture의 Mobile 기기 크기 390×844를 사용하십시오.

자주 하는 실수

• 비율이 다른 스크린샷을 넣어서 프레임이 내용을 잘라냄.
• 작은 캡처를 큰 프레임에 맞추려고 확대해서 텍스트가 흐려짐.
• 스토어가 일반 스크린샷을 요구하는 곳에 목업을 제출함. 스토어의 현재 요구 사항을 확인하십시오.
• 현재 기기와 맞지 않는 오래된 프레임을 사용함.

같은 스크린샷을 반복해서 찍나요?

Mac에서 스크린샷 자동화로 휴대폰 크기 화면을 한 번의 실행에서 모두 캡처하십시오.

자주 묻는 질문

앱 스토어가 목업을 받나요?

규칙은 스토어마다 다르며 시간에 따라 바뀝니다. 제출 전에 스토어의 최신 스크린샷 가이드라인을 읽으십시오.

스크린샷의 해상도는 어느 정도여야 하나요?

최소한 프레임의 화면 영역과 같은 픽셀 크기여야 합니다. Retina 캡처는 보통 충분한 픽셀을 제공합니다.

출처

• Mockup (Wikipedia)

관련 자료

• 캡처 소스: Custom Area 프리셋.
• Social Image Composer: 여백이 있는 배경에 스크린샷 배치.
• Aspect Ratio Calculator: 프레임의 화면 비율 맞추기.