환율 계산기, AI로 10분 만에 직접 만들어 쓰기
무료 오픈소스 환율 API로 실시간 환율 계산기를 직접 만들었습니다. KRW, USD, EUR, JPY 등 12개 통화를 지원합니다.
위 화면은 이 포스트의 프롬프트를 AI에 입력해서 생성한 샘플입니다
환율 계산기, 왜 직접 만드나?
여행을 준비하거나, 해외 직구를 하거나, 달러로 결제하는 구독 서비스 비용을 계산할 때 환율 계산기가 필요합니다.
검색해서 나오는 환율 계산기들은 대부분 광고가 많거나, UI가 복잡하거나, 원하는 통화 조합이 바로 보이지 않습니다.
직접 만들면 다릅니다. 내가 자주 쓰는 통화만 깔끔하게 모아두고, 필요할 때 바로 쓸 수 있는 도구를 만들 수 있습니다. 이번에는 실시간 환율 API까지 연동해봤습니다.
완성된 환율 계산기 살펴보기
위의 라이브 데모에서 직접 써보세요.
지원 통화 12가지: KRW, USD, EUR, JPY, CNY, GBP, CAD, AUD, CHF, HKD, SGD, TWD
페이지가 로드될 때 자동으로 최신 환율을 불러옵니다. 금액을 입력하고 통화를 선택하면 실시간으로 변환됩니다.
하단에는 주요 환율 빠른 참조가 있어서 자주 보는 원화 기준 환율(USD, EUR, JPY, CNY)을 한눈에 확인할 수 있습니다.
무료 환율 API — 완전 무료, 키 없음
이 환율 계산기는 fawazahmed0 Currency API를 사용합니다.
https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/{통화코드}.json
예시: KRW 기준 모든 통화 환율 가져오기
https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/krw.json
응답 예시 (일부):
{
"date": "2025-05-27",
"krw": {
"usd": 0.000724,
"eur": 0.000668,
"jpy": 0.1089,
"cny": 0.00524
}
}
jsDelivr CDN을 통해 제공되므로 속도가 빠르고 안정적입니다. API 키가 전혀 필요 없고 호출 횟수 제한도 없습니다.
AI에게 어떻게 요청했나?
1단계 프롬프트 — 기본 환율 계산기
Next.js 14 + TypeScript + Tailwind CSS로 환율 계산기 컴포넌트를 만들어줘.
요구사항:
- 'use client' 컴포넌트
- 지원 통화: KRW, USD, EUR, JPY, CNY, GBP, CAD, AUD, CHF, HKD, SGD, TWD
- 금액 입력 + from 통화 선택 → to 통화 선택 + 결과
- swap 버튼
- 환율 API: https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/{from}.json
응답에서 data[from.toLowerCase()][to.toLowerCase()] = 환율값
- 컴포넌트 마운트 시 자동으로 환율 fetch
- 마지막 업데이트 시간 표시
- 로딩/에러 상태 처리
2단계 프롬프트 — 빠른 참조 추가
다음을 추가해줘:
1. 주요 환율 빠른 참조 카드 (KRW/USD, KRW/EUR, KRW/JPY, KRW/CNY)
2. 각 카드는 1 외화 = 몇 원인지 표시
3. 새로고침 버튼 (환율 다시 불러오기)
4. 통화 이름 한국어로 표시 (예: USD → 미국 달러)
코드 핵심 포인트
1. 환율 데이터 구조 이해
API 응답은 from 통화 기준으로 모든 통화의 비율을 담습니다.
// KRW 기준 환율 가져오기
const res = await fetch(
'https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/krw.json'
)
const data = await res.json()
// 1 KRW = 0.000724 USD
const usdRate = data.krw.usd // 0.000724
// 1000원을 달러로
const result = 1000 * usdRate // 0.724 USD
2. 통화 변경 시 재요청 최소화
from 통화가 바뀔 때마다 API를 호출하면 느립니다. 캐시를 활용합니다.
const [ratesCache, setRatesCache] = useState<Record<string, Record<string, number>>>({})
const fetchRates = async (currency: string) => {
// 이미 캐시에 있으면 API 호출 스킵
if (ratesCache[currency]) return ratesCache[currency]
const res = await fetch(`...currencies/${currency.toLowerCase()}.json`)
const data = await res.json()
const rates = data[currency.toLowerCase()]
setRatesCache(prev => ({ ...prev, [currency]: rates }))
return rates
}
3. 숫자 포맷 — 통화별 소수점 처리
통화마다 소수점 자릿수가 다릅니다.
function formatCurrency(amount: number, currency: string): string {
// 엔화, 원화는 소수점 없음
const noDecimals = ['JPY', 'KRW']
const decimals = noDecimals.includes(currency) ? 0 : 2
return new Intl.NumberFormat('ko-KR', {
minimumFractionDigits: decimals,
maximumFractionDigits: decimals,
}).format(amount)
}
환율 지식 — 알아두면 좋은 것들
환율이란?
환율은 두 통화 간의 교환 비율입니다. "1달러 = 1,380원"이라고 하면, 1달러를 1,380원에 살 수 있다는 뜻입니다.
매매 기준율 vs 실제 환전율
API에서 제공하는 환율은 매매 기준율입니다. 실제 은행이나 환전소에서 환전하면 수수료가 붙어 조금 더 불리한 환율이 적용됩니다. 여행 전 환전 금액을 계산할 때는 약 1~2%의 수수료를 감안하세요.
환율 변동성
환율은 하루에도 여러 번 변합니다. 이 도구는 하루 1회 업데이트되는 API를 사용하므로 실시간 거래용이 아닌 참고용으로 활용하세요.
활용 예시
해외 직구 예산 계산 $150 미국 쇼핑몰 구매 → 원화로 얼마인지 바로 계산
여행 경비 환산 일본 여행 예산 50만원 → 엔화로 얼마인지 확인
구독 서비스 비용 $9.99/월 구독료 → 연간 원화 환산
외화 급여 계산 월 $3,000 프리랜서 수입 → 원화 월수입 파악
이렇게 확장할 수 있습니다
- 실시간 환율: WebSocket 또는 더 자주 업데이트되는 유료 API 연동
- 환율 추이 그래프: 최근 30일 환율 변화 차트
- 다중 변환: 1개 통화를 여러 통화로 동시 변환
- 환율 알림: 특정 환율 도달 시 알림 (PWA push 알림)
자주 묻는 질문
Q. 환율 데이터가 얼마나 자주 업데이트되나요? fawazahmed0 API는 매일 1회 업데이트됩니다. 실시간 환율이 필요하면 Open Exchange Rates 같은 유료 API를 사용하세요.
Q. 모든 통화를 지원하나요? fawazahmed0 API는 170개 이상의 통화를 지원합니다. 코드에서 CURRENCIES 배열에 원하는 통화 코드를 추가하면 됩니다.
Q. 환전 수수료는 반영되나요? 아니요, 매매 기준율만 표시됩니다. 실제 환전 시에는 은행/환전소 수수료를 별도로 계산하세요.
다음 편 예고
다음 편은 뽀모도로 타이머입니다. SVG 애니메이션과 Web Audio API로 완성도 높은 생산성 도구를 만들어봅니다.
'use client'
import { useState, useEffect, useCallback } from 'react'
const CURRENCIES = [
{ code: 'KRW', label: '한국 원', symbol: '₩', flag: '🇰🇷' },
{ code: 'USD', label: '미국 달러', symbol: '$', flag: '🇺🇸' },
// ... 나머지 통화
]
export function CurrencyConverter() {
const [fromCurrency, setFromCurrency] = useState('KRW')
const [toCurrency, setToCurrency] = useState('USD')
const [amount, setAmount] = useState('10000')
const [rates, setRates] = useState({})
const [isLoading, setIsLoading] = useState(false)
const fetchRates = useCallback(async (base) => {
setIsLoading(true)
try {
const url = `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${base.toLowerCase()}.json`
const res = await fetch(url)
const data = await res.json()
setRates(data[base.toLowerCase()])
} catch (e) {
console.error(e)
} finally {
setIsLoading(false)
}
}, [])
// fromCurrency 변경 시 자동 재조회
useEffect(() => {
fetchRates(fromCurrency)
}, [fromCurrency, fetchRates])
const rate = rates[toCurrency.toLowerCase()] ?? 0
const result = rate ? parseFloat(amount) * rate : 0
return (
<div>
<input
type="number"
value={amount}
onChange={e => setAmount(e.target.value)}
/>
<select value={fromCurrency} onChange={e => setFromCurrency(e.target.value)}>
{CURRENCIES.map(c => (
<option key={c.code} value={c.code}>{c.flag} {c.code}</option>
))}
</select>
<button onClick={() => { setFromCurrency(toCurrency); setToCurrency(fromCurrency) }}>
↔
</button>
<select value={toCurrency} onChange={e => setToCurrency(e.target.value)}>
{CURRENCIES.map(c => (
<option key={c.code} value={c.code}>{c.flag} {c.code}</option>
))}
</select>
<div>
{isLoading ? '로딩 중...' : result.toLocaleString()}
</div>
{/* 1 KRW = 0.000724 USD */}
<p>1 {fromCurrency} = {rate} {toCurrency}</p>
</div>
)
}