20단계코드 없이 만드는 웹페이지와 작은 앱
계산기·체크리스트 같은 도구를 대화로 만든다.
걸리는 시간 · 읽기 약 5분 · 따라 하기 약 30분 · 난이도 ★★☆ 실무 · 화면 확인 2026.09.27
이 단계를 마치면
- 쓰는 사람, 입력, 규칙, 결과 네 가지를 말해 작은 도구를 아티팩트로 만들 수 있다.
- 답을 아는 사례 세 개로 도구의 계산이 맞는지 검산할 수 있다.
- 이 방식으로 만들어도 되는 도구와 제3부로 넘길 도구를 구분할 수 있다.
코드를 한 줄도 쓰지 않고 우리 팀 전용 계산기를 만든다. 강의에서 이 장면을 보여 주면 경영진이 가장 크게 놀란다. 견적 계산기, 출장 준비 체크리스트, 회의 시간 타이머, 신규 입사자 안내 페이지 같은 것들이다. Claude가 HTML이나 React로 만들어 아티팩트 창에서 바로 작동하게 해 준다. 누르고, 입력하고, 결과를 본다.
왜 작은 도구가 쓸모 있나
회사에는 할인율 계산, 출장비 산정처럼 엑셀 파일 하나에 기대어 돌아가는 반복 계산이 많다. 이런 파일은 대개 만든 사람만 쓰는 법을 알고, 다른 사람이 쓰다가 수식을 지워 버리기 일쑤다. 입력란과 결과란만 보이는 도구로 바꾸면 쓰는 사람은 규칙을 몰라도 된다. 규칙은 도구 안에 딱 한 번만 적혀 있다.
다만 도구가 쉬워지는 만큼 틀린 도구도 쉽게 퍼진다. 엑셀은 셀을 눌러 수식을 볼 수 있지만 도구는 결과만 보여 준다. 그래서 이 단계에서 정말 중요한 것은 만드는 법보다 검산하는 법이다.
칼럼에서 읽기 「인공지능 70주년, 지금부터 3년이 30년을 가른다」
“어떤 조직은 시제품 하나에 1년을 쓰고, 다른 조직은 같은 것을 한 달 만에 만들어 시장에 내놓고 반응을 본 뒤 다시 고친다. … 누구는 1년 걸릴 일을, 누구는 하루 만에 해낸다.”
“재작업 비용: 한 번 만든 것을 고치는 비용이 크면, 아무도 빨리 만들려 하지 않는다.”
개발팀 차례를 몇 달씩 기다리던 계산기를 오후 한나절에 만들고, 틀리면 대화 몇 번으로 고친다. 만들고 고치는 값이 내려가면 조직의 시계도 빨라진다. 다만 빨리 만든 도구일수록 검산도 같은 속도로 따라가야 한다.
만드는 법은 문서와 같다
누가 쓰는지, 무엇을 입력하고 무엇을 받는지 말하고, 규칙을 "이러면 이렇다" 형식으로 끊어 적는다. "수량이 일정 개수 이상이면 할인 구간 1, 그보다 더 많으면 구간 2" 하는 식이다. 긴 문단에 섞어 쓰면 경계 값에서 해석이 엇갈린다. "이상"이냐 "초과"냐, 글자 하나가 결과를 바꾼다.
이 도구는 사내 시스템과 연결되어 있지 않고, 사내 데이터베이스를 읽지도 쓰지도 않는다. 입력한 값이 저장되는지, 창을 닫으면 사라지는지도 직접 확인하고, 모르겠으면 Claude에게 묻는다. 저장되겠거니 짐작하고 쓰면 안 된다.
| 이런 도구라면 | 여기서 만든다 | 제3부로 넘긴다 |
|---|---|---|
| 입력하면 바로 답이 나오는 계산기 | O | |
| 혼자 또는 팀이 보는 체크리스트·안내 페이지 | O | |
| 입력을 여러 사람이 모아 쌓아야 하는 도구 | O | |
| 사내 시스템에서 숫자를 읽어 와야 하는 도구 | O | |
| 결과가 곧 돈이나 계약이 되는 도구 | 참고용으로만 | 정식 도구는 O |
여러 사람이 매일 쓰고 사내 시스템과 이어져야 하는 더 큰 도구는 바로 다음 제3부에서 Claude Code로 만든다.
검산은 답을 아는 사례로
만들고 나면 손으로 계산해 답을 아는 사례를 넣어 본다. 흔한 경우 하나, 경계 값 바로 위와 아래, 그리고 이상한 입력 하나다. 이상한 입력이란 빈 값, 0, 음수, 글자 같은 것이다. 이런 입력에 도구가 엉뚱한 숫자 대신 안내 문구를 띄우면 합격이다.
사례는 Claude에게도 달라고 하되, 내가 직접 계산한 사례를 하나 이상 꼭 섞는다. 규칙을 잘못 이해한 채로 도구와 기대 결과를 함께 만들었다면 둘이 맞아떨어져도 둘 다 틀렸을 수 있다.
실제로 경계 값 하나가 어떤 차이를 만드는지, 영업팀의 사례를 보자.
현장 장면
영업팀 강 대리에게는 골칫거리가 있었다. 영업사원들이 할인 조건 엑셀 파일을 각자 복사해 쓰는데, 누군가 수식을 고친 버전이 돌면서 같은 조건인데도 견적이 사람마다 달랐다. 고객이 두 영업사원의 견적을 나란히 놓고 비교하는 날이 오기 전에 손을 써야 했다.
강 대리는 규칙을 가공한 숫자로 바꿔 요청했다. "수량과 계약 기간을 넣으면 할인 구간과 최종 단가가 나온다. 수량 구간은 셋, 계약 기간이 일정 기간 이상이면 추가 할인." 곧 입력란 두 개와 결과란이 있는 도구가 떴다.
답을 아는 사례 세 개를 넣어 봤다. 흔한 경우는 맞았다. 그런데 수량이 구간 경계 값과 똑같을 때 한 단계 낮은 할인이 나왔다. 도구가 틀린 걸까? 요청을 다시 읽어 보니 강 대리 자신이 "넘으면"이라고 적어 놓았다. 회사 규정은 "이상"이었다. 잘못은 요청에 있었다.
"수량 구간 경계는 모두 '이상'으로 바꿔 줘. 다른 곳은 그대로." 경계 사례가 맞은 뒤 수량을 비워 둔 채 계산을 눌렀더니 0원이 떴다. 누군가 0원짜리 견적을 낼 수도 있는 일이었다. "입력이 비면 계산하지 말고 '수량을 넣어 주세요'라고 띄워 줘." 마지막으로 휴대폰 화면에서도 잘 보이게 하고, 화면 아래에 "입력한 값은 저장되지 않는다"는 문장이 있는지 확인했다. 게시는 규정 담당자에게 경계 값을 한 번 더 확인받은 뒤로 미뤘다.
따라 하기
- 지난주에 엑셀이나 계산기로 반복한 계산 하나를 고르고, 입력·규칙·결과를 적는다. 규칙은 가공한 예시로 "이러면 이렇다" 형식으로 끊는다. 성공 기준: 입력이 두세 개인 작은 계산이고, 경계 값마다 "이상"인지 "초과"인지 적혀 있다.
- 아래 프롬프트로 도구를 만든다. 성공 기준: 창에 입력란과 결과란이 뜨고, 값을 넣으면 결과가 바뀐다.
- 흔한 경우, 경계 값, 이상한 입력을 하나씩 넣는다. 성공 기준: 앞의 둘은 손으로 계산한 값과 같고, 이상한 입력에는 안내 문구가 뜬다.
- 불편한 점 하나를 지적해 고쳐 달라고 한다. 성공 기준: 지적한 곳만 바뀌고, 3번 사례를 다시 넣어도 결과가 그대로다.
- 화면 아래의 저장 여부 문장을 읽고, 창을 닫았다 열어 실제로 그런지 확인한다. 성공 기준: 문장과 실제 동작이 같다.
복사해 쓰는 프롬프트
[도구 이름]을 웹페이지 아티팩트로 만들어 줘.
쓰는 사람: [누가]
입력: [입력 항목과 형식]
계산 규칙: [규칙을 "이러면 이렇다" 형식으로 하나씩. 경계 값은 이상/초과를 분명히]
결과: [보여줄 것]
조건
- 화면 맨 위에 이 도구가 무엇을 하는지 한 문장으로 쓴다
- 입력이 비었거나 형식이 틀리면 계산하지 말고 알아듣기 쉬운 안내를 띄운다
- 휴대폰 화면에서도 쓸 수 있게 만든다
- 입력한 값이 저장되는지 아닌지 화면 아래에 적어 둔다
- 결과 옆에 "참고용, 최종 판단은 [담당 부서]" 문장을 넣는다
- 다 만든 뒤 검산용 예시 입력과 기대 결과를 세 개 알려 줘. 경계 값 사례를 하나 넣어 줘
막히면 이렇게
| 증상 | 원인 | 처방 |
|---|---|---|
| 경계 값에서 한 단계 다른 결과가 나온다 | 규칙에 "이상"과 "초과"가 흐리게 적혔다 | 경계를 글자 하나까지 분명히 적어 그 규칙만 고치게 한다 |
| 빈 값이나 글자를 넣어도 숫자가 나온다 | 입력 확인을 요청하지 않았다 | "비었거나 형식이 틀리면 계산하지 말고 안내를 띄워 줘"라고 한다 |
| 창을 닫았더니 입력한 값이 사라졌다 | 저장 기능이 없는 도구였다 | 저장이 꼭 필요하면 여러 사람이 쓰는 도구로 보고 제3부로 넘긴다 |
| 창이 빈 화면이거나 오류 문구가 뜬다 | 만드는 코드에 오류가 있다 | 보이는 오류 문구를 그대로 붙여 "이 오류를 고쳐 줘"라고 한다 |
스스로 점검
- ☐ 내가 손으로 계산한 사례가 적어도 하나 들어간 검산을 했는가
- ☐ 이상한 입력을 넣었을 때 도구가 엉뚱한 숫자 대신 안내를 띄우는가
- ☐ 이 도구가 값을 저장하는지, 사내 시스템과 연결되어 있는지 남에게 정확히 말할 수 있는가
점검 해설 보기
- 검산 사례 가운데 적어도 하나는 내가 손으로 계산한 값이고, 그 값이 도구의 결과와 같으면 통과다. Claude가 준 사례만 넣어 봤다면 「검산은 답을 아는 사례로」를 다시 읽고, 흔한 경우와 경계 값 바로 위와 아래를 직접 계산해 넣어 본다.
- 빈 값, 0, 음수, 글자를 넣었을 때 숫자 대신 안내 문구가 뜨면 통과다. 엉뚱한 숫자가 나온다면 「막히면 이렇게」대로 "비었거나 형식이 틀리면 계산하지 말고 안내를 띄워 줘"라고 그 부분만 고쳐 달라고 한다.
- "이 도구는 값을 저장하지 않고 사내 시스템과 연결되어 있지 않다"처럼 실제 동작과 같은 설명을 남에게 할 수 있고, 창을 닫았다 열어 확인까지 했으면 통과다. 확인하지 않았다면 「만드는 법은 문서와 같다」를 다시 읽고 「따라 하기」 5번을 해 본다. 저장이 꼭 필요하다면 제3부로 넘길 도구로 표시한다.
기억할 것
- 규칙의 경계 값을 글자 하나까지 분명히 적는다. 도구의 정확성은 요청에서 정해진다.
- 답을 아는 사례 세 개로 검산하기 전에는 남에게 돌리지 않는다.
- 사내 시스템과 이어져야 하는 도구는 여기서 멈추고 제3부로 넘긴다.