Visual Editor로 작은 수정은 프롬프트 없이 끝내기

버튼 색 하나 바꾸려고 AI를 다시 부르지 마세요

첫 프로젝트를 만들고 나면 이상하게 손이 근질근질해집니다. 헤드라인이 조금 길어 보이고, 버튼 색이 마음에 들지 않고, 가격 카드의 문구가 어딘가 어색합니다. 초보자일수록 이때 바로 프롬프트 창에 이렇게 쓰고 싶어집니다.

"버튼 색을 더 예쁘게 바꿔줘."

물론 러버블은 바꿔줍니다. 문제는 이런 작은 수정까지 매번 AI에게 맡기면, 진짜 중요한 기능을 만들 때 쓸 크레딧이 빠르게 줄어든다는 점입니다. 우리가 아끼고 싶은 것은 시간만이 아닙니다. 무료 사용자에게는 크레딧도 예산입니다.

러버블에는 이런 작은 수정을 위해 Visual Editor, 또는 문서에서 말하는 Visual Edits 기능이 있습니다. 프로젝트 미리보기 화면에서 요소를 직접 선택하고, 텍스트, 색상, 이미지, 일부 여백과 스타일을 눈으로 보며 수정하는 노코드 편집 도구입니다. 공식 문서에 따르면 Visual Edits는 레이아웃, 텍스트, 색상, 이미지 등을 코드 작성 없이 빠르게 바꾸도록 설계되어 있으며, 일일 무료 한도 안에서는 크레딧을 쓰지 않습니다.¹

이 장에서 배울 핵심은 단순합니다.

이미 있는 것을 조금 고치는 일은 Visual Editor로, 구조나 기능을 바꾸는 일은 프롬프트로.

이 기준 하나만 잡아도 무료 사용자 기준 작업 효율이 크게 달라집니다.

Visual Editor는 무엇을 해주는 도구인가

Visual Editor는 쉽게 말해 "웹페이지 위에 붙은 편집 모드"입니다. 일반적인 미리보기에서는 버튼을 누르면 이동하거나 폼이 작동합니다. 하지만 Visual Editor로 들어가면 버튼, 제목, 카드, 이미지 같은 화면 요소를 클릭해서 선택할 수 있습니다. 그리고 오른쪽 또는 편집 패널에서 내용을 바꾸거나 스타일을 조정합니다.

러버블 공식 문서 기준으로 Visual Edits에서는 페이지의 요소를 선택해 텍스트, 색상, 폰트, 이미지, 여백과 패딩 같은 스타일을 조정할 수 있고, 이미지 업로드나 이미지 URL 교체도 가능합니다.¹ 여기서 패딩은 요소 안쪽 여백을 뜻합니다. 예를 들어 버튼 글자와 버튼 테두리 사이의 공간이 패딩입니다. 마진은 요소 바깥 여백입니다. 예를 들어 카드와 카드 사이의 간격이 마진입니다.

초보자 입장에서는 이 설명만으로도 충분합니다. Visual Editor는 "코드를 몰라도, 프롬프트를 쓰지 않고, 화면을 보면서 작은 디자인 수정을 하는 곳"입니다.

보통 사용 흐름은 이렇습니다.

1. 러버블 프로젝트를 엽니다.

2. 미리보기 또는 프롬프트 영역 근처에서 Edit, Visual Edits, 또는 유사한 편집 버튼을 찾습니다.

3. 편집 모드로 들어간 뒤 바꾸고 싶은 요소를 클릭합니다.

4. 텍스트, 색상, 이미지, 여백 등을 조정합니다.

5. 미리보기에서 결과를 확인하고 적용합니다.

버튼 이름이나 위치는 러버블 업데이트에 따라 조금씩 달라질 수 있습니다. 하지만 개념은 같습니다. 프롬프트를 보내기 전에 먼저 화면에서 직접 고칠 수 있는지 확인하는 것입니다.

공식 FAQ에서도 텍스트나 색상은 Visual Edits로 직접 수정할 수 있다고 안내합니다.² 그러니 "이 버튼 문구만 바꾸고 싶은데…" 정도의 일이라면 AI에게 다시 코딩을 시킬 필요가 없습니다.

크레딧을 아끼는 첫 번째 기준: 내용과 스타일은 직접 고친다

초보자가 가장 많이 낭비하는 크레딧은 대단한 기능 때문이 아닙니다. 오히려 아주 사소한 수정 때문에 사라집니다.

"제목을 조금 짧게 해줘."

"버튼을 파란색 말고 초록색으로 바꿔줘."

"가격 문구를 월 9,900원으로 바꿔줘."

"후기 이미지를 다른 사진으로 바꿔줘."

이런 요청 하나하나는 별것 아닌 것처럼 보입니다. 하지만 프롬프트로 보내면 러버블은 프로젝트를 다시 읽고, 코드를 수정하고, 결과를 반영합니다. 무료 사용자에게는 이 과정이 아깝습니다. 왜냐하면 이런 일은 사람이 직접 보는 편이 더 빠르고 정확하기 때문입니다.

예를 들어 프리랜서 포트폴리오 페이지를 만들었다고 해봅시다. 첫 화면 버튼이 "Get Started"로 나왔습니다. 한국어 사이트인데 영어 버튼이 어색합니다. 이때 프롬프트에 "Get Started를 상담 문의하기로 바꿔줘"라고 쓰는 대신 Visual Editor에서 버튼을 클릭하고 문구를 직접 바꾸면 됩니다.

버튼 색도 마찬가지입니다. "조금 더 신뢰감 있는 파란색으로 바꿔줘"라고 쓰면 AI가 어떤 파란색을 선택할지 알 수 없습니다. 하지만 Visual Editor에서 직접 색을 고르면 눈으로 보면서 결정할 수 있습니다. 브랜드 컬러가 있다면 헥스 코드, 예를 들어 #2563EB 같은 값을 넣어 더 정확하게 맞출 수도 있습니다.

이제 기준을 정리해봅시다. 다음 작업은 Visual Editor로 먼저 처리합니다.

• 버튼 문구 변경

• CTA 버튼 색상 조정

• 헤드라인과 설명 문구 다듬기

• 카드 제목, 가격, 혜택 문구 수정

• 후기 이름, 직함, 짧은 인용문 변경

• 이미지 교체

• 폰트 크기나 굵기 조정

• 카드 안쪽 여백과 섹션 간격 미세 조정

여기서 CTA는 Call To Action의 줄임말입니다. 사용자가 눌러야 하는 핵심 행동 버튼을 뜻합니다. "상담 신청하기", "무료 견적 받기", "전자책 다운로드" 같은 버튼이 CTA입니다.

랜딩 페이지에서 CTA는 계산대와 같습니다. 아무리 매장이 예뻐도 계산대가 안 보이면 손님은 나갑니다. 그래서 Visual Editor로 가장 먼저 점검해야 하는 요소도 CTA입니다.

프롬프트가 필요한 수정과 필요 없는 수정 구분하기

Visual Editor가 편하다고 해서 모든 것을 Visual Editor로 해결하려 하면 안 됩니다. 이 도구는 작은 수정에 강합니다. 이미 존재하는 UI의 내용과 스타일을 고칠 때 특히 좋습니다.

반대로 페이지 구조가 바뀌거나, 새로운 기능이 생기거나, 데이터 저장 방식이 바뀌는 일은 프롬프트가 필요합니다. 러버블에게 다시 설계를 맡겨야 하는 작업이기 때문입니다.

여기서 중요한 기준은 "겉모습만 바꾸는가, 작동 방식도 바꾸는가"입니다.

예를 들어 버튼의 문구를 "문의하기"에서 "무료 상담 신청"으로 바꾸는 것은 겉모습 수정입니다. Visual Editor로 충분합니다. 하지만 버튼을 누르면 새 문의 페이지로 이동하게 만들거나, 카카오톡 채널 링크로 연결하거나, 폼 제출 후 자동 이메일을 보내게 하는 것은 작동 방식 수정입니다. 이때는 프롬프트로 요청해야 합니다.

초보자를 위해 더 현실적으로 나눠보겠습니다.

특히 다른 가이드에서도 Edit Mode에서는 섹션 이동이나 삭제 같은 레이아웃 조정이 제한될 수 있으므로 그런 작업은 프롬프트로 처리하라고 설명합니다.³ 초보자에게는 이 기준이 안전합니다. 억지로 Visual Editor로 구조를 비틀다 보면 데스크톱에서는 그럴듯한데 모바일에서 깨지는 일이 생깁니다.

기억하세요. Visual Editor는 붓과 지우개에 가깝습니다. 집의 벽지를 바꾸고 액자를 거는 데 좋습니다. 하지만 방을 하나 더 만들거나 계단 위치를 바꾸는 일은 설계자에게 말해야 합니다. 러버블에서 그 설계자가 바로 프롬프트입니다.

랜딩 페이지에서 먼저 고쳐야 할 다섯 곳

Visual Editor를 켜면 모든 것이 고치고 싶어집니다. 제목도, 색상도, 이미지도, 카드도 눈에 들어옵니다. 하지만 초보자에게 가장 위험한 작업 방식은 "눈에 보이는 대로 다 만지는 것"입니다. 그렇게 하면 페이지가 점점 예뻐지는 것 같다가 어느 순간 전체 균형이 무너집니다.

먼저 전환에 가까운 요소부터 봐야 합니다. 전환은 방문자가 내가 원하는 행동을 하는 것입니다. 문의하기 버튼 클릭, 상담 신청 제출, 전자책 구매 버튼 클릭, 예약 요청 제출 같은 행동입니다.

사업형 웹사이트나 부업용 랜딩 페이지라면 Visual Editor에서 다음 다섯 곳을 우선 점검하세요.

• 헤드라인

• CTA 버튼

• 후기 카드

• 가격표 또는 패키지 카드

• 문의 폼

헤드라인은 첫인상입니다. 방문자가 3초 안에 "여기가 나에게 필요한 곳이구나"라고 느껴야 합니다. "최고의 솔루션을 제공합니다"보다 "1인 사업자를 위한 7일 완성 포트폴리오 제작"이 더 낫습니다. 멋있는 말보다 구체적인 말이 더 강합니다.

CTA 버튼은 행동의 출구입니다. 버튼 문구는 짧고 분명해야 합니다. "더 알아보기"는 편하지만 약합니다. "무료 상담 신청하기", "견적 요청하기", "포트폴리오 보기"처럼 다음 행동이 바로 떠올라야 합니다.

후기 카드는 신뢰를 만듭니다. "좋았어요"보다는 "문의 페이지를 바꾼 뒤 상담 신청이 주 2건에서 7건으로 늘었습니다"가 훨씬 강합니다. 숫자가 있으면 좋지만, 거짓으로 꾸미면 안 됩니다. 처음에는 실제 고객 후기가 없을 수 있습니다. 그럴 때는 "베타 테스트 참여자", "지인 피드백", "샘플 후기"처럼 정직하게 표시하세요.

가격표는 망설임을 줄여야 합니다. 가격이 너무 복잡하면 방문자는 비교하다가 지칩니다. 초보 프리랜서나 개인 사업자 사이트라면 처음에는 2~3개 옵션만 두는 편이 좋습니다. 예를 들어 "기본형", "표준형", "집중형" 정도면 충분합니다.

문의 폼은 가장 마지막 관문입니다. 여기서 입력칸이 너무 많으면 사용자가 포기합니다. 처음에는 이름, 연락처, 문의 내용 정도로 시작하세요. 필요한 경우에만 예산, 희망 일정, 서비스 유형을 추가하면 됩니다.

Visual Editor는 이 다섯 곳을 빠르게 다듬는 데 아주 좋습니다. 특히 문구를 짧게 줄이고, 버튼 색을 더 눈에 띄게 만들고, 카드 간격을 정리하는 일은 프롬프트보다 직접 수정이 빠릅니다.

문구 수정은 짧고 또렷하게

AI가 처음 만들어준 페이지는 종종 말이 많습니다. "고객님의 비즈니스 성장을 위한 혁신적이고 직관적인 디지털 경험을 제공합니다" 같은 문장이 나올 수 있습니다. 틀린 말은 아니지만, 방문자의 머릿속에는 잘 남지 않습니다.

Visual Editor로 문구를 고칠 때는 한 가지 질문만 하면 됩니다.

방문자가 이 문장을 보고 바로 이해할 수 있는가?

예를 들어 프리랜서 디자이너의 포트폴리오 사이트라면 다음처럼 바꿀 수 있습니다.

좋은 문구는 거창하지 않습니다. 읽는 사람이 자기 상황을 떠올리게 만듭니다. "나 같은 사람을 위한 서비스네"라는 느낌을 주면 됩니다.

특히 버튼 문구는 짧아야 합니다. 모바일 화면에서는 버튼 안의 문구가 길면 두 줄로 떨어지거나 잘릴 수 있습니다. "지금 바로 나에게 맞는 맞춤형 상담을 신청하세요"보다는 "무료 상담 신청"이 낫습니다.

초보자는 문구를 바꿀 때 욕심을 내기 쉽습니다. 하지만 랜딩 페이지 문구의 목적은 문학상이 아닙니다. 사용자가 이해하고 클릭하게 만드는 것입니다.

색상 수정은 예쁨보다 대비가 먼저다

버튼 색을 고칠 때 많은 사람이 "예쁜 색"을 찾습니다. 하지만 랜딩 페이지에서는 예쁨보다 중요한 것이 있습니다. 대비입니다.

대비는 배경과 버튼이 얼마나 잘 구분되는지를 뜻합니다. 흰 배경에 연한 회색 버튼을 두면 고급스러워 보일 수는 있지만, 사용자가 버튼을 놓칠 수 있습니다. 검은 배경에 어두운 파란색 버튼을 두면 분위기는 맞을지 몰라도 읽기 어렵습니다.

Visual Editor에서 CTA 버튼 색을 바꿀 때는 다음 순서로 봅니다.

• 배경과 버튼이 멀리서도 구분되는가

• 버튼 안의 글자가 또렷하게 읽히는가

• 페이지에서 가장 중요한 버튼이 다른 요소보다 먼저 보이는가

• 같은 역할의 버튼은 같은 색을 쓰고 있는가

• 위험하거나 취소하는 버튼과 주요 CTA 색이 헷갈리지 않는가

예를 들어 메인 CTA를 파란색으로 정했다면, 페이지 곳곳의 핵심 버튼도 비슷한 파란색 계열을 쓰는 편이 좋습니다. 어떤 버튼은 보라색, 어떤 버튼은 초록색, 어떤 버튼은 주황색이면 사용자는 무엇이 중요한지 헷갈립니다.

개인 사업자 사이트에서는 색상 수를 줄이는 것이 오히려 전문적으로 보입니다. 기본 배경색, 본문 글자색, 포인트 색, 보조 배경색 정도면 충분합니다. Visual Editor에서 색을 만지다 보면 팔레트가 점점 늘어나는데, 그럴수록 페이지는 아마추어처럼 보이기 쉽습니다.

색을 고를 때 자신이 없다면 브랜드 컬러 하나만 정하세요. 그리고 CTA 버튼, 링크, 강조 아이콘에 반복해서 쓰면 됩니다. 통일감은 디자인 실력처럼 보입니다.

간격 수정은 '숨 쉴 공간'을 만드는 일이다

초보자가 만든 페이지에서 가장 흔한 문제는 내용이 부족한 것이 아닙니다. 오히려 너무 붙어 있는 경우가 많습니다. 제목과 설명이 붙어 있고, 카드와 카드 사이가 답답하고, 버튼이 위아래 요소에 눌려 있습니다.

이때 Visual Editor에서 여백을 조금만 조정해도 페이지가 훨씬 정돈되어 보입니다. 여백은 빈 공간이 아니라 사용자가 내용을 읽을 수 있게 도와주는 숨 쉴 공간입니다.

카드형 섹션을 예로 들어봅시다. "서비스 3가지"를 보여주는 카드가 있습니다. 카드 안에는 아이콘, 제목, 설명, 버튼이 들어갑니다. 이 요소들이 서로 너무 붙어 있으면 사용자는 어디부터 읽어야 할지 모릅니다. 반대로 적당한 간격이 있으면 시선이 자연스럽게 위에서 아래로 흐릅니다.

Visual Editor에서 간격을 수정할 때는 숫자를 크게 바꾸지 마세요. 한 번에 많이 바꾸면 어디서 균형이 깨졌는지 알기 어렵습니다. 8, 12, 16, 24처럼 작은 단위로 조정하는 편이 안전합니다. 정확한 숫자를 몰라도 괜찮습니다. 핵심은 한 번에 크게 흔들지 않는 것입니다.

특히 다음 부분의 간격을 점검하세요.

• 헤드라인과 설명 문구 사이

• 설명 문구와 CTA 버튼 사이

• 카드 제목과 카드 본문 사이

• 가격 카드 내부의 가격과 혜택 목록 사이

• 문의 폼 입력칸 사이

문의 폼에서는 간격이 특히 중요합니다. 입력칸 사이가 너무 좁으면 사용자가 답답하게 느낍니다. 반대로 너무 넓으면 폼이 길어 보입니다. 폼은 짧아 보이되, 손가락으로 누르기 편해야 합니다.

이미지 교체는 분위기를 한 번에 바꾼다

러버블이 만들어준 첫 화면에는 종종 추상적인 그래픽이나 일반적인 이미지가 들어갑니다. 처음에는 괜찮아 보이지만, 사업형 웹사이트에서는 "내 서비스다운 느낌"이 중요합니다.

Visual Editor에서 이미지를 교체할 수 있다면 가장 먼저 히어로 영역의 이미지를 확인하세요. 히어로 영역은 페이지 맨 위의 첫 화면입니다. 방문자가 처음 보는 큰 제목, 설명, 버튼, 대표 이미지가 있는 곳입니다.

프리랜서 포트폴리오라면 실제 작업물 캡처가 좋습니다. 상담 예약 페이지라면 사람이 상담을 받는 듯한 따뜻한 이미지가 어울립니다. 전자책 랜딩 페이지라면 전자책 표지 목업이 효과적입니다. 목업은 실제 제품처럼 보이게 만든 예시 이미지입니다.

다만 이미지를 바꿀 때는 세 가지를 조심해야 합니다. 첫째, 저작권이 불분명한 이미지를 쓰면 안 됩니다. 둘째, 너무 큰 이미지는 페이지 로딩을 느리게 만들 수 있습니다. 셋째, 데스크톱에서는 멋져 보여도 모바일에서 얼굴이나 핵심 부분이 잘릴 수 있습니다.

Visual Editor로 이미지를 교체했다면 반드시 모바일 미리보기에서 확인하세요. 사람 얼굴이 반으로 잘리거나, 제품 이미지가 너무 작아지거나, 버튼을 밀어내고 있지 않은지 봐야 합니다.

데스크톱에서 예쁘면 끝? 모바일에서 다시 시작입니다

초보자가 가장 자주 놓치는 것이 모바일 확인입니다. 노트북 화면에서 열심히 다듬은 페이지가 스마트폰에서는 엉망이 되는 일이 흔합니다.

특히 Visual Editor로 텍스트를 길게 바꾸거나 버튼 크기와 여백을 조정한 뒤에는 모바일에서 문제가 생길 수 있습니다. 데스크톱에서는 한 줄이던 버튼 문구가 모바일에서는 두 줄이 됩니다. 카드 3개가 나란히 있을 때는 예뻤는데, 모바일에서 세로로 쌓이면서 간격이 이상해질 수 있습니다. 문의 폼 입력칸이 화면 밖으로 삐져나오는 경우도 있습니다.

Visual Editor로 수정한 직후에는 모바일 미리보기에서 다음 네 곳을 빠르게 훑어보세요.

• 첫 화면에서 헤드라인과 CTA가 한눈에 보이는지

• CTA 버튼 문구가 잘리지 않는지

• 가격표 카드가 자연스럽게 세로로 쌓이는지

• 문의 폼 입력칸과 제출 버튼이 화면 폭에 맞는지

이 확인은 오래 걸리지 않습니다. 1분이면 됩니다. 하지만 이 1분을 건너뛰면 방문자가 스마트폰에서 페이지를 열었을 때 바로 나가버릴 수 있습니다.

개인 사업자나 프리랜서 사이트의 방문자는 대부분 모바일로 들어올 가능성이 큽니다. 인스타그램 프로필 링크, 카카오톡 공유, 문자 링크, 네이버 검색 결과를 통해 들어오는 사용자는 스마트폰을 씁니다. 그러니 "내 노트북에서 예쁜 페이지"보다 "고객의 휴대폰에서 잘 되는 페이지"가 더 중요합니다.

수정 후에는 예쁜지보다 작동하는지 확인한다

Visual Editor로 고친 뒤에는 뿌듯합니다. 버튼 색도 예뻐졌고, 문구도 좋아졌고, 이미지도 바뀌었습니다. 하지만 여기서 끝내면 안 됩니다. 웹페이지는 포스터가 아닙니다. 사용자가 클릭하고, 이동하고, 입력하고, 제출해야 합니다.

따라서 수정 후 테스트는 필수입니다. 테스트라고 해서 개발자처럼 복잡하게 할 필요는 없습니다. 실제 방문자가 된 것처럼 눌러보면 됩니다.

가장 기본적인 테스트 흐름은 이렇습니다.

1. 첫 화면에서 CTA 버튼을 클릭한다.

2. 메뉴가 있다면 각 메뉴가 올바른 위치로 이동하는지 확인한다.

3. 가격표 버튼을 눌러 문의 폼이나 결제 안내 위치로 가는지 확인한다.

4. 문의 폼에 이름, 연락처, 문의 내용을 입력한다.

5. 제출 버튼을 눌렀을 때 예상한 메시지나 동작이 나오는지 본다.

6. 모바일 화면에서 같은 과정을 반복한다.

이 과정에서 버튼이 안 눌리거나, 엉뚱한 위치로 이동하거나, 폼 제출 후 아무 반응이 없다면 Visual Editor로 해결할 문제가 아닐 수 있습니다. 그때는 프롬프트로 기능 수정을 요청해야 합니다.

예를 들어 이렇게 요청할 수 있습니다.

문의 폼 제출 버튼이 클릭되어도 아무 반응이 없습니다. 현재 폼 구조를 확인하고, 사용자가 이름/연락처/문의 내용을 입력한 뒤 제출하면 성공 메시지가 보이도록 수정해 주세요. 아직 데이터베이스 저장은 추가하지 말고, 프론트엔드 동작만 안정적으로 만들어 주세요.

이 프롬프트는 범위가 작고 명확합니다. "폼 고쳐줘"보다 훨씬 안전합니다. Visual Editor로 해결할 수 없는 기능 문제만 프롬프트로 넘기는 방식입니다.

Visual Editor를 쓸 때의 안전한 작업 순서

작은 수정이라도 순서가 있으면 실수가 줄어듭니다. 특히 무료 사용자라면 "마음 가는 대로 고치기"보다 "짧은 점검 루틴"을 만드는 편이 좋습니다.

추천하는 순서는 다음과 같습니다.

1. 수정할 요소를 하나만 정합니다.

2. Visual Editor에서 해당 요소를 선택합니다.

3. 텍스트, 색상, 이미지, 여백 중 한 종류만 먼저 바꿉니다.

4. 데스크톱 미리보기에서 확인합니다.

5. 모바일 미리보기에서 확인합니다.

6. 클릭이나 입력이 필요한 요소라면 실제로 작동 테스트를 합니다.

7. 마음에 들면 다음 요소로 넘어갑니다.

예를 들어 CTA 버튼을 고친다면 한 번에 문구, 색상, 크기, 위치, 링크를 모두 만지지 마세요. 먼저 문구를 바꾸고 확인합니다. 그다음 색상을 바꿉니다. 그다음 여백을 조정합니다. 이렇게 해야 문제가 생겼을 때 원인을 찾기 쉽습니다.

러버블에는 작업 히스토리를 보고 이전 버전으로 되돌리는 기능도 있습니다. 공식 FAQ는 프로젝트 히스토리에서 이전 상태를 미리보고 필요하면 되돌릴 수 있다고 안내합니다.² 초보자에게 이 기능은 안전벨트입니다. 하지만 안전벨트가 있다고 일부러 급정거할 필요는 없습니다. 작은 단위로 수정하면 되돌릴 일도 줄어듭니다.

무료 한도는 공짜 실험장이 아니라 작업 예산이다

Visual Edits는 일일 무료 한도 안에서 크레딧 없이 사용할 수 있습니다. 공식 문서에는 사용자당 24시간 100회, IP 주소당 24시간 500회 제한이 있으며, 한도에 도달하면 추가 편집에는 크레딧이 필요할 수 있다고 설명되어 있습니다.¹

이 말은 중요합니다. Visual Editor가 크레딧 절약에 좋다고 해서 무한정 눌러도 된다는 뜻은 아닙니다. 무료 편집에도 하루 한도가 있습니다. 그러니 Visual Editor도 막 쓰기보다는 계획적으로 쓰는 편이 좋습니다.

가장 좋은 방법은 수정 목록을 먼저 적는 것입니다. 예를 들어 포트폴리오 랜딩 페이지를 검토하면서 이런 식으로 메모합니다.

• 첫 화면 버튼 문구를 "프로젝트 문의하기"로 변경

• 메인 CTA 색상을 브랜드 블루로 변경

• 서비스 카드 3개의 제목을 더 구체적으로 수정

• 가격표의 "프리미엄" 문구를 "집중 제작형"으로 변경

• 문의 폼 버튼을 "문의 보내기"에서 "상담 요청 보내기"로 변경

그다음 Visual Editor에서 한 번에 차례대로 처리합니다. 이렇게 하면 같은 요소를 여러 번 클릭하며 우왕좌왕하지 않아도 됩니다.

외부 AI에서 기획을 먼저 끝내고 러버블에서는 구현만 하자는 원칙이 여기서도 이어집니다. 수정도 마찬가지입니다. 러버블 화면을 열고 고민하지 말고, 먼저 무엇을 바꿀지 정한 뒤 들어가세요. 고민은 무료인 종이, 메모장, ChatGPT에서 하고, 러버블에서는 실행합니다.

외부 AI로 Visual Editor 수정 목록 만들기

Visual Editor는 직접 수정하는 도구지만, 무엇을 어떻게 고칠지는 외부 AI에게 도움을 받을 수 있습니다. 이 방식은 크레딧 절약에 특히 좋습니다. 러버블 안에서 "이 페이지 어때?"라고 계속 물어보면 크레딧을 쓸 수 있지만, ChatGPT나 Gemini 같은 외부 AI에 페이지 내용을 설명하고 수정 목록을 뽑게 하면 러버블 크레딧을 아낄 수 있습니다.

예를 들어 외부 AI에 이렇게 요청할 수 있습니다.

나는 1인 사업자를 위한 포트폴리오 랜딩 페이지를 만들고 있어. 현재 첫 화면 문구는 "창의적인 솔루션으로 비즈니스를 성장시킵니다"이고, CTA는 "시작하기"야. 서비스 카드는 "디자인", "마케팅", "컨설팅"으로 되어 있어. 방문자가 상담 신청을 하게 만드는 목적의 페이지로 바꾸고 싶어. Lovable Visual Editor에서 직접 수정할 수 있는 텍스트와 버튼 문구 중심으로 개선안을 표로 정리해줘. 구조 변경이나 새 기능 추가는 제외해줘.

이렇게 요청하면 외부 AI는 보통 수정 전, 수정 후, 이유를 정리해줍니다. 그러면 러버블에서는 그 표를 보고 Visual Editor로 직접 바꾸면 됩니다.

핵심은 마지막 문장입니다. 구조 변경이나 새 기능 추가는 제외해줘. 이렇게 말해야 Visual Editor로 처리 가능한 수정 목록이 나옵니다. 외부 AI가 "새 섹션을 추가하세요", "자동 예약 시스템을 넣으세요" 같은 제안을 하면 당장 Visual Editor로는 처리하기 어렵습니다.

외부 AI를 사용할 때는 다음처럼 요청해도 좋습니다.

아래 랜딩 페이지 요소를 보고 Visual Editor로 수정 가능한 작업과 프롬프트가 필요한 작업을 구분해줘. 나는 무료 사용자라 크레딧을 아끼고 싶어. 텍스트, 색상, 이미지, 여백 수정은 Visual Editor로 분류하고, 섹션 추가/삭제, 폼 동작, 데이터 저장, 로그인, API 연결은 프롬프트 필요로 분류해줘.

이 프롬프트는 초보자에게 매우 유용합니다. 내가 지금 하려는 일이 직접 수정인지, AI에게 맡겨야 하는 일인지 판단하기 어려울 때 기준표를 만들어주기 때문입니다.

실전 예시: 상담 신청 버튼을 더 잘 보이게 만들기

이제 작은 실전 상황을 떠올려봅시다. 여러분이 러버블로 "프리랜서 상세페이지 제작 서비스" 랜딩 페이지를 만들었습니다. 첫 화면에는 이런 요소가 있습니다.

• 헤드라인: "당신의 비즈니스를 위한 완벽한 웹 솔루션"

• 설명 문구: "우리는 고객의 성공을 위해 최선을 다합니다."

• 버튼: "Get Started"

• 버튼 색상: 연한 회색

이 상태에서 방문자가 상담을 신청할 가능성은 낮습니다. 무엇을 해주는지 불분명하고, 버튼도 눈에 잘 띄지 않습니다.

프롬프트를 쓰지 말고 Visual Editor로 다음처럼 바꿔봅니다.

이 정도 수정은 기능을 바꾸지 않습니다. 구조도 바꾸지 않습니다. 기존 요소의 내용과 스타일만 바꾸는 작업입니다. Visual Editor에 딱 맞습니다.

수정 후에는 모바일 미리보기에서 버튼 문구가 한 줄로 보이는지 확인합니다. 만약 "무료 상담 신청하기"가 너무 길어 두 줄이 된다면 "상담 신청"으로 줄일 수 있습니다. 문구는 멋있게 길게 쓰는 것보다, 작고 선명하게 보이는 편이 낫습니다.

마지막으로 버튼을 눌러 실제 문의 섹션으로 이동하는지 확인합니다. 만약 이동하지 않는다면 그때 프롬프트로 "첫 화면 CTA 버튼이 문의 폼 섹션으로 스크롤 이동하도록 연결해 주세요"라고 요청합니다. 이처럼 Visual Editor와 프롬프트의 역할을 나누면 크레딧을 훨씬 효율적으로 쓸 수 있습니다.

자주 하는 실수와 피하는 법

Visual Editor를 처음 쓰면 몇 가지 실수를 하기 쉽습니다. 다행히 대부분은 습관으로 막을 수 있습니다.

첫 번째 실수는 색을 너무 많이 쓰는 것입니다. 버튼을 고치다가 마음에 드는 색을 계속 추가하면 페이지가 금방 산만해집니다. 핵심 CTA 색은 하나로 정하고 반복하세요.

두 번째 실수는 문구를 길게 만드는 것입니다. 초보자는 더 친절하게 설명하려고 문장을 늘립니다. 하지만 랜딩 페이지에서는 길수록 약해지는 문장이 많습니다. 특히 버튼과 카드 제목은 짧아야 합니다.

세 번째 실수는 데스크톱만 보는 것입니다. 앞서 말했듯 실제 방문자는 모바일로 들어올 가능성이 큽니다. Visual Editor로 고친 직후 모바일 확인을 습관으로 만드세요.

네 번째 실수는 디자인만 보고 작동 테스트를 하지 않는 것입니다. 버튼이 예뻐도 클릭이 안 되면 소용없습니다. 폼이 예뻐도 제출이 안 되면 문의는 들어오지 않습니다.

다섯 번째 실수는 구조 변경까지 Visual Editor로 해결하려는 것입니다. 섹션을 새로 만들고, 페이지 흐름을 바꾸고, 폼 동작을 바꾸는 일은 프롬프트가 더 안전합니다.

이 다섯 가지만 피하면 Visual Editor는 무료 사용자에게 아주 강력한 절약 도구가 됩니다.

오늘의 작업 루틴

앞으로 러버블 프로젝트를 수정할 때는 다음 문장을 먼저 떠올리세요.

"이건 이미 있는 요소의 내용이나 스타일을 바꾸는 일인가?"

답이 "예"라면 Visual Editor를 먼저 켭니다. 답이 "아니오"라면 프롬프트를 준비합니다.

이 장의 핵심 루틴은 다음과 같습니다.

1. 수정 목록을 러버블 밖에서 먼저 적는다.

2. 텍스트, 색상, 이미지, 여백 수정은 Visual Editor로 처리한다.

3. 섹션 추가, 삭제, 순서 변경, 기능 변경은 프롬프트로 요청한다.

4. 수정 후 데스크톱과 모바일을 모두 확인한다.

5. CTA 클릭, 메뉴 이동, 폼 입력과 제출을 실제로 테스트한다.

러버블을 잘 쓰는 사람은 프롬프트를 많이 쓰는 사람이 아닙니다. 프롬프트를 써야 할 때와 쓰지 않아도 될 때를 구분하는 사람입니다.

버튼 색 하나 바꾸는 데 AI를 다시 부르지 마세요. 작은 수정은 직접 끝내고, 크레딧은 더 중요한 일에 남겨두세요. 다음 장부터는 이 원칙을 실제 프로젝트에 적용해 프리랜서 포트폴리오와 문의 페이지를 만들어보겠습니다.

참고

¹Visual edits - Lovable Documentation

²FAQ - Lovable Documentation

³How to Edit Your Projects in LOVABLE AI