랜딩 페이지 히어로에서 목업 쓰기
히어로는 대부분의 방문자가 계속 읽을지 정하는 자리입니다. 거기서 목업의 임무는 하나입니다. 제품이 존재한다는 것을 증명하고, 그것이 어떤 종류의 제품인지 한 단어도 읽히기 전 첫 1초에 보여 주는 것입니다. 내보내기와 배치에 관한 모든 것이 이 마감에서 나옵니다.
줄이지 말고 기기 안으로 잘라 들어가기
히어로에 떠 있는 휴대전화 전체는 넓은 화면에서 작아 보이고 안의 화면은 읽히지 않습니다. 기기가 구역의 아래나 옆으로 빠져나가도록 자르세요. 알아볼 수 있는 윗부분 곡선만으로도 휴대전화라고 전해집니다. 그리고 화면이 실제 면적을 차지하게 하세요. 잘라낸 목업은 브레이크포인트 사이에서도 더 잘 대응합니다. 이미지 전체를 줄이는 대신 잘라내는 위치를 옮길 수 있기 때문입니다.
먼저 정지 이미지, 무게를 벌면 영상
히어로에서 자동 재생되는 목업 영상은 효과적이면서 비쌉니다. 첫 렌더링을 늦추고 모바일 데이터를 쓰고 배터리를 소모합니다. 쓴다면 짧고 소리 없이 반복시키고, 즉시 무언가 보이도록 포스터 이미지를 두고, 작은 화면에서는 끄세요. 많은 경우 정지 히어로와 페이지 아래쪽의 짧은 영상 조합이 같은 정도로 전환되면서 로딩은 몇 분의 일입니다.
목업의 빛을 페이지와 맞추기
어두운 배경에서 렌더링한 기기를 흰 페이지에 올리면 배경이 투명하더라도 늘 붙여 넣은 것처럼 보입니다. 몸체에 얹힌 빛이 어두운 환경을 암시하기 때문입니다. 페이지가 실제로 쓰는 명도에 대해 렌더링하세요. 이것이 내보낸 이미지뿐 아니라 목업 프로젝트를 보관해야 하는 실무적 이유이기도 합니다. 사이트를 새로 단장할 때 보정이 아니라 다시 렌더링하면 됩니다.
자주 묻는 질문
히어로에는 휴대전화와 노트북 중 무엇을?
제품이 우선 무엇인지에 따릅니다. 둘 다 보여 줄 값어치가 있는 건 기기 간 동기화 자체가 약속일 때뿐입니다.
히어로 이미지 크기는?
표시되는 최대 너비의 약 두 배로 내보낸 뒤 압축하세요. 모바일에는 더 작은 버전을 제공합니다.
움직이는 히어로가 값어치를 하나요?
정지 이미지가 전할 수 없는 것을 움직임이 전할 때, 그리고 포스터 이미지로 첫 렌더링을 지킬 때만 그렇습니다.