종이 스케치와 FigJam·Miro로 화면을 먼저 그리기

러버블을 열기 전에 연필을 먼저 들어야 하는 이유

러버블은 말로 설명하면 웹사이트를 만들어주는 도구입니다. 그래서 처음에는 이런 생각이 듭니다.

"그럼 그냥 바로 말하면 되잖아?"

맞습니다. 바로 말해도 됩니다. 하지만 무료 사용자라면 이야기가 달라집니다. 러버블에서 애매하게 말하고, 결과물을 보고, 다시 고치고, 또 다시 고치는 과정은 생각보다 빠르게 크레딧을 잡아먹습니다. 특히 초보자는 "뭔가 마음에 안 드는데 뭐가 문제인지 모르겠는 상태"에 자주 빠집니다. 이때 프롬프트를 이렇게 보내기 쉽습니다.

"좀 더 예쁘게 해줘."

"버튼 위치가 이상해."

"전체적으로 깔끔하게 다시 해줘."

이 말들은 사람에게도 애매하고, AI에게도 애매합니다. 러버블은 열심히 고치겠지만, 사용자가 상상한 화면과 전혀 다른 방향으로 갈 수 있습니다. 그러면 다시 수정해야 하고, 또 크레딧이 듭니다.

이 장의 핵심은 단순합니다. 그림 한 장이 애매한 프롬프트 열 번보다 크레딧을 더 많이 아껴준다는 것입니다.

여기서 말하는 그림은 멋진 디자인 시안이 아닙니다. 디자이너처럼 그릴 필요도 없습니다. 네모, 선, 화살표, 동그라미 정도면 충분합니다. 우리가 만들 것은 '와이어프레임'입니다. 와이어프레임은 웹페이지의 뼈대 그림입니다. 색상, 예쁜 이미지, 세련된 폰트보다 먼저 "무엇이 어디에 놓이는가"를 정리하는 설계도입니다.

러버블은 텍스트 설명뿐 아니라 문서, 와이어프레임, 시각 자료를 바탕으로 작동하는 프로토타입을 만드는 흐름에 강점을 가진 도구로 소개됩니다.¹ 그러니 우리가 해야 할 일은 러버블에게 "알아서 잘 만들어줘"라고 맡기는 것이 아니라, "이 설계도를 보고 구현해줘"라고 말할 준비를 하는 것입니다.

종이에 그리는 가장 단순한 와이어프레임

처음에는 도구를 켜지 마세요. FigJam도, Miro도, Figma도 아직 필요 없습니다. 종이 한 장과 펜 하나면 됩니다. A4 용지면 충분하고, 노트 한 페이지여도 좋습니다.

종이에 그릴 때는 예쁘게 그리려고 하면 안 됩니다. 예쁘게 그리려는 순간 손이 멈춥니다. 우리의 목표는 작품이 아니라 결정입니다. "이 버튼은 위에 둘까, 아래에 둘까?", "문의 폼은 첫 화면에 둘까, 맨 아래에 둘까?", "사용자가 클릭하면 다음에 무엇을 보게 될까?" 같은 결정을 눈앞에 꺼내놓는 것이 목적입니다.

가장 쉬운 방법은 스마트폰 화면부터 그리는 것입니다. 초보자가 웹사이트를 만들 때 처음부터 데스크톱 화면을 크게 생각하면 공간이 많아서 오히려 헷갈립니다. 반대로 모바일 화면은 좁습니다. 좁은 화면에 꼭 필요한 것만 넣어야 하므로 우선순위를 정하기 좋습니다.

종이에 길쭉한 직사각형을 하나 그립니다. 이것이 모바일 화면입니다. 그 안에 다음 요소들을 네모로 표시합니다.

• 맨 위에는 로고와 메뉴

• 첫 화면에는 한 문장 소개와 주요 버튼

• 중간에는 서비스 설명, 장점, 작업 사례

• 아래에는 문의 폼이나 예약 버튼

• 마지막에는 연락처, SNS, 푸터

예를 들어 프리랜서 디자이너의 포트폴리오 페이지를 만든다고 해봅시다. 처음 그리는 스케치는 이 정도면 됩니다.

┌────────────────────┐
│ 로고        메뉴    │
├────────────────────┤
│ 브랜드를 정리해주는 │
│ 프리랜서 디자이너   │
│ [상담 문의하기]     │
├────────────────────┤
│ 대표 작업 3개       │
│ [카드] [카드] [카드]│
├────────────────────┤
│ 이런 분께 맞아요    │
│ - 로고가 필요한 분  │
│ - 상세페이지가 필요 │
├────────────────────┤
│ 작업 과정           │
│ 상담→견적→제작→납품 │
├────────────────────┤
│ 문의 폼             │
│ 이름 / 이메일       │
│ 원하는 작업 내용    │
│ [문의 보내기]       │
└────────────────────┘

이 스케치에는 색도 없고, 사진도 없고, 멋진 효과도 없습니다. 하지만 러버블에게 필요한 핵심 정보는 이미 들어 있습니다. 페이지의 순서, 버튼의 위치, 카드 개수, 문의 폼의 구성, 사용자가 내려가며 보게 될 흐름이 정리되어 있기 때문입니다.

종이 와이어프레임에서 가장 중요한 것은 '화면에 들어갈 요소의 이름'을 적는 것입니다. 빈 네모만 그려놓으면 나중에 본인도 헷갈립니다. 네모 안에 "대표 작업 3개", "후기 2개", "상담 신청 버튼", "이메일 입력칸"처럼 짧게 적어두세요. 이 짧은 단어들이 나중에 러버블 프롬프트의 재료가 됩니다.

홈 화면, 버튼, 입력폼, 결과 화면을 한 세트로 보기

초보자가 가장 자주 하는 실수는 홈 화면만 열심히 생각하는 것입니다. 물론 홈 화면은 중요합니다. 하지만 사업형 웹사이트에서는 홈 화면보다 더 중요한 순간이 있습니다. 바로 사용자가 행동하는 순간입니다.

프리랜서에게는 문의를 보내는 순간이 중요합니다. 개인 사업자에게는 예약을 신청하는 순간이 중요합니다. 디지털 상품 판매자에게는 구매 버튼을 누르는 순간이 중요합니다. 뉴스레터를 키우려는 사람에게는 이메일을 남기는 순간이 중요합니다.

그러므로 종이 스케치를 할 때는 최소한 세 장면을 함께 그려야 합니다. 첫째, 사용자가 처음 보는 홈 화면입니다. 둘째, 사용자가 행동하는 입력 화면입니다. 셋째, 행동이 끝난 뒤 보게 되는 결과 화면입니다.

상담 신청 페이지를 예로 들어보겠습니다. 홈 화면에는 "1:1 브랜드 상담을 신청하세요"라는 문장과 "무료 상담 신청" 버튼이 있습니다. 사용자가 버튼을 누르면 신청 폼으로 이동합니다. 신청 폼에는 이름, 연락처, 원하는 상담 주제, 예산 범위, 희망 일정이 있습니다. 제출 후에는 "신청이 완료되었습니다. 24시간 안에 연락드릴게요."라는 완료 화면이 나옵니다.

이 흐름을 종이에 그리면 이렇게 됩니다.

[홈 화면]
서비스 소개
↓
[무료 상담 신청 버튼]
↓
[신청 폼 화면]
이름 / 연락처 / 상담 주제 / 희망 일정
↓
[제출하기 버튼]
↓
[완료 화면]
신청 완료 안내 + 카카오톡 채널 버튼

이 정도만 그려도 러버블에게 훨씬 정확하게 말할 수 있습니다. "상담 신청 페이지 만들어줘"가 아니라 "홈 화면에서 CTA 버튼을 누르면 신청 폼 섹션으로 이동하고, 폼 제출 후 완료 메시지를 보여줘"라고 말할 수 있기 때문입니다.

여기서 CTA라는 말을 잠깐 설명하겠습니다. CTA는 Call To Action의 줄임말입니다. 사용자의 행동을 유도하는 버튼이나 문구를 뜻합니다. "문의하기", "예약하기", "무료 자료 받기", "견적 요청하기" 같은 버튼이 모두 CTA입니다. 사업형 웹사이트에서는 CTA가 돈과 연결됩니다. CTA가 흐릿하면 방문자는 그냥 나갑니다. CTA가 분명하면 방문자는 다음 행동을 합니다.

그래서 스케치할 때 CTA 버튼은 눈에 띄게 표시하세요. 별표를 치거나, 색 펜으로 동그라미를 그리거나, "중요"라고 적어두면 됩니다. 러버블에 지시할 때도 "가장 중요한 CTA 버튼은 첫 화면과 페이지 하단에 반복해서 배치해줘"라고 말할 수 있습니다.

클릭 동선은 화살표로 정리한다

웹사이트는 포스터가 아닙니다. 사용자가 누르고, 이동하고, 입력하고, 확인하는 흐름이 있습니다. 그래서 화면을 그릴 때는 정적인 그림만 그리면 부족합니다. 반드시 화살표를 그려야 합니다.

화살표는 사용자의 생각을 보여줍니다. 사용자는 처음에 무엇을 보고, 어떤 버튼을 누르고, 어디로 이동하고, 무엇을 입력하고, 어떤 결과를 확인하는가. 이 흐름이 정리되면 러버블이 만들어야 할 기능도 자연스럽게 정리됩니다.

예를 들어 견적 요청 페이지라면 사용자의 흐름은 이렇게 될 수 있습니다.

1. 사용자가 첫 화면에서 "내 프로젝트 견적 받기" 버튼을 누릅니다.

2. 서비스 유형 선택 영역으로 이동합니다.

3. 사용자가 "랜딩 페이지", "상세페이지", "브랜드 디자인" 중 하나를 선택합니다.

4. 예산, 마감일, 참고 링크, 연락처를 입력합니다.

5. 제출하면 "견적 요청이 접수되었습니다"라는 화면이나 메시지를 봅니다.

6. 운영자는 이메일 또는 데이터베이스에서 요청 내용을 확인합니다.

이 흐름을 글로만 쓰면 길어 보이지만, 종이에 그리면 단순합니다. 화면 네모 몇 개와 화살표 몇 개면 됩니다. 특히 초보자는 "운영자가 무엇을 확인해야 하는지"까지 함께 적어두는 것이 좋습니다. 사용자가 입력한 데이터가 어디로 가야 하는지 생각하지 않으면, 나중에 데이터 저장이나 알림 기능을 붙일 때 막힙니다.

아직 Supabase 같은 데이터베이스를 몰라도 괜찮습니다. 지금은 "이 정보가 저장되어야 하는가?", "그냥 이메일로 받아도 되는가?", "나중에 관리자 화면이 필요한가?" 정도만 표시하면 됩니다. 처음 MVP에서는 복잡한 관리자 화면보다 이메일 수신이나 간단한 목록 저장이 더 현실적일 때가 많습니다.

FigJam, Miro, Figma는 언제 쓰면 좋을까

종이 스케치가 끝났다면 이제 디지털 보드로 옮길 수 있습니다. 여기서 많은 초보자가 도구 이름 때문에 겁을 먹습니다. FigJam, Miro, Figma. 이름만 보면 디자이너들이 쓰는 전문 도구처럼 느껴집니다. 하지만 우리가 사용할 기능은 아주 기초적인 것뿐입니다.

이 세 도구를 쉽게 구분하면 이렇습니다.

FigJam은 Figma에서 제공하는 협업용 화이트보드입니다. 팀이 실시간으로 아이디어를 정리하고, 결정을 맞추고, 작업 흐름을 앞으로 밀고 가는 용도로 소개됩니다.² 혼자 쓰더라도 좋습니다. 포스트잇을 붙이고, 화살표를 잇고, 화면 박스를 그리기에 충분합니다.

Miro도 비슷한 온라인 화이트보드입니다. 특히 유저 여정 지도, 워크숍, 플로우 정리에 강합니다. Miro는 사용자 여정 맵 템플릿 같은 자료를 제공하므로, 방문자가 어떤 단계를 거쳐 목표 행동에 도달하는지 정리할 때 도움이 됩니다.³

Figma는 조금 더 디자인에 가깝습니다. 버튼 크기, 폰트, 여백, 카드 모양을 정교하게 잡고 싶을 때 좋습니다. 다만 이 책의 독자는 대부분 초보자이고, 무료 크레딧을 아끼며 러버블로 구현하는 것이 목표입니다. 그러므로 처음부터 Figma를 완벽하게 배우려고 하지 마세요. Figma는 "나중에 더 예쁘게 다듬고 싶을 때 쓰는 도구" 정도로 생각해도 충분합니다.

개인 사업자나 프리랜서라면 처음에는 FigJam이나 Miro 하나만 골라도 됩니다. 이미 Figma 계정이 있다면 FigJam이 편하고, 회의나 아이디어 보드에 익숙하다면 Miro가 편합니다. 무엇을 쓰든 핵심은 같습니다. 페이지를 네모로 그리고, 요소를 포스트잇으로 적고, 사용자의 클릭 동선을 화살표로 연결하는 것입니다.

FigJam이나 Miro에서 30분 만에 화면 흐름 만들기

이제 실제로 디지털 보드를 만든다고 생각해봅시다. 목표는 멋진 디자인이 아니라 러버블에게 줄 '시각적 지시서'를 만드는 것입니다. 30분이면 충분합니다.

먼저 새 보드를 만들고, 왼쪽에서 오른쪽으로 흐름을 배치합니다. 왼쪽에는 사용자가 처음 보는 화면을 두고, 오른쪽으로 갈수록 다음 행동과 결과 화면을 둡니다. 위에서 아래로 길게 배치해도 되지만, 처음에는 왼쪽에서 오른쪽으로 놓는 편이 흐름을 이해하기 쉽습니다.

보드에는 다음 다섯 영역을 만듭니다.

• 페이지 목록: 홈, 서비스 소개, 문의 폼, 완료 화면처럼 필요한 화면 이름

• 화면 스케치: 각 화면에 들어갈 주요 섹션과 버튼 위치

• 사용자 행동: 클릭, 입력, 제출, 이동 같은 행동

• 필요한 데이터: 이름, 이메일, 문의 내용, 희망 일정처럼 저장하거나 전달할 정보

• 나중에 할 것: 결제, 로그인, 관리자 화면처럼 MVP 이후로 미룰 기능

여기서 '나중에 할 것' 영역이 매우 중요합니다. 초보자는 좋은 아이디어가 떠오를수록 전부 넣고 싶어집니다. 하지만 러버블 무료 사용자는 처음부터 많은 기능을 넣으면 크레딧도 빨리 쓰고, 오류가 날 가능성도 커지고, 본인도 무엇을 검수해야 할지 모르게 됩니다. 좋은 아이디어를 버리는 것이 아니라 주차해두는 것입니다. 보드 한쪽에 "2차 버전"이라고 적고 옮겨두세요.

예를 들어 예약·상담 신청 페이지를 만든다면 보드는 이렇게 구성할 수 있습니다.

[홈]
- 문제 제기 문장
- 서비스 한 줄 소개
- 상담 신청 CTA

→ [서비스 설명]
- 제공 서비스 3개 카드
- 가격 범위 안내
- 진행 과정

→ [신청 폼]
- 이름
- 이메일 또는 전화번호
- 상담 희망 주제
- 희망 일정
- 문의 내용

→ [완료]
- 접수 완료 메시지
- 예상 회신 시간
- 카카오톡 채널 또는 이메일 안내

[2차 버전]
- 결제 기능
- 로그인
- 관리자 대시보드
- 자동 일정 예약

이 보드를 만든 뒤에는 각 화면마다 "이 화면의 목적"을 한 문장으로 적어보세요. 홈 화면의 목적은 신뢰를 주고 상담 신청 버튼을 누르게 하는 것입니다. 신청 폼의 목적은 필요한 정보를 빠짐없이 받는 것입니다. 완료 화면의 목적은 사용자를 안심시키고 다음 연락을 기다리게 하는 것입니다.

화면마다 목적이 분명하면 디자인도 단순해집니다. 홈 화면에는 너무 많은 설명을 넣지 않게 되고, 신청 폼에는 불필요한 질문을 줄이게 됩니다. 완료 화면에는 괜히 다른 상품을 잔뜩 보여주기보다 "정상 접수되었다"는 확신을 주게 됩니다.

Lovable에 스케치나 스크린샷을 첨부할 때의 장점

러버블에 스케치나 스크린샷을 첨부하면 말로 설명하기 어려운 부분을 빠르게 전달할 수 있습니다. 예를 들어 "카드 3개가 가로로 놓이고, 그 아래에 넓은 문의 폼이 있으며, 전체적으로 여백이 넉넉한 레이아웃"이라고 길게 설명하는 대신, 스케치 한 장을 보여주면 구조가 즉시 전달됩니다.

러버블은 문서와 와이어프레임을 작동하는 프로토타입으로 바꾸는 사용 사례를 공식적으로 강조합니다.⁴ 또한 Miro 연동을 사용하면 보드의 스티키 노트, 플로우, 프레임 같은 시각 자료를 읽어 Lovable 프롬프트의 맥락으로 활용할 수 있습니다.⁵ 즉, 우리가 FigJam이나 Miro에서 정리한 화면 흐름은 단순한 메모가 아니라 구현 지시의 재료가 될 수 있습니다.

다만 스케치나 스크린샷을 첨부할 때는 주의할 점이 있습니다. AI가 이미지를 완벽하게 이해한다고 기대하면 안 됩니다. 사람도 손그림을 보면 헷갈릴 때가 있습니다. 그러므로 이미지를 첨부하더라도 반드시 설명을 함께 써야 합니다.

좋은 방식은 이렇습니다.

"첨부한 스케치는 모바일 기준 와이어프레임입니다. 정확한 디자인 복제가 아니라 섹션 순서와 정보 배치를 참고해주세요. 첫 화면에는 로고, 한 줄 소개, CTA 버튼이 있고, 아래로 대표 서비스 카드 3개, 작업 과정, 문의 폼, 푸터 순서로 구성해주세요."

이렇게 말하면 러버블은 이미지를 '정답지'가 아니라 '구조 참고 자료'로 이해합니다. 특히 손그림은 비율이 정확하지 않을 수 있으므로 "픽셀 단위로 따라 하지 말고 구조와 우선순위를 반영해줘"라고 덧붙이는 것이 좋습니다.

스크린샷을 첨부할 때도 마찬가지입니다. 다른 웹사이트의 화면을 참고로 줄 수는 있지만, 그대로 복제해달라고 하면 안 됩니다. 법적·윤리적으로도 문제이고, 내 사업의 개성도 사라집니다. 우리는 레퍼런스를 훔치는 것이 아니라 분석하는 것입니다.

디자인 레퍼런스는 '그대로'가 아니라 요소별로 설명한다

초보자는 마음에 드는 웹사이트를 발견하면 이렇게 말하고 싶어집니다.

"이 사이트처럼 만들어줘."

하지만 이 말은 위험합니다. 첫째, 너무 애매합니다. 그 사이트의 무엇이 마음에 드는지 알 수 없습니다. 색감인지, 여백인지, 카드 모양인지, 사진 배치인지, 버튼 스타일인지 분명하지 않습니다. 둘째, 그대로 복제하는 방향으로 흐를 수 있습니다. 우리는 남의 결과물을 베끼는 것이 아니라, 마음에 드는 요소를 분해해서 내 프로젝트에 맞게 다시 조합해야 합니다.

레퍼런스를 줄 때는 다음처럼 요소별로 말하세요.

• 색감: 흰 배경에 짙은 남색 텍스트, 포인트 컬러는 민트

• 섹션 구조: 첫 화면, 문제 제기, 해결책, 후기, 문의 폼 순서

• 여백: 요소 사이를 넓게 두어 답답하지 않게

• 카드 형태: 둥근 모서리, 은은한 그림자, 아이콘과 짧은 설명

• 분위기: 프리미엄보다는 친근하고 실용적인 느낌

예를 들어 "A 사이트처럼 만들어줘" 대신 이렇게 말할 수 있습니다.

"첨부한 레퍼런스의 전체 복제는 원하지 않습니다. 다만 흰 배경, 넓은 여백, 둥근 카드, 차분한 파란색 포인트, 첫 화면의 큰 제목과 CTA 버튼 배치 방식을 참고해주세요. 콘텐츠와 구성은 아래 PRD와 제 스케치를 기준으로 새롭게 만들어주세요."

이 문장은 러버블에게 훨씬 안전하고 정확한 방향을 줍니다. 색감은 참고하되 콘텐츠는 내 사업에 맞게 바꾸고, 구조는 반영하되 복제는 피합니다. 프리랜서나 개인 사업자에게 중요한 것은 "어딘가에서 본 듯한 사이트"가 아니라 "내 고객이 믿고 문의할 수 있는 사이트"입니다.

스케치를 PRD와 연결하는 법

지난 장에서 외부 AI를 활용해 PRD, IA, 유저 여정 같은 기획 자료를 먼저 만드는 흐름을 다뤘습니다. 이제 그 문서와 오늘 만든 스케치를 연결해야 합니다.

PRD는 말로 된 약속입니다. "누구를 위한 제품인가?", "어떤 문제를 해결하는가?", "어떤 기능이 필요한가?"를 정리합니다. 스케치는 눈으로 보는 약속입니다. "그 기능이 화면 어디에 놓이는가?", "사용자가 어떤 순서로 보는가?", "어디를 누르면 다음으로 가는가?"를 보여줍니다.

둘은 따로 놀면 안 됩니다. PRD에는 상담 신청이 핵심 기능이라고 써놓고, 스케치에서는 상담 버튼이 맨 아래에 작게 숨어 있다면 문제가 생깁니다. PRD에는 신뢰 확보가 중요하다고 써놓고, 스케치에 후기나 작업 사례가 없다면 설계가 비어 있는 것입니다.

다음 표처럼 PRD와 스케치를 맞춰보면 빠르게 점검할 수 있습니다.

이 작업을 하면 러버블 첫 프롬프트가 훨씬 강해집니다. 애매한 감상 대신 구체적인 구현 지시가 되기 때문입니다.

실전 예시: 스케치를 Lovable 첫 프롬프트로 바꾸기

이제 실제로 스케치와 PRD를 합쳐 러버블에 넣을 첫 프롬프트를 만들어보겠습니다. 예시는 프리랜서 포트폴리오와 문의 페이지입니다. 앞으로 실전 튜토리얼에서 비슷한 흐름을 직접 구현하게 될 것이므로, 여기서는 "어떻게 말로 바꾸는지"에 집중하세요.

상황은 이렇습니다. 당신은 브랜드 디자인을 하는 프리랜서입니다. 고객은 1인 사업자, 소상공인, 초기 창업자입니다. 목표는 방문자가 작업 사례를 보고 문의 폼을 제출하게 만드는 것입니다. 기능은 단순해야 합니다. 로그인, 결제, 관리자 화면은 아직 넣지 않습니다.

이 상황에서 Lovable 첫 프롬프트는 다음처럼 쓸 수 있습니다.

첨부한 손그림 와이어프레임과 아래 PRD를 바탕으로, 한국어 단일 랜딩 페이지를 만들어주세요.

프로젝트 목적:
1인 사업자와 초기 창업자가 브랜드 디자인 프리랜서에게 상담 문의를 남기도록 유도하는 포트폴리오형 랜딩 페이지입니다.

타깃 사용자:
로고, 상세페이지, 브랜드 키비주얼이 필요하지만 디자인 의뢰가 처음이라 무엇을 준비해야 할지 모르는 개인 사업자와 프리랜서입니다.

페이지 구조:
1. 상단 내비게이션: 로고, 작업 사례, 진행 과정, 문의하기 메뉴
2. 히어로 섹션: 강한 한 줄 소개, 짧은 설명, "상담 문의하기" CTA 버튼
3. 작업 사례 섹션: 대표 프로젝트 3개를 카드 형태로 표시
4. 이런 분께 추천 섹션: 고객의 상황 3가지를 카드로 표시
5. 작업 과정 섹션: 상담 → 견적 → 제작 → 수정 → 납품 흐름 표시
6. 문의 폼 섹션: 이름, 이메일, 원하는 작업, 예산 범위, 문의 내용 입력
7. 제출 후 완료 메시지: "문의가 접수되었습니다. 24시간 안에 회신드릴게요." 표시
8. 푸터: 이메일, 인스타그램 링크, 저작권 문구

디자인 방향:
깨끗한 흰 배경, 넓은 여백, 둥근 카드, 차분한 네이비 텍스트, 민트색 포인트 버튼을 사용해주세요. 전체 분위기는 과하게 화려하지 않고 신뢰감 있고 친근해야 합니다.

구현 범위:
모바일과 데스크톱에서 모두 보기 좋은 반응형 페이지로 만들어주세요. 현재 MVP에서는 로그인, 결제, 관리자 대시보드, 블로그 기능은 만들지 마세요. 문의 폼은 프론트엔드에서 입력값 검증과 제출 완료 메시지만 구현해주세요.

첨부한 스케치는 정확한 픽셀 복제가 아니라 섹션 순서, 버튼 위치, 정보 우선순위를 참고하기 위한 자료입니다.

이 프롬프트는 길지만 낭비가 아닙니다. 오히려 크레딧을 아끼는 프롬프트입니다. 왜냐하면 러버블이 처음부터 무엇을 만들지, 무엇을 만들지 말아야 할지, 어떤 분위기로 만들어야 할지 알 수 있기 때문입니다.

특히 마지막의 "구현 범위"가 중요합니다. 초보자는 원하는 것을 말하는 데 집중하지만, 원하지 않는 것도 말해야 합니다. 러버블은 능동적으로 기능을 제안하거나 추가할 수 있습니다. 멋져 보이지만 지금 필요 없는 로그인, 결제, 대시보드가 붙으면 프로젝트가 무거워집니다. 무료 사용자에게는 이런 과잉 구현이 크레딧 낭비의 시작입니다.

스크린샷 없이 텍스트 와이어프레임만 줄 수도 있다

손그림을 찍어 올리는 것이 번거롭다면 텍스트로 와이어프레임을 써도 됩니다. 예를 들어 다음처럼 화면을 위에서 아래 순서로 적는 방식입니다.

[모바일 화면 기준]
상단: 로고 왼쪽, 햄버거 메뉴 오른쪽
히어로: 큰 제목 2줄, 설명 2줄, CTA 버튼 1개
신뢰 요소: "누적 프로젝트 32건", "평균 만족도 4.9" 숫자 2개
서비스 카드: 로고 디자인, 상세페이지, 브랜드 패키지 3개 카드
작업 사례: 이미지 카드 3개
진행 과정: 5단계 타임라인
문의 폼: 이름, 이메일, 서비스 선택, 문의 내용
푸터: 이메일, SNS 링크

이 방식은 생각보다 강력합니다. 러버블이 화면을 생성할 때 위에서 아래로 섹션을 구성하기 쉽기 때문입니다. 다만 텍스트 와이어프레임만 사용할 때는 "가장 중요한 버튼이 무엇인지", "어떤 섹션을 강조해야 하는지"를 추가로 적어주세요.

예를 들어 "가장 중요한 CTA는 상담 문의하기이며, 히어로 섹션과 문의 폼 직전에 한 번씩 배치해주세요"라고 말하면 됩니다. 그러면 러버블이 버튼을 아무 데나 흩뿌리는 대신 전환 흐름에 맞게 배치할 가능성이 높아집니다.

Miro 보드를 Lovable의 맥락으로 쓰는 방법

Miro를 사용하는 독자라면 한 단계 더 나아갈 수 있습니다. 러버블은 Miro 보드의 스티키 노트, 도형, 프레임, 다이어그램을 읽어 작업 맥락으로 활용하는 연동을 제공합니다.⁵ Miro 측 튜토리얼도 간단한 아이디어를 보드에 정리하고, 그 내용을 Lovable이 읽어 랜딩 페이지로 만드는 흐름을 설명합니다.⁶

물론 이 기능을 반드시 써야 하는 것은 아닙니다. 초보자라면 처음부터 연동 설정에 시간을 쓰기보다, 보드를 스크린샷으로 저장해서 러버블에 첨부하는 편이 더 쉬울 수 있습니다. 중요한 것은 방식이 아니라 맥락입니다. 러버블이 이해할 수 있도록 화면 구조, 사용자 흐름, 핵심 문구, 디자인 방향을 한곳에 모아두는 것이 핵심입니다.

Miro 보드를 만들 때는 AI가 읽기 좋게 정리하는 것도 중요합니다. 사람 눈에는 자유롭게 흩어진 포스트잇이 창의적으로 보일 수 있지만, AI에게는 혼란스러울 수 있습니다. 프레임을 나누고 제목을 붙이세요. 예를 들어 "1. 타깃 사용자", "2. 페이지 구조", "3. 유저 플로우", "4. 디자인 방향", "5. MVP 제외 기능"처럼 영역을 나누면 좋습니다.

그리고 각 포스트잇에는 짧고 명확한 문장을 쓰세요. "예쁜 느낌"보다는 "흰 배경, 넓은 여백, 네이비 텍스트, 민트 CTA"가 좋습니다. "고객이 편하게 느끼게"보다는 "첫 의뢰자도 이해할 수 있도록 전문 용어를 줄이고, 진행 과정을 5단계로 보여준다"가 좋습니다.

초보자를 위한 스케치 점검 질문

러버블에 첫 프롬프트를 넣기 전, 스케치를 보며 스스로에게 질문해보세요. 이 질문에 답하지 못하면 러버블도 헷갈릴 가능성이 큽니다.

• 방문자가 이 페이지에 들어오자마자 무엇을 이해해야 하는가?

• 방문자가 최종적으로 어떤 버튼을 눌러야 하는가?

• 그 버튼은 첫 화면에서 보이는가?

• 문의나 예약에 필요한 입력값은 무엇인가?

• 제출 후 사용자는 어떤 안내를 받아야 하는가?

• 지금 당장 만들지 않아도 되는 기능은 무엇인가?

• 모바일 화면에서도 중요한 내용이 위쪽에 보이는가?

• 레퍼런스에서 참고할 요소와 참고하지 않을 요소를 구분했는가?

이 질문들은 단순하지만 강력합니다. 특히 "지금 당장 만들지 않아도 되는 기능"을 묻는 질문은 크레딧을 지켜줍니다. 사업형 웹사이트의 첫 버전은 완벽한 서비스가 아니라 검증 도구입니다. 문의가 들어오는지, 사람들이 버튼을 누르는지, 내 제안에 반응하는지 확인하는 것이 먼저입니다.

크레딧을 아끼는 스케치 기반 작업 루틴

마지막으로 이 장의 내용을 하나의 루틴으로 정리해봅시다. 이 루틴은 앞으로 어떤 웹페이지를 만들든 반복해서 사용할 수 있습니다.

1. 종이에 모바일 화면을 먼저 그립니다.

2. 홈 화면, 입력 화면, 완료 화면을 최소 세 장면으로 나눕니다.

3. CTA 버튼과 클릭 흐름을 화살표로 표시합니다.

4. FigJam이나 Miro에 페이지 흐름을 옮기고, 포스트잇으로 설명을 붙입니다.

5. PRD의 핵심 항목과 스케치의 화면 요소가 맞는지 확인합니다.

6. 디자인 레퍼런스는 색감, 여백, 카드 형태, 섹션 구조처럼 요소별로 분해합니다.

7. 스케치 이미지와 설명을 함께 Lovable 첫 프롬프트로 전달합니다.

8. MVP에서 제외할 기능을 명확히 적어 과잉 구현을 막습니다.

이 루틴의 장점은 러버블을 켜기 전에 대부분의 고민이 끝난다는 것입니다. 러버블 안에서 "어떤 페이지를 만들까?", "버튼을 어디에 둘까?", "폼에는 뭘 넣을까?"를 고민하면 크레딧이 사라집니다. 반대로 종이와 보드에서 미리 결정하면 러버블은 구현에 집중할 수 있습니다.

초보자에게 가장 어려운 것은 코딩이 아닙니다. 사실 코딩은 러버블이 많이 도와줍니다. 더 어려운 것은 "내가 무엇을 원하는지 분명하게 말하는 일"입니다. 스케치는 그 말을 도와주는 도구입니다.

다음 장에서는 이 스케치와 기획서를 바탕으로, 크레딧을 아끼는 프롬프트 작성법을 더 구체적으로 다룹니다. 이제부터는 "잘 만들어줘"가 아니라 "이 구조대로, 이 범위 안에서, 이 목적을 달성하도록 만들어줘"라고 말하는 연습을 하게 될 것입니다.

참고

¹Lovable 공식 사이트

²FigJam 공식 소개

³Miro User Journey Mapping 템플릿

⁴Lovable for Prototyping

⁵Lovable Miro 연동 소개

⁶Miro Developers: Lovable와 Miro 보드로 랜딩 페이지 만들기 튜토리얼