디바이스 목업 — 스크린샷을 기기 프레임에 넣기
스크린샷을 그대로 올리면 그냥 이미지지만, 기기 프레임 안에 들어가면 보는 사람이 설명 없이도 '폰 앱이구나', '웹사이트구나'를 압니다. 앱스토어 등록 이미지, 포트폴리오, 제안서에서 목업을 쓰는 이유입니다.
목업에서 제일 중요한 건 스크린샷이 잘리지 않는 것입니다. 기기 화면의 가로세로 비율이 실제와 다르면, 스크린샷을 채워 넣을 때 위아래나 좌우가 잘려 나갑니다. 상단 상태바나 하단 버튼이 사라지면 목업의 설득력이 그만큼 떨어집니다.
그래서 이 도구의 화면 크기는 전부 실제 기기의 논리 해상도를 씁니다. 아이폰 15를 고르면 화면이 정확히 393 × 852이고, 아이폰에서 찍은 스크린샷은 한 픽셀도 잘리지 않고 그대로 들어갑니다.
기기별 화면 크기
버튼에 적힌 숫자가 그 기기 화면의 실제 논리 해상도입니다. 스크린샷이 이 크기거나 같은 비율이면 잘리지 않습니다.
| 기기 | 화면 크기 | 비율 | 기준 모델 |
|---|---|---|---|
| 아이폰 | 393 × 852 | 19.5 : 9 | iPhone 15 / 16 |
| 안드로이드 | 412 × 915 | 20 : 9 | Pixel 8 |
| 아이패드 | 820 × 1180 | 약 7 : 10 | iPad 10.9인치 |
| 맥북 | 1280 × 832 | 16 : 10 | MacBook Air 13인치 |
| 모니터 | 1920 × 1080 | 16 : 9 | 일반 FHD 모니터 |
스크린샷 크기가 안 맞으면
- •비율만 같으면 크기는 달라도 됩니다. 786 × 1704로 찍은 스크린샷도 393 × 852와 같은 비율이라 그대로 들어갑니다.
- •비율이 다르면 화면을 가득 채우고 넘치는 쪽이 잘립니다. 가운데를 기준으로 잘리므로 세로로 긴 스크린샷은 위아래가, 가로로 넓은 스크린샷은 좌우가 사라집니다.
- •잘리면 곤란한 내용이 가장자리에 있다면, 스크린샷을 먼저 '이미지 자르기'로 목표 비율에 맞춰 두시면 어디가 남을지 직접 정할 수 있습니다.
갤럭시 스크린샷은 어느 틀에 넣을까
안드로이드 틀은 픽셀 8 비율이라, 국내에서 많이 쓰는 갤럭시와는 조금 다릅니다. 스크린샷 해상도로 틀마다 잘리는 양을 재 보면 이렇습니다.
| 스크린샷 | 아이폰 틀 | 안드로이드 틀 |
|---|---|---|
| 갤럭시 S24 · A35 (1080 × 2340) | 0.1% | 2.4% |
| 갤럭시 S24 울트라 (1440 × 3120) | 0.1% | 2.4% |
| 갤럭시 Z 플립6 (1080 × 2640) | 11.3% | 9.1% |
그래서
갤럭시 S·A 시리즈 스크린샷은 비율이 아이폰과 거의 같아서 아이폰 틀에 넣으면 사실상 잘리지 않습니다. 기기 모양이 중요하지 않다면 아이폰 틀이 더 깔끔합니다. 플립처럼 세로로 더 긴 폰은 어느 틀이든 위아래가 잘리므로, 중요한 내용이 화면 끝에 있다면 먼저 잘라 두는 편이 낫습니다.
쓰는 법
- •스크린샷을 끌어다 놓거나 눌러서 고릅니다.
- •기기를 고릅니다. 버튼 아래 숫자로 화면 크기를 확인할 수 있습니다.
- •배경색을 고릅니다. 색상표에서 고르거나 직접 색을 입력할 수 있고, 흰 배경은 문서에, 어두운 배경은 발표 자료에 어울립니다.
- •PNG로 저장합니다. 미리보기에 보이는 그림이 그대로 저장되며, 기기 해상도의 두 배로 그려지므로 아이폰 목업은 1082 × 2000으로 나옵니다.
자주 묻는 질문
미리보기와 저장된 그림이 다른가요?
같습니다. 두 그림을 같은 코드가 그리고, 크기만 다릅니다. 예전에는 화면용과 저장용을 각각 따로 그려서 노치 크기, 경첩 위치, 모니터 받침대까지 열 군데가 서로 달랐는데 지금은 한 곳에서 나옵니다.
상업적으로 써도 되나요?
이 도구가 그리는 프레임은 특정 제조사의 디자인을 본뜬 것이 아니라 일반적인 형태라 자유롭게 쓰실 수 있습니다. 다만 애플이나 구글의 로고·제품 사진 같은 브랜드 자산은 각 회사의 사용 지침을 따로 확인하셔야 합니다. 앱스토어나 구글플레이 등록 이미지에는 각 스토어가 요구하는 규격이 따로 있으니 그쪽 안내도 함께 보세요.
스크린샷이 서버로 올라가나요?
올라가지 않습니다. 브라우저 안에서 그려서 브라우저 안에서 저장합니다. 출시 전 화면이나 사내 자료도 그대로 넣으셔도 됩니다.
배경을 투명하게 할 수 있나요?
지금은 배경색을 하나 골라 채웁니다. 투명 배경이 필요하시면 발표 자료나 문서의 배경색과 같은 색을 골라 두면 실제로는 같은 결과가 됩니다.