퍼스널 브랜딩 홈페이지를 열었을 때 방문자가 가장 먼저 보는 것은 메인 화면 상단의 한 문장과 그 옆이나 배경에 깔린 이미지입니다. 이 두 가지가 “여기가 내가 찾던 곳인가”를 판단하는 첫 단서가 됩니다. 스크롤을 내려 강의 목록을 보기 전에 이미 머무를지 떠날지가 정해집니다. 그런데 많은 사이트가 첫 문장을 ‘환영합니다’로 때우고, 이미지는 무료 스톡 사진 한 장만 올려두고 있습니다. 이 글에서는 첫 문장을 어떻게 쓰고, 대표 이미지를 어떤 기준으로 골라야 방문자가 아래로 스크롤하게 되는지 정리합니다.
첫 화면에서 방문자가 판단하는 세 가지
방문자는 메인 화면을 보고 무의식적으로 세 가지를 확인합니다.
- 이 사람이 무엇을 가르치는지
- 나한테 해당하는 내용인지
- 다음에 뭘 하면 되는지 — 강의 보기, 상담 신청 등
첫 문장과 이미지가 이 세 가지 중 하나라도 답하지 못하면 이탈률이 올라갑니다. 반대로 세 가지를 한 화면 안에 담으면 스크롤을 유도하는 별도 장치가 크게 필요하지 않습니다. 화려한 애니메이션보다 명확한 첫 문장이 훨씬 효과적입니다.
첫 문장에 넣어야 할 세 가지 요소
좋은 첫 문장에는 세 가지 요소가 들어갑니다.
- 대상 — 누구를 위한 것인지
- 결과 — 무엇을 얻게 되는지
- 형태 — 어떤 방식으로 배우는지
흔히 쓰는 문장과 고친 예시를 비교하면 차이가 분명합니다.
- 수정 전: “환영합니다. 김OO의 홈페이지입니다.” → 무엇을 하는 곳인지 알 수 없음
- 수정 전: “최고의 교육을 제공합니다” → 누구를 위한 것인지, 무슨 교육인지 모름
- 수정 후: “영어 회화가 막히는 직장인을 위한 1:1 스피킹 수업” → 대상(직장인) + 결과(스피킹) + 형태(1:1 수업)
- 수정 후: “핸드메이드 가죽 공예를 배우고 싶은 분을 위한 주말 원데이 클래스” → 대상 + 결과(가죽 공예) + 형태(주말 원데이)
문장 길이는 20~40자가 적당합니다. 모바일 화면에서 두 줄을 넘기면 이미지와 겹치거나 잘려서 핵심이 흐려집니다. 문장이 길어질 때는 보조 설명을 따로 분리하는 편이 낫습니다.
퍼스널 브랜딩 홈페이지에서 첫 문장이 특히 중요한 이유
입점형 플랫폼에서는 카테고리와 검색 결과가 맥락을 대신 설명해 줍니다. “영어 회화” 카테고리 안에 있으면 제목만 봐도 어떤 강의인지 짐작할 수 있습니다. 그러나 자체 홈페이지에는 그런 맥락이 없습니다. 검색이나 SNS 링크를 타고 처음 들어온 사람은 이 사이트가 무엇을 파는 곳인지, 심지어 강의 사이트인지조차 모릅니다.
첫 문장이 그 맥락을 즉시 만들어야 합니다. “나는 누구이고 무엇을 가르치는 사람이다”를 3초 안에 전달하지 못하면, 아무리 좋은 강의가 아래에 있어도 거기까지 도달하지 않습니다.
대표 이미지를 고르는 네 가지 기준
첫 문장 옆이나 배경에 들어가는 대표 이미지도 글자만큼 중요합니다. 다음 네 가지를 기준으로 고릅니다.
- 본인이 직접 찍은 사진을 쓴다. 스톡 사진은 깔끔하지만 “이 사람이 진짜 가르치는 사람인가”라는 신뢰를 주지 못합니다. 수업 장면, 작업 중인 모습, 완성된 작품을 들고 있는 사진처럼 실제 활동이 담긴 이미지가 좋습니다.
- 가르치는 분야가 한눈에 보여야 한다. 요리 강사라면 조리 중인 사진, 필라테스 강사라면 동작 시범 사진이 맞습니다. “이 사람이 뭘 가르치는지” 이미지만 봐도 짐작할 수 있어야 합니다. 증명사진 스타일의 프로필 사진은 정보를 주지 못합니다.
- 글자와 겹쳐도 읽히는 구도여야 한다. 메인 화면에서는 이미지 위에 텍스트가 올라가는 경우가 많습니다. 배경이 복잡하거나 사람 얼굴 한가운데에 글자가 올라가면 둘 다 망가집니다. 한쪽에 여백이 있는 구도의 사진을 고르거나, 반투명 배경을 깔아 글자 가독성을 확보합니다.
- 가로 비율, 고해상도로 준비한다. 메인 배너는 보통 가로로 넓은 직사각형입니다. 세로 사진을 넣으면 양옆이 잘리거나 여백이 생깁니다. 가로 비율(16:9 또는 그 이상) 사진을 준비하고, 해상도는 가로 1,600px 이상이면 대부분의 화면에서 깨지지 않습니다.
문장과 이미지가 따로 노는 경우를 점검하는 법
첫 문장은 “1:1 영어 회화 수업”인데 이미지는 대형 강의실 전경 사진이면 메시지가 흐려집니다. 반대로 이미지는 아이와 함께 만들기를 하는 장면인데 문장에는 “성인 대상 프리미엄 클래스”라고 써 있으면 혼란을 줍니다.
점검 방법은 간단합니다.
- 문장을 가리고 이미지만 봤을 때, 무엇을 하는 곳인지 짐작이 되는가
- 이미지를 가리고 문장만 읽었을 때, 어떤 장면이 떠오르는가
- 둘이 가리키는 방향이 같은가
하나라도 어긋나면 둘 중 하나를 바꿉니다. 보통은 이미지를 문장에 맞추는 쪽이 수정 비용이 적습니다. 사진을 새로 찍기 어렵다면, 같은 사진이라도 크롭 영역을 바꿔서 문장과 어울리는 부분만 보여주는 것도 방법입니다.
첫 문장 아래에 놓으면 좋은 보조 요소
첫 문장과 이미지만으로 부족하다고 느낄 때, 바로 아래에 놓을 수 있는 요소 두 가지가 있습니다.
- 한 줄 보조 설명: 첫 문장이 “누구를 위한 무엇”을 담당한다면, 보조 설명은 “몇 회, 어떤 방식, 어디서”처럼 구체적 조건을 적습니다. 폰트 크기를 첫 문장보다 작게 해서 시각적 위계를 구분합니다.
- 행동 유도 버튼: “강의 보기”, “클래스 둘러보기”처럼 다음 행동을 안내하는 버튼 하나를 놓습니다. 버튼 문구도 “자세히 보기”보다는 “수업 목록 보기”처럼 누르면 무엇이 나오는지 예측할 수 있게 씁니다.
이 두 가지를 넣더라도 메인 화면 상단은 한 화면 안에 끝나야 합니다. 요소가 많아져서 스크롤해야 첫 문장이 보인다면, 넣지 않은 것보다 못합니다.
런모아로 메인 화면 첫 문장과 대표 이미지를 설정하는 방법
런모아의 페이지 에디터에서 메인 화면 상단 영역의 텍스트와 배경 이미지를 직접 수정할 수 있습니다. 첫 문장을 입력하고, 준비한 가로 비율 이미지를 업로드하면 바로 반영됩니다. 글자 위치와 크기도 에디터 안에서 조정할 수 있어 이미지와 텍스트가 겹치는 문제를 미리 확인하면서 작업할 수 있습니다.
강의 사이트 개설부터 메인 화면 편집까지의 전체 과정이 궁금하다면 런모아 강의 사이트 만들기 페이지에서 흐름을 확인할 수 있습니다.
#퍼스널브랜딩 #전문가홈페이지 #강사홈페이지 #메인화면구성 #대표이미지 #첫인상설계 #온라인강의 #홈페이지제작 #1인창업 #런모아
