홈페이지 첫 화면에는 무엇을 하는 곳인지, 누구를 위한 곳인지, 다음에 어디로 가면 되는지 세 가지가 스크롤 없이 읽히면 충분합니다. 인사말, 공지, 서비스 전체 목록처럼 관심이 생긴 뒤에 읽어도 되는 내용은 아래 구간으로 내리는 편이 좋습니다.
첫 화면은 사업의 모든 것을 보여 주는 곳이라기보다, 처음 온 방문자가 이 사이트를 계속 볼지 정하는 곳에 가깝습니다. 그래서 무엇을 더 넣을지보다 무엇을 남길지를 먼저 정하면 구성이 쉬워집니다.
첫 화면은 왜 세 가지만으로 충분한가요?
처음 온 방문자는 검색 결과, 지도, 소개받은 링크 등 여러 경로로 들어오고, 첫 화면에서 가장 먼저 "여기가 내가 찾던 곳인가"를 확인합니다. 이 판단에 필요한 정보는 하는 일과 대상입니다. 그리고 맞는 곳이라고 느꼈을 때 어디를 눌러야 하는지가 보여야 다음 화면으로 넘어갑니다.
이 세 가지가 보이지 않으면 방문자는 메뉴를 하나씩 열어 보며 답을 찾아야 합니다. 반대로 세 가지가 분명하면 나머지 정보는 아래 구간과 다른 메뉴에서 차근차근 읽어도 됩니다.
세 가지는 각각 어떻게 쓰면 되나요?
무엇을 하는 곳인지: 업종과 서비스가 드러나는 한 문장
첫 문장은 회사의 가치나 다짐보다 하는 일을 말하는 편이 이해가 빠릅니다. 업종 이름이나 대표 서비스가 문장 안에 들어가 있는지 확인하세요. 회사의 철학을 담은 문장을 쓰고 싶다면 하는 일을 말한 다음 줄이나 아래 구간에 두면 됩니다.
누구를 위한 곳인지: 대상과 차이를 담은 한 줄
두 번째 줄에는 누구를 위한 서비스인지, 그리고 다른 곳과 무엇이 다른지를 짧게 적습니다. 여기서 차이는 확인할 수 있는 사실이어야 합니다. 근거를 보여 줄 수 없는 순위, 최고, 유일 같은 표현은 신뢰를 오히려 떨어뜨릴 수 있어 권하지 않습니다.
다음에 어디로 가면 되는지: 두 갈래 버튼
홈페이지는 여러 서비스를 소개하는 곳이라 방문자마다 원하는 다음 행동이 다릅니다. 바로 상담하려는 사람을 위한 버튼과, 먼저 둘러보려는 사람을 위한 버튼을 함께 두면 둘 다 길을 잃지 않습니다. 하나의 제안에 집중하는 랜딩페이지라면 행동을 하나로 모으는 편이 어울리는 것과 다른 점입니다.
모호한 문장은 어떻게 고치나요?
아래는 이해를 돕기 위한 가상의 문장이며, 실제 고객 사례가 아닙니다. 사무실 청소 업체를 예로 들어 보겠습니다.
- 무엇을: "고객과 함께 성장하는 기업"보다 "사무실 이전 청소와 정기 청소를 합니다"가 하는 일을 바로 알려 줍니다.
- 누구에게: "모든 분께 최선을 다합니다"보다 "직원 열 명 안팎의 작은 사무실을 위해"가 대상을 분명히 합니다.
- 다음 행동: "자세히 보기" 하나보다 "방문 견적 문의"와 "청소 범위 보기"처럼 눌렀을 때 무엇이 나오는지 알 수 있는 이름이 좋습니다.
고친 문장을 점검할 때는 처음 온 사람이 이 문장만 읽고 나에게 맞는 곳인지 판단할 수 있는지 스스로 물어보세요. 업계에서 익숙한 말이라도 방문자에게 낯선 용어라면 쉬운 말로 바꿉니다.
첫 화면에서 아래로 내려도 되는 것은 무엇인가요?
다음 요소는 중요하지 않아서가 아니라, 관심이 생긴 뒤에 읽을 때 더 잘 전달되는 내용입니다.
- 대표 인사말과 연혁: 회사 소개 구간이나 별도 화면으로 옮깁니다.
- 여러 개의 공지와 이벤트: 소식 구간이나 별도 화면에 모읍니다. 꼭 알려야 할 공지 하나가 있다면 첫 화면의 세 가지를 가리지 않는 작은 띠로 둡니다.
- 서비스 전체 목록: 첫 화면에는 대표 서비스를 말하고, 전체 목록은 바로 아래 서비스 안내 구간에서 보여 줍니다.
- 핵심 문장이 바뀌는 자동 슬라이드: 여러 장이 자동으로 넘어가면 방문자가 문장을 다 읽기 전에 화면이 바뀔 수 있습니다. 하는 일을 말하는 핵심 문장은 한 장에 고정하고, 여러 장면은 아래 구간에서 보여 주는 방법이 있습니다.
휴대폰 첫 화면에서는 무엇이 달라지나요?
컴퓨터에서는 문장과 이미지가 나란히 놓이지만, 휴대폰에서는 보통 위아래로 쌓입니다. 이때 큰 이미지가 문장보다 위에 오면 첫 화면에 그림만 보이고 하는 일을 말하는 문장이 아래로 밀릴 수 있습니다.
휴대폰으로 홈페이지를 직접 열어 스크롤하지 않은 상태에서 세 가지가 보이는지 확인하세요. 제목이 어색한 곳에서 줄바꿈되지 않는지, 버튼을 한 손으로 누를 수 있는지도 함께 봅니다. 모바일 점검 방법은 우리 홈페이지가 모바일에서 불편한지 어떻게 확인하나요?에서 더 자세히 다룹니다.
이미지나 영상은 어떻게 고르면 되나요?
첫 화면의 이미지는 문장을 돕는 역할이면 충분합니다. 실제 공간, 작업 모습, 제공하는 결과물처럼 하는 일을 보여 주는 장면이 문장과 잘 어울립니다. 장식용 그림이 문장보다 눈에 띄면 오히려 무엇을 하는 곳인지 흐려질 수 있습니다.
중요한 문장은 이미지 안에 글자로만 넣지 말고 화면의 글로도 적어 두세요. 화면 크기에 따라 이미지 속 글자가 작아지거나 잘릴 수 있습니다. 영상을 쓴다면 휴대폰에서 직접 열어 문장과 버튼이 가려지지 않는지 확인하고, 사진과 영상은 사용 권한이 확인된 것만 씁니다.
뉴클리어웹이 첫 화면을 정하는 방식
뉴클리어웹은 신규 홈페이지와 랜딩페이지 제작을 상담합니다. 홈페이지 제작에서는 페이지 수를 먼저 정하기보다 무엇을 설명하고 어떤 행동으로 연결할지부터 살피고, 고객 자료와 인터뷰를 바탕으로 문구, 정보 순서, 디자인, 모바일 사용성, 문의 동선을 함께 설계한다고 안내합니다. 진행 과정에서는 정리한 정보 순서와 문장을 확인받은 뒤 주요 화면의 디자인 방향을 정하며, 사실관계와 최종 표현은 고객 확인 후 확정합니다.
뉴클리어웹 상담 페이지에도 "방문자에게 가장 먼저 전하고 싶은 내용은 무엇인가요?"라는 질문이 있습니다. 첫 화면에 남길 한 문장이 아직 정리되지 않았더라도 완성된 원고 없이 상담을 시작할 수 있습니다.
자세한 내용은 홈페이지 제작 안내에서 볼 수 있습니다. 상담은 무료 상담 신청하기 페이지에서 문의 방법을 확인하시거나 전화 010-5611-8632로 연락해 주세요.
자주 묻는 질문
서비스가 여러 개면 첫 화면에 모두 나열해야 하나요?
모두 나열하기보다 사업 전체를 묶는 한 문장과 대표 서비스를 첫 화면에 두고, 서비스별 안내는 바로 아래 구간이나 메뉴로 나누는 편이 읽기 쉽습니다. 방문자가 자기에게 맞는 서비스를 찾아갈 수 있도록 둘러보기 버튼을 함께 둡니다.
첫 화면에 회사 소개 영상을 크게 넣으면 안 되나요?
넣을 수 있습니다. 다만 영상만으로 하는 일이 전달된다고 가정하지 말고, 하는 일을 말하는 문장과 버튼을 화면의 글로 함께 두세요. 휴대폰에서 영상이 문장을 가리지 않는지도 직접 확인합니다.
첫 화면 문장을 바꾸면 문의가 늘어나나요?
늘어난다고 말할 수 없습니다. 첫 화면을 정리하는 목적은 처음 온 방문자가 맞는 곳인지 판단하기 쉽게 만드는 것이며, 문의는 서비스 내용, 유입 경로, 시기 등 여러 요인의 영향을 받습니다.
