한국GPT협회 표준교재

803. 글로벌 마켓 모니터링 대시보드

원자재 시세 · 글로벌 뉴스 · 해외 거래처 언급 — 흩어진 세 가지 정보를 한 화면에 모으는 웹 애플리케이션을, 코드 한 줄 직접 쓰지 않고 설계부터 클라우드 배포까지 완성하는 바이브코딩 실전

글로벌 마켓 대시보드 — 로컬에서 만들기

Learning Objectives
  • 자연어 지시(바이브코딩)만으로 데이터 수집 → 저장 → 화면까지, 내 PC에서 실제로 도는 웹 애플리케이션 한 개를 완성한다.
  • 데이터 소스·기술 스택을 AI와 대화하며 추천받고 테스트로 검증한 뒤, 결론을 DESIGN.md 한 장에 모아 Plan Mode로 개발에 들어가는 흐름을 익힌다.
  • RSS·API·스크래핑 수집, 유사 컬럼 통합, 클라이언트 사이드 필터의 개념을 실무 맥락에서 이해한다(GitHub·Render 배포는 2부에서 다룬다).

이 장의 학습 흐름

  1. 완성작을 먼저 본다 — 무엇을 만드는지, 어떤 화면이 나오는지 (사례)
  2. 사전 준비를 갖춘다 — 설치 SW·계정·사내 환경 점검 (이해)
  3. 데이터 소스와 기술을 AI와 정한다 — 추천 → 테스트 → DESIGN.md (사례)
  4. Plan Mode로 설계를 확정한다 — 누락된 결정을 되묻게 한다 (사례)
  5. 크롤러·DB·프론트엔드를 개발해 localhost에서 띄운다 — 여기까지가 1부(로컬 제작) (사례)
  6. 2부 안내 — 로컬에서 완성한 앱을 GitHub·Render로 공개 URL에 올리는 배포 과정은 2부에서 별도로 다룹니다.
  7. 준비물 — VS Code, 바이브코딩 도구(Claude Code 또는 Codex) 확장, Python 3.12+, Git, GitHub·Render 계정. 직접 만들 환경이 없으면 완성작 URL과 첨부 프롬프트로 따라 읽기.
사례

완성작 미리보기

완성작

학습 안내열어 보기. 본격적으로 만들기 전에 "무엇을 만드는지"를 눈으로 확인합니다. 아래 라이브 URL을 한 번 열어 우상단 REFRESH를 눌러 보고, 화면 구성을 머릿속에 그려 두십시오.

원자재 시세 · 글로벌 뉴스 · 해외 거래처 언급 — 종합상사·트레이딩 실무에 필요한 세 가지 정보를 하나의 대시보드에 통합한 웹 애플리케이션입니다. Python 백엔드 + 바닐라 HTML/JS 프론트엔드 + JSON 파일 DB로 구성됩니다. 1부에서는 이 앱을 내 PC(로컬)에서 만들어 띄우고, 2부에서 GitHub·Render로 누구나 접속하는 공개 URL에 배포합니다.

● 한국GPT협회 WTI 95.07 +6.09% · GOLD 2,408.3 +0.42% · COPPER 4.51 -1.12% · IRON ORE 112.8 +0.78% · BRENT 98.23 +5.11% · 13:24 UTC   ⟳ REFRESH
SEARCH
oil
CATEGORY
metals · energy · agri
SOURCE
☑ Reuters
☑ CNBC
☐ Bloomberg
COUNTERPARTY
☑ Trafigura · 1
FINANCIAL TIMES
Trafigura posts record H1 profit as commodities volatility intensifies
Profits surged as the group capitalized on oil and LNG market swings amid geopolitical tension.
REUTERS BUSINESS
Iron ore steadies as Chinese steel output nudges higher
Singapore benchmark holds above $110/t amid mixed demand signals.
CNBC COMMODITIES
Copper slips on weaker manufacturing data from Germany
LME three-month copper fell as PMI readings pointed to softening demand.
BLOOMBERG MARKETS
EV makers see more demand as oil prices climb
Chinese EV makers report widening orders as crude oil remains elevated.
COMMODITIES
WTI   95.07 +6.09
BRENT 98.23 +5.11
GOLD  2408  +0.42
COPP  4.51  -1.12
TOP BUYERS
1. Trafigura · 1
2. Vitol · 1
3. Mercuria · 1
처음 접속 시 안내. Render 무료 티어는 15분간 접속이 없으면 서버가 휴면합니다. 첫 접속 시 깨어나는 데 약 20~50초가 걸리므로 화면이 비어 있어도 잠시 기다리면 정상 로딩됩니다. 두 번째 접속부터는 즉시 응답합니다.

주요 기능

01실시간 원자재 티커

WTI·Brent·금·구리·철광석 등 12개 핵심 원자재의 가격·등락률이 상단에 가로로 흐릅니다. Yahoo Finance v8 chart 엔드포인트에서 수집.

02글로벌 뉴스 카드 그리드

Reuters·CNBC·Bloomberg·WSJ·FT 등 주요 매체의 최신 헤드라인을 카드로 표시. 매체별 색·시간 표기.

03거래처 언급 자동 감지

Glencore·Trafigura·Rio Tinto 등 15개 거래처 키워드를 뉴스에서 자동 매칭. 매칭된 기사에 거래처 칩이 부착됩니다.

04다중 필터 · 검색

왼쪽 사이드바에서 카테고리·매체·거래처·날짜·텍스트 검색을 동시에 적용. 모든 필터링이 브라우저 안에서 즉시 처리.

05즉시 재수집(REFRESH)

우상단 REFRESH 버튼을 누르면 서버가 모든 소스를 다시 호출해 최신 데이터로 갱신합니다.

06비즈니스 대시보드 테마

금융 터미널을 연상시키는 차분한 톤. 양수·음수 색 구분, monospace 라벨로 정보 밀도를 높였습니다.

동작 방식 한눈에

COLLECT
수집
11개 매체 RSS + 시세 + 거래처 매칭
UNIFY
통합
매체별 필드명 통일·중복 제거
STORE
저장
JSON 4종 (별도 DB 서버 없음)
DISPLAY
표시
통합 JSON 로드 → 클라이언트 필터
이해

사전 준비

학습 안내점검. 교육 시작 전에 갖춰져 있어야 할 것들입니다. 소프트웨어 설치보다 계정 인증(2FA·이메일)사내 네트워크 제약이 더 자주 발목을 잡으니, 표의 항목을 미리 하나씩 확인하십시오.

설치 소프트웨어 체크리스트

개인 PC에 관리자 권한으로 아래를 설치합니다. 설치 순서에 약간의 의존성이 있으니 위→아래 순으로 진행합니다.

소프트웨어권장 버전출처이유 · 한 줄
Python3.12.3python.org크롤러와 서버의 실행 엔진. pip 패키지 매니저 포함.
VS Code1.99 이상code.visualstudio.com코드 에디터 + 통합 터미널. Claude Code·Codex 확장을 여기서 실행.
Git2.49.0git-scm.com코드 버전 관리. GitHub 푸시를 위한 필수 도구.
Claude Code / Codex최신VS Code MarketplaceVS Code 확장으로 설치하는 바이브코딩 핵심 도구. 둘 중 하나를 선택해 사용.
GitHub CLI(선택)2.91cli.github.comgh repo create로 리포 생성·푸시를 한 줄로. 없으면 웹 UI로도 가능.
설치 검증. 터미널에서 python --version, git --version, code --version 세 줄을 실행해 모두 버전이 출력되면 1차 성공입니다.

계정 체크리스트

소프트웨어보다 더 자주 발목을 잡는 것이 계정입니다. 이메일 인증·2FA는 당일에 하면 문자 수신 지연 등으로 시간이 걸리므로 사전에 끝내 둡니다.

서비스필요 이유준비 사항
Anthropic / OpenAI 계정Claude Code / Codex 인증Claude Code → Anthropic(Claude Pro/Max 또는 API 키), Codex → OpenAI(ChatGPT Plus 또는 API 키). 결제 수단 등록 선행.
GitHub 계정소스 코드 호스팅로그인 후 gh auth login으로 인증까지. 2FA 설정 권장.
Render 계정완성 사이트 배포GitHub 계정으로 로그인(OAuth) → 이메일 인증. Free tier로 충분.

사내 환경(IT) 점검

기업 표준 PC·사내 네트워크는 개인 환경과 다른 제약이 있습니다. 아래 네 항목을 사전에 점검합니다.

01방화벽 화이트리스트

pypi.org, github.com, *.onrender.com, query1.finance.yahoo.com, Reuters/CNBC RSS 도메인 허용.

02프록시 / SSL 인터셉션

pip installgit clone이 SSL 오류 없이 동작해야 함. 사내 CA 인증서 설치가 필요할 수 있음.

03관리자 권한

Python·VS Code·Git 설치 시 1회 필요. IT가 임시 권한을 부여하거나 사전 설치 이미지를 배포.

04외부 서비스 정책

보안 정책상 외부 AI 서비스(Claude API) 이용이 금지돼 있는지 확인. 교육용 예외 승인이 필요할 수 있음.

실습 — 사전 준비 점검

  1. 각자 PC 터미널에서 python --version, git --version, gh --version 3줄을 실행해 모두 버전이 뜨는지 확인한다.
  2. Claude Code(또는 Codex)를 처음 켜고 "안녕" 한 번만 쳐서 응답이 오는지 확인한다.
  3. 브라우저에서 완성작 URL을 한 번 열고, 우상단 REFRESH를 눌러 동작시켜 본다.
사례

1. 데이터 수집 기획

상사 · 데이터 소스

학습 안내패턴 보기. 이 모듈은 세 카테고리(뉴스·원자재·거래처)에 대해 같은 패턴을 반복합니다 — ① AI에게 후보를 추천받고 → ② AI가 직접 테스트해 성공/실패를 보고하고 → ③ 성공한 것만 다음 단계로. 프롬프트 한 쌍씩을 그 흐름으로 읽으십시오.

1-1. VS Code에서 폴더 열고 Claude Code·Codex 띄우기

이번 모듈부터 실제 환경에서 작업합니다. 첫 셋업은 1분 안에 끝납니다.

단계할 일방법
1빈 폴더 만들기원하는 위치에 global-market-monitor 폴더 생성
2VS Code로 열기VS Code 실행 → 파일 → 폴더 열기 → 방금 만든 폴더 선택
3Claude Code·Codex 실행좌측 사이드바의 해당 도구(Claude Code/Codex) 아이콘 클릭(또는 단축키)으로 채팅 패널을 연다
4인식 확인Claude에게 "이 폴더에 뭐 있어?"라고 물어 폴더 인식 여부를 확인
작업 공간의 경계. 이 시점부터 Claude Code·Codex의 모든 파일 읽기·쓰기·실행은 현재 연 폴더 안에서만 이뤄집니다. 다른 경로에 영향이 가지 않아 비교적 안전하게 실험할 수 있습니다.

1-2. 세 가지 수집 방법 비교

먼저 AI에게 "어떤 자동 수집 방법이 있는지" 직접 물어 개념을 잡습니다.

자동 수집 방법 개관 받기
원자재 가격 · 글로벌 뉴스 같은 데이터를 자동으로 수집하는 방법에 어떤 것들이 있는지 설명해 줘. 각 방법마다: - 원리 (간단히) - 주로 쓰이는 라이브러리 - 어떤 종류의 데이터에 적합한지 - 장점과 한계 비기술자도 이해할 수 있도록 쉬운 비유와 함께 정리해 줘.

크롤링은 실무적으로 세 가지로 귀결됩니다. 우선순위는 RSS → API → HTML 스크래핑 순이며, 앞쪽이 더 안정적이고 이용약관 충돌 가능성도 낮습니다.

방법라이브러리장점단점
RSSfeedparser매체가 직접 제공하는 표준 피드매체마다 필드명이 일부 다름
JSON APIrequests숫자 데이터 수집에 최적인증·쿼터·정책 변경 가능성
HTML 스크래핑BeautifulSoup, lxmlRSS·API가 없을 때의 대안페이지 구조 변경에 취약

1-3. 뉴스 매체 — 추천받고 테스트

① 추천받기 — 뉴스 매체 후보
상사 업무용 글로벌 마켓 대시보드를 만들려고 한다. RSS · 무료 API · BeautifulSoup 세 가지 방법으로 크롤링 가능한 글로벌 경제·시장 뉴스 매체를 추천해 줘. 각 매체마다 다음 정보를 표로 정리. - 매체명 - 수집 방식 (RSS / API / 스크래핑) - 실제 URL - 주 커버리지 (경제 · 원자재 · 지정학 등) - 무료 여부 유료 API 키가 필요한 소스는 제외.
② 테스트 — 추천 매체 동작 확인
방금 추천한 뉴스 매체 후보들에 대해 간단한 크롤링 테스트를 해 줘. 각 소스를 한 번씩 호출해서 다음을 확인. 1. 응답 상태 코드 확인 2. 실제로 기사 제목이 수집되는지 3. 한 매체당 최근 기사 1개 샘플 표시 결과를 성공 / 실패 표로 정리해 보고하고, 실패한 매체는 원인(404 · 인증 · 빈 응답 등)을 분류해 줘. 최종적으로 성공한 매체만 다음 단계로 가져갈 후보로 표시.

1-4. 원자재 사이트 — 추천받고 테스트

① 추천받기 — 원자재 시세 출처
원자재 가격 시세를 무료로 제공하는 공개 사이트·API를 추천해 줘. 대상 카테고리: - 에너지: WTI, Brent, Natural Gas - 금속: Gold, Silver, Copper, Aluminum, Iron Ore - 곡물: Corn, Wheat, Soybean - 환율: USD Index (DXY) 각 항목마다: - 출처 사이트 / API 엔드포인트 - 심볼 또는 코드 - 수집 방식 (JSON API / RSS / 스크래핑) - 무료 여부 · 인증 필요 여부
② 테스트 — 원자재 사이트 호출 확인
방금 추천한 원자재 사이트들을 실제로 호출해 보고 동작 여부를 확인해 줘. 각 심볼에 대해 다음을 수행. 1. 엔드포인트 호출 → 상태 코드 확인 2. 현재 가격 · 등락률을 응답에서 추출 가능한지 검증 3. 샘플 값 1건씩 표시 결과 표 | 항목 | 출처 | 상태 | 가격 추출 | 비고 | 실패한 항목은 원인을 분류(인증 필요 · 정책 변경 · 응답 포맷 등)하고 대체 출처를 1개씩 제안해 줘. 성공한 항목만 최종 후보로 남긴다.

1-5. 거래처 — 추천받고 키워드 정밀도 테스트

① 추천받기 — 모니터링할 거래처 후보
상사 부문이 글로벌 마켓 대시보드에서 모니터링하면 좋을 해외 거래처·바이어 후보를 카테고리별로 추천해 줘. 카테고리 - 트레이딩 하우스 (Glencore, Trafigura 류) - 광업·철강 (Rio Tinto, BHP, Vale, POSCO 류) - 곡물·식품 (Cargill, ADM 류) - 에너지 (Shell, Saudi Aramco 류) 각 거래처마다 다음 정보를 정리. - 정식 회사명 - 본사 국가 - 주요 사업 섹터 - 키워드 매칭용 별칭 2~3개 (회사명 변형 · ticker 등)
② 테스트 — 거래처 키워드 매칭 정밀도
앞서 1-3 단계에서 성공한 뉴스 매체에서 최근 기사 100건 정도를 샘플 수집해서, 방금 정한 거래처 키워드 목록이 얼마나 매칭되는지 테스트해 줘. 각 거래처마다 다음을 정리. 1. 매칭된 기사 수 2. 매칭 예시 1~2개 3. 오탐 가능성 점검 (예: "Shell"이 "shellfish"에도 매칭되는지) 결과를 표로 정리하고, 매칭 0건이거나 오탐이 많은 키워드는 보강 방안을 제시해 줘. 단어 경계(\b) · 별칭 추가 · 문맥 단어 조건 등을 고려한다.

1-6. 백엔드 · 데이터 저장 — 추천받고 선택

데이터 소스가 정해졌으니, 그 데이터를 어떤 언어로 수집하고 어디에 쌓을지를 결정합니다. 선택지를 추천받고, 결과를 보고 직접 정합니다.

① 추천받기 — 크롤링 언어·프레임워크 + 저장 방식
웹 크롤링과 데이터 저장에 어떤 선택지가 있는지 알려 줘. [크롤링 / 백엔드 측면] - 주로 쓰이는 언어와 프레임워크 (예: Python · Node.js · Go 등) - 각 언어의 RSS · API · 스크래핑 라이브러리 생태계 - 가벼운 웹 서버 옵션 (Flask · FastAPI · Express · Gin 등) - 학습 난이도와 운영 부담 [데이터 저장 측면] - JSON 파일 · SQLite · PostgreSQL · MongoDB 등의 차이 - 각각이 어울리는 데이터 규모와 동시 접근 수준 - 별도 DB 서버 설치 부담 여부 그다음, 우리 프로젝트 상황에 가장 적합한 조합을 추천해 줘. [프로젝트 상황] - 데이터 규모: 뉴스 수백 건 + 원자재 수십 건 + 거래처 매칭 - 사용자: 본인 + 소수 동료 (소규모) - 운영 환경: 단일 서버, 수일~수주 단위 시범 운영 - 목적: 실습형 교육에서 직접 만들어 보는 결과물
② 결정 통보 — Python + Flask + JSON 파일
추천 잘 받았다. 다음과 같이 결정한다. - 크롤링 / 백엔드: Python + Flask - 데이터 저장: JSON 파일 (도메인별 분리 + 통합 뷰 한 개) 이유: Python은 RSS · API · 스크래핑 라이브러리가 풍부하고, 코드 흐름이 직관적이어서 비기술자도 따라가기 쉽다. 데이터 양이 작고 동시 접근이 거의 없으므로 별도 DB 서버 없이 JSON 파일로 충분하다. 이 결정을 기억해 두고, 이후 단계에서 이 전제로 진행해 줘.

1-7. 프론트엔드 — 추천받고 선택

① 추천받기 — 프론트엔드 방법 비교
웹 대시보드의 프론트엔드를 구현하는 방법에는 어떤 것들이 있는지 알려 줘. 각 방법마다: - 대표 예시 (예: 바닐라 HTML/CSS/JS · React · Vue · Next.js · Streamlit 등) - 어떤 규모·성격의 프로젝트에 적합한지 - 학습 난이도와 운영 부담 - 장점과 한계 그다음, 이번 우리 프로젝트의 상황을 고려해서 가장 적합한 방법을 추천해 줘. [프로젝트 상황] - 백엔드: Python + Flask - DB: JSON 파일 - 화면: 한 페이지짜리 대시보드 (필터 · 검색 · 차트 · 카드) - 사용자: 본인 + 소수 동료 - 목적: 실습형 교육에서 직접 만들어 보는 결과물
② 결정 통보 — 바닐라 HTML/CSS/JS
추천 잘 받았다. 이번 프로젝트는 바닐라 HTML / CSS / JS 로 가기로 한다. 이유: 별도 빌드 단계 없이 코드 흐름을 끝까지 따라갈 수 있고, 한 페이지짜리 대시보드 규모에는 프레임워크가 과한 선택이라 판단했다. 이 결정을 기억해 두고, 이후 단계에서 그 전제로 진행해 줘.

1-8. 결론을 DESIGN.md로 정리

데이터 소스 + 백엔드/DB + 프론트엔드 결정이 끝났으면 결론을 DESIGN.md 한 장으로 정리합니다. 이 문서가 다음 모듈(Plan Mode)의 입력이 됩니다.

DESIGN.md 초안 생성 요청
지금까지 정한 내용을 프로젝트 루트의 DESIGN.md 문서로 정리해 줘. 포함할 항목: - ## 프로젝트 개요: 글로벌 마켓 대시보드의 목적과 결과물 - ## 데이터 소스: • 뉴스 매체 (성공한 목록만, 수집 방식 포함) • 원자재 시세 (성공한 출처와 심볼 목록) • 거래처 (확정한 목록과 키워드) - ## 크롤링 방법: 카테고리별로 RSS / API / 스크래핑 중 무엇을 사용할지 - ## 백엔드: Python + Flask (선택 이유 한 줄 포함) - ## 데이터 저장: JSON 파일 (도메인별 분리 + 통합 뷰) - ## 프론트엔드: 바닐라 HTML / CSS / JS (선택 이유 한 줄 포함) - ## 제외된 후보: 테스트에서 실패한 소스와 그 이유 (참고용) 문서를 저장한 뒤 파일 위치를 알려 줘.
이 문서의 역할. DESIGN.md는 다음 모듈에서 Plan Mode가 참조할 입력 문서입니다. 카테고리별 결정이 한 장에 모여 있으면, Plan Mode는 기술 스택·디렉토리 구조·검증 계획만 추가로 합의하면 됩니다.

실습 — 카테고리 한 가지 직접 진행

  1. 뉴스·원자재·거래처 중 하나를 골라 ① 추천 → ② 테스트 두 단계를 직접 진행한다.
  2. 실패한 항목 1개를 골라, 그 원인이 무엇이었는지 한 줄로 설명한다.
  3. 본인 카테고리의 결론 한 단락을 DESIGN.md에 추가하도록 요청한다.
사례

2. Plan Mode 설계 확정

설계

학습 안내읽기. Claude Code·Codex 같은 바이브코딩 도구는 요구사항을 받아도 곧장 코드를 쓰지 않고 선택이 필요한 사항을 질문으로 되돌려 줍니다. 이 "되묻기 단계"를 Claude Code에서는 Plan Mode라 부릅니다 — 프롬프트의 마지막 한 줄이 어떻게 그 동작을 유도하는지 보십시오.

Plan Mode 흐름

입력
Existing DESIGN.md
이전 모듈에서 만든 DESIGN.md(뉴스·원자재·거래처 결정)를 그대로 사용합니다. 데이터 소스는 이미 정해진 상태입니다.
AI의 질문
Clarifying Questions
"기술 스택은? 디렉토리 구조는? 개발 방식은? 검증 계획은?" 데이터 소스 외에 결정이 필요한 사항을 보기 형식으로 제시합니다.
합의 + 업데이트
Updated DESIGN.md
선택한 답을 기존 DESIGN.md에 추가합니다. 데이터 소스 + 기술 결정이 한 문서에 모이면 코드 생성을 시작할 준비가 끝납니다.
Plan Mode 진입 + DESIGN.md 보강 요청
방금 폴더에 둔 DESIGN.md 를 먼저 읽어 줘. 이 문서에는 데이터 소스(뉴스·원자재·거래처)는 이미 결정돼 있다. 이제 코드 작성에 필요한 나머지 결정을 합의하고 싶다. Plan Mode 로 진입해서, 아래 항목에 대해 선택지와 추천안을 보기 형식으로 질문해 줘. 1. 기술 스택 (백엔드 · 프론트엔드 · 패키지 매니저) 2. 디렉토리 구조 (수집기 · 에이전트 · DB · 정적 파일 분리 방식) 3. 개발 방식 (단계적 vs 일괄) 4. 검증 계획 (실행 명령 · 확인 포인트) 추가로: 위 4가지 외에도 이 웹 애플리케이션을 만들 때 일반적으로 결정해야 할 사항(예: 인증 방식 · 로깅 · 에러 처리 · 스케줄링 · 보안 · 캐싱 · 배포 환경 · 데이터 갱신 주기 · 다국어 · 접근성 등)을 직접 분석해서, 놓친 것이 없는지 점검하고 필요한 항목을 추가 질문해 줘. 내 선택을 모두 받은 뒤 DESIGN.md 를 업데이트해 줘. 이전 내용은 보존하고 새 결정 사항을 추가하는 형태로.
핵심. AI가 곧장 코드를 쓰지 않고 먼저 질문하도록 유도하는 한 줄이 "Plan Mode로 진입해서 … 질문해 줘"입니다. 내가 선택한 대답이 DESIGN.md에 업데이트됩니다.

업데이트된 DESIGN.md — 최종 합의문

데이터 소스(이전 모듈) + 기술 결정(이번 모듈)이 한 문서에 모입니다. 이후 모든 코드는 이 문서를 근거로 생성됩니다.

DESIGN.md — 업데이트 후 (실제 프로젝트 발췌)
# Global Market Monitor — 설계서

## Context
원자재 시세 · 글로벌 뉴스 · 해외 거래처 언급을
한 화면에 통합해 보여주는 웹 대시보드. 직접
구축·운영할 수 있도록 단순한 구조로 설계.

## 확정된 전제
- 백엔드: Python 3.12 + Flask
- 프론트엔드: 바닐라 HTML / CSS / JS (별도 빌드 단계 없음)
- 데이터 소스: 공개 RSS · Yahoo Finance v8 (API 키 불필요)
- 개발 방식: 단계적 (수집 → 저장 → 표시)
- 작업 순서: 설정 JSON → 수집기 → 에이전트 → DB → 서버 → UI

## 디렉토리 구조
global-market-monitor/
├── site/
│   ├── agents/
│   │   ├── commodity_agent.py      원자재 수집
│   │   ├── news_agent.py           뉴스 수집
│   │   └── search_pool_agent.py    거래처 매칭
│   ├── collectors/
│   │   ├── rss_collector.py        feedparser 기반
│   │   ├── api_collector.py        requests 기반
│   │   └── scraper.py              BeautifulSoup 기반
│   ├── db/
│   │   ├── schema.py               공통 레코드 스키마
│   │   ├── unifier.py              유사 컬럼 통합
│   │   ├── store.py                JSON atomic write
│   │   ├── commodities.json
│   │   ├── news.json
│   │   ├── buyers.json
│   │   └── unified.json            대시보드 단일 소스
│   ├── config/
│   │   ├── news_sources.json
│   │   ├── commodity_sources.json
│   │   └── buyers_keywords.json
│   ├── static/
│   │   ├── index.html              대시보드
│   │   ├── styles.css              스타일시트
│   │   └── app.js                  필터·검색
│   ├── server.py                   Flask + REST API
│   ├── run_once.py                 1회 수집 실행
│   ├── scheduler.py                주기 실행 루프
│   └── requirements.txt
├── render.yaml                     Render 배포 설정
├── runtime.txt                     Python 버전 고정
└── README.md

## REST API 엔드포인트
GET  /                  대시보드 index.html
GET  /api/unified       통합 뷰 (대시보드 초기 로드)
GET  /api/commodities   원자재 전체
GET  /api/news          필터 파라미터 지원
GET  /api/buyers        거래처 목록
POST /api/refresh       즉시 재수집 트리거

## 검증 계획
- pip install -r site/requirements.txt 성공
- python run_once.py 실행 시 db/*.json 적재 (레코드 > 0)
- python server.py 기동 후 http://localhost:5000 에서:
   • 대시보드 렌더링 / 좌측 필터 동작
   • 상단 원자재 티커 롤링 / REFRESH 재수집 후 화면 갱신
사례

3. 개발 — 크롤러·DB

백엔드

학습 안내읽기. 데이터 소스(모듈 1)와 기술 결정(모듈 2)이 모두 DESIGN.md에 있으니, 이 문서가 곧 설계서입니다. AI에게 "DESIGN.md 그대로 개발하라"고 지시하면 수집 파이프라인이 코드로 구현됩니다.

3-1. DESIGN.md를 근거로 개발 진행

DESIGN.md 기반 개발 + 자가 평가 + 종합 보고
DESIGN.md 를 다시 읽어 줘. 이 문서가 나의 설계서다. 이 문서에 정리된 내용 그대로 개발을 진행해 줘. 진행 방식 - 개발 중간중간 실제로 코드를 실행해 보고 의도대로 동작하는지 직접 점검할 것. - 지금 무엇을 하고 있고 왜 그렇게 하는지를 내가 이해할 수 있도록 단계마다 출력하면서 진행할 것. - 서로 연관성이 낮은 다수의 작업은 서브 에이전트를 활용해 동시에 병렬 진행할 것. 품질 기준 - 이 개발의 완료 여부를 판단할 품질 기준을 먼저 정해 알려 줘. - 개발이 끝나면 그 기준을 만족하도록 잘 개발되었는지 스스로 평가하고, 미달 항목이 있으면 원인을 분석해 보완해 줘. 완료 후 - 전체 진행 상황과 정상 작동 여부를 한 화면에 종합 보고해 줘.

3-2. 완성된 수집 파이프라인

진행하다 보면 자연스럽게 네 개의 역할이 분리된 구조가 만들어집니다.

Collector
원시 수집
rss_collector(feedparser) · api_collector(requests) · scraper(BeautifulSoup). 세 방식의 원시 응답을 dict 리스트로 반환합니다.
Agent
도메인 오케스트레이터
commodity_agent · news_agent · search_pool_agent. 설정 JSON을 순회하며 Collector를 호출하고, 결과를 Unifier로 넘깁니다.
Unifier
공통 스키마
서로 다른 필드명을 공통 키 {id · source · title · url · published_at · category · entities · metrics}로 통합하고 중복을 제거합니다.
Store
JSON DB
Atomic write(tempfile → os.replace)로 commodities.json · news.json · buyers.json · unified.json에 저장합니다.

3-3. 유사 컬럼 통합

Reuters RSS는 title, CNBC RSS는 headline을 씁니다. 매체마다 다른 필드명을 공통 키로 수렴시켜야 대시보드가 한 화면에서 통합 표시할 수 있습니다.

site/db/unifier.py — AI가 생성한 정규화 로직 (발췌)
# 매체별 필드 alias — 공통 키로 수렴
FIELD_ALIASES = {
    "title":        ("title", "headline"),
    "url":          ("url", "link", "guid"),
    "published_at": ("published", "pubDate", "updated", "date"),
    "summary":      ("summary", "description", "content"),
}

def _pick(raw, keys):
    for k in keys:
        if raw.get(k):
            return raw[k]
    return None
실무적 의미. 같은 뜻의 컬럼이 시트마다 이름이 달라 사람이 손으로 맞춰 주던 작업을 이 Unifier가 자동화합니다. 이후 새 매체가 추가돼도 FIELD_ALIASES에 한 줄만 더하면 됩니다.

3-4. 실행 결과

$ python run_once.py
[1/4] commodity_agent ...
      -> 12 commodity records
[2/4] news_agent ...
      -> 541 news records
[3/4] search_pool_agent ...
      -> news_updated=541 buyers=15
[4/4] build unified ...
      -> unified counts: {'commodities': 12, 'news': 541, 'buyers': 15}
541
뉴스 레코드
12
원자재 심볼
15
거래처 엔티티
11
성공 매체 수

실습 — 본인 거래처 추가

  1. buyers_keywords.json을 열어 본인 부서의 실제 거래처 3곳을 추가한다.
  2. python run_once.py 재실행 후 buyers.json에서 매칭 수를 확인한다.
  3. 매칭이 0건인 거래처는 키워드가 일반 단어이거나 별칭이 부족한 경우다. 키워드를 보강해 다시 실행한다.
사례

4. 개발 — 대시보드

프론트엔드

학습 안내읽기. 화면을 만들 때는 ① 지금 무엇이 있는지 먼저 묻고 → ② 어디를 어떻게 바꿀지 별도로 지시합니다. "어떤 분위기의 UI인가"를 말로 정확히 묘사하는 것이 디자인 품질의 8할을 결정합니다.

4-1. 디자인 프롬프트 — 현 파일 파악 후 수정 지시

① 현재 프론트엔드 파일 설명 요청
지금 이 프로젝트에서 프론트엔드 디자인과 관련된 파일들이 무엇인지 먼저 알려 줘. 각 파일에 대해: - 파일 경로 - 어떤 역할을 하는지 (HTML 구조 · 스타일 · 동작 등) - 현재 구현된 주요 요소·기능 요약 설명만 먼저 해 줘. 수정은 다음 단계에서 진행한다.
② 대시보드 UI 수정 지시
방금 설명한 프론트엔드 파일들을 다음 방향으로 수정해 줘. 레이아웃: 3칼럼 (왼쪽 필터 · 가운데 뉴스 카드 · 오른쪽 원자재·거래처) 헤더: 브랜드 · 원자재 티커 가로 스크롤 · UTC 시계 · REFRESH 버튼 스타일: 다크 테마, amber 포인트, 터미널 느낌의 monospace 라벨 필터: 카테고리 · 매체 · 거래처 · 날짜 · 텍스트 검색 (클라이언트 사이드)
프롬프트 설계. 화면을 손볼 때 ① 지금 무엇이 있는지를 먼저 묻고, ② 어디를 어떻게 바꿀지를 별도 지시로 분리하면, AI가 기존 코드를 충분히 파악한 상태에서 최소 변경으로 수정합니다.

4-2. 완성된 대시보드 레이아웃 (미리보기)

● 한국GPT협회 WTI 95.07 +6.09% · GOLD 2,408.3 +0.42% · COPPER 4.51 -1.12% · IRON ORE 112.8 +0.78% · 13:24 UTC   ⟳ REFRESH
SEARCH
oil
CATEGORY
metals · energy · agri
SOURCE
☑ Reuters
☑ CNBC
☐ Bloomberg
COUNTERPARTY
☑ Trafigura · 1
FINANCIAL TIMES
Trafigura posts record H1 profit as commodities volatility intensifies
Profits surged as the group capitalized on oil and LNG market swings.
REUTERS BUSINESS
Iron ore steadies as Chinese steel output nudges higher
Singapore benchmark holds above $110/t amid mixed demand.
CNBC COMMODITIES
Copper slips on weaker manufacturing data from Germany
LME three-month copper fell as PMI readings softened.
BLOOMBERG MARKETS
EV makers see more demand as oil prices climb
Chinese EV makers report widening orders as crude stays elevated.
COMMODITIES
WTI   95.07 +6.09
BRENT 98.23 +5.11
GOLD  2408  +0.42
COPP  4.51  -1.12
TOP BUYERS
1. Trafigura · 1
2. Vitol · 1
3. Mercuria · 1
라이브 확인. 실제로 렌더링되는 대시보드는 global-market-monitor.onrender.com 에서 볼 수 있습니다. Free tier라 첫 접속 시 20~50초 cold start 대기.

4-3. 클라이언트 사이드 필터링 — 서버 왕복 0회

대시보드는 부팅 시 /api/unified를 한 번만 호출해 전체 데이터를 받고, 이후 모든 필터·정렬·검색은 브라우저 안에서 처리합니다. 수백 건 기준 반응 속도 수십 밀리초.

site/static/app.js — 클라이언트 필터링 로직 (발췌)
function applyFilters() {
  const { q, category, sources, buyers, dateFrom, dateTo } = state.filters;
  return state.raw.news.filter(n => {
    if (category && (n.category || "") !== category) return false;
    if (sources.size && !sources.has(n.source)) return false;
    if (buyers.size && !(n.matched_buyers || []).some(id => buyers.has(id))) return false;
    if (dateFrom && (n.published_at || "") < dateFrom) return false;
    if (q) {
      const hay = `${n.title || ""} ${n.summary || ""}`.toLowerCase();
      if (!hay.includes(q.toLowerCase())) return false;
    }
    return true;
  });
}
1부 완료 — 로컬에서 동작 확인. 여기까지 하면 python server.py 실행 후 http://localhost:5000에서 대시보드가 내 PC에서 동작합니다. 이제 이걸 누구나 접속할 수 있는 인터넷 주소로 올리는 일이 2부(배포)입니다.
과정 정리
  • 바이브코딩으로 내 PC에서 도는 웹 애플리케이션을 데이터 수집부터 화면까지 만들 수 있다
  • 데이터 소스를 추천 → 테스트 → 성공분만 채택하는 패턴과, 결론을 DESIGN.md로 모으는 이유를 설명할 수 있다
  • Plan Mode가 "되묻기 단계"이며, 그 결과가 DESIGN.md에 합쳐져 코드 생성의 근거가 됨을 안다
  • Collector→Agent→Unifier→Store 구조와 유사 컬럼 통합, 클라이언트 사이드 필터의 개념을 안다
  • python server.pylocalhost:5000에서 대시보드가 동작하는 것을 확인했다

만든 웹앱을 인터넷에 배포하기

Learning Objectives
  • 로컬에서 완성한 웹앱을 Git으로 버전관리하고 GitHub에 올린 뒤, Render로 공개 URL에 배포하는 전 과정을 실행한다.
  • Git·GitHub·Render(호스팅)의 역할 차이를 구분하고, Free tier의 cold start·파일 영속성 한계와 운영 단계 업그레이드 경로를 이해한다.
  • 데이터 소스·키워드를 내 업무로 치환하고, 자동 갱신·알림까지 확장하는 방향을 잡는다.
사례

5. Git·GitHub·Render 배포

배포

학습 안내개념 → 실행. 세 용어의 관계만 먼저 잡으십시오 — Git(스냅샷 히스토리) · GitHub(원격 저장소) · Render(실행 서버 호스팅). 그다음 로컬 코드를 공개 URL로 올리는 과정을 따라갑니다.

5-1. Git 개념 — "저장"과 "커밋"은 다르다

코드 파일은 에디터로 "저장"하지만, 그 상태를 프로젝트 히스토리의 한 스냅샷으로 찍는 것이 Git의 "커밋"입니다. 커밋은 되돌릴 수도, 누가 언제 무엇을 바꿨는지 추적할 수도 있습니다.

init
첫 리포 만들기
git init -b main — 폴더에 .git/ 숨김 디렉토리가 생기며 이 폴더가 이제 Git 관리 대상.
add + commit
스냅샷 찍기
git add -A → 변경 파일 스테이징 / git commit -m "메시지" → 이 시점의 스냅샷 저장.
push
원격에 업로드
git push — 로컬 스냅샷 히스토리를 GitHub에 업로드. 처음엔 -u origin main으로 연결.
커밋 메시지 작성 원칙. "무엇을 바꿨는가"보다 "왜 바꿨는가"를 기록합니다. "버튼 추가" 대신 "열람 시간을 줄이기 위해 Quick Filter 추가"처럼 의도를 남기면, 시간이 지난 뒤 팀원이 히스토리를 이해하기 쉽습니다.

5-2. GitHub — "코드 버전의 구글 드라이브"

로컬 리포를 GitHub에 올리면 공유·백업·협업(PR)이 가능해집니다. Private 리포는 허가된 사용자만 볼 수 있고, Render 같은 서비스가 배포용으로 읽을 수 있습니다.

① Render 배포 준비 파일 생성
Render Free tier 에 이 프로젝트를 배포할 예정이다. 깃허브에 Push 하기 전에 배포에 필요한 파일들을 미리 만들어 둬.
② GitHub로 Push
깃허브 푸시한다. repo 이름은 'global-market-monitor' 이다. 완료되면 저장소 URL 출력해 줘.
실행 로그 — gh repo create
$ gh repo create global-market-monitor --private ...
✓ Created repository .../global-market-monitor on GitHub
✓ Added remote https://github.com/.../global-market-monitor.git
✓ Pushed commits to origin/main

5-3. 호스팅 개념 — "내 노트북이 꺼져도 살아있는 주소"

로컬 PC에서 python server.py로 띄운 사이트는 내 노트북이 꺼지면 같이 꺼집니다. 24/7 유지되는 공개 URL이 필요하면 호스팅 서비스에 올려야 합니다.

방식특징적합
Render / Railway / Fly.ioFlask·Node 등 long-running 서버 지원 · 무료 티어 · Git 연동 자동 배포이 프로젝트 그대로 배포 가능
Vercel / NetlifyServerless 기반 · 정적 사이트에 최적JSON DB 구조를 바꿔야 호환
AWS / GCP EC2풀 제어 · 고비용 · IT 팀 필요운영 단계 확장

5-4. Render 배포 — 3번 클릭으로 Live

Render는 render.yaml 한 장만 리포에 있으면 Web Service를 자동 생성합니다. 코드 리팩토링 0줄로 배포 가능.

render.yaml — 리포 루트에 저장되는 배포 설정
services:
  - type: web
    name: global-market-monitor
    runtime: python
    plan: free
    buildCommand: pip install -r site/requirements.txt
    # 부팅 시 1회 수집 후 gunicorn 기동
    startCommand: sh -c "cd site && python run_once.py || true; \
                         gunicorn --timeout 90 --workers 2 \
                         --bind 0.0.0.0:$PORT server:app"
    envVars:
      - key: PYTHON_VERSION
        value: 3.12.3
STEP 1Blueprint 시작

Render Dashboard → + New → Blueprint 클릭

STEP 2리포 선택

GitHub 앱 권한 허용 후 global-market-monitor 선택

STEP 3Apply

render.yaml 자동 감지 → 빌드 1~2분 → Live

실행 로그 — Render 배포
==> Deploying...
==> Running 'sh -c "cd site && python run_once.py || true; gunicorn ..."'
[1/4] commodity_agent ... -> 12 commodity records
[2/4] news_agent ...      -> 542 news records
[3/4] search_pool_agent ... -> news_updated=542 buyers=15
[4/4] build unified ...
[INFO] Starting gunicorn 25.3.0
[INFO] Listening at: http://0.0.0.0:10000
==> Your service is live 🎉
==> Available at https://global-market-monitor.onrender.com
Free tier 특이점 3가지. (1) 15분 무활동 시 sleep → 다음 첫 요청에서 cold start 20~50초. (2) Persistent Disk 미지원 → 인스턴스 재시작 시 JSON DB 리셋(부팅 시 run_once 자동 재수집으로 복구). (3) 주기 스케줄 미지원 → REFRESH 버튼 on-demand 운영. → 운영 단계에서는 Starter plan + Persistent Disk + Cron Job으로 업그레이드를 검토합니다.

실습 — 본인 리포 → Render 배포

  1. 본인 프로젝트 폴더에서 git initgh repo create --private --push로 GitHub에 업로드한다.
  2. Render Dashboard에서 Blueprint 생성 → 본인 리포 선택 → Apply.
  3. 배포가 끝나면 https://[본인-서비스명].onrender.com이 공개된다. 브라우저에서 열어 동작을 확인한다.
  4. 실습 완료 후, 배포된 URL과 구성 과정을 조별로 공유한다.
응용

응용 — 내 업무로 치환

학습 안내선택. 미션 1이 가장 가치 있습니다 — 데이터 소스와 키워드를 내 업무로 바꾸는 순간 이 대시보드가 내 자산이 됩니다. 2·3은 여유가 될 때.

MISSION 1데이터 소스·키워드를 내 업무로 치환

뉴스 매체·원자재 심볼·거래처 키워드를 본인 산업의 것으로 바꿔 보십시오 — 예: 담당 산업 전문지 RSS + 핵심 원자재/지표 + 주요 거래처·경쟁사 10곳. config/*.json만 바꿔 같은 결과 구조가 나오는지 확인하는 것이 핵심입니다.

MISSION 2다른 도메인 대시보드로 변형

"수집 → 통합 → 저장 → 표시" 골격은 그대로 두고 주제만 바꿉니다 — 부동산 인허가·물류 운임·채용 공고·정책/입찰 모니터링 등. 카드에 들어갈 항목과 필터 축(카테고리·출처·날짜)만 다시 정의하면 됩니다.

MISSION 3자동 갱신·알림 붙이기

REFRESH를 사람이 누르는 대신, 스케줄러(cron/작업 스케줄러)로 주기 수집을 돌리고, 새 기사·임계치 돌파 시 메일·슬랙으로 알리는 단계를 추가하십시오. 발송 단계는 Make·n8n 같은 노코드 자동화 도구로 코드 없이 연결할 수도 있습니다.

과정 정리
  • Git(스냅샷 히스토리)·GitHub(원격 저장소)·Render(실행 서버 호스팅)의 역할을 구분할 수 있다
  • 로컬에서 완성한 코드를 GitHub에 올리고 Render로 공개 URL에 배포하는 과정을 따라갈 수 있다
  • Free tier의 cold start·파일 영속성 한계와 운영 단계 업그레이드 경로(Starter + Disk + Cron)를 안다
  • 데이터 소스·키워드를 내 업무로 치환하고, 자동 갱신·알림으로 확장하는 방향을 잡았다