안녕하 세요. 벨라입니다
위 사진은 아직 프롬프트 사용하지 못한 후에 생성 된 사이트 이미지입니다.
아래는 lovable.dev(https://lovable.app/ 혹은 lovable.dev)에서 개인/소규모 사업자가 원하는 웹·앱 프로토타입을 만들기 위해, 어떤 식으로 프롬프트(Prompt)를 작성하면 좋을지 정리한 자료입니다.
지피터스 스터디 등에서 사례로 공유하시면, 다른 분들도 프롬프트 작성 방법과 프로토타이핑 팁을 쉽게 이해하실 수 있을 것입니다.
1. 프롬프트 작성 기본 개념
목적(Mission) 명시
“무엇을 만들고 싶은지”를 가장 앞부분에 분명히 적어야 합니다. 예: “대만인을 위한 한국 맛집 큐레이션·동행 매칭 플랫폼”
P(R)A 구조
Purpose: 프로젝트의 최종 목표나 컨셉
Requirements: 필요한 페이지 목록, 기능, 디자인 요구사항 등
Action: 페이지 순서(Flow), 연결 관계, 실제 생성해야 할 화면, 테스트 계획
lovable.dev에 이러한 구조로 지시하면, 흐름이 꼬이지 않고 원하는 결과물을 얻을 가능성이 높아집니다.
정확하고 구체적인 서술
“검색 페이지와 지도 페이지를 분리해 주세요” 보다는 “검색 페이지 우측에 지도 미리보기를 띄우고, 왼쪽에는 필터와 식당 리스트를 보여주세요” 처럼 레이아웃을 구체적으로 지시.
다국어가 필요하면, “ 외국어 하나 지정함 예 "중국어 " UI를 기본, 필요 시 한국어·영어로 전환 가능” 식으로 언급.
필수 문구
“Pages to Generate” 항목에서 구체적으로 각 화면 이름을 나열
연결 구조(예: “Home → Search → Detail → Reservation”)를 명시
“Style Guide”, “Color Palette”, “Font”, “Responsive Design” 등 디자인 요소를 잊지 말고 포함
2. 프롬프트 작성 시 꼭 들어가야 할 항목
프로젝트 이름(Project Name)
사용자나 팀이 인지하기 쉬운 고유 이름. 예: “Seoul in a Bite(한입에 서울)”
목표/컨셉
왜 이 프로젝트를 하는지, 어떤 가치가 있는지 한두 문장으로 정리
주요 기능
필터, 결제, 리뷰 등.
B2B 관리자 페이지가 필요하다면 그 기능도 별도 기재
페이지 목록(Pages)
(1) Home, (2) Login/Sign-Up, (3) Search, (4) Detail,
페이지 플로우(Flow)
홈 → 검색/필터 → 상 세 → 예약 → 마이페이지(예약 내역)”
디자인 가이드
컬러(#f27333, #ffffff 등), 폰트(예: Noto Sans TC), 버튼 스타일, 아이콘 모서리 각도 등 통일감 있는 디자인 요소 설명
“반응형”이 필요한지, “PC와 모바일 레이아웃은 어떻게 달라야 하는지”도 적어주면 좋음
결과물(Deliverables)
“최소 6개 화면의 하이파이 디자인”, “A/B 테스트를 위한 색상 변화 시나리오”, “클릭 가능 프로토타입” 등
3. 실제 프롬프트 작성 사례
이런 식으로 적으면, lovable.dev가 필요한 컴포넌트나 레이아웃을 좀 더 구조화해서 제안합니다.
4. 원하는 결과를 얻는 팁
분량은 길되, 중복 없이 명확하게
한두 문장으로 끝내면 시스템이 해석을 못 해서 엉성한 결과가 나옴.
하지만 너무 반복적으로 쓰면 혼동이 생길 수 있으니, 한 번씩만 핵심 포인트를 ‘주제-설명’ 형태로 정리.
레이아웃을 미리 상상하고 설명하기
“상단에 로고, 오른쪽 상단에 언어 스위치, 왼쪽에 필터, 오른쪽에 결과” 식으로 작성
모바일/PC가 다를 경우 반드시 구분 작성
사용자 시나리오를 넣으면 효과적
“사용자 A가 검색 페이지에서 ‘홍대’를 입력 → 2곳이 뜸 → 같은 시나리오를 적으면, 초안이 훨씬 정확.
언어와 번역
다국어 UI라면 “기본 언어는 번체자, 번역 버튼을 통해 한국어·영어로 변환” 식으로 명시
이후 직접 수동 수정
AI가 제안해준 초안은 100% 완벽하지 않으므로, UI 구조나 네이밍을 직접 검토 후 변경.
여러 번 시도해보며 Prompt를 재작성하면, 점차 원하는 결과에 근접
5. 마무리 및 활용 방법
이 자료를 지피터스 스터디나 개인 블로그 등에 공유하시면, 다른 사람들도 “P(R)A 구조로 작성 시, 원하는 사이트 시안이 잘 나온다”는 사실을 확인할 수 있습니다.
만약 최종 단계에서" 외국어 (영어, 중국어 등 1위주로 지정함)"로만 PRD(기획서)를 작성하고 싶다면, 위 구조를 중국어로 번역해 놓은 예시를 그대로 복사해 lovable.dev에 붙여 넣으면 됩니다.
실제로 “한입에 서울” 같은 프로젝트를 작업해 본 사례를 포함해, “이렇게 했더니 로고·컬러·페이지 구조가 제대로 뽑혔다”는 후기를 곁들이면 더 도움이 됩니다.
요약
P(R)A 구조로 “프로젝트 개요 → 필요한 기능/페이지 → 디자인 요구 → 액션/테스트” 순으로 서술
구체적 화면(Home, Search, Detail, Reservation, My Page, 등) 이름을 정확히 명시하고, 각 화면 의 기능·연결관계를 스텝별로 작성
디자인 요소(컬러, 폰트, 반응형 레이아웃 등)를 되도록 상세히 기재
원하는 언어, 특이 기능(예: 번역) 등이 있다면 각 기능별 흐름을 명확히 요청
생성된 초안을 반복 수정하면서 최종 사이트 시안을 완성
이를 참고해, 여러분도 lovable.dev에서 원하는 맞춤형 웹/앱 디자인 프로토타입을 보다 쉽게 얻으실 수 있을 겁니다.
아래는 “AI에게 PRD(기획 문서)를 요청하는 구체적인 대화 예시”입니다. 아직 AI를 잘 다루지 못하는 분들도 쉽게 따라 할 수 있도록, 사용자(You)와 AI(Assistant) 간의 대화를 시뮬레이션한 형식으로 적어 보았습니다.
대화 예시: 간단한 식당 예약 서비스 PRD 작성 요청
(사용자)
안녕, 난 지금 식당 예약 웹사이트를 만들고 싶은데, 기획서(PRD)를 체계적으로 정리해줬으면 좋겠어. 사용자 로그인부터 예약 확인까지 구체적인 페이지 구조와 기능을 나열해 줘. 또 다국어(영어/한국어) 지원도 해주고 싶어. 내가 원하는 디자인 요소도 조금 써 줄게:
메인 컬러는 #F27333 ,
버튼은 사각형에 모서리 6px 정도,
모바일 반응형도 고려해줘.
이런 요구사항을 바탕으로 P(R)A 구조로 기획 프롬프트 형태로 작성 부탁해!
(AI / Assistant)
아래는 요청하신 조건에 맞춰 " 원하는 사업 종류 " 예약 웹사이트를 기획하는 P(R)A 형태의 예시 문서입니다. 이대로 복사해서 사용하거나, 일부 수정해서 활용하시면 됩니다.
``` [P: Purpose]
Project Name
"Delish Reserve" (가칭)
Goal / Concept
사용자에게 편리한 웹 예약 시스템 제공
다국어 지원(영어 / 한국어)
Core Value Proposition
실시간 예약 가능 (No-Show 최소화)
모바일 반응형
다국어 UI로 외국인 사용자 접근성 강
대화 전략 / 팁
내가 원하는 기능을 구체적으로 말하기
“예약할 때 결제까지 할 수 있게 해줘”, “다국어는 영어/한국어만” → 이런 식으로 기능 요구사항을 한 문장으로 명료하게 전달.
디자인 요소를 구체적으로 요청
“버튼은 둥근 모서리 6px”, “컬러는 #F27333”, “타이틀 폰트는 Noto Sans”처럼 상세히.
P(R)A 구조로 작성해 달라고 명시
Purpose(프로젝트 목표)
Requirements(필요 페이지, 기능, 디자인, User Flow 등)
Action(결과물, 연결 관계, 최종 산출물)
생성된 텍스트를 복사 후, lovable.dev 입력창에 붙여 넣기
혹은 Slack, Notion 등 협업 툴에서 팀원들과 공유.
다시 수정 요청
“화면이 꼬이지 않도록 Search랑 Detail 구분해서 설명해줘.”
“결제 모듈을 추가해줘.”
이렇게 반복하면서 완성도 있는 PRD를 만든다.
요약
AI에게 PRD를 요청할 때는 ‘원하는 걸 명확히’ 말하되, 길고 중복된 표현보다는 체계적인 구조가 중요.
P(R)A 형태로, “목표(Why) → 요구(What) → 실행(How)”를 또렷이 구분해주면 AI가 초안 문서를 깔끔하게 제시해 준다.
추가 수정은 여러 번 대화를 거치며, 점점 구체화·고도화하는 방식으로 진행한다.
이런 식으로 질문하고 답변받는 과정을 스터디 사례로 공유하시면, 처음 AI를 접하는 사람도 어떻게 구체적으로 요구사항을 전해야 원하는 결과를 얻을 수 있는지 쉽게 이해할 수 있을 겁니다.
아래 사진은 프롬프트는 잘 활용한 후에 생성된 사이트 이미지입니다
