소개
워크숍 현장에서 포스트잇에 적힌 의견을 수합하고 분류(클러스터링)하는 작업 효율화 목적
스마트폰으로 사진을 찍고, 사람이 수기로 데이터를 옮겨 적어 맥락에 맞게 분류해야 하는 문제
별도의 데이터베이스 구축 없이, 참여자가 모바일로 포스트잇 보드를 촬영해 업로드하면 Gemini가 실시간으로 맥락 기반 분류를 처리하고, 이 결과를 화면에 실시간으로 띄워주는 '워크숍 자동화 시스템'을 제작
구글 워크스페이스 생태계(GAS, 스프레드시트, 드라이브)와 구글 AI 스튜디오만으로 실제 작동하는 웹 서비스의 빌드 가능성 확인
[구글 시트 DB] ── 데이터 실시간 동기화 ──> [강의 화면 (?mode=present)]
│ ▲ (결과 공개 제어)
├── 데이터 조작 및 상태 관리 ───────────────┤
│ │
[운영 화면 (?mode=admin)] <──────────────────────┘
▲
└── 드라이브 저장 및 Gemini 분석 데이터 전달 ── [참여자 화면 (?mode=user)]
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Claude: 서비스 기획에 필요한 다양한 맥락이 축적된 상태로서 구체적인 명세 정의
Gemini: 클로드 중심으로 도출한 PRD를 구글 워크스페이스 환경에 맞게 수정하고 명세 재정의
Google AI Studio: 프롬프트와 시스템 지침을 정교하게 설계하고 이미지 멀티모달 분석(손글씨 인식 및 자동 분류) 성능 테스트에 활용
구글 스프레드시트 & 드라이브: 데이터베이스 및 이미지 보관소 역할을 하도록 연동했습니다.
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
모든 기능을 한 번에 빌드하지 않고, 태스크 단위로 끊어서 소화할 수 있게 분담 (필요성을 클로드가 제안)
STEP 1: 로컬 데이터 기반의 강의/운영 화면 UI 프로토타이핑
STEP 2: 참여자 모바일 사진 업로드 UI 구성
STEP 3: 구글 앱스 스크립트를 통한 Gemini API 연동 및 구글 시트 저장 데이터 연결 (진행 필요)
화면 분할 구조 가능성: 하나의 시스템 안에서 URL 파라미터만으로 강의실 화면, 운영자 화면, 참여자 화면이 유기적으로 돌아가는 기획을 첫 구상에서는 하지 못했었는데요. 기획안 정리 과정에서 가능성을 발견하고 시뮬레이션할 수 있어 유익했습니다.
과정 중에 어떤 시행착오를 겪었나요?
AI 스튜디오 내부 시뮬레이터로는 텍스트와 프롬프트가 작동했지만 실제 스프레드시트 데이터베이스와 연동하고, 참여자가 찍은 사진이 구글 드라이브 특정 폴더로 자동 저장되게 만드는 '인프라 연결' 단계에 다다르자 약간의 막연함이 느껴졌습니다. (그러나 다음주에 극복...ㅎ)
앞으로의 계획이 있다면 들려주세요.
구글 시트 및 드라이브 완전 연동: 가이드에 나온 GAS 웹 앱 배포 과정을 차근차근 따라 하여, 모바일에서 연속 촬영한 포스트잇 사진이 내 구글 드라이브에 연결되고 시트에 텍스트가 실시간으로 쌓이는 과정을 완성하는 것이 과제입니다.
현장 필드 테스트: 실제 워크숍 현장에 이 디지털 키트를 들고 나가 동시에 접속해 사용하는 실전 테스트를 진행하고, 아날로그 워크숍을 전환하는 실험을 이어가보려고 합니다.
