티스토리 뷰
# Google Workspace + Gemini
Google Workspace 도구들은 별도의 서버나 복잡한 인프라 없이도 충분히 강력한 웹 애플리케이션을 만들 수 있도록 지원합니다. 특히 Google Sheets, Drive, Apps Script와 같은 친숙한 도구에 더해 Google Gemini API를 활용하면 데이터 관리와 AI 기반 기능을 결합한 스마트한 앱을 구축할 수 있습니다. 이 문서는 코딩 경험이 많지 않아도 이해할 수 있도록 기획부터 배포까지의 과정을 단계별로 정리했습니다.
---
## 1. 앱 제작에 필요한 도구와 역할
### 필수 도구
* Google Sheets (데이터베이스 역할)
앱에서 필요한 데이터를 저장합니다. 예를 들어 회원 정보, 입력 값, 결과물 등을 테이블 형태로 관리할 수 있습니다. 복잡한 DB 지식이 없어도 누구나 쉽게 다룰 수 있다는 장점이 있습니다.
* Google Drive (파일 저장소)
이미지, 문서 등 파일을 저장합니다. 텍스트는 시트에, 파일은 드라이브에 저장한 뒤 시트에 링크를 연결하는 방식이 효율적입니다.
* Google Apps Script (비즈니스 로직 및 서버)
자바스크립트 기반의 개발 환경으로 앱의 핵심 로직을 구현합니다. Sheets와 Drive를 제어하고, Gemini API를 호출하며, 웹 앱 인터페이스(HTML, CSS, JS)를 사용자에게 제공합니다.
* Google Gemini API (AI 기능)
자연어 처리, 요약, 분류, 대화형 인터페이스 등 다양한 AI 기능을 앱에 통합할 수 있습니다.
### 추가적으로 고려할 수 있는 도구
* Google Forms : 사용자 입력을 쉽게 수집
* Google Sites : 시각적으로 꾸민 웹 프론트엔드 제공
* AppSheet : 노코드 방식의 모바일 앱 제작
* Firebase : 사용자 인증, 실시간 데이터베이스, 앱 확장성 제공
* Google Cloud Project : API Key 및 OAuth 관리
* PropertiesService : API Key와 비밀값 안전하게 저장
---
## 2. 앱 제작 단계별 가이드
### 기획 및 설계
* 목표 정의: 앱의 핵심 기능을 명확히 합니다. (예: 일기 작성 앱, 프로젝트 관리 앱)
* 데이터 구조 설계: 어떤 데이터를 저장할지 정의하고, 구글 시트의 열(Column)을 설계합니다. (예: 날짜, 제목, 내용, 첨부파일 URL 등)
* 사용자 여정 구상: 앱의 화면 흐름과 인터페이스를 간단히 그림으로 그려보면 효과적입니다.
### 데이터베이스 구축 (Google Sheets)
* 새로운 시트를 생성하고 첫 번째 행에 필드명을 입력합니다.
* 예시: `ID | 날짜 | 내용 | 감정 점수 | 파일 링크`
* 데이터 유효성 검사(드롭다운, 날짜 선택 등)를 설정하면 사용자가 잘못 입력하는 것을 방지할 수 있습니다.
### 핵심 로직 개발 (Apps Script)
1. 프로젝트 생성: 시트에서 `확장 프로그램 → Apps Script`를 선택하여 새 프로젝트를 만듭니다.
2. 시트 연결 코드:
```js
function readData() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("데이터");
return sheet.getDataRange().getValues();
}
function writeData(row) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("데이터");
sheet.appendRow(row);
}
```
3. **데이터 수정/삭제 기능**도 작성하여 CRUD(생성, 읽기, 수정, 삭제)가 가능하도록 합니다.
### 4단계: AI 기능 통합 (Gemini API)
1. **API 키 발급**: [Google AI Studio](https://aistudio.google.com/)에서 Gemini API 키를 발급받습니다.
2. **API 키 저장**: `PropertiesService`를 이용하여 보관합니다.
```js
function getApiKey() {
return PropertiesService.getScriptProperties().getProperty('GEMINI_API_KEY');
}
```
3. **API 호출 함수 작성**:
```js
function generateTextWithGemini(prompt) {
const apiKey = getApiKey();
const endpoint = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${apiKey}`;
const payload = JSON.stringify({
contents: [{ parts: [{ text: prompt }] }]
});
const options = {
method: 'post',
contentType: 'application/json',
payload: payload
};
try {
const response = UrlFetchApp.fetch(endpoint, options);
const data = JSON.parse(response.getContentText());
return data.candidates[0].content.parts[0].text;
} catch (e) {
return 'API 호출 오류: ' + e.message;
}
}
```
### 5단계: 사용자 인터페이스 (HTMLService)
```js
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
```
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<h2>Gemini AI 앱</h2>
<input type="text" id="prompt" placeholder="프롬프트 입력">
<button onclick="runGemini()">실행</button>
<div id="output"></div>
<script>
function runGemini() {
var prompt = document.getElementById("prompt").value;
google.script.run.withSuccessHandler(function(res){
document.getElementById("output").innerText = res;
}).generateTextWithGemini(prompt);
}
</script>
</body>
</html>
```
### 배포
* Apps Script에서 `배포 → 새 배포 → 웹 앱` 선택
* 실행 권한: Me, 접근 권한: Anyone with link
* 제공된 URL이 곧 앱 주소가 됩니다.
---
## 3. 보안 및 유지 관리
* API 키 보안: 절대 코드에 직접 쓰지 말고 `PropertiesService`에 저장
* 권한 최소화: 필요한 범위만 승인
* 요금 관리: Gemini API 무료 사용량 이후 과금 주의
* 입력 검증: 사용자 입력은 반드시 검사하여 보안 위협 방지
---
## 4. 확장 아이디어
* Drive 업로드 파일을 Gemini Vision으로 분석
* Chatbot UI를 구축하여 대화형 앱 제작
* Firebase Auth로 사용자별 데이터 접근 권한 부여
* AppSheet와 연결해 모바일 앱 제공
---
✅ 위 단계를 따르면 **Sheets + Drive + Apps Script + Gemini**를 통합한 앱을 완성할 수 있습니다. 필요에 따라 Forms, Sites, Firebase 등을 더해 고급 기능으로 확장하면 더욱 완성도 높은 애플리케이션을 만들 수 있습니다.
'팁' 카테고리의 다른 글
| 갤럭시코퍼레이션(Galaxy Corporation) 심층 분석 (0) | 2025.09.08 |
|---|---|
| Qwen · Google AI Studio · Vheer · Yuwen · Wisq · Whisk 비교 분석 (0) | 2025.09.08 |
| 📚 국내 자기출판(독립출판) 플랫폼 추천 및 수익화 가이드 (1) | 2025.09.06 |
| AI로 동영상 만드는 방법 가이드 (0) | 2025.09.05 |
| 티스토리 블로그에 구글 애드센스 연동하기: 완벽 가이드 (2025년 최신) (3) | 2025.09.04 |