GSP1337

개요

이 실습에서는 Google AI Studio에서 빠르게 애플리케이션 프로토타입을 제작하는 방법을 알아봅니다. 사전 빌드된 AI 애플리케이션을 살펴보고, 템플릿을 활용해 직접 AI 애플리케이션을 만드는 방법을 배우고, 텍스트 프롬프트를 사용하고 미세 조정하며, 창작물을 관리하고 공유하는 방법을 알아보세요. 이 실습에서는 해커톤의 솔루션 개발자 역할을 맡아 제한 시간 내에 여러 개념 증명 AI 애플리케이션을 빠르게 빌드하고 공유해야 합니다.

학습할 내용

이 실습에서는 다음을 수행하는 방법에 대해 알아봅니다.

• Google에서 사전 빌드한 앱을 살펴봅니다.
• 템플릿을 사용하여 앱을 빌드하고 코드 어시스턴트로 수정합니다.
• 단일 텍스트 프롬프트로 데이터 기반 앱을 빌드합니다.
• 앱 프로토타입을 저장, 다운로드, 확인합니다.

설정 및 요건

실습 시작 버튼을 클릭하기 전에

다음 안내를 확인하세요. 실습에는 시간 제한이 있으며 일시중지할 수 없습니다. 실습 시작을 클릭하면 타이머가 시작됩니다. 이 타이머는 Google Cloud 리소스를 사용할 수 있는 시간이 얼마나 남았는지를 표시합니다.

실무형 실습을 통해 시뮬레이션이나 데모 환경이 아닌 실제 클라우드 환경에서 실습 활동을 진행할 수 있습니다. 실습 시간 동안 Google Cloud에 로그인하고 액세스하는 데 사용할 수 있는 새로운 임시 사용자 인증 정보가 제공됩니다.

이 실습을 완료하려면 다음을 준비해야 합니다.

• 표준 인터넷 브라우저 액세스 권한(Chrome 브라우저 권장)

참고: 이 실습을 실행하려면 시크릿 모드(권장) 또는 시크릿 브라우저 창을 사용하세요. 개인 계정과 학습자 계정 간의 충돌로 개인 계정에 추가 요금이 발생하는 일을 방지해 줍니다.

• 실습을 완료하기에 충분한 시간(실습을 시작하고 나면 일시중지할 수 없음)

참고: 이 실습에는 학습자 계정만 사용하세요. 다른 Google Cloud 계정을 사용하는 경우 해당 계정에 비용이 청구될 수 있습니다.

Google AI Studio 열기

1. 실습 시작을 클릭합니다. 실습 패널에 이 실습의 임시 사용자 인증 정보가 표시됩니다.

   • 참고: 유료 실습인 경우 결제 수단을 선택하라는 메시지가 표시됩니다.

2. 시크릿 창에서 Google AI Studio를 엽니다. Google 로그인 페이지가 표시됩니다.

   • 팁: 실습 탭과 AI Studio 탭을 별도의 창에 나란히 정렬하면 더 쉽게 액세스할 수 있습니다.

3. 아래의 사용자 이름을 복사하여 이메일 필드에 붙여넣은 후 다음을 클릭합니다.

   {{{user_0.username | "Username"}}}

4. 아래의 비밀번호를 복사하여 비밀번호 입력 필드에 붙여넣은 후 다음을 클릭합니다.

   {{{user_0.password | "Password"}}}

5. 계속하려면 화면에 표시되는 이용약관에 동의합니다.

임시 학습자 계정을 사용하여 Google AI Studio에 로그인했습니다.

작업 1. 사전 빌드된 앱 살펴보기

해커톤 개발자로서 첫 번째 단계는 어떤 템플릿과 예시가 있는지 빠르게 파악하는 것입니다. 먼저 사전 빌드된 챗봇 앱을 살펴봅니다.

1. 왼쪽 탐색 메뉴에서 Enable saving(저장 사용 설정)(Build(빌드) 옵션 위)을 클릭하고 사용자 이름을 선택합니다.

2. Build(빌드)를 클릭합니다.

3. Gallery(갤러리) > All apps(모든 앱) 탭을 클릭하고 사전 빌드된 애플리케이션 템플릿 갤러리를 스크롤합니다.

4. ChatterBots 앱을 찾아 클릭합니다.

참고: ' Failed to store recent Application(최근 애플리케이션을 저장하지 못했습니다)'이라는 오류 메시지가 표시되면 Google Drive에 대한 액세스 권한을 부여하지 않은 것입니다. 이 문제를 해결하려면 왼쪽 사이드바의 History(기록) 섹션으로 이동하여 Drive 액세스를 사용 설정하세요. Allow Drive access(Drive 액세스 허용)를 클릭하면 새 팝업 창이 열립니다. 팝업에서 학습자 계정(예: student-XX-YYYY@qwiklabs.net)을 선택하고 계속하는 데 필요한 권한을 부여합니다.

5. Allow(허용)를 클릭하여 Microphone(마이크)에 대한 액세스 권한을 요청합니다.

6. 앱이 IDE 뷰에서 열립니다. 잠시 시간을 내어 인터페이스를 살펴보세요. 왼쪽에는 코드 어시스턴트가 있고, 중앙에는 코드 편집기/파일 뷰어가 있으며, 오른쪽에는 실행 중인 챗봇의 실시간 미리보기가 있습니다.

7. 앱을 미리 보고, ChatterBot 사전 설정을 살펴보며, 정의한 특성을 기반으로 자체 ChatterBot을 만드세요.

8. 생성된 코드를 살펴봅니다. 코드 편집기에서 Show file tree view(파일 트리 보기 표시 버튼을 클릭하여 코드 구조를 확인합니다. App.tsx와 같은 파일을 클릭하여 기본 애플리케이션 코드를 확인하거나 구성요소 폴더 내의 파일을 클릭하여 특정 UI 요소가 빌드되는 방식을 확인합니다.

사전 빌드된 앱 살펴보기

작업 2. 템플릿을 활용하여 앱 프로토타입 생성 및 수정

다음으로 간단한 플래시 카드 유틸리티가 해커톤 프로젝트에 유용할 것으로 판단했습니다. 템플릿을 활용하여 플래시 카드 유틸리티를 생성한 다음 코드 어시스턴트를 사용하여 프로젝트의 브랜딩에 맞춰 디자인을 빠르게 변경해 보겠습니다.

앱 생성

1. Back to start(처음으로 돌아가기)를 클릭하고 왼쪽 상단 모서리에 있는 Google AI Studio 로고를 클릭하여 홈페이지로 돌아갑니다.

2. 왼쪽 탐색 메뉴에서 Build(빌드) > Start(시작)를 클릭합니다.

3. Flash UI 템플릿을 찾아 클릭하여 애플리케이션을 생성합니다.

코드 어시스턴트로 앱 수정

1. 오른쪽의 미리보기 창에서 기본 플래시카드와 상호작용하여 작동 방식을 확인합니다.

2. 입력란에 Large Language Models를 입력하고 화살표를 클릭하여 주제별 세트를 생성합니다.

3. 이제 왼쪽 하단에 있는 코드 어시스턴트 입력란에 주목하세요. 다음 명령어를 입력하여 앱의 스타일과 로직을 변경합니다.

플래시카드의 배경색을 연한 녹색으로 변경하고 한 번에 하나만 뒤집을 수 있도록 플래시카드의 로직을 변경해 줘.

4. Send prompt(프롬프트 보내기)을 클릭합니다. 어시스턴트가 편집기에서 애플리케이션 코드를 수정하는 모습을 확인합니다.

참고: 'Remix(리믹스)' 버튼이 표시되면 버튼을 클릭한 다음 'Apply(적용)'을 클릭하고 확인합니다.

5. 코드가 업데이트되면 미리보기 창에서 두 변경사항을 모두 테스트합니다. 플래시카드가 연한 녹색이고 한 번에 카드 하나만 뒤집을 수 있는지 확인합니다.

6. 다음으로 다른 기능을 추가합니다. 코드 어시스턴트 입력란에 다음 새 명령어를 입력합니다.

중복되지 않는 플래시카드 5개를 더 만들 수 있도록 '5개 더 추가' 버튼을 만들어 줘.

7. Send prompt(프롬프트 보내기)를 클릭하면 어시스턴트가 UI에 새 버튼을 추가하고 새 로직을 포함하도록 코드를 수정합니다.

8. 마지막으로 미리보기 창에서 새 기능을 테스트합니다. 새로운 Surprise Me(추천받기) > add 5 more(5개 더 추가) 버튼을 클릭하고 5개의 고유한 플래시카드가 세트에 추가되었는지 확인합니다.

9. 앱 이름인 Flash UI 옆에 있는 연필 아이콘을 클릭하고, 애플리케이션 이름을 Flashcard Maker로 변경하고, 설명은 기본값으로 둔 다음, Save(저장)를 클릭합니다.

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.

템플릿을 활용하여 앱 프로토타입 생성 및 수정

작업 3. 텍스트 프롬프트를 사용하여 앱 빌드

이제 해커톤의 메인 이벤트용으로 핵심 기능을 처음부터 빌드해 보겠습니다. 일상적인 영어로 설명하여 여행 일정 플래너를 빌드합니다. 구체적으로, 모델에 정형 데이터를 깔끔하게 표시할 수 있는 UI를 만들도록 요청합니다.

1. Build(빌드) 페이지 갤러리로 다시 이동합니다.

2. 페이지 상단의 기본 텍스트 프롬프트 표시줄에 다음 상세 요청을 입력합니다.

도시의 3일 여행 일정을 생성하는 앱을 만들어 줘. 앱에는 도시 이름 입력란이 있어야 해. 출력은 날짜, 시간, 활동이 깔끔한 형식으로 표시된 구조화된 계획이어야 해.

3. Build(빌드)를 클릭하고 코드 어시스턴트가 전체 애플리케이션을 생성할 때까지 기다립니다.

4. 앱이 표시되면 미리보기 창에서 기능을 테스트합니다. 도시 입력란에 Rome을 입력하고 Enter 키를 누릅니다.

5. 출력을 확인합니다. 앱에 구조화된 3일간의 로마 여행 일정이 표시될 것입니다. 이는 AI가 텍스트 프롬프트에서 데이터 기반 UI를 성공적으로 생성했음을 보여줍니다.

6. 패널 상단의 앱 이름 옆에 있는 연필 아이콘을 클릭하고, 애플리케이션 이름을 AI Travel Itinerary Generator로 변경하고, 설명은 기본값으로 둔 다음, Save(저장)를 클릭합니다.

7. (선택사항) 코드 어시스턴트를 사용하여, 생각할 수 있는 애플리케이션의 모든 부분을 수정합니다.

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.

텍스트 프롬프트를 사용하여 앱 빌드

작업 4. 앱 저장, 다운로드, 보기

여행 플래너 프로토타입이 작동하는 것을 확인했습니다. 해커톤의 마지막 단계는 진행 상황을 다운로드하고 팀과 프로젝트를 공유하는 것입니다.

이제 앱이 Build(빌드) 페이지의 'Your apps(내 앱)' 섹션에 저장됩니다.

1. 툴바에서 Download(다운로드) 아이콘을 클릭합니다. 애플리케이션의 전체 소스 코드가 포함된 ZIP 파일이 컴퓨터에 다운로드됩니다.

   • 참고: 이 코드를 사용하여 자체 편집기에서 로컬로 개발을 계속할 수 있습니다.

2. 앱을 게시하는 방법을 알아봅니다. 동일한 툴바에서 Deploy App(앱 배포) 버튼을 클릭합니다.

   • 참고: 이 실습에서 전체 배포 프로세스를 완료하지는 않을 것입니다. 그러나 이 단계를 통해 Google Cloud에 애플리케이션을 게시하는 통합된 절차를 확인할 수 있습니다.

애플리케이션 프로토타입 보기

1. 홈페이지로 이동하여 왼쪽 상단 모서리에 있는 Google AI Studio 로고를 클릭합니다.

2. 왼쪽 탐색 메뉴에서 Build(빌드)를 클릭합니다.

3. Your apps(내 앱) > Created by you(내가 만든 앱) 탭을 클릭하여 수정하고 빌드한 프로토타입을 확인합니다. Flashcard Maker와 AI Travel Itinerary Generator라는 두 개의 애플리케이션이 표시됩니다.

수고하셨습니다

수고하셨습니다. Google AI Studio를 성공적으로 활용하여 기능성 애플리케이션 프로토타입을 처음부터 신속하게 살펴보고, 조정하며, 제작했습니다. 사전 빌드된 템플릿을 활용하고, 자연어로 코드를 수정하며, 단일 텍스트 프롬프트에서 완전한 데이터 기반 애플리케이션을 생성하는 방법을 배웠습니다. 이제 나만의 AI 기반 아이디어를 구현할 준비가 되었습니다.

Google Cloud 교육 및 자격증

Google Cloud 기술을 최대한 활용하는 데 도움이 됩니다. Google 강의에는 빠른 습득과 지속적인 학습을 지원하는 기술적인 지식과 권장사항이 포함되어 있습니다. 기초에서 고급까지 수준별 학습을 제공하며 바쁜 일정에 알맞은 주문형, 실시간, 가상 옵션이 포함되어 있습니다. 인증은 Google Cloud 기술에 대한 역량과 전문성을 검증하고 입증하는 데 도움이 됩니다.

설명서 최종 업데이트: 2026년 3월 12일

실습 최종 테스트: 2026년 3월 12일

Copyright 2026 Google LLC. All rights reserved. Google 및 Google 로고는 Google LLC의 상표입니다. 기타 모든 회사명 및 제품명은 해당 업체의 상표일 수 있습니다.