랜딩 페이지 공개 전 체크리스트
Finipage 가이드 · HTML 파일을 코드 없이 고치는 편집기. Finipage 열기
한 장짜리 사이트를 공개하는 데는 1분이면 충분합니다. 그런데 일주일 뒤에 전화번호 한 자리가 틀렸다거나 "상담 신청" 버튼이 아무 데도 연결되지 않았다는 걸 알게 되면, 그동안 놓친 방문자는 되돌릴 수 없습니다. 아래는 주소를 알리기 전에 확인할 항목입니다. 영역별로 묶어 두었으니 동료와 나눠서 봐도 됩니다.
검색과 공유에 보이는 정보
- 페이지 제목.
<title>의 글자는 브라우저 탭과 검색 결과의 파란 제목줄에 그대로 나옵니다. 템플릿에는 "Landing Page"나 "Untitled"가 남아 있는 경우가 많습니다. 상호와 하는 일을 함께 씁니다. 구글은 글자 수가 아니라 표시 폭으로 제목을 자르므로, 한글이라면 30자 안팎으로 맞추는 편이 안전합니다. Finipage에서는 오른쪽 속성 패널의 문서 항목에 있는 제목 칸입니다. - 설명문(meta description). 검색 결과에서 제목 아래 붙는 한두 문장 요약입니다. 검색엔진이 본문에서 직접 골라 쓸 때도 있지만, 잘 쓴 설명문이 가장 자주 쓰입니다. 누구를 위한 페이지인지 꾸밈없이 적고, 한글 80자 안팎이면 적당합니다. Finipage 문서 항목에서 제목 바로 옆에 있습니다.
- 파비콘. 브라우저 탭에 뜨는 작은 아이콘입니다. 없으면 브라우저 기본 아이콘이 나오고, 브라우저가 그래도
/favicon.ico를 요청하기 때문에 서버 기록에 404 오류가 계속 쌓입니다.<head>에<link rel="icon" href="favicon.png">같은 한 줄을 넣어야 합니다. - 공유 이미지(og:image). 카카오톡이나 슬랙에 링크를 붙여 넣으면 미리보기 카드가 뜨는데, 그 그림이
og:image메타 태그에서 옵니다. 없으면 빈 카드나 페이지 속 아무 이미지가 나옵니다. 1200×630 픽셀 이미지를 쓰고, 상대 경로가 아니라https://로 시작하는 전체 주소를 적습니다.
파비콘과 og:image는 Finipage에 편집 칸이 없으므로 VS Code나 메모장 같은 텍스트 편집기로 넣고, Finipage의 HTML 소스 보기로 잘 들어갔는지 확인합니다. 넣을 태그와 미리보기 카드 시험 방법은 파비콘과 링크 미리보기 설정하기에 정리했습니다.
문구와 내용
- 남아 있는 견본 문구. "Lorem ipsum", "회사명", "홍길동", "example.com", "010-0000-0000", "서비스 제목" 같은 글자를 찾습니다. 템플릿과 AI가 만든 페이지에는 이런 문구가 곳곳에 남아 있습니다. 브라우저에서 Ctrl+F로 하나씩 검색하면 금방 찾을 수 있습니다.
- 연락처. 전화번호, 이메일, 주소, 영업시간은 기억에 의존하지 말고 명함이나 사업자 정보와 대조합니다. 맨 아래 푸터도 꼭 봅니다. 다른 사람이 채웠거나 아예 비어 있는 경우가 많습니다.
- 맞춤법과 숫자. 한 번은 소리 내어 천천히 읽어 봅니다. 가격, 날짜, 퍼센트는 특히 주의해야 합니다. 오타보다 틀린 숫자가 더 큰 문제를 만듭니다. 맞춤법 검사기도 한 번 돌려 보십시오.
- 금방 낡는 날짜. "2024 이벤트" 배너나 몇 년 지난 저작권 연도가 있으면 관리하지 않는 사이트처럼 보입니다.
Finipage에서는 글자를 더블클릭해 고치고 Esc로 마칩니다. 소스에서 고치는 편이 익숙하다면 텍스트 편집기에서 해당 문장을 검색해 바꿉니다. 자세한 방법은 AI가 만든 랜딩 페이지 고치기에 정리했습니다.
링크와 버튼
몇 개만 골라 보지 말고 모든 링크와 버튼을 실제로 눌러 봅니다. 살펴볼 것은 이렇습니다.
- 연결 주소가
#이거나 비어 있는 버튼. 겉보기엔 멀쩡하지만 눌러도 아무 일이 없습니다. #pricing같은 구역 링크가 해당 구역의id와 맞지 않는 경우. 구역 이름을 바꾸거나 지운 뒤에 자주 생깁니다.mailto:링크. 눌러서 메일 프로그램이 올바른 주소로 열리는지 확인합니다. PC에 메일 프로그램을 설정하지 않은 방문자도 많으니 이메일 주소는 글자로도 보여 줍니다.tel:링크.tel:02-1234-5678처럼 띄어쓰기 없이 적고, 휴대폰에서 눌렀을 때 전화 앱이 뜨는지 확인합니다.- SNS, 예약 페이지, 지도 링크가 여전히 템플릿 제작자의 계정을 가리키는 경우.
Finipage에서 링크를 선택하면 오른쪽 링크 칸에 주소가 보입니다. 이 칸은 https:// 주소와 #구역 연결용입니다. mailto:와 tel: 링크는 HTML 소스 보기로 확인하고, 바꿔야 한다면 텍스트 편집기에서 고칩니다.
이미지
- 파일 용량. 휴대폰이나 이미지 사이트에서 받은 사진은 3~8MB인 경우가 흔합니다. 한 장에 수백 KB 이하, 작은 아이콘은 그보다 훨씬 작게 맞춥니다. 표시되는 폭에 맞게 줄이고(화면 가득 차는 배너도 1600픽셀이면 충분합니다) 온라인 이미지 압축 서비스나 이미지 편집 프로그램의 웹용 내보내기 기능으로 압축합니다. WebP나 압축한 JPEG 모두 괜찮습니다. Finipage에는 자르기·압축 기능이 없지만, 줄인 파일을 기존 이미지 위에 끌어다 놓으면 바로 바뀝니다.
- 대체 텍스트(alt). 의미 있는 이미지에는
alt="서울 사무실의 직원 네 명"처럼 무엇이 보이는지 적은alt속성이 있어야 합니다. 화면 낭독기가 읽어 주고, 이미지가 안 뜰 때 대신 표시됩니다. 꾸밈용 이미지는alt=""로 비워 둡니다. alt는 텍스트 편집기에서 넣습니다. - 안 뜨는 이미지. 내 컴퓨터에서는 보이는데 온라인에서 안 보인다면 대개 경로 문제입니다. HTML 파일에서 이미지가 안 보일 때를 참고하십시오.
모바일과 브라우저
- 휴대폰부터. 메신저와 SNS로 주소를 퍼뜨리는 소규모 사업체 페이지는 휴대폰 방문자가 절반을 넘는 경우가 많습니다. 글자 크기, 버튼 크기, 옆으로 밀리는 화면을 확인합니다. 방법은 HTML 페이지가 휴대폰에서 제대로 보이는지 확인하는 법에 있습니다. Finipage의 모바일(390px)·태블릿(768px) 미리보기로 먼저 훑어보면 빠릅니다.
- 여러 브라우저. Chrome, Edge, Firefox, 그리고 가능하면 아이폰 사파리와 삼성 인터넷으로 열어 봅니다. 글꼴이 엉뚱하게 바뀌거나, 레이아웃이 무너지거나, 상단 고정 메뉴가 내용을 가리는 곳이 없는지 봅니다.
폼과 법적 고지
- 폼은 받는 곳이 있어야 합니다. HTML 폼만으로는 아무것도 전달되지 않습니다.
action주소 뒤에 서버나 폼 처리 서비스가 있어야 합니다. Finipage는 폼 제출을 처리하지 않으므로, 템플릿에 문의 폼이 있다면 폼 처리 서비스와 연결하거나 이메일 주소와 전화번호를 눈에 띄게 적는 쪽으로 바꿉니다. 연결했다면 시험 삼아 한 건 보내 실제로 도착하는지 확인합니다. 방법별 장단점은 정적 HTML 페이지의 문의 폼에서 비교했습니다. - 개인정보 처리방침. 이름, 이메일, 전화번호를 받는다면 「개인정보 보호법」에 따라 무엇을, 왜, 얼마 동안 보관하는지 밝힌 처리방침을 공개해야 합니다. 푸터와 폼 옆에 링크를 두고, 폼에 수집·이용 안내와 동의 절차가 있는지도 확인합니다.
- 사업자 정보. 온라인으로 상품을 판다면 「전자상거래 등에서의 소비자보호에 관한 법률」에 따라 상호, 대표자, 사업자등록번호, 통신판매업 신고번호 등을 표시해야 합니다. 해당되는지 확인하십시오.
모두 확인했다면 다음은 HTML 파일을 인터넷에 올리는 일이고, 그다음은 내 도메인 연결하기입니다.
내 파일로 바로 해 보려면 Finipage 편집기를 여세요. 브라우저에서 돌아가고 파일은 내 기기 밖으로 나가지 않습니다.