← 목차

Claude Code 실습 · 강의 자료

💱 실시간 원화 환율 위젯

환율 고시 흐름 추적 + 임계값 알람 데스크톱 앱 — 받아서 직접 이어 만드는 실습 키트

🎓 최지혜님 Electron + JavaScript 배포일 2026-07-03 난이도 ★★☆
⚠️ 내부 교육용 자료입니다. 수강생 실습 목적으로만 사용하고, 링크·첨부의 외부 공유에 유의해 주세요. 실습 후에는 개인 환경에서 API·키 등을 안전하게 관리하시기 바랍니다.

📦 실습 스타터 키트

krw-rate-widget.zip · 약 33KB · 소스 7파일 + 문서 5종 · node_modules 제외(설치는 npm install)

⬇ 다운로드
01

이 앱은 무엇인가

화면 구석에 항상 떠서 주요 통화 환율을 실시간으로 보여주고, 내가 정한 기준값을 넘으면 알림을 주는 데스크톱 위젯입니다.

핵심 개념 — "환율 고시"의 흐름

  • 1
    매매기준율 — 서울외국환중개가 은행간 거래를 가중평균해 매 영업일 산출 (모든 은행 공통)
  • 2
    각 은행이 스프레드를 붙여 현찰 살 때/팔 때, 송금 보낼 때/받을 때 고시
  • 3
    하루에도 수십~수백 번 갱신 → N차 고시(회차). 이 앱이 그 회차·등락을 추적
02

기술서 요약

스택 & 아키텍처

Electron(데스크톱) · JavaScript · cheerio(파싱) · iconv-lite(EUC-KR) · Electron Notification(알림)

데이터는 메인 프로세스(collector.js)가 수집합니다 — 브라우저에서 직접 부르면 CORS에 막히기 때문. 소스는 Daum 금융 API(주력) → 네이버 → Frankfurter 순으로 자동 폴백하며, 현재 모두 하나은행 고시 기준입니다.

파일 구조

  • ·
    main.js — 창 생성·주기 갱신·IPC
  • ·
    collector.js — 환율 수집기(PROVIDERS 폴백)
  • ·
    alarm.js — 임계값 비교 → 알림
  • ·
    store.js — 설정·알람 규칙 저장
  • ·
    index.html / renderer.js — 위젯 화면
  • ·
    preload.js — 안전 통신 브리지
03

현재 구현 단계

  • ✓
    Electron 위젯 창 (테두리 없음·항상 위·드래그 이동)
  • ✓
    환율 수집 — Daum 주력 + 네이버·Frankfurter 폴백
  • ✓
    5개 통화 (USD·JPY·EUR·CNY·GBP), 매매기준/현찰/송금
  • ✓
    고시 흐름 — 회차·등락(▲빨강/▼파랑)·시고저
  • ✓
    임계값 알람 + 설정 영구 저장
  • ○
    여러 은행 비교 (KB·신한·우리·부산) — PLAN.md
  • ○
    증권사 환율 (OpenAPI) · 이력 저장 + 추세 차트
04

시작하기

내 컴퓨터에서 실행하고 Claude Code로 이어 개발하는 전체 흐름입니다.

  1. 준비물 설치

    Node.js 18+ (nodejs.org LTS) · Claude Code. 확인: node -v

  2. 압축 풀고 폴더로 이동

    위 다운로드 버튼으로 받은 krw-rate-widget.zip 을 풀고, 터미널에서 그 폴더로 이동합니다.

    터미널
    cd krw-rate-widget

  3. 설치 & 실행

    터미널
    npm install
npm start

    환율 위젯 창이 항상 위에 뜨면 성공입니다. 🎉

  4. Claude Code 켜기

    같은 폴더에서 claude 를 실행하면, 이 프로젝트를 인식한 채로 켜집니다.

  5. 프로젝트를 먼저 파악시키기

    아래 프롬프트를 그대로 복사해 붙여넣으세요.

    Claude Code 프롬프트 ①
    이 폴더는 Electron으로 만든 "원화 환율 위젯"이야.
README.md 와 docs/ 폴더의 문서들(특히 1_overview_spec.md, 2_current_status.md),
그리고 PLAN.md 를 먼저 읽고, 이 앱이 무엇이고 지금 어디까지 구현됐는지 요약해줘.
그 다음, 코드를 실행해보고 정상 동작하는지 확인해줘.
05

Claude Code에 지시할 프롬프트 (복사용)

파악이 끝나면, 원하는 기능을 자연어로 요청하면 됩니다.

예시 A · 통화 추가
추적 통화에 호주 달러(AUD)와 캐나다 달러(CAD)를 추가해줘.
collector.js 의 CURRENCIES 배열과 관련 코드를 수정하고, 실제로 값이 잘 나오는지 확인해줘.
예시 B · 환전 계산기
위젯에 간단한 환전 계산기를 추가하고 싶어.
금액을 입력하고 통화를 고르면 "현찰 살 때" 기준으로 원화 환산액을 보여줘.
예시 C · 은행 비교 (핵심 목표)
PLAN.md 의 시중은행 수집 방안을 읽고, 부산은행 환율을 가져오는
provider를 프로토타입으로 만들어줘. 사이트가 세션/JS 기반이면 방안의
2단계 폴백(직접 XHR 재현 → Playwright) 중 적절한 쪽으로 접근하고,
막히는 부분은 나에게 설명해줘.
06

이어서 구현하기 — 로드맵

🟢 초급 — 코드 구조 익히기
  • 통화 추가 · 위젯 색/글꼴 변경 · 환전 계산기
🟡 중급 — 앱을 풍부하게
  • 이력 저장 + 추세 차트(Chart.js) · 등락폭 알람 · 메뉴바/트레이 상주
🔴 고급 — 이 프로젝트의 본래 목표
  • 여러 은행 비교(부산→KB→신한→우리) · 증권사 환율(한투 KIS OpenAPI)

개발 원칙 (Claude Code에게도 알려주면 좋음)

  • •
    한 번에 한 기능 — 작게 바꾸고 매번 npm start 확인
  • •
    새 데이터 소스는 실패해도 기존 소스가 살아있게 try/catch 격리
  • •
    수집 예의 — 은행/포털을 너무 자주 부르지 않기(2~5분)
  • •
    잘 되는 지점마다 git 커밋해 되돌릴 수 있게