1. 개요
이 Codelab에서는 Firebase Studio의 앱 프로토타입 제작 에이전트를 사용하여 새로운 언어를 배우는 데 도움이 되는 앱을 만드는 방법을 연습합니다. 그런 다음 앱을 미세 조정 및 개선하여 Firebase App Hosting에 게시합니다(선택사항).
학습할 내용
- Firebase Studio의 프롬프트 관련 권장사항
- 앱을 반복하여 기능을 추가하고 버그 수정
- Firebase App Hosting에 앱을 게시하고 다른 사용자와 공유
- App Hosting 앱 개요 패널을 통해 주요 측정항목 추적
필요한 사항
- 원하는 브라우저(예: Chrome)
- Firebase 프로젝트를 만들고 관리할 Google 계정
2. 앱 프로토타입 제작 에이전트를 사용하여 앱 생성
App Prototyping 에이전트는 Firebase의 Gemini를 사용하여 앱을 빌드합니다. 동일한 프롬프트를 사용하더라도 결과가 이 Codelab에 나온 결과와 정확히 동일하지 않을 수 있습니다. 진행이 막히는 경우 이 Codelab 전반의 여러 체크포인트에서 실습을 진행할 수 있도록 워크스페이스에 추가할 수 있는 파일 세트가 제공됩니다.
- Google 계정에 로그인하고 Firebase 스튜디오를 엽니다.
- AI로 앱 프로토타입 제작 필드에 빌드하려는 앱에 대한 설명을 입력합니다. 이 Codelab에서는 스토리, 플래시 카드, AI 튜터를 통해 새로운 언어를 배우는 데 도움이 되는 앱을 빌드합니다. 다음과 같은 프롬프트를 입력합니다.
An app to help someone learn a new language. The app should include AI-generated stories in the target language, where users can click vocab words or the entire story to see it in English. A different section includes flashcards, where the user is shown a word in the chosen language and can click it to flip the card and see the word in English. The final section includes an AI chatbot that allows the user to have simple conversations in the chosen language or ask questions in English about what a word means or how to form a sentence in the chosen language. All content should be beginner-friendly, focusing on basic greetings, common questions/answers, and vocabulary relevant to the lessons or stories. To start, the app should teach the user French, although we might add additional languages in the future. - AI로 프로토타입 제작을 클릭합니다.
- 추천 앱 청사진을 검토합니다.
맞춤설정을 클릭하여 청사진을 수정합니다.- 앱 이름을 Speak Easy로 변경합니다.
- 색 구성표를 다음과 같이 변경합니다.
Primary color: Asparagus green (#98BF64) for a calm and friendly feel. Secondary color: Light parchment (#F5EBCD) to complement the primary color. Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
첨부파일 옵션을 클릭하여 이미지를 업로드합니다. 이미지 크기는 3MiB 미만이어야 합니다. - 저장을 클릭합니다.
- 청사진에 업데이트가 반영되면 이 앱에 프로토타입 제작을 클릭합니다.
- 이 앱에는 AI 요소가 포함되어 있으므로 에이전트에서 Gemini 키를 입력하라는 메시지를 표시합니다. 자체 Gemini API 키를 추가하거나 자동 생성을 클릭하여 Gemini API 키를 생성합니다. 자동 생성을 클릭하면 Firebase 스튜디오에서 Firebase 프로젝트를 만들고 Gemini API 키를 생성합니다.
- 앱 프로토타이핑 에이전트는 앱 청사진을 사용하여 앱의 첫 번째 버전을 만듭니다. 완료되면 Gemini 채팅 인터페이스와 함께 앱 미리보기가 표시됩니다. 잠시 시간을 내어 앱을 테스트해 보세요. 생각한 대로 보이지 않더라도 다음 섹션에서 새로운 기능을 추가하고 디자인을 개선하는 방법을 설명합니다.
3. (선택사항) 코드 가져오기
진행이 막히거나 예시 앱을 더 자세히 따라가려면 Codelab 전반의 여러 체크포인트에서 제공되는 샘플 파일을 사용하세요.
- 폴더의 파일을 다운로드합니다.
- Firebase Studio에서
코드로 전환을 클릭하여 코드 뷰를 엽니다. - 다운로드한 파일을 Firebase Studio의 탐색기 창으로 드래그합니다. 파일이 기존 파일을 대체하도록 허용합니다.
- 프로토타이퍼로 전환을 클릭하여 앱의 예시 버전을 사용하여 Codelab을 계속 진행합니다.
4. 앱 기능 테스트, 반복, 디버그
앱을 미리 보는 동안 버그나 예상치 못한 기능이 발견될 수 있습니다. 앱의 예시 버전에서는 다음 변경사항과 수정사항이 추가됩니다.
- AI 스토리 생성기에서 사용자는 어휘 단어를 클릭하여 영어로 된 정의를 확인할 수 있어야 합니다.
- 플래시 카드는 프랑스어로 표시된 후 클릭하면 영어로 전환되어야 합니다.
- 사용자는 설정 페이지로 이동하여 프랑스어 대신 일본어를 학습하도록 전환할 수 있어야 합니다.
목표 1: AI 스토리 생성기에 어휘 단어 추가
선택사항: 이 시점부터 예시 버전의 앱을 사용하려면 이 파일을 다운로드하여 코드 보기의 Firebase Studio 탐색기 창으로 드래그하세요.
- 채팅 인터페이스에서 추가하려는 기능을 설명합니다.
In the AI Story Generator, users should be able to click vocab words or phrases to get the definition in English. Words or phrases should be underlined to indicate they can be clicked. - 미리보기 창에서 앱을 테스트합니다. 나중에 앱의 디자인을 업데이트할 예정이므로 지금은 기능에만 집중하세요.
- 앱이 예상대로 작동하지 않으면 앱 프로토타이핑 에이전트에게 계속해서 조정을 요청하세요. 예를 들면 다음과 같습니다.
IMPORTANT: Be sure to underline and provide a definition for most words and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the story appears multiple times, only underline and define the first instance. - 코드로 전환을 클릭하여 코드 뷰를 엽니다. 여기에서 모든 앱 파일을 확인하고 코드를 직접 수정할 수 있습니다. Gemini가 해결할 수 없는 버그가 있는 경우 파일을 수동으로 수정하는 것이 더 쉬울 수 있습니다. 준비가 되면 프로토타입 제작 도구로 전환 모드로 전환하여 앱 프로토타입 제작 에이전트를 계속 사용하세요.
목표 2: 플래시 카드에 번역 추가
선택사항: 이 시점부터 예시 버전의 앱을 사용하려면 이 파일을 다운로드하여 코드 보기의 Firebase Studio 탐색기 창으로 드래그하세요.
위와 동일한 프로세스를 따라 채팅 인터페이스를 사용하여 기능을 설명하고 미리보기 창에서 테스트한 다음 추가 프롬프트 또는 코드 보기를 사용하여 플래시 카드에 번역을 추가합니다. 다음과 같은 프롬프트를 사용해 보세요.
The flash cards should appear in the target language to start, then switch to
English when clicked.
앱 프로토타입 에이전트가 버그가 있는 경우를 인식하지 못하는 경우가 있습니다. 다음과 같이 보이는 항목과 수정해야 할 항목을 설명하는 것이 더 효과적일 수 있습니다.
The flip button for the flash cards isn't working. Can you debug it? All flash
cards are only showing in English.
목표 3: 새 언어 추가
선택사항: 이 시점부터 예시 버전의 앱을 사용하려면 이 파일을 다운로드하여 코드 보기의 Firebase Studio 탐색기 창으로 드래그하세요.
다음과 같은 프롬프트를 사용해 보세요.
Add a settings section to the app, where users can swap to a new language
to learn. Add Japanese to the list of languages the user can pick from. If
the user selects Japanese, the AI-generated stories, flash cards, and chatbot
tutor should all use Japanese instead of French.
5. 앱 디자인 반복
선택사항: 이 시점부터 예시 버전의 앱을 사용하려면 이 파일을 다운로드하여 코드 보기의 Firebase Studio 탐색기 창으로 드래그하세요.
이제 앱에 원하는 기능이 모두 있으므로 스타일을 작업할 차례입니다.
앱의 색 구성표 변경
사용할 색상을 구체적으로 지정하거나 앱 프로토타이핑 에이전트가 주도하도록 할 수 있습니다. 채팅 인터페이스에서 첨부파일 옵션을 클릭하여 사용하려는 색상 또는 스타일의 이미지를 업로드할 수도 있습니다. 프롬프트를 사용하려면 다음을 시도해 보세요.
Add color to the design of the app. Use modern, clean colors that adhere
to accessibility standards and have a calming feel.
앱에 사용된 텍스트 업데이트
예를 들어 'AI Chatbot Tutor' 대신 'Chat'이라고만 말하도록 할 수 있습니다.
Change the text "AI Chatbot Tutor" to "Chat".
앱의 UI를 조정하여 더 직관적으로 만들기
예를 들어 사용자가 텍스트를 제출하기 위해 버튼을 누르는 대신 키보드에서 Return를 누르도록 허용할 수 있습니다.
In the story generator section, allow the user to press the return key on
the keyboard to submit the text.
사용자가 밝은 모드와 어두운 모드 중에서 선택할 수 있는 옵션 추가
많은 사용자가 앱의 밝은 테마와 어두운 테마 중에서 선택하는 옵션을 선호할 수 있습니다. 이 스위치를 찾을 수 있는 논리적 위치를 고려하세요.
Add an icon in the upper right corner to dynamically switch the color theme of
the app between dark mode and light mode.
프롬프트 및 디버깅 도움말
- 프롬프트 관련 도움 받기: 원하는 바를 앱 프로토타이핑 에이전트에게 설명하는 데 어려움이 있는 경우 Google을 위한 Gemini에 프롬프트 개선을 요청해 보세요. 효과적인 프롬프트에 대해 자세히 알아보기
- 다른 기기에서 테스트: 프로토타입 모드에서
미리보기 링크 공유를 클릭하여 다른 기기에서 앱을 테스트합니다. - 기본 제공 도구 사용: 코드 뷰에서 Firebase 스튜디오의 기본 제공 디버깅 및 보고 기능을 사용하여 앱을 검사, 디버그, 감사합니다.
- 간단하게 시작: 한 번에 하나의 기능만 작업합니다. 프로토타입에서 기본 기능 세트로 시작한 다음 예상대로 작동하면 확장하는 것이 좋습니다.
- 버그 설명: 작동하지 않는 항목이 있으면 현재 동작을 앱 프로토타이핑 에이전트에게 설명한 후 원하는 동작을 설명합니다.
- 필요한 경우 롤백: 앱 프로토타이핑 에이전트가 프롬프트를 잘못 이해하거나 해결하기 어려운 문제를 도입하는 경우 복원 버튼을 클릭하여 이전 버전의 앱으로 롤백하고 다른 프롬프트로 다시 시도하세요.
6. (선택사항) 앱 게시
선택사항: 이 시점부터 예시 버전의 앱을 사용하려면 이 파일을 다운로드하여 코드 보기의 Firebase Studio 탐색기 창으로 드래그하세요.
앱을 테스트하고 만족하면 Firebase App Hosting을 사용하여 웹에 게시할 수 있습니다.
- 게시를 클릭하여 새 Firebase 프로젝트를 만들고 App Hosting 설정을 시작합니다. 앱 게시 창이 표시됩니다.
- Firebase 프로젝트 단계에서 자동으로 생성된 Firebase 프로젝트의 이름을 확인한 후 다음을 클릭합니다.
- Cloud Billing 계정 연결 단계에서 다음 중 하나를 선택합니다.
- Firebase 프로젝트에 연결할 Cloud Billing 계정을 선택합니다.
- Cloud Billing 계정이 없거나 새 계정을 만들려면 Cloud Billing 계정 만들기를 클릭합니다. 그러면 Google Cloud 텍스트가 열리며 여기에서 새 셀프 서비스 Cloud Billing 계정을 만들 수 있습니다. 계정을 만든 후 Firebase 스튜디오로 돌아가 'Cloud Billing 연결' 목록에서 계정을 선택합니다.
- 다음을 클릭합니다. Firebase Studio는 결제 계정을 작업공간과 연결된 프로젝트에 연결합니다. 이 프로젝트는 Gemini API 키를 자동 생성했을 때 또는 게시를 클릭했을 때 생성됩니다. 그런 다음 App Hosting은 Google Cloud에서 앱의 완전 관리형 환경을 설정합니다.
- 첫 번째 출시 만들기를 클릭합니다. Firebase Studio에서 App Hosting 출시를 시작합니다. 이 작업을 완료하는 데 최대 10분이 걸릴 수 있습니다. 백그라운드에서 어떤 일이 일어나고 있는지 자세히 알아보려면 App Hosting 빌드 프로세스를 참고하세요.
- 출시가 완료되면 App Hosting 모니터링 가능성을 기반으로 하는 URL 및 앱 통계와 함께 앱 개요가 표시됩니다. Firebase에서 생성된 도메인 대신 커스텀 도메인 (예: example.com 또는 app.example.com)을 사용하려면 Firebase 텍스트에 커스텀 도메인을 추가하면 됩니다.
App Hosting에 관한 자세한 내용은 App Hosting 및 작동 방식 이해하기를 참고하세요.
7. (선택사항) 앱 모니터링
App Hosting 앱 개요 패널에서는 앱에 대한 주요 측정항목과 정보를 제공하므로 App Hosting의 기본 제공 모니터링 도구를 사용하여 웹 앱 성능을 모니터링할 수 있습니다. 사이트가 출시되면 게시를 클릭하여 개요에 액세스할 수 있습니다. 이 패널에서 다음을 수행할 수 있습니다.
- 출시 만들기를 클릭하여 새 버전의 앱을 출시합니다.
- 앱 방문에서 앱 링크를 공유하거나 앱을 직접 엽니다.
- 요청 총개수와 최신 출시 상태를 포함하여 지난 7일간의 앱 성능 요약을 검토합니다. 세부정보 보기를 클릭하여 Firebase 텍스트에서 더 많은 정보에 액세스합니다.
- 지난 24시간 동안 앱에서 수신한 요청 수를 HTTP 상태 코드별로 분류한 그래프를 봅니다.
앱 개요 패널을 닫은 경우 언제든지 게시를 클릭하여 다시 열 수 있습니다.
출시 및 버전 관리에서 App Hosting 출시 관리 및 모니터링을 자세히 알아보세요.
8. 결론
수고하셨습니다. Firebase Studio를 사용하여 앱을 성공적으로 만들었습니다. 확장된 사전, 더 많은 언어, 오디오, 애니메이션, 난이도 선택 등 앱에 추가할 수 있는 요소는 훨씬 더 많습니다. 앱을 계속 사용하거나 새로운 앱을 만들어 보세요.