광고를 누르고 들어온 고객이 첫 화면을 잠깐 보고는 뒤로가기를 누른다. 사이트가 느려서가 아니다. 화면이 예뻐도 '여기가 무엇을 하는 곳인지'가 3초 안에 읽히지 않으면 사람은 그냥 떠난다. 스크롤을 내리기 전 가장 먼저 보이는 영역, 이른바 히어로 섹션이 작은 회사 웹사이트의 첫인상 전부를 결정한다. 비싼 디자인보다 중요한 다섯 가지 원칙을 정리했다.
1. 멋진 문구보다 '무엇을 하는 곳인가'를 먼저 말한다
가장 흔한 실수는 첫 화면 헤드라인에 "고객과 함께 성장합니다" 같은 추상적인 구호를 넣는 것이다. 처음 온 사람은 회사 이름도, 업종도 모른다. 헤드라인 한 줄로 누구에게 무슨 가치를 주는 곳인지가 바로 읽혀야 한다.
- 나쁜 예: "새로운 가치를 만듭니다"
- 좋은 예: "소규모 카페를 위한 원두 정기배송"
업종과 대상이 한 문장에 들어가야 한다
그 아래 한 줄 보조 설명으로 차별점이나 혜택을 덧붙이면 충분하다. 고객은 멋진 표현이 아니라 빠른 판단을 원한다.
2. 행동 버튼(CTA)은 첫 화면에 단 하나만 둔다
"문의하기", "카탈로그 받기", "전화 상담", "인스타 보기"를 첫 화면에 모두 깔면 고객은 무엇을 눌러야 할지 몰라 아무것도 누르지 않는다. 가장 원하는 행동 딱 하나를 정하고, 그 버튼만 눈에 띄는 색으로 크게 둔다. 나머지는 아래로 미루거나 작게 처리한다.
3. 예쁜 사진보다 '맥락이 보이는' 사진을 쓴다
무료 이미지 사이트의 외국인 모델 사진은 깔끔하지만 우리 회사가 뭘 하는지 알려주지 않는다. 실제 작업 현장, 제품, 매장이 담긴 사진 한 장이 헤드라인을 보강한다. 사진 위에 글자를 얹을 때는 어두운 반투명 막을 깔아 가독성을 지키는 것이 기본이다.
4. 핵심은 스크롤하기 전에 다 보이게 한다
고객의 절반 이상은 화면을 내리지 않는다. 그래서 무슨 회사인지·왜 믿을 만한지·다음에 뭘 누르면 되는지 이 세 가지는 첫 화면 안에서 끝나야 한다. 큰 로고와 빈 여백으로 첫 화면을 다 채워버리고 정작 중요한 정보를 스크롤 아래에 숨기는 디자인은 피한다.
5. 데스크톱이 아니라 모바일 첫 화면을 기준으로 설계한다
방문자 대부분은 휴대폰으로 들어온다. PC에서 멋지게 꽉 차던 히어로가 모바일에서는 헤드라인이 잘리고 버튼이 화면 밖으로 밀려난다. 좁은 세로 화면에서 먼저 헤드라인 한 줄, 보조 설명 한 줄, 버튼 하나가 한눈에 들어오는지부터 확인하고, 그 다음 PC 화면을 맞추는 순서가 안전하다.
정리하면
첫 화면은 디자인 경연이 아니라 3초 안에 끝나는 자기소개다. 무엇을 하는 곳인지 한 문장으로 말하고, 누를 버튼 하나를 분명히 하고, 맥락이 담긴 사진을 쓰고, 핵심을 스크롤 위에 모으고, 모바일을 기준으로 설계하면 그것만으로 이탈률은 눈에 띄게 줄어든다.
CYAN은 작은 회사의 웹사이트를 만들 때 늘 이 첫 화면부터 함께 고민한다. 화려한 효과보다, 처음 온 고객이 헤매지 않고 다음 행동으로 자연스럽게 이어지는 화면을 설계하는 일이 결국 매출로 돌아오기 때문이다.