← 목차

Claude Code 실습 · 강의 자료

₩ 실시간 환율 대시보드 — Ruby on Rails

환율 고시를 실시간으로 보여주는 Rails 웹 앱 — 받아서 직접 이어 만드는 실습 키트

🎓 최지혜님 Ruby on Rails 8 Ruby 4.x 배포일 2026-07-10 난이도 ★★★
⚠️ 내부 교육용 자료입니다. 수강생 실습 목적으로만 사용하고, 링크·첨부의 외부 공유에 유의해 주세요. 이 앱은 Ruby와 Rails 설치가 필요합니다(아래 04단계) — Node.js만 필요한 Electron 버전과 다릅니다.

📦 실습 스타터 키트

krw-rate-web.zip · 약 63KB · Rails 표준 구조 + 문서 5종 · tmp/ log/ 제외(젬은 bundle install)

⬇ 다운로드
01

이 앱은 무엇인가

주요 통화 환율을 웹 페이지에서 실시간으로 보여주는 Ruby on Rails 웹 애플리케이션입니다. 브라우저만 있으면 어디서든 접속할 수 있어요. (같은 기능의 Electron 데스크톱 위젯의 웹 버전)

무엇을 보여주나

  • ·
    5개 통화(USD·JPY·EUR·CNY·GBP)의 매매기준율·현찰 살 때·송금 보낼 때
  • ·
    등락(▲상승 빨강 / ▼하락 파랑) + 변동률
  • ·
    고시 회차 — 하루 수백 번 갱신되는 환율 고시의 흐름
  • ·
    1분마다 자동 갱신 · 라이트/다크 · 모바일 대응
02

기술서 요약 (MVC)

스택

Ruby on Rails 8 · Ruby 4.x(3.1+ 필요) · Puma 웹서버 · 데이터는 다음(Daum) 금융 API(하나은행 고시) · net/http+json(외부 젬 불필요) · DB 없음(실시간 조회라 불필요)

브라우저 ──GET /──▶ RatesController#index ──▶ index.html.erb (대시보드) │ (화면 JS가 1분마다) ▼ GET /api/rates ──▶ RatesController#data ──▶ RateFetcher.call │ │ HTTP ◀──── JSON ────── 다음 금융 API

핵심 파일

  • ·
    app/services/rate_fetcher.rb — 환율 수집(5통화 병렬)
  • ·
    app/controllers/rates_controller.rb — index(HTML)+data(JSON)
  • ·
    app/views/rates/index.html.erb — 대시보드 UI+자동갱신 JS
  • ·
    config/routes.rb — root + /api/rates
03

현재 구현 단계

  • ✓
    Rails 8 앱 (DB 없는 경량 구성)
  • ✓
    환율 수집 서비스 — 다음 API 5통화 병렬 fetch
  • ✓
    JSON API /api/rates + 대시보드 화면
  • ✓
    등락·고시 회차 표시 · 1분 자동 갱신 · 라이트/다크·반응형
  • ○
    임계값 알람(브라우저 Notification)
  • ○
    이력 저장+추세 차트(DB 도입) · 여러 은행 비교 · 배포
04

시작하기

⚠️ 이 앱은 Ruby와 Rails가 먼저 필요합니다. (Electron 버전과 다른 점)

  1. Ruby & Rails 설치 (macOS)

    Homebrew 설치 후:

    터미널 (macOS · Apple Silicon)
    brew install ruby
echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc
gem install rails
ruby -v && rails -v   # 버전 나오면 OK

    Windows는 WSL2(우분투) 안에서 진행을 권장합니다.

  2. 압축 풀기

    위 다운로드 버튼으로 받은 krw-rate-web.zip 을 풉니다.

  3. 젬 설치 & 실행

    터미널
    cd krw-rate-web
bundle install
bin/rails server

    브라우저에서 http://localhost:3000 접속 → 대시보드가 뜨면 성공입니다. 🎉

  4. Claude Code 켜기 & 파악시키기

    같은 폴더에서 claude 실행 후, 아래를 그대로 붙여넣으세요.

    Claude Code 프롬프트 ①
    이 폴더는 Ruby on Rails로 만든 "실시간 환율 대시보드"야.
README.md 와 docs/ 폴더(특히 1_overview_spec.md, 2_current_status.md)를 먼저 읽고,
이 앱이 무엇이고 지금 어디까지 구현됐는지 요약해줘.
그 다음 bin/rails server 로 실행해서 http://localhost:3000 이 정상 동작하는지 확인해줘.
05

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

예시 A · 통화 추가
app/services/rate_fetcher.rb 의 CURRENCIES 에 호주 달러(AUD)와 캐나다 달러(CAD)를
추가하고, 화면에도 국기와 함께 나오게 해줘. 실행해서 확인까지 해줘.
예시 B · 임계값 알람
특정 통화의 환율이 내가 정한 값을 넘으면 브라우저 알림(Notification)을 주는 기능을
추가하고 싶어. 화면에 기준값 입력 UI도 만들어줘.
예시 C · 추세 차트 (DB 도입)
환율을 주기적으로 저장해서 시간대별 추세를 선 그래프로 보여주고 싶어.
이력 저장을 위해 어떤 방식(DB 추가 등)이 좋은지 먼저 설명하고 진행해줘.
06

이어서 구현하기 — 로드맵

🟢 초급 — 코드 구조 익히기
  • 통화 추가 · 화면 디자인 변경 · 환전 계산기
🟡 중급 — 앱을 풍부하게
  • 임계값 알람(Notification) · 이력 저장+추세 차트(DB 도입) · Turbo 리팩터링
🔴 고급 — 실제 서비스로
  • 여러 은행 비교 · 배포(Render/Fly.io/Railway)

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

  • •
    한 번에 한 기능 — 작게 바꾸고 매번 bin/rails server 확인
  • •
    API 호출 예의 — 다음 서버를 너무 자주 부르지 않기(1분)
  • •
    DB를 추가하면 마이그레이션·모델 개념을 설명받으며 진행
  • •
    잘 되는 지점마다 git 커밋해 되돌릴 수 있게