n분의 1로~ 편하게 계산하기

https://sc303030.github.io/settlement_calculator/

정산 계산기 - 간편한 비용 정산

 

 

구글에서 Stitch도 발표했겠다, 내가 원하는 ui 형식을 코드로 뽑아낼 수 있다하니 해보지 않을수 없지 않은가!

또한 Cursor도 사용해보는 김에 개발하기로 하였다.

 

최근에 n분의 1로 정산하는 경우가 왕왕있었는데 어떻게 하면 쉽게 정산할 수 있을까 생각하였다. 술을 마시지 않은 사람들, 1차 2차 나눠서 계산해야 하는 경우가 있었기에 고민하게 되었다.

 

비용 정산기의 구조는 다음과 같다.

1. 수기 입력

2. 영수증 인식

 

이렇게 2가지를 이용하여 1인당 정산 금액을 계산하여 이미지로 저장하게 된다.

그럼 Stitch를 어떻게 사용했는지부터 알아보자.

 

Stitch

1. 먼저 내가 구상한 ui를 그려서 그려달라고 하기

2. 리턴 결과에 따라 피드백 하기

3. 디자인 수정해달라고 하기

- 이렇게 몇 가지 단계를 통하여 디자은을 완성하였고, 오른쪽에서 Code를 클릭하여 코드를 복사한 다음 Cursor에게 react에 맞춰서 만들어 달라고 말하러 가자.

 

Cursor

1. 내가 복사한 code를 기반으로 react에 맞춰서 만들어 달라고 하기

- 그럼 이런 식으로 알아서 파일을 만들어 준다.

 

2. 그 다음에 원하는 기능들을 붙이기

2-1. 영수증 인식은 TODO로

2-2. 이미지 저장 시 어떤 구조로 저장할 지 말해주기 등등

3. 깃허브를 사용하여 배포하기

4. 구글과 네이버 seo 추가하기

 

이렇게 간단하게 따라하니 몇 시간만에 원하는 툴을 만들 수 있었다.

이제 영수증을 인식하여 자동으로 계산해주는 기능을 추가하도록 하자.