소개
생각의 출발점 : 사이트 개발&AI 활용 완전너무진짜 초심자가 젠스파크 스터디에서 배웠던 AI개발자 기능을 활용해 실제로 많이 사용할 만 한 사이트를 어느정도 수준까지 만들어 볼 수 있을까 궁금.
생각의 도착점 : 기왕 만들거면 실제로 많이 사용할 만한 사이트였으면 좋겠다 싶었고, 최근 관심이 있는 분야 중 미국주식 관련해 핵심적인 뉴스와 정보를 매일/실시간 수집해 업데이트하고, 주린이 의 입장에서 실제 투자에 참고가 될 만한 가벼운 인사이트를 줄 수 있는 사이트라면 좋겠다 싶었음.
결과물에 대한 중요 고려점 : 주식 전문가or애널리스트들이 이용하는 전문적인 사이트가 아닌, 본인과 같은 주린이 들이 매일 아침 출근시간 혹은 이동 시에 주어지는 짧은 시간에 핵심적인 정보를 가독성이 높고 쉽게 접 할 수 있었으면 좋겠다는 마음으로 사이트 개발.
진행 방법
지난번 사이트 개발 실습시 젠스파크 AI 개발자 만을 이용하면 작동 시간과 결과물에대한 잦은 핑퐁으로 인해 빠르게 원하는 결과를 도출하기 어렵고, 사용되는 크레딧 양도 많다고 생각되어, 실제 개발 시에만 젠스파크 AI 개발자를 활용
젠스파크 AI 개발자에 입력 할 프롬프트 와 코드블록 생성,
개발 후 페이지 수정에 대한 프롬프트 와 코드블록 생성은 챗 지피티 PRD를 활용
Tip:
첫 프롬프트 : 매일 아침 미국 주식시장 현황과 향후 미래시장 전망에 대한 뉴스를 수집하고 이를 AI, 방산, 전기차, 등등 의 분야로 분류해 편하게 볼 수 있는 사이트를 만들고 싶어. 이를 위한 PRD를 만들어줘
프롬프트 생성 후 코드블럭으로 변환요청 : 정리해준 내용으로 바로 사이트 개발을 하기위한 정리된 prd 문서를 복사하고 붙여넣기 쉽도록 코드블럭 형태로 만들어줘
젠스파크 AI개발자에 생성된 코드블럭을 불어넣어 빠르게 생성
페이지 수정 사항은 다시 1,2번 과정을 거쳐 수정 코드블록 생성 후 3번 과정 반복
(원하는 결과물을 도출해 내기 위해 총 9번 수정)
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
# 📌 Product Requirements Document (PRD) 프로젝트명(가칭): Morning US Market 목표: - 매일 아침(한국 시간) 미국 주식시장 요약 및 분야별 뉴스(AI, 방산, 전기차, 반도체, 에너지 등) 자동 분류/요약 제공 - 뉴스는 명확한 출처(언론사명 + 원문 링크)와 함께 제공 - 섹터별 뉴스는 조회수 기준 상위 5개 기사만 노출 - 메인화면에는 주요 지수 카드(S&P500, Nasdaq, Dow Jones) 표시 - 지수 카드를 클릭하면 1개월 / 1년 / 3년 차트를 볼 수 있는 상세 페이지로 이동 - 상세 페이지 하단에는 Home 버튼을 배치, 클릭 시 메인으로 복귀 ---## 1. 문제 & 기회- 문제: 미국 증시 정보를 아침마다 여러 사이트에서 따로 확인해야 함. - 기회: 자동 수집 + 요약 + 카테고리 분류 + 차트 시각화로 빠른 인사이트 제공. ---## 2. 사용자 페르소나 & JTBD- 직장인 투자자(30대): 출근 전 5분 안에 미장 요약과 관심 섹터만 보고 싶다. - 초보 투자자(20–30대): 쉽게 정리된 요약 기사와 트렌드를 빠르게 파악하고 싶다. - 업계 종사자/애널리스트 지망: 섹터별 뉴스와 지수 차트를 동시에 확인하고 싶다. ---## 3. 코어 기능 (MVP)1. 아침 요약 카드 (Top Banner) - S&P500 / Nasdaq / Dow Jones 지수 현황 - 업종 상승/하락 Top3 - 주요 이벤트 요약(예: FOMC, 실적 발표 등) 2. 뉴스 수집 & 분류 - 소스: RSS/News API - 카테고리: AI, 방산, 전기차, 반도체, 에너지, 바이오, 빅테크, 기타 - 기사마다 출처(언론사명) + 원문 링크 표시 3. 요약 & 감성 분석 - 한국어 요약(3–5줄) - 감성 점수(긍정/중립/부정: –1 ~ +1) 4. 섹터별 정렬 & Top 5 노출 - 각 섹터 탭 → 조회수 기준 상위 5개 기사 표시 - 동률일 경우 최신순 정렬 5. 조회수 카운트 로직 - 기사 클릭/요약 펼침 시 views +1 6. 검색 기능 - 기사 제목/요약 내 키워드 검색 7. 지수 상세 페이지 (차트) - 메인화면에서 지수 카드 클릭 시 상세 페이지 이동(`/index/:symbol`) - 기간 선택: 1개월 / 1년 / 3년 - Line Chart로 등락 표시 (API: Alpha Vantage / Yahoo Finance 등) - 상세 페이지 하단: Home 버튼 → 메인 화면 복귀 ---## 4. 기술 스택- Frontend: React + Vite, Tailwind/Chakra UI, Chart.js - Backend: Node.js + Express - DB: Supabase(Postgres) 또는 Firebase Firestore - AI API: LLM 요약 (OpenAI/Claude 등), HuggingFace 제로샷 분류(선택) - 데이터 API: Alpha Vantage / Yahoo Finance - 배치/스케줄러: GitHub Actions / Render / Railway jobs - 배포: 프론트(Vercel/Netlify), 백엔드(Render/Railway) ---## 5. 데이터 모델articles- id (pk) - source (수집 경로, 예: RSS/NewsAPI) - publisher (언론사명, 예: Bloomberg, Reuters) - title (기사 제목) - url (원문 링크, unique) - published_at (발행 시각) - summary (한글 요약) - sentiment (–1 ~ +1) - category (text[]) - views (int, 기본 0) - fetched_at (수집 시각) market_snapshot- id, date, spx, ndx, dji - top_up_sectors, top_down_sectors, notes ---## 6. API 설계- GET /snapshot/today → 오늘의 지수 & 업종 현황 - GET /articles?category=AI&limit=5&sort=views → 섹터별 조회수 상위 5개 기사 - POST /articles/:id/view → 특정 기사 조회수 +1 - GET /index-data?symbol=SPX&period=1M|1Y|3Y → 특정 지수의 기간별 데이터 반환 응답 예시 (articles):```json[ { "id": "123", "title": "Nvidia reports record earnings", "publisher": "Bloomberg", "url": "https://www.bloomberg.com/…", "published_at": "2025-09-15T03:00:00Z", "summary": "엔비디아가 사상 최대 실적을 발표…", "sentiment": 0.8, "category": ["AI", "반도체"], "views": 152 }]결과와 배운 점
결과
https://rvbrlxpm.gensparkspace.com/index.html
페이지 상단에 전 일 시장상황과 뉴스, 애널리스트 들의 분석을 기반으로,
금일 목표주가 상승폭이 가장 클 것으로 예상되는 5개의 종목을 추천해
실질적으로 투자에 도움이 될 만한 가벼운 인사이트를 제공
미국 관련 지수투자자를 위한 핵심 지수 현황 섹션을 구성하고
각 섹션 클릭 시 최근 추이그래프(1개월, 1년, 3년)까지 볼 수 있도록 세부 페이지 구성.
분야 별 TOP5 뉴스를 볼 수 있는 섹션을 구성해, 관심 분야 별로 뉴스를 볼 수 있도록 구성
배운 점과 나만의 꿀팁을 알려주세요.
개발에 대해 1도 모르던 사람도 LLM과 에이전트 를 활용한다면 (더 나은 프롬프트를 만드는 방법을 터득하게 된다면) 이제는 어느정도 활용도가 있는 페이지나 어플리케이션 개발이 가능하다는 점이 놀라웠음.
확실히 LLM을 통해 코드블럭을 만드는 과정까지 거친 후 젠스파크(에이전트)를 활용하니, 젠스파크만 단독 활용 할 때 보다 결과물의 퀄리티▲ 와 크레딧 절약 의 효과가 있었음.
과정 중에 어떤 시행착오를 겪었나요?
전반적인 UI는 그럴 듯 해 마음에 들었지만 사이트 내부의 실질적인 내용은 오류가 많았음 (뉴스 원문 출처 링크 랜딩페이지 오류, 스크랩 한 정보의 정확성 '숫자가 핵심인 금융 사이트 인데 지수나 환율 수치가 다른 ...ㅠㅠ', 한국어로 된 미국주식 관련 뉴스 스크랩을 요청했으나 결과 값은 한국과 관련된 미국주식 관련 뉴스를 스크랩 등 )
사이트 개발 시 전문성을 보이고 싶다거나 오랫동안 운영한 페이지처럼 보이고 싶다는 프롬프트 내용이 전혀 없었음에도, 결과물 사이트에 뜬금없이 1999년부터 운영중 이라는 말도 안되는 할루시네이션을..
도움이 필요한 부분이 있나요?
젠스파크 크레딧을 아끼기 위해 챗 지피티PRD를 활용해 코드블록을 만들었는데, 혹시 더 나은 방법이 있는지 알고싶습니다.
뉴스나 정보들 실시간 크롤링이 되지 않는 것 같아 해결 방법에 대한 질문이 있습니다.
앞으로의 계획이 있다면 들려주세요.
사이트 UI를 보다 가독성 있게 수정하고, 실제 제공되는 정보의 신뢰도를 높여, 주린이들의 미국주식 기초 인사이트를 제공하는 사이트를 만들고 싶습니다.
도움 받은 글 (옵션)
젠스파크 스터디를 통해 사이트 개발&AI 활용 했더니,완전너무진짜 초심자 도 언제든 원하는 분야의 사이트나 어플리케이션을 개발 할 수 있었습니다! 앞으로 남은 스터디 기간에도 꿀팁 많이 얻어서, AI를 보다 실질적이고 효과적으로 활용해보고 싶습니다!
