1. 시작하기 전에
친구나 이웃과 주말 러닝을 계획해 본 적이 있다면 그 어려움을 잘 아실 겁니다. 끝없는 그룹 채팅에서 만남 장소가 잊혀지고, 사람들은 계속해서 페이스를 묻고, 신규 참여자는 누가 참석하는지 잘 모릅니다.
이 Codelab에서는 지역 러너가 좋아하는 경로를 탐색하고, 주말 모임을 예약하고, 클릭 한 번으로 참석 여부를 알리고, 동료 러너와 채팅할 수 있는 친근한 웹 앱인 Running Club을 빌드하여 이 일상적인 문제를 해결합니다.
이 앱에 데이터베이스가 필요한 이유는 무엇인가요?
커뮤니티 앱에는 데이터베이스라고 하는 안정적인 메모리가 필요합니다. 러너가 새로운 경치 좋은 경로를 추가하거나, 토요일 아침 러닝에 참석한다고 응답하거나, 주차에 대해 묻는 댓글을 게시할 때 휴대폰을 닫거나 컴퓨터를 끄면 해당 정보가 사라져서는 안 됩니다. 데이터베이스는 모든 경로, 참석자 목록, 회원 메시지를 안전하게 저장하고 정리하므로 클럽의 모든 회원이 앱을 열 때마다 최신 정보를 확인할 수 있습니다.
Google AI Studio의 빌드 모드를 사용하여 이 앱을 빌드합니다. 복잡한 코드를 작성하거나 기술 인프라를 직접 설정할 필요 없이 원하는 내용을 쉬운 자연어로 설명하면 됩니다. Google AI Studio는 앱을 생성하고, 데이터를 기억하기 위해 실제 PostgreSQL용 Cloud SQL 데이터베이스를 연결하고, 커뮤니티가 바로 사용할 수 있도록 Cloud Run에 앱을 게시합니다.
빌드할 항목
다음이 포함된 커뮤니티 웹 앱인 Running Club을 빌드하고 실행합니다.
- Google 로그인: 기존 Google 계정을 사용하여 빠르고 안전하게 로그인합니다.
- 러너 프로필: 러닝 환경설정 및 목표 페이스를 보여주는 회원 프로필입니다.
- 경로 라이브러리: 거리, 언덕 난이도, 회의 지점이 포함된 즐겨찾는 주변 지역 경로 모음입니다.
- 예정된 러닝 일정: 예정된 그룹 러닝을 정리하고 러닝을 경로에 연결하는 이벤트 보드입니다.
- 간단한 회신: 회원이 '참석'을 클릭하고 다른 참석자를 확인할 수 있는 원클릭 버튼
- 토론 실행: 세부정보를 조정하고, 질문하고, 업데이트를 공유할 수 있는 각 러닝의 댓글 공간
학습할 내용
- 일상적인 언어로 된 단일 프롬프트를 사용하여 Google AI Studio에서 작동하는 웹 앱을 만드는 방법
- Google AI Studio에서 Google 로그인을 자동으로 설정하는 방법
- Google AI Studio에서 실제 PostgreSQL용 Cloud SQL 데이터베이스를 만들어 연결하여 데이터를 기억하는 방법
- AI와 채팅하여 새 기능을 추가하고 데이터베이스를 확장하는 방법
- 방문 시 클럽의 데이터가 안전하게 저장되는지 확인하는 방법
- Cloud Run을 사용하여 앱을 인터넷에 게시하는 방법
- Google Cloud 콘솔에서 실시간 앱과 데이터베이스를 확인하는 방법
필요한 항목
- Google Chrome과 같은 최신 웹브라우저
- Google AI Studio에 로그인할 수 있는 표준 Google 계정
Cloud SQL Starter Edition 자격 요건 및 한도
Google AI Studio는 빌더가 생성형 앱과 관리형 데이터베이스를 실험할 수 있도록 Google Cloud Starter Tier를 제공합니다.
- 자격 요건:
- 일반 Google 계정을 사용하는 개인에게 제공됩니다.
- 자격 요건을 충족하지 않는 계정에는 기존 또는 과거 Google Cloud 결제 계정이 있는 사용자, Google Workspace, Google Workspace for Education 또는 Google for Nonprofits와 연결된 계정이 포함됩니다.
- 계정이 Starter 등급을 사용할 수 없는 경우 AI Studio에서 결제가 사용 설정된 기존 Google Cloud 프로젝트를 선택하여 이 Codelab을 완료할 수 있습니다.
- 리소스 사양:
- PostgreSQL 18을 실행하는 PostgreSQL용 Cloud SQL Developer Edition 인스턴스를 프로비저닝합니다.
- 0.5 vCPU, 2GB RAM, 1GB 스토리지가 포함됩니다. 활동에 따라 몇 달 이상 매일 수백 건의 방문을 실행할 수 있습니다.
- 0으로 확장을 지원하여 할당량을 절약하기 위해 활성 데이터베이스 연결이 없으면 자동으로 컴퓨팅을 일시중지합니다.
- Quota:
- 컴퓨팅 단위 50개와 스토리지 10GB의 월별 무료 할당량이 포함됩니다.
2. Google AI Studio를 열고 새 앱 시작하기
시작하려면 브라우저에서 Google AI Studio를 여세요. 필요한 사항을 설명하는 것만으로 앱을 빌드하고 테스트할 수 있는 생성 작업공간입니다.
1단계: Google AI Studio에 로그인하기
- 웹브라우저 (예: Google Chrome)를 열고 aistudio.google.com으로 이동합니다.
- 시작하기를 클릭하고 표준 Google 계정 (예: Gmail 계정)으로 로그인합니다.
- 처음 방문 시 서비스 약관이 표시되면 검토하고 수락하여 계속 진행합니다.
2단계: 새 애플리케이션 시작
- 하단 중앙 패널에서 빌드 시작을 클릭합니다 (또는 오른쪽 패널에서 +새 앱을 클릭).
3. 간단한 프롬프트와 Firebase 인증으로 시작하기
시작하는 데 복잡한 아키텍처 다이어그램이 필요하지 않습니다. 초기 애플리케이션을 실행하고, Google 로그인을 구성하고, 데이터베이스를 연결하는 작업을 한 문장으로 처리할 수 있습니다.
초기 프롬프트 입력
AI Studio 빌드 모드의 프롬프트 상자에 다음 프롬프트를 입력하고 Enter 키를 누릅니다.
Build a running club web app with a Cloud SQL database
where members can post upcoming runs.
이 링크를 클릭하면 프롬프트 상자가 자동으로 채워집니다.
작업공간 이해하기
프롬프트를 제출하면 Google AI Studio에서 전체 애플리케이션 작업공간이 열립니다. 화면의 세 가지 주요 영역을 잠시 살펴보세요.
- 채팅 / 프롬프트 상자 (하단): 여기에 일반 언어로 AI와 계속 채팅하여 기능을 추가하거나, 디자인을 조정하거나, 질문을 할 수 있습니다.
- 파일 및 코드 영역 (왼쪽): AI가 백그라운드에서 생성하는 파일을 표시합니다. 코드를 직접 작성하거나 수정할 필요는 없지만 이 패널을 사용하면 AI가 앱의 부분을 만드는 것을 확인할 수 있습니다.
- 실시간 미리보기 창 (오른쪽): 실제 작업 앱을 실시간으로 표시합니다. 이 창에서 버튼을 클릭하고, 텍스트 필드에 입력하고, 앱이 생성되는 즉시 앱을 직접 테스트할 수 있습니다.
- 코드 편집기 (오른쪽): AI가 생성하는 실제 코드를 표시합니다. 원하는 경우 수정할 수 있지만 필수는 아닙니다.
- 배포 및 공유 (오른쪽 상단): 앱을 인터넷에 배포하고 다른 사용자와 공유할 수 있습니다.
Google AI Studio에서 자동으로 실행하는 작업
AI가 요청을 처리하는 동안 앱이 단계별로 빌드되는 것을 확인할 수 있습니다.
- Google 로그인 설정: AI가 Google 로그인을 자동으로 통합하므로 러너가 사용자 비밀번호나 보안 설정을 관리할 필요 없이 Google 계정으로 안전하게 로그인할 수 있습니다.
- 실제 데이터베이스 연결: AI가 커뮤니티의 데이터를 저장할 관리형 Cloud SQL 데이터베이스를 설정합니다. 메시지가 표시되면 클릭하여 프로젝트의 데이터베이스를 사용 설정합니다.
- 데이터 테이블 정리 (
schema.ts): 데이터베이스 스키마를 정리된 스프레드시트의 모음이라고 생각하면 됩니다. AI가 앱의 스토리지 구조를 자동으로 만듭니다.users테이블: 회원 프로필, 이름, 아바타, 러닝 페이스를 저장합니다.runstable: 제목, 거리, 목표 페이스, 위치, 날짜와 함께 예약된 일정을 저장합니다.comments테이블: 각 러닝에서 러너가 남긴 메시지와 질문을 저장합니다.
(참고: 이 코드는 직접 작성하거나 수정할 필요가 없습니다. 새 기능을 요청할 때마다 AI가 코드를 업데이트합니다.) - 시각적 인터페이스 빌드: AI가 헤더, 예정된 러닝 목록, 이벤트 생성 양식, 댓글 섹션 등 화면에 표시되는 웹페이지를 만듭니다.
인증 확인 및 게시 실행
생성이 완료되면 미리보기 창에서 새 앱을 테스트합니다.
- 미리보기 창에서 회원 로그인을 클릭하거나 예정된 러닝 게시 버튼을 클릭하여 인증을 트리거합니다.
- Firebase 인증 대화상자를 사용하여 Google 계정으로 인증합니다.
- 로그인하면 Google 프로필 이름과 아바타가 탐색 메뉴에 표시되고 페이스 환경설정이 자동으로 관리됩니다.
- '예정된 러닝 게시' 양식에 제목 (예:
Morning 5K Shakeout)을 입력합니다. - 날짜와 시간을 선택하고 회의 장소를 입력합니다 (예:
Central Park West Entrance). - PublishRun을 클릭합니다.
- 새 러닝이 예정된 러닝 피드에 즉시 표시되고, 인증된 프로필 이름과 페이스 배지가 주최자로 표시되는지 확인합니다.
- 러닝의 토론 섹션에 간단한 메시지 (예:
Bringing extra water bottles!)를 게시하고 댓글 스레드에 표시되는지 확인합니다.
4. 경로 라이브러리 빌드
러닝 클럽은 인기 있는 지역 경로를 재사용하는 경우가 많습니다. 동일한 경로 정보를 반복해서 입력하는 대신, 회원이 카탈로그에 즐겨찾는 경로를 저장하고 러닝을 예약할 때마다 첨부하도록 할 수 있습니다.
AI에 경로 보관함 추가 요청
채팅 프롬프트 상자에 다음 요청을 입력하고 Enter 키를 누릅니다.
Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.
AI 링크가 백그라운드에서 실행으로 라우팅되는 방식
이를 위해 AI는 경로를 위한 새 스토리지 테이블을 자동으로 만들고 이를 러닝 테이블에 직접 연결합니다. 이 연결을 통해 주최자가 경로를 선택할 때마다 앱에서 거리와 위치 세부정보를 자동으로 가져올 수 있습니다.
(이 코드는 건드릴 필요가 없습니다. AI가 데이터베이스 구조를 업데이트해 주기 때문입니다.)
미리보기에서 새 경로 보관함 테스트하기
AI가 앱 업데이트를 완료하면 라이브 미리보기 창에서 새로운 경로 기능을 사용해 보세요.
- 앱 탐색에서 경로 라이브러리 탭을 클릭합니다. 이러한 탭이 없으면 라이브 미리보기 하단을 확인하세요. 미리보기를 새로고침하려면 저장 버튼을 누르라는 메시지가 표시될 수 있습니다. 그래도 도움이 되지 않으면 채팅 창에서 AI와 상호작용하여 내 경로 보관함이 어디에 있는지 물어보세요.
- 새 경로 저장 (또는 경로 추가)를 클릭하고 샘플 세부정보를 입력합니다.
- 경로 제목:
Riverfront Trail Loop - 거리:
8.5 km - 난이도:
Moderate - 시작 위치:
Waterfront Pier 4
- 경로 제목:
- 보관함에 저장을 클릭합니다.
- 이제 새 러닝 경로 카드에서 바로 러닝 일정 버튼을 클릭하여 이 러닝 경로를 사용하는 러닝을 예약합니다.
- 거리, 난이도, 위치 세부정보가 자동으로 입력되는 것을 확인하세요.
- 러닝 게시를 클릭하고 새 그룹 러닝이 홈 피드에 표시되는지 확인합니다.
5. 회신 요청 및 구성원 초대 구현
커뮤니티 앱은 참여를 통해 성장합니다. 러너가 예정된 러닝에 참석하는 사람을 확인하고, 클릭 한 번으로 가입하고, 친구와 초대 링크를 공유할 수 있습니다.
AI에게 참석 여부 및 초대 추가 요청하기
채팅 프롬프트 상자에 다음 요청을 입력하고 Enter 키를 누릅니다.
Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.
AI가 백그라운드에서 참석자를 추적하는 방식
각 러닝에 참여하는 러너를 추적하기 위해 AI는 데이터베이스에 rsvps 테이블을 자동으로 만듭니다. 러너의 이름을 특정 이벤트에 연결하는 디지털 등록 시트와 비슷하다고 생각하면 됩니다.
(이 코드를 작성하거나 수정할 필요는 없습니다. AI가 데이터베이스에서 이 가입 시트를 자동으로 관리합니다.)
미리보기에서 참석 여부 및 초대 테스트
AI가 앱 업데이트를 완료하면 라이브 미리보기 창에서 새로운 참석 여부 기능을 테스트합니다.
- 미리보기 창의 홈 피드에서 예정된 러닝을 찾습니다.
- 러닝 참여 (또는 참석) 버튼을 클릭합니다.
- 내 이름과 아바타가 참석 러너 섹션에 표시되고 참석자 수가 1 증가하는지 확인합니다.
- 초대 링크 복사를 클릭하고 공유 가능한 링크가 생성되었는지 확인합니다.
6. 데이터 지속성 및 Cloud SQL Scale-to-Zero 테스트
앱을 빌드할 때 가장 중요한 것은 커뮤니티의 정보가 안전하다는 것을 아는 것입니다. 브라우저를 새로고침하거나 탭을 닫거나 컴퓨터를 종료한 후 다시 돌아왔을 때 저장된 모든 경로, 참석 여부, 토론이 그대로 표시되기를 원합니다.
이 단계에서는 데이터가 Cloud SQL 데이터베이스에 안전하게 저장되는지 테스트하고 앱이 사용되지 않을 때 Google Cloud에서 에너지와 비용을 절약하는 방법을 알아봅니다.
앱 새로고침 테스트
- AI Studio 미리보기 창에서 새로고침 버튼을 클릭하거나 브라우저 탭을 새로고침합니다.
- 미리보기에서 앱을 확인합니다. 회원 프로필, 저장된 경로, 예정된 러닝, 참석 여부, 댓글 등 내가 만든 모든 항목이 그대로 있습니다.
- 앱은 화면에 정보를 일시적으로 저장한 것이 아니라 Cloud SQL 데이터베이스에 안전하게 저장했습니다.
Cloud SQL에서 에너지와 비용을 절약하는 방법 ('Scale-to-zero')
한밤중에 아무도 러닝 클럽 앱을 사용하지 않으면 어떻게 되나요?
- 자동 절전 모드 ('Scale-to-zero'): 아무도 앱을 방문하지 않거나 러닝에 가입하지 않으면 데이터베이스가 리소스를 절약하기 위해 자동으로 일시중지됩니다.
- 즉시 절전 모드 해제: 러너가 앱을 열거나 초대 링크를 클릭하면 저장된 모든 정보가 준비된 상태로 데이터베이스가 즉시 절전 모드에서 해제됩니다.
- 유휴 비용 제로: 비활성 상태일 때 절전 모드로 전환되므로 앱이 조용할 때는 컴퓨팅 리소스를 사용하지 않습니다.
7. 게시 및 Cloud Run에 배포
이제 러닝 클럽 앱이 미리보기에서 빌드되고 테스트되었으므로 커뮤니티와 공유할 시간입니다. 웹 호스팅을 구매하거나 서버를 구성할 필요 없이 클릭 한 번으로 앱을 인터넷에 라이브로 출시할 수 있습니다.
앱을 웹에 라이브로 게시
- Google AI Studio의 오른쪽 상단에서 게시 버튼을 클릭합니다.
- 세부정보를 확인하는 요약 창이 표시됩니다.
- 호스팅: Google Cloud Run에서 호스팅되고 배포됩니다.
- 연결된 서비스: Google 로그인 및 Cloud SQL 데이터베이스
- 호스팅: Google Cloud Run에서 호스팅되고 배포됩니다.
- 게시를 클릭하여 앱을 실행합니다.
라이브 앱 열기 및 공유
- 게시가 완료되면 Google AI Studio에서 QR 코드와 함께 실시간 웹 주소를 제공합니다.
- 링크를 클릭하여 새 브라우저 탭에서 라이브 웹 앱을 열거나 휴대전화 카메라로 QR 코드를 스캔합니다.
- 휴대전화에서 사용해 보기: 휴대전화에서 로그인하고, 컴퓨터에서 이전에 예약한 러닝에 참석 여부를 표시한 다음, 공유 Cloud SQL 데이터베이스를 기반으로 참석자 수가 실시간으로 업데이트되는 것을 확인하세요.
8. (보너스) Google Cloud 콘솔에서 리소스 검사
Google AI Studio에서 앱을 빌드하고 배포할 때 비공개 블랙박스 내에 앱을 잠그지 않고, 프로덕션 준비가 완료된 실제 Google Cloud 서비스를 대신 만듭니다. Google Cloud 콘솔은 라이브 앱과 데이터베이스를 볼 수 있는 제어 센터라고 생각하면 됩니다.
1단계: Google Cloud 콘솔 열기
- 새 브라우저 탭에서 Google Cloud 콘솔을 엽니다.
- 화면 상단에서 프로젝트 드롭다운 메뉴를 클릭하고 AI Studio 앱용으로 생성된 프로젝트를 선택합니다 (이름이 보통
continual-run-로 시작함).
2단계: 웹 앱이 실행되는 위치 확인 (Cloud Run)
- 상단 검색창에
Cloud Run를 입력하고 결과에서 선택합니다.
- 앱 이름 (예:
running-club)을 클릭합니다.
- 여기에서 웹사이트를 호스팅하는 엔진을 살펴볼 수 있습니다.
- 측정항목: 웹사이트를 방문하는 사용자 수를 보여주는 유용한 그래프입니다.
- 로그: 방문자가 앱과 상호작용할 때 발생하는 상황을 보여주는 실시간 활동 기록입니다.
3단계: 데이터베이스 작동 확인하기 (Cloud SQL)
- 상단의 검색창에
Cloud SQL를 입력하고 결과에서 선택합니다. - PostgreSQL 데이터베이스 인스턴스를 클릭합니다.
- 여기에서 실시간 데이터베이스 세부정보를 확인하여 데이터베이스가 활성 상태이고 러닝 클럽의 데이터를 저장할 준비가 되었는지 확인할 수 있습니다.
9. 리소스 삭제
연습 프로젝트로 이 앱을 빌드한 경우 쉽게 삭제할 수 있습니다. 커뮤니티에서 러닝 클럽 앱을 계속 사용하려면 앱을 실행 상태로 두면 됩니다.
- Google AI Studio의 왼쪽 사이드바에서 내 앱을 클릭합니다.
- 러닝 클럽 앱을 찾습니다.
- 앱 삭제 (또는 휴지통 아이콘)을 클릭합니다. 이렇게 하면 실제 웹페이지가 사용 중지되고 테스트 데이터베이스가 한 단계로 삭제됩니다.
10. 축하합니다
Google AI Studio와 Cloud SQL을 사용하여 첫 번째 데이터베이스 지원 웹 앱을 빌드, 맞춤설정, 게시했습니다.
이 링크를 방문하여 빌더 여정 완료 배지를 받으세요.
여정을 계속하려면 goo.gle/builders에서 다음 실습을 확인하세요.
학습한 내용
- 일반 언어로 앱 빌드: 간단한 프롬프트로 완전한 커뮤니티 러닝 클럽 앱을 만들었습니다.
- Google 로그인 사용 설정: Google 계정으로 안전한 로그인을 자동으로 설정합니다.
- 실제 데이터베이스 연결: Cloud SQL에 경로, 예정된 러닝, 참석 여부, 토론을 안전하게 저장했습니다.
- 대화형으로 기능 추가: AI와 대화하는 것만으로 경로 라이브러리와 참석 여부 추적을 만들었습니다.
- 웹에 라이브로 게시됨: 클릭 한 번으로 앱을 인터넷에 배포하고 여러 기기에서 테스트했습니다.
- 내부 살펴보기: Google Cloud에서 라이브 웹 앱과 데이터베이스를 호스팅하는 방법을 살펴봤습니다.
다음 단계
Google AI Studio에서 AI와 계속 채팅하여 새로운 기능으로 앱을 확장할 수 있습니다.
- 대화형 지도: AI에 지도 미리보기와 GPS 경로를 추가하도록 요청합니다.
- 러닝 친구 매칭: AI에 비슷한 페이스 목표를 가진 러닝 파트너를 추천해 달라고 요청합니다.
- 일기 예보: AI에 다가오는 러닝 카드에 주말 일기 예보를 표시하도록 요청합니다.
- 사진 공유: 러너가 그룹 러닝 후 사진을 공유할 수 있도록 AI에 요청합니다.