기기 목업 생성

Device Mockup

스크린샷을 휴대폰·태블릿·노트북·브라우저 프레임에 넣고 배경과 그림자를 더합니다.

스크린샷을 휴대폰·태블릿·노트북·브라우저 창 프레임 안에 넣고 최대 3배 크기의 PNG로 내보냅니다. 프레임은 특정 제품 사진이 아니라 둥근 사각형 몇 개로 캔버스에 그린 것이라, 상표 문제가 없고 어떤 배율로 내보내도 흐려지지 않습니다. 스크린샷은 탭 밖으로 나가지 않습니다.

🔒 브라우저 안에서만 처리mockupscreenshotpresentationdevice

스크린샷 놓기

PNG·JPEG·WebP. 이 탭 안에서만 처리합니다.

기기

맞춤

여백

배경

그림자

투명 배경

미리보기

프레임은 그림이 아니라 도형입니다

휴대폰·태블릿·노트북·브라우저 창 모두 둥근 사각형 몇 개로 캔버스에 그립니다. 특정 제품의 사진이나 상표가 아니라서 어디에 써도 되고, 어떤 배율로 내보내도 흐려지지 않습니다. 화면 비율은 요즘 기기의 일반적인 값(휴대폰 19.5:9, 태블릿 4:3, 노트북 16:10)이며, 스크린샷 비율이 다르면 "채우기"는 가운데를 잘라내고 "전체 보이기"는 여백을 둡니다. 긴 페이지 캡처는 "위 맞춤"이 자연스럽습니다.

내보낸 PNG는 PNG 압축으로 줄이고, 공유용 카드는 OG 이미지 생성에서 만듭니다.

사용 방법

스크린샷을 놓습니다
PNG·JPEG·WebP가 됩니다. 아래 통계 줄에 이미지 비율과 프레임 화면 비율이 함께 나오는데, 다음 선택이 어떻게 될지를 정하는 숫자입니다.
프레임을 고르고 이미지를 어떻게 맞출지 정합니다
채우기는 가운데를 잘라 화면을 채우고, 전체 보이기는 여백을 두고 이미지 전체를 보여 주며, 위 맞춤은 긴 페이지 캡처용입니다. 페이지 위쪽을 남기고 나머지는 아래로 흘려보내는데, 스크롤되는 페이지의 스크린샷이 대개 보여 주려는 것이 그것입니다.
여백과 배경을 정합니다
여백이 있으면 잘라 낸 것이 아니라 배치한 것처럼 보입니다. 색이 있는 슬라이드나 배경을 마음대로 못 하는 페이지에 올릴 이미지라면 투명 배경을 고르세요.
특별한 이유가 없으면 2배로 내보냅니다
미리보기 아래 줄에 고른 배율의 정확한 출력 크기가 나옵니다. 레티나 화면이나 README에는 2배가 맞고, 인쇄나 큰 슬라이드에는 3배인데 파일이 커집니다.

자주 묻는 질문

이게 아이폰인가요? 맥북인가요?

아닙니다. 요즘 기기가 쓰는 화면 비율을 따른 일반적인 도형입니다. 휴대폰 19.5:9, 태블릿 4:3, 노트북 16:10입니다. 로고도, 제품 사진도, 상표로 보호되는 외형도 없습니다. 일부러 그렇게 했습니다. 실제 기기가 들어간 목업은 대개 허락 없이 마케팅에 쓸 수 없습니다.