포트폴리오에 넣을 웹사이트는 어떻게 녹화하나요?

• 디자인 파일이 아니라 실제 사이트. 실제 콘텐츠, 실제 이미지, 실제 글자 렌더링. 고객이 그사이 사이트를 바꿨다면 지금 있는 것을 쓰거나, 보관해 둔 빌드를 녹화하세요.
• 데스크톱 페이지를 먼저, 그다음 모바일. 데스크톱과 휴대폰 영상 두 개를 나란히 놓으면 어떤 설명보다 반응형 작업을 잘 보여 줍니다. 휴대폰 버전은 휴대폰 너비로 읽어야 사이트가 실제 모바일 레이아웃을 보여 줍니다.
• 둘 다 디자인했다면 라이트와 다크 모두. 테이크마다 시스템 설정을 바꾸지 말고 색 구성을 지정하세요.
• 자랑하고 싶은 인터랙션. 호버 상태를 직접 디자인한 카드와 버튼에 커서를 가져가면 영상에서 그 효과가 재생됩니다.

포트폴리오를 둘러보는 사람은 프로젝트마다 몇 초를 보고 계속 볼지 정합니다. 바로 움직이기 시작하거나, 히어로에서 1초 정도 머문 뒤 시작하고, 전체 스크롤은 10~20초 사이로 유지하세요.

포트폴리오 영상에서는 멈춤만큼 효과가 큰 것이 없습니다. 히어로, 기능 그리드, 요금표처럼 디자인 결정이 드러나는 섹션마다 1~2초씩 멈추세요. 한 영상에 멈춤을 최대 6개까지 넣을 수 있고, 각각 0.5~5초입니다. 페이지가 길다면 전체 속도를 올리지 말고, 푸터 전에 끝나도록 스크롤 구간을 줄이세요.

4K로 내보내기 전에 각 플랫폼의 업로드 제한을 확인하세요. 업로드할 때 다시 인코딩되는 곳이라면 대개 1080p 파일이 더 안전합니다.

열두 개의 프로젝트를 열두 가지 방식으로 담으면 열두 사람의 작업처럼 보입니다. 보여 주는 방식을 한 번 정하고 그대로 반복하세요.

• 프레임 하나. Safari나 Chrome 창의 라이트 또는 다크, 아니면 단순한 테두리. 모든 프로젝트에 같은 것을 씁니다.
• 배경 하나. 단색, 그라데이션, 프리셋 36개 중 하나, 아니면 창 뒤에 직접 올린 이미지. 사진이라면 흐림과 노이즈로 부드럽게 만드세요.
• 움직임 하나, 속도 하나. 같은 이징, 페이지 한 화면당 비슷한 초 수.
• 여백, 모서리, 그림자는 한 번만 정해서 모든 프레임에서 창이 같은 모습으로 놓이게 하세요.

소리 없이 반복되는 영상은 움직이는 이미지처럼 동작하며, 음소거되어 있고 인라인 재생이 허용되어 있으면 최신 브라우저 어디서나 자동 재생됩니다. 재생을 ‘아래로 갔다가 위로’로 설정하면 마지막 프레임이 첫 프레임과 같아져 반복할 때 튀지 않습니다.

<video autoplay muted loop playsinline preload="metadata"
       poster="project-poster.jpg" width="1920" height="1080">
  <source src="project.webm" type="video/webm" />
  <source src="project.mp4" type="video/mp4" />
</video>

너비와 높이를 지정하면 파일을 불러오는 동안 레이아웃이 밀리지 않고, 포스터는 첫 프레임이 도착하기 전까지 그 자리에 보여 줄 이미지가 됩니다.