Gemini Canvas + App Script로 만든 중국어 단어 학습 웹앱 만들기

소개

중국어를 공부하는 중에, 매일 배운 단어들을 복습할 수 있는 간단한 웹앱을 만들고 싶었어요.

1주차에 배운 App Script와 Google Drive 파일 불러오기 기술을 활용해 실제로 동작하는 학습 앱을 만들 수 있겠다는 생각이 들었고, Gemini의 Canvas 기능을 활용해 구현에 도전했습니다 💪

진행 방법

• 도구:

  • Gemini Canvas

  • Google App Script

  • Google Drive (단어 파일 저장용)

• 개발 흐름👍

우선 Gemini 2.5 Pro 에게 무엇을 원하는지 요구사항을 정확하게 요청하였습니다.

ALT

한국어 텍스트가있는 페이지의 스크린 샷

ALT

한국어 문자 메시지의 스크린 샷

ALT

한국어 문자 메시지의 스크린 샷

ALT

Google Play Services -Korean

(최종 완성된 중국어 학습 웹 앱)

• 개발과정 요약👍

  1. Gemini Canvas에서 기본 UI와 기능 구성

  2. App Script를 통해 Google Drive의 단어 파일(.csv 등)을 읽어오는 로직 작성

  3. 사용자 인터페이스에 단어를 표시하고 퀴즈 형태로 학습 가능하도록 구현

• 프롬프트 예시:

"Google Drive에 저장된 단어 리스트를 불러와서, 랜덤으로 보여주는 웹 UI를 만들고 싶어요. Gemini Canvas로 시작하고, App Script와 연동하고 싶어요."

• 에러 해결 과정:

  • 처음에는 파일 불러오기 부분에서 오류가 발생했지만, Gemini에게 오류 메시지를 보여주며 대화하니 정확한 원인과 수정 코드를 추천해줘서 문제를 해결할 수 있었어요 👍

결과와 배운 점

• 완성한 웹앱을 통해 매일 단어 복습 루틴을 만들 수 있게 되었어요 📚

• Gemini는 단순한 답변 도구가 아니라, 실제 개발 파트너처럼 문제 해결을 도와주는 훌륭한 도구라는 걸 느꼈어요

• Google Drive 연동 + App Script 조합은 앞으로도 다양하게 활용할 수 있을 것 같아요.

도움 받은 글 (옵션)

• Gemini 공식 문서

• Google Apps Script Docs

• 18기 스타트업실험실 여행가J 님 강의