Lovable 시리즈! Proagent팀이 Lovable과 함께 MVP Product를 만든 과정을 생생하게 공유
👨💻비개발자가 할 수 있는 일
비개발자인 Product Manager Jin의 관점에서 Vibe 코딩으로 할 수 있는 일, 문제해결, 그리고 시사점을 정리해보았다. Product Manager로서 Jin이 한일은 아래와 같다. 일반적인 스타트업에서 Product Manager와 Product Designer(or UX/UI Designer)가 하는 일을 모두 할 수 있다.
1. Product Management
- 스프린트, 과업, 우선순위 정하기
- 노션페이지에서 프로젝트 대시보드를 만들어 활용했다.
- Lovable 설정/결제
. Lovable Setting 메뉴에서 계정연동, 설정 등을 체크한다.
. Credit이 떨어지면 일이 중단되기 때문에 신경쓰면서.. 🙂
2. UX 기획
- 페이지구성 및 네비게이션
. 참고로 러버블은 기본적인 레이아웃, 콘텐츠, 인터랙션 등을 모두 구성해준다.
. 처음 페이지 제작을 잘 해냈다면 그다음부터는 수정과 최적화의 반복이다.
- 콘텐츠 제작/수정/삭제
. 페이지내 영역의 콘텐츠를 추가하거나, 수정하거나, 삭제한다.
- 인터랙션(화면이동, 링크 등)
. 버튼, 링크 등의 동작을 정의한다.
3. Interface Design
- 컴포넌트 레이아웃, 스타일 최적화
. 컴포넌트의 레이아웃이나 스타일을 최적화한다.
- 그래픽 요소 추가
. 일러스트, 그래픽이미지, 이모지 등을 추가/수정한다.
반면, Product Engineer인 Joon이 담당한 업무는 대략 아래와 같다.
1. 기술환경 구성
- 인증(가입/로그인)
- 데이터 입력/저장/삭제
. 사이트내 상태 유지/변경
- 비즈니스로직 구현
. Usecase에 따른 로직 구현
. LLM API 구현
참고로 채팅창에 모든 프롬프트와 결과물의 기록이 있기 때문에, 서로 무슨 일을 하고 있는지를 실시간으로 투명하게 알 수 있다. 마치 원격으로 접속해서 서로의 컴퓨터를 보면서 협업하는 것처럼! Vibe 코딩은 Product Engineering의 측면에서 “생산성” 뿐만아니라, 협업자들이(특히, 비개발자와 개발자가) 서로 어떤 생각, 구조, 구체적인 업무를 하는지를 학습할 수 있는 매우 좋은 수단이라고도 생각이 된다.
🔠Vibe Coding 업무 사례들
새로운 페이지 만들기
- 업무자동화 Agent의 상세페이지 제작을 위해 입력한 프롬프트 예시이다.
- 모바일 디바이스에서 접속시 어떤 사용자 경험을 만들지에 대한 프롬프트이다. - 원활한 작업이 가능할까 의심이 있었지만, 저 한번의 지시로 80% 정도는 의도한 동작을 완료해냈다.
콘텐츠 제작/수정
- 위에서 만들어진 페이지의 상세한 수정 과업이다.
- 기존 섹션의 레이아웃, 디자인을 전반적으로 수정한 예시이다.
- 특정 영역에 iframe을 추가해본 사례이다.
인터랙션, 인터페이스 디자인 정의
- 상단탭바의 인터랙션 수정을 진행한 예시이다.
- 첨부 이미지를 등록 후 추가한 사례이다.
- 텍스트, 링크 등 정보 수정하기
- Edit 버튼을 누르고 화면내 수정을 원하는 화면을 클릭하면 텍스트나 스타일을 수정할 수 있다.
- 그런데 Edit이 안되는 경우가 있다. 비개발자가 보기에는 다 같아 보이지만;; Static한 정보가 아닌 영역들은 소스코드를 직접 수정해야한다. - Static text가 아니면, 아래와 같이 content 박스에 설명이 나오고 비활성 상태로.. 수정이 안된다.
- 그럴때는 이렇게 소스코드 편집 모드로 변경하여 직접 텍스트를 수정해본다. - 이렇게 수정한 것은 채팅창에 별도 프롬프트가 보이지는 않고 “Code edited..”라고 기록이 남는다. - 어떤 코드라인이 변경되었는지 diff 로 확인 할 수 있다.
🔧문제해결이 필요한 순간
- 원하는대로 반영되지 않았을 때 - 무엇이 문제인지 알려주고 다시 시켜본다.
- 디버깅을 해보도록 하고 스스로 수정 하도록한다.
- 그래도 해결하지 못할 때는 혼자 해결하지 못하는 거다. 외부 자료를 찾아 전문적인 가이드 제공해본다. - 제미나이에서 해당 문제를 서치 - 해당 영역의 소스를 첨부하며, 제미나이에 오류 문의
- 제미나이의 지시대로 가이드를 제공해결되었다!!
- 실수를 했거나, 다시 과거 버전으로 돌아가서 재작업하고 싶을 때 - 언제든 Restore 버튼으로 이전 버전으로 복구할 수 있다.
- 리팩토링 제안 - 더 나은 구현을 위해 스스로 리팩토링을 제안하고 문제가 없도록 소스 개선을 하기도 한다.
📘비개발자의 바이브코딩, Lessons Learned
비개발자로서 Vibe 코딩을 하며 여러가지 스킬을 배울 수 있었다.
- 먼저 내가 할 수 있는 일, 해야 할 일의 범위와 구체적인 업무를 파악하자.
- 시작이 반이다. 첫 프롬프트를 잘 작성하자.
- 가능하면 한번에 하나씩, 구체적으로 대화하자.
- 티키타카를 하며 물흐르듯 바이브가 있는, 대화하는 느낌이 중요한 것 같다.
- Lovable에게 의견도 묻고, 제안사항을 잘 확인하며 진행하자.
- Lovable에 알맞는 프롬프트 작성법, Lovable의 지원환경을 익히며 발전하자.
- 가능하면 처음에 익히면 좋지만, 하는 과정에서 배운다는 생각도 매우 좋겠다.
- 문제는 해결된다. 쫄지마라.
- Lovable이 잘 해결해주고, 외부지식을 가져와도 되고, 정안되면 되돌아가면 된다.
사실 비개발자로서 바이브 코딩의 하드 스킬을 배운 것보다, 그 과정에서 정성적으로 느끼고 생각해본 것이 더 가치가 있었다고 생각한다.
- PM/디자이너/창업가/마케터 등 비개발자가 빠른 프로토타이핑을 할 수 있는 환경의 의미
- 스타트업 생태계에는 어떤 영향을 줄 것인가?
- 팀구조/협업구조에는 어떤 영향을 줄 것인가?
- Assistant/Agent와 협업을 하는
- 나의 협업자로서 어떤 기대/역할/일하는 방식을 만들어가야하는가?
- 그들을 어떤 존재로 대할 것인가?
- 함께 Vibe 코딩을 한다는 것
- 서로 다른 직무의 협업자와 실시간으로 함께 제품을 만든다는 것의 의미 → 학습
- 투명하게 업무가 공유되는 상황이 주는 의미
위 주제들은 차근차근 하나씩 별도의 아티클로 자세히 작성해보고자 한다.
이렇게 신나게 Vibe 코딩으로 제품을 만들어나갔지만, 문제와 위험도 커져갔다. Lovable과 이별할 시간은 그렇게 점점 다가오고 있었다.
Lovable 시리즈 - (1) Lovable, The Beginning
Lovable 시리즈 - (2) 세팅/연동하기
Lovable 시리즈 - (3) 신나는 바이브코딩(Engineer편)
Lovable 시리즈 - (4) 신나는 바이브코딩(PM편)
Lovable 시리즈 - (5) 이별, 그리고 새로운 시작
지금 ♥러버블 사용해보기
Share article
세미나/워크샵/컨설팅 문의사항은 이메일을 남겨주세요.
