손님이 홈페이지에 들어와 머무를지 말지를 정하는 데 걸리는 시간은 3초 안팎이다. 그 3초 동안 손님의 눈에 들어오는 것은 스크롤을 내리기 전 맨 위 한 화면, 이른바 첫 화면(히어로 섹션)이다. 여기서 '무엇을 파는 곳인지, 나와 무슨 상관인지'가 곧바로 읽히지 않으면 손님은 내용을 더 살펴보지 않고 뒤로 가기를 누른다. 작은 회사일수록 이 한 화면이 간판이자 첫인사이고, 사실상 매출의 입구다. 멋을 부리기보다 3초 안에 이해시키는 것을 목표로, 첫 화면을 설계하는 다섯 가지 원칙을 정리했다.
1. 첫 문장이 '무엇을 해 주는 곳인지'를 곧바로 말하게 하라
첫 화면에서 가장 큰 글자, 즉 헤드라인은 회사의 슬로건이 아니라 손님이 얻는 것을 말해야 한다. '고객과 함께 미래를 그립니다' 같은 문구는 멋있어 보여도 무슨 가게인지 알려 주지 못한다. '3일 안에 완성되는 우리 가게 홈페이지'처럼, 업종과 혜택이 한 줄에 담겨야 손님이 자신과 상관있는 곳이라 판단한다.
- 업종을 모르는 사람이 헤드라인만 읽고도 무엇을 파는지 알 수 있는지 확인한다
- 추상적인 각오나 비전 대신, 손님이 받는 구체적 결과를 적는다
- 헤드라인 아래 한 줄로 대상과 특징을 보충한다(예: '소규모 자영업자를 위한')
2. 눌러야 할 버튼 하나를 분명히 보여 줘라
첫 화면에는 손님이 다음에 할 행동을 정해 주는 버튼(행동 유도)이 하나 또렷하게 있어야 한다. '문의하기', '무료 상담 받기'처럼 무엇이 일어날지 예상되는 문구가 좋다. 버튼이 여러 개면 손님은 무엇부터 눌러야 할지 헤매다 아무것도 누르지 않는다. 가장 원하는 행동 하나를 눈에 띄는 색으로 앞세우고, 나머지는 뒤로 물리는 편이 전환에 유리하다.
3. 배경 이미지가 글자를 잡아먹지 않게 하라
큼직한 사진이나 영상으로 첫 화면을 채우는 것은 좋지만, 그 위에 얹은 글자가 배경에 묻혀 읽히지 않으면 소용이 없다. 이미지는 메시지를 돕는 배경이지 주인공이 아니다. 사진 위에 반투명 어두운 막을 한 겹 깔거나, 글자 영역만 단색으로 비워 두면 어떤 사진에서도 헤드라인이 또렷하게 살아난다. 화려한 사진 한 장보다, 글자가 잘 읽히는 수수한 화면이 장사에는 낫다.
4. 휴대폰 화면을 기준으로 먼저 설계하라
손님 열에 일곱 이상은 휴대폰으로 들어온다. 그런데 데스크톱 넓은 화면에 맞춰 짠 첫 화면은 휴대폰에서 헤드라인이 접히고 버튼이 화면 밖으로 밀려나는 일이 흔하다. 첫 화면은 좁은 세로 화면을 기준으로 먼저 짜야 한다.
- 휴대폰에서 헤드라인·한 줄 설명·버튼이 스크롤 없이 한눈에 들어오는지 본다
- 버튼은 손가락으로 누르기 좋게 충분히 크게 잡는다
- 글자가 화면 밖으로 삐져나오거나 줄바꿈이 어색하지 않은지 실제 기기로 확인한다
5. 넣고 싶은 것을 다 넣지 말고, 하나만 남겨라
첫 화면의 가장 흔한 실수는 회사 자랑, 공지, 이벤트, 메뉴, 인사말을 한 화면에 전부 밀어 넣는 것이다. 그렇게 되면 손님의 시선이 흩어져 결국 아무것도 기억에 남지 않는다. 첫 화면은 '이 회사가 무엇을 해 주는가'라는 한 가지 메시지에만 집중하고, 나머지 정보는 아래로 내려보내는 것이 맞다. 비워 둔 여백은 낭비가 아니라, 남긴 한 문장을 또렷하게 만드는 힘이다.
첫 화면은 꾸미는 곳이 아니라 이해시키는 곳이다
작은 회사의 첫 화면은 예쁘게 꾸며야 하는 곳이 아니라, 3초 안에 손님을 이해시켜 다음 행동으로 이끄는 곳이다. 무엇을 해 주는지 한 문장으로 말하고, 누를 버튼 하나를 분명히 보여 주고, 글자가 잘 읽히게 하고, 휴대폰을 기준으로 짜고, 메시지를 하나로 좁히는 것 — 이 다섯 가지만 지켜도 첫 화면은 제 몫을 한다. CYAN은 홈페이지를 만들 때 첫 화면을 가장 먼저, 가장 오래 붙잡고 다듬는다. 손님이 뒤로 가기를 누르기 전에 붙잡는 그 한 화면이, 결국 문의와 매출을 가르기 때문이다.
