소개
시도하고자 했던 것과 그 이유를 알려주세요.
*먼저 이 글의 많은 부분은 게시물 템플릿을 안티그라비티에게 주고 템플릿에 맞춰서 글을 써달고 했음을 밝힙니다. 제가 쓴 부분은 읽어 보시면 느껴지실 겁니다. 그리고 이미지도 제가 캡쳐한게 맞긴 합니다.
가장 먼저 아이디어를 제미나이에게서 제안 받았습니다. 머리가 굳어서인지 생각이 떠오르지 않았거든요.
처음에는 디자인과 관련이 있으면 좋겠다 고 생각했습니다. 제미나이가 제 성향을 기억하고 있기 때문인지 그런쪽으로 제안을 해주기도 했고요. 그렇지만 마음에 들지는 않았습니다.
그래서 당장 나에게 필요한게 뭐지? 생각하다가 어차피 지격을 따려고 생각한 구글 공인 교육자(GCE) 과정 공부를 위한 앱을 만들어 보자고 생각했죠. 제 경험상 콘텐츠로 만들면 공부를 하게 되더라고요. 그래서 구글 공인 교육자(GCE) 과정에서 활용할 수 있는 상황별 도구 매칭 퀴즈 앱인 'GCE Float'(이 이름도 제미나이가 지어줬습니다.) 을 개발하고 서버에 배포하는 과정을 시도했습니다.
그렇게 시작했습니다.
첫번째 문답 이후 정말 최소 기능과 최소 디자인을 적용한 사이트가 금방 만들어 졌습니다. 디자인이 마음에 들지 않아서 Figma에 가서 무료 디자인 가이드 중 앱에 대한 것을 선택하고 경로를 복사해서 이 가이드에 맞춰서 디자인해 달라고 했습니다. 아래는 제가 복사한 디자인 가이드입니다.
그리고 폰트를 프리텐다드로 설정해 달라고 했습니다. 웹 사이트 주소만 있어도 알아서 하더군요. https://cactus.tistory.com/306
교육자들이 GCE 인증을 준비하거나 구글 도구 활용법을 익힐 때, 딱딱한 텍스트나 문제집보다 동적이고 재밌는 상호작용형 웹 앱이 있으면 훨씬 효과적이겠다고 생각했습니다. 또한, 퀴즈 문제가 추가될 때마다 개발자가 매번 코드를 수정하는 번거로움을 없애기 위해 구글 스프레드시트를 백엔드 데이터베이스처럼 연동하여 누구나 시트에 문항을 쓰면 실시 간으로 앱에 반영되도록 구조를 설계하고자 했습니다.
한 국 앱 스크린샷
최초의 디자인 개선 이후 히어로 이미지로 사용할 일러스트레이션을 생성해서 붙여 달라고 했습니다.
여성 이미지가 포함된 웹사이트의 스크린샷
아주 만족스럽지는 않지만, 디자인이 어느 정도 완성되었으니 다음은 기능을 제대로 손 볼 차례입니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
AI (Gemini / Claude): 전체적인 React 코드 뼈대 작성 및 로직 구성 (프롬프트 활용)
React + Vite: 프론트엔드 UI 개발 환경
PapaParse: 구글 스프레드시트의 CSV 데이터를 JSON으로 파싱하기 위한 라이브러리
Vercel: Github 리포지토리와 연동하여 무중단 무료 원클릭 배포
구글 스프레드시트: 문제 은행 역할 (웹에 게시 기능을 통해 API화)
🔺 이 도구들 대부분은 안티그라비티가 알아서 결정했습니다. 제가 사용을 결정한 것은 AI와 구글 스프레드 시트 뿐입니다.
Google 스프레드시트의 스크린샷
💡 Tip: 사용한 프롬프트 전문 아래와 같이 핵심 기능(시트 연동, 재미 요소, 배포 용이성)을 명확히 담아 프롬프트를 작성했습니다.
"구글 스프레드시트의 CSV 내보내기 링크(
gviz/tq?tqx=out:csv)를 연동해 서 문항 데이터를 동적으로 불러오는 React 기반의 구글 교육 시나리오 퀴즈 앱 'GCE Float'을 만들어줘. 정답을 맞추면canvas-confetti로 화려한 꽃가루 효과가 터지고, 별도 오디오 파일 없이 Web Audio API를 활용해 앱 내에서 경쾌한 '팝' 효과음이 나도록 구성해줘. 마지막으로 Vercel로 쉽게 배포할 수 있도록 Vite 환경으로 세팅해줘."
💡완료하면 꽃가루도 터집니다.
한국어 웹사이트의 스크린샷
💡 Tip: 핵심 코드 전문 (구글 시트 연동 로직) 별도의 백엔드 없이 구글 스프레드시트를 데이터베이스로 활용한 코드입니다.
import Papa from 'papaparse';
// 구글 스프레드시트 CSV 내보내기 URL
const GOOGLE_SHEET_URL = '<https://docs.google.com/spreadsheets/d/본인_시트_ID/gviz/tq?tqx=out:csv>';
const fetchQuestions = async () => {
try {
const response = await fetch(GOOGLE_SHEET_URL);
const csvData = await response.text();
// PapaParse를 이용해 CSV 데이터를 JSON 배열 객체로 변환
Papa.parse(csvData, {
header: true, // 첫 줄을 key로 사용
skipEmptyLines: true,
complete: (results) => {
// 데이터 필터링 후 상태(State)에 저장
const validData = results.data.filter(q => q.scenario && q.correctTool);
setQuestions(validData);
setIsLoading(false);
}
});
} catch (error) {
console.error("데이터를 가져오는 중 오류 발생:", error);
}
};
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요. 가장 유용했던 꿀팁은 구글 스프레드시트를 '웹에 게시 -> CSV 포맷'으로 설정하여 미니 CMS(콘텐츠 관리 시스템)로 활용한 것입니다. 덕분에 백엔드 서버나 DB를 따로 구축할 필요 없이 코딩을 모르는 팀원들도 시트만 수정하면 앱의 퀴즈 내용을 자유자재로 업데이트할 수 있게 되었습니다.
네. 안티그라비티가 알아서, 잘, 딱, 깔끔하고, 센스있게 구축해 주더군요.
온라인에 올리기 위해 과거에 삽질하며 만들어만 두었던 깃에 로그인했습니다. 그리고 하라는 대로 설정했죠.
마지막으로 온라인에 배포하려면 어떻게 하느냐고 질문했더니, Vercel 을 권해주었습니다.
https://gce-quiz-app.vercel.app/
위 주소가 최종 결과입니다.
설정을 마치고 잠깐 현타가 왔어요. 과거에 내가 삽질하며 배운 HTML, CSS, SQL, PHP 로는 이 정도 품질로 단순한 페이지에 기능을 넣 는 정도도 얼마나 오래 걸렸던가, 하는 생각이 들었죠. 제가 손가락만 움직여서 복사만 하는 존재가 된 것 같았습니다.
그래도 뭘 만들건지 어떻게 만들건지 방향을 결정한 존재는 제가 맞습니다.
인간은 이제 책임만 지는 존재가 된 걸까요?
과정 중에 어떤 시행착오를 겪었나요?
CORS 에러와 권한 이슈: 구글 시트 데이터를 fetch 해올 때, 시트의 범용 권한을 '모든 사용자(링크가 있는 모든 사용자)'로 바꾸고 '웹에 게시' 처리를 완벽하게 하지 않으면 에러가 나면서 데이터가 불러와지지 않는 문제가 있었습니다. 이를 해결하기 위해 엔드포인트 URL 구조를
gviz/tq?tqx=out:csv형식으로 맞췄습니다.효과음 에셋 리소스 관리: 퀴즈를 풀 때 효과음 파일(
.mp3)을 따로 넣으려니 폴더가 지저분해져서, Javascript의 기본 기능인 Web Audio API (window.AudioContext)를 활용해 코드 몇 줄로만 팝(Pop) 소리를 만들어냈습니다.
네, 문제가 있긴 했습니다. 해결도 안티그라비티가 알아서 했어요.
도움이 필요한 부분이 있나요? 이번에는 Github와 Vercel을 연결하여 너무나 편하게 배포를 완료했습니다. 혹시 고수님들은 프론트엔드 단독 프로젝트를 배포하실 때 Vercel 외에 Netlify나 Cloudflare Pages, 혹은 다른 어떤 것을 더 선호하시고, 또 그 이유는 무엇인지 팁을 나눠주시면 감사하겠습니다.
이상의 도움 요청은 안티그라비티의 의견이지만, 네, 저도 궁금하네요.
알려주시면 감사하겠 습니다.
앞으로의 계획이 있다면 들려주세요.
지금은 단순한 퀴즈 앱이지만, 향후에는 오답 노트 기능을 추가하고 사용자 이름을 기반으로 리더보드 순위 기능을 붙여서 학생들이 실제 수업에서 경쟁할 수 있는 게미피케이션(Gamification) 요소로 발전시키거나 가능하다면 평가 기능도 넣어 보고 싶습니다.
도움 받은 글 (옵션)
참고한 외부 사례를 알려주세요.
UI 디자인 리소스: Figma Community의 무료 Educational App 에셋 참고
폰트: 텍스트의 가독성을 높이기 위해 '프리텐다드(Pretendard)' 웹 폰트 적용
재미있었습니다!
