재수생, 고3, N수생을 위한 계획표 설계 사이트 제작기 - 구글 AI 스튜디오

소개

수험생을 위한 공부 설계 사이트를 만들고자 하였습니다.

진행 방법

스터디장님이 알려주신 PRD 사이트를 활용하여 제작했습니다.

Tip: PRD 제작 사이트에서 자신의 아이디어를 상세하게 입력합니다.

Tip: PRD를 구글 AI 스튜디오에 입력합니다. 저는 제미나이 3 Pro 를 사용했습니다.

Tip: PRD 제작 사이트는 단톡방에 들어오시면 링크를 구하실 수 있으리라 생각합니다. AI 스튜디오 빌드 단톡방에 들어오세요~

결과와 배운 점

  1. PRD 제작 사이트를 이용하면 아주 체계적인 앱이 만들어집니다. 제가 처음 받은 초안 PRD를 공유드리자면 아래와 같습니다. 가급적 PRD를 제작하고 진행하시는 것 추천 드립니다.

Google AI Studio – Build 전용 PRD 입력 템플릿
이 문서에 기재된 내용을 기반으로, Google AI Studio – Build는 실행 시점의 최신 기능·최신 모델·최신 API·최신 매뉴얼을 자동으로 확인하여 최적의 앱을 구성합니다.
구체적인 UI/DB 구조/모델 설정은 자동으로 설계해주세요.
⸻
[0] 기본 정보
앱 이름: 수능 인강 마스터 (Suneung Ingang Master)
앱의 주요 목적 (한 문장): 수험생이 인강 정보를 등록하고 요일별 학습 계획을 설정하면, 완강 예정일을 자동 계산하고 실제 학습량을 주단위로 추적 관리하는 플래너 앱입니다.
⸻
[1] 앱의 주요 기능
앱에서 제공하고 싶은 핵심 기능을 자유롭게 작성하세요.
Build는 아래 내용을 참고하되, 최신 기능을 우선 적용하여 최적화된 구조로 자동 구성합니다.
핵심 기능:
강의 등록 관리: 과목명, 인강 강좌명, 총 강의 수(Chapter/Episode) 입력 기능.
학습 스케줄러: 시작일 설정 및 요일별(월~일) 목표 수강 개수 설정 기능.
자동 계산 엔진: 설정된 요일별 목표를 기반으로 예상 완강 날짜(D-Day) 자동 산출.
시각적 캘린더: 계산된 목표 일정을 달력 형태(월간/주간)로 시각화하여 표시.
성취도 추적: 사용자가 주 단위로 실제 수강한 개수를 입력하면 목표 대비 달성률(%) 표시.
데이터 유지: 브라우저를 닫아도 데이터가 유지되도록 저장 기능 구현.
⸻
[2] 사용자 흐름
사용자가 앱을 어떻게 사용할지 대표적인 흐름을 간단히 적어주세요.
상세 동작 방식과 화면 구성은 Build가 최신 매뉴얼 기준으로 자동 설계합니다.
사용자 흐름:
메인 화면 진입 시 현재 등록된 강의 목록과 전체 진척도 확인.
'새 강의 등록' 버튼을 눌러 강의 정보와 요일별 목표량, 시작일을 입력.
입력 완료 시 자동으로 생성된 학습 계획표(캘린더) 확인.
주 1회 또는 수시로 '진도 체크' 기능을 통해 실제 수강한 강의 수를 입력.
계획보다 늦어지거나 앞서는 경우, 예상 완강일이 업데이트되거나 상태 메시지 확인.
⸻
[3] 데이터 활용 여부
필요 시 저장 또는 조회 기능이 포함되는지 작성하세요.
구체 스키마·DB 구조는 작성하지 마세요.
Build가 실행 시점의 최신 API와 권장 방식을 확인하여 자동 구성합니다.
데이터 저장/조회 기능 필요 여부: 필요 (Local Storage 활용)
데이터 관련 요구사항:
별도의 서버나 로그인 없이, 사용자의 브라우저 Local Storage를 이용하여 입력한 강의 정보와 진척도 데이터를 영구 저장해야 함.
페이지 새로고침 후에도 등록한 계획과 달성률이 유지되어야 함.
⸻
[4] 화면 구성 의도 (선언적 표현)
원하는 화면 유형을 간단히 적어주세요.
UI/레이아웃/컴포넌트 배치는 Build가 최신 방식으로 구성합니다.
원하는 화면 유형:
대시보드 화면: 등록된 강의 카드 리스트(과목, 강좌명, 진행률 프로그레스 바 포함).
입력 모달/폼: 직관적인 숫자 입력 필드와 요일별 슬라이더 또는 카운터 UI.
캘린더 뷰: 해당 날짜에 들어야 할 강의 개수나 범위가 표시되는 달력.
주간 리포트 화면: 이번 주 목표 vs 실제 달성량을 비교하는 그래프 또는 차트.
⸻
[5] 기타 요구사항
필요한 경우 추가 요구사항을 작성하세요.
작성된 요구사항은 Build가 최신 기능과 매뉴얼을 기반으로 자동 최적화하여 구현합니다.
기타 요구사항:
수험생이 사용하는 앱이므로 집중력을 해치지 않는 깔끔하고 미니멀한 디자인 적용.
요일별 목표 설정 시 '0'으로 설정한 요일은 자동으로 일정 계산에서 제외.
목표 달성 시 격려 메시지나 시각적 효과(Confetti 등) 제공.
⸻
[6] 보조 옵션
Build가 앱을 구성할 때 참고할 수 있는 옵션입니다.
작성하지 않으면 Build가 판단하여 자동 구성합니다.
세련된 폰트(Pretendard 등)를 적용한 한국어 인터페이스로 작성.
모바일 및 태블릿 환경에서도 보기 편한 반응형 웹 디자인 적용.
⸻
[7] 확장 가능성
향후 확장하고 싶은 아이디어가 있다면 적어주세요.
Build는 “현재 작성된 PRD 범위에서 구현 가능한 수준”으로만 확장안을 반영하고,
구체 구현은 최신 기능 기준으로 자동 설계합니다.
확장 아이디어:
수능 D-Day 카운터 위젯 추가.
여러 개의 강의를 한 번에 관리하는 통합 스케줄 뷰.
⸻
Build 적용 지침 (중요)
아래 문장은 사용자가 수정하지 않고 그대로 Build에 들어가야 하는 고정 문장입니다:
“위 PRD 내용은 실행 시점의 Google AI Studio – Build가 제공하는 최신 기능, 최신 모델, 최신 API, 최신 매뉴얼을 기준으로 해석하고 구현합니다.
필요한 경우 Build는 최신 버전 권장 설정을 우선 적용하여 UI·기능·데이터 구조를 자동으로 최적 설계합니다.”

  1. 회원가입 로직을 위해서 SUPABASE와 연동하였습니다. SUPABASE를 연동하기 위해서는 SQL 쿼리문을 받아내어서 직접 등록해주는 방식으로 진행하였습니다.

  2. SUPABASE 연동 과정에서 ARONKEY 와 URL 을 입력하는 부분이 있었는데 VERCEL 에 환경변수로 등록하였고 앞에 VITE_를 붙여야한다고해서 변수명을 그것으로 변경하니까 잘되었습니다. 이전에는 연동이 잘 안되어서 힘들었습니다.

  3. 구현한 것은 아래와 같습니다. 기능을 앞으로 더 고도화 할 예정입니다.

    • 깃허브 저장을 통한 vercel 자동 배포

    https://study2026.vercel.app

    • 로그인 기능

      한국어 한국어 한국어 한국어 한국어 한국어 한국어 한국어
    • 대시보드

      한국어가 포함된 한국어 앱 스크린샷
    • 학습 캘린더

      컴퓨터 화면에 표시된 달력의 스크린샷
    • 할 일 목록

      한국어가 포함된 웹사이트의 스크린샷
    • 하루 일기

      한국 달력 앱의 스크린샷
    • 에빙하우스 복습

      한국어 버전 앱 스크린샷
    • 뽀모도로 타이머

      화면에 시계가 있는 한국 앱
    • 종합 리포트

      한국어 텍스트가 포함된 대시보드 스크린샷
    • 내 프로필

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

발표자료

https://happylife2019.notion.site/260126-AI-20-2f42d74ff9808089a3ffdd7c82972e44

도움 받은 글 (옵션)

20 AI 스튜디오 빌드 스터디

6

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요