lovable과 make의 연동 & 유튭을 요약해주는 웹페이지 디자인 구현

소개

Make에서 아래와 같이 유튭을 요약해주는 웹페이지를 만든 시나리오를 Lovable에 연동한 사례입니다.

프로세스의 다른 단계를 보여주는 다이어그램

진행 방법

사용한 툴: Make, chatGPT, Notion, Lovable

  1. 아래처럼 스터디장님이 주신 챗지피티 어시스턴트에서 prd 프롬프트를 생성했어요. (PRD, IA, Design 이렇게 세가지 프롬프트를 생성)

한국어 문자 메시지의 스크린 샷
  1. 디자인은 힙한 느낌으로 요청을 해보면 어떤 느낌으로 만들어줄지 궁금했어요!

    한국 웹 사이트의 스크린 샷

    3. 그렇게 만든 프롬프트들을 노션에 일단 정리했고, 몇가지 부분들은 삭제했어요~

    한국어 페이지의 스크린 샷

    4.러버블에 해당 내용을 복붙 했습니다 (make 젤 앞단의 웹훅 주소와, 슈퍼베이스의 해당 플젝 아이디를 삽입)

메시지가 담긴 웹 사이트의 스크린 샷

Tip: 러버블을 돌려놓고, 사례글 쓰기를 진행했습니다

Lovable 결과

오우! 정말 충격적인 디자인의 사이트를 만들어줬어요 ><

한국어 텍스트가있는 보라색 화면

이제 잘 작동하는지 확인해 봐야겠죠?

(Make의 옵션도 데이터를 받자마자 시나리오가 run 되도록 옵션을 설정해줬어요)

그리고 스터디장님이 어제 말씀하신 것처럼 유튭 링크는 ? 앞까지만 복사해서 붙여넣어보았습니다~

결과 (데이터를 처리하는 것은 실패했지만, Lovable이 요청한 요소들을 디자인해줬다)

보라색 배경이있는 한국 웹 사이트의 스크린 샷

1차로 실패를 했어요 ㅠ (오류 메세지는 떴구요!)

다시 Make로 돌아가서 보니,

슈퍼베이스에서 문제가 생긴것 같았습니다~

데이터를 처리하는 작업은 Make에서 실패를 했지만,

그래도 Lovable이 즐겨찾기나 히스토기 같은 제가 IA에서 따로 요청했던 메뉴를 제대로 만들어 준걸 확인할 수 있었어요!

2차 시도

러버블이 슈퍼베이스에 연결이 안되어있다고 알려줬고, 연결 후 다시 publish

다시 실패 -> 이번엔 아래와 같은 보안 에러를 띄워줬습니다. -> 그리고 러버블에게 권한을 주니 직접 고쳐줬어요

3차 시도 했으나 일단 실패했어요 ㅠ! 러버블이 문제점과 해결책을 계속 알려줘서 좋긴한데요, 한번 해결해 보고 다음번 스터디때 뵙겠습니당

느낀점

Make를 연동해서 돌려보니 일단 링크를 넣고 처리하는 속도가 매우 느리다는 것을 확인할 수 있었어요 ㅠㅠ!!! Make 말고 조금 더 빠른 대안이 없을지 궁금해 졌습니다~ (예를 들면 일반 사이트에서 로그인 정보를 받아서 로그인을 시켜주고, 견적 요청을 하면 자동 답장을 보내주는 등의 간단한 데이터처리를 할 때의 대안이요!)

그래도 러버블을 구현해보는 연습을 해서 좋았는데, 원하는 디자인으로 뽑으려면 컬러나 원하는 느낌을 더 정교하게 지정해줄 필요가 있겠다 생각했습니다.

n차 시도!

헉 저 성공했습니당!! ㅋㅋㅋㅋ make에서 input field 몇개 고쳐봤는데 성공했어요!

1
1개의 답글

👉 이 게시글도 읽어보세요