lovable을 활용해서 아파트 테니스장 예약 페이지 만들기

소개

https://preview-4e72da93--taeyeong-tennis.lovable.app/

안녕하세요. 이번 16기 문과생도 n8n을 듣게된 신도림핵주먹입니다 🙂

저는 AI툴은 chatGPT밖에 사용해보지 않았어서 아직 많이 낯설지만 차근차근 배워나가겠습니다.

제가 사는 아파트에 태니스장이 있는데, 동호회 회원들만 이용하는 것으로 10년여간 잡음이 많았습니다. 최근에 아파트 주민 모두에게 개방되었는데, 일반 주민들과 동호회 회원들 간의 묘한 불협화음이 있습니다. 그래서 좀 더 투명하게 아파트 테니스장을 예약할 수 있는 페이지를 만들고자 했습니다.

진행 방법

n8n 첫 시간에 배운 lovable을 사용해봤습니다.

프롬프트 작성은 월요일 강의 때 개발자F님이 제공해주신 '프롬프트만들기' chatGPT의 도움을 받았습니다.

회사에서 앱 개발 시 현업으로서 제가 원하는 요건을 글로 적거나 ppt로 제작해서 넘기곤 했었는데 이 때 적었던 스타일로 내용을 작성하고 그걸 챗지피티의 도움을 받으니 꽤 괜찮은 프롬프트가 되었습니다.

한국과 중국어 텍스트가있는 페이지

위와 같이 요구 사항을 글로 적어 챗지피티에게 프롬프트 작성을 요청했더니

중국 컴퓨터 화면의 스크린 샷

위와같은 프롬프트 전문을 만들어주었습니다.

제가 의도했던 부분과 다르게 나온 내용은 수정해서 lovable에 넣었더니

한국 전화 화면의 스크린 샷

처음부터 꽤 의도했던 것과 비슷하게 페이지가 나왔습니다.

이후에 몇 차례 수정사항을 전달하고, 에러가 떴을 땐 해결하라고 하니 스스로 해결하더라구요^^

몇 차례 수정 후에 현재 페이지가 나왔습니다.

결과와 배운 점

아직 프롬프트를 정확히 작성하여 전달하는게 부족한지 수정 후에도 완벽히 제가 원하는 대로 나오진 않았지만, 몇 차례 반복하면 원하는 모습에 가까워진다는 점이 정말 희망적이었습니다.

늘 글과 그림으로 내가 상상했던걸 요청하는 현업이었는데, 직접 실현시킬 수 있다니 성취감도 들었습니다.

다만, n8n을 이용해서 예약데이터, 주민정보 데이터를 활용하고 싶은데 trigger노드부터 뭘 사용해야할지 모르겠더라구요. 빈 workflow를 열어놓고 약간 바보가 된 느낌이었는데, 노트를 열어서 내가 원하는 flow 를 글로나마 적어보았습니다.

웹 응용 프로그램의 다른 부분을 보여주는 다이어그램

지피터스 열심히 참여하면 할 수 있게되겠죠?! n8n은 더 많은 영상을 찾아보고 공부해야할 것 같습니다.

도움 받은 글 (옵션)

문과생도 n8n 첫 강의와 개발지F님의 핵심강의

5
2개의 답글

👉 이 게시글도 읽어보세요