Firebase의 Gemini를 사용하여 클라이언트 측 코드의 스키마, 쿼리, 변형을 작성합니다.
앱, 데이터 모델 또는 원하는 쿼리나 변형을 자연어로 설명하면 Firebase의 Gemini가 이에 상응하는 Data Connect을 생성합니다.
이 AI 지원은 다음 개발 컨텍스트에서 사용할 수 있습니다.
- Firebase 콘솔에서 스키마와 작업을 생성, 테스트, 배포할 수 있습니다.
- 로컬 환경에서는 Firebase CLI 및 Data Connect VS Code 확장 프로그램을 사용하여 에뮬레이터로 앱을 생성, 테스트, 개발할 수 있습니다.
- AI 기반 개발 도구는 Firebase MCP 서버를 사용하여 앱을 생성, 테스트, 개발할 수 있습니다.
가이드에서 Data Connect 스키마, 쿼리, 변형 구문에 대해 자세히 알아보세요.
AI assistance for Data Connect에서 데이터를 사용하는 방식
자세한 내용은 Firebase의 Gemini에서 사용자 데이터를 사용하는 방법을 참고하세요.
AI assistance for Data Connect 설정
Data Connect에서 AI 지원을 사용하려면 Firebase의 Gemini 설정에 설명된 대로 Firebase에서 Gemini를 사용 설정하세요.
Firebase의 Gemini로 스키마, 쿼리, 변형 생성
다양한 워크플로에서 Data Connect에 AI 지원을 사용할 수 있습니다.
Firebase 콘솔에서
Data Connect 서비스를 만들면 Firebase 콘솔에서 'Gemini 시작하기' 환경을 제공합니다.
앱 아이디어를 설명하면 AI 지원이 다음을 생성합니다.
- 앱 아이디어를 기반으로 한 완전한 스키마
- 작업 및 데이터 변형의 예
데이터 페이지에서 GraphQL 글쓰기 도우미pen_spark 버튼을 사용하여 자연어를 기반으로 작업을 생성하고 실행할 수 있습니다. 몇 가지 사용 사례 예를 확인해 보세요.
이 워크플로는 시작 가이드에 설명되어 있습니다. 배포된 스키마와 작업을 사용하여 로컬 개발 환경에서 계속할 수 있습니다.
로컬 환경에서
Firebase CLI 및 Data Connect VS Code 확장 프로그램에서 AI 지원을 받을 수도 있습니다.
firebase init dataconnect에 앱 아이디어를 제공하면 다음이 생성됩니다.
- 앱 아이디어를 기반으로 한 완전한 스키마
- 작업 예시와 시드 데이터 변이입니다.
Data Connect VS Code 확장 프로그램은 다음과 같은 기능을 제공합니다.
- GraphQL 주석을 Data Connect 작업으로 변환하는 작업 코드 렌즈 생성/수정
- Gemini Code Assist 및 Firebase MCP 서버와의 원활한 통합
이 워크플로는 로컬 프로토타입 제작 시작 가이드에 설명되어 있습니다.
AI 기반 개발 도구와 함께 Firebase MCP 서버 사용
Firebase MCP 서버는 Gemini CLI, Gemini Code Assist, Cursor, Visual Studio Code Copilot, Claude Desktop, Windsurf Editor 등 MCP 클라이언트 역할을 할 수 있는 모든 AI 어시스턴트 도구와 호환됩니다.
Firebase MCP 서버는 AI 기반 개발 도구가 Data Connect와 더 효과적으로 작동하도록 추가 컨텍스트와 기능을 제공합니다. 다음 작업을 할 수 있습니다.
- 새 프로젝트 디렉터리와 생성된 SDK를 설정합니다.
- 컴파일 오류를 기반으로 스키마, 작업 빌드 및 반복
- 요구사항에 따라 새 스키마, 작업 생성
- 로컬 에뮬레이터 또는 백엔드 서비스에 대해 작업을 생성하고 실행합니다.
- 기존 서비스에 관한 정보를 수집합니다.
Firebase MCP 서버를 사용하려면 다음 단계를 따르세요.
- 이 가이드에 따라 MCP 클라이언트를 설정합니다.
- Data Connect 관련 도움 요청 프롬프트 예시:
- "피자 배달 앱용 Data Connect 프로젝트를 설정해 줘."
- 'Data Connect 컴파일 오류 수정'
- '홈페이지에 활성 채팅방과 친구 목록을 표시해야 합니다. Data Connect 쿼리를 생성해 줘."
- '내 로컬 Data Connect 에뮬레이터에 있는 사용자는 누구야?'
- '내 Data Connect 서비스는 어떤 Google Cloud 리전에 있나요?'
생성 작업의 사용 사례 예시
다음 섹션에서는 샘플 사용 사례를 설명합니다.
평점별로 내림차순으로 상위 5개 영화를 반환합니다.
AI assistance for Data Connect를 사용하여 자연어를 기반으로 GraphQL을 생성하려면 다음 단계를 따르세요.
프로젝트에서 Data Connect를 열고 서비스에서 데이터 소스를 선택합니다.
데이터를 클릭합니다.
GraphQL 글쓰기 도우미pen_spark 아이콘을 클릭합니다. 생성하려는 쿼리 또는 변형을 자연어로 설명하고 생성을 클릭합니다.
예를 들어 'Data Connect로 빌드(웹)' Codelab에 참조된 영화 데이터 소스를 사용하는 경우 '2022년 상위 5개 영화를 평점 순, 내림차순으로 반환해 줘.'라고 요청하면 다음과 같은 결과가 반환될 수 있습니다.
query TopMovies2022 { movies(where: {releaseYear: {eq: 2022}}, orderBy: [{rating: DESC}], limit: 5) { id title rating releaseYear } }대답을 검토합니다.
- 대답이 올바른 것 같으면 삽입을 클릭하여 코드 편집기에 대답을 삽입합니다.
- 대답을 수정할 수 있는 경우 수정을 클릭하고 프롬프트를 업데이트한 다음 재생성을 클릭합니다.
대답을 수락한 후 해당하는 경우 파라미터 섹션에서 다음을 설정합니다.
- 변수: 쿼리 또는 변형에 변수가 포함된 경우 여기에서 정의합니다. JSON을 사용하여 정의합니다(예:
{"title":"The Matrix", "releaseYear":"1999"}). - 승인: 쿼리 또는 변형을 실행할 승인 컨텍스트(관리자, 인증됨, 인증되지 않음)를 선택합니다.
- 변수: 쿼리 또는 변형에 변수가 포함된 경우 여기에서 정의합니다. JSON을 사용하여 정의합니다(예:
코드 편집기에서 실행을 클릭하고 결과를 검토합니다.
코드 편집기에서 여러 쿼리 또는 변형을 테스트하려면 이름을 지정해야 합니다. 예를 들어 다음 쿼리의 이름은 GetMovie입니다. 커서를 쿼리 또는 변형의 첫 번째 줄로 이동하여 실행 버튼을 활성화합니다.
query GetMovie($myKey: Movie_Key!) {
movie(key: $myKey) { title }
}
사용자 입력을 기반으로 데이터베이스에 영화를 추가하는 변이 만들기
이 예시에서는 자연어를 사용하여 데이터베이스를 채우는 GraphQL 변형을 생성하는 방법을 보여줍니다. 이 예시에서는 Firebase Data Connect 문서 및 'Data Connect로 빌드(웹)' Codelab에서 사용된 영화 데이터베이스 스키마를 사용한다고 가정합니다.
Firebase Console에서 Data Connect을 엽니다.
서비스와 데이터 소스를 선택한 다음 데이터 탭을 엽니다.
GraphQL 글쓰기 도우미pen_spark 아이콘을 클릭하고 변형을 설명합니다.
Create a movie based on user input.생성을 클릭합니다. 변이가 반환됩니다. 예를 들어 Gemini는 다음과 같은 변형을 반환할 수 있습니다.
mutation CreateMovie($title: String!, $releaseYear: Int!, $genre: String!, $rating: Float!, $description: String!, $imageUrl: String!, $tags: [String!] = []) @auth(level: USER) { movie_insert(data: { title: $title, releaseYear: $releaseYear, genre: $genre, rating: $rating, description: $description, imageUrl: $imageUrl, tags: $tags }) }출력을 검토합니다. 필요한 경우 수정을 클릭하여 프롬프트를 상세검색하고 재생성을 클릭합니다.
그런 다음 삽입을 클릭하여 데이터 편집기에 변이를 삽입합니다.
변이를 실행하려면 변수를 추가해야 합니다. 매개변수 섹션에서 변수를 열고 몇 가지 테스트 변수를 포함합니다.
{"title":"My amazing movie", "releaseYear":2024, "genre": "Comedy", "rating": 8, "description": "A new movie to test mutations", "imageUrl": "", "tags": ["comedy","space travel"]}실행을 클릭합니다.
그런 다음 영화가 추가되었는지 확인하는 쿼리를 만듭니다. GraphQL 글쓰기 도우미 pen_spark를 클릭하고 표시되는 상자에 프롬프트를 입력합니다.
List all movies from 2024 that include all of these tags: 'space travel', 'comedy'.Gemini는 다음과 같은 대답을 반환할 수 있습니다.
query ComedySpaceTravelMovies2024 @auth(level: PUBLIC) { movies( where: { releaseYear: { eq: 2024 }, tags: { includesAll: ["space travel", "comedy"] } } ) { id title imageUrl releaseYear genre rating description tags } }쿼리를 삽입하고 실행합니다. 추가한 영화가 기록 필드에 표시됩니다.
사용자가 제공한 장르와 평점을 기반으로 리뷰를 나열하는 쿼리 만들기
이 예시에서는 자연어를 사용하여 GraphQL 쿼리를 생성하는 방법을 보여줍니다. 이 예에서는 Firebase Data Connect 문서 및 'Data Connect로 빌드 (웹)' Codelab에 사용된 영화 데이터베이스를 사용한다고 가정합니다.
Firebase Console에서 Data Connect을 엽니다.
서비스와 데이터 소스를 선택한 다음 데이터 탭을 엽니다.
GraphQL 글쓰기 도우미pen_spark 아이콘을 클릭하고 쿼리를 설명합니다.
List all movie reviews, based on user-configurable genre and ratings.생성을 클릭합니다. 쿼리가 반환됩니다. 예를 들어 Gemini는 다음과 같은 쿼리를 반환할 수 있습니다.
query ListReviewsByGenreAndRating($genre: String, $minRating: Int, $maxRating: Int) @auth(level: PUBLIC) { reviews(where: { movie: { genre: {eq: $genre} }, rating: {ge: $minRating, le: $maxRating} }) { id user { username } movie { title genre } rating reviewText reviewDate } }출력을 검토합니다. 필요한 경우 수정을 클릭하여 프롬프트를 상세검색하고 재생성을 클릭합니다.
그런 다음 삽입을 클릭하여 데이터 편집기에 변이를 삽입합니다.
이 쿼리를 테스트하려면 변수를 추가해야 합니다. 매개변수 섹션에서 변수를 열고 테스트에 사용할 변수를 포함합니다.
{"genre":"sci-fi", "minRating":4, "maxRating":9}실행을 클릭합니다.
서드 파티 AI 어시스턴스 도구를 위한 프롬프트 설계
모든 AI 지원 도구와 마찬가지로 프롬프트를 잘 작성할수록 더 유용한 결과를 얻을 수 있습니다.
Firebase에서 Gemini에 자연어 프롬프트를 제공하면 어시스턴트가 백그라운드에서 입력을 더 완전한 프롬프트로 변환합니다.
Cursor 또는 Windsurf와 같은 서드 파티 AI 도구를 사용하는 경우 유사하고 더 자세한 프롬프트를 사용하여 더 나은 Data Connect 추천을 받을 수 있습니다.
다운로드, 적용, IDE에 복사할 수 있는 프롬프트 템플릿을 게시했습니다.
다운로드하고 수정한 후 다음과 같이 익숙한 도구 (예: Cursor 또는 Windsurf)에서 프롬프트를 만듭니다.
Cursor에서 다음을 실행합니다 (최신 Cursor 안내를 검토하세요).
- 오른쪽 상단에 있는 설정 아이콘을 클릭합니다.
- 규칙 탭을 선택합니다.
- 프로젝트 규칙에서 새 규칙 추가 버튼을 클릭합니다.
- 규칙을 복사하여 붙여넣습니다.
Windsurf에서 다음 단계를 따르세요 (최신 Windsurf 안내를 검토하세요).
- 오른쪽 상단의 캐스케이드 버튼을 클릭하여 캐스케이드 창을 엽니다.
- Cascade의 오른쪽 상단 슬라이더 메뉴에서 맞춤설정 아이콘을 클릭한 다음 규칙 패널로 이동합니다.
- + 전역 또는 + 워크스페이스 버튼을 클릭하여 전역 또는 워크스페이스 수준에서 각각 새 규칙을 만듭니다.
- 규칙을 복사하여 붙여넣습니다.
문제 해결 AI assistance for Data Connect
Firebase의 Gemini 문제 해결을 참고하세요.
가격 책정
AI assistance for Data Connect는 Firebase의 Gemini의 일부로 제공되며 개별 사용자에게 포함됩니다.
자세한 내용은 Firebase의 Gemini 가격 책정을 참조하세요.
다음 단계
- 스키마, 쿼리, 변형에 대해 자세히 알아보세요.
- Firebase의 Gemini에 대해 자세히 알아보세요.