비개발자 사고법 › 시즌 2 AI 생각 근육 키우기 › 2강
시즌 2 · 2강 말로 앱 ① 무료 공개 교재 · 로그인 없음

문의 접수 페이지 만들기

지난 시간에 쓴 접수표 5칸이 — 진짜 입력 폼 5칸이 된다.
📺 본편 영상

먼저 영상으로 — 접수표가 앱이 되는 과정 전체

카톡에 묻혀 단체 주문·예약을 놓쳐본 사장님, 자료 요청이 흩어져 새는 담당자님 — 오늘 그 문의를 잡는 화면을 만듭니다.

2강 문의 접수 페이지 만들기 (영상 썸네일)
재생이 안 되면 → 유튜브에서 바로 보기
🧭 오늘의 목표 · 정직하게

오늘 만드는 건 '화면'입니다 — 그리고 그게 맞는 순서입니다

시즌 1의 식당 비유로 말하면, 오늘은 손님이 주문서를 적는 홀을 만듭니다. 주문서가 쌓이는 창고는 다음에 짓습니다.

✅

오늘 만드는 것

문의 접수 화면 (프론트엔드)

손님이 이름·연락처·문의 내용을 적고 접수 버튼을 누르는 입력 폼. 지난 시간에 배운 접수표 5칸이 그대로 이 화면 5칸이 됩니다.

🔜

아직 안 만드는 것

저장 (서버 · 데이터베이스)

문의가 장부처럼 차곡차곡 쌓이려면 창고(데이터베이스)가 필요합니다. 기억이 가물가물하면 시즌 1 「데이터베이스는 창고다」를 먼저 보고 오세요.

⚠️ 정직하게 미리 말씀드립니다 — 서버가 없으면 손님이 폼을 채워도 그 내용은 손님 기기에만 남고 사장님께 전달되지 않습니다. 오늘의 결과물은 '화면의 완성'이고, 실제 전달은 구글 폼·Firebase·문자 연동 같은 조각을 하나 더 붙여야 합니다. 놀랍게도 영상 속 AI도 일을 시작하기 전에 이걸 먼저 물어봤습니다 — 아래 '복명복창' 코너에서 확인하세요.
챗봇의 결과는 복사할 글자, 에이전트의 결과는 내 폴더의 파일.
챗봇 답변을 옮겨 담는 복사·붙여넣기도 사실 '일'입니다 — 그 노동을 에이전트가 대신합니다.
🛠️ 클로드 코드 사용법

일 맡기기 전, 세팅 3가지 — 영상에서 한 순서 그대로

프롬프트보다 먼저입니다. 이 세 가지를 잡고 시작하는 것만으로 결과물이 달라집니다.

1

플랜 모드 켜기

Shift + Tab

입력창 아래쪽 모드 글자가 바뀝니다. 윈도우·맥 모두 Shift+Tab. plan mode on이 되면 준비 끝 — 이 상태로 일을 맡겨야 AI가 코드를 바로 짜지 않고 계획(설계도)부터 보여줍니다.

왜? 공사 들어가기 전에 "거실은 ㄷ자로, 화장실은 두 개로" 설계도를 먼저 받는 것과 같습니다. 설계도 단계에서 고치면 공짜지만, 다 짓고 나서 고치려면 토큰도 닳고, 시간도 닳고, 멘탈도 닳아버립니다.
직접 눌러보기 — 클로드 코드 입력창 흉내
여기에 의뢰문을 입력하게 됩니다…
⏵⏵ auto mode on
버튼을 누르거나, 이 상자를 클릭한 뒤 키보드로 직접 Shift+Tab
✅ plan mode on — 바로 이 상태에서 일을 맡기세요!
2

모델 고르기

/model

입력창에 /model이라고 치면 두뇌(모델) 목록이 뜹니다. 영상에서는 Opus 5를 골랐습니다 — 최상위 모델(Fable)은 계획 단계부터 깊고 복잡하게 생각해서, 오늘처럼 간단한 화면 하나에는 오히려 오래 걸릴 수 있거든요.

왜? 못 하나 박는 데 설계사무소 소장님까지 부를 필요는 없습니다. 일의 크기에 맞는 일꾼을 고르는 것도 사장님의 기술입니다.
3

추론 깊이 정하기

/effort

얼마나 깊게 생각할지 정합니다. 영상 기준 X High, 토큰이 넉넉한 분은 Max도 좋습니다. 깊을수록 더 오래, 더 꼼꼼하게 따져보고 움직입니다.

왜? 같은 직원이라도 "대충 훑어봐 줘"와 "꼼꼼히 검토해 줘"는 결과가 다릅니다. 오늘은 설계가 중요한 날이니 깊게 잡고 갑니다.
👔 직장 비유로 이해하기

플랜 모드 = 일 잘하는 에이스의 복명복창

팀장인 여러분이 "오후 3시까지 계획서 준비해 와"라고 시켰다고 해봅시다. 두 직원의 차이가 곧 auto와 plan의 차이입니다.

😐 시키면 바로 하는 직원

  • "네, 알겠습니다!" — 그리고 소식이 없다
  • 3시에 나타나 결과물을 한 방에 내민다
  • 방향이 틀렸으면? 처음부터 전부 다시

🏆 에이스 직원

  • 지시를 메모하고, 일하러 가기 전에 "제가 이해한 게 이게 맞나요?" — 복명복창
  • 일하다 이상하면 12시쯤 와서 "잠깐 여쭤봐도 될까요?" — 중간보고
  • 방향이 틀어질 일이 애초에 없다
1

의뢰 접수 나 = 팀장

접수표 5칸(역할·상황·문제·결과물·기준)을 채워 넘깁니다. plan mode on 상태로.

2

스스로 확인 AI

일을 벌이기 전에 현장부터 둘러봅니다.

"바탕화면에 '내 카페 문의' 폴더가 아직 없네요 — 새로 만들면 되고, 기존 파일을 덮어쓸 위험은 없습니다."
3

복명복창 — 세 가지만 여쭙겠습니다 AI

제 마음대로 정하면 안 되는 것들을 콕 집어 묻습니다. 영상에서 실제로 나온 질문들:

① 접수 버튼을 누르면 내용이 사장님께 어떻게 도착해야 하나요? (서버가 없으면 전달이 안 됩니다 — 이번엔 순수 화면만 만들까요?)
② 입력 항목은 말씀하신 4가지에 더해 문의 유형·회신 희망 시간도 추가하는 게 어떨까요?
③ 가게 정보는 샘플로 넣고 나중에 수정하는 법을 안내해 드릴까요?
4

설계도 제출 → 승인 나 = 팀장

"Ready to code?" — 계획서가 옵니다. 여기서 여러분이 읽고 판단합니다(읽는 법은 바로 아래). 승인해야 비로소 코드를 짜기 시작합니다.

5

작업 + 스스로 검증 AI

717줄 코드를 짜더니, 브라우저를 직접 열어 폼을 채우고 · 접수를 누르고 · 문의함에서 삭제해 보고 · 아이폰 폭에서 가로 스크롤이 생기는지까지 혼자 검사합니다(Playwright).

6

납품 AI

바탕화면에 '내 카페 문의' 폴더 + 사용 설명서(읽어보세요.txt)까지 만들어 놓습니다.

여러분은 개발자가 아니라 팀장·사장님입니다. 좋은 지시가 좋은 직원을 만듭니다.
📖 설계도 읽는 법

플랜이 오면 — 동사·숫자·저장 위치만 챙기세요

계획서를 다 읽으면 좋지만, 개발 지식이 약해도 이 세 가지만 챙기면 방향은 잡을 수 있습니다.

✓ 동사

만든다 · 저장한다 · 띄운다 — 뭘 할 건지. 계획의 뼈대는 전부 동사에 있습니다.

✓ 숫자

입력 칸 몇 개, 화면 몇 장, 파일 몇 개. 내가 시킨 숫자와 맞는지 대조합니다.

✓ 저장 위치

어느 폴더에 무엇이 생기는지. 내가 정한 폴더 밖이면 그 자리에서 바로잡습니다.

AI가 보내온 계획서 (요약 예시) — 버튼을 눌러 훈련해 보세요
· 왜 만드는가: 카톡에 묻혀 문의를 놓치고 매출 기회를 잃기 때문
· 무엇을: 문의 접수 화면 1장을 만들고, 접수 완료 화면을 보여준다
· 입력 칸: 이름 · 연락처 · 문의 유형 · 문의 내용 · 개인정보 동의 + 회신 희망 시간 = 6칸
· 결과물: 바탕화면 '내 카페 문의' 폴더 안에 index.html을 저장한다
· 정직한 한계: 서버가 없어 문의 내용은 전송되지 않음 — 이번 작업은 화면의 완성까지
동사 숫자 저장 위치
🎖️ 도메인 내공

AI의 제안에 "다 좋아요"라고 하지 마세요 — 판단은 사장님 몫

플랜 모드에서 AI는 "문의 유형과 회신 희망 시간도 추가할까요?" 같은 더 나은 제안을 해옵니다. 좋은 제안이면 받고, 우리 사업에 필요 없으면 "그건 빼자"라고 하는 것 — 이 구별이 여러분의 힘입니다.

처음 만들어보는 분들은 개인정보 이용 동의 칸을 생각하지 못합니다. 하지만 가게를 운영해봤거나 고객 업무를 오래 해본 분들은 "연락처를 받으면 동의도 받아야지"가 바로 나옵니다. 한 분야 30년 내공은 접수표의 디테일이 되고, 디테일하게 쓸수록 AI는 디테일하게 만듭니다. 나이 50, 60이어도 — 아니, 그래서 더 — 에이전트와 만나면 성과가 큽니다.

📋 약속했던 그 프롬프트

영상 속 의뢰문 원문 — 그대로 복사해 가세요

단, 솔직하게 — 이걸 100번, 1,000번 보내드려도 여러분의 상황과는 일치하지 않습니다. 한 번 그대로 돌려서 감을 잡고, 반드시 아래 생성기에서 내 가게·내 일의 이야기로 바꿔 연습하세요. 표현하는 연습이 오늘의 진짜 숙제입니다.
영상 실습 — 카페 문의 접수 페이지 의뢰문 (접수표 5칸 + 경계선)
역할: 우리 카페의 문의 접수 페이지를 만드는 개발자로서 일해주세요.
상황: 테이블 여덟 개짜리 동네 카페입니다. 서울시 송파구 지하철역 앞에 있어서 출퇴근하는 손님이 많이 옵니다. 지금은 손님 문의가 전부 카카오톡으로 와서 뒤죽박죽입니다.
문제: 광고와 다른 카톡에 묻혀 고객 문의를 놓칠 때가 많아서, 매출을 올리지 못할 때가 있습니다.
결과물: 우리 가게의 문의 접수 페이지 화면 하나를 만들어 주세요. 이름, 연락처, 문의 내용을 입력받고, 개인정보 이용 동의 칸도 만들어 주세요. 결과는 바탕화면에 '내 카페 문의' 폴더를 새로 만들어 그 안에 저장해 주세요.
기준: 화면만 만들어 주세요(서버 없이). '내 카페 문의' 폴더 안에서만 작업하세요. 기존 파일을 지우거나 덮어쓰지 마세요. 큰 결정은 저에게 물어보고 진행해 주세요.
💡 붙여넣기 전, Shift+Tab → plan mode on 확인! 설계도부터 받는 게 오늘의 핵심입니다.
복사한 뒤 클로드 코드 입력창에 붙여넣기(⌘V / Ctrl+V)
✍️ 오늘의 실습 · 내 것으로 만들기

내 일 맞춤 「문의 접수 페이지」 의뢰문 생성기

업종을 고르고 다섯 칸을 채우면, 클로드 코드에 바로 붙여넣을 완성 의뢰문이 만들어집니다. 카페가 아니어도 됩니다 — 문의·예약·요청을 받는 모든 일에 통합니다. 쓰던 내용은 이 브라우저에 자동 저장됩니다.

🧾 내 가게 · 내 일 의뢰 접수표

업종을 고르면 각 칸의 예시와 힌트가 그 업종의 말로 바뀝니다.
①역할"○○ 페이지를 만드는 개발자로서 일해주세요"
②상황내 처지 — 무슨 일 · 손님은 누구 · 문의는 지금 어디로
③문제딱 하나 — 뭘 놓치고, 그래서 어떤 손해가 나는지
④결과물받을 모양 — 입력 항목은 아래 체크리스트가 자동으로 채워줍니다
📇 손님에게 받을 입력 항목 — 체크하면 의뢰문에 자동으로 들어갑니다
여기가 바로 '도메인 내공'이 드러나는 자리입니다. 내 장사에 진짜 필요한 것만 고르세요.
바탕화면에 이 이름으로 새 폴더를 만들어 그 안에서만 작업하게 합니다 — 경계선의 시작입니다.
⑤기준 (추가)경계선 4문장은 자동으로 들어갑니다 — 여기엔 내 취향·조건만
완성 의뢰문 미리보기
⚠️ 붙여넣기 전 마지막 체크 — Shift+Tab을 눌러 plan mode on인지 확인하세요. 설계도부터 받아야 공짜로 고칠 수 있습니다.
복사한 뒤 클로드 코드 입력창에 붙여넣기(⌘V / Ctrl+V)
🏅 이번 주 실습 미션 — 위 생성기로 내 일의 의뢰문을 만들어 클로드 코드에 맡겨보세요. 완성된 화면을 브라우저로 열어본 소감(혹은 막힌 지점)을 영상 댓글로 남겨주시면 다음 영상에서 다룹니다.
🔍 고정 코너 · 검증 1분

"다 했습니다"가 오면, 쓰기 전에 1분만

AI가 Playwright로 스스로 검사까지 했더라도, 마지막 눈은 언제나 사람입니다.

✓ 직접 열어봤나

폴더의 index.html을 더블클릭해 브라우저로 열고, 칸을 채워 접수 버튼까지 실제로 눌러봅니다.

✓ 휴대폰에서도 되나

브라우저 창을 좁혀보거나 휴대폰으로 열어 가로 스크롤이 생기지 않는지 확인합니다. 손님 대부분은 폰으로 들어옵니다.

✓ 받을 건 다 받나

개인정보 동의 칸이 있는지, 내 장사에 필요한 칸(예약 날짜·인원수 등)이 빠지지 않았는지 대조합니다.

AI의 "다 했습니다"와 나의 "확인했습니다"는 다릅니다.
📚 오늘 나온 말들

용어 7개 — 쉬운 뜻부터, 궁금하면 정확한 뜻까지

카드를 누르면 정확한 뜻과 영상 속 장면이 열립니다.

▼ 펼치기플랜 모드 (plan mode)공사 전에 설계도부터 받는 스위치 — Shift+Tab
에이전트가 코드를 바로 짜지 않고, 먼저 현장을 확인하고 → 애매한 것을 질문하고(복명복창) → 계획서를 제출해 승인을 받은 뒤에야 작업을 시작하는 모드입니다. 설계 단계의 수정은 거의 공짜지만, 완성 후 수정은 토큰·시간이 몇 배로 듭니다. 원하지 않는 방향으로 갈 가능성을 시작 전에 줄이는 장치입니다.
입력창 아래 글자가 auto mode on에서 plan mode on으로 바뀌고 나서야 접수표를 입력하던 장면.
▼ 펼치기프론트엔드 (화면)손님 눈에 보이는 홀 — 오늘 만든 그 페이지
사용자 브라우저에 보이고 만져지는 부분(HTML·CSS·자바스크립트)입니다. 입력 폼·버튼·완료 화면이 전부 프론트엔드. 반대로 접수 내용을 받아 처리하고 쌓는 쪽은 백엔드(주방)와 데이터베이스(창고)로, 시즌 1의 6~8강에서 다룬 그 구조입니다.
"솔직하게 말씀드리자면 오늘 만드는 건 화면입니다 — 시즌 1에서 이야기했던 프론트엔드를 만드는 겁니다."
▼ 펼치기서버 · 데이터베이스문의가 차곡차곡 쌓이는 창고 — 오늘은 아직 안 지었다
서버는 요청을 받아 처리해 주는 컴퓨터, 데이터베이스는 기록을 장부처럼 쌓아두는 창고입니다. 이게 없으면 손님이 폼을 채워도 내용이 손님 기기에만 남고 사장님께 오지 않습니다. 진짜 접수·문자 알림까지 가려면 이 조각을 붙여야 하고, 그건 이 시리즈에서 차근차근 다룹니다. 복습은 시즌 1 「데이터베이스는 창고다」.
플랜 모드의 AI가 "서버가 없으면 폼 내용은 손님 폰에만 남고 사장님께 전달되지 않습니다"라고 정직하게 알려주던 장면.
▼ 펼치기Playwright (플레이라이트)AI가 브라우저를 직접 눌러보는 손 — 시키지 않아도 스스로 검사
브라우저를 자동으로 조작하는 도구입니다. 에이전트가 이걸로 자기가 만든 페이지를 열어 글자를 입력하고, 버튼을 누르고, 삭제해 보고, 휴대폰 화면 폭까지 검사합니다. 예전에는 개발자가 코드를 잡고 하나하나 확인하던 일을 에이전트가 대신하는 것 — 다만 이 자동 검사가 통과해도 마지막 확인은 사람 몫입니다.
"저 지금 마우스에 손 안 대고 있거든요" — 폼이 저절로 채워지고, 접수되고, 김지백 문의가 삭제되던 그 장면.
▼ 펼치기목업 데이터진열장의 음식 모형 — 화면 확인용 가짜 데이터
화면이 잘 작동하는지 보여주려고 임시로 넣는 가짜 데이터입니다. 식당 진열장의 음식 모형처럼 '진짜 주문'이 아니라 '이런 모양으로 나옵니다'용. 진짜 문의가 쌓이려면 데이터베이스를 붙인 뒤부터입니다.
어드민 문의함에 들어 있던 '김지백' 문의 — 실제 접수가 아니라 AI가 화면 시연용으로 넣은 목업이었습니다.
▼ 펼치기모델 선택 (/model · /effort)일의 크기에 맞는 일꾼 고르기
같은 클로드 코드 안에서도 두뇌(모델)를 고를 수 있습니다. 최상위 모델은 깊게 생각해 복잡한 일에 유리하지만, 간단한 일에는 시간이 더 걸릴 수 있어 중간 모델이 낫기도 합니다. /effort로는 같은 모델의 생각 깊이(High·X High·Max)를 조절합니다. 모델 이름은 계속 바뀌니 "고를 수 있다"는 사실만 기억하면 됩니다.
"/model이라고 치면 다양하게 모델을 고를 수가 있습니다" — Opus 5를 고르고 /effort를 X High로 잡던 장면.
▼ 펼치기어드민 페이지 (문의함)사장님만 보는 뒷방 장부 — 접수된 문의를 모아 보는 화면
손님용 화면과 별개로, 들어온 문의를 목록으로 모아 보고 처리(확인·삭제)하는 관리자 화면입니다. 영상에서는 시키지 않았는데 AI가 함께 만들어 줬습니다 — 다만 진짜 문의가 여기 쌓이려면 역시 저장(데이터베이스)이 필요합니다.
"접수된 문의 페이지, 우리 어드민 페이지라고 하죠 — 문의함까지 만들어줬네요, 이 친구가."
✅ 즉시 채점 퀴즈

O / X 여섯 문제 — 오늘 것, 진짜 내 것이 됐나

많이들 헷갈리는 지점만 골랐습니다. 틀려도 해설을 읽으면 그게 남는 공부입니다.

💬 자주 묻는 질문

이런 질문, 꼭 나옵니다

플랜 모드를 안 켜면 큰일 나나요? 매번 켜야 하나요?
큰일까지는 아니지만 결과 차이가 큽니다. 오타 수정처럼 작은 일은 auto로 바로 시켜도 됩니다. 하지만 오늘처럼 화면 하나를 새로 만드는 '전체 그림을 그리는 일'은 반드시 플랜 모드로 — 설계도 없이 공사를 시작하면, 다 지어진 뒤에야 잘못을 발견하게 됩니다. 그때 고치면 토큰·시간·멘탈이 함께 닳습니다.
모델은 꼭 Opus 5를 골라야 하나요?
아니요, 핵심은 이름이 아니라 '일의 크기에 맞추기'입니다. 화면 하나 정도의 작업엔 영상처럼 중상급 모델이 빠르고 충분하며, 아주 복잡한 설계라면 최상위 모델이 값을 합니다. 모델 이름과 구성은 계속 바뀌니 "/model에서 고를 수 있다, 간단한 일에 최상위를 쓰면 오히려 오래 걸릴 수 있다" 두 가지만 기억하세요.
진짜 손님 문의가 제 폰이나 메일로 오게 하려면 뭘 더 해야 하나요?
저장할 창고(데이터베이스)와 전달 장치(문자·메일 알림)를 붙여야 합니다. 구글 폼 연결이나 Firebase 같은 도구가 그 역할을 합니다. 오늘 만든 화면은 그 전체 그림의 첫 조각이고, 이 시리즈에서 한 조각씩 이어 붙일 예정입니다 — 한 번에 다 시키지 않는 이유는 다음 3강 「쪼개기」에서 다룹니다.
코딩을 하나도 모르는데 따라 할 수 있나요?
영상에서 입력한 것은 코드가 아니라 한국어 접수표 다섯 줄이었습니다. 717줄의 코드는 AI가 짰고, 검사도 AI가 먼저 했습니다. 여러분이 하는 일은 지시하고 판단하는 것 — 그건 코딩 지식이 아니라 여러분이 이미 가진 '내 장사 지식'입니다.
AI가 중간에 뭘 물어보면 뭐라고 답해야 하죠?
에이스 직원의 중간보고를 받는 팀장처럼 답하면 됩니다. 내 사업에 필요한 것만 고르고, 필요 없는 제안은 "그건 빼자"라고 하세요. 판단이 안 서면 "가장 단순한 안으로 진행하되, 왜 그게 나은지 한 줄로 알려줘"라고 되물어도 좋습니다. 질문에 답하는 그 순간이 결과물의 방향을 정하는 순간입니다.
저는 카페를 안 하는데요 — 저한테도 쓸모가 있나요?
문의·예약·요청을 받는 모든 일에 그대로 통합니다. 학원의 상담 신청, 공방의 주문 제작 문의, 회사 프로젝트의 자료 요청, 프리랜서의 작업 의뢰까지 — 구조는 같고 칸 이름만 다릅니다. 위 생성기의 업종 버튼을 눌러 내 상황의 예시로 바꿔보세요.
챗GPT한테 물어봐도 비슷한 코드를 주던데, 뭐가 다른 건가요?
챗봇도 답은 줍니다 — 다만 결과가 '대화창 속 글자'라서 내가 복사해 옮겨 담는 노동이 남습니다. 에이전트는 내 폴더에 파일을 직접 만들고, 브라우저에 띄워 눌러보며 검증까지 합니다. 결과물이 '답변'이 아니라 '파일'이라는 것, 그게 질문과 의뢰의 차이입니다.
화면 → 쪼개기

"메뉴판도, 회원가입도 같이 만들면 되잖아요?" — 안 됩니다. 모든 문제를 한 번에 통째로 넣으면 AI가 맛이 갑니다. 다음 3강 「쪼개기 — 큰 문제는 5개의 렌즈로」에서, 문제를 잘게 쪼개는 법을 다룹니다.

시즌 2 전체 로드맵 보기 1강 접수표 복습하기 📺 영상 다시 보기 · 구독
비개발자 사고법 · 시즌 2 「AI 생각 근육 키우기」 2강 교재 — 무료 공개 · 전체 강의 목록
← 강의 목록 🏠 홈