Lovable 시리즈! Proagent팀이 Lovable과 함께 MVP Product를 만든 과정을 생생하게 공유
💟We Love Lovable
Lovable의 타겟 고객은 확실히 비개발자이다. 코드를 모르는 사용자도 원하는 웹사이트를 쉽고 빠르게 만들 수 있는 프로토타이핑 툴 매우 특화되어있었다. ProAgent 팀은 프로토타이핑을 넘어 사용자가 직접 가입하고 Product을 사용해볼 수 있는 범위까지를 MVP로 고려했다.
운이 좋게도 노코드 Product Manager 혼자가 아닌 Product Engineer인 Joon과 역할을 나누며 Lovable과 함께 막힘없이 술술 서비스를 만들어나갔다. 틈틈히 작업하는 수준의 시간을 들이고서도, 거의 일주일만에 사이트 기본 구성과 핵심 기능의 1차 구현을 마쳤고, DB/인증/소스코드 연동 환경도 갖추었다. 새로운 기술환경에 놀라며, 거침 없이 나아갔다.
아래와 같은 대화를 나누며.
“Lovable에서 자연어로 명령을 해보면, 이게 될까 싶은게 생각보다 잘되네요.” “네 근데 lovable 이 supabase 를 워낙 잘 붙여놨네요. 인증이나 디비 연동을 노코드로 쉽게 했어요” ”러버블은 개발 안해본 사람도 할 수 있다는 느낌을 주는데 … 그래서 노코드 관점에서 어필하기 좋아보이구요.” ”bolt.new 나 replit 과 비교해봐도 러버블이 그런 느낌을 주는건 장점 같아요”
💪Lovable의 확실한 장점
- 자연어로 프롬프트를 입력하여 구현되며, 화면을 바로바로 확인할 수 있다. 실시간 자동배포가 되는건 아니지만, 라이브환경이 아니기 때문에 별 문제는 안 된다.
- 요구사항을 명확히만 전달하면 필요한 콘텐츠, 이미지를 꽤나 “Lovable”하게 알아서 만들어준다.
- Github만 연동해두면 비개발자도 코드를 쉽게 열어볼 수 있다. 그리고 간단한 텍스트는 Credit 차감 없이도 직접 수정할 수 있다.
- 어디를 어떻게 수정하고 싶은지 프롬프트로 설명하기 까다로울 때는, 해당 위치의 명칭을 물어보거나/화면을 캡쳐하거나 하면 된다. 나아가 Lovable 2.0에서는 Agent Chat이 생겨서 직접 작업 명령을 하기 전에 미리 코칭을 받을 수도 있다.
😓 사춘기의 시작
주요 화면, 기능의 구현이 한사이클 마무리 되고 있었다. 시나리오에 따라 이래저래 동작을 수행하고 화면을 이동하면서 사용해보고 테스트하기 시작했다. 그러면서 본격적인 기능확장과 최적화가 시작되었다. 그러면서 한계가 보이기 시작했다.
마치 사춘기 아이를 다루는 것처럼, 살얼음 판을 걷듯 살살 달래며 대화를 해나가는 상황에 이르렀다.
대표적인 한계점
- 기능과 화면의 연관성이 복잡해지면서, 서로 Dependency가 있는 사항들은 어디가 어떻게 영향을 주는지 점점 불확실성이 커져갔다. 수정 작업 후 Diff는 확인할 수 있지만, 처리과정을 전부 보면서 작업할수는 없다. 특히 DB는 Supabase에 있기 때문에..
- 특히, 처음부터 하이어라키가 애매하게 설계된 부분은 결국 일이 터졌다. 수정 작업을 할때 꼬이고 꼬이는 경우가 자주 발생했다.
☝️Lessons DB를 Supabase로 처음부터 구성하지 말것. Dummy Data로 프론트 중심으로 작업을 하다가, 어느정도 구조가 안정화된 이후에 Supabase로 DB를 구성해야 중간중간에 뒤집는 일이 없을 것.
- 뭔가 잘못 처리되었을때 롤백이 쉽게 되지만, DB가 수정된 것은 돌릴 수가 없다.
- 인증/세션 처리가 복잡해지면서, 사용자 경험에 영향이 크지도 않은데 시간 투입이 늘어갔다.
- 브라우저에서 작업을 하다보니, 작업이 날라가는 경우가 종종 있다.
관련하여 아래는 우리가 했던 대화들이다.
와 미친… prd review 인스트럭션 5개 다 노가다 한시간 했는데, 러버블 저장 안됐네요. 브라우저 기반의 한계인가. 와, 탭 이동시 초기화면으로 이동하는게 단순한 문제가 아니었네요. 고치는데 몇 시간 걸렸어요. 이번처럼 supabase + 인증 코어 로직이 꼬였을 경우, lovable 에서 수정하는건 비개발자는 쉽지않을수도 있겠네요. PRD 추천 챗봇 두 시간 작업 롤백했네요. 기존 코드를 꼬아서 안되기 시작하면 답이 없군요. 지금은 원래 되던 수준으로 돌리고 싶어서 애쓰는 중인데 쉽지않네요. 여의치않으면 github 으로 레파지토리 클론 받아서 커서나 윈드서프에서 고치고 커밋해야할 듯 합니다 코드 에딧 기능이 제한적이고 지난번에는 날라가기까지..supabase 연동은 장점이 큰데 수정과 확장이 쉽지 않구요. 프롬프트 코드블록으로 감싸고 클립보드 복사 넣는데 한시간 넘게 걸렸네요. 지난번에 리팩토링 되면서 생각보다 많은 부분이 꼬인거 같네요.
🏄♂️ Local 파트너 추가, Windsurf
결국 Lovable에서 삽질과 수정불가 상황이 나오기 시작했고, 외부 소스코드 툴을 사용해야만 하는 상황에 왔다.
러버블만을 바라보고 싶었지만, 보다 전문적인 Local 개발 도구인 Windsurf를 찾을 수 밖에 없었다.
우여곡절 끝에 엄청난 리팩토링을 거쳐 에이전트 이동시 대화 내용 초기화 문제를 해결했네요. 러버블에서는 안되고 대부분 windsurf 에서 llm 바꿔가면서… 하면 할수록 lovable 은 프로덕트 디자이너가 쓰고 프로덕트 엔지니어는 cursor 나 windsurf 에서 고치는게 맞는거 같긴해요.
Windsurf에서 소스를 수정하고 Github에 커밋 하는 일이 시작되었다. 그래도 연동이 잘 되기 때문에 Lovable에 외부 수정작업이 잘 반영되는 점은 그래도 다행이다.
🚣♂️마치며
Front의 수정은 여전히 Lovable로 <> 기능이 얽힌 파트는 Windsurf로 수정해나갈 것이다. 어쩌면 애초에 프로토타이핑을 넘어 복잡한 기능까지 동작하는 서비스를 Lovable에게 기대한 것이 무리인지도 모르겠다. 하지만 덕분에 우리는 Lovable과 어떻게 함께해야하는지 살펴보고 의미 있는 교훈을 얻었다.
이제 Lovable + Windsurf와 함께 남은 여정을 함께 한다.
Lovable 시리즈 더보기
Lovable 시리즈 - (1) Lovable, The Beginning
Lovable 시리즈 - (2) 세팅/연동하기
Lovable 시리즈 - (3) 신나는 바이브코딩(Engineer편)
Lovable 시리즈 - (4) 신나는 바이브코딩(PM편)
Lovable 시리즈 - (5) 이별, 그리고 새로운 시작
지금 ♥러버블 사용해보기
Share article
세미나/워크샵/컨설팅 문의사항은 이메일을 남겨주세요.
