Lovable을 8개월 동안 사용하면서 배운 것: 아름답고 표준화된, 유지보수가 쉬운 사이트 만들기
Source: Dev.to
프레임워크 없는 바이브 코딩의 함정
Lovable은 놀랍습니다: 원하는 것을 설명하면 자동으로 생성해 줍니다. 몇 분 안에 시각적으로 동작하는 무언가를 얻을 수 있습니다.
문제는 프롬프트 단계에서 색상, 폰트, 폴더 구조, 코드 규칙 등이 아직 정의되지 않았을 때 발생합니다. Lovable이 대신 결정을 내리기 시작하는데, 프롬프트마다 같은 결정을 내리지 않을 수도 있습니다.
해결책은 AI 사용을 줄이는 것이 아니라, 더 많은 컨텍스트를 제공하는 것입니다.
생성하기 전에 정의하기 — 반드시 물어야 할 3가지 질문
- Product – 무엇을 만들고, 누구를 위한 것인가? 문제, 대상, North Star.
- Design System – 어떻게 보일 것인가? HSL 토큰, 타이포그래피, 컴포넌트. 화면을 만들기 전에 모두 정의합니다.
- System Design – 내부적으로 어떻게 동작할 것인가? 스택, 아키텍처, 데이터베이스, 배포.
이 세 가지는 서로 다른 영역이며, 이들을 혼동하는 것이 가장 흔한 실수 중 하나입니다.
Design System ≠ System Design
- Design System: 시각적 어휘(색상 토큰, 타이포그래피, 재사용 가능한 컴포넌트). 어떻게 보이는가.
- System Design: 내부 아키텍처와 동작 방식(스택, 데이터베이스, 배포). 어떻게 동작하는가.
왜 마이크로서비스를 사용하지 않았나요???
Lovable + Supabase는 모듈형 모놀리스를 구성하며, 이는 제 상황에 맞는 올바른 선택이었습니다. 여기서 중요한 것은 같은 프로세스 안에 잘 격리된 모듈을 두는 것입니다. 이 접근법을 feature‑based architecture와 Event Bus와 결합하면 운영 복잡성 없이 책임 분리의 장점을 얻을 수 있습니다.
제가 따르는 규칙: 기능들 간에 직접적인 import를 하지 않는다. 타입이 지정된 Event Bus를 통해 통신한다. 외부 연동은 Ports & Adapters 패턴을 사용한다.
React 환경에서 SOLID — 실전 적용
- S (Single Responsibility): 하나의 컴포넌트는 한 가지 일만 담당한다. 예:
SectionHeader는 헤더를 렌더링하는 역할만 수행한다.
히어로 영상? AI로 생성
히어로 배경은 PixVerse(app.pixverse.ai)에서 텍스트‑투‑비디오 방식으로 미래지향/테크 스타일로 만든 뒤 .mp4 파일로 내보내어 다음과 같이 사용했습니다:
오버레이를 추가해 가독성을 확보했습니다. 결과: 이미지 은행도, 디자이너도, Adobe Premiere도 없이 영화 같은 비주얼을 구현했습니다.
결과
- 사이트: raphaelmoraes.dev
- 소요 시간: 구조화된 바이브 코딩 몇 시간
🔗 전체 플레이북 (Gist): https://gist.github.com/rdemoraes/e08d7318de3e3aa0e4c67d69fa1d0fa3
🎬 히어로 영상 생성 도구: https://app.pixverse.ai