커머스 AI 운영 실전 8주 과정 · 5주차
'됐어요'의 증거는 무엇인가
난이도 LV.5 중급 심화
수업 3시간 · 자료 4시간 40분
실습: contto.ai 70% 클론
5 / 8
이번 주 목표
01
콘텐츠가 다섯 상태를 정해진 순서로만 지나고, 카피가 검수 8항목을 통과해야 다음으로 가요.
02
Vitest로 규칙을, Playwright로 '만들기 → 고르기'를 실제로 눌러 보고 결과를 남겨요.
03
휴대폰 폭 캡처와 main 기준선 비교로 '내 변경 탓인지'까지 보고서에 적어요.
5주차 · 검증: 테스트·기준선·실제 화면 — 2
진행 순서
주황 코어 180분은 상태·검수·E2E에, 회색 확장 100분은 자습·보충이에요.
0:00
복습
0:20
개념 핵심
1:05
개념 심화
1:20
영상 노트
1:40
시연
2:10
실습 1
3:20
실습 2
4:05
상급
4:25
회고
5주차 · 검증: 테스트·기준선·실제 화면 — 3
진행 순서
| 시간 | 순서 | 내용 | 구분 |
|---|---|---|---|
| 0:00–0:20 | 복습 | 4주 PR·CI 결과 확인, 형식 2개 병합 점검 | 코어 |
| 0:20–1:05 | 개념 (핵심) | 테스트는 눈, 상태 머신, 검수 8항목, 기준선 | 코어 |
| 1:05–1:20 | 개념 (심화) | 데모 모드·보안 기본값, 흔들리는 테스트 | 확장 |
| 1:20–1:40 | 참고 영상 노트 | CNV 3단계 '직접 검증', 딥트윈 '하네스와 루프' | 확장 |
| 1:40–2:10 | 강사 시연 | 상태 표 → 테스트 먼저 → E2E → 캡처 → 기준선 | 코어 |
| 2:10–3:20 | 실습 1 (기본) | 목록·상태·검수 8항목·E2E·캡처 | 코어 |
| 3:20–4:05 | 실습 2 (도전) | 슬라이드(이미지) + 검증 보고서 자동 생성 | 확장 |
| 4:05–4:25 | 상급 노하우 | 루프 엔지니어링과 Jev | 확장 |
| 4:25–4:40 | 회고·과제 | 잘된 것·막힌 것 1개씩, 과제 확인 | 코어 |
5주차 · 검증: 테스트·기준선·실제 화면 — 4
지난주 복습
| 확인할 것 | 어떻게 확인하나 |
|---|---|
| 두 형식(이미지 1장·스레드 글)이 main에 들어갔나 | git log --oneline 에서 병합 커밋 두 개 |
| CI가 초록인가 | GitHub Actions 최근 실행 결과 |
| 형식 레지스트리 충돌을 어떻게 풀었나 | PR 설명의 '충돌 해결' 한 줄 |
| 자료실 업로드(도전) | Storage에 사진 1장 이상 |
| 이번 주와 이어지는 것 | 만든 형식의 결과가 오늘 목록·상태·검수로 들어가요 |
5주차 · 검증: 테스트·기준선·실제 화면 — 5
미니 콘토 지도
5주차 미니 콘토
'콘텐츠' 메뉴
콘텐츠 목록
상태별 탭으로 걸러 보기
상태 전이
건너뛰기·되돌리기 금지
카피 검수 8항목
항목별 통과·반려와 이유
테스트
Vitest + E2E, CI 초록
화면 확인
390·1280px 캡처, 기준선
도전
카드뉴스 + 보고서 자동
5주차 · 검증: 테스트·기준선·실제 화면 — 6
개념 1
에이전트가 '됐어요'라고 할 때, 무엇으로 확인했는지부터 물어요.
화면 확인
390px·1280px 캡처로 잘림·겹침·빈 칸을 봐요
사람흐름 테스트
Playwright로 '만들기 → 이걸로 할게요'를 실제로 눌러요
코드규칙 테스트
Vitest로 상태 전이·검수·포인트 계산을 몇 초 만에
코드5주차 · 검증: 테스트·기준선·실제 화면 — 7
개념 2
정해진 순서로만 지나요. 어느 상태든 사람은 '중단'할 수 있어요.
01
AI생성이 끝나면 서버가 옮겨요
02
사람사람의 '이걸로 할게요'로만 넘어가요
사람 승인 관문
03
코드검수 통과 + 사람 확인
04
코드직접·자동 올리기를 기록해요
05
사람같은 글은 두 번 올리지 않아요
5주차 · 검증: 테스트·기준선·실제 화면 — 8
개념 3
답이 정해진 건 스크립트, 해석은 LLM, 사진은 사람이 봐요.
사람
사진↔메시지 · 제품 온전성 · AI 발명물(LLM 보조)
사람LLM
사실 오류(팩트시트 대조) · 제품↔소구
AI스크립트
태그↔내용 · 오퍼 조건(할인정보) · 절대 표현
코드5주차 · 검증: 테스트·기준선·실제 화면 — 9
3D로 보기
끝까지 통과한 후보만 '확인해 주세요'에 모여요.
1
사실 오류: 팩트시트와 대조
2
사진↔메시지: 사람이 봐요
3
제품↔소구: LLM이 판정
4
태그↔내용: 스크립트가 걸러요
5
제품 온전성: 잘린 사진 확인
6
AI 발명물: 없는 구성품 막기
7
오퍼 조건: 할인정보와 대조
8
절대 표현: 금칙어 사전으로
5주차 · 검증: 테스트·기준선·실제 화면 — 10
개념 4
기준선 없이 '테스트 실패'만 적으면 무엇이 나빠졌는지 아무도 몰라요.
01
코드내 브랜치에서 테스트 3개 실패
02
코드워크트리를 하나 더 열어 같은 테스트
03
사람main도 실패면 기존 문제, 나만 실패면 내 변경
04
사람두 결과를 나란히 보고서에 적어요
5주차 · 검증: 테스트·기준선·실제 화면 — 11
개념 5 · 심화
참고: 양실장 3시간 강의의 키 누락 에러·서버 재계산, CNV 3단계의 '없는 것은 그리지 마' 규칙.
데모 모드·보안 기본값
키가 없어도, 값을 속여도
키가 없어도 돌아가게
고정 예시 후보, 500 에러 금지
값은 서버가 다시 계산
화면이 보낸 숫자는 안 믿어요
원본에 없는 건 안 그려요
팩트시트 밖 숫자는 검수가 막아요
5주차 · 검증: 테스트·기준선·실제 화면 — 12
개념 6 · 심화
5주차 · 검증: 테스트·기준선·실제 화면 — 13
운영 루프에서
자동 검수가 걸러 줄수록 사람의 승인은 빨라지고 정확해져요.
01
DB팩트시트·고객 유형
02
AI후보 5안 (만드는 중)
03
코드스크립트와 LLM이 먼저 걸러요
04
사람골라 주세요 · 확인해 주세요
사람 승인 관문
05
코드올릴 준비 완료 → 올림
5주차 · 검증: 테스트·기준선·실제 화면 — 14
참고 영상 노트
출처: CNV AI · AI 에이전트 만들기 3단계 — AI에게 실제 업무 시스템을 개발시키는 방법 · https://www.youtube.com/watch?v=hG9i8nFHEEs&t=2889s
48:09
결과를 받으면 '브라우저에서 직접 테스트해 봐'라고 요청해 에이전트가 스스로 눌러 보게 해요.
50:15
에이전트가 확인했다고 해도 결과물을 다른 도구로 열어 사람이 다시 봐요.
59:10
'안 돼요' 대신 어떤 조건에서 무엇이 비었는지 짚어 다시 요청해요.
1:55:16
원본 데이터에 없는 것은 화면에 그리지 말라는 규칙으로 가짜 성공을 막아요.
미니 콘토에서는 E2E가 직접 누르고, 사람은 캡처를 보고, 팩트시트에 없는 숫자는 검수가 막아요.
5주차 · 검증: 테스트·기준선·실제 화면 — 15
참고 영상 노트
출처: 양실장의 바이브코딩대학 · 암묵지 자산화를 위한 딥트윈 에이전트의 전체 원리와 설계 프로세스 · https://www.youtube.com/watch?v=I_c8R_PckJ8&t=547s
09:07
확률적인 모델에 도구와 검증을 붙여야 업무에 쓸 수 있어요.
11:12
10건 중 1건만 하고 '다 했다'고 답하는 일이 생겨요. 응답 전에 개수를 확인하는 단계를 둬요.
16:17
평가 기준을 주고 그 기준을 통과할 때까지 돌리게 해요.
25:28
평가는 결과가 의도와 다르게 흐른 지점을 찾는 단계예요.
후보 5개를 요청했으면 5개가 저장됐는지를 코드가 세요. 말이 아니라 개수로 확인해요.
5주차 · 검증: 테스트·기준선·실제 화면 — 16
이번 주의 한 문장
테스트 결과, 기준선 비교, 화면 캡처. 셋 중 무엇이 있는지 먼저 물어요.
5주차 · 검증: 테스트·기준선·실제 화면 — 17
현장에서 있었던 일
상황
한 서비스의 결과 고르기 화면은 기능 테스트가 모두 통과했고, 에이전트도 '완료'라고 보고했어요.
무슨 일이
휴대폰 폭에서 확인 버튼이 화면 밖으로 밀려 사용자가 고를 수 없었어요. 테스트는 버튼이 '있는지'만 봤어요.
바꾼 것
완료 조건에 '390px 캡처를 보고서에 첨부'를 넣고, E2E가 버튼을 실제로 누르게 바꿨어요.
5주차 · 검증: 테스트·기준선·실제 화면 — 18
강사 시연 30분
볼 것: 먼저 실패하는 테스트, '완료' 보고와 실제의 차이, 캡처에서만 보이는 문제.
01
사람상태 전이 표를 먼저 쓰고 사람이 검토
02
AIVitest 테스트가 실패하는 걸 확인
03
AI테스트가 초록이 될 때까지 돌려요
04
코드고르기까지 클릭, 390·1280px 캡처
05
코드main 워크트리에서 같은 테스트
5주차 · 검증: 테스트·기준선·실제 화면 — 19
시연 프롬프트
# 1) 상태 전이 표부터
콘텐츠 상태 5개(만드는 중, 골라 주세요, 확인해 주세요,
올릴 준비 완료, 올림)의 허용 전이 표를 docs/states.md 에 써줘.
건너뛰기와 되돌리기는 금지야. 코드는 아직 쓰지 마.
# 2) 테스트 먼저
states.md 대로 lib/states.ts 의 canMove() 테스트를 Vitest로
먼저 써줘. 지금은 실패해야 해. 실패 출력까지 보여줘.
# 3) 증거와 함께 보고
구현 후 테스트 전체 결과, E2E 결과, 390px 캡처 경로를
보고서에 적어줘. 확인 못 한 건 '확인 못 함'으로 남겨.
5주차 · 검증: 테스트·기준선·실제 화면 — 20
실습 1 · 70분
5주차 · 검증: 테스트·기준선·실제 화면 — 21
실습 힌트
| 막힌 상황 | 이렇게 요청해요 |
|---|---|
| 테스트가 계속 실패해요 | '실패 출력 전문을 보여주고, 원인 후보 3개를 확인 순서대로 적어줘' |
| E2E가 가끔 실패해요 | '고정 대기를 없애고, 후보 5개가 보일 때까지 기다리게 바꿔줘' |
| LLM 검수가 들쭉날쭉해요 | '판정을 JSON 스키마(통과·반려·불분명+이유)로 고정해줘' |
| 에이전트가 '완료'라고만 해요 | '실행한 명령과 출력, 캡처 경로를 그대로 붙여서 다시 보고해줘' |
| 키 없이 테스트하고 싶어요 | 'LLM 호출을 가짜 응답으로 바꾸는 데모 모드를 만들어줘' |
5주차 · 검증: 테스트·기준선·실제 화면 — 22
실습 2 · 도전 45분
5주차 · 검증: 테스트·기준선·실제 화면 — 23
템플릿
# 검증 보고서 — 콘텐츠 목록·상태 (YYYY-MM-DD)
## 바꾼 것 커밋 SHA와 한 줄 요약
## 확인한 방법
- 규칙 테스트: npm test → 42 passed, 0 failed
- E2E: npx playwright test → 1 passed
- 화면: reports/390.png, reports/1280.png
## 기준선 main: 2 failed (기존) / 내 브랜치: 2 failed (같음)
## 검수 8항목 통과 6 · 반려 1(절대 표현) · 사람 확인 1
## 확인 못 한 것 실제 휴대폰 기기, 이미지 모델 실호출
## 다음에 할 일
5주차 · 검증: 테스트·기준선·실제 화면 — 24
안전 체크
5주차 안전
여섯 가지를 같이 읽어요
테스트 비용 0원
가짜 LLM 응답으로
E2E는 로컬·프리뷰
게시 API 호출 없음
캡처는 샘플 데이터
실제 고객 정보 없음
키는 .env.local 에만
보고서·캡처에 없음
반려는 못 뒤집어요
에이전트가 '통과'로 못 바꿔요
실패 테스트 그대로
지우거나 skip 금지
5주차 · 검증: 테스트·기준선·실제 화면 — 25
흔한 실수
| 실수 | 무슨 일이 생기나 | 대신 이렇게 |
|---|---|---|
| 테스트를 구현 뒤에 맡김 | 구현에 맞춘 테스트라 늘 통과해요 | 테스트를 먼저, 실패를 확인 |
| '완료' 보고를 그대로 믿음 | 10건 중 1건만 된 채 넘어가요 | 개수·출력·캡처로 확인 |
| 실패 테스트를 skip | 기준선이 몰래 나빠져요 | 실패는 보고서에 그대로 |
| 화면 확인 생략 | 휴대폰에서 버튼이 잘려도 몰라요 | 390px 캡처 필수 |
| 검수를 전부 LLM에 | 금칙어도 들쭉날쭉 걸러요 | 답이 정해진 건 스크립트로 |
5주차 · 검증: 테스트·기준선·실제 화면 — 26
문제 해결
| 증상 | 흔한 원인 | 해결 |
|---|---|---|
| Playwright가 브라우저를 못 찾아요 | 브라우저 미설치 | npx playwright install chromium |
| 로컬은 통과, CI는 실패해요 | 서버가 뜨기 전에 테스트 시작 | webServer 설정과 대기 조건 추가 |
| Supabase 연결 오류 | .env.local 누락·오타 | .env.example 과 키 이름 대조 |
| 캡처가 빈 화면이에요 | 데이터가 오기 전에 촬영 | 목록 항목이 보일 때까지 기다린 뒤 촬영 |
| LLM 검수가 JSON을 깨뜨려요 | 형식 지시 부족 | Zod로 검증하고 실패 시 1회만 재시도 |
5주차 · 검증: 테스트·기준선·실제 화면 — 27
상급 노하우
| 기법 | 어떻게 | 왜 |
|---|---|---|
| 멈춤 조건부터 | E2E 전부 통과, 테스트 파일 수정 금지, 20턴 안, 두 번 진전 없으면 보고 | 조건 없는 루프는 사용량만 태워요 |
| 목표 모드 | /goal 콘텐츠 목록 E2E 통과: 별도 평가 모델이 매 턴 판정해요 | 끝났는지를 만든 쪽이 정하지 않아요 |
| Stop 훅 관문 | npx playwright test 가 실패하면 exit 2로 종료를 막아요 (stop_hook_active 확인) | '됐어요'를 코드가 판정해요 |
| 랄프 루프 | 형식을 하나씩 반복 구현, 상태는 파일과 git에, 최대 반복 수 필수 | 긴 작업에서도 컨텍스트가 썩지 않아요 |
| 카피 검수를 질문으로 | 검수 8항목 중 텍스트로 판정할 항목을 작은 질문으로 쪼개요 (Jev) | 어느 항목이 틀렸는지 보여요 |
5주차 · 검증: 테스트·기준선·실제 화면 — 28
상급 노하우 · 예시
심화 과제(선택): 지난 카피 20건에 텍스트 4항목 라벨을 직접 달고, Jev(또는 LLM + JSON 스키마)로 섀도 판정해 일치율을 비교해요
POST https://api.typesafe.ai/v1/systemone # jev-1.13.0 (버전 고정)
{ "state": { "copy": "…", "factsheet": "…" }, "questions": {
"absolute": { "type": "noul", "instructions": "절대 표현(최고·100%)이 있는가?" },
"outside": { "type": "noul", "instructions": "팩트시트에 없는 숫자가 있는가?" },
"fit": { "type": "noul", "instructions": "고른 고객 유형에 맞는 카피인가?" },
"appeal": { "type": "choice", "instructions": "이 카피의 소구 유형은?",
"criteria": { "기능": "…", "선물": "…", "가격": "…", "불분명": "…" } } } }
# 결정은 코드가: absolute·outside ≥ 0.5 → 반려 후보, 불분명 → 사람에게
# Stop 훅: npx playwright test 실패 → exit 2 → 에이전트가 끝내지 못해요
5주차 · 검증: 테스트·기준선·실제 화면 — 29
자습
| 자료 | 구간 | 볼 것 |
|---|---|---|
| CNV AI · 에이전트 만들기 3단계 | 48:09–1:00:12 | 직접 테스트시키고 증상을 짚어 재요청하는 흐름 |
| 양실장 · 딥트윈 에이전트 | 09:07–17:17 | 하네스·루프·그래프의 차이 |
| 양실장 · 3시간 바이브코딩 | 2:40:21–2:46:01 | 키 누락 에러를 AI에게 디버깅시키는 장면 |
| Playwright 공식 문서 | Getting started | webServer 설정, locator, 자동 대기 |
| Vitest 공식 문서 | Getting started | 테스트 파일 규칙과 watch 모드 |
5주차 · 검증: 테스트·기준선·실제 화면 — 30
과제와 다음 주
다음 수업 시작 20분에 두 명이 보고서를 발표해요.
다음 주
기획·작가·검수 에이전트로 후보 5안을 만들고, 사람이 '이걸로 할게요'로 승인하는 파이프라인을 만들어요.
5주차 · 검증: 테스트·기준선·실제 화면 — 31