효과적인 프롬프트 작성
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
앱 청사진 효과와 생성된 코드 품질은 프롬프트의 명확성과 상세함에 따라 달라집니다. App Prototyping agent를 사용할 경우 앱을 생성하고 디버그할 때 효과적인 프롬프트를 작성하려면 다음 가이드라인을 고려하세요.
- 구체적: 앱의 기능, 사용자 상호작용, 데이터 요구사항을 명확하게 정의합니다. 가능하면 구체적인 기술을 요청합니다. 예를 들어 3D 요소가 포함된 웹 앱을 만들려고 하는 경우 Gemini에
three.js를 사용하도록 요청할 수 있습니다.
- 서비스 설정을 위한 추가 태스크 요청: Gemini는 앱의 코드를 작성할 수 있지만 실제로는 서비스를 설정하거나 API를 사용 설정하거나 리소스(예: Cloud Storage 버킷 또는 Stripe 계정)를 프로비저닝할 수 없습니다.
특정 서비스의 코드를 작성하는 경우 해당 서비스를 설정하는 방법도 알려야 한다고 Gemini에게 알려야 합니다.
- Firebase 프로젝트 요청: App Prototyping agent에 Firebase 서비스 설정을 요청하면 사용자를 대신하여 Firebase 프로젝트를 프로비저닝합니다. 예를 들어 'Firestore를 추가해 줘' 또는 '내 앱을 Firebase에 연결해 줘'라고 요청할 수 있습니다.
- 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가 잘못된 가정을 하는 경우 올바른 동작을 이해하는 데 도움이 되는 반대 예시를 제공합니다.
다음 단계
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-08-27(UTC)
[null,null,["최종 업데이트: 2025-08-27(UTC)"],[],[],null,["The effectiveness of your app blueprint and the quality of the generated code\ndepend on the clarity and detail of your prompts. When using\nthe App Prototyping agent, consider the following guidelines for effective\nprompting when generating and debugging apps:\n\n- **Be specific:** Clearly define the features, user interactions, and data requirements of your app. Ask for specific technologies, where possible. For example, if trying to create a web app with 3D elements, you may want to ask Gemini to use `three.js`.\n- **Ask about additional tasks to set up services:** Gemini can write code for your app, but it cannot actually set up services, enable APIs, or provision resources (like a Cloud Storage bucket or a Stripe account). Make sure to tell Gemini that if it writes code for specific services that it should also tell you how to set up those services.\n- **Request a Firebase project:** If you ask the App Prototyping agent to help you set up Firebase services, it will provision a Firebase project on your behalf. For example, you can ask \"Help me add Firestore,\" or \"Connect my app to Firebase.\"\n- **Use Gemini to refine your prompt:** Use [Gemini for\n Google](https://gemini.google.com), [chat with\n Gemini in Firebase](/docs/studio/try-gemini) in Code view, or other Gemini surfaces to refine and optimize your prompt.\n- **Provide context:** Include background information about your app's purpose, target audience, and the user experience you want.\n- **Use examples:** If possible, provide examples of how users should interact with the app or what data should be displayed.\n- **Iterate and refine:** Approach your development *iteratively*. Consider starting with a basic request, then add a feature, test it, refine it, then add another feature.\n\nBy following these guidelines, you can significantly improve the quality and\nrelevance of the app blueprints generated by Firebase Studio and its\nsuccess when debugging your app.\n\nUse additional prompts to refine responses\n\nIf the initial results aren't what you expect, you can refine your prompts by\nadding more detail or providing specific instructions:\n\n- **Add constraints:** Specify constraints on the UI, data model, or features.\n- **Provide examples:** Provide examples of how users should interact with the app and what data should appear.\n- **Use keywords:** Use keywords to describe the features or capabilities you want that the LLM might associate with the class of output you want. For example, you might use *Material Design* in a prompt where you indicate that you want your app to adhere to Google design standards.\n- **Ask for specific changes:** Ask for specific changes to the generated code or blueprint. Add each feature request in a separate request.\n- **Ask the model to reason:** If you're having trouble getting the results you want, try asking the model to reason through the prompt. For example, you could say \"Think step by step. I want to create an input box for my task app. It should contain an 'Add task' button and a 'Cancel' button.\"\n\nBy using these techniques, you can iteratively refine your prompts to get the\nresults you want.\n\nExamples of effective prompts for app blueprints\n\nHere are some examples of effective prompts for different types of apps:\n\n**Simple task tracker:** \n\n Create a simple web app that displays a list of to-do items.\n Users should be able to add new items to the list and mark items as complete.\n Provide a way to delete items and export the list as a text file.\n Use a clean and modern UI using Google Material Design principles.\n\n**Budgeting app:** \n\n A budgeting and expense tracking app with spending categories, charts, and\n budget goals. Include a clean dashboard with key insights. It should include\n spending categories, charts, and budget goals. The app should allow users to\n manually add expenses or upload csv files. The app should also allow users to\n upload receipts, then use AI to convert the receipt into an expense entry that\n users can edit. Data should be stored in browser cache, with download and\n delete options.\n\n**Game app prompt with assistance from Gemini (Markdown):** \n\n Generate a delightful sliding number puzzle game (15-puzzle) with Javascript,\n HTML, and CSS.\n\n - **Setup:** Create a 4x4 grid with numbers 1-15 and one empty space. Use a\n **solvable shuffling algorithm** to randomize the start.\n - **Gameplay:** Allow clicking tiles **adjacent to the empty space** to slide\n them. Count and display the number of moves.\n - **Timer:** Include a **countdown timer** starting at **120 seconds**\n (2 minutes).\n - **End Conditions:**\n - If solved (numbers 1-15 in order): Alert with an encouraging winning\n statement generated by AI.\n - If timer reaches 0: Alert with a funny retort generated by AI.\n\nTips for debugging\n\nYou can use Gemini in Firebase to help you debug your code with\nchat in your **Code** workspace\nor the App Prototyping agent.\n\nWhile Gemini can write code for you, it might sometimes also\nproduce errors. When it detects an error, it will attempt\nto fix it. If you find that it isn't able to resolve the issue given\nthe error message, you can try some of the following techniques:\n\n- **Describe the issue:** In the chat interface, describe the\n problem you're encountering as clearly and concisely as possible.\n While Gemini might have access to context like error messages\n and logs, it might not understand the full context. Describing the behavior\n along with the error message can help Gemini fix errors\n faster.\n\n- **Ask specific questions:** Don't be afraid to ask Gemini\n direct questions about your code. For example, \"What could be causing a\n null pointer exception in this function?\" or \"How can I prevent\n this race condition?\"\n\n- **Break down complex problems:** If you're dealing with a complex\n issue, break it down into smaller, more manageable parts. Ask\n Gemini to help you debug each part separately and think\n through problems step-by-step.\n\n- **Use code fences:** When sharing code snippets, use code fences\n to ensure that the code is properly formatted. This makes it easier\n for Gemini to read and understand your code.\n\n- **Iterate and refine:** Gemini may not always provide the perfect\n solution on the first try. Review the responses, ask clarifying\n questions, and provide additional information as needed.\n\n- **Avoid prompting loops:** If Gemini gets stuck in a loop or is\n unable to answer your question, try rephrasing your prompt or\n providing additional context. Sometimes, just rewording your\n question can help Gemini understand what you're asking.\n\n If rephrasing your prompt doesn't resolve the loop, try\n the following techniques:\n - **Start a new chat:** If you're using Gemini in Firebase\n chat in your Code\n workspace, start a new chat session to reset\n Gemini's context. This can help break free from any\n misconceptions or assumptions that Gemini may have made\n in the previous conversation.\n\n - **Provide counter-examples:** If Gemini is making incorrect\n assumptions, provide counter-examples to help it understand\n the correct behavior.\n\nNext steps\n\n- [Get started with the App Prototyping agent](/docs/studio/get-started-ai).\n- [Develop, publish, and monitor an app following a guided tour of the App Prototyping agent](/docs/studio/solution-build-with-ai).\n- [Develop applications in a\n Firebase Studio workspace](/docs/studio/get-started-workspace)."]]
