JYP Garden

AI 웹앱 프롬프트 4부분 공식

Properties1
tags프롬프트엔지니어링, ai코딩, 웹앱, vibe-coding, 템플릿, knowledge

4 min read

AI 웹앱 프롬프트 4부분 공식

Google AI Studio·v0·Lovable 등 AI 기반 웹앱 생성 도구에서 첫 시도 결과 품질을 결정짓는 프롬프트 구조 공식. Metics Media 채널이 정리한 4섹션 템플릿.

4부분 구조

[1. 무엇인가 — What]
앱 이름 + 한두 문장 핵심 기능 설명
→ AI에 전체 그림 제공 (앱의 목적 이해)

[2. 기능 — Features]
필요한 페이지·버튼·기능 나열
끝줄에 "여기 나열되지 않은 작동에 필요한 기능 자동 추가" 추가
→ AI가 누락된 부수 기능까지 자동 보완

[3. 디자인 — Design]
색상·레이아웃·전반적 분위기 (간단해도 OK)
→ 비디자이너도 한두 문장으로 충분

[4. 백엔드 — Backend]
사용자 인증, 데이터베이스, 파일 저장소, 보안 규칙 명시
→ 이 부분이 "보기 좋은 앱"을 "실제 작동 앱"으로 바꾸는 핵심

4번째 섹션의 결정적 역할

1~3만 작성하면 정적 페이지가 생성되지만, 4번째 섹션을 포함하면 AI Studio가 빌드 중 Firebase 활성화 팝업을 자동 띄워 백엔드까지 한 번에 프로비저닝한다.

→ 4번째 섹션의 내용은 AI웹앱-백엔드-4핵심요소를 그대로 옮기면 됨.

ClientVault 예시

[1. 무엇인가]
ClientVault: 프리랜서와 디자이너가 클라이언트와 파일을 안전하게
주고받는 클라이언트 파일 포털.

[2. 기능]
- 로그인/회원가입 페이지 (Email/Password)
- 파일 업로드 페이지
- 업로드 파일 목록 + 다운로드 + 삭제
- 사용자별 개인 공간 (타인 파일 접근 불가)
- 그 외 작동에 필요한 기능은 자동 추가

[3. 디자인]
미니멀, 흰색 배경에 파란 액센트, 모바일 반응형.

[4. 백엔드]
- 사용자 인증 (Email/Password)
- 데이터베이스 (사용자별 파일 메타데이터)
- 파일 저장소 (사용자가 업로드한 모든 파일)
- 보안 규칙 (사용자는 본인 파일만 접근)

공식의 장점

  1. 재사용성 — 어떤 SaaS 아이디어든 동일 템플릿 적용 가능
  2. 첫 시도 품질 — AI에 컨텍스트가 단계별로 누적되어 누락·환각 감소
  3. 백엔드 자동 활성화 — 4섹션을 포함하면 Firebase 연결 단계가 자동 트리거됨

관련 노트

그래프 뷰