[비개발자 사고법2 2강·실습] 접수표 5칸을 넣었더니 클로드 코드가 웹페이지를 만들었습니다 — 플랜 모드·검증까지 한 방 정리

왜 '거창한 홈페이지'가 아니라 문의 화면 하나부터일까

영상에서 잡은 상황은 아주 구체적입니다. 테이블 여덟 개짜리 동네 카페. 지금까지 고객 문의는 전부 카카오톡으로 받아 왔고, 문제는 그 카톡이 광고와 다른 대화에 묻힌다는 겁니다. 카페 사장님들은 아침에 장사 준비하고, 점심 장사 치르고, 오후에야 카톡방을 열어 봅니다. 그러면 메시지가 40개씩 쌓여 있어요. 그중에 단체 주문·단체 예약 같은 진짜 돈 되는 문의가 섞여 있는데, 그게 묻혀서 그냥 날아갑니다.

그런데 흔히 이런 반응이 나옵니다. "이왕이면 메뉴판도, 홈페이지도, 회원가입 페이지도 만들면 되잖아요?" 물론 다 할 수 있습니다. 하지만 AI에게 모든 문제를 한 번에 통째로 집어넣으면 AI가 망가집니다. 그래서 이번엔 딱 하나 — 문의가 들어오는 화면 한 장만 만듭니다.

먼저 정직하게 — 오늘 만드는 건 '화면(프론트엔드)'입니다

영상을 보시기 전에 이것부터 짚고 갑니다. 오늘 완성되는 결과물은 프론트엔드, 즉 손님이 보고 입력하는 화면입니다. 실제로 고객 문의가 들어왔을 때 장부처럼 차곡차곡 쌓이려면 '저장'이라는 단계를 한 번 더 거쳐야 해요. 시즌 1에서 다뤘던 그 데이터베이스(창고)를 붙여야 합니다.

재미있는 건, 이 한계를 클로드 코드가 묻지도 않은 부분까지 먼저 밝힌다는 점입니다 — "서버가 없으면 폼 내용은 손님 기기에 남고 사장님께 저절로 가지 않습니다. 이번 결과물은 완성된 화면까지이고, 문자 전송까지 하려면 구글 폼이나 파이어베이스 같은 걸 하나 더 붙여야 합니다." 회사로 치면 "이건 지금 조건에서는 여기까지가 한계입니다"라고 먼저 보고하는 직원이죠.

일 맡기기 전 무조건 — 플랜 모드로 '설계도'부터 받으세요

접수표 5칸만큼이나 중요한 게 하나 더 있습니다. 클로드 코드에서 일을 시키기 전에 플랜 모드를 켜는 것이에요. 화면 하단에 "auto mode on"이라고 떠 있는 부분이 있는데, Shift + Tab을 누를 때마다 모드가 바뀝니다. 하단 표시가 plan mode가 될 때까지 누르면 돼요. 윈도우든 맥이든 단축키는 같습니다. 큰 그림을 그리는 작업이라면 반드시 플랜 모드로 잡고 들어가세요.

왜 그럴까요? 플랜 모드를 켜면 AI가 바로 코드를 짜지 않고, 무엇을 어떻게 만들지 계획서부터 보여 줍니다. 공사 들어가기 전에 "거실은 이렇게, 화장실은 두 개, 2층 창문은 위아래로" 하고 설계도를 먼저 받는 것이죠. 이 단계에서 고치면 거의 공짜지만, 다 만들어 놓고 고치려 하면 토큰도 시간도 멘탈도 다 달아납니다. 김지백 강사에 따르면, 플랜 모드로 계획을 짜고 한 것과 그냥 바로 시킨 것은 결과물이 정말 천지 차이이고, 이상한 방향으로 흘러갈 가능성 자체를 줄여 줍니다.

영상에서 클로드 코드에 그대로 넣은 접수표 5칸

말로만 설명하면 감이 안 오니, 실제로 입력한 문장을 그대로 옮깁니다. 여기서 한 칸씩 줄을 내려 가며(맥은 옵션 Option+엔터, 윈도우는 백슬래시 \ 를 치고 엔터) 다섯 칸을 채워 넣었습니다.

※ 결과물 칸의 '문의 유형'은 아래 플랜 모드 단계에서 AI 제안을 받아 확정한 항목입니다 — 영상 진행 순서로는 네 칸으로 시작해 AI와 상의하며 늘렸어요.

영상에서는 여기에 살을 더 붙였습니다. 상황 칸에 "테이블 여덟 개짜리 동네 카페, 서울시 송파구 지하철역 앞이라 출퇴근 손님이 많습니다"처럼요. 기준 칸엔 "화면만, 서버 없이", 결과물 칸엔 "결과는 바탕화면 '내 카페 문의' 폴더에 넣어 주세요"까지 넣었습니다.

5칸을 뜯어보면 — 디테일할수록 AI가 디테일해집니다

이 표에서 진짜 배울 건 문장 자체가 아니라 "왜 이렇게 썼는가"입니다. 한 칸씩 뜯어볼게요.

특히 기준 칸의 "지정한 폴더 안에서만 작업하세요"는 초보자가 가장 자주 빼먹는 문장입니다. 실제로 마구 폭주하는 일은 드물지만, 낮은 성능의 모델을 쓰거나 바탕화면에 비슷한 작업 자료가 있으면 엉뚱한 원본을 참고해 만들어 버릴 수도 있기 때문이에요. 범위를 못 박아 두면 그 여지 자체가 사라집니다. 실제로 클로드 코드는 작업 전에 바탕화면을 확인하고 "'내 카페 문의' 폴더가 아직 없으니 기존 파일을 덮어쓸 위험은 없습니다"라고 먼저 보고했습니다. 디테일하게 말하면, 디테일하게 알아듣습니다.

AI를 '에이스 직원'으로 만드는 한 문장 — 큰 결정은 물어보고

5칸 중에서 이번 실습의 결과를 가장 크게 바꾼 문장을 하나만 꼽으라면 이겁니다 — "큰 결정은 나에게 물어보고 진행해 주세요."

회사로 바꿔 보면 바로 이해됩니다. 팀장이 "오후 3시까지 계획서 준비해 오세요"라고 하면, 어떤 직원은 "네, 알겠습니다" 하고 3시에 결과물 하나 딱 들고 옵니다. 그런데 일 잘하는 에이스는 다르죠. 일하러 가기 전에 "제가 이해한 게 이게 맞는지 여쭤봐도 될까요?"라고 복명복창하고, 중간에 애매한 게 생기면 다시 와서 물어봅니다. 플랜 모드와 이 한 문장이 AI를 그 에이스로 만듭니다.

실제로 클로드 코드는 코드를 짜기 전에 "본격적인 설계 전에 제가 임의로 정하면 안 되는 것 세 가지만 여쭙겠습니다"라며 중간 보고를 했습니다. 그중 두 가지가 이랬어요.

여기가 핵심입니다. 오토 모드였다면 곧바로 만들기 시작해서, 이런 제안을 미리 확인하고 고를 기회가 없었을 겁니다. 플랜 모드에서는 AI가 먼저 생각하고 제안했어요. 그리고 그 제안을 "이건 맞아 / 이건 우리 사업엔 필요 없어"라고 판단하는 건 사장님인 나입니다. 여러분은 개발자가 아니라 팀장이자 사장이에요.

개인정보 동의 칸 — AI가 못 채우는 '내 업종'의 자리

결과물 칸을 쓰던 중에 이런 장면이 나옵니다. 이름 받고, 연락처 받고, 문의 내용 받고… "그다음엔 뭘 받아야 할까요?" 정답은 개인정보 이용 동의입니다. 연락처를 받으니까 당연히 받아야죠.

그런데 이 칸이 바로 업종의 도메인(전문성)이 얼마나 무서운지 드러나는 지점입니다. 처음 해 보는 분은 개인정보 동의를 아예 떠올리지 못할 수 있어요. 반면 카페를 운영해 봤거나 고객 업무를 오래 다뤄 본 분은 "동의서도 받아야 하는 거 아니야?"가 자연스럽게 나옵니다. 그리고 생각을 할 수 있으면, AI에게 시킬 수 있습니다.

그러니 지금 해야 할 공부는 프롬프트 기술만이 아닙니다. 내가 지금 하고 있는 일의 앞뒤 맥락을 더 깊게 파는 것 — 그게 AI에게 명령할 수 있는 힘이 됩니다.

실행과 검증 — AI가 브라우저를 열어 자기 결과물을 직접 눌러봅니다

계획을 승인하면("Yes, and use auto mode" 같은 선택지에서 번호를 고르면) 그제야 비로소 코드를 짜기 시작합니다. 그리고 여기서부터가 에이전트의 진가예요. 만들고 끝이 아니라, 자기가 만든 걸 브라우저에서 직접 눌러보며 검증합니다.

이걸 가능하게 하는 게 플레이라이트(Playwright)입니다. AI가 웹 브라우저에서 직접 마우스를 누르고 스크롤하고 값을 입력해 보는 도구예요. 중간에 "플레이라이트가 보안상 파일을 막네요. 폴더를 읽기 전용으로 잠깐 로컬 서버에 띄우겠습니다"라며 스스로 우회 방법까지 찾아 진행했습니다. 예전 같으면 "이게 무슨 말이지?"부터 내가 알아내야 했던 상황이죠.

완성되면 바탕화면에 '내 카페 문의' 폴더가 생기고, 그 안에 페이지와 함께 「읽어보세요.txt」 사용설명서까지 들어 있습니다. 참고로 어드민 문의함의 목록은 샘플(가짜) 데이터예요 — 진짜 문의가 쌓이려면 앞에서 말한 저장 단계가 필요합니다.

내 업종으로 5칸 바꿔 쓰는 법

영상에서 쓴 프롬프트를 그대로 복사해 드릴 수는 있습니다. 그런데 솔직히 말씀드리면, 그걸 그대로 받아도 여러분의 상황·맥락과는 일치하지 않습니다. 그래서 필요한 건 복붙이 아니라 표현하는 연습이에요. 아래 틀에 여러분 업종을 넣어 보세요.

가장 공들여야 할 칸은 ④ 결과물의 '항목'입니다. 여기가 바로 앞에서 말한 '내 업종의 자리'거든요. 업종별로 이런 식이 됩니다.

표에서 오른쪽 칸을 채울 수 있는 사람은 AI가 아니라 그 일을 해 본 여러분뿐입니다. 그리고 잘 모르겠다 싶으면, 그것마저 플랜 모드에서 "우리 업종이라면 어떤 항목을 더 받는 게 좋을까?"라고 물어보면 됩니다. 제안은 AI가 하고, 채택은 사장님이 하는 겁니다.