[ 바이브 코딩 ] AI 다국어 (일본어) 웹사이트 제작│러버블 (Lovable) 사용 실습

러버블(Lovable)이라는 바이브 코딩 서비스를 이용하여 신상품 출시 랜딩 페이지를 다국어(일본어)로 제작해보는 실습을 진행하겠습니다. 러버블을 이용하면, 바이브 코딩을 통해 웹사이트 제작을 손쉽게 할 수 있을 뿐만 아니라, 배포까지 한 번에 가능하며, 특히 제작부터 배포까지 모두 무료로 진행가능하다는 장점이 있습니다. 먼저 실습 과정을 통해 최종 완성한 일본어 랜딩페이지를 검토한 후, 러버블 로그인부터 제작, 배포까지 차례대로 정리하여 공유하겠습니다. 특히 포스팅 하단에는 웹사이트 제작에 사용한 프롬프트까지 업로드해었으니, 참고바랍니다. 

리뷰 분석 기반 상세 페이지 AI 제작 방법 실습 (feat, 구글 제미나이)

[ 바이브 코딩] AI PPT 빌더 (Builder) 제작 방법│구글 AI 스튜디오 실습

 

1. 러버블, 바이브 코딩 도구를 활용한 AI 웹사이트 생성 결과 

아래 이미지를 클릭하면, 현재 배포 중인 실제 웹사이트로 바로 이동가능합니다. 제작 과정 중에 몇 가지 아쉬운 점들이 있었는데요. 관련 내용은 제작 후기에서 구체적으로 말씀드리겠습니다.  

러버블(Lovable)로 제작한 AI 웹사이트 바이브 코딩 생성 결과

[ 무료 ] URL to Video │ Text to Video │펠로 AI 사용법

[ UGC 광고 ] URL to Video │Top View 업데이트

 

2. 러버블 바로가기 │로그인 │웹사이트 제작을 위한 프롬프트 입력과 실행

먼저 아래 캐버 이미지를 클릭하면, 러버블 웹사이트로 바로 이동가능합니다. 이동 후, 가입과 로그인을 완료한 후, 아래  캡처 이미지 내 번호 순서대로 ①웹사이트 제작을 위한 "프롬프트"를 입력합니다. 그리고 ②"만들기" 상태에서 실행하면, 바로 웹사이트 제작이 시작됩니다.  웹사이트 제작을 위한 프롬프트는 챗GPT, 제미나이 등과 만들과 싶은 웹사이트의 주제, 기능 등을 심도 깊에 이야기한 후, 러버블 웹사이트 제작을 위한 프롬프트를 제안해달라고 요청하면 끝입니다. 

러버블(Lovable) 바로가기 │로그인 │웹사이트 제작 프롬프트 입력과 실행

[ 무료 ] 브랜드 포스터 릴스 SNS 콘텐츠 제작 방법 │스카이워크 AI

바이브 코딩 스카이워크 AI 개발자 사용법 │유튜브 비디오 기반 웹사이트 개발 │리뷰 텍스트마

 

3. 웹사이트 이미지 생성 결과 수정 방법

잠시 후, 아래 캡처 이미지의 오른쪽과 웹사이트 시안이 제시되었는데요. ③"상품" 이미지는 제가 광고하고자하는 상품이 아니라 교체해야 할 것 같습니다. 따라서 캡처 이미지의 왼쪽 하단처럼 ④파일을 클릭하고, 상품 이미지 혹은 동영상을 업로드한 후, 해당 상품 이미지로 교체해달라고 프롬프트 입력란에 입력한 후, 실행시킵니다.  

첨부 이미지 수정 방법 │러버블(Lovable) 사용 실습

마누스 AI 에이전트 │큐텐 재팬 리뷰 분석 기반 상세 페이지 제작 방법

 

4. 웹사이트 이미지 수정 반영 결과 

그럼 아래 캡처 이미지의 ⑤와 동영상을 참고하여 ⑥과 같은 이미지로 교체한 후, 해당 이미지와 어울리는 웹사이트 배경 이미지와 아이콘 등으로 자동 수정됩니다.  

동영상 파일을 이용한 이미지 수정 │러버블(Lovable) 사용 실습

큐텐 재팬 리뷰 기반 상세 페이지 마케팅 인사이트 제노바 AI 에이전트 사용법

 

5. 웹사이트 전체 색감 통일 │feat, 컬러헌트

다만, ⑦과 같이 전체적인 컬러와 무드를 변경해달라고 요청할 수도 있는데요. 이 때 "컬러헌트" 서비스를 고려할 수도 있습니다. "컬러헌트"에서 컬러 믹스를 선택하고, 실행한 결과가 ⑧과 같이 변경 적용되어 나타납니다. 더 이상 수정할 사항이 없다면, 우측 상단의 ⑨"Publish"를 클릭하고 배포를 진행합니다.  

[ 바이브 코딩 ] AI 웹사이트 무료 제작│마누스 AI 에이전트

 

6. 웹사이트 URL 수정

먼저 아래 캡처 이미지의 ⑩과 같이 URL 이름을 수정합니다. 무료로 사용하는 경우 URL의 마지막 "lovable.app"은 변경이 불가능하므로 참고바랍니다. URL 이름을 수정한 후에는 "Continuous" 클릭하고 다음 단계로 이동합니다. 

웹사이트 URL 수정 방법 │러버블(Lovable) 사용 실습

 

7. 웹사이트 상세 정보 입력 등

그럼 아래 캡처 이미지의 ⑪과 같이 웹사이트 상세 정보 입력 등도 가능합니다. 역시 필요한 경우 입력하고, "Continuous" 클릭하고 다음 단계로 이동합니다.   

웹사이트 상세 정보 입력 등│러버블(Lovable) 사용 실습

 

8. AI 웹사이트 생성 완료

그럼 마지막으로 웹사이트 URL을 확인한 후, ⑫"Done"을 클릭하면, 웹사이트 제작부터 배포까지 모두 끝나게 됩니다.  

웹사이트 제작 완료│러버블(Lovable) 사용 실습

 

9. 제작 후기

이번 포스팅에서는 바이브 코딩으로 웹사이트를 무료로 제작하고, 배포할 수 있는 러버블(Lovable)이라는 AI 서비스 이용 방법을 실제 실습 과정을 통해 정리해보았습니다. 앞서 보신 바와 같이 러버블을 사용하면, 웹사이트 제작부터 배포까지 무료로 간단히 경험해 볼 수 있다는 장점이 있습니다.  

러버블 AI 웹사이트 일본어 제작 프롬프트.txt

0.01MB

다만, 웹사이트 생성 결과의 퀄리티를 좀 더 개선하기 위해서는 첫째 웹사이트 제작을 위한 프롬프트 작성을 위해 챗GPT 등에 충분한 정보를 제공할 필요가 있습니다. 이렇게 충분한 정보가 제공되어야만 좀 더 사용자가 원하는 내용과 기능이 반영된 웹사이트 제작이 가능합니다. 둘째, 웹사이트에 적용할 제품 이미지 등은 미리 준비해두는 것이 보다 효과적입니다. 웹사이트 전체 색감 역시 컬러헌트를 통해 미리 설정해두는 것도 권장합니다. 바이브 코딩만으로는 완벽하게 사용자가 원하는 디자인과 색감을 반영하기 쉽지 않기 때문입니다.