클로드 코드로 용돈 기입장 만들기

클로드 코드 왕초보 시리즈의 열한 번째 글이자, 따라 만들기 네 번째 순서입니다. 앞 편에서는 숫자 맞히기 게임을 만들며 상황에 따라 대답이 달라지는 화면을 다뤘습니다. 이번에는 숫자를 더하고 빼서 결과를 보여 주는 프로그램입니다. 손주 용돈, 동호회 회비, 장바구니 지출처럼 실제로 쓸 데가 많습니다.

계산기를 두드려 적어 두는 것과 무엇이 다른가 하면, 한 줄을 지우거나 새로 넣을 때마다 합계를 알아서 다시 계산한다는 점입니다. 이번에도 코드는 한 글자도 쓰지 않습니다.

오늘 만들 것 — 화면 생김새

맨 위에 "남은 돈"이 큰 글씨로 나오고, 그 아래에 들어온 돈 합계와 나간 돈 합계가 나란히 붙습니다. 그 밑에는 날짜 칸, 내용 칸, 금액 칸이 있고, "들어온 돈"과 "나간 돈" 중 하나를 고르는 단추 두 개, 그리고 "기록" 단추가 있습니다.

기록을 누르면 아래 목록 맨 위에 새 줄이 붙습니다. 들어온 돈은 파란색에 플러스 기호가, 나간 돈은 빨간색에 마이너스 기호가 붙고, 금액은 세 자리마다 쉼표가 찍혀 읽기 쉽게 나옵니다. 줄마다 "지움" 단추가 있어서, 누르면 그 줄이 빠지면서 위쪽 합계가 즉시 다시 계산됩니다. 날짜 칸에는 오늘 날짜가 미리 들어가 있어 그냥 두면 됩니다.

적은 내용은 창을 닫았다 열어도 남습니다. 다만 그 컴퓨터의 그 브라우저 안에만 남습니다. 파일을 남에게 보내면 빈 기입장만 갑니다.

준비 — 폴더에서 클로드를 부릅니다

1. 연습 폴더를 엽니다. 앞 편에서 만든 폴더를 그대로 쓰면 됩니다.
2. 윈도우는 폴더 위쪽 주소 칸에 powershell이라고 쓰고 Enter, 맥은 터미널에서 cd 뒤에 폴더를 끌어다 놓고 Enter를 누릅니다.
3. 창이 열리면 아래를 칩니다.

claude

이 여덟 줄을 그대로 붙여넣습니다

아래 내용을 통째로 복사해 붙여넣고 Enter를 누릅니다. 줄이 하나 늘어난 이유가 있습니다. 처음 만들어 봤을 때 "들어온 돈"과 "나간 돈" 중 어느 쪽이 골라져 있는지 화면으로 알 수가 없었습니다. 그래서 고른 쪽이 눈에 띄게 해 달라는 부탁을 아예 넣어 두었습니다.

용돈 기입장을 웹페이지로 만들어 줘.
맨 위에 "남은 돈"을 큰 글씨로, 그 아래에 "들어온 돈"과 "나간 돈" 합계를 나란히 보여 줘.
그 아래에 날짜·내용·금액 입력칸과 "들어온 돈 / 나간 돈"을 고르는 단추 두 개, "기록" 버튼을 놓아 줘. 지금 고른 단추는 색이 진하게 보이게 해 줘.
기록을 누르면 아래 목록 맨 위에 새 줄이 생기고, 들어온 돈은 파란색 +, 나간 돈은 빨간색 -로 보여 줘. 금액은 50,000 처럼 세 자리마다 쉼표를 찍어 줘.
내용이나 금액이 비어 있으면 빨간 글씨로 "내용과 금액을 넣어 주세요"라고 알려 줘.
줄마다 "지움" 버튼을 넣고, 누르면 그 줄만 빼고 합계를 다시 계산해 줘.
적은 내용은 이 브라우저에 저장해서 새로고침해도 남게 하고, 날짜 칸에는 오늘 날짜가 미리 들어가 있게 해 줘.
allowance.html 파일 하나로만 만들고, 만들기 전에 무엇을 할지 먼저 알려 줘.

클로드가 먼저 계획을 말합니다. 읽고 좋아, 그렇게 만들어 줘라고 답하면 됩니다. 요금제에 따라 파일을 만들기 전에 한 번 더 묻기도 합니다. 물어보면 화살표 키로 고르고 Enter를 누릅니다. 지금 내가 어느 쪽인지는 입력창에 /status를 쳐 보면 알 수 있습니다.

열어서 확인하고, 말로 고쳐 봅니다

폴더에 allowance.html이 생기면 더블클릭해서 엽니다. 다음 순서로 시험해 보시기 바랍니다.

1. 내용에 "용돈", 금액에 숫자를 넣고 "들어온 돈"을 고른 뒤 기록을 누릅니다. 위쪽 남은 돈이 그만큼 늘어야 합니다.
2. 내용에 "떡볶이", 금액에 숫자를 넣고 "나간 돈"으로 기록합니다. 남은 돈이 그만큼 줄어야 합니다.
3. 아무것도 안 넣고 기록을 눌러 봅니다. 빨간 글씨로 안내가 떠야 합니다.
4. F5로 새로고침해서 적은 줄이 그대로 남아 있는지 봅니다.
5. "지움"을 눌러 한 줄을 빼고, 위쪽 합계가 같이 줄어드는지 확인합니다.

다 되면 취향대로 고쳐 봅니다. 한 번에 하나씩 부탁하는 것이 요령입니다.

내용 칸 옆에 간식·교통·저금 같은 분류를 고를 수 있게 해 줘.

이번 달에 나간 돈만 따로 합쳐서 맨 위에 보여 줘.

글씨와 단추를 지금보다 크게 해서 멀리서도 보이게 해 줘.

잘 안 될 때

• 어느 쪽을 골랐는지 화면에 안 보입니다. 실제로 처음 만들었을 때 이랬습니다. 지금 고른 쪽 단추만 색이 진하게 바뀌게 해 줘.라고 말하면 바로 고쳐 줍니다.
• 지움을 눌렀는데 합계가 그대로입니다. 지움을 눌러도 위쪽 합계가 안 바뀌어. 고쳐 줘.라고 보이는 대로 말하면 됩니다.
• 금액에 쉼표가 안 찍힙니다. 금액에 세 자리마다 쉼표를 찍어 줘.
• 새로고침하니 다 사라졌습니다. 저장 부탁이 빠진 것입니다. 적은 내용이 새로고침해도 남게 해 줘.라고 다시 부탁하십시오.
• 고치기 전이 나았습니다. Esc 두 번 또는 /rewind로 되돌립니다.

자주 묻는 질문

함께 보면 좋은 글

• 클로드 코드 왕초보 시리즈 목차 — 설치부터 따라 만들기까지 순서대로 모아 두었습니다.

참고: 클로드 코드 공식 문서 · 빠른 시작, 세션 안에서 쓰는 명령어