Lovable 시리즈 - (3) 신나는 바이브코딩(Engineer편)

👨‍💻엔지니어의 시선으로 본 신나는 바이브코딩

🤖AI 코드를 처음 열어봤을 때

📝코드 기반의 프로토타이핑

1. 코드 구조
• 프로젝트 코드는 React와 TypeScript, Vite, Supabase 등 웹 생태계의 베스트 프랙티스를 적극적으로 도입하고 있는 형태였다.
• 컴포넌트의 역할과 계층 구조, props 전달 방식이 명확하게 분리되어 있었다. 각 컴포넌트 파악 및 기능 확장·수정하는 과정이 비교적 직관적이었다.

2. 코드 구성 및 최적화
• 전체적으로 재사용 가능한 컴포넌트와 커스텀훅, 서비스 레이어로 관심사가 잘 분리되어 있었다.
• 다만, 일부 복잡한 상태 관리나 props 전달 패턴에서는 더 간결하게 리팩토링할 여지가 있을 수 있어, 주요 컴포넌트 단위로 지속적인 코드 리뷰와 최적화가 필요해 보였다.

3. 스타일 및 레이아웃 조정
• Tailwind CSS 및 shadcn/ui 기반의 컴포넌트 스타일링이 적용되어 있어, 일관된 UI/UX를 유지하고 있었다.
• 간혹 디자인 시안에 맞춰 세부적인 레이아웃(미세한 간격, 정렬, 반응형 동작 등) 조정이 필요한 경우, 직접 코드의 Tailwind CSS 유틸리티 클래스를 수정하여 원하는 결과를 얻었다.
• 복잡한 클래스 조합도 비교적 명확하게 관리되고 있었지만, 유지를 위해 반복되는 스타일은 별도 컴포넌트나 클래스 추출을 고려하는 게 좋겠다는 생각도 들었다.

4. 외부 서비스 연동 및 애플리케이션 로직 구현
• 이 부분이 엔지니어로서 가장 집중했던 역할. Lovable은 Supabase, GitHub과의 기본적인 연결을 매우 빠르고 매끄럽게 제공했는데, 실제로 Supabase와의 연동은 기대 이상으로 매끄럽게 동작했습니다.
• Supabase 데이터베이스에 테이블을 만들고 기본 데이터를 넣어준 후, Lovable 환경에서 CRUD 작업이 아주 잘 통합되어 문제없이 동작했다. 특히 신기했던 점은 Supabase의 Row Level Security(RLS) 설정을 통한 데이터 접근 제어도 Lovable에서 정확하게 적용되어, 복잡한 보안 로직을 따로 구현할 필요 없이 백엔드에서 효과적으로 관리할 수 있었다점. 이 부분이 WOW 포인트!
• 또 한 가지 놀라웠던 점은, 클라이언트에서 직접 호출하기 어려운 외부 LLM API 연동 작업을 Lovable이 Supabase Function을 통해 효과적으로 지원했다는 것. 서버리스 함수 형태로 Supabase Function을 Lovable 환경에서 만들고, 해당 함수 내부에 LLM API 호출 로직을 구현할 수 있었다. 더욱 중요한 것은, LLM API 키와 같은 민감한 정보가 코드에 직접 노출되지 않고 Supabase의 환경 변수로 안전하게 관리될 수 있었다는 점. 프론트엔드 중심 툴에서 이 정도 수준의 백엔드 로직 통합과 보안 처리까지 기대하기는 어려운데 말이다.
• 물론 이러한 기본 통합 기능과 서버리스 함수 활용 외, 우리 서비스만의 특성에 맞는 고급 기능이나 복잡한 사용자 인터랙션은 Lovable의 AI 기능만으로는 구현하기 어려워 React 코드를 직접 작성해서 기존 코드에 붙이는 작업도 해야 했다.

5. AI와 상호작용
• 가끔 수동으로 코드를 수정한 후 Lovable의 AI 기능을 다시 사용하면, 열심히 다듬어 놓은 코드를 덮어쓰거나 예상치 못한 방식으로 변경하는 경우가 있었다. 수동 작업과 AI 생성 기능 간의 충돌 가능성을 보여주는데, 작업 시 변경 범위를 명확히 인지하고 신중하게 접근해야 하는 부분이었다.
• 이 과정에서 GitHub 연동은 정말 큰 도움이 되었음. Lovable이 생성하는 자동 커밋과 외부 에디터(예: VS Code, Cursor)에서 직접 작업한 수동 커밋 모두를 GitHub 저장소에서 일관되게 관리할 수 있었고, 덕분에 변경 이력을 추적하고 필요 시 안정적으로 과거 시점으로 되돌릴 수 있었다. Lovable이 외부에서 발생한 커밋을 잘 인식하고 반영해 준 덕분에, 필요에 따라 익숙한 VS Code와 Lovable 환경을 유연하게 오가며 작업할 수 있었다.

6. 디버깅
• Lovable 안에서 버그를 만났을 때, 그냥 AI한테 '이거 고쳐줘'라고 던지기보다는 콘솔 로그를 좀 더 상세히 찍어달라고 요청하고, 그 로그를 보면서 문제가 뭔지 단계적으로 분석해 달라고 구체적으로 지시했을 때 디버깅 과정이 훨씬 수월해지는 경험을 했다. AI가 주는 상세한 정보와 분석 과정이 문제의 핵심을 더 빨리 찾고 해결하는 데 꽤 도움이 되었다. 이건 AI를 똑똑하게(?) 활용하는 하나의 팁!

🔎 솔직하게 Lovable의 장단점 (엔지니어에게)

• 압도적인 초기 개발 속도 아이디어만 가지고 몇 분 안에 기본적인 웹사이트의 시각적 구조와 돌아가는 코드 초안을 볼 수 있다는 점은 정말 혁신적이었다. 백지 상태에서 'npm create vite@latest' 부터 시작하는 전통적인 방식과는 비교할 수 없는 속도 향상이었고, 아이디어의 타당성을 빠르게 검증하는 데는 정말 최고였음

• 뛰어난 Native 연동: 서버리스 지원과 버전 관리 Supabase 및 GitHub 같은 핵심 서비스와의 초기 연동 과정이 정말 직관적이고 매끄러웠다. 몇 번 클릭과 설정만으로 백엔드 데이터베이스, 인증, 코드 버전 관리 시스템 연결이 뚝딱!

• 익숙한 기술 스택 (React) 만들어진 코드가 React 기반이라 React에 익숙한 엔지니어에게는 진입 장벽이 거의 없었음. 코드 파악하고 수정하는 게 익숙해서 효율적임.

• 자동 리팩토링 제안 Lovable이 가끔 코드 개선을 위한 리팩토링을 제안하는 기능이 있었는데, 신기하게도 그 제안을 받아들였을 때 기존 기능이 망가지지 않고 코드가 깔끔하게 정리되는 경험을 했다. AI가 코드 품질 개선을 직접 제안하고 안전하게 적용해 준다는 점은 꽤 도움이 되는 기능.

• AI를 활용한 효과적인 디버깅 보조 전통적인 디버깅 도구처럼 완벽하진 않지만, AI에게 문제 발생 시 상세한 로그를 요청하고, 로그를 기반으로 단계별 분석을 시키는 방식으로 접근하니 디버깅 효율을 꽤 높일 수 있었음.

• 코드 최적화 및 완벽성 요구 AI 생성 코드가 좋은 시작점인 건 맞지만, 이걸 그대로 프로덕션에 가져가기에는 아쉬운 부분들이 있다. 성능, 유지보수성, 확장성을 위해서는 결국 엔지니어의 손으로 추가적인 최적화와 리팩토링이 필요했다(자동 리팩토링 기능이 조금 도와주긴 했지만..)

• 커스터마이징 및 확장성의 제약 아주 복잡하거나 완전히 독창적인 기능을 만들려면 결국 직접 코드를 짜야 했는데, Lovable의 내장 코드 에디터 환경은 로컬 개발 환경(VS Code 등)처럼 강력한 디버깅 도구, 자동 완성, 린팅 등을 완벽하게 지원하지는 않았다. 복잡한 작업을 할 때는 VS Code로 넘어가는 경우가 많았음. AI를 통한 디버깅 보조는 가능했지만, 익숙한 디버깅 환경과는 차이가 있다.

• AI와 수동 코드 간의 상호작용 복잡성 가끔 코드를 직접 수정한 후에 AI에게 다른 부분을 생성/수정하게 시키면, 건드린 부분을 예상치 못하게 바꿔버리는 경우가 있었다. 'AI야, 여기는 건드리지 마!' 하고 말하고 싶은 순간이랄까? 수동 작업과 AI 생성 작업 사이의 균형을 잘 잡는 게 중요했다.

🗒️결론: 엔지니어에게 Lovable은 어떤 의미일까?

특히 비개발자인 PM(Jin)과 함께 아이디어를 이야기하고 몇 분 안에 그 결과가 실제 화면으로 구현된점. 그리고 코드로 바로 확인/수정 가능한 과정은 일반적인 개발 프로세스보다 훨씬 더 빠르고 즐거웠다. "이렇게 하면 어떨까요?"라는 제안이 순식간에 현실이 되는 경험은 정말 새로웠다. 물론, 그 이후 프로토타입을 실제 서비스로 발전시키는 단계에서는 엔지니어의 숙련된 리팩토링 및 추가 개발 작업이 필수적으로 따라와야 할 것.

Lovable

Build software products, using only a chat interface

https://lovable.dev/?via=proagent