[토이프로젝트]Next.js를 이용해 대출이자계산기 만들어보기 - 1편 : 서비스 기획과 웹 프로젝트 생성

스터디 모임에서 Next.js를 공부하고 몇가지 프로젝트를 진행했습니다. 이번에는 개인 프로젝트를 통해 간단한 웹 서비스를 만들어 모바일 어플리케이션까지 만들어 보고자 합니다. Next.js, Flutter를 한번이라도 접해보신 분들은 어렵지 않게 따라하실 수 있습니다.

 

포스팅은 총 5개의 챕터로 이루어져 있습니다.

1. 서비스 기획과 웹 프로젝트 생성
   • 1-1. 서비스 기획
   • 1-2. Next.js 프로젝트 생성
2. Next.js로 웹 서비스 개발하기
   • 2-1. 입력 컴포넌트 만들기
   • 2-2. 버튼 컴포넌트 만들기
   • 2-3. 스타일 적용하기
   • 2-4. 계산 기능 구현하기
   • 2-5. 계산 결과 공유하기(with 카카오톡 공유하기)
3. 웹 배포하기
   • 3-1. 가비아로 도메인 구입하기
   • 3-2. GitHub 레포지토리를 Vercel로 배포하기
4. Flutter로 모바일 서비스 개발하기
   
   • 4-1. Flutter 프로젝트 생성
   • 4-2. 웹뷰를 활용해 웹과 모바일 연결하기
   • 4-3. 자바스크립트 채널 사용해보기
5. 플레이스토어와 앱스토어에 어플리케이션 배포하기
   • 5-1. 앱 아이콘 준비하기
   • 5-2. 스토어 이미지 준비하기
   • 5-3. 플레이스토어/앱스토어에 배포하기

대출이자계산기를 만들어 웹에 배포하고, 웹뷰를 이용해 모바일 배포까지의 과정을 기록해보려고 합니다. 진행 과정을 최대한 자세하게 풀어가보려 하니 한단계씩 따라해보면서 함께 서비스를 완성해보시면 좋을 것 같습니다.

 

개발 환경은 Windows와 MacOS를 함께 사용했습니다.

웹 개발까지는 Windows를 사용하고, 모바일 개발부터 MacOS를 사용하게 됩니다.(모바일 앱 배포시에는 iOS 때문에 꼭 MacOS가 필요합니다)

• vscode
• Next.js 14
• Flutter 3.10.5

---

1-1. 서비스 기획

대출이자계산기를 기획하게된 계기는 작년에 당첨된 아파트 청약이었습니다. 구글에 검색하면 이미 많은 계산기를  찾을 수 있었고, 대출금에 대한 이자, 원금이 얼마인지 계산할 때 자주 이용했습니다.

계산식만 안다면 계산기정도는 만들 수 있을 것 같았습니다. 그리고 모바일 어플리케이션으로 배포해서 필요할 때마다 꺼내보면 되겠다 싶었습니다.

 

개발에 들어가기 앞서 대출 상환 방식과 계산식을 먼저 조사했습니다. 이 글의 목적은 서비스 개발이기 때문에 대출 상환 방식의 특징과 계산식만 간단하게 알아보겠습니다. 

구글에 검색되는 많은 계산기들

 

대출 상환 방식

대출 상황 방식에는 크게 4가지가 있습니다. 원리금 균등 분할 상환, 원금 균등 분할 상환, 만기일시 상환, 체증식 분할 상환입니다. (거치 기간을 설정해 거치 기간 동안은 이자만 내고 거치 기간 이후에는 원리금 균등/원금 균등으로 상환할 수도 있지만 여기서 거치 기간은 다루지 않겠습니다)

 

각 상환 방식의 특징은 다음과 같습니다.

• 원리금 균등 분할 상환 방식 : 원금과 이자를 함께 갚는 방식, 원금 균등 방식에 비해 상환하는 이자가 많다.
• 원금 균등 분할 상환 방식 : 원금과 이자를 함께 갚는 방식, 원리금 균등 방식보다 상환하는 이자가 적다.
• 만기일시 상환 방식 : 원금을 만기 때 한번에 갚고 이자만 내는 방식
• 체증식 분할 상환 방식 : 대출 초기 이자를 중심으로 상환하고 이후에 점차 원금을 중심으로 상환하는 방식

 

대출 이자 계산식

모든 계산식을 수식으로 표현하면 아래와 같습니다. 수식 검증은 실제 개발을 통해 확인해보겠습니다.

*체증식 상환 방식의 계산식은 정보가 부족하여 후에 업데이트하도록 하겠습니다.

 

원리금 균등 분할 상환 방식

M = P * r * (1 + r)^n / ((1 + r)^n - 1)

• M : 매월 상환하는 금액
• P : 대출 원금
• r :  대출 연이율의 월 이자율
• n : 대출 기간(월 단위)

 

원금 균등 분할 상환 방식

원금 균등 분할 계산시 매월 이자는 이전 달에 상환한 원금은 뺀 금액으로 계산하게 됩니다.

M = P / n + (P * r)

• M : 매월 상환하는 금액
• P : 대출 원금
• r :  대출 연이율의 월 이자율
• n : 대출 기간(월 단위)

 

만기일시 상환 방식

M = P * r

• M : 매월 상환하는 금액
• P : 대출 원금
• r :  대출 연이율의 월 이자율

 

화면 스케치

계산식에 필요한 데이터를 정리하면 상환 방식, 대출 원금, 대출 기간, 연이율이 됩니다.

총 4개의 입력 폼이 포함된 화면을 그려보고 이를 기반으로 개발에 들어가면 될 것 같습니다.

계산 후에는 팝업을 띄워서 결과를 보여줄 계획입니다. 여기에 카카오톡 공유하기나 링크 복사 후 공유하기 같은 기능도 넣을 수 있을것 같습니다.

 

 

1-2. Next.js 프로젝트 생성

프로젝트를 생성해보겠습니다.

vscode를 실행하고 터미널을 실행합니다.(Ctrl + Shfit + `)

C드라이브로 이동하고 git-repo라는 폴더를 생성합니다. 

cd C:\
mkdir git-repo

 

이 곳에 프로젝트를 만들어보겠습니다. npx 명령어와 함께 next.js 프로젝트를 생성합니다. 프로젝트명은 my_calculator로 하겠습니다. 타입스크립트를 사용하기 때문에 --ts 명령어도 추가해줍니다. 이후에 나오는 질문들은 기본값으로 체크하고 넘어갑니다.

npx create-next-app@latest --ts my_calculator

 

GitHub에 레포지토리를 생성합니다.

 

생성된 프로젝트 경로로 이동합니다.

cd git-repo/my_calculator

 

그리고 위에 표시된 부분을 복사해 그대로 붙여넣습니다.

git remote add origin https://github.com/eeesnghyun/myCalculator.git
git branch -M main
git push -u origin main

 

 

다음 편에서 본격적으로 개발을 시작해보겠습니다.

 

참고자료

대출 상환 방법 - 원리금 균등분할 상환