SalesCast 라는 이름의 웹 애플리케이션을 개인으로 만들었습니다.

기계 학습 (Prophet) 을 백엔드로 사용하여 CSV 를 붙여넣기만 하면 예측 그래프가 나오는 간단한 도구입니다. 기술 구성, 개발 흐름, 겪었던 어려움을 정리합니다.

판매 예측은 실무에서 사용되는 기술이지만, 기존 도구는 비용이 비싸거나 도입 장벽이 높습니다. "CSV 를 붙이면 예측할 수 있는" 도구를 개인도 만들 수 있다고 생각하여 개발했습니다.

레이어	사용 기술
프론트엔드	React(Vite) + Recharts
백엔드	FastAPI(Python)
예측 엔진	Prophet(Meta 사 제품)
인프라	Vercel + Render

Prophet 은 계절성 및 휴일 효과를 자동으로 모델에 포함시켜 주므로, 파라미터 튜닝이 적게 필요합니다. "CSV 를 받아서 예측에 그대로 흘려보내는"이라는 단순한 설계와 잘 어울렸습니다.

예측 데이터에 대해 표시 기간을 슬라이더로 지정할 수 있으며, 해당 범위 내의 통계 정보가 자동으로 계산됩니다.

• 평균값
• 최대값/최소값
• 지정 기간의 그래프 표시

// 범위 지정 후 통계를 계산하는 예 (React)
const stats = useMemo(() => {
const filtered = forecastData.filter(
d => d.date >= rangeStart && d.date <= rangeEnd
);
const values = filtered.map(d => d.yhat);
return {
mean: values.reduce((a, b) => a + b, 0) / values.length,
max: Math.max(...values),
min: Math.min(...values),
};
}, [forecastData, rangeStart, rangeEnd]);

표시 중인 Recharts 그래프를 그대로 PNG 로 저장할 수 있습니다. html2canvas 를 사용하여 구현했습니다.

import html2canvas from "html2canvas";
const handleDownload = async () => {
const canvas = await html2canvas(chartRef.current);
const link = document.createElement("a");
link.download = "salescast_chart.png";
link.href = canvas.toDataURL();
link.click();
};

프론트엔드와 백엔드가 별도의 도메인이 되므로, CORS 의 명시적 지정이 필요합니다.

app.add_middleware(
CORSMiddleware,
allow_origins=["https://salescast.vercel.app"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)

개발 중에는 allow_origins=["*"] 로 설정해 두었으나, 본업에서는 반드시 좁혀서 설정했습니다.

Render 의 무료 플랜은 아이들 시간 이후의 첫 번째 요청이 지연됩니다. 프론트엔드 측에 로딩 스핀너를 구현하여 사용자가 이탈하지 않도록 하고 있습니다.

• FastAPI: Python 으로 빠르게 API 를 세울 수 있음. Prophet 과도 호환성이 좋음 -
• Prophet: 시계열 예측이 간편함. 파라미터가 적고 다루기 쉬움 -
• Recharts: React 와 조합하기 쉽고, 인터랙티브한 그래프를 만들기 쉬움

실제로 사용해 보시고 피드백을 주시면 기쁩니다.

GitHub: @Mecharhythm