18단계코드 없이 만드는 웹페이지와 작은 앱
계산기·체크리스트 같은 도구를 대화로 만듭니다.
걸리는 시간 · 읽기 약 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에게도 달라고 하되, 내가 직접 계산한 사례를 하나 이상 꼭 섞습니다. 규칙을 잘못 이해한 채로 도구와 기대 결과를 함께 만들었다면 둘이 맞아떨어져도 둘 다 틀렸을 수 있습니다.
ChatGPT에서는 작은 웹페이지와 앱은 Sites에서 만듭니다. 웹사이트, 웹앱, 게임을 만들어 호스팅하고 공유까지 하는 기능이고 지금은 공개 베타입니다. 쓸 수 있는 요금제는 OpenAI 문서끼리도 표기가 엇갈리니 내 화면에서 확인하십시오. 입력하면 바로 답이 나오는 간단한 계산기라면 @Visualize로도 만들 수 있습니다. 위 프롬프트의 "웹페이지 아티팩트로"만 바꾸면 되고, 경계 값과 이상한 입력으로 검산하는 순서는 똑같습니다.
실제로 경계 값 하나가 어떤 차이를 만드는지, 영업팀의 사례를 봅시다.
현장 장면
영업팀 강 대리에게는 골칫거리가 있었습니다. 영업사원들이 할인 조건 엑셀 파일을 각자 복사해 쓰는데, 누군가 수식을 고친 버전이 돌면서 같은 조건인데도 견적이 사람마다 달랐습니다. 고객이 두 영업사원의 견적을 나란히 놓고 비교하는 날이 오기 전에 손을 써야 했습니다.
강 대리는 규칙을 가공한 숫자로 바꿔 요청했습니다. "수량과 계약 기간을 넣으면 할인 구간과 최종 단가가 나온다. 수량 구간은 셋, 계약 기간이 일정 기간 이상이면 추가 할인." 곧 입력란 두 개와 결과란이 있는 도구가 떴습니다.
답을 아는 사례 세 개를 넣어 봤습니다. 흔한 경우는 맞았습니다. 그런데 수량이 구간 경계 값과 똑같을 때 한 단계 낮은 할인이 나왔습니다. 도구가 틀린 걸까요? 요청을 다시 읽어 보니 강 대리 자신이 "넘으면"이라고 적어 놓았습니다. 회사 규정은 "이상"이었습니다. 잘못은 요청에 있었습니다.
"수량 구간 경계는 모두 '이상'으로 바꿔 줘. 다른 곳은 그대로." 경계 사례가 맞은 뒤 수량을 비워 둔 채 계산을 눌렀더니 0원이 떴습니다. 누군가 0원짜리 견적을 낼 수도 있는 일이었습니다. "입력이 비면 계산하지 말고 '수량을 넣어 주세요'라고 띄워 줘." 마지막으로 휴대폰 화면에서도 잘 보이게 하고, 화면 아래에 "입력한 값은 저장되지 않는다"는 문장이 있는지 확인했습니다. 게시는 규정 담당자에게 경계 값을 한 번 더 확인받은 뒤로 미뤘습니다.
따라 하기
- 지난주에 엑셀이나 계산기로 반복한 계산 하나를 고르고, 입력·규칙·결과를 적습니다. 규칙은 가공한 예시로 "이러면 이렇다" 형식으로 끊습니다. 성공 기준: 입력이 두세 개인 작은 계산이고, 경계 값마다 "이상"인지 "초과"인지 적혀 있습니다.
- 아래 프롬프트로 도구를 만듭니다. 성공 기준: 창에 입력란과 결과란이 뜨고, 값을 넣으면 결과가 바뀝니다.
- 흔한 경우, 경계 값, 이상한 입력을 하나씩 넣습니다. 성공 기준: 앞의 둘은 손으로 계산한 값과 같고, 이상한 입력에는 안내 문구가 뜹니다.
- 불편한 점 하나를 지적해 고쳐 달라고 합니다. 성공 기준: 지적한 곳만 바뀌고, 3번 사례를 다시 넣어도 결과가 그대로입니다.
- 화면 아래의 저장 여부 문장을 읽고, 창을 닫았다 열어 실제로 그런지 확인합니다. 성공 기준: 문장과 실제 동작이 같습니다.
복사해 쓰는 프롬프트
[도구 이름]을 웹페이지 아티팩트로 만들어 줘.
쓰는 사람: [누가]
입력: [입력 항목과 형식]
계산 규칙: [규칙을 "이러면 이렇다" 형식으로 하나씩. 경계 값은 이상/초과를 분명히]
결과: [보여줄 것]
조건
- 화면 맨 위에 이 도구가 무엇을 하는지 한 문장으로 쓴다
- 입력이 비었거나 형식이 틀리면 계산하지 말고 알아듣기 쉬운 안내를 띄운다
- 휴대폰 화면에서도 쓸 수 있게 만든다
- 입력한 값이 저장되는지 아닌지 화면 아래에 적어 둔다
- 결과 옆에 "참고용, 최종 판단은 [담당 부서]" 문장을 넣는다
- 다 만든 뒤 검산용 예시 입력과 기대 결과를 세 개 알려 줘. 경계 값 사례를 하나 넣어 줘
막히면 이렇게
| 증상 | 원인 | 처방 |
|---|---|---|
| 경계 값에서 한 단계 다른 결과가 나옵니다 | 규칙에 "이상"과 "초과"가 흐리게 적혔습니다 | 경계를 글자 하나까지 분명히 적어 그 규칙만 고치게 합니다 |
| 빈 값이나 글자를 넣어도 숫자가 나옵니다 | 입력 확인을 요청하지 않았습니다 | "비었거나 형식이 틀리면 계산하지 말고 안내를 띄워 줘"라고 합니다 |
| 창을 닫았더니 입력한 값이 사라졌습니다 | 저장 기능이 없는 도구였습니다 | 저장이 꼭 필요하면 여러 사람이 쓰는 도구로 보고 제3부로 넘깁니다 |
| 창이 빈 화면이거나 오류 문구가 뜹니다 | 만드는 코드에 오류가 있습니다 | 보이는 오류 문구를 그대로 붙여 "이 오류를 고쳐 줘"라고 합니다 |
스스로 점검
- ☐ 내가 손으로 계산한 사례가 적어도 하나 들어간 검산을 했습니까?
- ☐ 이상한 입력을 넣었을 때 도구가 엉뚱한 숫자 대신 안내를 띄웁니까?
- ☐ 이 도구가 값을 저장하는지, 사내 시스템과 연결되어 있는지 남에게 정확히 말할 수 있습니까?
점검 해설 보기
- 검산 사례 가운데 적어도 하나는 내가 손으로 계산한 값이고, 그 값이 도구의 결과와 같으면 통과입니다. Claude가 준 사례만 넣어 봤다면 「검산은 답을 아는 사례로」를 다시 읽고, 흔한 경우와 경계 값 바로 위와 아래를 직접 계산해 넣어 봅니다.
- 빈 값, 0, 음수, 글자를 넣었을 때 숫자 대신 안내 문구가 뜨면 통과입니다. 엉뚱한 숫자가 나온다면 「막히면 이렇게」대로 "비었거나 형식이 틀리면 계산하지 말고 안내를 띄워 줘"라고 그 부분만 고쳐 달라고 합니다.
- "이 도구는 값을 저장하지 않고 사내 시스템과 연결되어 있지 않다"처럼 실제 동작과 같은 설명을 남에게 할 수 있고, 창을 닫았다 열어 확인까지 했으면 통과입니다. 확인하지 않았다면 「만드는 법은 문서와 같다」를 다시 읽고 「따라 하기」 5번을 해 봅니다. 저장이 꼭 필요하다면 제3부로 넘길 도구로 표시합니다.
기억할 것
- 규칙의 경계 값을 글자 하나까지 분명히 적습니다. 도구의 정확성은 요청에서 정해집니다.
- 답을 아는 사례 세 개로 검산하기 전에는 남에게 돌리지 않습니다.
- 사내 시스템과 이어져야 하는 도구는 여기서 멈추고 제3부로 넘깁니다.