클로드 화면을 완성본처럼 보이게 하는 밤티 탈출 무료 목업 사이트 모음
클로드로 잘 만든 화면도 캡처를 그대로 포트폴리오나 상세페이지에 붙이면 어딘가 미완성처럼 보입니다. 이 자료는 화면을 폰·노트북 목업에 넣어 주는 무료 사이트 다섯 곳의 무료 범위와, 목업에 넣기 좋은 캡처를 클로드에게 만들게 하는 프롬프트를 담았습니다.
Quick Start
평면 캡처는 화면 가장자리와 배경이 구분되지 않아 결과물이 덜 완성돼 보입니다.
같은 화면을 기기 틀 안에 넣고 배경과 그림자를 더하면 실제 서비스를 쓰는 장면처럼 보입니다.
아래 다섯 곳은 모두 무료로 시작할 수 있고, 가입 없이 둘러볼 수 있는 곳도 있습니다.
- STEP 1에서 클로드에게 목업에 넣기 좋은 크기로 화면을 정리하게 하고 캡처합니다.
- STEP 2에서 쓰임새에 맞는 목업 사이트를 고릅니다.
- STEP 3에서 캡처를 넣고 내보낸 뒤, 필요하면 클로드로 상세페이지에 배치합니다.
STEP 1 · 5분목업에 넣을 캡처를 만든다
목업의 기기 화면 비율과 캡처 비율이 다르면 위아래가 잘리거나 빈 공간이 생깁니다.
캡처하기 전에 화면 크기를 기기에 맞춰 달라고 합니다.
이 화면을 아이폰 화면 크기(390×844)에 맞춰 한 화면 안에 들어오게 정리해줘. 상단 상태 표시줄 자리 44px는 비워 두고, 스크롤 없이 첫 화면에서 핵심 내용이 다 보이게 해줘. 내용과 색은 바꾸지 마.
브라우저 개발자 도구의 기기 모드에서 같은 크기로 열고 캡처합니다.
웹페이지라면 1440×900처럼 노트북 비율로 한 장 더 캡처해 둡니다.
STEP 2 · 3분쓰임새에 맞는 사이트를 고른다
| 사이트 | 이럴 때 | 무료로 확인한 범위 |
|---|---|---|
| Shots | 캡처 한 장을 빠르게 기기 틀+배경으로 | 무료 목업 제공(Free Mockups), 캡처를 넣으면 배경을 골라 주는 Magic Backgrounds |
| Mockuuups Studio | 손에 든 폰, 책상 위 노트북 같은 실사 사진 | 목업 5,300개 이상. 무료 모음은 수가 제한되고 출처 표기가 필요하며 개인 작업용 |
| Canva | 이미 캔바로 상세페이지·SNS를 만들 때 | 폰·웹사이트 목업 템플릿. 일부 AI 편집 기능은 Pro 표기 |
| Artboard Studio | 폰 말고 포스터·박스·티셔츠까지 | 무료로 시작 가능(공식 FAQ), 목업 5,000개 이상, 브라우저에서 편집 |
| Previewed | 앱스토어·구글 플레이 스크린샷 | LITE $0: 한 개 앱·프로젝트, 2D 내보내기 무제한(720p), CC 출처 표기 라이선스 |
STEP 3 · 5분캡처를 넣고 상세페이지에 배치한다
사이트에서 기기를 고르고 STEP 1의 캡처를 올린 뒤 PNG로 내보냅니다.
내보낸 목업 이미지는 다시 클로드에게 넘겨 페이지에 배치할 수 있습니다.
첨부한 목업 이미지를 이 랜딩 페이지 첫 화면 오른쪽에 넣어줘. 왼쪽에는 서비스 이름과 한 줄 설명, 버튼 하나만 두고, 목업 이미지 뒤에는 옅은 그림자만 줘. 다른 섹션은 그대로 둬.
첨부한 앱 캡처를 HTML/CSS로 그린 아이폰 틀 안에 넣은 이미지를 만들어줘. 둥근 모서리의 검은 테두리와 상단 카메라 자리만 그리고, 배경은 주황에서 보라로 가는 부드러운 그라데이션으로 해줘. 실제 기기 사진처럼 보이게 꾸미지는 마.
성공하면 같은 화면이 기기 안에 들어가 배경과 분리되어 보이고, 포트폴리오 썸네일이나 상세페이지 첫 화면에 바로 쓸 수 있습니다.
함께 보면 좋은 글
이메일 남기고 전체 바로 보기