튜토리얼에 프롬프트를 심어 Lovable로 첫 화면 만들기

📝 한줄 요약

PRD를 실제 웹앱으로 옮길 도구를 고르고, 튜토리얼 하나 따라서 첫 화면 뼈대를 30분 만에 만들었습니다.

Before: PRD는 있지만 만들 방법이 막막, 개발자 없이는 아무것도 못 만들 것 같은 상태 After: Lovable에 프롬프트 하나 붙여서 상단 네비 + Attendance 페이지 + 서브탭 3개까지 나오는 클릭 가능한 화면 확보

👥 이런 분께 추천

• 코딩은 모르는데 실제 돌아가는 웹앱을 만들어봐야 하는 비개발자

• AI한테 뭐라 시켜야 할지 감이 안 잡히는 분

• 이미 다른 회사 시스템이 있고 그 안에 새 메뉴 하나를 붙여야 하는 분

🙋 내 스펙 & 환경

진행 방법

1. 왜 하게 되었나

어제까지 PRD(요구사항 정의서)를 다 썼습니다. “무엇을 왜 만드는지”는 문서에 다 담겼는데, 그걸 실제로 돌아가는 화면으로 옮기는 건 코딩을 아는 사람이 해야 하는 일이라고 생각했습니다.

그래서 오늘 모리에게 물었습니다. “지금(2026년) 초보가 이런 웹앱을 만드는 제일 쉬운 방법이 뭐야?”

2. 첫 번째 벽: 도구가 너무 많다

찾아보니 요즘엔 말로 앱을 만들어주는 AI 도구가 여러 개 있었습니다.

셋 다 처음이라 뭐가 나한테 맞는지 감이 없었습니다. 모리한테 “내 조건(코딩 모름, 4주 안에 완성, 나중에 개발자한테 넘겨야 함)에 맞는 걸 골라줘”라고 던졌더니 Lovable로 좁혀졌습니다.

골라준 이유:

• Supabase(진짜 데이터 창고)가 자동으로 붙어서 내가 손댈 게 없음

• 구글 로그인, 이메일 로그인이 기본으로 제공됨 (PRD 조건 통과)

• 만든 코드가 GitHub에 자동 저장 → 개발자가 나중에 그대로 가져감

3. 두 번째 벽: 뭐라고 시켜야 할지 모르겠다

Lovable에 가입하고 나니 큰 입력 상자 하나가 뜨는데, “여기에 뭐라고 쓰면 되지?” 싶었습니다. “직원용 초과근무 신청 앱 만들어 줘” 이렇게 짧게 던지면 AI가 이상하게 만들 것 같은 불안이 있었습니다.

ALT

파란색과 분홍색 배경의 앱 스크린샷

해결: 튜토리얼 안에 프롬프트를 통째로 심어두기

모리가 만들어준 튜토리얼은 단계마다 “이 자리에 이 프롬프트를 그대로 붙여넣으세요”까지 담고 있었습니다. 내가 프롬프트를 짜낼 필요가 없었습니다.

예를 들어 첫 프롬프트는 이거였습니다.

Build a workplace management web app called [시스템 이름].

[Top Navigation Bar]
Deep navy background, white text.
Left: logo icon + "[시스템 이름]" text.
Center: menu items with icons.
Right: bell notification icon, circular user avatar.
Active menu item shows a white underline.

[Top Nav Menu Items - 7 total]

Only Attendance should be a real page. The other 6 should show a "Coming soon" placeholder when clicked.

[Attendance Page Sub-tabs]
Submit | Approvals | Weekly Summary

These 3 sub-tabs should be clickable but empty inside for now. Content will be added later.

Language: English.

이 프롬프트에서 눈에 띄는 두 가지가 있었습니다.

하나. “뼈대만”이 명시되어 있음 “3 sub-tabs should be clickable but empty inside for now. Content will be added later.” 이 한 줄이 결정적이었습니다. AI는 “다 알아서 만들어줘”라고 하면 넘치게 만드는 경향이 있는데, 범위를 미리 좁혀두니 딱 오늘 필요한 만큼만 나왔습니다.

둘. 껍데기 화면을 명시함 “The other 6 should show a Coming soon placeholder when clicked.” 진짜로 만들 건 Attendance 하나지만, 옆에 자리표시라도 있어야 개발자가 나중에 실제 시스템에 옮길 때 어디 붙일지 알 수 있습니다.

4. 세 번째 벽: 톤이 우리 시스템과 안 맞을까 걱정

우리 앱은 독립 서비스가 아니라 기존 로펌 시스템 안에 들어갈 메뉴입니다. 그래서 톤·색·간격이 그 시스템과 어긋나면 나중에 이식할 때 다 다시 만들어야 할 수 있습니다.

해결: UI 참조 이미지 트릭

Lovable 프롬프트 상자에는 이미지 붙이는 자리가 있습니다. 기존 로펌 시스템 화면 캡처 한 장을 프롬프트와 함께 첨부했습니다.

프롬프트 안엔 “Match the tone, spacing, and typography to the reference screenshot I’ll attach.” 한 줄만 추가했습니다.

결과는 놀라웠습니다.

색, 간격, 타이포, 밑줄 스타일까지 참고 이미지와 거의 똑같이 나왔습니다. 글로 “진한 남색 배경”이라고 백 번 설명하는 것보다 이미지 한 장이 확실했습니다.

5. 검증: 프롬프트대로 나왔나

프롬프트 조항을 하나씩 확인했습니다.

30분 만에 여기까지 왔습니다.

🛠 사용한 도구

배운 점

💡 핵심 교훈

1. 프롬프트에 “뼈대만”을 명시하지 않으면 AI가 넘치게 만든다

AI는 “만들어줘”라고 하면 최대한 다 만들려 합니다. 범위를 미리 잘라두면 오히려 오늘 필요한 만큼만 나옵니다. “쓸모 있는 걸 다 넣지 마세요, 이 부분만 만드세요”가 더 정확한 프롬프트입니다.

2. UI 참조 이미지 한 장이 프롬프트 100줄보다 강하다

“진한 남색”, “카드 간격은 여유롭게” 같은 말을 아무리 정교하게 써도 AI가 상상하는 색과 내가 원하는 색은 다릅니다. 참고 이미지 한 장을 붙이면 색상 코드부터 여백까지 자동으로 맞춰줍니다.

3. 튜토리얼 자체에 프롬프트가 심어져 있으면 초보도 따라 할 수 있다

내가 이 30분을 편하게 지나올 수 있었던 이유는, 모리가 만든 튜토리얼이 “이 자리에 이 프롬프트를 붙여넣으세요”까지 다 담고 있었기 때문입니다. 프롬프트 짜는 법을 몰라도, 잘 만든 프롬프트를 그대로 붙이는 것부터 시작할 수 있습니다.

4. 진짜 만들 것 옆에 껍데기 화면도 만들어두면 좋다

Attendance만 만들었어도 되지만, 다른 메뉴 자리도 Coming soon으로 남겨뒀습니다. 이렇게 하면 시연할 때 오해가 없고, 개발자가 나중에 실제 시스템에 옮길 때 어디 붙일지 한눈에 압니다.

솔직한 소감

신선했습니다. 어제까지 “이걸 어떻게 만들지”가 캄캄했는데, 오늘은 30분 만에 진짜 클릭되는 화면이 눈앞에 뜨는 걸 봤습니다.

기술이 어려운 게 아니라, 내가 지금 어디쯤 있고 다음에 뭘 해야 하는지 알려주는 지도가 없었다는 걸 오늘 알았습니다. 지도(튜토리얼 + 프롬프트)만 있으면 코딩 몰라도 여기까진 옵니다.

적용할 점

🎯 결과

📋 복붙 가능한 프롬프트

Lovable 같은 도구로 기존 시스템 안 새 메뉴를 만들 때 쓸 수 있는 프롬프트 뼈대입니다.

Build a [무엇을 만드는지] web app called [이름].

[Top Navigation Bar]
[색상·정렬·요소 설명]

[Top Nav Menu Items - N total]
[메뉴 이름들 나열]

Only [진짜 만들 메뉴] should be a real page. 
The other [나머지 개수] should show a "Coming soon" placeholder when clicked.

[Sub-tabs inside the real page]
[탭 이름들]

These sub-tabs should be clickable but empty inside for now. 
Content will be added later.

Match the tone, spacing, and typography to the reference screenshot I'll attach.
Language: [English/Korean].

여기에 참고 이미지(기존 시스템 화면) 한 장을 첨부하는 게 핵심입니다.

🔜 다음 계획

1. Day 2: 신청 화면 안에 항목 5개 붙이기 (Visit Date, Arrival Time, City, Client Name, File Number)

2. Day 4: Supabase에 지역-금액 표 만들기

3. Day 5: 지역 고르면 금액 자동 계산되는 로직 붙이기