퍼스널 브랜드 홈페이지를 만들고 나면 PC 화면에서 확인하고 끝내는 경우가 많습니다. 하지만 방문자 대부분은 모바일로 들어옵니다. 인스타그램 프로필 링크, 카카오톡으로 보낸 주소, 검색 결과 클릭 모두 스마트폰에서 일어납니다. PC에서 정성껏 배치한 레이아웃이 모바일에서는 무너져 있거나, 글자가 너무 작거나, 버튼이 눌리지 않는 일이 흔합니다. 모바일 화면을 체계적으로 점검하고 어디부터 고칠지 순서를 잡는 방법을 정리합니다.
퍼스널 브랜드 홈페이지를 모바일에서 먼저 봐야 하는 이유
편집은 PC에서 하지만, 방문은 모바일에서 일어납니다. SNS 프로필에 걸어둔 링크를 누르는 사람, 수강생에게 카톡으로 보낸 사이트 주소를 여는 사람, 검색 결과에서 내 이름을 눌러 들어오는 사람 모두 스마트폰을 쓰고 있을 가능성이 높습니다.
PC 화면에서는 여백이 넉넉하고 이미지가 크게 보이지만, 모바일에서는 화면 폭이 좁아지면서 텍스트가 길어지고 이미지가 잘리고 버튼이 작아집니다. 이 차이를 모르고 두면 방문자는 첫 화면만 보고 나갑니다.
첫 화면에서 확인할 세 가지
모바일에서 사이트를 열었을 때 스크롤 없이 보이는 영역이 첫인상입니다. 여기서 세 가지를 확인합니다.
- 내가 누구인지, 무엇을 가르치는지 한 줄이 보이는가. 로고나 배경 이미지만 크게 나오고 소개 문구가 스크롤 아래에 밀려 있으면 방문자는 이 사이트가 무엇인지 파악하기 전에 떠납니다.
- 다음 행동을 유도하는 버튼이 보이는가. ‘강의 보기’, ‘수업 소개’ 같은 버튼이 첫 화면 안에 있어야 합니다. 스크롤해야 나오는 버튼은 절반 이상이 보지 못합니다.
- 이미지가 잘리거나 늘어지지 않는가. PC용으로 만든 가로형 배너가 모바일에서 양쪽이 잘리거나 세로로 눌려 보이는 경우가 잦습니다. 모바일에서 직접 열어 눈으로 확인합니다.
텍스트와 버튼 크기 점검
모바일에서 읽기 힘든 사이트는 글자 크기와 버튼 크기에 문제가 있는 경우가 대부분입니다.
- 본문 글자 크기는 14px 이상. 그보다 작으면 손가락으로 확대해야 읽을 수 있고, 그 순간 사이트를 신뢰하기 어렵다는 인상을 줍니다.
- 줄 간격은 글자 크기의 1.5배 이상. 줄이 빽빽하면 긴 소개글을 끝까지 읽지 않습니다.
- 버튼 높이는 44px 이상. 이보다 작으면 손가락으로 정확히 누르기 어렵습니다. 특히 결제 버튼, 수강 신청 버튼이 작으면 전환이 떨어집니다.
- 링크와 링크 사이 간격. 목록에서 링크가 붙어 있으면 의도하지 않은 항목을 누르게 됩니다. 항목 사이에 충분한 여백을 둡니다.
이미지와 로딩 속도
모바일은 와이파이가 아닌 셀룰러 데이터를 쓰는 경우도 많아서 이미지 용량이 곧 로딩 시간입니다.
- 이미지 한 장당 300KB 이하를 기준으로 잡습니다. 고해상도 사진을 그대로 올리면 한 장에 2~5MB가 되어 페이지 전체가 느려집니다. 올리기 전에 이미지 압축 도구로 용량을 줄입니다.
- 가로로 긴 이미지 안에 텍스트를 넣은 경우. PC에서는 잘 읽히지만 모바일에서는 글자가 너무 작아집니다. 이미지 안 텍스트가 모바일에서 읽을 수 있는 크기인지 반드시 확인합니다.
- 페이지를 열었을 때 빈 화면이 3초 이상 보이면 이미지 용량을 줄이거나 개수를 줄여야 합니다. 기다리지 않고 뒤로 가기를 누르는 사람이 많습니다.
메뉴와 탐색 흐름
모바일에서는 보통 상단 햄버거 메뉴(≡)를 눌러 페이지를 이동합니다. 이 메뉴가 직관적이어야 방문자가 원하는 페이지에 도달합니다.
- 메뉴 항목은 5개 이내로 줄입니다. 많을수록 선택이 어렵습니다. ‘소개’, ‘강의’, ‘후기’, ‘문의’ 정도면 충분합니다.
- 강의 목록에서 강의 상세, 상세에서 결제까지 동선을 직접 따라가 봅니다. 중간에 페이지가 깨지거나 버튼이 안 보이는 구간이 없는지 확인합니다.
- 뒤로 가기를 눌렀을 때 이전 페이지로 돌아가는지. 간혹 팝업이나 슬라이드 메뉴 때문에 뒤로 가기가 엉뚱한 곳으로 보내는 경우가 있습니다.
수정 순서: 어디부터 고칠 것인가
한꺼번에 모든 것을 고치려 하면 시간이 오래 걸리고 중간에 멈추게 됩니다. 아래 순서대로 한 단계씩 끝냅니다.
- 1단계 — 첫 화면. 소개 문구와 행동 유도 버튼이 스크롤 없이 보이도록 배치합니다. 이탈률에 가장 직접적으로 영향을 주는 영역입니다.
- 2단계 — 강의 상세 페이지. 구매를 결정하는 페이지이므로 텍스트 크기, 이미지 상태, 결제 버튼 위치를 점검합니다.
- 3단계 — 결제 버튼. 모든 페이지에서 결제·수강 신청 버튼이 손가락으로 누르기 편한 크기인지 확인합니다.
- 4단계 — 메뉴 정리. 불필요한 항목을 빼고, 방문자가 가장 많이 찾는 페이지를 위로 올립니다.
- 5단계 — 이미지 용량 줄이기. 느린 페이지를 찾아 이미지를 압축하거나 개수를 줄입니다.
각 단계를 마칠 때마다 자신의 스마트폰으로 직접 열어 확인합니다. PC 브라우저의 모바일 미리보기 기능도 쓸 수 있지만, 실제 기기에서 손가락으로 조작해 봐야 놓치는 부분이 줄어듭니다.
런모아로 모바일 화면을 정비하는 방법
런모아의 페이지 에디터에서 각 영역을 수정하면 모바일 화면에도 바로 반영됩니다. 첫 화면의 소개 문구, 강의 소개 글, 버튼 배치를 에디터 안에서 바꾸고 저장한 뒤 스마트폰으로 열어 확인하면 됩니다. 강의 상세 페이지는 커리큘럼과 수강 기간을 설정해 두면 구매자가 보는 화면이 자동으로 구성되므로, 별도로 모바일 레이아웃을 만들 필요 없이 내용만 채우면 됩니다.
사이트 개설부터 페이지 편집, 강의 등록, 결제 연결까지 한 곳에서 진행할 수 있습니다. 런모아 강의 사이트 만들기 페이지에서 어떤 화면을 만들 수 있는지 미리 확인해 보세요.
#퍼스널브랜드홈페이지 #퍼스널브랜딩 #모바일최적화 #강사홈페이지 #1인창업 #온라인강의 #강의사이트 #홈페이지점검 #런모아
