폰 목업이란?
스크린샷, 영상, 인터페이스를 기기 외형에 넣어 보여주는 틀입니다. 평면 PNG와 달리 3D 목업은 카메라와 힌지를 바꾸면서도 화면 내용을 유리에 붙인 채로 둡니다.
브라우저에서 무료
iPhone Duo 목업
접으면 반응형 페이지가 커버에서 안쪽 듀얼 화면으로 펼쳐집니다. 이미지·영상을 놓고 크롭한 뒤 MP4로 내보내세요.
CutFast을 Google 선호 소스로 추가 주요 뉴스와 AI 답변에서 CutFast를 더 자주 만나보세요.
- 하는 일
- 폴더블 목업 + MP4
- 입력
- URL · 이미지 · 영상
- 실행 위치
- 이 탭
- 보내기
- MP4 다운로드
내용이 살아 있는 폴더블 목업
사용자 지정 화면은 HTML 캔버스에 그려져 Duo 안쪽·바깥 화면에 붙습니다. 힌지는 GIF가 아니라 살아 있는 슬라이더입니다. 녹화는 내용이 올라간 3D 화면을 보냅니다.
Features
바로 쓰는 폴더블 목업
이 페이지가 도구입니다. 캔버스에 그린 내용을 Duo 화면에 붙이고 브라우저에서 녹화합니다.
URL, 이미지, 영상
데모 사이트는 첫 화면에서 듀얼 화면 폭으로 리플로우됩니다. 또는 파일을 놓고 프로필 사진처럼 드래그해 크롭하세요.
손을 따라가는 접힘
드래그 중에는 1:1. 손을 떼면 현재 속도에서 열림 또는 닫힘으로 스프링합니다.
여기서 MP4 보내기
화면 내용이 있는 접힘을 녹화해 재생 가능한 MP4를 받습니다.
빈 껍데기가 아닌 실사용 형
정지 컷 폰 프레임으로는 이야기가 안 될 때 힌지를 이야기에 맞춥니다.
제품 필름
앱이나 사이트가 폴더블에서 열리는 컷을 보냅니다.
공개 클립
세로 영상을 넣고 접은 뒤 같은 파일을 광고나 SNS에 씁니다.
고객 확인용
디자인 정지를 두 화면에 붙인 채 브라우저를 떠나지 않습니다.
세 단계
이 페이지에 머무릅니다. 설치 없음.
- 1
데모 사이트를 접거나 파일을 놓기
사용자 지정은 폰이 열리며 펼쳐지는 반응형 페이지로 시작합니다. 이미지·영상을 놓아 크롭하고 배치하세요.
- 2
폰을 접기
슬라이더는 손을 따르고, 떼면 열림 또는 닫힘으로 스프링합니다.
- 3
녹화하고 저장
한 번의 접힘을 MP4로 만듭니다. 인코딩은 브라우저에서 합니다.
폴더블 목업이 필요한 때
정지된 폰 프레임으로는 이야기가 멈출 때.
앱 마케팅
시네마 렌더 없이 폴더블에서 UI가 열리는 모습을 보여 줍니다.
모션 디자인
영상을 넣고 비트에 맞춰 접은 뒤 그 컷을 보냅니다.
마감 앞의 창업자
랜딩 스크린샷을 두 화면에 붙이고 오늘 클립을 냅니다.
관련 다운로드
3D 목업 대신 실물 손 플레이트가 필요하신가요?
용어
폴더블 폰 목업이란?
힌지 각이 살아있는 매개변수인 기기 틀입니다. 닫히면 커버, 열리면 안쪽 화면. 같은 소재를 각도에 맞춰 두 화면에 올릴 수 있습니다.
왜 모든 사이트를 캔버스에 못 그리나요?
CORS 헤더가 없으면 브라우저는 다른 사이트 픽셀을 비공개로 둡니다. 캔버스에 그리는 것은 그 픽셀을 읽는 일입니다. 헤더가 없으면 삽입을 거절하고 업로드를 받는 것이 정직한 길입니다.
출처
-
CORS 헤더가 없는 교차 출처 내용은 캔버스에 그릴 수 없습니다. 다른 사이트 픽셀을 읽지 못하게 하기 위해서입니다.
MDN — CORS ↗ -
WebCodecs는 캔버스나 VideoFrame을 브라우저에서 인코딩할 수 있어 프레임을 서버로 보낼 필요가 없습니다.
W3C WebCodecs ↗
FAQ
자주 묻는 질문
무엇이든 물어보세요!