[강의내용정리]AI리더캠프_24_Part7_MVP 설계와 테스트

러버블로 뭘 할 수 있을까

만들어보기

 

전일 미국 증시 장 마감 후 상승 종목 3개와 해당 섹터와 기사를 크롤링해서 정리하여 보고해 주는 플랫폼

해당 섹터와 관련된 한국 증시의 종목 3개씩 추천

 

제미나이가 도출해준 lovable 플롬프트

Act as an expert UI/UX Designer and Frontend Developer. Below is the Product Requirements Document (PRD) for a new web application. Please read the context carefully and generate a complete, responsive frontend interface based on the functional requirements.

1. Problem/Opportunity (문제 및 기회) 주식 투자자들은 매일 아침 개장 전, 간밤의 미국 증시 주도주와 섹터 흐름을 파악하고 이를 한국 증시에 적용하는 전략을 세웁니다. 하지만 여러 사이트를 돌며 영문 기사를 읽고, 기술적 지표를 분석하며, 연관된 국내 테마주를 찾는 과정은 번거롭고 시간이 오래 걸립니다. 이 대시보드는 클릭 한 번으로 미국 주도주 요약부터 한국 관련주 모멘텀 분석, 그리고 개인 블로그(Tistory) 자동 발행까지 한 번에 해결해 주는 온디맨드(On-Demand) 플랫폼입니다.

2. Target Users & Use Cases (타겟 유저 및 핵심 사용 사례)

• 타겟 유저: 매일 아침 빠르고 정확한 시황 분석이 필요한 개인 투자자 및 금융 콘텐츠 크리에이터.
• 핵심 사용 사례 (Critical User Journeys): 1. 사용자가 접속하여 메인 화면의 '오늘의 증시 가져오기' 버튼을 누른다. 2. 로딩 상태 후 미국 상위 3종목, AI 뉴스 브리핑, 한국 매칭 주식 및 모멘텀 지표를 한눈에 확인한다. 3. 분석된 인사이트를 티스토리 등 외부 블로그에 바로 포스팅하여 콘텐츠로 보관/활용한다.

3. Proposed Solution / Elevator Pitch (제안 솔루션) 심플하고 직관적인 '한미 증시 연동 AI 브리핑 대시보드' 웹앱. 복잡한 차트를 배제하고, 텍스트 요약과 핵심 지표 중심의 카드형 UI를 채택하여 정보의 가독성을 극대화합니다.

4. Goals (목표)

• 사용자가 직관적으로 시장 흐름을 읽을 수 있는 깔끔한 금융 대시보드 UI 구현.
• 데이터를 가져오는 로딩 상태(Loading State)와 결과물 출력 상태의 명확하고 세련된 시각적 분리.

5. MVP / Functional Requirements (핵심 기능 및 UI 요구사항) 전체적인 디자인 시스템은 신뢰감을 주는 다크 네이비/블랙 톤을 배경으로 하고, 주식의 상승을 의미하는 포인트 컬러(레드/그린 등)를 사용해 줘. 모바일과 데스크톱 모두 완벽하게 대응하는 반응형 레이아웃(Responsive Layout)으로 구성해야 해.

• 섹션 1: 헤더 및 컨트롤 (Header & Control)
  • 화면 중앙 상단에 눈에 띄는 오늘의 증시 가져오기 Primary 버튼 배치.
  • 버튼 클릭 시, 데이터를 수집하고 AI가 요약 중임을 알리는 매끄러운 로딩 스피너 또는 스켈레톤 UI 작동 기능 포함.
• 섹션 2: 미국 주도주 & 뉴스 브리핑 (US Market Insights)
  • 3개의 카드 컴포넌트를 가로로 배열 (모바일에서는 세로 스크롤).
  • 각 카드에는 [티커명, 종가, 전일 대비 상승률(+%)]을 눈에 띄게 강조하고, 상단 모서리에 [섹터/산업 배지(Badge)] 표시.
  • 카드 하단에 아코디언(Accordion) 또는 부드러운 텍스트 박스 형태로 'AI 뉴스 브리핑(3~4줄의 요약 텍스트)' 노출.
• 섹션 3: 한국 증시 연동 (K-Market Connection)
  • 미국 주도주 카드 바로 아래에 자연스럽게 연결되는 섹션 디자인.
  • 미국 섹터와 매칭된 '한국 테마 관련주 3종목'을 심플한 리스트 형태로 표시.
  • 각 종목 우측에 거래량 급증, 이동평균선 돌파, RSI 등 '기술적 모멘텀 지표'를 작은 태그(Tag) 칩 형태로 시각화.
  • 리스트 하단에 'AI 매매 참고 브리핑'을 읽기 편한 인용구(Blockquote)나 별도의 하이라이트 박스 스타일로 배치.
• 섹션 4: 외부 기록 및 설정 (Export & Settings)
  • 대시보드 우측 상단 또는 화면 하단 플로팅 영역에 티스토리 포스팅하기 버튼과 보관함 저장 버튼 배치.
  • 상단 GNB 네비게이션 바에 '과거 리포트 보관함'과 'API / 맵핑 설정' 모달(Modal) 창을 띄울 수 있는 아이콘 메뉴 추가.

Please generate the beautiful UI with dummy data matching the above context.

---

 

이 플랫폼에서의 API를 가져온다면 사용비용은?

1. 미국 증시 및 뉴스 데이터 API (추천: FMP - Financial Modeling Prep)

가장 먼저 당일 많이 오른 미국 주식 3종목, 섹터, 관련 뉴스를 가져오기 위해 호출합니다.

• 비용 발생 여부: ❌ (무료 요금제로 충분함)
• 비용 구조: FMP는 개발자들을 위한 강력한 무료 티어(Free Tier)를 제공합니다. 하루 250번의 호출(API Call)까지는 완전 무료입니다.
• 설명: 버튼을 한 번 누를 때 종목 검색, 섹터 확인, 뉴스 검색 등으로 약 3~5번의 호출이 발생합니다. 하루에 버튼을 수십 번 누르지 않는 이상, 개인용 온디맨드(On-Demand) 플랫폼에서는 평생 무료로 사용할 수 있습니다.

2. AI 분석 및 번역 API (추천: Google Gemini API 또는 OpenAI API)

FMP에서 가져온 영문 기사와 데이터를 한국어로 요약하고 매매 인사이트를 도출하기 위해 호출합니다.

• 비용 발생 여부: ❌ 또는 🔺 (무료 또는 월 몇백 원 수준의 소액)
• 비용 구조: * Google Gemini API: 일정 횟수(예: 1분당 15회 요청) 이하로 사용하는 개발자용 무료 티어가 있어, 개인 대시보드 용도라면 비용 없이 사용할 수 있습니다.
  • OpenAI (ChatGPT) API: 사용한 만큼만 내는 종량제입니다. 가장 빠르고 저렴한 모델(GPT-4o-mini 등)을 사용하면, 기사 몇 개를 요약하는 데 드는 비용은 1회 호출당 약 1~2원 수준입니다. 매일 사용해도 한 달에 커피 한 잔 값이 채 나오지 않습니다.

3. 한국 주식 실시간/모멘텀 데이터 API (추천: 한국투자증권 Open API)

미국 증시 결과를 바탕으로, 미리 매칭해둔 한국 관련주의 가격과 거래량, RSI 등 기술적 지표를 가져오기 위해 호출합니다.

• 비용 발생 여부: ❌ (완전 무료)
• 비용 구조: 증권사에서 제공하는 API는 기본적으로 해당 증권사 계좌만 보유하고 있으면 무료로 제공됩니다.
• 설명: 한국투자증권(KIS)의 경우 API 문서화가 매우 잘 되어 있어 안티그래비티 같은 AI 에이전트가 코드를 짜기 가장 수월합니다. 증권사 앱에서 'Open API 신청'만 하면 발급되는 키를 무료로 계속 사용할 수 있습니다. (주문 체결이 아닌 '시세 조회' 용도이므로 수수료도 없습니다.)

 

한국 증시 데이터가 현재(실시간)반영이 되지 않아서... 외부 API 연동 > 무료인 Yahoo Finance API 연동

하기 위해서 lovable cloud 연동을 해야 한다고 한다.

---

1. 러버블 플랫폼 구독료 (앱 제작 비용)

AI에게 코딩을 시키고 결과물을 만들어내는 데 필요한 요금입니다. '크레딧(Credit)'이라는 단위를 사용합니다.

• Free 플랜 ($0/월): 매일 5크레딧 제공. 아주 간단한 테스트용으로는 좋지만, 코드를 조금만 수정해도 크레딧이 깎이기 때문에 실제 서비스를 만들기엔 턱없이 부족합니다. (만든 프로젝트가 모두에게 공개된다는 단점도 있습니다.)
• Pro 플랜 ($25/월) - 💡가장 추천: 월 100크레딧(+매일 5크레딧) 제공. 비공개 프로젝트 생성이 가능하고, 내 개인 도메인(예: https://www.google.com/search?q=mystock.com)을 연결할 수 있습니다. 1인 개발자나 초기 MVP를 만들 때 가장 많이 선택하는 요금제입니다.

2. 러버블 클라우드 비용 (앱 유지/호스팅 비용)

최근 러버블은 자체적으로 DB와 서버를 제공하는 '러버블 클라우드'를 도입했습니다. 이 클라우드 비용은 기본 구독료($25)와는 별개로 **사용량 기반(Pay-as-you-go)**으로 청구됩니다.

하지만 너무 걱정하지 않으셔도 됩니다. 러버블은 든든한 **'매월 무료 제공량(Free Allowance)'**을 줍니다.

• 매월 제공되는 무료 혜택: * 클라우드 서버/DB 호스팅 비용 $25 무상 지원
  • 앱 내부에서 사용하는 AI 기능 비용 $1 무상 지원
• 비용 발생 시점: 내 앱에 접속자가 너무 많아지거나, 데이터베이스에 저장하는 사진/영상이 엄청나게 늘어나서 위에서 제공한 무료 혜택($25)을 초과할 때만, 그 초과분만큼 과금됩니다.

---

우선은 연동해 보고, 반영이 되는지 확인 후 lovable cloud 데이터를 지우고 해지 해보겠다.

 

안된다... 

API를 받아와야 한다고한다.

Connect to Firecrawl

No connections available for Firecrawl. Please create a connection first in workspace settings.

실습인데 뭔가 잘못하면 돈을 지불해야 하는 느낌이 든다.

다음 실습을 하려고 한다.

---

 

러버블로 동네 이름을 치면, 그 동네에 대한 역사나 근대사적 내용을 도슨트해주는 서비스를 만들려고 해.

가능하면 API를 사용하지 않고 만들려고해. 먼저 프론트엔드 작업을 해줘.

 

1. IA (Information Architecture, 정보 구조도)

앱의 뼈대와 화면 구성을 컴포넌트 단위로 나눈 구조입니다.

• Home (단일 페이지 구성)
  • Hero Section: 서비스 타이틀 ("골목길 도슨트") 및 서브 카피
  • Search Section:
    • 검색 Input Field (동네 이름 입력)
    • 검색 CTA Button ("검색")
    • Quick Suggestion Chips (빠른 검색 태그: #정동, #북촌, #명동)
  • Result Section (상태에 따라 전환)
    • 상태 A (결과 있음): Result Card (시대 Badge, 동네 타이틀, 구분선, 도슨트 상세 설명)
    • 상태 B (결과 없음): Empty State Message (에러 토스트 또는 안내 문구)

---

2. PRD (Product Requirements Document, 제품 요구사항 정의서)

• 프로덕트 개요: 사용자가 동네 이름을 검색하면 외부 API 없이 로컬에 저장된(Mock) 데이터를 활용해 해당 동네의 역사 및 근대사적 배경을 도슨트처럼 설명해 주는 웹 앱.
• 타겟 유저: 동네 산책을 즐기는 사람, 역사에 관심 있는 관광객 및 일반인
• 핵심 액션 (Key Action): 사용자가 궁금한 동네 이름을 검색하고, 박물관 안내문처럼 우아하게 디자인된 결과 카드를 읽는 것.
• 디자인 무드 (Vibe): Calm, Elegant, Premium, Museum-like. 박물관에 온 듯한 차분함과 신뢰감을 주기 위해 차분한 어스 톤(Earth tones), 넉넉한 여백(Generous padding), 둥근 모서리(Rounded corners), 그리고 제목에는 명조체(Serif) 계열의 폰트 적용.
• 기능 요구사항:
  1. 검색바에 텍스트 입력 후 검색 버튼 또는 엔터키로 검색 실행.
  2. 정동, 북촌, 명동 등 미리 정의된 로컬 JSON/객체 데이터에서 일치하는 값을 찾아 화면에 렌더링.
  3. 데이터에 없는 동네 검색 시 "아직 준비되지 않은 동네입니다."라는 안내 문구 표시.

---

3. 러버블(Lovable) 맞춤형 프롬프트

러버블 가이드의 핵심(실제 데이터 사용, 아토믹 UI 단어, 컴포넌트 분리, 역질문)을 모두 적용한 프롬프트입니다. 아래 내용을 러버블 프롬프트 창에 그대로 복사해서 붙여넣으세요.

---

 

Build a single-page web app for a 'Neighborhood History Docent' service. This is for walkers and tourists who want to read about the history and modern history of Seoul's neighborhoods. The main CTA is to search for a neighborhood and read its historical description.

1. Design & Vibe (Aesthetic)

• Use a calm, elegant, and premium museum-like design.
• Use muted earth tones (stone/beige backgrounds, dark charcoal text), soft gradients, rounded corners, and generous padding.
• Use a Serif font for headlines to give a historical feel, and a clean Sans-serif for the body text.
• Overall tone should feel gentle, educational, and reassuring.

2. Build by Components (Atomic UI) Please build the following sections:

• Hero Section: A centered headline reading "골목길 도슨트" and subtext "우리 동네에 숨겨진 역사와 근대사 이야기를 들어보세요."
• Search Section: A form with an input field (placeholder: "동네 이름을 입력하세요 (예: 정동, 북촌)") and a rounded CTA button saying "검색". Below the input, add a row of clickable "Chips/Badges" for quick search suggestions: "정동", "북촌", "명동".
• Result Card: A premium card with a soft shadow. It should include:
  • A small Badge on top showing the period (e.g., '조선후기 ~ 개화기').
  • A bold headline for the title.
  • A subtle horizontal divider line.
  • A text block for the detailed description with generous line height.
• Empty State: If the search doesn't match our data, show a gentle error message or empty state saying "해당 동네의 도슨트 정보는 아직 준비 중입니다."

3. Real Content & Logic (No external API) Implement the search logic using a local React state object. Use this exact mock data:

• 정동: Period "조선후기 ~ 개화기", Title "근대사의 발자취, 정동", Description "정동은 19세기 말 서구 열강의 외교관, 선교사들이 모여들며 서양식 건축물과 문화가 가장 먼저 자리 잡은 곳입니다. 덕수궁 돌담길을 따라 걷다 보면 격동적이었던 대한제국 시기의 근대사를 생생하게 느낄 수 있습니다."
• 북촌: Period "조선시대 ~ 현재", Title "양반들의 얼이 담긴, 북촌", Description "경복궁과 창덕궁 사이에 위치한 북촌은 조선시대 왕족과 고위 관료들이 거주하던 고급 주거지였습니다. 일제강점기 시대에 주택난이 심해지면서 큰 필지가 작은 한옥들로 쪼개졌고, 이것이 지금 우리가 아는 '북촌 한옥마을'의 원형이 되었습니다."
• 명동: Period "일제강점기 ~ 현대", Title "상업과 문화의 중심, 명동", Description "조선시대에는 '명례방'이라 불리며 평범한 주거지였으나, 일제강점기에 '명치정'으로 이름이 바뀌며 상업의 중심지가 되었습니다. 해방 이후에는 문인과 예술가들이 모이는 문화의 거리가 되기도 했습니다."

Ask me any questions you need in order to fully understand what I want from this feature and how I envision it.

---

API 없는 도슨트를 만들려면 모든 정보를 입력해 놔야 할 것 같다.

제미나이 aPI를 연동해서 다시 진행

 

🏛️ 러버블 프롬프트 (Gemini API 연동 버전)

아래 영문 프롬프트를 복사해서 러버블에 붙여넣으세요.

---

Build a single-page web app for a 'Neighborhood History Docent' service. The app will use the Google Gemini API to dynamically generate historical and modern historical descriptions of any neighborhood the user searches for.

1. Design & Vibe (Aesthetic)

• Use a calm, elegant, and premium museum-like design.
• Use muted earth tones (stone/beige backgrounds, dark charcoal text), soft gradients, rounded corners, and generous padding.
• Use a Serif font for headlines to give a historical feel, and a clean Sans-serif for the body text.
• Overall tone should feel gentle, educational, and reassuring.

2. Build by Components (Atomic UI) Please build the following sections:

• Header & API Key Settings: A top header with a small "Settings" icon (gear). Clicking it opens a small modal to input and save the Gemini API Key to localStorage. If the key is not set, prompt the user to enter it when they try to search.
• Hero Section: A centered headline reading "골목길 도슨트" and subtext "우리 동네에 숨겨진 역사와 근대사 이야기를 들어보세요."
• Search Section: A form with an input field (placeholder: "동네 이름을 입력하세요 (예: 정동, 부산 초량동)") and a rounded CTA button saying "검색". Add a row of clickable "Chips/Badges" for quick search suggestions: "정동", "북촌", "명동".
• Loading State: While fetching from the Gemini API, show an elegant loading state (e.g., a soft pulsing skeleton loader or a spinner with text "과거의 기록을 펼쳐보는 중입니다...").
• Result Card: A premium card with a soft shadow. It should include:
  • A small Badge on top showing the period.
  • A bold headline for the title.
  • A subtle horizontal divider line.
  • A text block for the detailed description with generous line height.
• Error State: A gentle error message block if the API call fails or if the API key is invalid.

3. API Logic & Real Content (Gemini API Integration)

• Use the @google/generative-ai SDK or native fetch to call the Gemini API (gemini-2.5-flash or gemini-pro).
• When the user searches, send this exact prompt to Gemini to ensure structured output: "You are a professional historical docent. Tell me about the history and modern history of '{search term}'. You MUST respond ONLY in valid JSON format with the following keys:
  • period: The main historical period of this neighborhood (e.g., '조선후기 ~ 개화기'). Use Korean.
  • title: An elegant, poetic title for the neighborhood (e.g., '근대사의 발자취, 정동'). Use Korean.
  • description: A detailed, engaging docent-style explanation of its history and modern history (about 3-4 sentences). Use Korean."
• Parse the JSON response and map it to the Result Card component.

Ask me any questions you need in order to fully understand what I want from this feature and how I envision it.

---

 

 

배경 변경 및 해설 2배 증가

 

---

지명의 유례 추가, 글자 포인트 조정

 

---

API 사용량 확인하기

 

이거 확인하러 나왔다가 날라갔다.. 지금 에러 천국이라는데... 

어쨌든 AI API 연동해서 만들기.

 

안티그래비티로 가지고 가서, 깃허브에 업로드까지..

안티로 가져가서 슈파베이스를 연동시켜야 하나..

지금은 러버블클라우드에 연동이 되어있다..