앱 청사진 효과와 생성된 코드 품질은 프롬프트의 명확성과 상세함에 따라 달라집니다. App Prototyping agent를 사용할 경우 앱을 생성하고 디버그할 때 효과적인 프롬프트를 작성하려면 다음 가이드라인을 고려하세요.
- 구체적: 앱의 기능, 사용자 상호작용, 데이터 요구사항을 명확하게 정의합니다. 가능하면 구체적인 기술을 요청합니다. 예를 들어 3D 요소가 포함된 웹 앱을 만들려고 하는 경우 Gemini에
three.js
를 사용하도록 요청할 수 있습니다. - 서비스 설정을 위한 추가 태스크 요청: Gemini는 앱의 코드를 작성할 수 있지만 실제로는 서비스를 설정하거나 API를 사용 설정하거나 리소스(예: Cloud Storage 버킷 또는 Stripe 계정)를 프로비저닝할 수 없습니다. 특정 서비스의 코드를 작성하는 경우 해당 서비스를 설정하는 방법도 알려야 한다고 Gemini에게 알려야 합니다.
- Gemini를 사용하여 프롬프트 미세 조정: Google을 위한 Gemini, Code 뷰에서 Firebase의 Gemini와 채팅 또는 기타 Gemini 표면을 사용하여 프롬프트를 미세 조정하고 최적화합니다.
- 맥락 제공: 앱의 목적, 공유 대상 그룹, 원하는 사용자 환경에 대한 배경 정보를 포함합니다.
- 예시 사용: 가능하면 사용자가 앱과 상호작용하는 방법이나 표시해야 하는 데이터의 예시를 제공합니다.
- 반복 및 미세 조정: 반복적으로 개발에 접근합니다. 기본 요청으로 시작하고 기능을 추가, 테스트, 미세 조정한 후에 다른 기능을 추가하는 것이 좋습니다.
이 가이드라인에 따라 Firebase Studio에서 생성한 앱 청사진의 품질과 관련성, 앱을 디버그할 때의 성공률을 향상시킬 수 있습니다.
추가 프롬프트를 사용하여 응답 미세 조정
초기 결과가 기대한 것과 다르면 세부정보를 추가하거나 구체적인 안내를 제공하여 프롬프트를 미세 조정할 수 있습니다.
- 제약 조건 추가: UI, 데이터 모델 또는 기능에 대한 제약 조건을 지정합니다.
- 예시 제공: 사용자가 앱과 상호작용하는 방법과 표시해야 하는 데이터의 예시를 제공합니다.
- 키워드 사용: 키워드를 사용하여 LLM이 원하는 출력 클래스와 연결하려는 기능을 설명합니다. 예를 들어 앱이 Google 디자인 표준을 준수해야 함을 나타내는 프롬프트에서 Material Design을 사용할 수 있습니다.
- 구체적인 변경사항 요청: 생성된 코드나 청사진에 대한 구체적인 변경사항을 요청합니다. 각 기능 요청을 별도의 요청으로 추가합니다.
- 모델에 추론 요청: 원하는 결과를 얻는 데 문제가 있으면 프롬프트를 통해 모델에 추론을 요청해 보세요. 예를 들어 '단계별로 생각해 줘. 내 태스크 앱의 입력 상자를 만들려고 해. '태스크 추가' 버튼과 '취소' 버튼이 포함되어야 해.'라고 요청합니다.
이러한 기법을 사용하면 프롬프트를 반복적으로 미세 조정하여 원하는 결과를 얻을 수 있습니다.
앱 청사진에 효과적인 프롬프트 예시
다음은 다양한 유형의 앱에 효과적인 프롬프트의 예시입니다.
간단한 작업 현황표:
Create a simple web app that displays a list of to-do items.
Users should be able to add new items to the list and mark items as complete.
Provide a way to delete items and export the list as a text file.
Use a clean and modern UI using Google Material Design principles.
예산 앱:
A budgeting and expense tracking app with spending categories, charts, and
budget goals. Include a clean dashboard with key insights. It should include
spending categories, charts, and budget goals. The app should allow users to
manually add expenses or upload csv files. The app should also allow users to
upload receipts, then use AI to convert the receipt into an expense entry that
users can edit. Data should be stored in browser cache, with download and
delete options.
Gemini의 지원을 받는 게임 앱 프롬프트(마크다운):
Generate a delightful sliding number puzzle game (15-puzzle) with Javascript,
HTML, and CSS.
- **Setup:** Create a 4x4 grid with numbers 1-15 and one empty space. Use a
**solvable shuffling algorithm** to randomize the start.
- **Gameplay:** Allow clicking tiles **adjacent to the empty space** to slide
them. Count and display the number of moves.
- **Timer:** Include a **countdown timer** starting at **120 seconds**
(2 minutes).
- **End Conditions:**
- If solved (numbers 1-15 in order): Alert with an encouraging winning
statement generated by AI.
- If timer reaches 0: Alert with a funny retort generated by AI.
디버깅 도움말
Firebase의 Gemini를 사용하면 Code 작업공간이나 App Prototyping agent에서 채팅을 통해 코드를 디버그할 수 있습니다.
Gemini는 자동으로 코드를 작성할 수 있지만 오류가 발생하는 경우도 있습니다. 오류를 감지하면 수정하려고 시도합니다. 오류 메시지로 인해 문제가 해결되지 않는 경우 다음 기법 중 일부를 사용해 볼 수 있습니다.
문제 설명: 채팅 인터페이스에서 발생한 문제를 최대한 명확하고 간결하게 설명합니다. Gemini는 오류 메시지 및 로그와 같은 컨텍스트에 액세스할 수 있지만 전체 컨텍스트를 이해하지 못할 수 있습니다. 오류 메시지와 함께 동작을 설명하면 Gemini에서 오류를 더 빠르게 수정하는 데 도움이 될 수 있습니다.
구체적인 질문: 코드에 대한 질문을 직접 Gemini에 합니다. 예를 들어 '이 함수에서 null 포인터 예외가 발생하는 이유는 무엇인가요?' 또는 '이 경합 상태를 방지하려면 어떻게 해야 하나요?'와 같은 질문을 할 수 있습니다.
복잡한 문제 분류: 복잡한 문제를 처리하는 경우 더 작고 관리 가능한 부분으로 분류합니다. Gemini에 각 부분을 개별적으로 디버그하고 문제를 단계별로 생각해 보라고 요청합니다.
코드 펜스 사용: 코드 스니펫을 공유할 경우 코드 펜스를 사용하여 코드 형식이 올바르게 지정되도록 합니다. 이렇게 하면 Gemini에서 코드를 더 쉽게 읽고 이해할 수 있습니다.
반복 및 미세 조정: Gemini가 첫 번째 시도에서 항상 완벽한 솔루션을 제공하지 않을 수 있습니다. 응답을 검토하고 명확하게 질문하고 필요에 따라 추가 정보를 제공합니다.
프롬프트 루프 방지: Gemini가 루프에 갇히거나 질문에 답할 수 없으면 프롬프트를 다시 작성하거나 추가 컨텍스트를 제공해 보세요. 질문을 바꾸면 Gemini에서 질문 내용을 이해하는 데 도움이 되는 경우가 있습니다.
프롬프트를 다시 작성해도 루프가 해결���지 않으면 다음 기법을 사용해 보세요.
새 채팅 시작: Code 작업공간의 Firebase 채팅에서 Gemini를 사용하는 경우 새 채팅 세션을 시작하여 Gemini 컨텍스트를 재설정합니다. 이렇게 하면 Gemini가 이전 대화에서 가졌을 수 있는 오해나 가정에서 벗어날 수 있습니다.
반대 예시 제공: Gemini가 잘못된 가정을 하는 경우 올바른 동작을 이해하는 데 도움이 되는 반대 예시를 제공합니다.
다음 단계
- App Prototyping agent 시작하기
- App Prototyping agent 둘러보기를 따라 앱 개발, 게시, 모니터링
- Firebase Studio 작업공간에서 애플리케이션 개발