웹사이트의 모바일 버전을 녹화하는 법

iPhone과 Android 모두 빠른 설정에 화면 녹화 기능이 들어 있습니다. 실제 기기를 담으니 있는 그대로라는 점은 좋지만, 문제는 스크롤입니다. 엄지로 튕기면 관성으로 미끄러지고, 튕길 때마다 모양이 다릅니다.

• 방해 금지 모드를 켜서 알림이 끼어들지 않게 하세요.
• 먼저 조금 아래로 스크롤해 브라우저 툴바를 숨기세요. 페이지가 전체 화면 실행을 지원한다면 홈 화면에 추가해도 됩니다.
• 상태 표시줄이 거슬린다면 나중에 편집 프로그램에서 잘라 내세요.

DevTools를 열고 기기 툴바를 켠 다음(Mac은 ⇧ ⌘ M, Windows는 Ctrl Shift M) 목록에서 휴대폰을 고르세요. 페이지가 그 너비와 터치 기기용 사용자 에이전트로 다시 불러와지면서 모바일 레이아웃을 보여 줍니다. 화면 녹화 프로그램으로 그 뷰포트만 녹화하고, 스크롤은 스크립트에 맡기세요. 자동 스크롤 가이드에 스크립트가 있습니다.

녹화 전에 기기 툴바의 확대/축소를 100%로 맞추세요. 그렇지 않으면 녹화 프로그램이 축소된 화면을 담아 글자가 흐려집니다.

홈페이지에 주소를 붙여넣고, 영상 설정 맨 위에서 ‘모바일’이나 ‘태블릿’을 고르세요. 페이지가 저희 서버에서 그 너비로 불러와지므로 사이트는 그 너비에서 실제로 보여 주는 레이아웃으로 응답하고, 휴대폰에 맞는 화면비인 9:16, 4:5, 1:1을 고를 수 있게 됩니다.

• 휴대폰 화면에서 훨씬 큰 자리를 차지하는 쿠키 배너와 채팅 버튼은 먼저 제거됩니다.
• 페이지를 두 배 밀도로 읽기 때문에 1080 × 1920으로 내보내도 글자가 선명합니다.
• 태블릿이나 휴대폰 너비로 읽으면 내보내기에 3크레딧이 더해집니다. 그 밖에 달라지는 것은 없습니다.

렌더링했든 녹화했든 모바일 영상은 화면만 담고 있습니다. iPhone이나 Pixel 안에 넣어 보여 주려면 목업 앱이나 영상 편집 프로그램의 템플릿에서 기기 위에 영상을 올리세요. 9:16으로 내보내야 위아래 여백 없이 기기 화면을 꽉 채웁니다.