가이드 / Finipage / 페이지 고치기

ChatGPT·Claude가 만든 랜딩페이지, 제대로 고쳐 쓰는 법

Qorlize 팀 작성 · 마지막 검토 2026년 11월 11일

Finipage 가이드 · HTML 파일을 코드 없이 고치는 편집기. Finipage 열기

ChatGPT나 Claude, Gemini에게 랜딩페이지를 부탁하면 몇 초 만에 그럴듯한 landing.html 파일이 나옵니다. 그런데 자세히 보면 후기에는 존재하지 않는 사람이 등장하고, "지금 시작하기" 버튼은 example.com으로 가고, 맨 위 사진은 한참 뒤에야 뜹니다. 초안으로는 훌륭하지만 그대로 내걸기는 어렵습니다. 어디가 약한지 알고, 무엇을 AI에게 맡기고 무엇을 직접 고칠지만 나누면 실제로 쓸 수 있는 페이지가 됩니다.

AI가 만든 페이지에서 자주 보이는 문제

배치는 대개 괜찮습니다. 문제는 내용과, 완성품처럼 보이게 하려고 모델이 택한 지름길에 있습니다.

• 자리 채우기 문구: "Lorem ipsum", "회사명", "홍길동", "[여기에 장점 입력]", 그리고 "고객 맞춤형 혁신 솔루션을 제공합니다"처럼 어느 회사에 붙여도 말이 되는 문장.
• 지어낸 후기와 숫자: "덕분에 매출이 두 배가 됐어요. — 김○○ 대표", "누적 고객 10,000명", "만족도 4.9점", "함께하는 기업" 아래 늘어선 대기업 로고. 모두 디자인 빈칸을 채우려고 모델이 만든 것입니다.
• 가짜 링크: href="https://example.com", 모든 버튼의 href="#", mailto:hello@yourcompany.com, 계정 이름 없이 instagram.com/만 걸린 SNS 아이콘.
• 너무 크거나 남의 서버에 있는 이미지: 무료 사진 사이트나 자리표시 이미지 서비스에서 바로 불러오는 주소, 혹은 나중에 직접 넣은 가로 4,000픽셀·5MB짜리 사진.
• Tailwind CDN 클래스: <script src="https://cdn.tailwindcss.com"></script>를 넣고 bg-indigo-600 text-white px-6 py-3 rounded-lg 같은 클래스 이름으로 모양을 잡는 경우가 많습니다. Tailwind 공식 문서도 이 CDN 스크립트를 실제 서비스용이 아닌 개발용으로 안내합니다. 방문자의 브라우저가 페이지를 열 때마다 스타일을 새로 만들어야 하고, 스크립트를 불러오지 못하면 모양이 다 빠진 페이지가 나옵니다.
• 요청하지 않은 스크립트: 모바일 메뉴 토글, 끝나지 않는 할인 카운트다운, 주소를 어디에도 보내지 않으면서 "구독해 주셔서 감사합니다"만 띄우는 뉴스레터 폼.

가짜 후기와 숫자는 반드시 바꾸거나 지웁니다

이것만큼은 보기 좋고 나쁨의 문제가 아닙니다. 근거 없는 후기나 실적 숫자를 내걸면 「표시·광고의 공정화에 관한 법률」이 금지하는 거짓·과장 광고에 해당할 수 있고, 공정거래위원회는 「추천·보증 등에 관한 표시·광고 심사지침」도 따로 두고 있습니다. 거래한 적 없는 회사의 로고를 쓰면 상표 문제도 생길 수 있습니다.

방법은 셋입니다. 사용 허락을 받은 실제 후기로 바꾸거나, 증명할 수 있는 숫자로 바꾸거나, 그 영역을 지웁니다. "서울 지역 초기 고객사와 함께 운영 중입니다" 같은 한 줄이 지어낸 숫자보다 오히려 믿음을 줍니다.

작은 수정까지 AI에게 다시 시키면 생기는 일

"버튼을 초록색으로", "전화번호 바꿔 줘", "제목 좀 작게". 이렇게 대화를 이어 가면 한두 번은 잘 되다가 곧 문제가 생깁니다.

• 모델은 대개 파일 전체를 다시 씁니다. 말하지 않은 부분까지 바뀝니다. 섹션 하나가 사라지거나, 색이 달라지거나, 클래스 이름이 바뀝니다.
• 그사이 직접 고친 내용이 사라집니다. 현재 파일을 매번 대화창에 다시 붙여 넣지 않는 한, 모델은 내 파일이 아니라 자기가 마지막에 쓴 버전을 고치기 때문입니다.
• 긴 페이지는 답변이 잘립니다. <!-- 나머지는 동일 --> 같은 주석이 들어간 답을 그대로 붙여 넣으면 페이지 아래쪽이 통째로 날아갑니다.

"가격표 섹션을 세 가지 요금제로 추가해 줘", "이 문단을 치과 병원에 맞게 다시 써 줘" 같은 구조 변경은 AI에게 맡기고, 작은 수정은 파일에서 직접 하는 쪽이 훨씬 빠릅니다.

실제로 고치는 순서

1. 원본은 따로 보관합니다. AI가 준 파일을 landing-v1-원본.html로 저장하고 사본을 고칩니다. 직접 수정을 시작한 뒤에는 대화창의 새 버전을 그 위에 덮어 붙이지 않습니다.
2. 고칠 목록을 만듭니다. 메모장이나 VS Code에서 example.com, href="#", lorem, your, @, http를 검색합니다. 걸리는 곳마다 실제 주소를 넣을지 지울지 정합니다.
3. 구조 변경은 먼저 끝냅니다. AI에게 받아야 할 섹션이 남아 있다면 직접 수정에 들어가기 전에 받습니다.
4. 글자, 색, 링크, 이미지를 고칩니다. 코드가 익숙하면 텍스트 편집기로 충분합니다. 화면을 보며 고치고 싶다면 Finipage 같은 시각 편집기에서 글자를 더블클릭해 고치고, 오른쪽 패널에서 색과 여백을 정하고, 링크 칸에 주소를 넣고, 새 이미지 파일을 기존 이미지 위에 끌어다 놓으면 됩니다. Finipage는 편집하는 동안 페이지의 자바스크립트를 실행하지 않아 카운트다운이나 팝업이 방해하지 않고, 저장할 때는 스크립트를 그대로 남깁니다. 다만 Tailwind CDN도 스크립트이므로, 설정에서 스크립트 실행을 허용하기 전까지는 편집 화면에서 모양이 빠진 채로 보일 수 있습니다.
5. 이미지는 넣기 전에 줄입니다. 맨 위 큰 사진은 가로 1,600~2,000픽셀로 줄이고 WebP나 JPG의 품질 75~80 정도로 저장하면 대개 수백 KB에 들어오며, WebP 쪽이 더 작습니다. 텍스트 편집기도 Finipage도 이미지를 압축해 주지 않으므로 이미지 도구에서 먼저 처리합니다. 용도별 크기는 이미지 형식과 크기 고르기에 정리했습니다.
6. 페이지 제목과 설명을 바꿉니다. AI가 만든 페이지는 제목이 "Landing Page"나 "Modern SaaS Template"으로 남아 있는 경우가 많습니다. 브라우저 탭과 검색 결과에 그대로 나오는 글입니다.

쓰기 전에 확인할 것

공개 전 전체 점검표는 랜딩 페이지 공개 전 체크리스트에 정리했습니다. 준비가 끝났다면 HTML 페이지를 인터넷에 올리는 방법으로 넘어가십시오.

내 파일로 바로 해 보려면 Finipage 편집기를 여세요. 브라우저에서 돌아가고 파일은 내 기기 밖으로 나가지 않습니다.