1. 소개
개요
오늘날 AI를 사용한 빌드는 어디에서 시작될까요? 대부분의 경우 쿼리 또는 프로토타입으로 시작됩니다. Google AI Studio는 Gemini 모델로 구동되는 코드 생성을 사용하여 웹 애플리케이션을 설계, 테스트, 빌드할 수 있는 강력한 빌드 모드 (흔히 '바이브 코딩'이라고 함)를 제공합니다.
이 Codelab에서는 개인 포트폴리오 웹사이트를 빌드합니다. AI Studio 에이전트가 프런트엔드 코드를 작성합니다. 앱이 완성되면 클릭 한 번으로 Cloud Run 에 바로 배포합니다.
실습할 내용
- Google AI Studio에 개인 포트폴리오 웹사이트를 프로토타입으로 제작하도록 프롬프트를 표시합니다.
- 대화형 미리보기 샌드박스에서 애플리케이션을 테스트합니다.
- Google AI Studio UI에서 Cloud Run에 애플리케이션을 직접 배포합니다.
학습할 내용
- Google AI Studio의 빌드 모드를 사용하여 자연어로 프런트엔드 서비스를 빠르게 프로토타입으로 제작하는 방법
- AI Studio 애플리케이션을 Cloud Run에서 서버리스 컨테이너로 배포하는 방법
2. 프로젝트 설정
AI Studio를 실행하기 전에 계정 상태 및 필수사항을 확인하세요.
Google 계정 및 등급 정보
- Google 계정이 없는 경우 Google 계정을 만듭니다.
- 팁: 가능하면 이 실습에 개인 Google 계정을 사용하세요. 그룹, 회사 또는 학교 계정은 실험용 기능 또는 클라우드 통합을 사용 중지하는 Workspace 정책을 적용할 수 있습니다.
- 배포의 결제 세부정보를 검토합니다.
- Google Cloud 스타터 등급: 전체 Google Cloud 결제 계정을 설정하지 않고도 선택한 리전에 최대 2개의 전체 스택 애플리케이션을 무료로 게시할 수 있습니다.
- 표준 배포: 기존 유료 Google Cloud 프로젝트에 연결하고 스토리지 한도, CPU 리소스, API를 확장합니다.
3. AI Studio 빌드 모드에서 포트폴리오 웹사이트 만들기
애플리케이션 셸을 만들고 AI 코드 어시스턴트에 프런트엔드 레이아웃을 빌드하도록 프롬프트를 표시합니다.
- Google AI Studio 앱 패널로 이동하고 새 앱을 클릭합니다.
- 채팅 프롬프트 상자에 포트폴리오 애플리케이션에 대한 설명을 입력합니다.
Build a professional personal portfolio website. The site should have a modern, responsive design and sections for my biography, projects showcase, skills, and links to my professional profiles (e.g., GitHub, LinkedIn). - 빌드 를 클릭하여 애플리케이션 생성 프로세스를 시작합니다.
4. 테스트한 다음 위 과정을 반복합니다.
서비스를 라이브로 실행하기 전에 대화형 미리보기에서 유효성 검사를 실행합니다.
- Google AI Studio 내에서 미리보기 창을 엽니다.
- 미리보기 샌드박스에서 탐색 버튼, 링크 또는 레이아웃과 상호작용하여 시각적 환경을 확인합니다.
- 오류 수정 관련 참고사항: 생성 또는 테스트 중에 런타임 문제 또는 컴파일 오류가 발생할 수 있습니다. 이 경우 AI Studio는 채팅에 수정 버튼을 표시하여 에이전트가 문제를 자동으로 진단하고 해결하도록 요청할 수 있습니다.
- 스타일 또는 동작을 변경하려면 채팅 창을 통해 에이전트에 지시합니다. 예:
"Could you style the interface using Tailwind CSS, and add a dark mode toggle button?""Include a new section to showcase my recent presentations and talks."
- 에이전트가 코드베이스를 업데이트할 때까지 기다리고 미리보기 브라우저에서 업데이트를 확인합니다.
5. Cloud Run에 배포
프로토타입이 완전히 작동하면 Cloud Run에서 공개 서비스로 배포합니다.
- Google AI Studio의 오른쪽 상단에서 게시 버튼을 클릭하여 배포 마법사를 시작합니다.
- 시작하기 를 클릭하여 Google Cloud 프로젝트를 구성합니다.
- 대상 Google Cloud 프로젝트 드롭다운이 작업공간과 연결한 프로젝트와 일치하는지 확인합니다.
- AI Studio는 Cloud Run 인스턴스의 고유 서비스 식별자를 자동으로 생성합니다.
- 선택적으로 배포 구성의 일부로 커스텀
.ai.studioURL 프리픽스 (예:your-portfolio-name.ai.studio)를 지정할 수 있습니다.
- 처음 배포하고 표준 Google Cloud 매개변수를 사용하는 경우 조직 유형을 지정하고 결제 세부정보를 제공하라는 메시지가 표시될 수 있습니다.
- 앱 게시 를 클릭합니다.
- 컨테이너 빌드, 컨테이너 등록, 서비스 배포 단계는 백그라운드에서 진행됩니다. 이 프로세스는 일반적으로 2~4분 내에 완료됩니다.
- 배포가 완료되면 생성된 앱 URL 을 복사하고 브라우저 탭에서 라이브 애플리케이션 링크를 방문합니다.
- 브라우저에서 라이브 웹 애플리케이션을 테스트합니다.
6. (선택사항) 커스텀 도메인 추가
기본적으로 Cloud Run은 Google 관리형 run.app 하위 도메인에서 서비스를 호스팅합니다. 개인 도메인 (yourname.com 또는 portfolio.yourname.com과 같은)을 사용하려면 커스텀 도메인을 서비스에 매핑하면 됩니다.
1단계: Cloud Run에서 도메인 매핑 추가
- Google Cloud 콘솔에서 Cloud Run 도메인 매핑 페이지로 이동합니다.
- 매핑 추가 를 클릭합니다.
- 드롭다운에서 매핑할 Cloud Run 서비스를 선택합니다.
- 커스텀 도메인 이름 (예:
yourname.com또는portfolio.yourname.com)을 입력합니다. - 다음 또는 계속 을 클릭합니다. Cloud Run은 도메인 등록기관에서 만들어야 하는 DNS 레코드 (
A/AAAA또는CNAME레코드 등)를 표시합니다.
2단계: DNS 등록기관 구성
- 도메인 등록기관의 관리 패널 (예: Squarespace, GoDaddy 또는 Namecheap)에 로그인합니다.
- 도메인의 DNS 관리 또는 DNS 설정 구성 페이지를 엽니다.
- Cloud Run 매핑 마법사에 표시된 값과 일치하는 DNS 레코드를 만듭니다.
- 정점 도메인 매핑 (예:
yourname.com)의 경우 나열된A및AAAA레코드를 추가합니다. - 하위 도메인 매핑 (예:
portfolio.yourname.com)의 경우 나열된CNAME레코드를 추가합니다.
- 정점 도메인 매핑 (예:
- DNS 구성 변경사항을 저장합니다.
3단계: SSL 인증서 프로비저닝 대기
DNS 변경사항이 전파되면 다음을 수행합니다.
- Google Cloud는 보안 연결을 위한 관리형 SSL/TLS 인증서를 자동으로 프로비저닝합니다.
- 이 프로세스는 일반적으로 약 15분 내에 완료되지만 DNS 전파에 따라 최대 24시간이 걸릴 수 있습니다.
- 완료되면 커스텀 도메인이 포트폴리오 웹사이트로 안전하게 라우팅됩니다.
7. 삭제
예상치 못한 청구 요금을 방지하거나 작업공간 리소스를 정리하려면 다음 단계를 따르세요.
- Google AI Studio에서 앱 페이지로 이동합니다.
- 그리드 또는 목록에서 애플리케이션을 찾습니다.
- 휴지통 아이콘을 클릭하여 앱 상태를 삭제하고 Cloud Run에서 서비스 게시를 취소합니다.
- 표준 프로젝트를 사용하여 배포했고 모든 리소스를 완전히 종료하려면 Google Cloud 콘솔 프로젝트 설정으로 이동하여 기본 프로젝트를 삭제합니다.
8. 결론
수고하셨습니다 Google AI Studio에서 직접 포트폴리오 웹사이트를 설계, 개발, 배포했습니다.
자세히 알아보기
이 링크를 방문하여 빌더 여정 완료 배지를 받으세요.
여정을 계속하려면 다음 실습을 위해 goo.gle/builders로 이동하세요.