디바이스 목업 생성기

디바이스 목업 생성기 정보

디바이스 목업 생성기는 스크린샷을 실제 기기 프레임에 넣습니다. 다이내믹 아일랜드가 있는 iPhone, Android 폰, iPad, MacBook Pro, 탭 바와 주소 표시줄이 있는 브라우저 창, 또는 스탠드 위의 데스크톱 모니터입니다. 모든 프레임은 해당 기기의 실제 화면 비율로 그려지므로, 내보내는 결과가 하드웨어에서 스크린샷이 실제로 보이는 모습과 같습니다. 프레임은 사용자 브라우저 탭 안의 캔버스에 그려지므로, 미출시 앱이나 내부 대시보드의 스크린샷이 기기를 떠나지 않습니다.

사람들이 가장 많이 쓰는 세 가지 프레임

프레임은 독자를 위한 바로 가기입니다. 스크린샷 안의 글자를 하나도 읽기 전에, 폰 앱인지 웹 페이지인지 데스크톱 도구인지를 한눈에 알려 줍니다.

크롭 미터: 대부분의 목업 도구가 빼놓는 부분

기기 화면은 고정된 모양입니다. iPhone 화면은 1179 × 2556로 대략 9:19.5이고, 스크린샷이 정확히 그 비율인 경우는 거의 없습니다. 대부분의 목업 생성기는 이미지가 화면을 덮을 때까지 조용히 확대한 뒤 가장자리로 넘치는 부분을 버려서, 가격표 아래가 사라졌다는 사실을 게시한 뒤에야 알게 됩니다.

이 도구는 대신 측정합니다. 화면 채우기 모드에서 맞춤 버튼 아래 미터가 프레임이 가리는 스크린샷의 정확한 비율을 알려 주고, 그 숫자가 커질수록 막대가 초록에서 빨강으로 바뀝니다. 마음에 들지 않으면 두 가지 방법이 있습니다.

• 팬. 슬라이더가 넘치는 축을 따라 보이는 영역을 옮기므로, 가운데 자름을 받아들이는 대신 헤더, 중간, 푸터를 남길 수 있습니다.
• 전체 맞추기. 스크린샷의 모든 픽셀이 화면 안에 들어갈 때까지 축소하고, 남은 띠를 고른 색으로 채웁니다. 위아래 또는 좌우에 띠가 보이는 대신 아무것도 잘리지 않습니다.

좋은 기준: 잘림이 약 8% 미만이면 독자에게 보이지 않고, 8%에서 25%는 피사체를 남기도록 팬했다면 괜찮으며, 25%를 넘으면 기기 화면비로 스크린샷을 다시 찍거나 전체 맞추기로 바꿔야 합니다.

어떤 프레임을, 어떤 해상도로

해당 픽셀 크기 이상의 스크린샷은 모든 내보내기 크기에서 선명합니다. 더 작은 것은 확대되며, 가장 먼저 무너지는 것은 스크린샷 안 작은 텍스트의 안티앨리어싱입니다.

디바이스 목업 생성기 사용 방법: 단계별

1. 스크린샷 추가: PNG 또는 JPG를 업로드 패널에 놓거나, 클릭하여 찾아보거나, Ctrl+V를 눌러 클립보드에서 바로 붙여넣으세요.
2. 디바이스 프레임 고르기: iPhone, Android, iPad, MacBook, 브라우저 또는 모니터. 폰과 태블릿 프레임은 세로와 가로로도 바뀝니다.
3. 크롭 미터 확인: 너무 많이 가려지면 팬 슬라이더를 끌거나 전체 맞추기로 바꿔 아무것도 잃지 마세요.
4. 프레임 스타일 지정: 프레임 색, 배경, 여백, 그림자, 반사광을 설정하세요. 브라우저 프레임에서는 탭 제목과 주소를 직접 입력하세요.
5. 내보내기: 내보내기 크기를 고른 뒤 PNG 다운로드로 목업을 저장하거나 이미지 복사로 게시물에 붙여넣으세요.

실용 팁

• 가능하면 기기 화면비로 스크린샷을 찍으세요. 캡처 전에 브라우저 창을 1179 × 2556으로 맞추면 크롭 미터가 0%를 읽고 목업이 픽셀 단위로 맞습니다.
• URL이 중요할 때는 브라우저 프레임을 쓰세요. 주소 표시줄에 도메인을 직접 넣으면 캡션 없이 이미지에 브랜드가 들어갑니다.
• 여백은 6%에서 12% 사이로 유지하세요. 더 적으면 디바이스가 게시물 가장자리에 닿고, 더 많으면 피드에서 화면을 읽기 어려워집니다.
• 프레임 색을 스크린샷에 맞추세요. 다크 모드 스크린샷에는 스페이스 블랙, 라이트에는 실버 또는 티타늄. 브라우저 크롬은 같은 선택을 자동으로 따릅니다.
• 텍스트가 많은 화면에서는 반사광을 낮추세요. 은은한 광택은 유리처럼 보이고, 강한 광택은 스톡 사진처럼 보이며 카피를 가립니다.
• 슬라이드에는 투명으로 내보내세요. 없음 배경은 그림자가 있는 떠 있는 디바이스를 만들어, 어떤 덱이나 히어로 섹션에도 올릴 수 있습니다.

개인정보

모든 작업은 HTML5 캔버스 API를 통해 브라우저 탭에서 일어납니다. 스크린샷은 로컬 객체 URL에서 읽고, 프레임에 그린 뒤, 브라우저 자체가 PNG로 인코딩합니다. 이미지는 업로드, 저장, 전송되지 않으며, 페이지가 로드된 뒤에는 네트워크 연결 없이도 도구가 계속 작동합니다.

자주 묻는 질문

내 스크린샷이 서버에 업로드되나요?

아니요. 디바이스 프레임은 사용자 브라우저 탭 안에서 HTML5 캔버스 API로 그려지고, 스크린샷은 로컬 객체 URL에서 읽습니다. 어디에도 전송되지 않으므로 미출시 앱, 내부 대시보드, 클라이언트 작업의 목업이 기기에 남습니다. 페이지가 로드된 뒤에는 네트워크 연결 없이도 도구가 계속 작동합니다.

어떤 디바이스 프레임을 사용할 수 있나요?

여섯 가지입니다. 다이내믹 아일랜드가 있는 iPhone, 펀치홀 카메라가 있는 Android 폰, iPad Pro, 노치와 본체가 있는 MacBook Pro, 탭 바와 주소 표시줄이 있는 브라우저 창, 스탠드 위의 데스크톱 모니터입니다. 각 프레임은 해당 기기의 실제 화면 비율을 쓰므로, 여기서 만든 목업이 하드웨어에서 스크린샷이 보이는 모습과 맞습니다.

스크린샷 모양이 기기 화면과 다를 때는 어떻게 되나요?

바로 그때 크롭 미터를 씁니다. 화면 채우기는 스크린샷을 화면 전체가 덮일 때까지 확대하므로 가장자리로 넘치는 부분이 잘리고, 미터가 가려진 정확한 비율을 알려 줍니다. 팬 슬라이더는 잘린 축을 따라 보이는 영역을 옮겨 중요한 부분을 남길 수 있게 합니다. 전체 맞추기는 스크린샷 전부가 화면 안에 들어갈 때까지 축소하고 남은 띠를 고른 색으로 채우므로 아무것도 잃지 않습니다.

스크린샷 해상도는 어느 정도가 좋나요?

프레이밍하는 기기에 맞추세요. iPhone은 1179 × 2556, Android 폰은 1080 × 2400, iPad는 1668 × 2388, MacBook은 3024 × 1964, 브라우저 창은 1440 × 900, 모니터는 2560 × 1440입니다. 그 크기 이상이면 선명하게 유지됩니다. 더 작은 스크린샷도 동작하지만 확대되어 텍스트 주변에 부드러운 가장자리가 보입니다.

투명 배경으로 디바이스를 내보낼 수 있나요?

네. 없음 배경 스와치를 고르면 디바이스 주변 여백이 색 대신 알파로 내보내지고, 프레임, 화면, 드롭 섀도는 그대로 그려집니다. PNG 다운로드가 그 투명도를 유지하므로, 목업을 슬라이드, 히어로 섹션, 또는 페이지 자체 배경이 비쳐야 하는 곳에 올릴 때 적합합니다.

브라우저 프레임이 어두워지는 이유는 무엇인가요?

브라우저 크롬은 고른 프레임 색을 따릅니다. 스페이스 블랙을 고르면 탭 바, 툴바, 주소 표시줄이 다크 테마로 바뀌어 다크 모드 스크린샷과 맞고, 더 밝은 프레임 색은 라이트 테마가 됩니다. 탭 제목과 주소는 일반 텍스트 필드이므로 이미지에 제품 이름과 도메인을 넣을 수 있습니다.

이미지 도구:

• 이미지에 선 추가
• 이미지에 텍스트 추가
• 화면 비율 계산기 인기
• 이미지 원형 자르기 새로운
• 콜라주 메이커
• 점잇기 생성기
• EXIF 데이터 뷰어 및 제거 도구 새로운
• GIF 뒤집기
• 이미지 뒤집기
• GIF 메이커
• 이미지 픽셀화 도구
• 이미지 압축기
• 이미지 자르기 도구
• 이미지 향상기
• 이미지 크기 조정기
• 이미지 회전기
• 이미지 분할기 인기
• 이미지 ASCII 아트 변환기 새로운
• 이미지 SVG 트레이서 새로운
• Lorem Picsum / 플레이스홀더 이미지 생성기 새로운
• 📷 OCR / 이미지에서 텍스트 추출 새로운
• 인쇄 크기 및 해상도 계산기 (DPI/PPI)
• 둥근 모서리 이미지 생성기 새로운
• 스크린샷 꾸미기 도구 새로운
• 디바이스 목업 생성기 새로운
• 이미지에 그림자 추가 새로운
• 이미지에 테두리 추가 새로운