히어로 섹션 · 첫 화면

히어로 섹션에는 무엇을 넣어야 하나요?

히어로 섹션에는 ‘무엇을 하는 곳인지’, ‘왜 여기여야 하는지’, ‘지금 무엇을 하면 되는지’ 세 가지가 들어가면 충분해요. 손님이 첫 화면만 보고도 계속 볼지, 연락할지를 정할 수 있어야 해요.

많이 넣는다고 좋아지지 않아요. 요소가 늘어날수록 하나하나가 덜 보이기 때문에, 꼭 필요한 것과 아래로 내려도 되는 것을 나눠 두는 게 좋아요.

업종과 지역을 넣는 이유는 검색으로 들어온 손님 때문이에요. ‘망원동 케이크’를 검색해 들어온 손님이 첫 화면에서 같은 말을 보면, 제대로 찾아왔다는 확신이 생겨요.

손님은 정말 첫 화면만 보고 판단하나요?

첫 화면만 보는 건 아니지만, 첫 화면에 가장 오래 머무는 건 맞아요. 닐슨 노먼 그룹이 2018년에 발표한 시선 추적 연구에서는 화면을 보는 시간의 약 57%가 스크롤하기 전 영역에 쏠렸어요.

같은 연구에서 처음 두 화면까지가 보는 시간의 약 74%를 차지했어요. 손님이 스크롤을 하긴 하지만, 아래로 갈수록 덜 꼼꼼히 본다는 뜻이에요.

그래서 첫 화면은 ‘더 내려가 볼 이유’를 주는 역할도 해요. 첫 화면에서 우리 가게가 맞다는 확신이 들어야 손님이 아래의 가격 · 후기까지 읽어요.

그렇다고 첫 화면에 모든 걸 넣을 필요는 없어요. 손님은 내려갈 이유가 보이면 스크롤을 하기 때문에, 첫 화면 아래쪽에 다음 내용이 살짝 보이게 두면 자연스럽게 이어 보게 돼요.

히어로 문구는 어떻게 쓰나요?

히어로 문구는 손님이 검색할 때 쓰는 말로, 한 문장 안에 업종 · 지역 · 강점을 담는 게 기본이에요. 멋진 표현보다 바로 이해되는 표현이 더 잘 읽혀요.

아래 순서로 써 보면 대부분의 가게에서 쓸 만한 문구가 나와요. 처음부터 완벽하게 쓰려 하지 말고 두세 개를 만들어 비교해 보세요.

한 줄에 모든 장점을 넣으려 하면 문장이 길어지고 아무것도 기억에 남지 않아요. 장점이 여러 개라면 가장 자신 있는 하나만 첫 화면에 두고, 나머지는 아래 섹션에서 하나씩 풀어 주세요.

문구가 정해지면 검색 결과에 보이는 페이지 제목과 첫 화면 문구의 단어를 맞춰 두는 것도 좋아요. 검색에서 본 말과 첫 화면의 말이 같으면 손님이 덜 헷갈려요.

1. 01손님이 우리 가게를 찾을 때 검색할 만한 말을 적어요. (예: ‘망원동 케이크 주문’, ‘홍대 레이어드컷’)
2. 02그중 업종과 지역을 담은 짧은 큰 제목을 만들어요.
3. 03다른 가게와 다른 점 한 가지를 작은 설명 한 줄로 붙여요. (예: ‘당일 주문 가능’, ‘1:1 상담 후 시술’)
4. 04버튼 문구를 손님이 할 행동으로 정해요. (예: ‘케이크 예약 문의’, ‘빈 시간 보기’)
5. 05폰 화면에 넣어 보고 줄이 너무 많이 바뀌면 단어를 줄여요.
6. 06가게를 모르는 사람에게 5초 보여 주고 ‘여기가 뭐 하는 곳 같아요?’라고 물어봐요.

첫 화면에 큰 사진이나 영상을 넣으면 느려지지 않나요?

관리하지 않으면 느려져요. 첫 화면의 큰 사진은 보통 화면에서 가장 큰 요소라서, 구글이 로딩 속도를 재는 지표인 LCP(가장 큰 콘텐츠가 그려지는 시간)에 그대로 반영돼요.

web.dev 안내로는 LCP가 2.5초 이하일 때 ‘좋음’으로 봐요. 첫 화면 사진은 화면 크기에 맞게 줄이고, 가벼운 형식으로 바꾸고, 늦게 불러오기(지연 로딩)를 걸지 않는 게 기본이에요.

속도는 컴퓨터보다 폰에서, 와이파이보다 데이터 환경에서 더 느리게 나와요. 첫 화면을 확인할 때는 와이파이를 끄고 폰으로 직접 열어 보는 게 손님 입장에 가장 가까워요.

배경 영상은 분위기를 살리지만 용량이 커서 폰 데이터 환경에서 부담이 돼요. 쓰더라도 짧게 만들고, 영상이 뜨기 전에 보여 줄 정지 사진을 함께 준비해요.

업종별로 첫 화면은 어떻게 구성하나요?

업종마다 손님이 첫 화면에서 확인하고 싶은 게 달라서, 사진과 버튼도 그에 맞춰 골라야 해요. 아래는 작은 가게에서 많이 쓰는 구성이에요.

사진은 가능하면 실제 가게에서 찍은 것을 쓰세요. 이미지 사이트의 사진은 깔끔하지만, 손님이 방문했을 때 모습이 다르면 오히려 신뢰가 떨어질 수 있어요.

폰 화면에서는 세로가 긴 사진이 화면을 거의 다 차지해서 글과 버튼이 밀려나기 쉬워요. 컴퓨터용과 폰용 사진을 따로 잘라 두면 두 화면 모두 깔끔해져요.

첫 화면 문구와 사진은 계절이나 행사에 맞춰 바꿔도 좋아요. 다만 바꿀 때마다 제작사에 요청해야 하면 번거로우니, 관리자 화면에서 직접 바꿀 수 있는지 미리 확인해 두세요.

• 카페: 공간이나 대표 음료 사진, ‘연남동 핸드드립 카페 · 매일 10시~22시’, ‘길찾기’ 버튼.
• 미용실: 실제 시술 결과 사진, ‘합정역 3분 · 손상 적은 펌 전문’, ‘디자이너별 예약’ 버튼.
• 공방: 수업 중인 손 사진, ‘주말 도자기 원데이 클래스’, ‘이번 달 일정 보기’ 버튼.
• 온라인 판매: 대표 상품 사진, ‘직접 굽는 수제 그래놀라 · 전국 택배’, ‘상품 보러 가기’ 버튼.

첫 화면에서 자주 하는 실수는 무엇인가요?

가장 흔한 실수는 분위기 사진만 크게 두고 글을 빼는 거예요. 사장님은 가게를 알기 때문에 사진만으로 충분해 보이지만, 처음 온 손님은 무슨 가게인지 바로 알기 어려워요.

슬라이드가 자동으로 넘어가면서 중요한 문구가 금방 사라지는 것도 흔한 문제예요. 컴퓨터에서는 멀쩡한데 폰에서는 버튼이 화면 아래로 밀려나는 경우도 많아서 꼭 폰으로 확인해야 해요.

들어오자마자 뜨는 팝업도 조심해야 해요. 이벤트 창이 화면을 가리면 손님은 가게 소개를 보기도 전에 창을 닫느라 바쁘고, 구글도 내용을 가리는 팝업을 좋지 않은 페이지 경험의 하나로 안내해요.

슬라이드 대신 사진 한 장과 문구로 시작하면 관리도 쉬워요. 사진 여러 장을 보여 주고 싶다면 첫 화면 아래에 갤러리 섹션을 따로 두는 방법이 있어요.

첫 화면 시안을 볼 때 제작사에 무엇을 물어보면 되나요?

시안을 받으면 아래 네 가지를 제작사에 물어보세요. 폰 화면 기준으로 답을 들으면 공개 뒤에 고칠 일이 줄어요.

• 폰 첫 화면에서 버튼이 스크롤 없이 보이나요?
• 첫 화면 사진의 용량과 로딩 속도를 확인해 주나요?
• 사진 위 글씨가 밝은 사진에서도 잘 읽히나요?
• 슬라이드를 쓴다면 손님이 직접 멈추거나 넘길 수 있나요?