화면 합성, 폰·노트북 화면에 캡처 넣는 5단계

화면 합성은 노트북 · 폰 · 모니터 사진의 화면 네 모서리에 맞춰 내 화면 캡처를 원근 변형해 넣고, 원래 사진에 있던 반사와 빛을 얇게 다시 얹는 작업입니다. 이 마지막 단계를 빼면 화면만 붙여 놓은 듯 떠 보입니다. 목업 파일을 쓰면 원근 · 반사 · 그림자가 미리 짜여 있어 캡처만 바꿔 넣으면 되고, 직접 찍은 기기 사진은 아래 다섯 단계를 거칩니다. 넣는 화면은 자기 회사 앱 · 웹사이트 화면이고, 실제 고객 정보 대신 예시 데이터로 채웁니다.

화면 합성 — 핸드폰 화면은 어떻게 넣나요

사진 편집 프로그램이라면 어느 것이든 순서는 같습니다. 캡처는 원본 크기를 유지하도록 고급 개체(스마트 개체)처럼 다시 편집할 수 있는 상태로 넣어 두면, 화면을 바꿀 때 처음부터 다시 맞추지 않아도 됩니다.

1. 기기 사진 — 화면이 꺼져 검게 보이는 사진이 가장 합성하기 쉽습니다. 정면이나 완만한 각도에서 찍고, 화면에 비친 창 · 조명 반사가 있다면 지우지 말고 남겨 둡니다.
2. 화면 영역 — 화면의 네 모서리에 점을 찍어 영역을 정합니다. 폰은 모서리가 둥글고 위쪽에 카메라 구멍이 있어, 같은 모양의 마스크(가림판)로 바깥을 잘라 냅니다.
3. 원근 변형 — 캡처를 영역 위에 올리고 네 모서리를 화면 모서리에 하나씩 맞춥니다. 자유 변형의 왜곡 · 원근 기능을 쓰거나, 원근 평면을 네 점으로 정해 두면 붙여 넣은 이미지가 그 평면에 맞게 휘는 기능을 씁니다.
4. 반사 · 밝기 — 1단계에서 남긴 반사를 복제해 캡처 위에 얇게 얹습니다(밝은 부분만 더하는 혼합 방식, 불투명도 10~20%에서 시작 — 예시로 정한 출발점). 캡처는 사진보다 지나치게 또렷하고 밝아서, 주변 밝기에 맞춰 대비를 조금 낮추고 아주 약한 흐림이나 노이즈를 더해 사진의 질감과 맞춥니다.
5. 그림자 · 가장자리 — 화면 테두리 안쪽의 얇은 그림자를 살리고, 손가락이 화면 위에 올라와 있다면 손을 캡처보다 위 레이어로 다시 얹습니다. 마지막으로 사진 전체의 색감을 한 번에 맞춥니다.

기기 제조사가 직접 제공하는 기기 프레임 이미지를 쓸 때는 다릅니다. 한 제조사의 마케팅 가이드는 제공한 기기 이미지를 그대로 쓰라고 하면서 반사 · 그림자 · 하이라이트를 더하는 것, 기울이거나 자르는 것도 변형으로 보고 금지합니다. 4 · 5단계는 직접 찍은 기기 사진에만 씁니다. 같은 가이드는 직접 찍은 사진도 정면에 가까운 각도를 권하고, 기기 뒷면은 자연스럽게 쓰는 장면에서만 보여 주며 로고를 내세우거나 가리지 말라고 적습니다. 다른 브랜드의 기기를 쓸 때도 그 브랜드의 가이드를 먼저 찾아봅니다.

모니터 · 노트북 화면 합성은 무엇이 다른가요

순서는 같고, 화면이 커서 세 가지가 더 눈에 띕니다.

• 원근 — 비스듬히 찍은 큰 화면은 먼 쪽이 확연히 작아집니다. 네 모서리만 맞추면 화면 안 글자가 어색하게 늘어나 보일 수 있어, 원근 평면 방식으로 넣고 글자 크기가 먼 쪽으로 자연스럽게 줄어드는지 봅니다.
• 반사 — 무광 코팅 화면은 반사가 흐리게 퍼지고, 유광 화면은 창 모양이 또렷이 비칩니다. 원래 사진의 반사 성질을 따라갑니다.
• 비율 — 노트북 · 모니터는 기종마다 화면 비율이 달라, 사진 속 화면의 가로세로를 재고 같은 비율로 캡처합니다. 비율이 다른 캡처를 늘려 넣으면 둥근 버튼이 타원이 됩니다.

목업 파일과 직접 합성, AI 생성은 무엇이 나은가요

보여 줄 자리와 시간에 따라 고릅니다. 라이선스는 받은 파일마다 다르니 내려받은 페이지의 조건을 기준으로 씁니다.

목업 파일은 거래처에 원본 파일을 넘기지 않고 합친 결과 이미지만 보냅니다. 사이트별 상업 이용 조건은 목업 사이트, 7곳 상업적 이용 조건 비교표에, 목업을 쓰는 자리별 기준은 목업, 패키지·화면 시안을 실물처럼 보여 주는 법에 정리해 두었습니다.

영상 속 화면 합성은 무엇이 다른가요

사진은 네 모서리를 한 번 맞추면 끝나지만, 영상은 카메라나 손이 움직여 모서리가 매 프레임 바뀝니다. 그래서 화면의 평평한 면을 따라가는 평면 추적을 먼저 하고, 그 움직임 값을 모서리 고정(코너 핀) 효과에 넘겨 캡처 영상이 화면에 붙어 움직이게 합니다. 손가락이 화면을 지나가는 장면은 손 부분을 따로 오려 위에 다시 얹어야 합니다.

화면에 넣을 영상은 화면 녹화로 따로 만들어 둡니다. 녹화 도구와 설명 영상 순서는 화면 녹화 프로그램, 비교표와 설명 영상 6단계에 있습니다. 한 기기 제조사의 가이드는 영상에서 기기 전체를 먼저 보여 준 뒤 앱 화면으로 다가가고, 장면 전환은 페이드처럼 단순하게 하라고 안내합니다.

앱 화면을 넣을 때 개인정보와 실제 데이터는 어떻게 가리나요

캡처 단계에서 처음부터 들어가지 않게 하는 것이 가장 확실합니다. 한 기기 제조사의 마케팅 가이드도 화면 속 계정 정보는 실제 사람의 데이터 대신 가상의 정보로 보여 주라고 적고, 화면에 쓴 모든 자료의 권리를 확보하는 것은 앱을 만든 쪽의 책임이라고 적습니다.

• 데모 계정 — 예시 이름 · 예시 사진 · 예시 주문으로 채운 계정을 따로 만들어 캡처합니다. 실제 고객 화면을 캡처한 뒤 흐리게 가리는 방식은 놓치는 칸이 생기기 쉽습니다.
• 점검할 칸 — 이름 · 전화번호 · 메일 주소 · 주소 · 주문번호 · 결제 정보 · 프로필 사진 · 채팅 내용 · 위치 · 상대방 이름.
• 상태 표시줄과 알림 — 시간 · 배터리 · 신호 표시를 정돈하고, 다른 앱의 알림이나 배지가 보이지 않게 합니다.
• 남의 콘텐츠 — 피드 · 검색 결과 화면에 다른 회사의 상품 사진이나 로고가 보이면 자기 회사 예시 콘텐츠로 바꿔 채웁니다.

앱 마켓 · 랜딩페이지 · 광고에는 어떤 크기로 만드나요

앱 마켓은 규격이 정해져 있고 바뀌기도 하니, 제출하는 날 각 마켓의 안내를 다시 확인합니다. 아래 표는 2026년 10월 19일에 공식 안내에서 확인한 값입니다.

앱 마켓 스크린샷 위에 홍보 문구를 얹거나 기기 프레임을 씌우는 것은 마켓마다 안내가 달라, 위 표의 확인할 것 칸을 기준으로 정합니다. 랜딩페이지와 광고는 화면 속 글자가 읽히는지가 먼저라, 화면 전체를 넣기보다 핵심 기능이 보이는 부분만 크게 잘라 넣는 편이 낫습니다.

자주 묻는 질문

화면 캡처는 어떤 크기로 해야 하나요?

합성할 화면 영역보다 크게, 기기의 실제 해상도 그대로 캡처합니다. 폰 화면은 기기에서 바로 캡처한 원본을 쓰고, 웹사이트는 브라우저의 기기 보기 기능으로 넣을 기기와 같은 폭을 골라 캡처합니다. 작은 캡처를 키워 넣으면 글자가 뭉개집니다.

화면 위에 반사를 꼭 넣어야 하나요?

직접 찍은 기기 사진이라면 원래 사진의 반사를 얇게 살릴 때 가장 실제처럼 보입니다. 반대로 기기 제조사가 제공한 프레임 이미지를 쓸 때는 반사 · 그림자를 더하지 말라는 가이드가 있어 그대로 둡니다. 어느 이미지를 쓰는지에 따라 4단계를 넣을지 정합니다.

다른 서비스 화면이나 인터넷에서 받은 화면을 넣어도 되나요?

넣지 않습니다. 화면 합성 이미지는 자기 회사 앱 · 웹 화면을 보여 주는 용도로 만들고, 다른 서비스의 화면이나 로고, 남이 찍은 사진은 넣지 않습니다. 화면에 들어가는 이미지 · 글꼴 · 아이콘도 쓸 권리가 있는 것만 씁니다.

아직 개발 중인 화면을 넣어도 되나요?

내부 보고나 투자 자료처럼 시안임을 아는 사람에게 보여 줄 때는 됩니다. 앱 마켓에는 실제 앱 안의 화면을 올리고, 랜딩페이지 · 광고에 출시 전 화면을 쓴다면 이미지 가까이에 "개발 중 화면"이라고 적어 실제 앱과 다를 수 있음을 알립니다.

오늘 할 일

자기 회사 앱이나 웹사이트의 대표 화면 하나를 예시 데이터로 채운 데모 계정에서 캡처하고, 무료 목업 파일 하나에 넣어 보십시오. 내려받은 페이지의 라이선스 화면도 같은 폴더에 캡처해 두면, 이미지를 쓸 때마다 출처 표시 조건을 다시 찾지 않아도 됩니다.

이어서 읽기 — 앱 홍보 영상, 화면 녹화와 AI 컷 섞는 구성표