휴대폰 화면에 캡쳐 화면 넣기, 목업(mock-up) 활용 방법

어플리케이션 또는 웹 사이트를 홍보 할 때 보통 목업(mock-up)을 활용하여 실제로 어플리케이션의 화면이 스마트폰에서 구동되고 있는 것처럼 이미지를 만들곤 합니다. 다음과 같이 말이죠. 

 

 

이거 어떻게 했는지 알려드리도록 하겠습니다. 

 

휴대폰 화면에 캡쳐 화면 넣는 방법

1. 우선 스마트폰 기기 화면에 넣고자 하는 화면을 캡쳐합니다. 저는 크롬에서 개발자도구(F12)를 연 후에 제 블로그 화면을 캡쳐했습니다. 

 

 

 

2. 스마트폰, 태블릿 PC, 노트북 등에 목업을 할 수 있게 도와주는 웹사이트에 접속합니다. 아래 사이트 말고도 여러 사이트에서 목업을 도와줍니다. 저는 이 사이트가 사용하기 편하더라고요. 더 좋은 사이트 있으면 추천해주세요. 

https://mockuphone.com/

 

3. 원하는 기기를 선택합니다. 

 

4. 구체적으로 원하는 기기를 선택합니다. 저는 iPhone 13 Blue에 스크린샷 이미지를 넣겠습니다.

 

 

5. 캡쳐한 화면을 업로드합니다. 권장 사이즈로 해주면 좋지만, 그렇지 않아도 적절하게 목업이 됩니다.

 

 

6. [Generate product mockups] 버튼을 클릭합니다. 그러면 목업이 진행됩니다. 

 

 

7. Completed!라는 메시지가 보이면 아래에 있는 [Download my mockups] 버튼을 클릭하여 목업 파일을 다운로드 받습니다. 

 

 

8. 다운로드 폴더에 압축파일이 다운로드 받아졌을 것입니다. 압축을 풀고 폴더를 열어보면 목업 파일이 있을 것입니다. 

 

 

잘 되셨나요?