이 가이드는 Lovable에서 한국어 랜딩페이지를 만들고, 가격표 토글과 안내 팝업까지 붙인 뒤, 공개 링크로 배포하는 것을 배우는 가이드입니다. 스크린샷 순서대로 설명하니 처음 써보는 분도 그대로 따라 하면 됩니다.
이번 가이드에서는 스타트업용 SaaS 랜딩페이지를 만들어봅니다. 화면에 보이는 회사명 aimoa는 예시이니, 실제로 따라 할 때는 본인 서비스 이름으로 바꾸면 됩니다.
1. 무료 플랜과 남은 크레딧부터 확인하기
Lovable은 작업할 때 크레딧을 쓰는 방식이라, 시작 전에 지금 계정으로 어디까지 테스트할 수 있는지 먼저 확인하는 게 좋습니다. 이 화면에서는 현재 Free plan인지, 하루 크레딧이 몇 개인지, 추가 보너스 크레딧이 있는지 한 번에 볼 수 있습니다.
예시 화면처럼 5 daily credits (up to 30/month)가 보이면, 오늘은 랜딩페이지 초안 만들기와 수정 몇 번 정도까지 테스트해볼 수 있는 상태입니다. 처음에는 너무 큰 기능보다, 한 페이지짜리 랜딩페이지처럼 범위가 작은 작업부터 시작하는 편이 이해가 쉽습니다.
2. 첫 입력창에서 만들고 싶은 페이지를 한국어로 적기
처음 들어오면 큰 입력창이 보입니다. 여기서 만들고 싶은 결과를 한국어로 바로 적으면 됩니다. 빈 화면에서 메뉴를 오래 찾을 필요 없이, 이 입력창이 시작점이라고 생각하면 됩니다.
이번 예시에서는 “한국 스타트업용 SaaS 랜딩페이지를 만들어줘. 히어로, 기능 3개, 가격표, FAQ, 문의 CTA를 한국어로 넣어줘. 스타트업의 회사명은 ‘aimoa’로 만들어줘.”처럼 꽤 구체적으로 적었습니다. 이렇게 필요한 섹션 이름까지 같이 적어주면 Lovable이 초안을 더 빠르게 맞춰줍니다.
입력창 오른쪽에는 Build와 Plan 모드가 보입니다. Build는 바로 만들어주는 모드이고, Plan은 먼저 어떻게 만들지 이야기부터 정리하는 모드입니다. 결과를 빨리 보고 싶다면 Build로 시작하면 됩니다.
3. 생성 완료 카드에서 작업 결과를 먼저 확인하기
요청을 보내면 Lovable이 결과 화면만 보여주는 것이 아니라, 어떤 식으로 작업했는지 요약 카드로 먼저 알려줍니다. 예시 화면에서는 디자인 시스템을 잡고, 랜딩페이지 섹션을 만들었다는 알림이 보입니다.
이 단계는 단순히 완성됐다를 보는 용도가 아닙니다. 내가 요청한 범위가 제대로 들어갔는지, 너무 엉뚱한 방향으로 가지 않았는지 먼저 확인하는 단계입니다. 카드 아래 설명 문장까지 읽어보면 히어로, 기능, 가격표, FAQ, 문의 CTA가 실제로 반영되었는지도 빠르게 판단할 수 있습니다.
4. Preview에서 데스크톱과 모바일 화면을 같이 보기
이제 Preview로 들어가 실제 화면을 봅니다. 데스크톱 화면에서는 상단 로고, 메뉴, 메인 카피, 버튼, 대표 이미지가 어떻게 배치됐는지 먼저 보면 됩니다. 첫 화면에서 가장 중요한 건 예쁘냐보다, 첫화면에서 어떤 웹사이트인지 보이는가 , 수정할곳이 어디인가를 체크하는것입니다.
모바일 화면도 꼭 같이 확인하세요. 데스크톱에서 괜찮아 보여도 모바일에서는 첫 카피가 너무 길거나, 버튼 간격이 답답할 수 있습니다. 예시처럼 첫 화면에서 CTA 버튼이 잘 보이는지, 메뉴 버튼이 너무 작지 않은지 먼저 보면 됩니다.
조금 더 아래로 내려가면 가격표 섹션도 확인할 수 있습니다. 여기서는 가격 카드가 한눈에 구분되는지, 무료 플랜과 유료 플랜 차이가 잘 읽히는지, 버튼 문구가 어색하지 않은지를 같이 봐야 합니다.
5. 후속 프롬프트로 월간/연간 토글을 추가하기
초안이 나온 뒤에는 처음부터 다시 만들지 말고, 필요한 수정만 짧게 이어서 요청하면 됩니다. 이번 예시에서는 모바일 섹션 간격을 줄이고, 가격표 위에 월간/연간 토글을 넣어 달라고 후속 프롬프트를 보냈습니다.
이 단계가 중요한 이유는 가격표가 실제 전환에 직접 영향을 주기 때문입니다. 월간 요금과 연간 요금을 바로 비교할 수 있으면, 무료와 유료 차이도 더 쉽게 읽히고 랜딩페이지 완성도도 올라갑니다.
수정이 끝나면 먼저 월간 상태를 확인합니다. 토글이 가격표 위에 자연스럽게 들어갔는지, 모바일에서도 손으로 누르기 쉬운 위치인지 보면 됩니다. 너무 위로 떠 있거나 카드와 떨어져 보이면 한 번 더 수정 요청을 넣는 게 좋습니다.
그다음 연간으로 바꿔 봅니다. 예시처럼 연간을 선택했을 때 20% 할인 표시가 보이고, 프로 요금이 월 기준보다 낮아지면 토글이 정상 동작하는 상태입니다. 이런 식으로 차이를 바로 보여주면 사용자가 요금제를 훨씬 쉽게 비교할 수 있습니다.
6. 후속 프롬프트로 버튼 클릭 시 안내 팝업도 넣기
가격표 수정이 끝났다면 버튼 동작도 다듬어볼 수 있습니다. 이번 예시에서는 모든 버튼을 눌렀을 때 안내 팝업이 뜨고, 팝업 안의 링크를 누르면 원하는 사이트로 이동하도록 한 번 더 요청했습니다.
이런 수정은 데모 사이트나 임시 소개 페이지를 만들 때 특히 유용합니다. 사용자가 버튼을 눌렀을 때 바로 구매나 회원가입으로 보내는 대신, 먼저 안내 문구를 보여주고 외부 링크로 넘길 수 있기 때문입니다.
수정이 끝나면 Lovable이 어떤 동작을 넣었는지 응답으로 알려줍니다. 이 단계에서는 팝업이 들어갔는지, 링크 클릭 동작까지 반영되었는지 먼저 확인하고, 그다음 실제 미리보기에서 디자인과 문구를 확인하면 됩니다.
실제 화면에서는 팝업 문구 길이가 너무 길지 않은지, 닫기 버튼이 잘 보이는지, 링크 문구가 자연스러운지를 보면 됩니다. 예시처럼 “이 페이지는 가이드를 위해 만든 예시 사이트”라는 안내를 넣어두면 방문자가 실제 서비스로 오해할 가능성을 줄일 수 있습니다.
7. Publish로 링크를 만들고 공개 설정까지 마치기
화면이 어느 정도 정리되어 이제 발행하고 싶다면 우측 상단의 Publish로 넘어갑니다. 첫 단계에서는 기본 웹사이트 주소를 정합니다. 예시처럼 lovable.app 주소가 자동으로 붙고, 원하는 이름으로 바꿔 쓸 수 있습니다. 아래의 custom domain은 Pro 표시가 있으니, 무료 테스트 단계에서는 기본 주소만 써도 충분합니다.
다음 화면에서는 누가 이 사이트를 볼 수 있는지 정합니다. 예시처럼 Public을 선택하면 링크를 가진 누구나 들어올 수 있습니다. 빠르게 결과를 공유하려면 이 방식이 가장 단순합니다.
그다음은 사이트 정보 입력 단계입니다. 제목과 설명은 검색 노출용 + 링크를 내보냈을 때 보이는 소개 카드라고 생각하면 쉽습니다. 제목은 짧고 분명하게, 설명은 이 페이지가 어떤 용도인지 바로 알 수 있게 적는 편이 좋습니다.
마지막 확인 화면에서는 URL, 공개 범위, 사이트 정보가 한 번에 보입니다. No issues found가 보이면 큰 문제 없이 발행 가능한 상태입니다. 여기서 Publish를 누르면 실제 링크가 공개됩니다.
간혹 security 칸이 체크마크가 안떠있을때가 있는데 , 이 때는 security 검사를 1회 진행해주면 됩니다.
- preview 버튼 우측 점 세개를 누른 후 , security 버튼을 누릅니다.
- security 창에서 update scan 을 누르고 잠시 기다립니다.
- 약 3분~5분이면 스캔이 완료되고 , security 상태가 업데이트 됩니다.
Lovable은 처음부터 완성품을 기대하기보다, 초안 만들기 → 미리보기 확인 → 후속 수정 → 배포 순서로 쓰면 훨씬 편합니다. 이번 예시처럼 한 페이지짜리 한국어 랜딩페이지부터 시작하면 크레딧도 아끼고, 어떤 요청을 넣어야 결과가 잘 나오는지도 빠르게 익힐 수 있습니다.
제휴링크로 가입하고 10크레딧 추가로 받기 / 이 링크는 제휴 링크로, 가입 시 작성자에게 보상이 제공됩니다.