비개발자 사고법 › 시즌 2 AI 생각 근육 키우기 › 2강

시즌 2 · 2강 말로 앱 ① 무료 공개 교재 · 로그인 없음

문의 접수 페이지 만들기

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

📺 본편 영상

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

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

2강 문의 접수 페이지 만들기 (영상 썸네일)

재생이 안 되면 → 유튜브에서 바로 보기

🧭 오늘의 목표 · 정직하게

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

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

✅

오늘 만드는 것

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

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

🔜

아직 안 만드는 것

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

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

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

챗봇의 결과는 복사할 글자, 에이전트의 결과는 내 폴더의 파일.

챗봇 답변을 옮겨 담는 복사·붙여넣기도 사실 '일'입니다 — 그 노동을 에이전트가 대신합니다.

🛠️ 클로드 코드 사용법

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

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

1

플랜 모드 켜기

Shift + Tab

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

왜? 공사 들어가기 전에 "거실은 ㄷ자로, 화장실은 두 개로" 설계도를 먼저 받는 것과 같습니다. 설계도 단계에서 고치면 공짜지만, 다 짓고 나서 고치려면 토큰도 닳고, 시간도 닳고, 멘탈도 닳아버립니다.

직접 눌러보기 — 클로드 코드 입력창 흉내

여기에 의뢰문을 입력하게 됩니다…

⏸ manual mode on

버튼을 누르거나, 이 상자를 클릭한 뒤 키보드로 직접 Shift+Tab

✅ plan mode on — 바로 이 상태에서 일을 맡기세요!

내 계정에 auto가 있다면 (조건 충족 시에만 보이는 모드)

기본 순환은 manual → accept edits → plan 세 개입니다. 영상에서는 제 계정에 auto가 있어서 auto mode on에서 시작했는데, 대부분의 화면은 여기 기본값대로 나옵니다. 위 체크박스를 켜면 auto가 어디에 끼어드는지 보입니다.

권한 모드 6가지 — 어디까지 안 묻고 하게 둘 것인가

모드	안 묻고 하는 일	화면 표시	Shift+Tab에 뜨나	가게로 치면
default (Manual)	읽기만. 고치거나 실행할 땐 매번 물어봄	`⏸ manual mode on`	✅ 기본 1번	하나하나 결재받는 신입
acceptEdits	읽기 + 파일 편집 + 폴더 만들기·옮기기·복사 같은 기본 정리	`⏵⏵ accept edits on`	✅ 기본 2번	"주방 정리는 알아서, 나머진 물어봐"
plan	읽기 + 조사. 내 파일은 손대지 않고 계획서만 씀	`⏸ plan mode on`	✅ 기본 3번	오늘의 주인공 — 설계도부터 받기
auto	거의 전부. 대신 감독관(별도 AI)이 위험한 행동을 뒤에서 걸러냄	`⏵⏵ auto mode on`	조건 충족 시에만	감독관이 지켜보는 자율 근무
dontAsk	미리 허락한 것만. 나머지는 묻지도 않고 자동 거절	`⏵⏵ don't ask on`	❌ 절대 안 뜸	출입증 있는 곳만 · 무인 자동화용
bypassPermissions	전부 통과. 안전장치 없음	`⏵⏵ bypass permissions on`	따로 켜야 뜸	⚠️ 격리된 방(가상 컴퓨터)에서만

뒤의 세 개는 기본 순환에 없습니다. auto는 계정 조건이 맞아야 목록에 나타나고, dontAsk는 아예 순환에 안 뜨며, bypassPermissions는 시작할 때 따로 켜야 합니다. 우리가 매일 쓰는 건 앞의 세 개면 충분합니다.

⚠️ 내 화면이 교재와 다를 수 있습니다 — 순환에 들어오는 모드는 계정·설정에 따라 다릅니다. 무작정 세 번 누르지 말고 글자를 직접 읽으세요. plan mode on이 떠야 맞습니다. 윈도우에서 Shift+Tab이 안 먹으면 Alt+M을 쓰세요.

📎 출처 Claude Code 공식 문서 · Permission modes

📚 더 깊게 — 기본서 A-7 「플랜 모드 · 모델 · 에포트」

🤖 코덱스(OpenAI)에선 — 같은 플랜 모드가 있고, /plan을 입력해 켭니다. 권한은 손잡이 1개가 아니라 프리셋 3개(읽기 전용 · Auto · 전체 허용)로 고릅니다(/permissions) → 코덱스 정석 A-7

2

모델 고르기

/model

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

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

/model 목록 — 건축사무소로 비유하면

고르는 이름	어떤 일꾼인가	이럴 때
default	회사 표준 배정 — 내 요금제에 맞는 기본 일꾼	고민하기 싫을 때 · 원래대로 되돌릴 때
best	지금 부를 수 있는 가장 센 사람(Fable이 있으면 Fable, 없으면 최신 Opus)	이름 외우기 싫고 무조건 최고로
fable	수석 설계사 — 가장 어렵고 오래 걸리는 일 전담	크고 복잡한 설계, 며칠짜리 작업
opus	소장 — 복잡한 추론이 필요한 일	영상에서 고른 급 · 중요한 판단
sonnet	실무 에이스 — 일상 작업을 빠르고 안정적으로	대부분의 일. 이걸로 충분한 경우가 많음
haiku	빠른 막내 — 단순 작업 전담	오탈자 고치기, 색 바꾸기
opus[1m] sonnet[1m]	같은 사람인데 책상이 훨씬 넓음(한 번에 펼쳐 볼 수 있는 도면이 많음)	대화가 아주 길어지는 긴 세션
opusplan	설계는 소장, 시공은 에이스 — 자동으로 갈아탐	👉 아래 박스에서 자세히

오늘 강의와 딱 맞는 것

opusplan — 설계는 소장이, 시공은 에이스가

플랜 모드일 때는 opus(소장)가 생각하고, 계획을 승인해서 실제 작업에 들어가는 순간 sonnet(실무 에이스)으로 자동으로 갈아탑니다. 내가 손댈 필요가 없습니다.

오늘 배운 게 정확히 "설계도 먼저, 시공은 그다음"이잖아요. opusplan은 그 순서를 모델 배정까지 자동화한 것입니다. 비싼 소장님을 설계 회의에만 부르고, 공사는 에이스가 하니 시간도 비용도 아낍니다.

알아두면 좋은 것

모델 전환 단축키는 Alt+P (맥은 Option+P) — /model을 다 치지 않아도 됩니다.
/model로 고르면 기본값으로 저장되어 다음 세션에도 이어집니다.
같은 이름(예: opus)이라도 어느 회사 서비스를 통해 쓰느냐에 따라 실제 버전이 다릅니다. 이름은 "최신 것으로 알아서 연결해 주는 별명"이라고 보면 됩니다.

⚠️ 모델 이름은 계속 바뀝니다 — 라인업은 몇 달 단위로 갱신되고, 요금제·회사 설정에 따라 내 화면에 보이는 목록도 다릅니다. 그래서 이름·숫자를 외우지 말고 '급'으로 익히세요. 막내 / 에이스 / 소장 / 수석 — 이 네 칸만 기억하면 이름이 바뀌어도 평생 갑니다.

📎 출처 Claude Code 공식 문서 · Model configuration

📚 더 깊게 — 기본서 A-7 「모델과 에포트 — 헷갈리지 않는 정리」

🤖 코덱스에선 — 같은 /model 명령으로 GPT-5.6 3형제(sol 수석 / terra 에이스 / luna 막내)를 고릅니다. '이름 말고 급으로 기억' 원칙도 그대로 → 코덱스 정석 A-4

3

추론 깊이 정하기

/effort

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

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

/effort 5단계 — 같은 직원에게 주는 주문의 강도

단계	이렇게 시키는 것	이럴 때	다음 세션에도 유지?
low	"슥 훑어보고 해줘"	오탈자·색 바꾸기 같은 잔일	✅ 유지
medium	"평소대로 해줘"	익숙한 반복 작업	✅ 유지
high	"꼼꼼히 검토하고 해줘"	기본값 — 대부분 이걸로 충분	✅ 유지
xhigh	"아주 깊게 따져보고 해줘"	영상에서 고른 단계 · 중요한 설계	✅ 유지
max	"끝까지 파고들어 줘"	정말 어려운 문제 하나	❌ 이번 세션만

정확히 알아둘 것 4가지

아무것도 안 건드리면 기본값은 high입니다. 이미 꽤 꼼꼼한 상태에서 시작하는 겁니다.
low~xhigh는 다음에 켜도 그대로지만, max는 이번 세션에만 적용되고 끝나면 원래대로 돌아갑니다.
모델마다 있는 단계가 다릅니다. 예를 들어 xhigh가 없는 모델에서 xhigh를 고르면 조용히 high로 내려가 실행됩니다. 눌렀는데 티가 안 나면 이것 때문일 수 있습니다.
항상 최고로 두는 게 좋은 게 아닙니다. 느리고 비싸지며, 간단한 일에는 오히려 과하게 생각하다 돌아갑니다.

가장 많이 오해하는 것

ultracode — 이건 '깊이'가 아니라 '팀 꾸리기'입니다

/effort 메뉴 맨 아래에 ultracode가 같이 있습니다. 그런데 이건 에포트 단계가 아닙니다. 성격이 다른 물건이 같은 서랍에 들어 있는 것뿐입니다.

켜면 두 가지가 일어납니다 — ① 모델에는 xhigh를 보내고, ② 거기에 더해, 큰 일이 오면 클로드가 여러 에이전트로 팀을 꾸려 나눠서 조사하고 서로 검증하게 합니다.

한 줄로 —
에포트 = 직원 한 사람이 얼마나 깊이 생각하나
ultracode = 아예 팀을 꾸려서 나눠 조사·검증시키나

그래서 훨씬 오래 걸리고 비쌉니다. 이번 세션에만 적용되고요. 오늘 같은 화면 하나 만드는 일에는 필요 없습니다 — 크고 복잡한 일이 왔을 때 꺼내 쓰는 카드로 기억해 두세요.

📎 출처 Claude Code 공식 문서 · Adjust effort level

📚 더 깊게 — 기본서 A-7 「모델과 에포트 — 헷갈리지 않는 정리」

🤖 코덱스에선 — 추론 깊이가 5단계(minimal~xhigh)이고, 별도 명령이 아니라 /model 안에서 모델과 함께 고릅니다 → 코덱스 정석 A-5

👔 직장 비유로 이해하기

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

팀장인 여러분이 "오후 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)

✍️ 오늘의 실습 · 내 것으로 만들기

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

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

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

업종을 고르면 각 칸의 예시와 힌트가 그 업종의 말로 바뀝니다.

①역할"○○ 페이지를 만드는 개발자로서 일해주세요"

②상황내 처지 — 무슨 일 · 손님은 누구 · 문의는 지금 어디로

③문제딱 하나 — 뭘 놓치고, 그래서 어떤 손해가 나는지

④결과물받을 모양 — 입력 항목은 아래 체크리스트가 자동으로 채워줍니다

📇 손님에게 받을 입력 항목 — 체크하면 의뢰문에 자동으로 들어갑니다

여기가 바로 '도메인 내공'이 드러나는 자리입니다. 내 장사에 진짜 필요한 것만 고르세요.

이름 연락처연락처를 받는 순간, 아래 개인정보 동의가 필수가 됩니다 문의 내용 개인정보 수집·이용 동의🎖️ 내공 칸 — 처음 만드는 분들이 가장 많이 빠뜨립니다 문의 유형 (보기로 고르게)예: 단체 주문 · 예약 · 기타 — 영상에서 AI가 제안한 칸 회신 희망 시간대장사 중엔 전화를 못 받는 업종에 특히 좋습니다 방문·이용 예정일 인원수단체 예약을 받는 곳이라면 이메일파일·견적서를 보내야 하는 일이라면

📁 결과를 저장할 폴더 이름 바탕화면에 이 이름으로 새 폴더를 만들어 그 안에서만 작업하게 합니다 — 경계선의 시작입니다.

⑤기준 (추가)경계선 4문장은 자동으로 들어갑니다 — 여기엔 내 취향·조건만

완성 의뢰문 미리보기

⚠️ 붙여넣기 전 마지막 체크 — Shift+Tab을 눌러 plan mode on인지 확인하세요. 설계도부터 받아야 공짜로 고칠 수 있습니다.

복사한 뒤 클로드 코드 입력창에 붙여넣기(⌘V / Ctrl+V)

🏅 이번 주 실습 미션 — 위 생성기로 내 일의 의뢰문을 만들어 클로드 코드에 맡겨보세요. 완성된 화면을 브라우저로 열어본 소감(혹은 막힌 지점)을 영상 댓글로 남겨주시면 다음 영상에서 다룹니다.

🔍 고정 코너 · 검증 1분

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

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

✓ 직접 열어봤나

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

✓ 휴대폰에서도 되나

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

✓ 받을 건 다 받나

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

AI의 "다 했습니다"와 나의 "확인했습니다"는 다릅니다.

📚 오늘 나온 말들

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

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

▼ 펼치기플랜 모드 (plan mode)공사 전에 설계도부터 받는 스위치 — Shift+Tab

에이전트가 코드를 바로 짜지 않고, 먼저 현장을 확인하고 → 애매한 것을 질문하고(복명복창) → 계획서를 제출해 승인을 받은 뒤에야 작업을 시작하는 모드입니다. 설계 단계의 수정은 거의 공짜지만, 완성 후 수정은 토큰·시간이 몇 배로 듭니다. 원하지 않는 방향으로 갈 가능성을 시작 전에 줄이는 장치입니다.

입력창 아래 글자가 auto mode on에서 plan mode on으로 바뀌고 나서야 접수표를 입력하던 장면.

▼ 펼치기프론트엔드 (화면)손님 눈에 보이는 홀 — 오늘 만든 그 페이지

사용자 브라우저에 보이고 만져지는 부분(HTML·CSS·자바스크립트)입니다. 입력 폼·버튼·완료 화면이 전부 프론트엔드. 반대로 접수 내용을 받아 처리하고 쌓는 쪽은 백엔드(주방)와 데이터베이스(창고)로, 시즌 1의 6~8강에서 다룬 그 구조입니다.

"솔직하게 말씀드리자면 오늘 만드는 건 화면입니다 — 시즌 1에서 이야기했던 프론트엔드를 만드는 겁니다."

▼ 펼치기서버 · 데이터베이스문의가 차곡차곡 쌓이는 창고 — 오늘은 아직 안 지었다

서버는 요청을 받아 처리해 주는 컴퓨터, 데이터베이스는 기록을 장부처럼 쌓아두는 창고입니다. 이게 없으면 손님이 폼을 채워도 내용이 손님 기기에만 남고 사장님께 오지 않습니다. 진짜 접수·문자 알림까지 가려면 이 조각을 붙여야 하고, 그건 이 시리즈에서 차근차근 다룹니다. 복습은 시즌 1 「데이터베이스는 창고다」.

플랜 모드의 AI가 "서버가 없으면 폼 내용은 손님 폰에만 남고 사장님께 전달되지 않습니다"라고 정직하게 알려주던 장면.

▼ 펼치기Playwright (플레이라이트)AI가 브라우저를 직접 눌러보는 손 — 시키지 않아도 스스로 검사

브라우저를 자동으로 조작하는 도구입니다. 에이전트가 이걸로 자기가 만든 페이지를 열어 글자를 입력하고, 버튼을 누르고, 삭제해 보고, 휴대폰 화면 폭까지 검사합니다. 예전에는 개발자가 코드를 잡고 하나하나 확인하던 일을 에이전트가 대신하는 것 — 다만 이 자동 검사가 통과해도 마지막 확인은 사람 몫입니다.

"저 지금 마우스에 손 안 대고 있거든요" — 폼이 저절로 채워지고, 접수되고, 김지백 문의가 삭제되던 그 장면.

▼ 펼치기목업 데이터진열장의 음식 모형 — 화면 확인용 가짜 데이터

화면이 잘 작동하는지 보여주려고 임시로 넣는 가짜 데이터입니다. 식당 진열장의 음식 모형처럼 '진짜 주문'이 아니라 '이런 모양으로 나옵니다'용. 진짜 문의가 쌓이려면 데이터베이스를 붙인 뒤부터입니다.

어드민 문의함에 들어 있던 '김지백' 문의 — 실제 접수가 아니라 AI가 화면 시연용으로 넣은 목업이었습니다.

▼ 펼치기권한 모드 (permission mode)어디까지 안 묻고 하게 둘지 정하는 태도 — Shift+Tab

이 세션에서 클로드가 무엇까지 묻지 않고 해도 되는지를 정하는 기본 설정입니다. 전부 여섯 가지입니다 — 읽기만 자유로운 default(Manual), 파일 편집까지 알아서 하는 acceptEdits, 내 파일을 안 건드리고 계획만 세우는 plan, 감독관 역할의 별도 AI가 위험을 걸러주는 auto, 미리 허락한 것만 하고 나머진 자동 거절하는 dontAsk, 안전장치 없이 전부 통과시키는 bypassPermissions. Shift+Tab으로 도는 기본 순환은 앞의 세 개이고, 나머지 셋은 조건이 맞거나 따로 켜야 나타납니다.

입력창 아래 글자가 mode on에서 plan mode on으로 바뀌고 나서야 접수표를 입력하던 장면.

▼ 펼치기모델 (/model)누구에게 맡길지 — 막내 · 에이스 · 소장 · 수석

같은 클로드 코드 안에서도 두뇌(모델)를 고를 수 있습니다. 단순 작업용 haiku(막내), 일상 작업용 sonnet(에이스), 복잡한 추론용 opus(소장), 가장 어렵고 오래 걸리는 일용 fable(수석)이 기본 네 칸이고, 여기에 요금제 기본값인 default, 가장 센 걸 자동으로 잡아주는 best, 책상이 넓은 [1m] 버전이 있습니다. 특히 opusplan은 플랜 모드일 땐 opus로 생각하고 실행에 들어가면 sonnet으로 자동 전환하는 하이브리드로, 오늘 배운 '설계 먼저' 흐름과 정확히 맞물립니다. 이름은 계속 바뀌니 '급'으로 익히세요. 단축키는 Alt+P(맥 Option+P).

"/model이라고 치면 다양하게 모델을 고를 수가 있습니다" — Opus 5를 고르던 장면.

▼ 펼치기에포트 (/effort)얼마나 깊이 생각할지 — 그리고 ultracode는 다른 물건

같은 모델에게 "얼마나 깊이 생각하고 움직일지"를 주문하는 손잡이입니다. low · medium · high · xhigh · max 다섯 단계이고 기본값은 high입니다. low~xhigh는 다음 세션에도 유지되지만 max는 이번 세션만 적용됩니다. 모델마다 지원하는 단계가 달라서, 없는 단계를 고르면 조용히 한 칸 아래로 내려가 실행됩니다. 메뉴 맨 아래의 ultracode는 에포트 단계가 아닙니다 — 모델에 xhigh를 보내는 데 더해, 큰 일이 오면 클로드가 여러 에이전트로 팀을 꾸려 나눠 조사·검증하게 하는 별도 설정이고 역시 이번 세션에만 적용됩니다.

"/effort를 X High로 잡고 시작하겠습니다" — 설계가 중요한 날이라 깊이를 올려두던 장면.

▼ 펼치기어드민 페이지 (문의함)사장님만 보는 뒷방 장부 — 접수된 문의를 모아 보는 화면

손님용 화면과 별개로, 들어온 문의를 목록으로 모아 보고 처리(확인·삭제)하는 관리자 화면입니다. 영상에서는 시키지 않았는데 AI가 함께 만들어 줬습니다 — 다만 진짜 문의가 여기 쌓이려면 역시 저장(데이터베이스)이 필요합니다.

"접수된 문의 페이지, 우리 어드민 페이지라고 하죠 — 문의함까지 만들어줬네요, 이 친구가."

✅ 즉시 채점 퀴즈

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

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

💬 자주 묻는 질문

이런 질문, 꼭 나옵니다

플랜 모드를 안 켜면 큰일 나나요? 매번 켜야 하나요?

큰일까지는 아니지만 결과 차이가 큽니다. 오타 수정처럼 작은 일은 auto로 바로 시켜도 됩니다. 하지만 오늘처럼 화면 하나를 새로 만드는 '전체 그림을 그리는 일'은 반드시 플랜 모드로 — 설계도 없이 공사를 시작하면, 다 지어진 뒤에야 잘못을 발견하게 됩니다. 그때 고치면 토큰·시간·멘탈이 함께 닳습니다.

제 화면엔 auto가 없고 accept edits가 먼저 나오는데요?

그게 정상이고, 오히려 그쪽이 기본값입니다. Shift+Tab 기본 순환은 manual → accept edits → plan 세 개입니다. 영상에서 auto가 보였던 건 제 계정이 조건을 충족해서 목록에 하나 더 붙어 있었기 때문입니다. auto는 계정 조건이 맞아야 나타나고, dontAsk는 아예 순환에 안 뜨며, bypassPermissions는 시작할 때 따로 켜야 나옵니다. 그러니 횟수를 세지 말고 글자를 읽으세요 — plan mode on만 확인되면 됩니다. 윈도우에서 Shift+Tab이 안 먹으면 Alt+M입니다.

모델은 꼭 Opus 5를 골라야 하나요?

아니요, 핵심은 이름이 아니라 '일의 크기에 맞추기'입니다. 화면 하나 정도의 작업엔 영상처럼 중상급 모델이 빠르고 충분하며, 아주 복잡한 설계라면 최상위 모델이 값을 합니다. 모델 이름과 구성은 계속 바뀌니 "/model에서 고를 수 있다, 간단한 일에 최상위를 쓰면 오히려 오래 걸릴 수 있다" 두 가지만 기억하세요.

그럼 그냥 opusplan 쓰면 되는 거 아닌가요?

좋은 질문이고, 실제로 오늘 같은 작업엔 아주 잘 맞는 선택입니다. 계획은 소장(opus)이 세우고 실행은 에이스(sonnet)가 하니 품질과 속도를 같이 챙깁니다. 다만 만능은 아닙니다 — 실행 중에도 어려운 판단이 계속 필요한 일(복잡한 구조를 고쳐 나가는 일)이라면, 시공 단계에서 에이스로 내려가는 게 아쉬울 수 있습니다. 설계가 어렵고 시공은 단순한 일에 가장 좋다고 기억하시면 됩니다. 오늘 만든 문의 페이지가 딱 그런 일이었습니다.

ultracode 눌러도 되나요? 뭐가 달라지나요?

눌러도 되지만 오늘 같은 일엔 필요 없습니다. 그리고 하나 짚고 갈 게 있는데, ultracode는 /effort 메뉴에 같이 있지만 에포트 단계가 아닙니다. 켜면 모델에 xhigh를 보내는 데 더해, 큰 일이 오면 클로드가 여러 에이전트로 팀을 꾸려 나눠 조사하고 서로 검증하게 합니다. 에포트가 "직원 한 사람이 얼마나 깊이 생각하나"라면 ultracode는 "아예 팀을 꾸리나"입니다. 당연히 훨씬 오래 걸리고 비싸며, 이번 세션에만 적용됩니다. 화면 하나 만드는 데 팀을 꾸릴 필요는 없죠 — 크고 복잡한 일이 왔을 때 꺼내 쓰는 카드로 남겨두세요.

진짜 손님 문의가 제 폰이나 메일로 오게 하려면 뭘 더 해야 하나요?

저장할 창고(데이터베이스)와 전달 장치(문자·메일 알림)를 붙여야 합니다. 구글 폼 연결이나 Firebase 같은 도구가 그 역할을 합니다. 오늘 만든 화면은 그 전체 그림의 첫 조각이고, 이 시리즈에서 한 조각씩 이어 붙일 예정입니다 — 한 번에 다 시키지 않는 이유는 다음 3강 「쪼개기」에서 다룹니다.

코딩을 하나도 모르는데 따라 할 수 있나요?

영상에서 입력한 것은 코드가 아니라 한국어 접수표 다섯 줄이었습니다. 717줄의 코드는 AI가 짰고, 검사도 AI가 먼저 했습니다. 여러분이 하는 일은 지시하고 판단하는 것 — 그건 코딩 지식이 아니라 여러분이 이미 가진 '내 장사 지식'입니다.

AI가 중간에 뭘 물어보면 뭐라고 답해야 하죠?

에이스 직원의 중간보고를 받는 팀장처럼 답하면 됩니다. 내 사업에 필요한 것만 고르고, 필요 없는 제안은 "그건 빼자"라고 하세요. 판단이 안 서면 "가장 단순한 안으로 진행하되, 왜 그게 나은지 한 줄로 알려줘"라고 되물어도 좋습니다. 질문에 답하는 그 순간이 결과물의 방향을 정하는 순간입니다.

저는 카페를 안 하는데요 — 저한테도 쓸모가 있나요?

문의·예약·요청을 받는 모든 일에 그대로 통합니다. 학원의 상담 신청, 공방의 주문 제작 문의, 회사 프로젝트의 자료 요청, 프리랜서의 작업 의뢰까지 — 구조는 같고 칸 이름만 다릅니다. 위 생성기의 업종 버튼을 눌러 내 상황의 예시로 바꿔보세요.

챗GPT한테 물어봐도 비슷한 코드를 주던데, 뭐가 다른 건가요?

챗봇도 답은 줍니다 — 다만 결과가 '대화창 속 글자'라서 내가 복사해 옮겨 담는 노동이 남습니다. 에이전트는 내 폴더에 파일을 직접 만들고, 브라우저에 띄워 눌러보며 검증까지 합니다. 결과물이 '답변'이 아니라 '파일'이라는 것, 그게 질문과 의뢰의 차이입니다.

화면 → 쪼개기

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

시즌 2 전체 로드맵 보기 1강 접수표 복습하기 📺 영상 다시 보기 · 구독

비개발자 사고법 · 시즌 2 「AI 생각 근육 키우기」 2강 교재 — 무료 공개 · 전체 강의 목록

← 강의 목록 🏠 홈