소개
시도하고자 했던 것과 그 이유를 알려주세요.
꽃 이미지를 보고 이름을 맞추는 게임으로 꽃이름을 궁금해하는 사람들을 위해 꽃을 보고 이름을 알 수 있는 연습을 할 수 있도록 만들고 있습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
커서AI에서 파이썬을 사용해서 스트림릿으로 배포하도록 입코딩으로 작성하고 있습니다. 커서에서 작성하려는 게임의 PRD작성을 요청하고 PRD대로 입코딩을 합니다.
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
첫 프롬프트 : 한국의 야생화를 이미지를 보고 이름을 맞추는 게임을 만들어서 스트림릿에 배포하려고 해. 어떻게 하면 될지 PRD를 작성해줘.
한국 야생화 퀴즈 게임을 위한 PRD를 작성해드리겠습니다.
# 한국 야생화 퀴즈 게임 PRD
## 1. 제품 개요
- 제품명: 한국 야생화 퀴즈
- 목적: 사용자들이 한국의 야생화를 이미지를 통해 학습하고 즐겁게 퀴즈를 풀 수 있는 웹 애플리케이션
- 대상: 야생화에 관심 있는 일반 사용자, 교육자, 학생
## 2. 핵심 기능
### 2.1 메인 화면
- 게임 시작 버튼
- 간단한 게임 설명
- 최고 점수 표시
- 난이도 선택 옵션 (초급/중급/고급)
### 2.2 퀴즈 게임
- 야생화 이미지 표시
- 4개의 선택지 제공
- 정답/오답 피드백
- 점수 시스템
- 진행 상황 표시 (예: 5/10)
### 2.3 결과 화면
- 최종 점수 표시
- 틀린 문제 복습 기능
- 다시 시작 버튼
- 공유하기 기능
## 3. 기술 스택
- 프론트엔드: Streamlit
- 데이터베이스: SQLite (문제 데이터 저장)
- 이미지 저장소: AWS S3 또는 GitHub
- 배포: Streamlit Cloud
## 4. 데이터 구조
```python
# 문제 데이터 구조
{
"id": int,
"image_url": str,
"correct_answer": str,
"options": [str],
"difficulty": str,
"description": str
}
```
## 5. 구현 단계
### Phase 1: 기본 구조
1. Streamlit 프로젝트 설정
2. 기본 UI 레이아웃 구현
3. 데이터베이스 스키마 설계
### Phase 2: 핵심 기능
1. 이미지 표시 기능
2. 퀴즈 로직 구현
3. 점수 시스템 구현
### Phase 3: 개선 및 배포
1. UI/UX 개선
2. 성능 최적화
3. Streamlit Cloud 배포
## 6. 성공 지표
- 일일 활성 사용자 수
- 평균 게임 완료 시간
- 정답률 통계
- 사용자 피드백
## 7. 향후 확장 계획
- 다국어 지원
- 사용자 계정 시스템
- 리더보드 기능
- 커스텀 퀴즈 생성 기능
이 PRD를 바탕으로 개발을 시작하시겠습니까? 특정 부분에 대해 더 자세한 설명이 필요하시다면 말씀해 주세요.
두번째 프롬프트 : 개발을 시작해줘
이제 기본적인 애플리케이션이 완성되었습니다. 주요 기능은 다음과 같습니다:
난이도 선택 (초급/중급/고급)
문제 수 선택 (5-20문제)
랜덤으로 섞인 문제 제공
정답/오답 피드백과 설명 제공
진행 상황과 현재 점수 표시
최종 정답률 계산
실행하기 위해서는 다음 단계가 필요합니다:
images 폴더에 각 야생화 이미지를 추가해야 합니다:
gaenari.jpg (개나리)
jindallae.jpg (진달래)
beotkkot.jpg (벚꽃)
mugunghwa.jpg (무궁화)
azalea.jpg (진달래)
cosmos.jpg (코스모스)
chrysanthemum.jpg (국화)
꽃이미지를 검색해서 image폴더에 저장하고 추가 프로프트를 작성했습니다.
이미지 크기 조정
정답과 오답을 메시지로 알려주기
예문을 세로에서 가로로 표시
실행화면
import streamlit as st
import pandas as pd
from PIL import Image
import random
import json
import os
# 페이지 설정
st.set_page_config(
page_title="한국 야생화 퀴즈",
page_icon="🌸",
layout="wide",
initial_sidebar_state="collapsed"
)
# 세션 상태 초기화
def init_session_state():
if 'score' not in st.session_state:
st.session_state.score = 0
if 'current_question' not in st.session_state:
st.session_state.current_question = 0
if 'total_questions' not in st.session_state:
st.session_state.total_questions = 10
if 'game_started' not in st.session_state:
st.session_state.game_started = False
if 'difficulty' not in st.session_state:
st.session_state.difficulty = "초급"
if 'questions' not in st.session_state:
st.session_state.questions = []
# 문제 데이터 로드
def load_questions():
try:
with open('questions.json', 'r', encoding='utf-8') as f:
data = json.load(f)
# 난이도에 따라 문제 필터링
filtered_questions = [q for q in data['questions'] if q['difficulty'] == st.session_state.difficulty]
if not filtered_questions:
st.error(f"{st.session_state.difficulty} 난이도의 문제가 없습니다. 다른 난이도를 선택해주세요.")
return []
# 사용 가능한 문제 수 확인
available_questions = len(filtered_questions)
if available_questions < st.session_state.total_questions:
st.warning(f"선택한 난이도의 문제가 {available_questions}개 밖에 없습니다. 문제 수를 조정합니다.")
st.session_state.total_questions = available_questions
# 문제 순서를 랜덤으로 섞기
random.shuffle(filtered_questions)
# 선택한 문제 수만큼 반환
return filtered_questions[:st.session_state.total_questions]
except FileNotFoundError:
st.error("문제 데이터 파일(questions.json)을 찾을 수 없습니다.")
return []
except json.JSONDecodeError:
st.error("문제 데이터 파일의 형식이 잘못되었습니다.")
return []
except Exception as e:
st.error(f"문제 데이터를 불러오는 중 오류가 발생했습니다: {str(e)}")
return []
# 이미지 로드 함수
def load_image(image_path):
try:
if not os.path.exists(image_path):
st.error(f"이미지 파일을 찾을 수 없습니다: {image_path}")
return None
return Image.open(image_path)
except Exception as e:
st.error(f"이미지를 불러오는 중 오류가 발생했습니다: {str(e)}")
return None
# 메인 페이지
def main():
# 세션 상태 초기화
init_session_state()
st.title("🌸 한국 야생화 퀴즈 🌸")
if not st.session_state.game_started:
st.write("한국의 아름다운 야생화를 알아보세요!")
st.write("각 문제에서 보여주는 야생화의 이름을 맞춰보세요.")
# 난이도 선택
st.session_state.difficulty = st.selectbox(
"난이도를 선택하세요",
["초급", "중급", "고급"]
)
# 문제 수 선택
st.session_state.total_questions = st.slider(
"문제 수를 선택하세요",
min_value=5,
max_value=20,
value=10,
step=5
)
if st.button("게임 시작하기"):
questions = load_questions()
if questions: # 문제가 있는 경우에만 게임 시작
st.session_state.game_started = True
st.session_state.score = 0
st.session_state.current_question = 0
st.session_state.questions = questions
st.rerun()
else:
if not st.session_state.questions: # 문제가 없는 경우
st.error("문제를 불러올 수 없습니다. 다시 시작해주세요.")
if st.button("다시 시작하기"):
st.session_state.game_started = False
st.rerun()
elif st.session_state.current_question < len(st.session_state.questions):
current_q = st.session_state.questions[st.session_state.current_question]
# 진행 상황 표시
col1, col2 = st.columns([3, 1])
with col1:
st.progress(st.session_state.current_question / len(st.session_state.questions))
with col2:
st.write(f"현재 점수: {st.session_state.score}")
st.write(f"문제 {st.session_state.current_question + 1}/{len(st.session_state.questions)}")
# 이미지 표시
image = load_image(current_q["image_url"])
if image:
# 이미지 크기 조정
max_width = 400
ratio = max_width / image.width
new_height = int(image.height * ratio)
resized_image = image.resize((max_width, new_height))
st.image(resized_image, use_container_width=False)
# 선택지 표시
selected = st.radio("이 야생화의 이름은 무엇일까요?", current_q["options"], horizontal=True, index=None)
if selected is not None:
if selected == current_q["correct_answer"]:
st.success("정답입니다! 🎉")
st.write(f"설명: {current_q['description']}")
st.session_state.score += 1
else:
st.error(f"틀렸습니다. 정답은 {current_q['correct_answer']}입니다.")
st.write(f"설명: {current_q['description']}")
if st.button("다음 문제"):
st.session_state.current_question += 1
st.rerun()
else:
# 게임 종료 화면
st.balloons()
st.write(f"🎉 게임이 끝났습니다! 🎉")
st.write(f"최종 점수: {st.session_state.score}/{len(st.session_state.questions)}")
# 정답률 계산
percentage = (st.session_state.score / len(st.session_state.questions)) * 100
st.write(f"정답률: {percentage:.1f}%")
if st.button("다시 시작하기"):
st.session_state.game_started = False
st.rerun()
if __name__ == "__main__":
main()
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
-PRD문서로 작성하고 입코딩하니 기간이 많이 절약되고 입코딩 효율이 좋습니다.
과정 중에 어떤 시행착오를 겪었나요?
-스트림릿 테스트에서 파일을 업로드가 아닌 테스트라서 스마트폰테스트를 하지 못했습니다.
도움이 필요한 부분이 있나요?
앞으로의 계획이 있다면 들려주세요.
-좀 더 많은 이미지와 정확한 설명을 작성해서 완성도를 높일 계획입니다.
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)