블로그 목록

중위소득 계산기를 만들게 된 이유와 개발 과정

복지 급여 자격 확인이 어려운 문제를 해결하기 위해 중위소득 비율 계산기를 기획하고 Next.js로 개발한 과정을 공유합니다.

2026-02-10Next.jsReact프로젝트 개발일지

왜 중위소득 계산기를 만들었나

정부 복지 정책을 살펴보면 "중위소득 50% 이하", "중위소득 100% 이하" 같은 기준이 자주 등장합니다. 하지만 실제로 내 소득이 중위소득의 몇 퍼센트에 해당하는지 확인하려면 보건복지부 고시를 찾아서 가구원 수별 금액을 비교해야 합니다.

이 과정이 생각보다 번거롭습니다. 매년 기준 금액이 바뀌고, 가구원 수에 따라 다르며, 건강보험료 기준으로도 확인할 수 있는데 이 역시 별도 표를 찾아야 합니다.

**"가구원 수와 소득만 입력하면 바로 결과를 보여주는 간단한 도구가 있으면 좋겠다"**는 생각에서 이 프로젝트가 시작되었습니다.

기술 스택 선정

개인 프로젝트이고 정적 데이터를 다루는 계산기이므로, 복잡한 백엔드 없이 프론트엔드만으로 충분하다고 판단했습니다.

  • Next.js 14 (App Router): SSG로 빌드하여 빠른 로딩 속도 확보
  • React: 사용자 입력에 따른 실시간 계산 결과 렌더링
  • Tailwind CSS: 빠르게 반응형 UI 구성
  • Vercel: 무료 호스팅 + 자동 배포

별도의 데이터베이스나 API 서버 없이, 2026년 중위소득 기준표를 상수 데이터로 코드에 포함시켰습니다. 매년 보건복지부 고시가 발표되면 데이터만 업데이트하면 됩니다.

핵심 기능 설계

1. 소득 기준 계산

사용자가 가구원 수(1~7인)와 월소득을 입력하면, 해당 가구의 중위소득 대비 비율을 즉시 계산합니다.

비율(%) = (입력 소득 / 해당 가구원 수 중위소득) × 100

2. 건강보험료 기준 확인

소득을 정확히 모르는 경우를 위해 건강보험료 기준으로도 확인할 수 있는 기능을 추가했습니다. 건강보험료 납부액을 입력하면 대략적인 중위소득 비율 구간을 알려줍니다.

3. 복지 급여 자격 안내

계산 결과에 따라 어떤 복지 급여를 받을 수 있는지 간단한 안내를 표시합니다. 예를 들어 중위소득 47% 이하면 생계급여, 50% 이하면 의료급여 대상이 될 수 있음을 알려줍니다.

개발 중 고민했던 점

사용자 경험

계산기의 핵심은 단순함입니다. 처음에는 다양한 옵션을 넣으려 했지만, 결국 "가구원 수 선택 → 소득 입력 → 결과 확인" 3단계로 줄였습니다. 불필요한 입력 필드를 없애고, 숫자를 입력하는 즉시 결과가 갱신되도록 했습니다.

데이터 정확성

정부 고시 데이터를 직접 확인하고 입력했습니다. 중위소득 금액이 잘못되면 사용자에게 큰 혼란을 줄 수 있으므로, 보건복지부 공식 고시 문서와 대조하여 검증했습니다.

모바일 최적화

복지 관련 정보를 찾는 사용자 중 상당수가 모바일을 이용할 것으로 예상했습니다. 숫자 입력 시 모바일 키패드가 자동으로 뜨도록 inputMode="numeric" 속성을 적용하고, 터치 영역을 충분히 확보했습니다.

배포와 결과

Vercel에 배포하여 median-income.airo.io.kr 서브도메인으로 서비스하고 있습니다. GitHub 저장소에 push하면 자동으로 빌드와 배포가 진행되므로, 데이터 업데이트도 간편합니다.

실제로 주변 지인들에게 공유했을 때 "이런 게 있으면 편하다"는 반응을 받았고, 특히 복지 급여 신청을 고민하는 분들에게 유용하다는 피드백이 있었습니다.

배운 점

  • 작은 문제를 해결하는 도구도 가치가 있다: 거창한 서비스가 아니더라도, 특정 상황에서 불편함을 해소해주는 도구는 그 자체로 의미가 있습니다.
  • AI 도구의 생산성: Cursor AI를 활용하여 초기 구조 설계부터 코드 작성까지 빠르게 진행할 수 있었습니다. 특히 반복적인 데이터 테이블 작성에서 큰 도움을 받았습니다.
  • SSG의 장점: 계산 로직이 클라이언트에서 실행되므로 서버 비용이 없고, 정적 페이지로 빌드되어 로딩이 빠릅니다.

다음에는 연도별 중위소득 변화 추이를 시각화하는 기능을 추가해볼 계획입니다.