Lovable 사용법: 첫 앱을 만드는 단계별 튜토리얼
실제 초보자 빌드에서 재구성한 Lovable 완전 가이드 — 구조화된 프롬프트, Plan 모드, Google 캘린더 연동, 버그 수정, 보안 스캔, PWA 배포까지. 모든 단계에 스크린샷이 있습니다.
Lovable 핵심 요약
- 첫 프롬프트는 두 가지에 집중합니다. 앱이 무엇을 하는지(목표), 사용자가 어떻게 흐름을 지나는지(플로우). 기능은 한두 개면 충분합니다.
- 보내기 전에 Build를 Plan으로 바꾸세요. Lovable이 먼저 질문을 하고, 코드가 실행되기 전에 수정할 수 있는 계획을 세워줍니다.
- 동작이 어긋나면 정확한 프롬프트로 고칩니다. "시간을 고쳐줘"보다 "태스크는 15분 단위로 시작하고, 과거로 설정하지 않아야 해"가 훨씬 잘 먹힙니다.
- 게시 전에 심층 보안 스캔을 실행하세요. "Try to fix all" 수정은 무료입니다. 자연스러운 문장 한 줄로 PWA로 바꾸면 휴대폰에 설치할 수 있습니다.
Lovable AI Tutorial for Beginners - Build Your First App
원본 영상:Kevin Stratvert11:40
스크린샷은 원본 영상에서 가져왔으며 타임스탬프 출처 링크를 함께 표시합니다. 본문은 전체 자막을 기반으로 우리가 직접 작성한 해설로, 사실 관계는 영상과 일치합니다.
이 튜토리얼은 글로 배우고 싶은 독자를 위한 독립적인 그림 해설서입니다. 창작자를 응원하려면 위에 링크된 Lovable 공식 협업 영상을 시청해 주세요.
Lovable로 앱 만들기, 단계별 가이드
- 1
작업 공간 둘러보기
가입 후 도착하는 곳이 Lovable 작업 공간입니다. 왼쪽 사이드바에 Home, 검색, 리소스, 커넥터가 있고 그 아래 최근 채팅이 이어집니다. 가운데 프롬프트 박스가 모든 앱의 출발점이고, 그 아래에는 템플릿 모음이 자리합니다.
Lovable 작업 공간: 가운데 프롬프트 박스, 왼쪽에 채팅과 커넥터.0:40 지점 보기 - 2
구조화된 첫 프롬프트 작성하기
입력하기 전에 두 가지를 분명히 하세요. 목표(앱이 하는 일)와 흐름(사용자가 앱을 통과하는 방식). 이번 빌드는 음성에서 캘린더로 이어지는 앱입니다. 말로 할 일을 얘기하면 Google 캘린더에 일정으로 넣어주죠. 제약 조건도 쓰세요 — 태스크는 특별히 말하지 않으면 30분, 저장 전 사용자 확인 필수 — 그리고 clean, sleek, minimal 같은 단어로 분위기를 정하고 마지막에 "제가 원하는 것을 완전히 이해하려면 무엇이든 물어보세요"를 붙입니다.
완성된 첫 프롬프트: 목표, 흐름, 제약, 분위기, 질문 요청까지.3:20 지점 보기 - 3
보내기 전에 Plan 모드로 전환
프롬프트 박스 아래 Build 드롭다운을 열고 Plan — "만들기 전에 상의"(Alt+P로 전환)를 고르세요. Plan 모드에서는 Lovable이 먼저 질문하고 계획을 세우기 때문에 엉뚱한 앱이 만들어지는 걸 막을 수 있습니다. 첫 프로젝트라면 가장 값진 습관입니다.
Build/Plan 드롭다운: 만들기 전에 상의하는 Plan 선택.2:40 지점 보기 - 4
확인 질문에 답하기
Lovable이 질문을 가져옵니다 — 강조색 고르기 같은 비주얼 질문에 이어, 음성 전사를 무료 내장으로 할지 서드파티를 쓸지, Lovable 커넥터로 Google 캘린더를 연결할지 같은 기능 질문이 옵니다. 솔직하게 답하세요. 여기서의 모호한 답이 나중에 모호한 기능이 됩니다.
확인 질문: 강조색을 고르고 기능 선택지에 답합니다.4:12 지점 보기 - 5
계획을 읽고 승인하기
계획은 룩앤필, 화면과 흐름, 작동 방식 같은 쉬운 섹션과 기술 세부로 나뉩니다. 코드를 몰라도 "화면과 흐름"은 꼭 확인하세요. 그게 종이 위의 여러분 앱입니다. 이상하면 승인하지 말고 프롬프트 박스에 수정할 내용을 적고, 맞아떨어지면 Approve를 누릅니다.
생성된 계획: 검토하고, 수정을 요청한 뒤 승인합니다.5:00 지점 보기 - 6
중간에 Google 캘린더 연결하기
빌드 중간에 Lovable이 멈추고 Google 캘린더 연결을 요청합니다. 연결 버튼을 눌러 Google 계정으로 로그인하고 프로젝트에 연결하세요. 이 데모에서는 캘린더가 내 계정으로 고정되어 있고, 나중에 사용자별 로그인 방식으로 바꿔 함께 쓸 수도 있습니다.
빌드 중간에 Lovable이 Google 캘린더 연결을 요청합니다.5:35 지점 보기 - 7
말로 직접 테스트하기
앱 미리보기가 나타나면 마이크를 누르고 실제로 쏟아내 보세요. "TPS 보고서 새 표지 붙여서 Bill에게 보내고, 고객 명단 요약은 Charles에게 보내야 해." 녹음을 멈추면 앱이 그 말을 승인 대기 중인 태스크 카드로 바꿔줍니다.
첫 음성 테스트: 할얘기가 태스크로 변환됩니다.5:50 지점 보기 - 8
정확한 프롬프트로 동작 고치기
첫 버그: 태스크가 말한 바로 그 시각에 배정됐습니다. 수정 지시는 정확하게 — "태스크는 현재 시각이 아니라 가장 가까운 15분 단위로 시작해야 하고(과거는 안 됨)." Lovable은 이 변경을 작은 카드로 기록합니다. 앞서 계획을 제대로 잡았기에 이런 정밀 지시가 통하는 겁니다.
정확한 수정 프롬프트가 태스크를 15분 단위로 맞춥니다.8:00 지점 보기 - 9
날짜 표현을 가르치기
"내일 오전 10시에 Kevin에게 전화"라고 했더니 새벽 3시로 잡혔습니다. 상대 날짜를 아직 파싱하지 못하는 거죠. 규칙을 프롬프트로 알려주세요. tomorrow, yesterday, Friday at 3 p.m.을 인식할 것, morning은 오전 11시 전, afternoon은 오후 1-4시, next Monday는 바로 이번 주가 아닌 다다음 주 월요일이라는 식으로요. 예시가 구체적일수록 나중의 수정이 줄어듭니다.
음성 날짜 규칙: when 예시와 duration 예시를 하나하나 나열.7:40 지점 보기 - 10
스크린샷을 붙여 Plan 모드에서 디버깅
시간이 여전히 7시간쯤 어긋나 있습니다. 시간대 버그죠. 잘못된 시간의 스크린샷을 프롬프트 창에 바로 붙여넣고 관찰을 말합니다. "시간이 약 7시간 어긋나 보니까 시간대 문제 같아." 그리고 Plan 모드로 돌아가 수정하고, 계획이 너무 기술적이면 "기술 없이도 이해할 수 있는 말로 설명해줘"라고 덧붙입니다.
버그를 캡처해 붙이고 현상을 말하면 Plan 모드가 수정안을 냅니다.8:55 지점 보기 - 11
게시하고 URL 받기
게시 전 마지막 프롬프트로 앱을 "내 캘린더"에서 "각자 자기 캘린더" 방식으로 바꿔 다른 사람이 내 일정을 못 건드리게 합니다. 그다음 오른쪽 위 Publish를 누르면 무료 lovable.app URL을 받고(커스텀 도메인은 Pro), 공개 범위를 고르고 제목·설명·소셜 이미지를 설정합니다.
게시 흐름: 무료 lovable.app URL과 앱 메타 정보.9:45 지점 보기 - 12
보안 스캔 돌리고 PWA 더하기
라이브로 전환하기 전 Lovable이 심층 보안 스캔을 권합니다. AI 생성 코드일수록 값지죠. "Try to fix all"로 적용한 수정은 크레딧이 들지 않습니다. 그다음 프롬프트 한 줄로 폰 설치를 더합니다. "내 폰에 앱 아이콘으로 설치할 수 있게 해줘. 아이콘은 청록색 마이크로." manifest와 터치 아이콘이 생성됩니다.
보안 수정은 무료 — PWA 프롬프트로 설치 가능해집니다.10:40 지점 보기 - 13
휴대폰에 설치하기
업데이트를 게시하고 폰 브라우저에서 URL을 연 뒤 공유 아이콘을 누릅니다. 홈 화면에 추가를 고르고 추가를 확정하면 앱 아이콘이 홈 화면에 자리 잡습니다. 누르면 네이티브 앱처럼 전체 화면으로 실행되고, 앱 스토어는 필요 없습니다.
홈 화면에 추가로 게시된 앱이 폰 아이콘이 됩니다.11:00 지점 보기