(구글 AI 스튜디오 활용) 국어 비문학 공부 사이트 만들어보기, 구구단 연습 사이트 만들어보기

소개

(구글 AI 스튜디오 활용) 국어 비문학 공부 사이트 만들어보기, 구구단 연습 사이트 만들어보기

진행 방법

구글 AI 스튜디오 PRD 생성 사이트를 활용하여 제작했습니다.

단톡방 놀러오시면 PRD 생성 링크를 받으실 수 있어요

Tip: 첫 시작 - 아이디어

비문학 공부 사이트

대한민국 학생들의 국어 성적을 올려주기 위한 문해력 업그레이드를 도와주는 사이트

대한민국 수능 문제를 바탕으로 아무리 어려운 비문학 지문이라 하더라도 어떻게 글을 읽을 수 있는지 방법을 제시하고 그 로직을 무한대로 연습할 수 있도록 도와주는 사이트

우선 고1~3을 타겟팅으로 수능 비문학을 정복하기 위한 콘텐츠로 시작하며 이것이 개발 완료되면 중학생, 초등학생 버전을 이어서 개발한다.

목적은 모든 비문학의 글의 구조, 전개 방식, 주장과 근거 방식, 예시 제시 방식, 부연 설명 방식, 글을 제대로 요약하는 방법, 글을 정확히 이해하는 방법, 대학 수학 능력이라는 평가에 알맞게 대학교에서 공부를 하기에 필요한 능력들은 역연산으로 연습할 수 있는 사이트

베이스는 2026년 수능, 2026년 9월 모의고사, 2026년 6월 모의고사와 같은 평가원 모의고사와 수능을 베이스로 하며 최근 5개년에 대한 DB를 바탕으로 공부방법과 방식, 스타일을 제안하고 연습시스템을 사이트에 구현한다.

구구단 사이트

- 구구단 문제를 아주 재미있게 풀면서 2단 ~ 9단 문제를 완수해나갈 수 있는 프로그램
- 학생들의 기록은 보관되어야 하며 우선 로컬에 보관하다가 추후 supabase db와 연동할 것임
- 개발을 위해 우선 로그인 기능은 나중에 개발 
- 2단~9단 중에 원하는 범위를 고르거나, 원하는 단수를 고르거나, 전체를 다 풀어보거나, 원하는 단수만 선택해서 풀어보거나 할 수 있음
- 문제를 풀면서 뭔가 성장한다는 느낌이 있어야 함 (레벨 업 개념, 아바타의 성장 개념)

Tip: 해당 아이디어를 PRD 생성 사이트에서 PRD를 받습니다.

비문학 PRD

Google AI Studio – Build 전용 PRD 입력 템플릿

이 문서에 기재된 내용을 기반으로, Google AI Studio – Build는 실행 시점의 최신 기능·최신 모델·최신 API·최신 매뉴얼을 자동으로 확인하여 최적의 앱을 구성합니다.
구체적인 UI/DB 구조/모델 설정은 자동으로 설계해주세요.

⸻

[0] 기본 정보

앱 이름: **수능 비문학 로직 마스터 (Logic Master for CSAT)**
앱의 주요 목적 (한 문장): **최근 5개년 수능 및 모의고사 데이터를 기반으로 비문학 지문의 논리 구조를 분석하고 독해력을 훈련하는 문해력 향상 웹 앱**

⸻

[1] 앱의 주요 기능

앱에서 제공하고 싶은 핵심 기능을 자유롭게 작성하세요.
Build는 아래 내용을 참고하되, 최신 기능을 우선 적용하여 최적화된 구조로 자동 구성합니다.

핵심 기능:
1. **AI 기반 지문 논리 분석:** 비문학 지문을 입력하거나 선택하면 AI가 문단별 구조, 전개 방식(주장/근거, 예시, 부연 등), 핵심 논지를 시각적으로 분해하여 설명.
2. **역연산 독해 훈련:** 대학 수학 능력에 필요한 사고력을 기르기 위해, 완성된 글을 보고 개요를 역으로 추론하거나 핵심을 요약하는 연습 기능.
3. **무한 연습 시스템:** 2026년 수능 대비 및 최근 5개년(평가원/수능) 기출 스타일을 학습하여, 유사한 논리 구조를 가진 지문과 문제를 무한대로 생성 및 제시.
4. **단계별 학습 모드:** 고1, 고2, 고3 학년별 난이도 설정 및 비문학 유형(인문, 사회, 과학, 기술 등) 필터링.
5. **즉각적인 피드백:** 사용자가 작성한 요약문이나 정답에 대해 논리적 근거를 바탕으로 한 AI 첨삭.

⸻

[2] 사용자 흐름

사용자가 앱을 어떻게 사용할지 대표적인 흐름을 간단히 적어주세요.
상세 동작 방식과 화면 구성은 Build가 최신 매뉴얼 기준으로 자동 설계합니다.

사용자 흐름:
1. 사용자가 웹사이트에 접속한다 (로그인 없이 즉시 시작).
2. 목표 학년(고1~3)과 훈련하고 싶은 주제(과학/철학/경제 등)를 선택한다.
3. 시스템이 최신 경향이 반영된 비문학 지문을 제시한다.
4. 사용자는 지문을 읽고 '문단별 요약' 또는 '논리 구조 파악' 문제를 푼다.
5. '분석 보기'를 클릭하면 AI가 지문의 구조도와 독해 전략(How-to)을 시각적으로 보여준다.
6. 학습 결과는 브라우저에 임시 저장되어 세션 동안 유지된다.

⸻

[3] 데이터 활용 여부

필요 시 저장 또는 조회 기능이 포함되는지 작성하세요.
구체 스키마·DB 구조는 작성하지 마세요.
Build가 실행 시점의 최신 API와 권장 방식을 확인하여 자동 구성합니다.

데이터 저장/조회 기능 필요 여부: **필요 (로컬 스토리지 한정)**
데이터 관련 요구사항:
- **서버 DB 미사용:** 개인정보 보호 및 간편한 접근을 위해 별도의 회원가입이나 서버 데이터베이스 저장을 하지 않음.
- **Local Storage 활용:** 사용자의 학습 진행 상황, 최근 푼 문제, 북마크한 지문 등은 브라우저의 Local Storage(또는 IndexedDB)를 활용하여 기기 내에만 저장.
- **기출 데이터:** AI 모델이 내재하고 있는 지식(최근 5개년 수능/모의고사 데이터)을 활용하여 콘텐츠를 동적으로 생성.

⸻

[4] 화면 구성 의도 (선언적 표현)

원하는 화면 유형을 간단히 적어주세요.
UI/레이아웃/컴포넌트 배치는 Build가 최신 방식으로 구성합니다.

원하는 화면 유형:
- **메인 대시보드:** 난이도/주제 선택 카드, 학습 시작 버튼이 있는 깔끔한 랜딩 페이지.
- **학습 화면 (Split View):** 좌측에는 비문학 지문, 우측에는 AI 분석 도구(구조도, 요약 입력창, 힌트 버튼)가 배치된 2단 레이아웃.
- **분석 결과 모달/패널:** 지문 위에 하이라이트로 문장 간의 연결 고리(화살표 등)를 시각화하여 보여주는 오버레이.
- **히스토리 화면:** 로컬 스토리지에 저장된 학습 기록을 리스트 형태로 보여주는 페이지.

⸻

[5] 기타 요구사항

필요한 경우 추가 요구사항을 작성하세요.
작성된 요구사항은 Build가 최신 기능과 매뉴얼을 기반으로 자동 최적화하여 구현합니다.

기타 요구사항:
- **집중력 강화 UI:** 불필요한 장식을 배제하고, 텍스트 가독성을 최우선으로 하는 타이포그래피 중심 디자인 (세리프/산세리프 옵션 제공).
- **반응형 웹:** 태블릿이나 노트북 등 다양한 학습 기기에서 최적화된 화면 제공.
- **교육적 어조:** AI의 피드백은 친절하면서도 논리적인 '강사'의 어조를 유지.

⸻

[6] 보조 옵션

Build가 앱을 구성할 때 참고할 수 있는 옵션입니다.
작성하지 않으면 Build가 판단하여 자동 구성합니다.

- **언어:** 한국어 인터페이스 및 한국어 콘텐츠.
- **디자인 테마:** 눈이 편안한 'Paper' 모드 (미색 배경, 검은 글씨) 또는 다크 모드 지원.

⸻

[7] 확장 가능성

향후 확장하고 싶은 아이디어가 있다면 적어주세요.
Build는 “현재 작성된 PRD 범위에서 구현 가능한 수준”으로만 확장안을 반영하고,
구체 구현은 최신 기능 기준으로 자동 설계합니다.

확장 아이디어:
- 추후 고등학생 과정을 넘어 중학생 및 초등학생용 독해 콘텐츠 추가 예정.
- 특정 대학(서울대 등) 진학을 위한 심화 논리 사고력 모듈 확장.

⸻

Build 적용 지침 (중요)

아래 문장은 사용자가 수정하지 않고 그대로 Build에 들어가야 하는 고정 문장입니다:

“위 PRD 내용은 실행 시점의 Google AI Studio – Build가 제공하는 최신 기능, 최신 모델, 최신 API, 최신 매뉴얼을 기준으로 해석하고 구현합니다.
필요한 경우 Build는 최신 버전 권장 설정을 우선 적용하여 UI·기능·데이터 구조를 자동으로 최적 설계합니다.”

구구단 PRD

Google AI Studio – Build 전용 PRD 입력 템플릿
이 문서에 기재된 내용을 기반으로, Google AI Studio – Build는 실행 시점의 최신 기능·최신 모델·최신 API·최신 매뉴얼을 자동으로 확인하여 최적의 앱을 구성합니다.
구체적인 UI/DB 구조/모델 설정은 자동으로 설계해주세요.
⸻
[0] 기본 정보
앱 이름: 구구단 히어로즈 (GuGuDan Heroes)
앱의 주요 목적 (한 문장): 구구단(2단~9단) 문제를 풀며 경험치를 획득하고 레벨업/아바타 성장을 통해 재미있게 학습하는 게이미피케이션 학습 앱입니다.
⸻
[1] 앱의 주요 기능
앱에서 제공하고 싶은 핵심 기능을 자유롭게 작성하세요.
Build는 아래 내용을 참고하되, 최신 기능을 우선 적용하여 최적화된 구조로 자동 구성합니다.
핵심 기능:
맞춤형 문제 설정: 2단부터 9단까지 원하는 단수 하나를 선택하거나, 특정 범위(예: 35단)를 지정하거나, 전체(29단)를 선택하여 학습을 시작할 수 있는 기능.
게이미피케이션 성장 시스템: 정답을 맞힐 때마다 경험치(XP)가 쌓이고, 일정 XP 도달 시 레벨이 오르거나 아바타의 외형/칭호가 변하는 성장 요소 반영.
인터랙티브 퀴즈 UI: 문제 제시, 정답 입력, 즉각적인 정오답 피드백(시각적 효과) 제공.
학습 기록 저장: 사용자의 현재 레벨, 경험치, 최근 학습 기록을 유지.
⸻
[2] 사용자 흐름
사용자가 앱을 어떻게 사용할지 대표적인 흐름을 간단히 적어주세요.
상세 동작 방식과 화면 구성은 Build가 최신 매뉴얼 기준으로 자동 설계합니다.
사용자 흐름:
앱 접속 시 현재 레벨과 아바타 상태가 표시되는 메인 홈 화면 확인.
'학습 시작' 버튼을 눌러 학습할 구구단 범위(단수 선택, 범위 선택 등)를 설정.
퀴즈 화면으로 진입하여 연속된 구구단 문제를 풀이.
정답 시 화려한 효과와 함께 경험치 획득, 오답 시 격려 메시지 또는 재시도.
문제 풀이 세트 완료 후 결과 화면에서 획득 점수와 레벨업 진행 상황 확인.
⸻
[3] 데이터 활용 여부
필요 시 저장 또는 조회 기능이 포함되는지 작성하세요.
구체 스키마·DB 구조는 작성하지 마세요.
Build가 실행 시점의 최신 API와 권장 방식을 확인하여 자동 구성합니다.
데이터 저장/조회 기능 필요 여부: 필요 (로컬 스토리지 전용)
데이터 관련 요구사항:
Local Storage 사용: 별도의 서버나 로그인 없이 브라우저 Local Storage를 활용하여 사용자 데이터(레벨, 경험치, 설정 값)와 학습 이력을 영구적으로 보존.
초기화 기능: 필요시 데이터를 리셋할 수 있는 옵션 제공.
⸻
[4] 화면 구성 의도 (선언적 표현)
원하는 화면 유형을 간단히 적어주세요.
UI/레이아웃/컴포넌트 배치는 Build가 최신 방식으로 구성합니다.
원하는 화면 유형:
메인 홈 화면: 사용자의 현재 성장 상태(레벨/아바타)를 중심에 크게 보여주고, '도전하기' 버튼을 강조.
설정/준비 화면: 2단~9단을 버튼이나 체크박스로 직관적으로 선택할 수 있는 UI.
퀴즈 플레이 화면: 문제는 크게 표시, 숫자 키패드(모바일 고려) 또는 입력창 제공, 진행 상황 표시줄(Progress Bar).
결과/보상 화면: 점수와 경험치 상승 그래프, 레벨업 시 축하 애니메이션 효과.
⸻
[5] 기타 요구사항
필요한 경우 추가 요구사항을 작성하세요.
작성된 요구사항은 Build가 최신 기능과 매뉴얼을 기반으로 자동 최적화하여 구현합니다.
기타 요구사항:
디자인 테마: 학생들이 흥미를 느낄 수 있는 밝고 명랑한 컬러 팔레트와 둥근 모서리의 UI 컴포넌트 사용.
성장 체감: 단순히 숫자만 올라가는 것이 아니라, 레벨에 따라 '초보자' -> '숙련자' -> '구구단 마스터' 등으로 칭호가 바뀌거나 아이콘이 변경되는 등 시각적 보상 제공.
반응형: 데스크탑과 모바일 태블릿 환경 모두에서 터치하기 쉬운 UI 크기 적용.
⸻
[6] 보조 옵션
Build가 앱을 구성할 때 참고할 수 있는 옵션입니다.
작성하지 않으면 Build가 판단하여 자동 구성합니다.
세련된 폰트의 한국어 인터페이스로 작성.
⸻
[7] 확장 가능성
향후 확장하고 싶은 아이디어가 있다면 적어주세요.
Build는 “현재 작성된 PRD 범위에서 구현 가능한 수준”으로만 확장안을 반영하고,
구체 구현은 최신 기능 기준으로 자동 설계합니다.
확장 아이디어:
추후 Supabase 등 외부 DB와 연동하여 기기 간 데이터 동기화 (현재는 로컬만 구현).
친구들과 점수를 경쟁하는 리더보드 시스템.
아바타 커스터마이징 상점 기능.
⸻
Build 적용 지침 (중요)
아래 문장은 사용자가 수정하지 않고 그대로 Build에 들어가야 하는 고정 문장입니다:
“위 PRD 내용은 실행 시점의 Google AI Studio – Build가 제공하는 최신 기능, 최신 모델, 최신 API, 최신 매뉴얼을 기준으로 해석하고 구현합니다.
필요한 경우 Build는 최신 버전 권장 설정을 우선 적용하여 UI·기능·데이터 구조를 자동으로 최적 설계합니다.”

<예시>

구구단 구체화를 위한 프롬프트들

  • 최대한 구체적으로 적기

  • 한번에 너무 많은 질문은 가급적 금지

  • 3개~6개 정도 유지

  • 정말 중요한 패치는 1~2개로만 보내서 성능 최적화

- 2단, 5단, 9단을 선택한 경우 모든 문제가 빠짐없이 나와야 함
- 아바타는 구구단 문제를 풀 때 함께 표시되어야 하며 레벨과 경험치가 표시되어야 함
- 버튼 입력 방식이 아니라 주관식으로 풀 수 있어야 하며, 오답이 나온 경우 오답으로 따로 관리되어야 함 (타임스탬프로 관리되고, 오답 빈출도가 개인화 되어야 함)
# 틀린 경우 정답 대신 오답 힌트가 제공 되도록 패치
( 곱셈이므로 덧셈의 원리로 힌트를 2가지 이상 제공 )
# 공격하기라는 개념을 만들었는데 캐릭터가 몬스터를 공격하는 모션이 나오도록 패치
# 틀린 경우 몬스터로부터 공격을 당함 (그래서 체력을 달게 되고 일정 체력이 달으면 그 도전은 실패함)
# 공격하기 이후에 잠깐의 딜레이가 발생하는데 최소한의 딜레이말 발생하도록 패치 (캐릭터 공격모션 정도로만)
# 학생들의 경험치는 1:1 비율로 포인트가 쌓일 수 있도록 패치
# 우선 로컬에 데이터 저장해서 자동 데이터 저장, 불러오기 될 수 있도록 패치 (새로고침해도 데이터 유지)
# 모든 문제를 실수 없이 다 풀었을 때 보너스 경험치를 주고 캐릭터가 필살기를 입력하는 특별한 이벤트를 만들어줘

# 각 단별로 5세트를 풀 때마다 몬스터의 등급이 올라가도록 패치, 뭔가 높은 사냥터에 온것같은 느낌

# SUPABASE DB와 연동하고자 함, 간단한 회원가입, 로그인 로직을 만들고 학생들의 데이터들이 누적적으로 관리될 수 있도록 DB쿼리문을 제공해주고 연동 방법 알려줘
대시보드를 만들고 학생의 누적 데이터를 보여주는 기능 추가
2단~9단의 섬 모양 이모티콘을 만들고 다리같은것으로 연결해주는 공간에서 각 섬에 각 단의 풀이 총 횟수가 표시되도록 패치 예를 들어 2단과 관련된 문제를 풀었다면 그 푼 갯수가 표시되는 방식임
이를 통해 시각적으로 자신이 몇문제를 풀었는지 알아 볼 수 있고 정렬 기능을 통해 적게 푼것을 바로 파악할 수 있도록 패치 (적게 푼 순서, 많이 푼 순서, 원래 구구단 순서 등)
문제를 풀 때 조차 경험치가 같이 표시되어야 하며 뭔가 구구단을 풀지만 게임을 하는듯한 느낌이 들어야 함
- 2단~9단 몬스터를 모두 다르게 구성
- 공격모션의 다양화 (랜덤 공격)
- 한번에 성공할 경우 보너스 경험치 제공과 필살기 공격 모션 추가
# 모든 문제를 실수 없이 다 풀었을 때 보너스 경험치를 주고 캐릭터가 필살기를 입력하는 특별한 이벤트를 만들어줘

# 각 단별로 5세트를 풀 때마다 몬스터의 등급이 올라가도록 패치, 뭔가 높은 사냥터에 온것같은 느낌

# SUPABASE DB와 연동하고자 함, 간단한 회원가입, 로그인 로직을 만들고 학생들의 데이터들이 누적적으로 관리될 수 있도록 DB쿼리문을 제공해주고 연동 방법 알려줘
대시보드를 만들고 학생의 누적 데이터를 보여주는 기능 추가
2단~9단의 섬 모양 이모티콘을 만들고 다리같은것으로 연결해주는 공간에서 각 섬에 각 단의 풀이 총 횟수가 표시되도록 패치 예를 들어 2단과 관련된 문제를 풀었다면 그 푼 갯수가 표시되는 방식임
이를 통해 시각적으로 자신이 몇문제를 풀었는지 알아 볼 수 있고 정렬 기능을 통해 적게 푼것을 바로 파악할 수 있도록 패치 (적게 푼 순서, 많이 푼 순서, 원래 구구단 순서 등)
문제를 풀 때 조차 경험치가 같이 표시되어야 하며 뭔가 구구단을 풀지만 게임을 하는듯한 느낌이 들어야 함
틀린 경우 정답 대신 오답 힌트가 제공 되도록 패치
( 곱셈이므로 덧셈의 원리로 힌트를 2가지 이상 제공 )
공격하기라는 개념을 만들었는데 캐릭터가 몬스터를 공격하는 모션이 나오도록 패치
틀린 경우 몬스터로부터 공격을 당함 (그래서 체력을 달게 되고 일정 체력이 달으면 그 도전은 실패함)
공격하기 이후에 잠깐의 딜레이가 발생하는데 최소한의 딜레이말 발생하도록 패치 (캐릭터 공격모션 정도로만)
학생들의 경험치는 1:1 비율로 포인트가 쌓일 수 있도록 패치
우선 로컬에 데이터 저장해서 자동 데이터 저장, 불러오기 될 수 있도록 패치 (새로고침해도 데이터 유지)

결과와 배운 점

  • 필요에 의하여 만들어야 한다는 인사이트를 얻었습니다

  • 꾸준히 필요에 의해 기능을 업데이트해나갈 예정입니다.

  • 제 개인적인 경험으로는 커서에 비해 디자인이 좀 더 좋았습니다

  • 앞으로 SUPABASE DB 연동 측면, VERCEL 배포 과정을 좀 더 연습해보면서 익숙해지고 싶습니다.

    <해결을 위해 주로 썼던 프롬프트 공유>

    # vercel 배포과정에서 아래와 같은 에러 발생 해결 바람
    
    20:48:16.525 Running build in Washington, D.C., USA (East) – iad1
    20:48:16.525 Build machine configuration: 4 cores, 8 GB
    20:48:16.619 Cloning github.com/gusrl0613/rnrneks (Branch: main, Commit: b7c17af)
    20:48:16.619 Previous build caches not available.
    20:48:16.906 Cloning completed: 287.000ms
    20:48:17.258 Running "vercel build"
    20:48:18.195 Vercel CLI 50.5.2
    20:48:18.762 Installing dependencies...
    20:48:27.707
    20:48:27.707 added 83 packages in 9s
    20:48:27.707
    20:48:27.707 9 packages are looking for funding
    20:48:27.707 run npm fund for details
    20:48:27.759 Running "npm run build"
    20:48:27.879
    20:48:27.879 > [email protected] build
    20:48:27.880 > vite build
    20:48:27.880
    20:48:28.149 vite v6.4.1 building for production...
    20:48:28.213 transforming...
    20:48:28.223 ✓ 2 modules transformed.
    20:48:28.238 rendering chunks...
    20:48:28.242 computing gzip size...
    20:48:28.246 dist/index.html 4.28 kB │ gzip: 1.18 kB
    20:48:28.246 ✓ built in 68ms
    20:48:28.324 Build Completed in /vercel/output [10s]
    20:48:28.346 Deploying outputs...
    20:48:30.287 Deployment completed
    20:48:31.207 Creating build cache...
    20:48:34.569 Created build cache: 3.359s
    20:48:34.569 Uploading build cache [21.09 MB]
    20:48:34.965 Build cache uploaded: 396.973ms
    
    
    # VERCEL 에서 SUPABASE DB 연동을 위한 환경변수를 추가할거야 어떻게 추가해야 하는지 알려주고 그 환경변수를 잘 받아와서 DB가 잘 연동될 수 있도록 코드를 점검해

    # VERCEL 배포했더니 화면이 배경만 나오고 제대로 안나오는데? 확인 바람
    
    Running build in Washington, D.C., USA (East) – iad1
    Build machine configuration: 4 cores, 8 GB
    Cloning github.com/gusrl0613/qlansgkr (Branch: main, Commit: c4d7fec)
    Previous build caches not available.
    Cloning completed: 318.000ms
    Running "vercel build"
    Vercel CLI 50.5.2
    Installing dependencies...
    npm warn deprecated [email protected]: Use your platform's native DOMException instead
    added 156 packages in 11s
    28 packages are looking for funding
    run npm fund for details
    Running "npm run build"
    

# SUPABASE DB와 연동하고자 함, 간단한 회원가입, 로그인 로직을 만들고 학생들의 데이터들이 누적적으로 관리될 수 있도록 DB쿼리문을 제공해주고 연동 방법 알려줘
# 에러 체크

Running build in Washington, D.C., USA (East) – iad1
Build machine configuration: 4 cores, 8 GB
Cloning github.com/gusrl0613/qlansgkr (Branch: main, Commit: 3bac2d3)
Cloning completed: 293.000ms
Restored build cache from previous deployment (7M5CYvtrDjLk614hFfMydLyfwuMH)
Running "vercel build"
Vercel CLI 50.5.2
Installing dependencies...
up to date in 4s
28 packages are looking for funding
  run `npm fund` for details
Running "npm run build"
> [email protected] build
> vite build

제미나이 APIKEY를 VERCEL에서 특별히 입력하고 싶다면 아래와 같은 프롬프트로 구현

API를 입력 설정할 수 있도록 해줘, 그 API를 기반으로 분석할거야 (VERCEL 환경에서는)

DB화에 대한 연습

구글 드라이브 시트 웹훅 링크를 설정해두면 
- 그곳에 원문 / 제미나이 분석 결과 등을 자동 저장할 수 있는 기능 추가 
- 학습하기 DB도 그곳에 자동 저장할 수 있는 기능 추가 

# 사용자는 웹훅만 설정하면 됨
# 구글 드라이브 시트용 GAS 를 줘 

응답

2. Google Apps Script (GAS) 코드 설정 방법
구글 스프레드시트에 데이터를 자동 저장하려면, 사용자가 직접 구글 시트에서 스크립트를 생성하고 배포해야 합니다. 아래 내용을 참고하여 설정해주세요.
[설정 가이드]
구글 스프레드시트를 새로 만듭니다.
상단 메뉴에서 확장 프로그램 > Apps Script를 클릭합니다.
기존 코드를 지우고 아래 코드를 붙여넣습니다.
배포 > 새 배포를 클릭합니다.
유형 선택 옆의 톱니바퀴를 눌러 웹 앱을 선택합니다.
다음과 같이 설정합니다:
설명: Logic Master Webhook
다음 사용자 계정으로 실행: 나(me)
액세스 권한이 있는 사용자: 모든 사용자 (중요: 이렇게 해야 앱에서 접근 가능합니다)
배포 버튼을 누르고, 생성된 웹 앱 URL을 복사합니다.
Logic Master 앱의 설정(Settings) 메뉴에 있는 'Google Sheet Webhook URL' 칸에 붙여넣습니다.
[Google Apps Script 코드]
function doPost(e) {
  try {
    // 1. 데이터 파싱
    var rawData = e.postData.contents;
    var data = JSON.parse(rawData);
    
    // 2. 시트 선택 (첫 번째 시트)
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
    
    // 3. 헤더가 없으면 생성
    if (sheet.getLastRow() === 0) {
      sheet.appendRow(["날짜", "지문 제목", "출처", "점수", "나의 요약", "AI 피드백", "지문 전문"]);
    }
    
    // 4. 데이터 추가
    sheet.appendRow([
      data.timestamp,
      data.title,
      data.origin,
      data.score,
      data.userSummary,
      data.feedback,
      data.passageContent
    ]);
    
    // 5. 성공 응답 (JSON)
    return ContentService.createTextOutput(JSON.stringify({result: "success"}))
      .setMimeType(ContentService.MimeType.JSON);
      
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({result: "error", message: error.toString()}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}
이 앱에서 진행하는 모든 ai 분석에 대하여 반드시 설정한 웹훅으로 전송되어야 해, 니가 하라는 설정 다했으니 자동전송될 수 있도록 패치

원문은 보내지는데 ai 분석은 안보내져서 다시 시도한 프롬프트

원문은 보내지는데 ai분석은 안보내지거든? 원인 파악 후 해결 

답변

앱에서는 정상적으로 데이터를 전송하고 있으나, 구글 스프레드시트의 스크립트(GAS)가 AI 분석 데이터를 받아 적는 코드가 누락되어 있어 시트에 기록되지 않는 현상입니다.
해결을 위해 1) 앱 코드를 업데이트하여 데이터 형식을 시트에 맞게 최적화하고, 2) 구글 앱스 스크립트 코드를 교체해야 합니다.
1. 웹 앱 코드 업데이트
services/repository.ts를 수정하여 시트에서 보기 편하도록 데이터 포맷을 변경하고, StudyView.tsx에 저장 상태 표시를 추가합니다.

결국 앱스 스크립트 코드를 고쳐야 한다는 것을 알게되었고 아래와 같이 고쳤습니다.

function doPost(e) {
  try {
    var rawData = e.postData.contents;
    var data = JSON.parse(rawData);
    
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
    
    // 헤더 행이 없으면 생성합니다 (컬럼이 추가되었습니다)
    if (sheet.getLastRow() === 0) {
      sheet.appendRow([
        "날짜", "지문 제목", "출처", "점수", "나의 요약", "AI 피드백", 
        "지문 전문", "AI 분석 요약", "AI 분석 구조", "AI 분석 핵심어"
      ]);
    }
    
    // AI 분석 데이터가 포함된 행을 추가합니다
    sheet.appendRow([
      data.timestamp,
      data.title,
      data.origin,
      data.score,
      data.userSummary,
      data.feedback,
      data.passageContent,
      data.analysisSummary || "",   // 추가됨
      data.analysisStructure || "", // 추가됨
      data.analysisKeyTerms || ""   // 추가됨
    ]);
    
    return ContentService.createTextOutput(JSON.stringify({result: "success"}))
      .setMimeType(ContentService.MimeType.JSON);
      
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({result: "error", message: error.toString()}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

평가원

https://www.suneung.re.kr/boardCnts/list.do?boardID=1500234&m=0403&s=suneung

구구단

https://rnrneks.vercel.app/

비문학

https://qlansgkr.vercel.app/

260202 추가

ai 분석과 관련하여 
- 문단별 요약 기능
- 전체 구조가 어떤 구조인지 분석해주는 기능 (수능의 비문학 패턴들을 분석하여 패턴을 정리할 수 있도록 패치)
- 각 문단에 대하여 예상 독자를 고려하여 쉬운 말로 변경해주는 기능 추가
- 각 문단을 문장 단위로 이해할 수 있는 방법에 대한 기능 추가 
- 각 문단을 요약하기 위한 방법론, 힌트론 제공 

그 밖에 훌륭한 공부 데이터로서 자리 잡을 수 있도록 AI 분석 프롬프트를 고도화 
목표는 비문학 고득점에 있음.
내가 5단을 풀었는데 왜 횟수가 업데이트가 안되지? 정확히 풀이 횟수가 DB연동이 되도록 패치 2단~9단 모두 

그리고 오답노트를 관리할 수 있도록 패치하고
각 단을 클릭하면 어떤 것들을 어떤 날 틀렸는지 횟수별로 카운트 할 수 있도록 패치, 이를 통해 개인화된 틀린 것들을 파악할 수 있음. 2단~9단 각각 클릭해서 볼수도 있어야 하고 전체 오답 보기 버튼을 통해 틀린 횟수를 카운트 할 수 있어야 함 
오답노트에 대한 DB 구조는 필요 없나? 필요한 쿼리문 제공해줘 

도움 받은 글 (옵션)

20기 AI 스튜디오

(내용 입력)

1

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요