Softonic

스크린샷 목업 생성기

단계 1 / 3

원본 스크린샷은 쓸 만하지만 밋밋해 보입니다. 브라우저 바나 macOS 창 프레임에 넣고 부드러운 그림자와 화사한 배경을 더하면, 같은 스크린샷도 완성된 제품 비주얼처럼 보입니다. 이 도구는 이미 가지고 있는 이미지를 브라우저 창, macOS 창, 또는 모서리만 둥글린 심플한 프레임에 넣고 그라데이션 배경 위에 배치하며, 여백과 모서리 반경, 그림자를 조절할 수 있어 결과물을 슬라이드, 소셜 미디어 게시물, 프레스 키트에 바로 활용할 수 있습니다.

스크린샷 목업 만드는 방법

  1. 1

    스크린샷을 업로드하세요

    어떤 해상도로 촬영한 것이든 최대 30MB의 PNG, JPG, WebP 파일. 이 도구는 레티나와 일반 이미지를 모두 처리합니다.

  2. 2

    프레임을 선택하세요

    브라우저 창(신호등 같은 세 개의 점과 주소 표시줄 포함), macOS 창(신호등 같은 세 개의 점 포함), 또는 모서리만 둥글린 심플한 프레임.

  3. 3

    배경 스타일 지정

    따뜻한 그라데이션으로 이어지는 배경색을 선택하세요. 여백을 추가하고 모서리 반경을 조정하며 그림자를 켜거나 끕니다.

  4. 4

    내보내기

    완성된 목업을 PNG로 다운로드해 소셜 게시물, 슬라이드, 프레스 키트에 사용하세요.

적절한 프레임과 배경 선택하기

프레임 선택은 맥락을 전달합니다. 브라우저 바는 ‘웹 앱’을, macOS 창은 ‘데스크톱 앱’을 나타냅니다. 심플한 프레임은 이미 자체 외곽이 있는 UI에 시선을 모읍니다. 보여주려는 내용에 맞는 프레임을 선택하세요.

프레임 가이드

프레임 가장 적합한 용도
브라우저 창 SaaS 기능, 랜딩 페이지, 대시보드
macOS 창 데스크톱 앱, 편집기, 터미널 캡처
심플 이미 자체 외곽이 있는 스크린샷

권장 참고 크기

이 도구는 스크린샷 자체의 해상도로 내보냅니다. 특정 채널에 맞춰 결과물을 자르거나 크기를 조정할 때 아래 치수가 유용한 참고가 됩니다.

용도 크기 (픽셀)
트위터 / X 카드 1600 x 900
링크드인 단일 이미지 1200 x 627
인스타그램 피드 (가로) 1080 x 566
프로덕트 헌트 갤러리 1270 x 760
슬라이드 (16:9) 1920 x 1080

스타일 팁

  • 그림자는 은은하게 유지하세요. 그림자는 프레임을 배경에서 띄워 올립니다. 입체감이 필요하면 켜고, 평평하고 미니멀한 느낌을 원하면 끄세요.
  • 여백을 넉넉하게 유지하세요. 프레임 주변에 60~120px의 여백을 두면 스크린샷이 답답해 보이지 않습니다.
  • 브랜드에 어울리는 배경을 선택하세요. 선택한 색은 따뜻한 그라데이션으로 이어지므로, 브랜드에 가까운 색조가 자료를 사이트와 연결해 줍니다.
  • 프레임을 내용과 맞추세요. 데스크톱 앱을 브라우저 바로 감싸거나 웹 페이지를 macOS 창으로 감싸면 어색해 보입니다. 확신이 서지 않으면 심플한 프레임을 사용하세요.
  • 내보내기 전에 민감한 데이터(사용자 이메일, 실명, 결제 정보)를 가리세요. 흐리게 처리하는 편이 법적 문제보다 훨씬 간편합니다.

자주 묻는 질문

세 가지입니다. 브라우저 창(신호등 같은 세 개의 점과 주소 표시줄), macOS 창(신호등 같은 세 개의 점, 주소 표시줄 없음), 그리고 스크린샷의 모서리만 둥글리는 심플한 프레임. 이 프레임들은 특정 제품을 픽셀 단위로 재현한 것이 아니라 스타일화된 디자인이므로 대부분의 지역에서 마케팅 용도로 안전하게 사용할 수 있습니다.

현재는 불가능합니다. 목업은 선택한 배경색으로 만든 그라데이션 위에 합성되며, PNG는 그 배경이 포함된 상태로 내보내집니다. 브랜드에 가까운 색을 선택하거나, 이미지를 단색 표면에 올릴 계획이라면 중립적인 색조를 선택하세요.

목업은 적당한 작업 너비로 렌더링되므로 매우 큰 스크린샷은 프레임에 맞게 축소됩니다. 가장 선명한 결과를 얻으려면 레티나(2x)로 촬영하세요. 내보낸 PNG는 고해상도 화면에서도 선명하게 유지됩니다.

아니요. 합성은 브라우저 캔버스에서 이루어지며, 이미지는 최종 PNG를 저장할 때만 기기를 벗어납니다.

관련 도구

Material Design 색상 선택기

Material Design 색상 팔레트를 둘러보세요. 어떤 음영(50부터 A700까지)이든 HEX, RGB, HSL로 한 번에 복사합니다.

십자수 도안 만들기

JPEG, PNG, WebP를 10–150칸, 2–40가지 전용 색상, 기호, 정확한 스티치 수와 원단 크기가 포함된 인쇄용 십자수 도안으로 변환하세요.

이미지 포맷 변환기

브라우저에서 바로 이미지를 JPG, PNG, WebP로 변환하세요. 손실 형식의 품질을 조절하고 PNG와 WebP의 투명도는 그대로 유지됩니다.

깃발 만들기

여섯 가지 레이아웃, 색상, 텍스트, 기호로 간단한 맞춤 3:2 깃발을 브라우저에서 디자인하세요. SVG 또는 PNG를 내려받거나 브라우저 인쇄 대화상자를 열 수 있습니다.

모눈종이 생성기

인쇄용 모눈종이를 온라인으로 만드세요: 사각 또는 점 격자를 선택하고 간격을 mm로 설정하며 A4 또는 Letter와 원하는 선 색을 지정한 뒤, 인쇄하거나 선명한 SVG로 내려받으세요.

이미지 색상 반전

이미지의 모든 RGB 채널을 반전시켜 네거티브를 생성합니다. 창의적인 편집이나 필름 스캔본을 확인하는 데 유용합니다.

이 도구는 다른 언어로도 제공됩니다