16기 커서로 바이브 코딩하기 - 구구단 문제 풀고 성장 기록 과정 남기는 사이트

소개

16기 커서로 바이브 코딩하기 - 구구단 문제 풀고 성장 기록 과정 남기는 사이트

유저는 구구단 퀴즈를 자신이 원하는 구구단의 단수를 선택해서 문제를 풀 수 있습니다.

혹은 범위를 정해서 풀 수도 있습니다 (2~3단, 혹은 2단, 5단 이런식으로 부분적으로 합친 것을 풀 수도 있음)

이 프로젝트의 목적은 구구단 문제를 웹에서 풀고 오답노트화 해서 취약한 구구단을 완전 정복해나가는 부진아 탈출 프로젝트입니다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

  • 커서 auto를 사용하였습니다.

Tip:

1) 역할 개선 프롬프트

  • 파이썬 전문가로서 역할을 부여함.

1) 역할: 당신은 대한민국에서 가장 유명한 파이썬 전문가입니다. 전세계에서도 알아주는 전문가입니다. 당신은 파이썬 코딩 능력 관련해서 뛰어난 능력을 가지고 있습니다.
2) 질문 이유: 코딩과 관련하여 잘 모르는 저에게 당신은 아주 훌륭한 코드를 제공해줄수 있습니다. 당신을 통해 코딩을 배우고 활용하고자 합니다.
3) 말투와 어조: 현명하고 친절한 말투로 부탁합니다. 구체적인 정보가 좋습니다.
4) 양식: 우선 당신은 방법을 저에게 알려주고 그 방법을 코드로 제공을 원하는지 저에게 물어보셔야 합니다. 해당 [아이디어]를 실현시킬 수 있는 적절한 방법을 차근차근 제안해 주세요.
5) 지시문: 나는 당신에게 나의 [아이디어]를 줄 것입니다. 그럼 당신은 나의 [아이디어] 에 알맞게 파이썬 코드를 설계하는 방법을 먼저 알려줍니다. 그 뒤에 저에게 코드를 원하 는지 물어봅니다. 내가 원한다고 답할 때만 코드를 주세요. 만약 코드를 달라는 별도의 말 이 없는 경우는 절대 전체 코드를 주지 마세요

2) 아이디어 제안 프롬프트

[아이디어]
- 구구단 문제 풀고 성장 기록 과정 남기는 사이트
- 학생은 구구단 퀴즈를 자신이 원하는 구구단의 단수를 선택해서 문제를 풀 수 있습니다.
혹은 범위를 정해서 풀 수도 있습니다 (2~3단, 혹은 2단, 5단 이런식으로 부분적으로 합친 것을 풀 수도 있음)
- 이 프로젝트의 목적은 구구단 문제를 웹에서 풀고 오답노트화 해서 취약한 구구단을 완전 정복해나가는 부진아 탈출 프로젝트입니다.
- 유저의 문제는 맞춘 문제, 틀린 문제로 관리되어야 하며 결과를 이메일로 전송을 받거나 텍스트 파일로 다운로드 받을 수 있어야 합니다.
- 각 구구단 문제 별로 답안을 입력하며 틀릴 경우 적절한 힌트를 제공합니다.
- 구구단의 시험 범위를 선택할 수 있어야 합니다.
- 오답노트는 관리되어야 하며 학생의 성장과정을 최종적으로 볼 수 있어야 합니다.
- 파이썬 코드로 제작하되 웹에서 구동되어야 합니다.
- lovable을 활용하여 웹디자인을 합니다.
- github에 업로드 해야 합니다.
- 적절한 PRD가 필요하며 커서 AI를 통해 제작할 것입니다.
- 당신은 저에게 어떻게 해야하는지 단계적으로 상세히 설명해주어야 합니다. 
(파이썬 코드, lovable 디자인, github 업로드 과정 등)

결과

안녕하세요! 구구단 학습 웹 애플리케이션 프로젝트에 대해 상세히 설명해드리도록 하겠습니다.
이 프로젝트를 다음과 같은 단계로 나누어 진행하는 것을 제안드립니다:
프로젝트 기획 및 설계 단계
PRD(Product Requirements Document) 작성
데이터베이스 스키마 설계
UI/UX 디자인 기획
기술 스택 선정
개발 환경 설정
Python 가상환경 설정
필요한 라이브러리 설치
GitHub 저장소 생성
기본 프로젝트 구조 설정
백엔드 개발
Flask 웹 프레임워크 설정
데이터베이스 연동
API 엔드포인트 구현
이메일 발송 기능 구현
파일 다운로드 기능 구현
프론트엔드 개발
Lovable을 활용한 UI 디자인
반응형 웹 디자인 구현
사용자 인터랙션 구현
오답노트 관리 시스템 구현
테스트 및 배포
단위 테스트 작성
통합 테스트 수행
GitHub에 코드 업로드
배포 환경 설정
각 단계별로 자세한 설명을 드리기 전에, 먼저 이 프로젝트에 사용될 주요 기술 스택을 제안드립니다:
백엔드: Python Flask
프론트엔드: HTML, CSS, JavaScript
데이터베이스: SQLite (개발) / PostgreSQL (배포)
UI 프레임워크: Lovable
이메일 서비스: SMTP
버전 관리: Git/GitHub
이러한 계획에 대해 어떻게 생각하시나요? 각 단계별로 더 자세한 설명이 필요하시다면 말씀해 주세요. 또한, 코드 구현을 원하시는 부분이 있다면 알려주시기 바랍니다.
특히 다음 중 어떤 부분부터 시작하고 싶으신지 알려주시면 좋겠습니다:
PRD 작성
개발 환경 설정
데이터베이스 설계
UI/UX 디자인
특정 기능 구현
어떤 부분부터 자세히 알아보고 싶으신가요?

얻은 PRD

구구단 마스터 - PRD (Product Requirements Document)
1. 제품 개요
1.1 제품 목적
구구단 학습을 위한 인터랙티브 웹 애플리케이션
학생들의 구구단 학습 과정을 체계적으로 관리하고 성장을 추적
오답노트를 통한 취약점 보완 시스템 제공
1.2 타겟 사용자
초등학교 저학년 학생
구구단 학습이 필요한 학생
학생을 지도하는 교사 및 학부모
2. 핵심 기능
2.1 구구단 학습 기능
단수 선택 기능
개별 단수 선택 (2단~9단)
범위 선택 (예: 2~3단, 5~7단)
랜덤 단수 선택
문제 풀이 시스템
실시간 답안 입력
정답/오답 즉시 피드백
힌트 제공 시스템
시간 제한 옵션
2.2 학습 관리 시스템
성적 관리
정답률 추적
문제별 소요 시간 기록
단수별 성취도 분석
오답노트
틀린 문제 자동 기록
오답 유형 분석
취약 단수 파악
맞춤형 복습 문제 제공
2.3 결과 관리
보고서 생성
일간/주간/월간 학습 리포트
성장 그래프 제공
취약점 분석 리포트
결과 저장 및 공유
이메일 발송 기능
PDF/텍스트 파일 다운로드
학부모/교사 공유 기능
3. 기술 요구사항
3.1 프론트엔드
Lovable을 활용한 반응형 디자인
직관적인 사용자 인터페이스
모바일/태블릿/데스크톱 호환성
3.2 백엔드
Python Flask 기반 서버
SQLite/PostgreSQL 데이터베이스
RESTful API 구조
3.3 보안
사용자 데이터 암호화
안전한 이메일 전송
개인정보 보호
4. 사용자 경험
4.1 UI/UX 요구사항
깔끔하고 직관적인 디자인
학습에 집중할 수 있는 인터페이스
진행 상황 시각화
적절한 애니메이션과 피드백
4.2 접근성
다양한 디바이스 지원
사용자 친화적인 폰트 크기
색상 대비 최적화
5. 성능 요구사항
페이지 로딩 시간 3초 이내
동시 접속자 100명 이상 처리
99.9% 가용성
6. 향후 확장 계획
다국어 지원
게임화 요소 추가
AI 기반 맞춤형 학습 추천
커뮤니티 기능
한국어 화면의 스크린 샷

3) 코드 요청 프롬프트

전체 코드를 주세요
단 아래 7개의 지시문을 반드시 준수해주세요
7개의 지시문을 단계적으로 읽고 이를 고려하여 코드를 생성합니다.

1) 주석을 초등학생도 이해하기 쉽게 자세히 달아주세요. 특히 파이썬 코드의 경우 코드가 잘 실행되기 위해서 어떤 라이브러리를 설치해야 하는지 반드시 알려주세요. 코드의 최상단에 '#pip install 라이브러리1 라이브러리2 라이브러리3' 이런식으로 알려주세요. 기본적으로 설치되어 있는 라이브러리는 알려주지 않아도 됩니다.
2) 코드에 있어서 오류가 나오지 않도록 천천히 차근차근 작성해주세요.
3) 사용자가 입력해야 하는 것이 있다면 맨 위에 표시해주세요. 변수를 관리하기 쉬워야 합니다. 
4) 저는 코딩 초보라는 걸 명심하세요. 사용자가 쉽게 적용할 수 있는 내용으로 코드를 구성하세요.
5) json파일이나 텍스트 파일, 이미지 파일 등 각종 파일을 참고할 때 실행하고 있는 파이썬 파일의 경로와 똑같은 곳에 있다고 가정해주세요. os 라이브러리를 활용해서 해주세요. json파일이나 텍스트 파일의 경우 해당 파일이 없다면 생성해주세요. 이미지 파일은 그러지 말아주세요.
6) 실행되는 폴더 경로에 한글이 있더라도 오류 없이 잘 실행될 수 있도록 코드 내용을 신경 써 주세요. 예를 들어 파이썬이 실행되는 경로에 파일 이름이 한글로 되어있는 경우 오류가 종종 발생합니다. 따라서 해당 오류가 발생하지 않도록 코드를 생성해주세요. 저는 한글 파일 이름으로 된 파이썬 파일을 만드는 경우가 많습니다. 예를 들면 한글 파일 이름을 '諛뷀깢' 같은 것으로 이상하게 인식하는 경우가 있습니다. 정상적으로 인식 될 수 있도록 해주세요. 한글 파일 경로를 처리할 때 발생하는 문제를 해결하려면, OpenCV와 Python의 파일 경로 처리를 위한 적절한 방법을 사용해야 합니다. 특히, cv2.imread 대신 cv2.imdecode와 np.fromfile을 사용하여 경로에 한글이 포함된 이미지를 읽는 것이 중요합니다.
7) 파이썬 실행 시 어디서 오류가 나는지 확인하고자 합니다. 디버그 기능을 추가해주세요. 터미널 창에 현재 어떠한 것이 실행되고 있는지 표시해주시고 오류가 나는 경우에 어떤 오류가 나는 것인지 표시해주세요.

결과와 배운 점

파이썬 스크립트의 스크린 샷
한국 웹 사이트의 스크린 샷
3 개의 숫자가있는 한국 계산기
한국 및 중국어와 함께 페이지의 스크린 샷
한국 웹 사이트의 스크린 샷

-> 오답 보관함 기능

한국 웹 사이트의 스크린 샷

-> 오답 대쉬보드 기능

PRD를 썼다는 것 자체가 의미가 있었습니다.

앞으로 꾸준히 업데이트해보겠습니다.

https://gugudan.onrender.com

도움 받은 글 (옵션)

16기 바이브디버깅 스터디 도움 받음

1

👉 이 게시글도 읽어보세요