티스토리 뷰
Lovable이 뭔가요?
Lovable은 텍스트로 설명하면 자동으로 웹앱을 만들어주는 플랫폼입니다. 개발자가 수일
수주 걸려 만들 앱을 30분
1시간 만에 뚝딱 완성할 수 있습니다.
가장 놀라운 점은 HTML, CSS, JavaScript를 전혀 몰라도 된다는 것입니다. "이런 앱이 필요해"라고 설명하면, Lovable이 코드를 짜주고 즉시 배포까지 해줍니다.
오늘 우리가 만들 것: 설비 점검 체크리스트 웹앱
제조업 현장에서 매일 쓰는 설비 점검 리스트를 종이 대신 웹앱으로 만들어보겠습니다.
Step 1: Lovable 가입 및 시작
1단계: lovable.dev 접속
https://lovable.dev/
2단계: "Start building for free" 클릭 → 구글 계정으로 가입
3단계: 대시보드에서 "New project" 클릭
AI App Builder | Vibe Code Apps & Websites with AI, Fast
Build apps, websites, and digital products faster using Lovable’s no-code and AI-powered platform, no deep coding skills required.
lovable.dev
무료 플랜 기준: 월 5개 프로젝트, 100회 AI 요청 제공 (실습에 충분합니다)
Step 2: 첫 번째 앱 요청 (프롬프트 입력)
Lovable 화면 중앙에 큰 입력창이 있습니다. 여기에 원하는 앱을 설명하면 됩니다.
[실습 1] 간단한 버전으로 시작하기
아래 내용을 그대로 입력해보세요:
설비 일상점검 체크리스트 웹앱을 만들어줘.
기능:
- 점검 항목 목록 (체크박스 형태)
- 점검자 이름 입력
- 점검 날짜 자동 표시
- 점검 완료 시 "완료" 버튼
- 완료된 항목은 초록색으로 표시
점검 항목 예시:
- 오일 레벨 확인
- 벨트 장력 확인
- 냉각수 레벨 확인
- 이상 소음 여부
- 진동 이상 여부
디자인은 깔끔하고 모바일에서도 보기 좋게 해줘.
Lovable이 1~2분 안에 실제 동작하는 앱을 만들어줍니다.
Step 3: 결과 확인 및 수정 요청
앱이 생성되면 오른쪽 미리보기 화면에서 바로 테스트할 수 있습니다.
마음에 들지 않는 부분이 있으면 추가로 요청합니다.
수정 요청 예시:
"헤더 색상을 파란색 계열로 바꿔줘"
"각 점검 항목 옆에 특이사항을 메모할 수 있는 텍스트 입력창을 추가해줘"
"점검 완료 후 PDF로 저장할 수 있는 버튼을 추가해줘"
이렇게 대화하듯 수정하면 앱이 실시간으로 업데이트됩니다.
Step 4: 더 복잡한 앱 만들기 (중급)
이번엔 데이터를 저장하는 앱을 만들어봅시다.
[실습 2] 불량 이력 관리 앱
아래 내용을 입력하세요:
불량 이력 관리 웹앱을 만들어줘.
화면 구성:
- 상단: 불량 등록 폼
- 발생일자 (날짜 선택)
- 공정명 (드롭다운: 사출/도장/조립/검사)
- 불량 유형 (텍스트 입력)
- 불량 수량 (숫자 입력)
- 담당자 (텍스트 입력)
- 조치사항 (텍스트 에어리어)
- 하단: 등록된 불량 목록 (테이블 형태)
- 최신 순으로 정렬
- 공정별 필터 기능
- 항목 삭제 기능
데이터는 브라우저에 임시 저장되는 방식으로 구현해줘.
디자인은 업무용으로 깔끔하게.
Step 5: 배포 및 공유
Lovable로 만든 앱은 자동으로 인터넷에 배포됩니다.
1단계: 상단 "Publish" 버튼 클릭
2단계: 자동으로 URL이 생성됨 (예: myapp.lovable.app)
3단계: 이 URL을 동료들과 공유
QR 코드를 만들어 현장에 부착하면 스마트폰으로 바로 접속 가능합니다. 별도 앱 설치 없이 바로 사용할 수 있습니다.
Lovable 활용 아이디어 모음
제조업 현장에서 바로 써먹을 수 있는 앱 아이디어입니다.
| 앱 이름 | 핵심 기능 | 제작 난이도 |
|---|---|---|
| 설비 점검 체크리스트 | 체크박스, 날짜 자동입력 | ★☆☆ |
| 불량 이력 등록 | 폼, 목록, 필터 | ★★☆ |
| 작업지시서 조회 | 검색, 상태 표시 | ★★☆ |
| 자재 입출고 기록 | 입력폼, 재고 계산 | ★★★ |
| 협력사 연락처 관리 | DB, 검색 기능 | ★★☆ |
| 납기 현황 대시보드 | 차트, 진행률 | ★★★ |
Lovable 사용 시 꿀팁
팁 1: 구체적일수록 좋은 결과가 나옵니다
나쁜 요청: "불량 관리 앱 만들어줘"
좋은 요청: "불량 발생일, 공정명, 불량수량을 입력하는 폼과 목록 화면이 있는 앱을 만들어줘. 공정명은 드롭다운으로 구성하고, 목록은 날짜 내림차순으로 정렬해줘"
팁 2: 단계적으로 기능을 추가하세요
한 번에 너무 많은 기능을 요청하면 오류가 날 수 있습니다. 기본 화면부터 만들고 기능을 하나씩 추가하는 방식이 안정적입니다.
팁 3: 오류가 나면 "고쳐줘"라고 하세요
Lovable 하단에 오류 메시지가 표시되면 그대로 복사해서 "이 오류 고쳐줘"라고 입력하면 자동으로 수정됩니다.
Google AI Studio와 연결하기 (심화)
어제 발급받은 Google AI Studio API 키를 Lovable 앱에 연결하면 AI 기능이 추가됩니다.
예시 요청:
"불량 이력 앱에 AI 분석 기능을 추가해줘. 등록된 불량 데이터를 분석해서 가장 많이 발생하는 불량 유형과 개선 제안을 보여주는 버튼을 만들어줘. Gemini API를 사용하고 API 키는 사용자가 직접 입력하도록 설정 화면을 만들어줘."
이렇게 하면 AI가 탑재된 웹앱이 완성됩니다.
오늘의 실습 미션
미션 1: 설비 점검 체크리스트 앱 완성 및 배포
미션 2: URL 생성 후 스마트폰에서 접속 테스트
미션 3: 우리 회사에 필요한 앱 1가지 아이디어 메모해두기
정리
Lovable은 "말로 하는 앱 개발"의 정수입니다. 코딩 지식이 없어도, 원하는 것을 구체적으로 설명할 수 있다면 누구나 앱을 만들 수 있습니다.
내일은 Antigravity를 활용한 업무 자동화 파이프라인을 구축해봅니다. 반복 업무를 자동화해서 매주 몇 시간씩 아끼는 방법을 다룹니다.
- [바이브코딩 7일 완성 #1] 바이브코딩이란? 코딩 몰라도 앱 만드는 시대가 왔다.
- [바이브코딩 7일 완성 #2] Google AI Studio 완전 정복 : 무료로 AI 앱 만드는 법
- [바이브코딩 7일 완성 #3] Lovable로 웹앱 30분 만에 뚝딱 : 코딩 없이 앱 제작 실전
- [바이브코딩 7일 완성 #4] Antigravity로 반복 업무 자동화 : 매주 3시간 아끼는 법
- [바이브코딩 7일 완성 #5] Stitch로 UI 디자인 -> 코드 자동 변환 : 구글의 새 무기
- [바이브코딩 7일 완성 #6] 바이브코딩 실전 : 제조업 생산 대시보드 처음부터 끝까지 만들기
- [바이브코딩 7일 완성 #7] 실무 적용 전략과 앞으로의 로드맵