첫 화면은 아직도 중요할까?

기준선은 옮겨졌고, 질문은 그대로입니다

이제 첫 화면의 기준선은 기기마다 다릅니다. 1440x900 노트북에서는 브라우저 UI가 자리를 차지하고 나면 페이지가 약 750픽셀 보입니다. Safari를 쓰는 iPhone에서는 650픽셀쯤이고, 주소창이 아래에 붙으면 더 줄어듭니다. 방문자마다 첫 화면에서 보는 조각이 다르다는 뜻입니다. 그 조각에서 원하는 것은 예전과 같습니다. 내가 제대로 찾아온 게 맞나, 한 번 더 내릴 만한가.

사람들은 스크롤합니다. 대신 판단이 빠릅니다

2010년 이후로 스마트폰을 써온 사람은 생각하기 전에 손가락이 먼저 움직입니다. 문장을 다 읽기도 전에 엄지가 화면을 올립니다. 첫 화면 아래는 아무도 안 읽는다는 오래된 걱정은 그래서 시효가 지났습니다. 다만 이탈은 여전히 빠릅니다. 광고를 누르고 헤드라인을 읽었는데 광고가 약속한 내용이 안 보이면 몇 초 만에 나갑니다. 스크롤은 독자에게 비용이 아닙니다. 귀한 쪽은 주의력입니다.

디자인하기 전에 내 첫 화면을 재보세요

애널리틱스에 실제로 잡히는 기기 세 개로 페이지를 열어보세요. 제 클라이언트 대부분은 iPhone, 13인치 MacBook, 1080p 외장 모니터입니다. 각각에서 스크롤하지 않은 상태로 페이지 상단을 캡처하세요. 휴대폰에서는 보통 헤드라인과 버튼 절반이 보입니다. 큰 모니터에서는 보통 헤드라인이 400픽셀짜리 빈 공간에 떠 있습니다. 이 둘을 따로 디자인하세요.

첫 화면을 낭비하는 것들

첫 화면을 잡아먹고 아무것도 돌려주지 않는 것이 셋 있습니다. 자동으로 넘어가는 캐러셀은 첫 슬라이드에서 사람을 놓쳐서 두 번째, 세 번째 슬라이드는 아예 보이지 않습니다. '성장, 새롭게 정의하다' 같은 추상적인 헤드라인은 업종을 가리지 않고 어느 사이트에나 붙습니다. 지나치게 큰 히어로 이미지는 휴대폰 화면 밖으로 버튼을 밀어냅니다. 마지막 항목은 실제 기기에서 확인하세요. Framer 캔버스는 휴대폰보다 훨씬 넉넉합니다.

첫 화면에 자리를 얻는 것들

우선순위 순으로 다섯 가지입니다. 제품 이름과 그 제품이 속한 카테고리. 구매자가 얻는 결과를 구매자의 말로 쓴 문장. 로고 줄이나 근거를 댈 수 있는 숫자 하나 같은 증거 한 조각. 동사가 들어간 주요 버튼. 그리고 웃는 팀 사진 대신 실제 제품이나 실제 작업물을 담은 이미지.

스크롤이 갈 곳을 만들어주세요

첫 화면의 아래 끝은 일부러 잘린 것처럼 보여야 합니다. 기준선 바로 위에서 다음 섹션을 시작하세요. 로고 줄을 절반만 보여주거나, 제목이 아래에서 살짝 올라오게 두면 됩니다. 그 선에 딱 맞춘 굵은 경계선과 넓은 여백은 눈에 페이지가 여기서 끝났다고 알려줍니다. 긴 페이지에서는 히어로 높이를 화면의 80% 정도로 잡아서 다음 섹션이 항상 살짝 걸치게 합니다.

10분 안에 확인하는 법

회사 밖 사람에게 페이지 상단을 5초만 보여주세요. 화면을 가린 다음 이 회사가 무엇을 팔고 누구를 위한 것인지 물어보세요. 답이 안 나오면 첫 화면이 제 역할을 못 한 것이고, 애니메이션을 아무리 넣어도 소용없습니다. 런칭 후에는 스크롤 맵을 보세요. 두 번째 섹션까지 못 가는 세션 비중이 크다면 문제는 그 첫 650픽셀 안에 있습니다.