홈페이지 첫 화면 문구는 홈페이지를 열었을 때 화면을 내리지 않고 바로 보이는 큰 제목·보조 문장·버튼 글자를 말합니다. 이 가운데 가장 중요한 일은 '무엇을 하는 곳인지'를 한 문장으로 알리는 것입니다. 처음 들어온 사람은 몇 초 안에 계속 볼지 나갈지 정합니다. 그래서 첫 화면에는 멋진 표어보다 누구에게 무엇을 해 주는지와 다음에 누를 버튼 하나가 먼저 보여야 합니다.
첫 화면은 가게 간판과 유리문입니다
길을 걷다 처음 보는 가게 앞에 섰다고 생각해 보세요. 간판에 '정성'이라고만 적혀 있으면 무엇을 파는지 알 수 없어 그냥 지나칩니다. '수제 돈가스 · 포장 됩니다'라고 적혀 있고 유리문에 '안으로 들어오세요'가 붙어 있으면 한 걸음 들어갑니다. 홈페이지 첫 화면도 같습니다. 휴대폰으로 열었을 때 화면을 내리지 않고 보이는 부분이 간판과 유리문 역할을 합니다.
첫 화면 문구는 보통 세 줄로 이루어집니다. 줄마다 맡은 일이 다르니 하나씩 나눠 씁니다.
| 줄 | 맡은 일 | 길이 |
|---|---|---|
| 큰 제목 | 무엇을 하는 곳인지 한 문장 | 휴대폰에서 두 줄 안 |
| 보조 문장 | 다른 곳과 무엇이 다른지, 믿을 근거 | 한두 문장 |
| 버튼 | 지금 할 수 있는 다음 행동 | 두세 단어 |
무엇을 하는 곳인지 한 문장으로 쓰는 법
큰 제목은 누구에게(또는 어디서) + 무엇을 + 어떻게 세 조각을 이어 붙이면 쉽게 나옵니다. 세 조각 모두 손님이 실제로 쓰는 말로 적습니다. 업계에서 쓰는 말보다 손님이 전화로 물어보는 말이 좋습니다. 예를 들어 손님이 "욕실만 고칠 수 있나요?"라고 묻는다면 '부분 리모델링'보다 '욕실만 고치는 공사'가 더 잘 읽힙니다.
세 조각을 다 넣으면 문장이 길어질 수 있습니다. 이때는 가장 중요한 두 조각을 큰 제목에 두고, 나머지 하나를 보조 문장으로 내립니다. 손님이 자주 묻는 질문을 모아 두면 이 조각을 고르기 쉬운데, 질문을 모으는 방법은 홈페이지 글 주제 고르는 법에 있습니다.
좋은 예와 나쁜 예
나쁜 예는 대부분 어느 회사에 붙여도 말이 되는 문장입니다. 회사 이름을 가려도 업종이 보이는지로 구분할 수 있습니다. 아래 예의 지역과 숫자는 이해를 돕기 위해 지어낸 것입니다.
| 업종 | 나쁜 예 | 좋은 예 |
|---|---|---|
| 인테리어 | 공간에 가치를 더합니다 | 강서구 아파트 욕실·주방 공사, 견적부터 보수까지 한 팀이 맡습니다 |
| 학원 | 꿈을 향한 첫걸음 | 목동 중학생 수학, 한 반 여덟 명이라 숙제까지 봐 드립니다 |
| 세무 사무소 | 신뢰와 정직의 파트너 | 음식점·카페 사장님의 장부 정리와 신고를 맡습니다 |
| 펜션 | 자연 속 힐링 공간 | 가평 계곡 바로 앞 독채, 객실마다 바비큐 자리가 따로 있습니다 |
좋은 예를 읽으면 손님이 그 자리에서 '나한테 맞는 곳인지'를 판단할 수 있습니다. 맞지 않는 사람이 일찍 나가는 것도 손해가 아닙니다. 남은 사람은 이미 관심이 있는 사람이라 문의로 이어지기 쉽습니다.
버튼 문구는 눌렀을 때 일어날 일을 씁니다
버튼에는 '확인', '더보기'처럼 뜻이 넓은 말보다 누르면 무엇이 되는지를 적습니다. 손님은 버튼을 누르기 전에 '누르면 바로 전화가 걸리나, 글을 써야 하나'를 궁금해합니다. 그 답이 버튼 위에 적혀 있으면 망설임이 줄어듭니다.
| 바꾸기 전 | 바꾼 뒤 | 좋아지는 점 |
|---|---|---|
| 문의 | 견적 문의 남기기 | 글을 남기는 곳임을 압니다 |
| 클릭하세요 | 전화로 바로 상담 | 누르면 전화가 걸린다는 걸 압니다 (버튼에 전화 연결을 걸어 둔 경우) |
| 더보기 | 빈 객실 보기 | 무엇을 보게 될지 압니다 |
| Submit | 상담 신청 보내기 | 영어를 몰라도 읽힙니다 |
첫 화면에서 눈에 띄게 칠하는 버튼은 하나로 정합니다. 버튼이 서너 개 같은 크기로 나란히 있으면 손님은 무엇을 먼저 눌러야 할지 고르다 나갑니다. 다른 버튼이 필요하면 테두리만 있는 작은 버튼으로 둡니다. 버튼을 어떤 색으로 칠할지는 홈페이지 색과 글꼴 고르는 법의 강조색 이야기를 참고하세요.
표어와 첫 화면 제목은 다릅니다
회사에 오래 써 온 표어가 있다면 그대로 큰 제목에 넣고 싶어집니다. 표어는 이미 회사를 아는 사람에게 느낌을 전하는 말이고, 첫 화면 제목은 처음 온 사람에게 하는 일을 알리는 말입니다. 표어를 쓰고 싶다면 큰 제목 위의 작은 글씨로 두고, 큰 제목은 하는 일을 적는 한 문장으로 둡니다. 이렇게 하면 회사의 느낌은 지키면서 처음 온 사람도 하는 일을 바로 알아봅니다.
다섯 명에게 보여 주는 5초 확인
문구가 잘 읽히는지는 써 본 사람보다 처음 보는 사람이 정확히 압니다. 가족이나 지인에게 휴대폰으로 첫 화면을 잠깐 보여 주고 물어봅니다.
- 회사를 잘 모르는 사람 다섯 명을 고릅니다.
- 휴대폰으로 첫 화면을 5초쯤 보여 주고 화면을 끕니다.
- "여기는 무엇을 하는 곳이에요?", "다음에 뭘 누르면 돼요?" 두 가지를 묻습니다.
- 예를 들어 다섯 명 중 네 명 이상이 맞게 답하면 그대로 두고, 두세 명에 그치면 큰 제목을 다시 씁니다.
자주 빠뜨리는 것
- 지역 이름 — 동네에서 손님을 받는 가게라면 큰 제목이나 보조 문장에 지역을 넣습니다. 멀리 사는 사람은 바로 알아보고, 가까운 사람은 더 오래 봅니다.
- 휴대폰에서 줄이 끊기는 자리 — PC에서 한 줄이던 제목이 휴대폰에서는 서너 줄이 되고, 줄 끝에 한두 글자만 남기도 합니다. 올리기 전에 꼭 휴대폰으로 열어 봅니다.
- 사진 위 글자 — 밝은 사진 위에 흰 글자를 얹으면 읽히지 않습니다. 사진을 조금 어둡게 덮거나 글자 뒤에 바탕을 깔아, 사진도 살리고 글자도 또렷하게 만듭니다.
- 넘어가는 사진마다 바뀌는 문구 — 사진이 넘어갈 때마다 제목이 바뀌면 손님은 첫 문장만 보고 나머지는 놓칩니다. 가장 중요한 문장 하나를 고정해 둡니다.
- 광고와 다른 말 — 광고에서 '욕실 공사'를 보고 들어왔는데 첫 화면에 다른 말이 나오면 잘못 왔다고 느낍니다. 광고와 첫 화면을 맞추는 방법은 광고 시작 전 홈페이지 점검에서 다룹니다.
올리기 전에 확인할 것
문구를 다 썼다면 아래 항목을 하나씩 짚어 봅니다. 회사 소개 글이나 사진처럼 첫 화면 뒤에 올 자료는 홈페이지 만들 때 준비할 자료에서 함께 준비할 수 있습니다.
팬텀디자인 구독에서는
팬텀디자인 구독에는 업종 맞춤 디자인, PC·모바일 반응형, 제작 중 수정이 포함되어 있습니다. 이 글의 방법으로 큰 제목과 버튼 문구를 정해 두면 제작 중에 휴대폰 화면에서 줄바꿈을 보며 수정을 요청할 수 있고, 오픈 뒤 문구를 바꾸고 싶을 때는 월 1회 무상 유지보수를 이용할 수 있습니다. 구독 조건은 요금 안내에서 확인할 수 있습니다. 다른 업종의 첫 화면은 작업 사례에서 볼 수 있습니다.
정리하면
첫 화면 문구는 꾸미는 글이 아니라 안내하는 글입니다. 무엇을 하는 곳인지 한 문장, 다른 곳과 다른 점 한 문장, 할 일이 보이는 버튼 하나를 먼저 갖추면 처음 온 손님도 망설이지 않고 다음 화면으로 넘어갑니다.
자주 묻는 질문
홈페이지 첫 화면 문구는 몇 줄이 좋나요?
큰 제목 한 문장, 보조 문장 한두 문장, 버튼 하나면 충분합니다. 큰 제목은 휴대폰에서 두 줄 안에 들어오게 씁니다.
회사 표어를 첫 화면 제목으로 써도 되나요?
표어는 큰 제목 위의 작은 글씨로 두고, 큰 제목에는 하는 일을 적는 편이 처음 온 사람에게 잘 읽힙니다.
버튼 문구는 어떻게 쓰나요?
'확인', '더보기' 대신 '전화로 바로 상담', '빈 객실 보기'처럼 누르면 무엇이 되는지를 적습니다. 눈에 띄게 칠하는 버튼은 하나로 정합니다.
문구가 잘 썼는지 어떻게 확인하나요?
회사를 모르는 사람 다섯 명에게 휴대폰으로 첫 화면을 5초쯤 보여 주고, 무엇을 하는 곳인지와 다음에 무엇을 누를지 물어봅니다.
첫 화면에 지역 이름을 넣어야 하나요?
동네에서 손님을 받는 가게라면 넣는 편이 좋습니다. 가까운 손님은 자기에게 맞는 곳임을 바로 알아봅니다.
