Show GN: Gemini와 함께 만든 간단한 베이커스 퍼센트 계산기

안녕하세요. 간단한 베이커스 퍼센트 계산기 웹 앱을 만들어서 소개해 드립니다.

Gemini를 사용해서 대부분의 코드를 작성해 본 건 처음이었는데요, 생각보다 너무 만족스러웠습니다. 코드 캔버스를 사용해서 웹 페이지 프리뷰를 바로바로 보여 주는 것도 아주 좋았고요, 무엇보다 두 세 번의 프롬프트 입력으로 버그가 거의 없는 프로그램을 작성할 수 있다는 점에서 놀랐습니다. 평소 같았으면 하루 이상 걸릴 완성도와 디자인의 웹 앱을 한 두 시간 만에 만들 수 있었어요.
저는 직접 코드를 작성하고 AI는 테스트 케이스 생성에만 사용하는 편이었는데 이 정도 생산성이라면 더 많은 부분에서 AI를 사용해 볼 만 하다는 생각이 들었습니다.

베이커스 퍼센트는 제빵이나 제과를 할 때 재료 양을 계산하는 방법인데요, 밀가루의 무게를 기준으로 해서 다른 재료들의 비율을 계산합니다.

다른 계산기들과 차별화된 기능은 마크다운으로 내보내는 기능과 비율 고정 기능입니다.

마크다운으로 내보내기는 말 그대로 입력한 레시피를 마크다운 표와 링크로 만들어 주는 기능입니다. Obsidian을 사용해서 레시피 정리를 하고 있는데 손으로 일일이 표를 작성하려니 너무 힘들더라고요.

비율 고정 기능은 다른 재료들의 비율을 고정한 채로 한 재료의 중량을 조절하는 기능입니다.
예를 들어 레시피에 버터가 100g 들어가는데 80g만 넣고 싶은 경우 비율 고정 기능을 켜고 버터 중량을 수정하면 다른 재료들의 중량이 비율에 맞게 다시 계산됩니다.
취미로 제과제빵을 하다 보면 재료가 부족한 경우가 많은 데 그럴 때 유용한 기능입니다.

예시 레시피를 하나 올려드립니다.
https://blog.naver.com/ssieie/222113371863 이 블로그를 참고했습니다.

(표는 렌더링이 안 되는 것 같아 지웠습니다.)

🍞 이 레시피를 계산기에서 열기

마지막으로 주요 기능입니다.

• 베이커스 퍼센트 자동 계산
  • 재료 무게를 입력하면 자동으로 베이커스 퍼센트가 계산됩니다.
  • 가루 재료를 여러 개 추가할 수 있습니다.
• 총 중량 자동 계산
• 비율 고정 기능
  • 재료 비율을 고정한 상태에서 각 재료의 무게를 변경할 수 있습니다.
• 마크다운으로 내보내기
• 링크 공유 기능
• 스프레드시트와 유사한 단축키 (Tab, Enter, 방향키)

감사합니다. 즐거운 개발, 즐거운 베이킹 되세요!