바이브코딩으로 만든 앱 화면을 예쁘게 뽑으려면, 만들기 전에 분위기를 형용사로 정하고 색·글꼴을 이름으로 적고 참고 이미지를 붙인 뒤, 한 번에 한 부분씩 고치게 하면 됩니다. Lovable 공식 문서가 권하는 요령이고, Anthropic 안내도 방향을 주지 않으면 AI가 흔한 모양을 고른다고 적었습니다.
2026년 10월 24일 Lovable의 프롬프트 안내·디자인 안내와 Anthropic의 Claude 프롬프트 안내를 직접 읽고, 사장님이 바로 따라 할 수 있는 순서로 옮겼습니다. 여기서 프롬프트는 AI에게 보내는 요청 문장이고, UI는 화면에서 사람이 보고 누르는 부분입니다.
1. 바이브코딩 앱 디자인, 왜 다 비슷해 보이나요?
방향을 주지 않으면 AI가 흔한 기본값을 고르기 때문입니다. Anthropic의 Claude 프롬프트 안내는 이 현상을 이렇게 적었습니다.
without guidance, models can default to generic patterns
안내가 흔한 예로 든 것은 많이 쓰이는 글꼴(Inter, Roboto, Arial, 시스템 글꼴), 흰 바탕에 보라색 그러데이션, 예측 가능한 배치입니다. 사람들이 이런 결과를 「AI slop」, 즉 AI가 찍어 낸 듯한 모양이라고 부른다고도 적었습니다.
Lovable 안내도 비슷하게 말합니다. 화면의 시각 언어는 마지막에 다듬는 층이 아니라 기초이고, 디자인 문제는 처음에 정하는 것보다 나중에 고치는 것이 더 어렵다는 것입니다.
2. 분위기를 형용사로 먼저 정합니다
Lovable은 만들기 전에 방향을 하나 고르라고 권합니다. 예로 든 것은 「차분하고 우아하게」, 「대담하고 파격적으로」, 「고급스럽고 매끈하게」입니다.
안내에 따르면 「미니멀」, 「표현적」, 「영화 같은」, 「발랄한」, 「고급스러운」 같은 말은 글자 모양, 여백, 그림자, 모서리 둥글기, 색 조합에 실제로 영향을 줍니다. 「알록달록하게」보다 「채도 높은 강한 색」이 더 멀리 간다는 예도 들었습니다.
글꼴은 두 안내가 다릅니다. Lovable 예시는 Inter를 쓰지만 Claude 안내는 너무 흔한 글꼴로 꼽으니, 내 가게에 맞는 글꼴을 직접 고르세요.
「예쁘게 해 줘」 대신 「차분하고 따뜻하게, 흙빛 색에 모서리는 둥글게」처럼 분위기 말과 구체적인 모양을 함께 적는 것이 첫 요령입니다.
한 화면 안에서 분위기를 바꿔도 됩니다. Lovable은 첫 화면은 대담하게, 요금 안내 칸은 차분하게 하는 식으로 칸마다 다른 말을 쓸 수 있다고 적었습니다.
3. 색과 글꼴은 이름으로 적습니다
Lovable은 요청에 디자인 방향이 비어 있으면 만들기 전에 색 조합, 글꼴, 배치를 묻는 카드를 띄웁니다. 질문마다 보기가 최대 네 개 나오고, 보기를 고르거나 원하는 값을 직접 적거나 건너뛸 수 있습니다.
요청에 글꼴 이름, 색, 브랜드, 스타일을 분명히 적으면 묻지 않고 바로 만듭니다. 가게에서 이미 쓰는 간판 색이나 로고 색이 있다면 그 색을 처음부터 적어 주는 편이 빠릅니다.
Claude 안내는 색을 고르게 나눠 쓰기보다 주된 색에 또렷한 포인트 색을 더하는 쪽이 낫다고 적었습니다. 정한 글꼴·색·분위기 말은 Lovable의 프로젝트 지식(knowledge)에 저장해 두면 다음 요청에도 이어서 적용됩니다.
4. 참고 이미지와 실제 문구를 붙입니다
말로 설명하기 어려운 모양은 그림으로 보여 줍니다. Lovable 채팅 안내는 맞춰 만들 디자인 시안을 첨부하라고 권하고, 이미지 위에 직접 그려서 바꾸고 싶은 곳에 동그라미를 칠 수도 있다고 적었습니다.
한 메시지에 파일은 10개까지 붙일 수 있습니다. 다른 사이트 이미지를 주소로 가져다 쓸 때는 저작권에 주의하라는 문장도 같은 안내에 있습니다.
문구도 진짜를 넣습니다. Lovable은 「lorem ipsum」 같은 빈 문구로는 AI가 반응할 것이 없다고 했습니다. 실제 제목을 넣어야 두 줄로 넘치는지, 버튼 말이 어색한지가 미리 보입니다.
5. 한 번에 한 부분씩 고칩니다
Lovable은 페이지 전체가 아니라 첫 화면 소개 칸, 기능 소개 칸, 요금표처럼 부분 단위로 만들고, 하나를 보고 다듬은 뒤 다음으로 넘어가라고 권합니다. 마음에 안 드는 곳이 생기면 그 칸만 다시 고치면 됩니다.
고치는 요청은 세 부분으로 씁니다. 무엇을 만들지, 어디에 넣을지, 무엇을 건드리지 말지입니다. 「주문 화면만 바꿔 줘」, 「지금 스타일은 그대로」처럼 당연해 보이는 경계도 적으라고 안내합니다.
「더 좋게 해 줘」보다 「이 버튼 글자만 바꾸고 색과 글꼴은 그대로」처럼 바꿀 것과 둘 것을 함께 말해야 이미 잘된 부분이 망가지지 않습니다.
미리보기 화면에서 고칠 요소를 직접 눌러 고르고 설명하는 방법도 있습니다. 잘된 상태마다 버전 기록에 책갈피를 해 두면 실험이 틀어져도 돌아갈 수 있습니다. 화면과 기능 중 무엇부터 설명할지는 AI에게 화면부터 설명할까 기능부터 설명할까에, 요청을 나눠 쓰는 법은 바이브코딩 프롬프트 나눠 쓰기에 정리했습니다.
6. 빈 화면과 로그인 전 화면까지 정해 둡니다
예쁜 화면은 데이터가 꽉 찬 상태만으로 끝나지 않습니다. Lovable은 디자인할 때 데이터가 비어 있을 때, 불러오는 중일 때, 불러오기에 실패했을 때 무엇을 보여 줄지 미리 정하라고 권합니다.
로그인한 사람과 안 한 사람에게 보일 화면도 나눠 둡니다. 안내의 예시는 로그인했으면 오른쪽 위에 프로필 사진과 이름을, 안 했으면 「Log In」 버튼을 보여 주라는 요청입니다.
예약이 아직 하나도 없는 첫날 화면에 「아직 예약이 없습니다」 한 줄과 안내 버튼을 넣어 두면, 손님도 사장님도 빈 화면에 당황하지 않습니다.
이 블로그를 운영하는 AiApp에서는 업종별 디자인 템플릿에서 시작해, AI 대화로 고치거나 에디터에서 드래그 앤 드롭으로 직접 고칠 수 있습니다. 시작할 디자인은 템플릿에서 고를 수 있습니다.
정리하면 바이브코딩 앱 화면을 예쁘게 뽑는 순서는 이렇습니다.
- 분위기를 형용사 두세 개로 정합니다
- 색과 글꼴을 이름으로 적고 프로젝트에 저장합니다
- 참고 이미지와 실제 문구를 붙입니다
- 한 칸씩 만들고, 고칠 때는 건드리지 말 것을 함께 적습니다
- 빈 화면·불러오는 중·로그인 전 화면까지 정합니다
배우는 곳을 고르는 기준은 바이브코딩 강의 추천, 고르는 법 총정리와 AI 코딩 교육, 학원 가야 할까?에 있습니다. 만든 앱으로 돈을 받는 구조가 궁금하면 바이브코딩 앱 수익, 실제로 돈이 될까?로 이어 보세요.
참고자료 (모두 2026년 10월 24일 확인)
- Lovable 문서 「Prompting best practices」 — docs.lovable.dev/prompting/prompting-one
- Lovable 문서 「Design guidance」 — docs.lovable.dev/features/design-guidance
- Lovable 문서 「Work with Lovable in the project chat」 — docs.lovable.dev/features/projects/chat
- Anthropic 「Prompting best practices」 중 「Frontend design」 — platform.claude.com/docs
#바이브코딩 #앱디자인 #UI디자인 #프롬프트 #러버블
