한줄 요약
lovable, supabase, make.ai, vercel, cline을 써서 compass라는 경제 뉴스 모아보는 서비스를 3일만에 만들었습니다~
개발개발자야 이게 무슨말이니..
제목이 아주 어그로성이네
저는 제가 목표하던 사이드 프로젝트의 MVP를 3일만에 구현했습니다. (3월 13일 ~ 3월 15일)
기능이 많지는 않지만 제가 이용하기 위해서 만든 서비스라 기획과 MVP가 명확했습니다.
따라서, MVP 구현에 도움을 줄 수 있는 Sass를 이용하기 적합하다고 생각하였고, 시중에 나와있는 도구들을 이것저것 사용하게 되었습니다.
이제 어떤 도구들을 써서 서비스를 완성했는지, 어떤 플로우로 진행했는지 설명드리겠습니다.
그래서 뭐뭐 썼는데?
1. lovable
서비스를 만들기 위해서는 기획과 디자인이 필요합니다.
일단 기획은 제 머리에 다 있으니, 디자인만 있으면 되었는데, 제가 프론트엔드 개발자이긴 하지만, 디자인에는 조예가 없는지라 디자인과 초기 마크업은 AI의 힘을 빌렸습니다.
사용한 도구는 lovable이라는 static page generator 입니다.
lovable을 통해 생각했던 디자인들과 테마, 초기 기획을 포함하여 프롬프트를 작성하였습니다.
경제 뉴스를 모아볼 수 있는 서비스를 만들꺼야, 페이지는 총 3개야.
랜딩 페이지, 뉴스 리스트 페이지, 마이 페이지
랜딩 페이지에는 이 서비스를 사용하면 뉴스를 한눈에 종류별로 볼 수 있는걸 강조해줘. 그리고 크롬 익스텐션을 다운로드 할 수 있는 버튼과, 뉴스를 보러갈 수 있는 버튼을 둬.
뉴스 리스트 페이지에서는 뉴스카드들을 목록으로 볼 수 있고 좌측에 네비게이션을 통해 뉴스를 필터링 해서 볼 수 있도록 해줘.
뉴스 카드들은 북마크 가능하게 하고 마이페이지에서 북마크한 뉴스카드를 모아볼 수 있게 해줘
마이페이지는 로그인 하지 않으면 볼 수 없도록 하고, 로그인 모달을 유도해줘.
그리고 마이페이지에는 위에서 말했듯이 북마크 리스트가 있고, 로그아웃 버튼을 넣어줘.
디자인은 검은색과 흰색을 기반으로 해주고, 모던한 디자인으로 해줘. 다크모드도 지원해줘.
이런 형식으로 프롬프트를 작성하여, 아래와 같은 결과물을 얻었습니다.
이 사진은 현재 서비스 사진이지만, 뽑아진 디자인은 동일합니다.
이렇게 뽑아진 서비스는 껍데기만 있을 뿐, 서비스 자체는 동작 하지 않습니다.
그래서 저는 다음 도구를 이용해 서비스에 생명을 불어넣기로 했습니다.
2. supabase
요새 아주 유명한 DB, Backend Sass라고 할 수 있을 것 같습니다.
우선 제 머릿속 기획을 기반으로 테이블을 설계했습니다. (여기까진 사람이 해야합니다..)
그리고 코드를 이용해서 supabase를 연결할 생각에 아찔했으나, lovable은 supabase를 연결해서 서비스를 개발할 수 있습니다.
(이건 다른 프로젝트 사진입니다)
lovable과 supabase 계정을 연결한 후에, lovable 프롬프트를 통해 table과 ui를 연결합니다
예를 들면 아래와 같습니다.
news table의 데이터를 조회해서 뉴스 리스트 페이지 뉴스 카드를 만들어줘.
를 하면, supabase 특유의 table type 생성 기능을 통해 type을 만듭니다.
supabase에는 api url에 query를 붙여서 데이터를 조회해 올 수 있는데, lovable에서 이 기능을 이용해서 api 요청과 ui를 연결 해줍니다.
이러면 lovable 특성 상, 코드가 외부로 노출되어 문제가 되지 않을까 싶지만, anon url는 데이터 조회 및 수정에 권한을 걸 수 있기 때문에 중요 테이블은 접근 자체를 막고 삭제, 수정 권한도 모두 막았습니다.
위와 같은 기능을 통해 유저, 뉴스, 북마크 등을 서버와 모두 연동했습니다.
하지만 저희가 생각한 서비스는 매일 올라오는 뉴스를 한곳에서 보는 기능이므로, 뉴스 데이터를 가져와야 합니다.
이를 위해서 세번째 도구를 사용했습니다.
3. make.ai
make.ai는 딸깍딸깍으로 간단하게 자동화 플로우를 구축할 수 있는 sass입니다.
뉴스 RSS 특성 상, 서버가 일정 시간마다 요청을 보내 신규 콘텐츠를 긁어와야 합니다.
이런 서버를 구축하는건 관련 지식이 하나도 없는 제가 구축하기 적합하지 않다고 판단하였고, make.ai를 통해 RSS를 긁어오게 하였습니다.
아주 간단하게, 하루마다 제가 지정한 RSS 링크를 하루에 한번 이 시간 기점으로 -24시간동안 올라온 글들을 가져옵니다.
그 이후, RSS 링크 별로 제가 지정한 카테고리와 함께 supabase table에 저장합니다.
make.ai에서 보이는 구조는 아래와 같습니다.
(url이 늘어날수록 그냥 서버 구축할껄 그랬다는 생각이 마구마구 들긴 합니다)
이제 서비스를 구성하는 삼위일체는 모두 완성 되었습니다. (프론트, 백엔드, 디비)
서비스를 배포할 일만 남았는데, 배포는 4번째 도구를 이용했습니다.
4. vercel
프론트엔드 개발자시라면 아주 익숙하시죠?
vercel에 기본적으로 내장되어 있는 analytics 기능을 이용할 수도 있고, speed insight 기능을 이용할 수도 있어서 초기에 서비스를 올리기에 매우 적합하다고 생각합니다.
물론 전 lovable을 이용했기에, vite 기반의 서비스이지만 next를 이용하신다면 next server를 더 다양한 기능을 이용할 수도 있다는 장점도 있습니다.
(next가 vercel이 만든 프레임워크이니까요)
대충 서비스 이름을 정해서 github repo를 연결했습니다.
그 후, vercel에서 기본제공해주는 도메인을 연결해서 서비스를 띄웠습니다.
서비스를 올리고 나서 보니, 눈에 거슬리는 버그와 추가했으면 하는 기능들이 생각나더라고요.
이러한 요구사항을 달성하기 위해서 다음 도구를 사용했습니다.
5. cline
사실 lovable을 이용해서 계속 수정해도 되지만, 결제를 하지 않으면 작성할 수 있는 프롬프트 수가 한정되어 있습니다.
그래서 코드를 다운받아서 vsc extension인 cline을 통해서 개발을 이어갔습니다.
많은 분들이 cursor를 쓰고 계실텐데요. cline도 비슷한 도구입니다.
하지만 제가 개인적인 느낌으로는 cline이 사전지식 없이 더 간편하게 쓸 수 있고 말귀도 더 잘 듣더라고요. 비용은 사용량별로 계산되고 토큰을 결제해서 사용해야 하여 더 비쌉니다.
cline을 이용해서 비밀번호 변경 및 로그인 회원가입 모달 제대로 안뜨는 이슈들을 해결했습니다.
한계점
위에 서술한것만 보면 만능 도구들인것 같지만, 아직은 한계점이 명확합니다.
코드 유지보수는 아직 못한다.
현재는 코드 양이 조금 늘어난 상태입니다.
여기서 추가적인 작업을 하려고 하면 컨텍스트를 모두 인지하지 못하고 잘못된 코드를 작성한다거나, 기존에 있는 기능을 사용하지 않고 중복된 코드를 작성합니다.
이렇게, 서비스를 유지보수 하는데에 있어서는 아직 부족한 모습을 보여주고 있습니다.
서비스 규모가 커지고 기능 추가에 한계가 있다.
추후, RSS 크롤링에 여러 요구사항들이 추가되면 make.ai로는 한계가 있을 수 있습니다.
백엔드, DB에도 여러가지 권한 처리나 삭제 처리, 마이그레이션 등등 여러 요구사항이 생기면 supabase로도 한계가 생길것입니다.
Sass 비용이 많이 나간다.
Sass를 많이 사용하다보니 서비스 구독료가 있습니다.
make.ai로 매달 10$ (약 14000원)
cline 토큰 비용으로 15$ (약 21000원)
총 35000원 가량을 사용했습니다.
만약 서비스가 더 커진다면, vercel pro도 결제해야 하므로 20$ 정도 더 결제해야 합니다.
결론
위와 같은 Sass들은 초기 MVP 제작에는 매우 용이합니다.
하지만, 서비스 사이즈가 커지고 요구사항이 늘어남에 따라서 Sass를 직접 구현으로 마이그레이션 해야 하는 과정은 반드시 필요해질 수 밖에 없습니다.
이에 따라서 본인의 상황과 주머니 사정에 맞게 Sass를 적절히 도입하면 좋을 것 같습니다.
그래서 만든게 뭔데?
제가 만든건 compass 라는 경제뉴스 모아보는 크롬 익스텐션입니다.
많은 관심 부탁드립니다 😊
👍