[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 4회 - 더치페이 계산기: 화면이 아닌 동작 규칙(입력·처리·출력) 설명법, 손계산 비교 검증, 카톡 정산 결과 복사 버튼 만들기

[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 4회 - 더치페이 계산기: 화면이 아닌 동작 규칙(입력·처리·출력) 설명법, 손계산 비교 검증, 카톡 정산 결과 복사 버튼 만들기

지난 1회부터 3회까지 우리는 자기소개 페이지와 모바일 초대장을 만들었습니다. 두 작품 모두 내가 미리 적어둔 글자와 날짜를 화면에 예쁘게 보여주는 '전시형 웹페이지'였습니다.

오늘 4회: 더치페이 계산기부터는 차원이 한 단계 올라갑니다. 단순히 글자를 보여주는 종이 전단지가 아니라, 사용자가 화면에 숫자를 넣으면 알아서 계산해 결과를 뱉어내는 진짜 '생활 밀착형 도구(웹 앱)'를 만들어 볼 차례입니다.

모임 총무를 맡았을 때 가장 골치 아픈 순간이 언제인가요? 6명이 모여서 고기도 먹고 술도 마셨는데, "차 가져온 2명은 술을 한 모금도 안 마셨으니 술값은 빼고 안주 값만 나누자!"라고 할 때입니다. 카카오톡 기본 정산 기능으로는 안주 값과 술값을 따로 나눠 계산하기가 번거로워 결국 휴대폰 계산기를 두드리다 헷갈리기 일쑤입니다.

오늘은 이 문제를 단숨에 해결하는 술값 따로 나누는 1인당 금액 계산기를 만들면서, 화면이 아닌 동작 규칙(입력·처리·출력) 설명법, AI가 짠 계산식이 맞는지 직접 확인하는 손계산 비교 검증, 그리고 단톡방에 바로 붙여 넣을 수 있는 카톡 정산 결과 복사 버튼 만들기까지 45분 만에 완성해 보겠습니다.

1. 더치페이 계산기: 오늘 만들 결과물과 45분 실습 준비

오늘 우리가 만들 계산기는 단순 나눗셈기가 아닙니다. 음주자와 비음주자의 1인당 정산 금액을 공정하게 분리해 주고, 10원·1원 단위 자투리 잔돈까지 깔끔하게 정리해 주는 총무 전용 스마트 정산기입니다.

(1) 오늘의 실습 요약표

항목	상세 내용
오늘 만들 결과물	안주(식사) 비용과 술값을 분리해 음주자·비음주자 1인당 금액을 각각 계산하고, 카카오톡 정산 문구로 복사해 주는 스마트 더치페이 계산기
소요 시간	약 45분
이번 회차 세팅	추가 설치 및 가입 없음 (Claude(claude.ai)에서 새 대화를 열어 시작)
핵심 실습 3단계	① 화면 디자인이 아니라 '입력 $\rightarrow$ 처리 $\rightarrow$ 출력' 동작 규칙으로 요청하기 $\rightarrow$ ② 쉬운 숫자를 넣어 손계산과 비교 검증하기 $\rightarrow$ ③ 100원 단위 자투리 정리와 카톡 복사 버튼 추가하기
오늘 깨우칠 핵심 원리	"모든 프로그램의 뼈대는 '입력(Input) $\rightarrow$ 처리(Process) $\rightarrow$ 출력(Output)' 3단계로 이루어진다"

(2) 왜 계산기를 만들 때는 요청하는 방법이 달라져야 할까요?

1~3회에서는 "배경은 크림색으로 해줘", *"카드를 가로로 3개 놓아줘"*처럼 '화면에 어떻게 보일지(디자인)'를 중심으로 설명했습니다.

하지만 계산기 같은 도구를 만들 때 디자인만 설명하고 "술값 따로 계산하는 더치페이 계산기 만들어줘"라고 뭉뚱그려 말하면, 클로드가 마음대로 이상한 계산 공식을 만들어 넣을 위험이 있습니다. 계산기가 예쁘기만 하고 정작 돈 계산이 틀리면 아무 소용이 없겠죠? 그래서 오늘부터는 화면 모양보다 '어떤 숫자를 받아서, 어떤 공식으로 계산해, 무엇을 보여줄지(동작 규칙)'를 먼저 적어주는 법을 배웁니다.

2. 화면이 아닌 동작 규칙(입력·처리·출력) 설명법: 술값 따로 나누는 계산기 첫 요청 보내기

세상에 존재하는 모든 앱(배달 앱, 은행 앱, 게임)은 겉모습이 아무리 복잡해 보여도 속을 들여다보면 딱 3단계(입력 $\rightarrow$ 처리 $\rightarrow$ 출력)로 돌아갑니다. 클로드에게 도구를 만들어 달라고 할 때도 이 3단계에 맞춰서 메모하듯 적어주면, 클로드가 단 한 번의 오차도 없이 정확한 프로그램을 짜줍니다.

Step 1. 더치페이 계산기의 '입력 $\rightarrow$ 처리 $\rightarrow$ 출력' 3단계 쪼개 보기

프롬프트를 쓰기 전에 우리가 만들 계산기의 규칙을 3단계로 먼저 정리해 볼까요?

1. 입력(Input - 사용자가 빈칸에 넣을 숫자 4개):
   • ① 식사·안주 총금액 (모두가 같이 먹은 금액)
   • ② 술 총금액 (술 마신 사람만 먹은 금액)
   • ③ 술 마신 사람 수 (음주자 인원)
   • ④ 술 안 마신 사람 수 (비음주자 인원)
2. 처리(Process - 클로드가 속으로 계산할 공식):
   • 전체 인원 = 술 마신 사람 수 + 술 안 마신 사람 수
   • 비음주자 1인당 낼 돈 = 식사·안주 총금액 ÷ 전체 인원
   • 음주자 1인당 낼 돈 = (식사·안주 총금액 ÷ 전체 인원) + (술 총금액 ÷ 술 마신 사람 수)
3. 출력(Output - 화면에 보여줄 결과):
   • 비음주자 1인당 금액 (원)
   • 음주자 1인당 금액 (원)
   • 전체 모임 총액과 계산식 한 줄 요약

이렇게 한글로 정리해 놓고 보니 중학교 1학년 산수보다 쉽습니다! 이 내용을 그대로 클로드에게 전달해 보겠습니다.

Step 2. 복사해서 바로 쓰는 더치페이 계산기 첫 요청 프롬프트

Claude(claude.ai)에서 [+ 새 채팅]을 눌러 새 대화창을 열고, 아래 프롬프트를 그대로 복사해 붙여 넣으세요.

[복사해서 붙여 넣을 프롬프트 1 - 더치페이 계산기 기본 제작]

모임에서 술을 마신 사람과 안 마신 사람의 회비를 공정하게 따로 나눠주는 '스마트 더치페이 계산기' 웹 앱을 단일 HTML 파일로 만들어서 오른쪽 미리보기에 띄워줘. 스마트폰과 PC 모두에서 쓰기 편하게 화면 가운데 카드 형태(최대 폭 450px)로 디자인해 줘.

[1. 입력(사용자가 입력할 항목 4가지)]

• 식사·안주 총금액 (원): 숫자 입력칸 (예: 120000)
• 술(주류) 총금액 (원): 숫자 입력칸 (예: 40000)
• 술 마신 사람 수 (명): 숫자 입력칸 또는 - / + 버튼으로 조절
• 술 안 마신 사람 수 (명): 숫자 입력칸 또는 - / + 버튼으로 조절

[2. 처리(계산 동작 규칙)]

• 전체 참석 인원 = 술 마신 사람 수 + 술 안 마신 사람 수
• 술 안 마신 사람(비음주자) 1인당 금액 = 식사·안주 총금액 ÷ 전체 참석 인원
• 술 마신 사람(음주자) 1인당 금액 = (식사·안주 총금액 ÷ 전체 참석 인원) + (술 총금액 ÷ 술 마신 사람 수)
• 주의할 예외 규칙:
  1. 만약 전체 인원이 0명이면 0으로 나누기 에러가 나지 않게 "참석 인원을 1명 이상 입력해 주세요"라고 안내해 줘.
  2. 만약 술 마신 사람이 0명인데 술 총금액에 숫자가 들어있으면, "술 마신 인원이 0명입니다. 인원을 확인해 주세요"라고 알려줘.

[3. 출력(화면에 보여줄 결과 카드)]

• 숫자를 입력하거나 바꿀 때마다 아래 결과 카드가 실시간으로 계산되어 바뀌게 해줘.
• 🥤 술 안 마신 분 (1인당): 금액을 크고 굵게 표시 (밑에 작은 글씨로 안주값 N원 계산 근거 표시)
• 🍺 술 마신 분 (1인당): 금액을 크고 굵게 표시 (밑에 작은 글씨로 안주값 N원 + 술값 N원 계산 근거 표시)
• 영수증 모양의 깔끔한 화이트 & 민트 그린 포인트 디자인으로 만들어줘.

3. 손계산 비교 검증: AI가 만든 계산기를 그대로 믿으면 안 되는 이유와 검산 실습

오른쪽 미리보기(아티팩트) 창에 깔끔한 더치페이 계산기가 나타났나요?

여기서 비전공자분들이 꼭 명심해야 할 바이브 코딩의 철칙이 있습니다. "AI가 만든 계산기는 겉모습이 아무리 그럴듯해도, 내가 직접 암산할 수 있는 쉬운 숫자를 넣어 최소 2~3번 손계산과 맞는지 검증해야 한다!"는 것입니다.

지금 바로 오른쪽 미리보기 창에 아래 숫자를 직접 입력하면서 정답과 똑같이 나오는지 테스트해 보세요.

테스트 1. 딱 떨어지는 쉬운 숫자 넣어보기 (정상 동작 확인)

우리가 암산으로 3초 만에 계산할 수 있는 숫자를 넣어봅니다.

• 입력해 볼 값:
  • 식사·안주 총금액: 100,000 (10만 원)
  • 술 총금액: 40,000 (4만 원)
  • 술 마신 사람 수: 2명
  • 술 안 마신 사람 수: 2명
• 우리의 손계산 정답:
  • 전체 4명이 안주 10만 원을 나누니 기본 안주 값은 1인당 25,000원.
  • 술 4만 원은 술 마신 2명이 나누니 1인당 술값은 20,000원.
  • 따라서 🥤 술 안 마신 분 = 25,000원, 🍺 술 마신 분 = 45,000원이 나와야 정답입니다!
• 화면 확인: 여러분의 미리보기 화면에도 정확히 25,000원과 45,000원이 떴나요? 밑에 작은 글씨로 (안주 25,000원 + 술 20,000원)까지 친절하게 표시되었다면 1단계 합격입니다!

테스트 2. 골치 아픈 경계 상황 넣어보기 (0명 & 나누어떨어지지 않는 숫자)

이번에는 계산기가 당황할 만한 숫자를 일부러 넣어봅니다.

1. 인원을 둘 다 0명으로 줄여보기: 화면에 이상한 영어(NaN 또는 Infinity)가 뜨지 않고, 우리가 시킨 대로 *"참석 인원을 1명 이상 입력해 주세요"*라는 친절한 한글 안내가 나오는지 확인합니다.
2. 딱 나누어떨어지지 않는 숫자 넣어보기:
   • 식사·안주 총금액에 100,000, 술 마신 사람 3명, 술 안 마신 사람 0명을 넣어보세요.
   • 10만 원을 3명으로 나누면 33,333.333...원이 됩니다.
   • 실제 모임에서 친구에게 *"야, 너 33,333.33원 보내!"*라고 할 수는 없겠죠? 보통 한국 모임에서는 100원 단위 아래 자투리(333원)는 버려서 33,000원씩 걷고 부족한 1,000원은 총무가 내거나, 반대로 100원 단위로 올림해서 걷는 규칙을 씁니다.

이 불편한 점을 발견했다면, 이제 2회에서 배운 부분 수정 공식으로 계산기를 업그레이드할 차례입니다!

4. 카톡 정산 결과 복사 버튼 만들기: 자투리 잔돈 정리와 정산 안내문 원클릭 복사 추가

실제 단톡방에서 총무가 정산할 때 가장 필요한 두 가지 기능을 한 번에 추가해 보겠습니다.

1. 100원 단위 자투리 금액 정리 옵션 (1원·10원 단위 잔돈 없애기 + 차액 안내)
2. 카카오톡 단톡방에 그대로 붙여 넣을 수 있는 [정산 내역 복사하기] 버튼 (연습용 계좌번호 입력칸 포함)

Step 1. 복사해서 바로 쓰는 업그레이드 프롬프트

방금 계산기를 만든 그 대화창에 이어서 아래 프롬프트를 붙여 넣으세요.

주의 (개인정보 보호): 계좌번호 입력칸은 화면에서 내가 직접 타이핑할 수 있는 빈칸으로 만들되, 기본 예시 문구에는 실제 내 은행 계좌번호 대신 ○○은행 123-456-7890 (예금주: 김총무) 같은 연습용 번호만 들어가도록 요청합니다.

[복사해서 붙여 넣을 프롬프트 2 - 자투리 정산 및 카톡 복사 버튼 추가]

지금 만든 계산기의 디자인과 기본 계산 공식은 그대로 유지해 줘. 실제 모임 총무가 쓰기 편하도록 아래 두 가지 기능을 아래쪽에 추가해 줘.

[추가 기능 1: 잔돈(자투리 금액) 처리 스위치]

• 결과 카드 바로 위에 선택 옵션을 만들어줘:
  1. 1원 단위까지 정확히 계산
  2. 100원 단위 아래 버림 (깔끔한 정산)
• 만약 100원 단위 아래 버림을 선택하면, 1인당 금액에서 100원 미만 잔돈(예: 333원)을 떼고 33,000원처럼 딱 떨어지게 보여줘.
• 그리고 버림으로 인해 원래 총액보다 부족해진 자투리 차액이 총 얼마인지 계산해서, 밑에 작은 배지로 "💡 자투리 차액 총 OOO원은 총무님이 부담하거나 별도 정산해요!"라고 친절하게 알려줘.

[추가 기능 2: 계좌번호 입력칸 & 카톡 정산 문구 복사 버튼]

• 결과 카드 아래에 총무가 입금받을 계좌를 적는 텍스트 입력칸(기본 안내 문구: 예: 카카오뱅크 3333-00-0000000 김바이브)을 하나 만들어줘.
• 맨 아래에 큼직한 [📋 카톡 단톡방용 정산 문구 복사하기] 버튼을 만들어줘.
• 이 버튼을 누르면 클립보드에 아래와 같은 깔끔한 정산 안내문이 복사되고, 버튼 글씨가 2초 동안 "✅ 복사 완료! 카톡방에 붙여넣으세요"로 바뀌게 해줘.

(복사될 문구 양식 예시) [오늘 모임 정산 안내 🧾] • 전체 총액: OOO,OOO원 (식사 OOO,OOO원 + 주류 OO,OOO원) • 🥤 술 안 마신 분(O명): 1인당 OO,OOO원 • 🍺 술 마신 분(O명): 1인당 OO,OOO원 • 💰 입금 계좌: (입력한 계좌번호 표시)

Step 2. 자투리 정리와 카톡 복사 직접 테스트해 보기

미리보기 화면이 업데이트되었다면 직접 총무가 된 것처럼 눌러보세요!

1. 식사 금액 100,000원, 술 금액 50,000원, 술 마신 사람 3명, 안 마신 사람 1명을 넣습니다.
2. [100원 단위 아래 버림] 옵션을 클릭합니다.
   • 원래라면 술 마신 사람은 25,000 + 16,666 = 41,666원을 내야 하지만, 100원 아래를 버려 41,600원으로 깔끔하게 바뀌고, 아래에 "💡 자투리 차액 총 200원은 총무님이 부담하거나 별도 정산해요!"라고 정확히 뜨는지 확인합니다!
3. 계좌번호 칸에 연습용 계좌를 적고 [📋 카톡 단톡방용 정산 문구 복사하기] 버튼을 클릭한 뒤, 아무 메모장이나 채팅창에 Ctrl + V(붙여넣기)를 해보세요. 총무가 일일이 손으로 칠 필요 없는 완벽한 정산 영수증 문구가 1초 만에 붙여 넣어집니다!

완성된 계산기는 아티팩트 창의 [다운로드] 버튼을 눌러 dutch_calculator.html로 저장해 두세요. 스마트폰에 넣어두거나 링크로 북마크해 두면 다음 모임 때 바로 꺼내 쓸 수 있는 평생 소장용 도구가 됩니다. (그리고 이 파일은 나중에 고급편 19회: 테스트로 안전망 만들기에서 다시 한번 멋지게 활약할 예정이니 잘 보관해 두세요!)

5. 4회 핵심 원리 정리 및 다음 회차 예고: 세상의 모든 앱은 '입력 → 처리 → 출력'으로 돌아간다

오늘 여러분은 단순한 안내 페이지를 넘어, 실제로 계산하고 동작하는 첫 번째 웹 애플리케이션(앱)을 완성하셨습니다.

(1) 오늘 배운 것 3줄 요약

1. 입력 $\rightarrow$ 처리 $\rightarrow$ 출력: 계산기나 도구형 앱을 만들 때는 화면 색깔보다 ① 무엇을 입력받고(Input), ② 어떤 공식으로 계산해서(Process), ③ 무엇을 보여줄지(Output) 동작 규칙을 먼저 적어주어야 AI가 헷갈리지 않습니다.
2. 예외 상황(0명, 잔돈) 챙기기: 인원이 0명일 때 에러 대신 안내 문구를 띄우거나, 딱 나누어떨어지지 않는 잔돈을 어떻게 처리할지 미리 말해주면 훨씬 완성도 높은 앱이 됩니다.
3. 손계산 검산 습관: AI가 짠 계산식이 맞는지 반드시 내가 암산할 수 있는 쉬운 숫자(예: 10만 원 ÷ 4명)를 넣어 직접 확인(검증)해야 합니다.

(2) 4회 완료 셀프 체크리스트

오늘 실습을 모두 마쳤는지 체크해 보세요.

• [x] '입력 $\rightarrow$ 처리 $\rightarrow$ 출력' 구조로 프롬프트를 넣어 술값 분리형 더치페이 계산기를 만들었다.
• [x] 암산하기 쉬운 숫자와 0명을 직접 넣어보며 계산 결과가 손계산과 일치하는지 검증했다.
• [x] 100원 단위 잔돈 정리 옵션과 카카오톡 정산 문구 복사 버튼을 추가해 실제로 붙여넣기 테스트를 해봤다.

(3) 다음 5회 예고: 엑셀 파일을 넣고 정리·차트 만들기

4회에서는 우리가 화면에 숫자 4개를 손으로 직접 타이핑해서 넣었습니다. 그런데 만약 계산해야 할 숫자가 4개가 아니라 100줄짜리 가계부 내역이나 카드 결제 엑셀 파일이라면 어떨까요? 일일이 손으로 치다가는 날이 새고 말 것입니다.

다행히 클로드 채팅창에는 엑셀(.xlsx)이나 CSV 파일을 통째로 집어넣는 기능이 있습니다. 다음 5회 [엑셀 파일을 넣고 정리·차트 만들기]에서는 날짜 형식도 제각각이고 카테고리도 뒤죽박죽인 지저분한 가계부 파일을 클로드에게 던져주고, 문제점을 먼저 진단하게 한 뒤 깔끔한 표와 한눈에 들어오는 월별 지출 차트로 변신시키는 대조 검증 노하우를 배워보겠습니다!