효과적인 프롬프트

앱 블루프린트의 효과와 생성된 코드의 품질은 프롬프트의 명확성과 세부정보에 따라 달라집니다. 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가 잘못된 가정을 하는 경우 올바른 동작을 이해하는 데 도움이 되는 역설 예시를 제공합니다.

다음 단계