코딩 없이 웹사이트 만들기｜Lovable 바이브코딩 후기

최근 원데이클래스를 통해 AI 바이브 코딩과 Lovable을 처음 알게 됐다.

코딩은 매번 독학하다 포기하기 일쑤였는데, AI로 코딩을 짜는 걸 넘어서 그냥 우리말로 웹사이트를 만들 수 있다니... 발전하는 속도가 무서울 정도다. 

배운 김에 만든 사이트가 바로 ‘우리 뭐할까?’다. 오늘 뭐 먹을지, 뭐 할지 고민될 때부터 어디로 갈지, 커플끼리 해볼 밸런스 게임까지 랜덤으로 추천해주는 사이트다. ↓

https://ourpick.lovable.app/

---

1. ChatGPT로 프롬프트 짜기

평소 결정하는 데 오래 걸리는 편이라 '랜덤으로 정해주는 사이트를 만들면 어떨까?'라는 생각에서 시작했다.

그렇게 커플이 함께 사용할 수 있는 랜덤 추천 사이트로 구상했고, 막연했던 아이디어를 구체화하기 위해 지피티한테 프롬프트 작성을 요청했다. 

이렇게만 큰 틀만 정했더니 지피티가 전체 컨셉부터, 메인페이지와 카테고리별 구성, 세부 디자인, 앞으로 더 개선할 방향 등 세세하게 프롬프트를 작성해 줬다. 거기서 내 생각과 다른 아이디어는 수정하고 반복되거나 너무 세세한 내용은 삭제했고, 사용할 문구나 용어 같은 것도 추천받았다.

*Lovable은 모바일/데스크톱 반응형이 기본이라고 하여 프롬프트에 따로 추가하진 않았다.

 

2. Lovable로 만들어보기

지피티 도움을 받아 작성한 프롬프트를 Lovable에 입력했더니 10분도 안 돼서 웹사이트가 만들어졌다. 게다가 겨우 3.2 크레딧만 사용됐다니... 

물론 한 번에 완성되지는 않았다. '미리보기'에서 직접 사용해보면서 구성이나 기능, 디자인 등을 조금씩 수정했다.

그리고 오른쪽 위의 '게시'를 클릭하면 Lovable에서 제공하는 주소로 사이트가 공개되고, 생성된 주소를 공유해서 다른 사람도 접속할 수 있게 된다!

물론 게시된 후에 수정하더라도 '게시' > '변경 사항 게시하기'를 클릭하면 수정된 내용으로 사이트가 업데이트된다.

 

3. 애드센스 연결

웹사이트를 완성하고 Lovable에 애드센스 연결을 요청했다. 그러면 게시자 ID를 요청하는데, 애드센스 사이트에서 '계정' > '설정' > '계정 정보'에서 게시자 ID를 복사해 입력하면 Lovable이 알.아.서. 코드를 삽입해 준다!!

Google AdSense에서 사이트를 등록하고 검토를 신청했고, 결과를 기다리는 중이다.
티스토리 승인도 쉽지 않았고, 엄청난(?) 정보를 제공하는 사이트는 아니라서 큰 희망을 갖진 않고 있지만...
어차피 내가 쓰려고 만든 거니까 아무렴 어떨까ㅎㅎ

---

비전공자가 직접 만들어본 후기

비전공자에 파이썬 중도 포기 n회, AI 활용도 능숙한 편이 아닌데 우리가 일상에서 쓰는 자연어로 짧은 시간 안에 진짜 웹사이트를 만들어 볼 수 있었다.

프롬프트도 너무 막연하게 쓰면 크레딧만 헛사용하게 된다고 해서 프롬프트 작성에도 AI를 활용했는데, 대략적인 아이디어를 구체화하는 데 30분도 채 안 걸렸던 것 같다.

물론 AI가 알아서 완성해 주는 것은 아니었지만, 오히려 수정하는 과정이 있었기 때문에 나만의 웹사이트가 완성된 것이 아닐까?

내가 원하는 방향으로 AI를 이끌어가는 활용 능력이 중요하구나, 새삼 깨닫게 되었다.