홈페이지에 들어온 손님이 가장 먼저 보는 화면, 스크롤을 내리기 전에 눈에 담기는 그 한 장을 히어로 섹션(첫 화면)이라고 부릅니다. 이 한 장에서 손님은 '여기가 무엇을 파는 곳인지', '나에게 필요한 곳인지'를 대략 3초 안에 판단하고, 답이 흐릿하면 뒤로가기를 누릅니다. 광고비를 들여 어렵게 데려온 손님도 첫 화면 하나에서 새어 나갑니다. 작은 회사가 이 화면을 설계할 때 지켜야 할 5가지 원칙을 정리했습니다.
1. 한 문장으로 '무엇을 하는 곳인지' 못 박는다
첫 화면 맨 위에는 브랜드 슬로건이 아니라 정체를 밝히는 한 문장이 와야 합니다. '당신의 일상을 바꿉니다' 같은 추상적인 말은 아무것도 설명하지 못합니다. '경기 남부 20년 경력 인테리어 시공', '수제 비건 디저트 당일 배송'처럼 업종·지역·강점이 한눈에 읽히는 문장이 손님의 3초를 붙듭니다.
2. 시선이 갈 곳을 딱 하나만 남긴다
첫 화면에 버튼을 여러 개 늘어놓으면 손님은 어디를 눌러야 할지 몰라 아무것도 누르지 않습니다. 가장 원하는 행동 하나, 이를테면 '상담 신청'이나 '메뉴 보기'를 눈에 띄는 버튼 하나로 남기고 나머지는 아래로 미루세요. 선택지가 줄어들수록 클릭은 늘어납니다.
대표 이미지는 '분위기'가 아니라 '증거'로
무료 스톡 사진 속 낯선 외국 사무실 풍경은 신뢰를 주지 못합니다. 실제 작업 현장, 실제 제품, 실제 매장 사진 한 장이 백 마디 설명보다 강한 증거가 됩니다.
3. 첫 화면 안에서 '왜 여기여야 하는지'를 보여준다
손님은 늘 다른 집과 비교하고 있습니다. '15년 무사고', '누적 시공 2,000건', '당일 방문 견적'처럼 숫자와 사실로 된 이유를 첫 화면에 한두 개 얹으면, 스크롤을 내릴 이유가 생깁니다.
4. 휴대폰 화면을 기준으로 짠다
손님 열에 여덟은 휴대폰으로 들어옵니다. PC에서 멋지게 보이던 큰 이미지와 긴 문장이 휴대폰에서는 잘리고 뭉개지기 일쑤입니다. 세로로 긴 좁은 화면에서 핵심 문장과 버튼 하나가 스크롤 없이 다 보이는지를 먼저 확인하세요. 첫 화면 설계는 모바일이 기준이고 PC가 응용입니다.
5. 3초 안에 그려지도록 가볍게 만든다
아무리 잘 짠 첫 화면도 로딩이 느려 흰 화면이 3초를 넘으면 손님은 내용을 보기도 전에 떠납니다. 대표 이미지는 웹용으로 압축하고, 동영상 배경이나 화려한 애니메이션은 꼭 필요한 게 아니라면 덜어내세요. 빠르게 뜨는 단순한 화면이 느리게 뜨는 화려한 화면을 이깁니다.
정리하며
첫 화면은 손님이 머물지 떠날지를 가르는 3초의 관문입니다. 한 문장으로 정체를 밝히고, 시선을 하나로 모으고, 이유를 보여주고, 모바일을 기준으로, 가볍게 — 이 다섯 가지만 지켜도 어렵게 데려온 손님이 새어 나가는 것을 막을 수 있습니다.
CYAN에서는 작은 회사의 홈페이지를 만들 때 이 첫 화면 설계부터 손님의 눈길이 어디에 머무는지를 함께 짚어 드립니다. 지금 우리 홈페이지의 첫 화면이 3초 안에 무엇을 하는 곳인지 말해 주고 있는지, 한 번 손님의 눈으로 열어 보시길 권합니다.
