[바이브코딩] Lovable로 공유링크 생성하는 방법

안녕하세요.

오늘은 저번 포스트 연하장 만들기에 이어,

https://wonhwa.tistory.com/73

[바이브코딩] Lovable로 연하장 만들기

 

러버블로 만든 결과물을 다른 사람에게도 보여줄 수 있는 공유링크를 생성하는 방법을 자세히 알아보도록 하겠습니다.

 

1. 러버블 프로젝트 들어가기

기존에 만들어 놓은 러버블 프로젝트에 접속해 주세요.

 

2. 우측 상단에 Publish 버튼 클릭하기

프로젝트 우측 상단에 보면 Publish라는 파란색 버튼이 있습니다. 

그 버튼을 클릭해 주세요.

공유링크 생성하는 Publish 버튼 클릭

 

 

3. Website address 설정하기

Website addresss 설정하기

Publish 버튼을 클릭하면 웹사이트 주소(Website adress)를 설정할 수 있습니다. 

끝에는 .lovable.app으로 다 끝나고 앞에 문자는 내가 원하는 문자로 바꿔줄 수 있는데요,

저는 연하장을 만들었기 때문에 newyear2026greetings 로 설정하였습니다.

참고로, 내가 원하는 문자열을 주소로 설정 시 아이디 검증처럼 다른 사람이 이미 내가 원하는 문자열을 쓰고 있으면 사용이 불가능하며, 다른 문자열로 바꾸어야 합니다.

설정이 다 되었으면 Continue 버튼을 눌러 줍니다.

 

4. 공개 범위 설정

공개 범위 Public으로 설정

그 다음으로, 누가 나의 웹사이트에 접속이 가능한지 설정하여야 합니다.

저희는 링크를 가지고 있는 사람 모두 보여줄 것이기 때문에 Public을 선택한 후 Continue버튼을 다시 눌러줍니다.

 

5. 링크 미리보기 정보 설정하기

링크공유시 보일 링크정보 설정하기

그러면 링크를 공유할 떄 미리보기할 정보들 작성하는 창이 뜹니다.

Icon&Title은 Preview에서 확인할 수 있듯,

링크를 다른 사람에게 공유했을 때 보이는 웹사이트 아이콘(여기서는 하트모양)과 제목("병오년 연하장")을 설정할 수 있습니다.

Description은 미리보기 링크 아래 웹사이트가 어떤 웹사이트인지 한줄로 설명하는 줄글을 설정할 수 있습니다.

마지막으로, Social Image는 웹사이트의 썸네일 이미지라고 보시면 됩니다. 

직접 사진을 업로드 해도 좋고, 러버블 내에도 관련 이미를 자동 생성해주는 "generate" 버튼을 눌러 이미지를 간단 생성할 수 있습니다.

저는 러버블 내의 이미지 생성 기능을 이용하였습니다.

다 설정이 되었으면 Preview쪽에서 내가 설정하는 것들이 잘 나왔는지 확인 후 Continue를 눌러줍니다.

 

6. 링크 정보 최종 점검

링크 설정 최종점검 페이지

그러면 마지막으로 내가 설정한 링크 정보들 최종점검하는 페이지가 나옵니다.

내가 작성한대로 잘 설정이 되어있으면 Publish 버튼을 눌러 배포 해줍니다.

 

7. 공유링크 생성 완료

공유링크 생성됨

그러면 링크 생성이 완료되었다고 나오고 위의 빨간색 박스의 링크를 복사해서 지인과 공유하면 됩니다.