바이브코딩 실전 교본 · 부산AI코딩스쿨 작성 중 · 2026.09
0A · 준비

무엇을 만들까

첫 프로젝트를 고르는 법 — 여기서 절반이 결정됩니다.

이 과정의 전체 지도

무엇을차시끝나면
0부 · 준비무엇을 만들까 · 도구와 계정2첫 대화까지
1부 · 만들기SDD → 시안 → 스택 → TDD → 하네스 → CI/CD → 결론8내 컴퓨터에서 도는 것
2부 · 내보내기GitHub → Vercel → 주소·데이터 → 운영5남이 링크로 여는 것

하루 과정이면 1부만 합니다. 2부까지 가려면 이틀 또는 4주(주 1회)가 필요합니다.

제일 먼저 정할 것 — 「완성」이 무엇인가

초보자가 가장 많이 헷갈리는 것이 이겁니다. AI가 화면을 보여주면 다 된 줄 압니다. 아닙니다.

이 과정에서 완성은 하나

남이 링크를 열어서 쓸 수 있다. 내 화면에서만 도는 것은 완성이 아닙니다. 대화창 안에서 보이는 화면(아티팩트)은 더더욱 아닙니다 — 2부 첫 차시가 이 얘기입니다.

첫 프로젝트 — 추천 세 유형

유형완성 모습2부에서 필요한 것
만들어서 내려받는 도구카드뉴스 · 견적서 · 안내문 생성기링크 열고 → 넣고 → 파일로 받는다GitHub + Vercel
혼자 보는 관리 화면수업 일정 · 재고 · 예약 현황링크 열면 오늘 할 일이 보인다+ 구글 시트
남에게 보여줄 페이지가게 소개 · 행사 안내 · 문의 받기링크 보내면 문의가 온다+ 도메인

셋 다 로그인이 없습니다. 로그인이 들어가면 「누가 누구인지」를 기억해야 하니 창고가 생기고, 만들 것이 두 배가 됩니다. 첫 프로젝트에서는 피합니다.

고르는 기준 — 하나로 충분하다

틀렸을 때 알 수 있고, 틀려도 되돌릴 수 있는가.

이 과정은 막히는 지점에서 배웁니다. 그래서 막힐 조건이 없거나, 막히면 돌이킬 수 없는 것은 교재가 못 됩니다. 아래 여덟 줄이 전부 이 한 문장에서 나옵니다.

좋은 것 — 왜 좋은가

좋은 것
지금 손으로 하고 있는 일원본 자료가 이미 있습니다. 명세서를 지어낼 필요가 없습니다 (01차시)
이번 달에 실제로 쓸 것마감이 있습니다. 막혀도 넘어갈 이유가 생깁니다
내가 결정하는 것「모르는 것」이 내 손에서 줄어듭니다. 남이 결정권을 쥐면 9번 물음표가 안 줄어듭니다
혼자 2~3주에 끝낼 크기너무 작으면 설계서를 쓸 일이 없고, 너무 크면 한 과정에 안 담깁니다

피할 것 — 왜 피하나

피할 것
「언젠가 만들고 싶은 것」원본도 없고 쓸 사람도 없고 마감도 없습니다 → 모든 빈칸을 상상으로 채우게 됩니다. 나도 AI도 지어내고, 뭐가 틀렸는지 알 방법이 없습니다
유명 서비스 흉내 (토스·배달앱)수백 명이 만든 걸 혼자 흉내 내면 막히는 지점이 「내 문제」가 아니라 「규모 문제」라 배울 게 없습니다
남이 결정권을 쥔 것물어볼 때마다 멈춥니다. 「모르는 것」이 안 줄어듭니다
로그인 · 결제시간 때문만이 아닙니다 — 아래
로그인·결제를 첫 프로젝트에서 피하는 진짜 이유 — 구조가 바뀌고, 되돌릴 수 없다

로그인이 들어가면 「누가 누구인지」를 기억해야 하니 창고(DB)가 반드시 생깁니다. 그러면 화면 + 서버 + 창고 셋이 다 필요해집니다 — 만들 것이 두 배입니다 (03차시 「식당 세 부분」).

결제는 거기에 사업자등록·심사가 붙고, 무엇보다 돈은 되돌릴 수 없습니다. 첫 프로젝트에서 되돌릴 수 없는 사고를 겪으면 배우는 게 아니라 데이는 것입니다.

둘 다 두 번째 프로젝트부터 합니다. 첫 번째에서 여섯 단계를 몸에 익힌 다음에.

지금 해보세요 — 10분

먼저 — AX 병목 진단

ax-diagnosis.busanaicodingschool.com — 「고치고 싶은 일 하나에서 시작합니다」. 회사 전체가 아니라 제일 손이 많이 가는 일 하나를 적게 하는 페이지입니다. 그게 첫 프로젝트 후보입니다. 강의 전에 미리 해 오게 하면 이 실습이 절반으로 줄어듭니다.

  1. 진단 페이지에서 지금 손으로 하고 있는 일 중 제일 오래 걸리는 것을 적는다 — 세 개까지
  2. 그중 이번 달에 실제로 쓸 것 하나를 고른다
  3. 「완성 = 남이 링크를 열어서 ____ 할 수 있다」를 채운다
빈칸이 안 채워지면

아직 프로젝트가 아닙니다. 다른 걸 고르십시오. 이 한 줄이 01차시 명세서 1번 칸의 씨앗입니다.

0B · 준비

도구와 계정

계정 넷, 설치 하나, 폴더 하나 — 첫 대화까지 20분.

계정 — 넷이면 된다

계정무엇에무료 범위비용
Claude만든다제한적유료 권장(월 $20) — 실습 중 한도에 걸리면 흐름이 끊깁니다
GitHub코드를 보관하고 이력을 남긴다비공개 저장소 무제한무료로 충분
Vercel웹에 올려 공개 주소를 받는다개인 프로젝트 무료무료로 시작. 상업용은 Pro(월 $20)
Supabase (선택)로그인·데이터 저장프로젝트 2개 · 500MB첫 프로젝트엔 대개 불필요
Vercel 무료의 조건

무료(Hobby) 요금제는 개인·비상업 용도가 조건입니다. 가게 사이트를 올릴 거면 약관을 확인하십시오. 이 교재는 2026-09 기준이고 조건은 바뀝니다.

클로드는 두 가지 모습이 있다

클로드 웹 · 앱 — 대화창클로드 코드 — 터미널
설치없음. 사이트에 들어가서 대화하면 끝필요 — 0C에서 한 줄
무엇을 하나설계서 쓰기 · 시안 만들기 · 계획 세우기내 컴퓨터 폴더 안의 파일을 직접 읽고 고치고 실행
못 하는 것내 컴퓨터 파일을 직접 고치기. 결과를 내가 복사해서 옮겨야 한다
그래서테스트·검사는 내가 손으로테스트·검사를 AI가 스스로 돌린다
누가코드를 안 다루면 여기서 시작코드를 다루면 처음부터 여기로

둘 다 같은 순서로 배웁니다. 차이는 하나 — AI가 내 파일을 직접 만지느냐, 내가 복사해서 옮기느냐.

차시대화창(웹)으로터미널(클로드 코드)로
0부 준비 · 01 설계서 · 02 시안 · 03 계획됩니다됩니다
04 테스트 · 05 검사 · 06 자동 검사손으로 — 결과를 복사해 옮긴다AI가 스스로 돌린다
07 학습 · 2부 내보내기됩니다됩니다
코드를 안 다루는 분도 04~06을 건너뛰지 않습니다

「무엇을 요구할지」를 배우는 차시니까요. 만드는 건 AI가 합니다.

첫 세팅 — 순서대로 20분

  1. 폴더 하나를 만든다 — 이름은 영어·소문자·붙여서 (예: cardnews). 한글·띄어쓰기는 나중에 사고가 납니다
  2. 그 폴더에서 Git을 시작한다 — AI에게 「이 폴더의 변경을 기록하게 해줘」 한 줄
  3. 규칙 파일을 하나 만든다 — 처음엔 두 줄. 「모르면 모른다고 해라」 「됐다고 하지 말고 결과를 보여라」. 05차시에서 자랍니다
  4. AI에게 「이 폴더를 읽고 뭐가 있는지 말해줘」 — 첫 대화
  5. GitHub에 빈 저장소를 만들어 둔다 — 2부에서 씁니다

Git — 두 개념만

언제
커밋지금까지 고친 것을 한 덩어리로 기록해 둔다걸음 하나가 끝날 때마다
되돌리기마지막 커밋 상태로 돌아간다AI가 망쳐 놨을 때
푸시기록을 GitHub에 올린다2부에서
커밋이 있어야 과감해진다

되돌릴 수 있으니 시도할 수 있습니다. 07차시의 「되돌리기 연습」이 이것입니다. 명령어를 외울 필요는 없습니다 — 「커밋해줘」 「마지막 커밋으로 되돌려줘」면 됩니다.

여기서 미리 못 박아야 하는 것

AI가 보여주는 화면은 아직 웹사이트가 아니다

대화창 안에서 보이는 화면(아티팩트)은 미리보기입니다. 주소가 없고, 남이 열 수 없고, 대화를 닫으면 사라질 수 있습니다. 0부에서 한 번 말해 두면 1부 내내 「다 됐다」는 착각이 줄어듭니다. 자세한 건 2부 D1.

지금 해보세요 — 20분

  1. Claude · GitHub · Vercel 계정을 만든다
  2. 폴더를 하나 만든다 — 영어·소문자·붙여서
  3. AI에게 「이 폴더에 Git을 시작해줘」
  4. 규칙 파일에 두 줄을 쓴다
  5. AI에게 「이 폴더를 읽고 뭐가 있는지 말해줘」
「Git을 시작한다」가 무슨 말인가

변경 이력 기록을 켜는 일입니다. 켜기 전에는 파일을 고치면 이전 내용이 사라지고, AI가 망쳐 놔도 돌아갈 곳이 없습니다. 켠 뒤에는 고칠 때마다 사진을 찍어 두는 것과 같아서, 언제든 「마지막으로 찍은 데로 돌려줘」가 됩니다.

실제로 하는 일은 AI에게 한 줄 말하는 것뿐입니다. 폴더 안에 숨은 기록 방이 하나 생깁니다.

막히면 손 드십시오

이 20분이 막히면 이후 전부가 막힙니다. 여기서 시간을 아끼지 않습니다. 강사는 이 차시에 실습 시간을 넉넉히 잡으십시오.

0C · 준비

클로드 코드 첫걸음

설치 → 로그인 → 첫 대화 → 첫 수정. 30분이면 됩니다.

먼저 — 이 과정은 어느 도구로 하나

어느 AI든 되는 것코드를 직접 돌리는 AI가 필요한 것
01 명세서 · 02 시안 · 03 스택 · 07 학습
ChatGPT · Gemini · Claude 웹 — 대화창이면 됩니다
04 테스트 · 05 하네스 · 06 기계 검증
클로드 코드 · Cursor · Codex · Gemini CLI 같은 것. 이 과정은 클로드 코드로 시범을 보입니다

다른 도구를 써도 여섯 단계는 같습니다. 명령어 이름만 다릅니다.

터미널이 처음이라면

맥은 「터미널」, 윈도우는 「PowerShell」이라는 앱입니다. 검은 창에 글자를 쳐서 컴퓨터에 시키는 곳입니다. 마우스로 하던 일을 글자로 합니다.

이 과정에서 외울 명령은 둘

cd(폴더로 가기) · claude(클로드 켜기). 나머지는 클로드 안에서 한국어로 말하면 됩니다.

터미널을 열면 이렇게 생겼다

터미널 첫 화면 — 읽는 법
# 터미널을 처음 열면 이 줄 하나가 있다
~ %

# 지금 어디 있는지
~ % pwd
/Users/byeonggeun

# 이 폴더에 뭐가 있나
~ % ls
Desktop    Documents    Downloads
세 가지만 알면 된다 ~ 는 「지금 내 홈 폴더」 · % 또는 $「여기에 치세요」 표시(이건 내가 치는 게 아닙니다) · 그 뒤에 명령을 칩니다.

외울 명령 하나 — cd (폴더로 들어가기)

cd = change directory
~ % cd Documents

# 폴더를 만들고 그 안으로
~/Documents % mkdir cardnews
~/Documents % cd cardnews

# 한 칸 위로 나가기
~/Documents/cardnews % cd ..
경로를 손으로 칠 필요가 없다 cd 를 치고 한 칸 띄운 뒤, 폴더를 마우스로 끌어다 터미널 창에 놓으십시오. 경로가 저절로 적힙니다 → 엔터.

왼쪽 글자가 지금 위치입니다. ~/Documents/cardnews 로 바뀌었으면 그 폴더 안에 들어간 것입니다.

외울 명령 둘 — claude (그 폴더에서 켜기)

켜면 여기서부터는 한국어
~/Documents/cardnews % claude

✻ Claude Code  v2.x · claude-opus-5
  ~/Documents/cardnews

  /help 를 치면 할 수 있는 것이 나옵니다

> 이 폴더를 읽고 뭐가 있는지 말해줘
맨 아랫줄이 대화창 여기서부터는 검은 창이 아니라 그냥 대화라고 생각하면 됩니다. 끝낼 땐 /exit.

1 · 설치 — 한 줄

터미널에 붙여넣는다
# 맥 · 리눅스
curl -fsSL https://claude.ai/install.sh | bash

# 윈도우 PowerShell
irm https://claude.ai/install.ps1 | iex

# 됐는지 확인 — 버전 숫자가 나오면 성공
claude --version
출처Claude Code Quickstart (2026-09). 구독(Pro 이상)이 필요합니다 — 0B의 계정 표 참고. 윈도우에서 「&&」 오류가 나면 PowerShell이 아니라 CMD를 연 것입니다.

2 · 로그인 → 3 · 시작

프로젝트 폴더에서 켠다
# 내 프로젝트 폴더로 간다
cd 폴더경로

# 클로드를 켠다 — 처음이면 브라우저 로그인 창이 뜬다
claude
확인화면 위에 버전 · 모델 · 지금 폴더가 보이면 준비 끝. 한 번 로그인하면 다시 묻지 않습니다. 계정을 바꾸려면 안에서 /login.

4 · 첫 질문 — 한국어로

이렇게 물어본다
이 프로젝트가 뭐 하는 거야?
어떤 기술을 쓰고 있어?
폴더 구조를 설명해줘
파일을 열어 줄 필요가 없다필요한 파일은 클로드가 알아서 읽습니다.

5 · 첫 수정 — 물어보면 「예」

「메인 파일에 인사 함수 하나 넣어줘」 정도를 시켜 보십시오. 클로드가 고칠 내용을 보여주고 허락을 묻습니다. 「예」를 고르면 고쳐집니다.

Shift+Tab — 모드 바꾸기

「물어보는 모드」와 「알아서 하는 모드」가 바뀝니다. 요금제에 따라 처음 켜졌을 때 어느 쪽인지 다를 수 있습니다. 처음엔 물어보게 두십시오 — 무엇을 하는지 보이니까요. 익숙해지면 바꿉니다.

외울 것 — 이게 전부

어디서명령
터미널claude켠다
터미널claude -c지난 대화 이어서
클로드 안/clear대화 비우기 — 일이 바뀌면
클로드 안/help뭐 할 수 있는지
클로드 안/exit 또는 Ctrl+D 두 번끄기
클로드 안/ 만 치면명령 목록 · 는 이전 입력

/clear가 제일 중요합니다. 05차시에서 「두 번 고쳐서 안 되면 비우고 다시」가 나옵니다.

초보자 요령 — 공식 문서 넷

  1. 구체적으로. 「버그 고쳐」 ✗ → 「로그인 후 빈 화면 나오는 버그 고쳐」 ✓
  2. 단계로 쪼개서. 「1. 표 만들고 2. 화면 만들고 3. 연결해」
  3. 먼저 살펴보게. 고치기 전에 「이 구조부터 분석해줘」
  4. 동료에게 말하듯. 무엇을 이루고 싶은지를 말한다

출처 — Claude Code Quickstart, 「Pro tips for beginners」

다른 도구를 쓴다면

도구04~06이 되나비고
클로드 코드이 과정의 시범 도구
Cursor · Windsurf편집기 안에 AI가 들어있는 형태
Codex CLI · Gemini CLI클로드 코드와 같은 방식(터미널)
ChatGPT · Gemini · Claude 손으로01~03 · 07은 그대로. 04~06은 결과를 복사해 옮깁니다 — 09차시 참고

지금 해보세요 — 30분

  1. 설치하고 claude --version이 나오는지 본다
  2. 폴더에서 켜고 「이 프로젝트가 뭐 하는 거야?」
  3. 작은 수정 하나를 시키고 「예」를 눌러 본다
  4. /clear/exit를 해본다
설치에서 막히는 사람이 절반이다

창피한 게 아니라 정상입니다. 강사는 이 차시에 실습 시간을 넉넉히 잡으십시오. 여기서 막히면 이후 전부가 막힙니다.

0D · 준비

알아야 할 말 · 문서 읽는 법

모르는 말이 나왔을 때 막히지 않게. 그리고 공식문서를 다 안 읽고 쓰는 법.

AI를 쓰다 보면 처음 보는 말이 계속 나옵니다. 전부 알 필요는 없습니다. 다만 자주 나오는 예닐곱 개는 알아야 대화가 막히지 않습니다. 전체 목록은 부록 F · 말 풀이에 있고, 여기서는 제일 자주 나오는 것만 봅니다.

API — 다른 프로그램에 일을 부탁하는 창구

내 프로그램→ API →남의 서비스
「환율 알려줘」정해진 양식의 창구
「이렇게 물으면 이렇게 답한다」
은행 · 카카오 · AI

식당의 주문서 양식과 같습니다. 양식대로 적어 내면 정해진 대로 나옵니다.

API 키 = 내 출입증

그 창구를 쓸 수 있는 내 신분증입니다. 남이 주우면 내 돈으로 씁니다. 그래서 코드에 적지 않고 환경변수에 넣습니다 (D3).

MCP — AI에게 도구를 꽂아 주는 규격

Model Context Protocol. AI는 말은 하지만 손이 없습니다. 내 파일도 못 열고 노션도 못 봅니다. MCP는 그 손을 꽂는 콘센트 규격입니다. 규격이 같으니 아무 도구나 꽂힙니다 — 내 파일, 노션, 구글, 데이터베이스, 회사 시스템.

APIMCP
누가 부르나내가 만든 프로그램이 부른다AI가 직접 부른다
어디에 적나코드에AI 설정에 꽂아 둔다
환율 가져오기 · 메일 보내기「노션에서 지난주 회의록 찾아줘」

첫 프로젝트에서는 둘 다 필요 없는 경우가 많습니다. 필요해지는 시점은 「AI가 내 자료를 봐야 할 때」입니다.

나머지 자주 나오는 말 — 한 줄씩

한 줄로왜 중요한가
토큰AI가 글을 세는 단위. 대충 한글 한 글자 ≈ 1토큰요금과 한도가 이걸로 매겨진다
컨텍스트AI가 지금 한 번에 볼 수 있는 양넘치면 앞의 말을 잊는다 → /clear 를 쓰는 이유
모델AI의 종류. 같은 회사에도 여러 개센 모델 = 비싸고 느림 (03차시)
할루시네이션AI가 없는 것을 그럴듯하게 만들어 내는 것「모르면 모른다고 해라」가 모든 프롬프트에 들어가는 이유
환경변수코드 밖에 따로 두는 비밀 값키를 코드에 안 적으려고 (D3)
레포지토리코드를 담아 두는 저장소GitHub의 「프로젝트 방」 (D2)

이 여섯 개면 대화가 안 막힙니다. 더 나오면 그때 부록 F를 보거나 물어보면 됩니다.


공식문서 — 다 읽을 필요는 없다. 그런데 안 보면 문제가 생긴다

AI는 배운 시점의 지식으로 답합니다. 도구가 바뀌면 사라진 기능을 쓰라고 하거나 예전 방식으로 코드를 씁니다. 이 교재 실습 저장소의 규칙 파일 첫 줄이 그것 때문에 있습니다 — 「이건 네가 아는 그 프레임워크가 아니다. 코드를 쓰기 전에 설치된 문서를 읽어라」.

다 안 읽고 쓰는 법 — 네 가지

  1. AI에게 문서 주소를 준다 — 「이 페이지 읽고 답해줘」. 제일 빠르고 정확합니다
  2. 「최신 문서를 확인하고 답해라」를 프롬프트에 붙인다
  3. 「모르면 모른다고 해라」 — 지어낸 답을 걸러 내는 한 줄
  4. 버전과 날짜를 묻는다 — 「이 방법은 언제 기준이야?」

1번이 압도적으로 낫습니다. 문서 한 페이지를 통째로 읽히면 AI가 추측할 일이 없어집니다.

그대로 쓰는 프롬프트
이 문서를 읽고 답해줘: https://...

- 문서에 없는 건 지어내지 마라. 없으면 "문서에 없다"고 해라.
- 답할 때 문서의 어느 부분에서 나왔는지 같이 적어라.
- 문서의 기준 날짜·버전이 있으면 알려줘.
두 번째 줄이 핵심없으면 AI는 그럴듯한 답을 만들어 냅니다 — 문서에 없는 기능도.

긴 문서를 4분 만에 — 어디부터 보나

순서볼 곳
1제목과 첫 문단이게 내가 찾는 것이 맞나
2Quickstart · 시작하기대부분 여기에 「최소한 이것만」이 있다
3Limits · 요금 · 한도나중에 터지는 건 대부분 여기 (03차시)
4예제 코드설명보다 예제가 빠르다
5변경 기록(Changelog)최근에 바뀐 것 — AI가 모르는 부분
나머지필요할 때 검색해서 찾는다. 미리 읽지 않는다

3번을 건너뛰면 배포가 조용히 거절되는 일이 생깁니다 — 06차시에서 실제로 겪었습니다.

믿을 문서와 참고만 할 것

먼저 보는 것만든 회사의 공식 문서 · 공식 블로그 · 변경 기록 — 날짜가 적혀 있습니다
참고만 하는 것블로그 글 · 유튜브 · 커뮤니티 답변 — 화면이 바뀌면 낡습니다. 흐름을 보는 용도로만

이 교재의 참고 영상에 「내용을 검증하지 않았습니다」라고 적어 둔 이유입니다.

0D 결론

문서를 다 읽는 것이 아니라 어디를 볼지 아는 것. 그리고 모르는 건 「모른다」고 말하게 만드는 것.

지금 해보세요 — 10분

  1. 내가 쓸 도구의 공식 문서에서 「한도」 페이지를 찾는다
  2. 그 주소를 AI에게 주고 「이 문서를 읽고, 없는 건 지어내지 마라」
  3. 「내 규모면 무료로 되나?」를 물어본다
잘 됐는지 보는 법

답에 숫자와 출처가 같이 나오면 잘 된 것입니다. 「대체로 충분합니다」 같은 답이면 문서를 안 읽은 것입니다.

체크리스트

  • API가 무엇인지 한 줄로 말할 수 있다
  • MCP가 API와 뭐가 다른지 안다
  • 토큰 · 컨텍스트가 왜 중요한지 안다
  • □ 문서 주소를 AI에게 주는 방법을 안다
  • □ 문서에서 「한도」를 먼저 찾는 습관이 생겼다
00 · 들어가며

거짓 생산성이란 무엇인가

도구를 다 갖추고도 아무것도 배우지 못하는 상태. 이 과정은 그 상태를 피하는 법을 다룹니다.

AI로 개발할 때 흔히 이렇게 합니다. 설계서를 쓰고, 디자인 시안을 잡고, 기술 스택과 개발 계획까지 세워서 AI에게 시킵니다. 테스트를 먼저 쓰고, AI가 자기 작업을 되돌아보게 하는 장치를 붙이고, 마지막에 기계적으로 한 번 더 검증합니다.

그런데도 결과가 나오면 끝없이 고치게 됩니다. 그러다 집중력이 떨어지면 생각도 분석도 없이 「해줘」가 됩니다. 프로젝트를 여러 개 돌리면 더 심해집니다. 그리고 가장 나쁜 것은 — 그러고 나면 뭔가 대단한 걸 한 것 같은 기분이 든다는 점입니다. 배운 것도, 느는 것도 거의 없는데.

이 과정이 다루는 문제

「해줘」가 되는 이유는 도구가 부족해서가 아닙니다. 틀렸다는 걸 늦게 알기 때문입니다. 늦게 알면 이미 많이 쌓여서 되돌리기가 싫어지고, 그러면 그냥 밀어붙이게 됩니다.

그래서 이 과정은 이렇게 다릅니다

보통의 강의
잘 되는 화면만 보여줍니다. 따라 하면 되는 것처럼 보입니다.
이 과정
실제 프로젝트를 만들면서 어디서 무너지는지를 그대로 기록합니다.

각 차시에는 「여기서 막힌다」 칸이 있습니다. 실제로 막혔던 지점만 들어갑니다. 지어내지 않습니다. 아직 거기까지 가지 않은 차시는 「예정」으로 표시됩니다.

여섯 가지를 다룹니다

  1. SDD — 무엇을 만들지 글로 못 박기
  2. 디자인 시안 — 코드 전에 눈으로 볼 것 만들기
  3. 기술 스택 · 개발 계획 — 무엇으로, 어떤 순서로
  4. TDD — 테스트 먼저
  5. 하네스 — AI가 자기 실수를 잡게 하는 장치
  6. CI/CD — 기계가 한 번 더 보기

그리고 07차시가 결론입니다. 여섯 가지를 다 갖추고도 남는 문제를 다룹니다.

이 과정을 마치면

설계서·테스트·CI를 「해봤다」가 아니라, 각 장치가 실제로 무엇을 잡아주고 무엇을 못 잡는지 말할 수 있게 됩니다. 그게 다음 프로젝트에서 「해줘」로 빠지지 않는 유일한 방법입니다.

두 곳을 씁니다

강의 화면교재 — 지금 보는 것
주소vibelecture.busanaicodingschool.comvibebook.busanaicodingschool.com
모양한 화면에 한 가지같은 내용을 길게
언제강의 중에 함께실습할 때 · 혼자 읽을 때
여기에만도표 · 발표 모드워크시트 · 명세서 실물 · 말 풀이 · 근거 자료

왼쪽 목차 맨 아래 「슬라이드 열기」로 오갈 수 있습니다. 실습은 교재를 열어 두고 하십시오 — 채울 양식이 여기 있습니다.

차시마다 다섯 개의 탭

무엇이 들어 있나강의에서
교육방법과 절차. 「이 순서로 한다」강사가 설명
프롬프트실제로 쓴 프롬프트 + 왜 그 문장이 들어갔나복사해서 그대로 써 봅니다
예시카드뉴스 · 대시보드 두 종류 비교내 것이 어느 쪽에 가까운지 찾습니다
실습시범 기록 + 「내 프로젝트」 채우기 양식직접 합니다
정리체크리스트 + 「여기서 막힌다」확인하고 넘어갑니다

무엇을 가지고 오나

실제로 만들 것 하나를 가지고 오십시오. 가상의 예제로는 이 과정이 작동하지 않습니다. 막히는 지점이 안 나오기 때문입니다.

좋은 대상지금 손으로 하고 있어 자동화하고 싶은 일 · 만들다 만 관리 화면 · 고객에게 보여줄 페이지 · 반복되는 보고서
크기 기준 — 혼자서 2~3주에 끝낼 수 있는 것. 너무 작으면 설계서를 쓸 일이 없고, 너무 크면 한 과정에 안 담깁니다.
피할 대상「언젠가 만들고 싶은 것」 · 유명 서비스 흉내 · 남이 결정권을 쥔 것
셋 다 막히는 지점이 진짜로 안 나옵니다.

시범 프로젝트

강사가 같은 여섯 단계를 실제로 밟는 과정을 시범으로 함께 봅니다. 카카오 「프로젝트 단골」에 들어갈 카드뉴스 생성 기능이고, 실제 마감과 납품처가 있는 일입니다. 자세한 내용은 부록 B에 있습니다.

시범은 따라 만드는 대상이 아니라 「이 단계에서 무슨 일이 벌어지는지」를 보는 창입니다. 실습 탭에서는 각자 자기 프로젝트로 같은 단계를 밟습니다.

한 장으로 들고 다니기

전 차시의 「내 프로젝트」 칸만 모아 둔 부록 D · 워크시트 한 장이 있습니다. 강의 중에는 그 한 장만 채워도 됩니다.

01 · 본 과정

SDD · 설계서 쓰기진행 완료

코드를 짜기 전에 무엇을 왜 만드는지를 글로 고정합니다.

한 줄 정의

SDD(Spec-Driven Development, 명세 주도 개발) — 코드를 짜기 전에 무엇을 만들 건지 글로 먼저 못 박는다.

기획서와 다른 점은 읽는 사람입니다. 기획서는 결재하는 사람이 읽고, 명세서는 만드는 쪽이 읽고 그대로 만듭니다.

유일한 시험

이 글을 읽고 만든 결과가 내가 기대한 것과 다를 수 있다면, 그건 명세가 아닙니다. 정해진 양식은 없고 이 시험만 있습니다.

명세가 아니다「사용자 친화적으로」 · 「깔끔하게」 · 「적당히 여러 장」 — 읽고 만든 결과가 사람마다 다르다
명세다「매장명은 최대 10자」 · 「한 장에 5개, 넘으면 다음 장」 — 다를 수가 없다

「한 걸음」이 무슨 뜻인가

이 교재에서 한 걸음은 이런 뜻입니다.

한 번에 시켜서 끝내고, 화면을 열어 맞는지 틀린지 판단할 수 있는 작업 한 덩어리.
좋은 걸음「색면 배경에 10월 달력 격자만 그린다. 일정은 가짜 값으로.」 → 열어 보면 맞는지 안다
나쁜 걸음「카드뉴스 기능을 만든다」 → 다 만들어질 때까지 맞는지 모른다. 틀렸다는 걸 제일 늦게 안다

걸음이 커질수록 「해줘」에 가까워집니다. 확인할 수 없는 크기로 시키면 확인을 안 하게 되고, 확인을 안 하면 쌓입니다.

절차 — 이 순서로 한다

  1. 원본을 연다. 요청서·회의 녹취·계약서 원본을 찾아 연다. 남이 정리해 둔 요약본으로 시작하지 않는다 — 요약하면서 빠지는 것이 대개 제약 조건이다.
  2. 「한 문장」부터 쓴다. 「누가 무엇을 하면 무엇이 나온다」 한 문장. 한 문장에 안 들어가면 아직 정리가 안 된 것이므로 여기서 멈추고 더 묻는다.
  3. 「왜 만드나」를 쓴다. 이게 없으면 무슨 일이 생기는지. 목적이 흔들리면 나중에 완성 기준이 통째로 바뀐다.
  4. 「누가 쓰나」를 쓴다. 숙련도·기기·빈도까지. 뒤의 모든 결정이 여기서 나온다.
  5. 「안 하는 일」을 쓴다. 명세서의 절반이다. 적지 않으면 AI가 빈칸을 알아서 채운다.
  6. 입력·출력을 숫자로 쓴다. 글자 수·개수·크기·형식. 「적당히」가 하나라도 남으면 그 자리에서 결과가 갈린다.
  7. 완성 기준을 체크박스로 쓴다. 「잘 되면」은 기준이 아니다. 켜고 끄듯 판정할 수 있어야 한다.
  8. 기존 코드를 열어 본다. 무엇이 이미 있고 무엇이 없는지 확인한 뒤 「새로 만들 것」을 적는다. 현실을 모르고 쓴 명세는 쓸 수 없는 명세다.
  9. 모르는 것은 물음표로 남긴다. 지우지 않는다. 추측으로 채우는 순간 그게 나중에 사고가 된다.
  10. 고칠 때마다 이유를 한 줄 남긴다. 명세서는 한 번 쓰고 끝내는 문서가 아니라 매일 고치는 파일이다.

끝까지 한 번 — 「한 문장」이 세 번 바뀐 기록

1번 칸은 쉬워 보이는데 실제로는 제일 자주 틀립니다. 이 프로젝트에서 어떻게 바뀌었는지 그대로 보여드립니다.

첫 번째 — 회의록을 보고 쓴 것

상인회 담당자가 단톡방 소식을 복사해 붙여넣으면, 채널에 올릴 카드뉴스 두 장이 나온다.

→ 그럴듯해 보였고, 실제로 이대로 명세서를 다 썼습니다.

두 번째 — 원본을 열어 보니 「두 장」이 틀렸다

요청서 원문에는 이렇게 적혀 있었습니다.

1p 상권 캘린더 / 2p~ 개별 매장 소식

물결표 하나가 붙어 있었습니다. 「2p부터 여러 장」이라는 뜻입니다. 그런데 내가 정리한 문장에는 「두 장」으로 굳어 있었고, 명세서 「안 하는 일」에는 「3p 이상은 만들지 않는다」고까지 적혀 있었습니다. 요구사항을 정반대로 못 박은 것입니다.

…채널에 올릴 카드뉴스가 나온다.

세 번째 — 목적을 듣고 나니 문장이 방법이었다

이 기능을 왜 만드는지 물었더니 답이 이랬습니다.

본질은 프로젝트가 끝나도 상인·상인회 모두가 카카오 채널을 계속 쓰게 하는 것이다.

그러면 카드뉴스는 목적이 아니라 수단입니다. 1번 문장은 그대로 두되 2번 칸(왜 만드나)을 다시 썼고, 그 여파로 두 칸이 더 바뀌었습니다.

바뀐 내용
3. 누가 쓰나한 명 → (상인회 담당자 + 개별 매장 사장님)개별 상인도 「계속 쓰는」 대상이다. 둘째 사용자가 안 움직이면 기능이 돌지 않는다
7. 완성 기준「한 번 되는가」에 「계속 되는가」가 추가목적이 「계속 쓰임」이면 한 번 됨은 완성이 아니다

7번에 새로 붙은 줄은 이렇습니다 — 「교육 종료 4주 뒤에도 그 채널에 소식이 올라오고 있다.」 이건 개발이 끝난 날에는 확인할 수 없는 기준입니다. 목적이 바뀌면 이런 것까지 바뀝니다.

세 번의 수정에서 배울 것

첫 번째는 「그럴듯해 보였다」는 게 문제였습니다. 열 칸이 다 차 있고 숫자도 들어 있었습니다. 원본을 열기 전까지는 틀린 줄 알 수가 없었습니다.

두 번째는 요약본을 근거로 쓴 대가였습니다. 요약하면서 빠지는 것이 대개 제약 조건입니다. 물결표 하나가 사라지자 요구가 정반대가 됐습니다.

세 번째는 목적이 늦게 나온 것입니다. 이건 실수가 아니라 정상입니다. 처음부터 목적이 또렷한 일은 드뭅니다. 중요한 건 목적이 바뀌었을 때 어느 칸들이 따라 움직이는지 훑는 것입니다.

끝까지 한 번 더 — 「안 하는 일」은 어떻게 나오나

5번 칸이 제일 어렵습니다. 빈칸을 보고 있으면 아무것도 안 떠오릅니다. 질문을 바꾸면 나옵니다.

이렇게 물으면이 프로젝트에서 나온 답
이 기능이 「할 것 같은데」 안 할 일은?단톡방을 자동으로 읽는 것 — 카톡 채팅방은 외부에서 못 연다. 붙여넣기가 유일한 길
남들이 기대할 만한데 안 할 일은?채널에 자동으로 올리는 것 — 담당자가 확인 안 하고 나가면 사고가 난다
편해 보이지만 사용자를 막는 것은?매장별 계정 만들기 — 앱에 가입시키면 아무도 안 쓴다
이 사용자가 멈춰 설 자리는?디자인 고르게 하기 — 50~60대는 선택지에서 멈춘다
앞선 시도가 왜 폐기됐나?「우리가 만들어 드립니다」형은 유지보수·활용도 미지수로 부적합 판정됐다 → 이 기능도 같은 잣대에 오른다
마지막 질문이 제일 셌다

「앞선 시도가 왜 폐기됐나」는 초안에 아예 없던 항목입니다. 원본을 열고서야 나왔고, 이 기능 전체의 심판 기준이 됐습니다. 5번 칸을 채울 때 과거의 실패 기록부터 찾아보십시오.

더 알아보기 — 열 개의 칸

절차를 그대로 문서로 옮기면 이런 칸이 됩니다. 칸 이름은 바꿔도 되고, 빠뜨리면 안 되는 것은 5·6·7·9번입니다.

무엇을 적나흔한 실수
1. 한 문장으로누가 무엇을 하면 무엇이 나온다두세 문장으로 늘린다 = 아직 안 정해진 것
2. 왜 만드나없으면 무슨 일이 생기나수단을 목적으로 적는다
3. 누가 쓰나숙련도·기기·빈도「모든 사용자」
4. 하는 일단계로기능 나열
5. 안 하는 일경계아예 안 쓴다
6. 입력·출력숫자로「적당히」가 남는다
7. 완성 기준체크박스「잘 되면」
8. 있는 것 / 새로 만들 것코드를 본 결과코드를 안 보고 쓴다
9. 모르는 것물음표로추측으로 채운다
10. 변경 기록고친 이유칸 자체가 없다
더 알아보기 — PRD와 무엇이 다른가

내용은 거의 같습니다. 다른 것은 수명입니다.

PRD(제품 요구사항 문서)SDD 명세서
어디에 있나문서함 · 결재 시스템코드 옆 (docs/)
언제 고치나버전을 새로 낸다매일
누가 읽나사람사람 + AI
끝이 있나승인되면 끝제품이 살아 있는 동안 산다

그래서 명세서에는 변경 기록 칸이 반드시 있습니다. PRD에는 없어도 되는 칸입니다.

더 알아보기 — 처음부터 명확하게 못 쓰는 사람은 어떻게 하나

처음부터 명확하게 쓸 수 있는 사람은 없습니다. 쓸 수 있다면 그건 이미 해본 일이라는 뜻입니다.

명세서가 막는 것을 정확히 볼 필요가 있습니다. 명세서는 「모르는 것」을 막지 않습니다. 「AI가 모르는 것을 아는 척 채우는 것」을 막습니다.

그래서 9번 칸이 있습니다. 질문하며 넓히는 방식은 이 구조와 오히려 맞습니다 — 답이 나올 때마다 9번에서 꺼내 위 칸으로 옮기고 변경 기록에 한 줄 남기면 됩니다. 대화가 흘러가 버리는 대신 파일에 쌓이는 것, 차이는 그것뿐입니다.

덧붙여, 명세서를 사람이 직접 쓸 필요도 없습니다. 질문은 AI가 하고, 사람은 답하고, 받아쓰는 것도 AI가 합니다.

01차시에서 실제로 쓴 프롬프트. 순서대로 씁니다. 「왜 이 문장이 들어가나」가 이 탭의 본체입니다.

먼저 — 길이 둘이다

자료가 이미 있으면 「원본 읽고 → 쓰고 → 대조」로 갑니다. 머릿속에만 있으면 「나를 인터뷰해라」로 갑니다. 대부분은 두 번째입니다 — 처음부터 명확하게 쓸 수 있는 사람은 없으니까요.

⓪ 인터뷰 — 가장 많이 쓰는 방법
○○ 를 만들고 싶어. 나를 자세히 인터뷰해줘.

기술 구현, 화면, 예외 상황, 걱정되는 점, 맞바꿈을 물어라.
뻔한 건 묻지 말고, 내가 미처 생각 못 한 어려운 부분을 파고들어라.

한 번에 한두 개씩만 물어라.
내가 "모르겠다"고 하면 그건 그대로 "아직 모르는 것"에 적어 둬라.

다 다룰 때까지 계속 묻고, 그 다음 명세서를 파일로 써라.
왜 이게 기본인가 명세서를 내가 쓰는 게 아니라 답만 하면 됩니다. 그리고 AI가 묻는 질문 자체가 — 「이 경우엔 어떻게 하나요」 「A와 B 중 무엇을 포기하시겠습니까」 — 내가 생각 못 한 자리를 짚어 줍니다.

「모르겠다를 그대로 적어 둬라」가 특히 중요합니다. 이 줄이 없으면 AI가 대신 답을 지어냅니다. 이게 명세서 9번 칸이 채워지는 실제 경로입니다.

⚠️ 명세서가 끝나면 새 대화에서 시작하십시오. 인터뷰하며 쌓인 이야기가 다음 작업을 방해합니다.
① 원본부터 열게 한다 — 자료가 있을 때
이 기능의 명세서를 쓸 건데, 그 전에 원본 자료부터 찾아서 읽어줘.

- 요청서·회의록·계약서 원본을 찾아라. 누가 정리해 둔 요약본 말고.
- 찾은 문서의 제목과 날짜, 어디서 나온 건지 먼저 알려줘.
- 아직 명세서는 쓰지 마.
왜 이렇게 쓰나 마지막 줄이 핵심입니다. 「아직 쓰지 마」가 없으면 AI는 자료를 훑자마자 명세서를 써 버리고, 그러면 무엇을 근거로 썼는지 확인할 기회가 사라집니다.

⚠️ 다만 항상 쓰는 말은 아닙니다. 자료가 길거나 낯설 때만 필요합니다. 고칠 내용을 한 문장으로 말할 수 있으면 빼십시오 — 괜한 단계가 늘 뿐입니다.
② 명세서 초안을 쓰게 한다
이제 아래 열 개 칸으로 명세서를 써줘. docs/spec-<이름>.md 로 만들어.

1. 한 문장으로 — 누가 무엇을 하면 무엇이 나온다
2. 왜 만드나 — 없으면 무슨 일이 생기나
3. 누가 쓰나 — 숙련도·기기·빈도
4. 하는 일 — 단계로
5. 안 하는 일 ← 다섯 줄 이상
6. 입력과 출력 ← 전부 숫자로. 글자 수·개수·크기
7. 완성 기준 ← 체크박스로. "잘 되면"은 금지
8. 이미 있는 것 / 새로 만들 것
9. 아직 모르는 것 ← 물음표로 남기고 절대 채우지 마
10. 변경 기록 — 날짜·무엇을·왜

규칙:
- 원본에 없는 내용은 쓰지 마라. 모르면 9번에 물음표로 남겨라.
- "사용자 친화적으로" 같은 말은 쓰지 마라. 읽고 만든 결과가 달라질 수 있는 표현은 전부 숫자로 바꿔라.
- 각 항목이 원본 어디에서 나왔는지 내가 물으면 답할 수 있어야 한다.
왜 이렇게 쓰나 규칙 세 줄이 전부 「안 하는 일」입니다. 5번 칸을 명세서에 넣는 이유와 같습니다 — 금지하지 않으면 AI가 빈칸을 채웁니다. 특히 마지막 줄(「어디서 나왔는지 답할 수 있어야 한다」)은 지어내기를 크게 줄입니다.
③ 기존 코드를 먼저 보게 한다 (8번 칸)
8번 칸을 채우기 전에 지금 코드를 열어봐.

- 이 기능에 필요한 것들 중 이미 구현돼 있는 게 뭔지 찾아라.
- 비슷한 걸 하는 기존 함수·컴포넌트가 있으면 파일명과 줄 번호로 알려줘.
- 그 다음에 "새로 만들 것"만 8번에 적어라.
이 말을 빼면 AI는 이미 있는 기능을 또 만듭니다. 이번 실습에서는 필요한 여섯 가지 중 넷이 이미 있었습니다. 안 물어봤으면 포스터 기능을 한 벌 더 만들었을 것이고, 나중에 한쪽만 고치는 날 두 기능이 어긋납니다.
④ 대조 검증 — 가장 중요한 프롬프트
지금 쓴 명세서를 원본과 한 줄씩 대조해줘.

- 원본에 있는데 명세서에 빠진 것
- 명세서에 있는데 원본에 없는 것 (= 네가 지어낸 것)
- 원본과 명세서가 서로 반대로 적힌 것

세 가지를 표로 뽑아라. 없으면 "없음"이라고 해라.
고치지는 말고 일단 보여줘.
왜 이 프롬프트가 필요한가 초안은 그럴듯해 보입니다. 열 칸이 다 차 있고 숫자도 들어 있습니다. 이번 실습에서 이 프롬프트를 돌리자 다섯 군데가 어긋나 있었고, 그중 하나는 요구사항을 정반대로 적은 것이었습니다(「2p~ 여러 장」 → 「3p 이상 금지」).
「고치지는 말고 보여줘」가 들어간 이유는, 바로 고치게 하면 무엇이 틀렸었는지 사람이 못 보고 지나가기 때문입니다.

⚠️ 이것도 검증할 때만입니다. 이미 믿는 수정이면 그냥 고치게 하는 편이 빠릅니다.
⑤ 답이 하나 나올 때마다
<답> — 이거 확인됐어.

- 9번에서 이 항목을 빼고 해당 칸으로 옮겨라.
- 이 답 때문에 새로 생기는 질문이 있으면 9번에 추가해라.
- 이 답 때문에 바뀌는 다른 칸이 있는지 전부 훑어서 같이 고쳐라.
- 변경 기록에 날짜·무엇을·왜 한 줄씩 남겨라.
이게 명세서를 살아 있게 한다 두 번째 줄이 특히 중요합니다. 답 하나가 더 좁은 질문을 낳습니다. 「단톡방이 있다」는 답에서 곧바로 「그게 임원용인가 전 점포용인가」가 나왔고, 그 답에 따라 첫 단계가 통째로 바뀝니다.
세 번째 줄은 파급을 훑게 하는 장치입니다. 목적이 바뀌자 완성 기준까지 바뀐 적이 있었습니다.
더 알아보기 — 프롬프트에 거의 항상 들어가는 네 줄
  • 「아직 ○○는 하지 마」 — 확인할 기회를 남긴다
  • 「모르면 모른다고 해라」 — 지어내기를 막는 가장 짧은 문장
  • 「어디서 나왔는지 답할 수 있어야 한다」 — 근거를 붙들어 둔다
  • 「고치지 말고 먼저 보여줘」 — 사람이 판단할 자리를 만든다

네 줄 다 AI를 느리게 만드는 말입니다. 빨리 가려고 빼면 틀린 걸 늦게 알게 되고 결국 더 느려집니다.

다만 「모르면 모른다고 해라」만 예외가 없습니다. 나머지 셋은 자료가 길거나 검증이 필요할 때 쓰는 말입니다 — 작은 일에 전부 붙이면 단계만 늘어납니다.

같은 열 개 칸이 작업 종류에 따라 어떻게 갈리는지 봅니다. 대비가 가장 선명한 두 가지를 놓고 비교합니다.

예시로 배우는 게 제일 빠르다

아래는 실제로 납품하는 기능의 명세서에서 그대로 가져온 문장입니다. 지어낸 예시가 아닙니다. 전문은 부록 H · 명세서 실물에 있습니다.

1번 한 문장 — 같은 기능, 두 가지 쓰기

흔한 쓰기「상인회가 편하게 카드뉴스를 만들 수 있는 사용자 친화적인 도구」
→ 읽고 만든 결과가 사람마다 다릅니다. 무엇이 나오는지 모릅니다.
실제 명세서「상인회 담당자가 단톡방에 올라온 매장 소식을 복사해서 붙여넣으면, 채널에 올릴 카드뉴스가 나온다
누가 · 무엇을 하면 · 무엇이 나온다가 다 있습니다.

5번 안 하는 일 — 실제 문장 그대로

전부 「왜」가 붙어 있다
❌ 단톡방을 자동으로 읽지 않는다.
   카카오톡 채팅방은 외부에서 불러올 수 없다. 복사·붙여넣기가 유일한 길이다.

❌ 매장별 계정을 만들지 않는다.
   개별 매장은 단톡방에 글만 올린다. 앱에 가입시키면 아무도 안 쓴다.

❌ 디자인을 고르게 하지 않는다.
   선택지를 주면 50~60대는 멈춘다.

❌ 쿠폰·메시지를 더 가르치지 않는다.
   쿠폰은 현장에서 거의 안 쓰이고 있다.
이유가 없으면나중에 누군가 다시 넣자고 합니다. 「안 한다」 뒤에 「왜」를 붙이면 그 대화가 한 번에 끝납니다.

6번 입력·출력 — 숫자로

흔한 쓰기매장 소식을 적당히 담는다 · 글자가 길면 알아서 줄인다 · 장수는 내용에 따라
실제 명세서매장명 최대 10자 · 소식 최대 20자 · 한 장에 최대 5개, 넘으면 다음 장 · 일정은 최대 5건(달력이 세로를 먹어 6건부터 넘침 — 시안 실측)

괄호 안을 보십시오 — 왜 5건인지까지 적혀 있습니다. 02차시에서 시안을 실측해 나온 숫자입니다.

7번 완성 기준 — 판정되는가

흔한 쓰기[ ] 카드뉴스가 잘 나온다 · [ ] 담당자가 쉽게 쓴다 · [ ] 채널이 활성화된다
실제 명세서[ ] 실제 단톡방 글을 붙여넣어 매장 5곳이 정확히 나뉜다
[ ] 담당자가 설명 없이 혼자 끝까지 해낸다
[ ] 교육 종료 4주 뒤에도 채널에 소식이 올라온다

마지막 줄은 개발이 끝난 날에는 확인할 수 없는 기준입니다. 목적이 「계속 쓰임」이라 그렇게 됐습니다.

내 일에 대 보기 — 유형별 첫 문장

이런 일이라면1번 한 문장은 이렇게
매주 엑셀로 보고서를 만든다담당자가 이번 주 시트를 넣으면, 결재용 요약 한 장이 PDF로 나온다
예약 메일을 손으로 옮긴다예약 메일이 오면 사람 손 없이 캘린더와 장부에 같이 들어간다
견적서를 매번 다시 쓴다영업 담당이 품목과 수량을 고르면, 회사 양식 견적서가 PDF로 나온다
문의 답변을 매번 찾아 쓴다담당자가 문의 글을 붙여넣으면, 우리 자료에 근거한 답변 초안이 나온다

공통 모양은 하나입니다 — 「누가 · 무엇을 하면 · 무엇이 나온다」. 이 틀에 안 들어가면 아직 정리가 안 된 것입니다.

SDD는 우리가 만든 말이 아니다

GitHub이 공개한 spec-kit은 같은 방식을 도구로 만든 것입니다. 「명세가 실행 가능한 것이 되어 구현을 직접 이끌어 낸다」고 설명합니다.

spec-kit이 과정
Specify — 무엇을·왜에 집중01 명세서 1·2·5·6·7번
Plan — 기술 스택·구조03 기술 스택
Break down — 할 일로 쪼갬03 한 걸음
Implement — 만든다04~06
Converge — 명세와 대조01 프롬프트 ③ 대조 검증

출처 — github.com/github/spec-kit. 다른 점 하나 — 이 과정에는 「9번 모르는 것」이 있습니다. 초보자에게 가장 중요한 칸입니다.


같은 칸, 다른 내용 — 카드뉴스와 대시보드

카드뉴스 (스치며 보는 것)대시보드 (매일 조작하는 것)
1. 한 문장담당자가 단톡방 소식을 붙여넣으면 채널에 올릴 카드뉴스가 나온다원장이 매일 아침 한 화면을 보고 오늘 연락할 학생을 고른다
3. 누가 쓰나숙련도·기기 — 50~60대, 휴대폰과 PC보는 빈도결정 권한 — 매일 아침 5분, 고칠 권한은 없음
5. 안 하는 일단톡방을 자동으로 읽지 않는다 · 채널에 자동 게시하지 않는다이 화면에서는 고치지 않는다 — 수정은 원본 시스템에서만
6. 입력·출력매장명 10자 · 소식 20자 · 한 장에 5개데이터 출처와 갱신 주기 · 숫자 정의(「수강생 수」가 무엇을 센 것인가)
7. 완성 기준한 번 되는가 + 4주 뒤에도 쓰이는가합계가 원본과 일치 · 이상을 몇 초 안에 알아채나
제일 위험한 칸5번 — 안 적으면 AI가 못 하는 걸 하려 든다6번 — 숫자 정의가 다르면 화면 전체가 거짓이 된다
왜 이 둘인가

하나는 스치며 보는 것, 하나는 매일 조작하는 것입니다. 읽는 방식이 정반대라 같은 칸이 어떻게 달라지는지가 가장 잘 보입니다. 랜딩페이지·보고서·업무 자동화는 부록 C에 있습니다.

내 프로젝트는 어느 쪽인가

이 질문에 「예」면가까운 쪽
보는 사람이 1~2초 만에 스쳐 지나가나카드뉴스 쪽
같은 사람이 반복해서 열어 보나대시보드 쪽
보는 사람이 무언가를 누르나대시보드 쪽
결과물이 이미지·인쇄물로 나가나카드뉴스 쪽
틀렸을 때 제일 아픈 것이 숫자인가대시보드 쪽

시범 — 카드뉴스 명세서

절차 10단계를 실제로 돌렸습니다. 산출물은 docs/spec-cardnews.md입니다.

8단계에서 결론이 뒤집혔다

기존 코드(app/lib/cases.ts, 2,131줄)를 열어 보니 필요한 것 중 넷이 이미 있었습니다.

필요한 것상태
붙여넣기 입력이미 있음 — Steptext
이미지 위에 한글 얹기이미 있음 — poster
정사각 출력이미 있음 — poster.square
상인회 모드 노출이미 있음 — audience: "상인회"
매장별로 나누기새로 만들 것
월간 달력 그리기새로 만들 것 · 가장 어려움

명세서 없이 「카드뉴스 만들어 줘」로 시작했다면 AI는 포스터 기능이 있는 줄 모르고 같은 것을 또 만들었을 것입니다. 그러면 한쪽만 고치는 날이 오고, 그때부터 두 기능이 어긋납니다.

9번에 남긴 물음표 — 그대로 둔 것들

  • 그 단톡방이 임원용인가 전 점포용인가 — 임원용이면 첫 단계가 통째로 바뀐다
  • 계약·정산 형태 · 산출물 귀속
  • 채널 게시가 수동인가 자동인가 — 정리본과 현장 메모가 다르다
  • 대상 상권 2~3곳 · 벤치마킹할 채널 실물

내 프로젝트 — 지금 채웁니다

가지고 온 프로젝트로 같은 단계를 밟습니다. 한 시간을 넘기지 않습니다 — 길게 쓰면 안 지켜집니다.

양식 — 복사해서 채우세요
# 명세서 — 〈무엇〉

작성 ____-__-__ · 상태 초안
근거 문서 — (원본 자료 이름과 날짜. 요약본 말고)

## 1. 한 문장으로
누가 ____ 하면 ____ 가 나온다.

## 2. 왜 만드나
이게 없으면 지금 ____ 한 일이 벌어진다.

## 3. 누가 쓰나
| | |
|---|---|
| 사용자 | |
| 숙련도·기기 | |
| 쓰는 빈도 | |

## 4. 하는 일
1.
2.
3.

## 5. 안 하는 일   ← 다섯 줄 채우기
- 안 함:
- 안 함:
- 안 함:
- 안 함:
- 안 함:

## 6. 입력과 출력   ← 전부 숫자로
| 항목 | 기준 |
|---|---|
| | |

## 7. 완성 기준
- [ ]
- [ ]
- [ ]

## 8. 이미 있는 것 / 새로 만들 것
| 필요한 것 | 상태 |
|---|---|
| | |

## 9. 아직 모르는 것   ← 채우지 말고 물음표로
- ?
- ?

## 변경 기록
| 날짜 | 무엇을 | 왜 |
|---|---|---|
| | 초안 작성 | — |
채우는 순서 1 → 2 → 3 → 5 → 6 → 7 → 4 → 8 → 9 를 권합니다. 5번을 4번보다 먼저 쓰는 이유는, 「하는 일」을 먼저 쓰면 거기에 맞춰 경계를 느슨하게 잡게 되기 때문입니다.

자주 나오는 질문 — 얼마나 써야 하나

「A4 두 장」 같은 답은 없습니다. 칸마다 다릅니다. 시범 명세서의 실제 줄 수를 옆에 붙여 둡니다.

권장실제 (시범)
1. 한 문장1줄1줄두 문장이면 만들 것이 둘인 것
2. 왜 만드나5~10줄16줄목적은 짧을수록 또렷하다
3. 누가 쓰나표 하나38줄사용자가 둘이라 길어졌다
4. 하는 일3~7단계10줄열 단계면 걸음이 큰 것
5. 안 하는 일5줄 이상 · 위 제한 없음28줄많을수록 AI가 덜 지어낸다
6. 입력·출력표로 · 길어도 된다34줄유일하게 길어도 되는 칸
7. 완성 기준체크박스 3~8개22줄판정 가능한 것만
8. 있는 것/새로 만들 것표 하나29줄코드를 본 결과
9. 모르는 것비어 있으면 잘못13줄모르는 게 없을 리 없다

첫 초안은 100~150줄, 30분~1시간. 시범 명세서는 열두 번 고친 뒤 249줄(7,400자)이 됐습니다 — 자라는 게 정상입니다. 처음부터 그 길이로 쓰려 들면 짐작으로 채우게 됩니다.

어느 칸이 길어도 되나

짧아야 하는 칸 — 1 · 2 · 4길어지면 정리가 안 된 것입니다. 1번이 두 문장이면 만들 것이 둘인 겁니다. 4번이 열 단계면 걸음이 큰 겁니다.
길어도 되는 칸 — 5 · 6 · 7판정 가능한 내용이라 길수록 AI가 덜 지어냅니다. 「매장명 10자」가 스무 줄이어도 문제없고, 「적당히」 한 줄이 문제입니다.
자세해야 하는 건 「무엇」이지 「어떻게」가 아니다

명세서에 「어떻게 만들지」를 자세히 쓰기 시작하면 끝이 없습니다. 그건 03·04차시의 몫입니다. 명세서는 무엇이 맞는 상태인지만 자세히 씁니다.

언제 그만 쓰나

여기서 멈춘다 (셋 중 하나면)너무 길다 (하나라도)
6번에 「적당히」가 하나도 없다한 화면(스크롤 한 번)에 안 들어간다
9번에 물음표가 셋 이상 있다같은 말이 두 칸에 있다
1시간이 됐다「~해야 한다」가 「~이다」보다 많다 — 규칙이 아니라 사실을 적는 문서다

좋은 명세서는 초안이 짧고 변경 기록이 깁니다. 반대면 처음에 너무 많이 짐작한 것입니다.

막히면 이 순서로

  1. 1번이 한 문장에 안 들어간다 → 아직 정해지지 않은 겁니다. 「누가」부터 좁히십시오. 「모든 사용자」면 아직 못 정한 것입니다.
  2. 5번이 비어 있다 → 「이 기능이 할 것 같은데 안 할 일」을 떠올리십시오. 남들이 기대할 만한 것부터 적으면 나옵니다.
  3. 6번에 숫자가 안 나온다 → 「적당히」가 들어간 자리를 찾아 지금 임시로라도 숫자를 넣으십시오. 틀린 숫자는 고칠 수 있지만 빈칸은 AI가 채웁니다.
  4. 9번이 비어 있다 → 모르는 게 없을 리 없습니다. 계약·권한·데이터 출처·마감부터 의심하십시오.
잘 썼는지 보는 법

명세서를 AI에게 그대로 주고 만들게 했을 때 내가 기대한 것이 나오면 잘 쓴 것입니다. 프롬프트 탭 ④번(대조 검증)을 돌려 보면 바로 확인됩니다.

체크리스트

  • □ 원본 자료를 열고 썼는가 (요약본이 아니라)
  • □ 한 문장에 들어갔는가
  • 안 하는 일이 적혀 있는가
  • □ 「적당히」가 하나도 없는가
  • □ 완성 기준이 체크박스인가
  • □ 기존 코드를 열어 봤는가
  • □ 모르는 것이 물음표로 남아 있는가
  • □ 변경 기록 칸이 있는가

첫날 기록 — 대화 두 번에 다섯 군데가 바뀌었다

무엇을
「단톡방이 있는가」를 물음에서 확인된 전제상인회 임원 단톡방은 대체로 있다
「임원용인가 전 점포용인가」를 새 물음으로답 하나가 더 좁은 물음을 낳았다
2번 「왜 만드나」를 다시 씀「본질은 프로젝트가 끝나도 채널을 계속 쓰게 하는 것」 — 카드뉴스는 수단이었다
사용자를 하나에서 둘로개별 상인도 계속 쓰는 대상이다
완성 기준에 「지속」 3줄 추가목적이 「계속 쓰임」이면 「한 번 됨」은 완성이 아니다

진짜 목적은 늦게 나옵니다. 첫날 쓴 한 문장은 방법이었고 목적은 그 뒤 대화에서 나왔습니다. 목적이 바뀌자 완성 기준이 바뀌었고, 개발이 끝난 날에는 확인할 수 없는 기준이 생겼습니다.

여기서 막힌다 ① — 처음부터 명확하게 못 쓴다

이 과정을 시작하자마자 나온 반론이고, 바이브코딩 교육을 미덥잖게 봤던 이유이기도 합니다. 그리고 이 반론이 맞습니다.

답은 9번 칸입니다. 명세서는 정답을 먼저 적는 문서가 아니라 지금 아는 것과 모르는 것의 경계를 적고, 경계가 움직일 때마다 이유를 남기는 파일입니다.

여기서 막힌다 ② — 초안은 틀려 있었다

초안을 받아 본 사람이 물었습니다 — 「요청한 쪽이랑 논의한 게 잘 파악된 건가?」 원본 요청서를 대조하자 다섯 군데가 어긋나 있었습니다.

초안원본
「3p 이상은 만들지 않는다」「2p~ 개별 매장 소식」 — 물결표가 붙어 있었다. 여러 장을 상정한 요구를 정반대로 못 박았다
없음앞선 제안이 왜 폐기됐는지 — 「유지보수·활용도 미지수」. 이 기능도 같은 잣대에 오른다
「사용자 = 담당자」대상은 전원이 아니라 선별 — 2~3곳, 리터러시·완주도 기준
「자동 게시 안 함」으로 단정정리본은 수동, 현장 메모는 자동 — 단정할 자리가 아니라 확인할 자리

더 나쁜 것은 초안이 그럴듯해 보였다는 점입니다. 열 칸이 다 차 있고 숫자도 들어 있었습니다. 원본을 열기 전까지는 틀린 줄 알 수가 없었습니다.

지켜야 할 순서 — 원본 → 명세서. 정리본은 원본을 찾는 색인으로만 씁니다.

산출물

  • docs/spec-cardnews.md — 상권 카드뉴스 명세서
02 · 본 과정

디자인 시안진행 완료

코드를 짜기 전에 눈으로 볼 것을 먼저 만듭니다.

왜 별도 단계인가

AI에게 「예쁘게」라고 하면 평균값이 나옵니다. 그리고 마음에 안 들면 다시 시키고, 또 다시 시킵니다. 이 왕복이 「해줘」가 되는 지점입니다. 시안은 그 왕복을 앞으로 당겨 한 번에 끝내는 장치입니다. 코드가 없으니 고치는 데 몇 분이면 됩니다.

절차 — 이 순서로 한다

  1. 작업 종류를 한 줄로 판정한다.
    이것은 〈누가〉 〈어디서〉 〈몇 초〉 보는 〈무엇〉이다. 틀렸을 때 제일 아픈 것은 〈무엇〉이다.
    이 줄을 건너뛰면 엉뚱한 규칙집을 집어 듭니다.
  2. 층 ① — 숫자 기준을 적는다. 공개 표준에서 가져올 수 있는 것부터 적습니다(아래 표).
  3. 층 ② — 질문 여섯 개에 답한다. 취향을 묻지 않습니다.
  4. 층 ③ — 하지 않을 것을 적는다. AI의 기본값을 미리 막습니다.
  5. 시안을 두 안으로 만든다. 한 안만 만들면 「이게 맞나」밖에 못 묻습니다. 두 안이면 무엇을 포기할지를 묻게 되고, 그게 진짜 결정입니다.
  6. 기계로 검사한다. 눈으로 고르고, 검사는 기계에게 맡깁니다.
  7. 고른 뒤 명세서를 갱신한다. 시안을 하나 고르면 명세서의 숫자가 따라 움직입니다.

층 ① — 기계가 검사하는 것

눈으로는 멀쩡한데 기준 미달인 것들이 있습니다. 사람이 판단할 자리가 아닙니다. 「표준」은 공개된 기준이라 근거를 댈 수 있고, 「우리 규칙」은 우리가 정한 것이라 바꿀 수 있습니다.

항목기준출처
본문 명도 대비4.5 : 1 이상표준 — WCAG 2.2 성공기준 1.4.3 (레벨 AA)
큰 글자 명도 대비3 : 1 이상표준 — 같은 기준. 「큰 글자」는 18pt 이상 또는 14pt 굵게
글자가 아닌 것(테두리·아이콘)3 : 1 이상표준 — WCAG 1.4.11 비텍스트 대비
누를 것의 크기44×44pt (Apple) · 48×48dp (Material)
최소선 24×24
표준 — Apple HIG · Material Design · WCAG 2.2 2.5.8
최소 글자 크기매체마다 정한다우리 규칙
넘침0건우리 규칙 — 틀 밖으로 나가는 글자 없음
예시 데이터사실이어야 한다우리 규칙 — 날짜·요일을 지어내지 않는다

출처: W3C — WCAG 2.2 · Apple Human Interface Guidelines

층 ② — 사람이 판단하는 것: 질문 여섯 개

  1. 어디서 보나 — 화면 크기, 잘리는가, 인쇄되는가
  2. 몇 초 보나 — 스치는가, 읽는가, 조작하는가
  3. 누가 보나 — 나이·숙련도
  4. 한 번에 몇 개 — 넘치면 어디로 가나
  5. 만드는 사람이 고를 게 몇 개 — 선택지는 공짜가 아니다
  6. 틀리면 뭐가 제일 아픈가이 답이 「제일 크게 둘 것」을 정한다
6번이 기준을 만든다

「무엇이 제일 크냐」를 취향으로 정하면 매번 달라집니다. 틀렸을 때 제일 아픈 것을 제일 크게 두면 근거가 생기고, 다음 사람도 같은 결론에 옵니다.

층 ③ — 하지 않는 것

AI에게 그냥 시키면 몇 가지 모양으로 수렴합니다. 종류별 목록은 예시 탭에 있습니다. 공통으로 막는 것은 셋입니다.

  • 그라데이션 배경 — 글자 대비가 위치마다 달라져 층 ①을 통과시킬 수가 없다
  • 이모지로 항목 구분 — 기기마다 다르게 그려지고 이미지로 구우면 깨진다
  • 얇은 글씨(300 이하) — 작게 줄이거나 구우면 뭉갠다

화면이 없는 것은 어떻게 하나

챗봇·알림·업무 자동화처럼 볼 화면이 없는 것도 이 차시를 건너뛰지 않습니다. 「디자인」이 화면 모양이 아니라 사람이 만나는 접점이기 때문입니다. 세 층은 그대로 쓰고, 층 ①의 숫자만 바꿉니다.

화면이 있는 것챗봇 · 알림
시안이란레이아웃 그림주고받는 말 전체를 적은 것 — 첫 인사부터 오류 문구까지
층 ① 숫자명도 대비 · 글자 크기 · 넘침한 메시지 몇 줄까지 · 하루 몇 번까지 · 응답 몇 초 안에
「고를 게 몇 개」화면의 선택지버튼 몇 개까지 — 말로 답하게 할지 눌러 답하게 할지
「제일 크게 둘 것」가장 큰 글자첫 줄. 알림은 첫 줄만 읽힌다
층 ③ 막을 것그라데이션 · 이모지 구분「안녕하세요! 무엇을 도와드릴까요?」 같은 빈 인사 · 사과 반복 · 끌 방법이 없는 알림
두 안레이아웃 두 개같은 상황의 대화 두 벌 — 짧은 것과 친절한 것
알림에만 있는 숫자 — 「끄는 법」

화면은 안 보면 그만이지만 알림은 사람을 찾아옵니다. 그래서 층 ①에 항목이 하나 더 붙습니다 — 「몇 번 만에 끌 수 있나」. 끄는 방법이 없으면 며칠 안에 무시당하고, 무시당하는 알림은 없는 것만 못합니다.

더 알아보기 — 규칙을 AI가 실제로 따르게 하는 법

규칙을 정해도 다음 대화에서 잊힙니다. 강도 순서로 셋입니다.

단계어디에언제 읽히나쓸 자리
① 대화에 적는다채팅그 대화에서만일회성
② 문서에 적는다docs/*.md시킬 때 같이 건네야 함판단·맥락
규칙 파일에 박는다AGENTS.md · CLAUDE.md · .claude/skills/매번 자동으로계속 지킬 숫자

③에 다 넣으면 안 됩니다. 규칙 파일이 길어지면 사람도 AI도 안 읽습니다. 층 ①(숫자)만 올리고 층 ②·③은 문서에 둡니다.

더 알아보기 — 이미 있는 디자인 스킬을 쓸 때

잘 만들어진 디자인 스킬·가이드가 공개되어 있고, 직접 만들어 둔 것도 있을 수 있습니다. 그런데 가지고 있다고 쓸 수 있는 게 아닙니다.

이번 실습 레포에는 1,206줄짜리 디자인 스킬이 깔려 있었는데, 첫 줄에 적용 범위가 적혀 있었습니다 — 「랜딩페이지·포트폴리오·리디자인용. 대시보드·데이터테이블·다단계 UI는 아님.」 카드뉴스는 셋 다 아니었습니다.

그대로 적용했다면 랜딩페이지 문법(큰 히어로·모션·여백)이 카톡 카드에 얹혔을 겁니다. 스킬이 나쁜 게 아니라 종류 판정을 안 하고 집어 든 것이 문제입니다. 그래서 판정이 1단계입니다.

가져올 때는 이렇게 나눕니다 — 프리셋(값)은 버리고 방법은 가져온다.

더 알아보기 — 왜 「두 안」인가

한 안만 보여 주면 받는 사람은 「이게 맞나요?」밖에 못 묻습니다. 그러면 고칠 곳을 찾는 대화가 되고, 끝이 없습니다.

두 안을 나란히 놓으면 질문이 바뀝니다 — 「무엇을 포기하시겠습니까?」 이번 실습에서는 「기간이 한눈에 보이는 것」과 「휴대폰에서 잘 읽히는 것」 중 하나를 고르는 문제였습니다. 그건 현장을 아는 사람만 답할 수 있고, 한 번 답하면 끝나는 질문입니다.

세 안 이상은 만들지 않습니다. 고르는 쪽이 지칩니다.

02차시에서 실제로 쓴 프롬프트. 디자인은 특히 말을 안 하면 기본값이 나오는 영역이라, 금지 문장이 많습니다.

① 종류를 판정하게 한다
디자인 시안을 만들기 전에, 이게 무슨 종류의 작업인지 한 줄로 판정해줘.

형식: "이것은 <누가> <어디서> <몇 초> 보는 <무엇>이다. 틀렸을 때 제일 아픈 것은 <무엇>이다."

그리고 그 판정에 따라 어떤 기준을 적용할 건지 알려줘.
기존에 있는 디자인 스킬·가이드가 있으면, 그게 이 종류에 맞는지 적용 범위부터 확인해라.
마지막 줄이 사고를 막았다 이번 실습 레포에는 1,206줄짜리 디자인 스킬이 깔려 있었는데, 열어 보니 「랜딩페이지·포트폴리오용. 대시보드·데이터테이블은 아님」이라고 적혀 있었습니다. 확인 안 하고 썼으면 랜딩페이지 문법이 카톡 카드에 얹혔을 겁니다.
② 규칙을 먼저 파일로 만든다
시안을 그리기 전에 이 작업의 디자인 규칙을 파일로 만들어줘. docs/design-rules-<이름>.md

세 층으로 나눠서 써라.
- 층 ① 기계가 검사하는 것: 숫자만. 각 항목마다 "표준"인지 "우리 규칙"인지 표시하고, 표준이면 출처를 적어라.
- 층 ② 사람이 판단하는 것: 질문 여섯 개와 그 답
   (어디서 보나 / 몇 초 보나 / 누가 보나 / 한 번에 몇 개 /
    만드는 사람이 고를 게 몇 개 / 틀리면 뭐가 제일 아픈가)
- 층 ③ 하지 않는 것: 네가 그냥 만들면 나올 법한 기본값을 먼저 적고, 그걸 금지 목록으로 만들어라.

출처를 모르는 숫자는 "우리 규칙"으로 적어라. 표준인 척하지 마라.
두 군데가 핵심 층 ③을 「네가 그냥 만들면 나올 법한 것을 먼저 적어라」로 시킨 것 — AI가 자기 기본값을 스스로 진술하게 만드는 방식입니다.
그리고 마지막 줄 「표준인 척하지 마라」. 이게 없으면 그럴듯한 숫자에 없는 출처가 붙습니다.
③ 시안을 두 안으로 받는다
위 규칙에 맞춰 시안을 만들어줘. HTML 한 파일로, 실제 비율 그대로.

- 핵심 화면은 두 안으로 만들어라. 단, 예쁜 정도가 다른 두 안이 아니라
  서로 다른 것을 포기하는 두 안이어야 한다. 각 안마다 "무엇을 포기했는지"를 한 줄로 적어라.
- 색·글꼴·크기는 지금 코드에서 실제로 쓰는 값을 찾아서 그대로 써라. 새로 정하지 마라.
- 예시로 넣는 내용(날짜·요일·이름·숫자)은 실제와 맞아야 한다. 지어내지 마라.
- 층 ③ 금지 목록을 지켜라.
세 번째 줄을 넣고도 틀렸다 「지어내지 마라」를 넣었는데도 달력 요일이 실제 2026년 10월과 달랐습니다(1일이 목요일인데 수요일에). 프롬프트만으로는 안 됩니다. 그래서 다음 프롬프트가 필요합니다.
④ 기계로 검사하게 한다
시안이 층 ① 기준을 지키는지 스크립트로 검사해줘. 눈으로 보고 판단하지 마라.

검사할 것:
- 명도 대비: 모든 글자/배경 조합. 반투명(opacity)은 실제로 합성한 색으로 계산해라.
- 넘침: 각 요소가 틀 밖으로 나가는지 실제로 렌더해서 재라.
- 예시 데이터: 날짜·요일이 실제 달력과 맞는지.

결과를 통과/미달 표로 보여주고, 미달이면 "어디까지 올려야 통과하는지" 숫자로 알려줘.
스크립트는 지우지 말고 scripts/ 에 남겨라.
이 프롬프트가 잡아낸 것 명도 대비 2건 미달(4.39:1, 4.35:1 — 눈으로는 전혀 몰랐음)과 세 장 전부 넘침(84~110px). 「어디까지 올려야 하는지」를 같이 시켰더니 최소 투명도 0.62 / 0.72라는 숫자가 나와 바로 고칠 수 있었습니다.
「스크립트는 남겨라」 — 이게 06차시에서 자동 검사가 됩니다. 한 번 쓰고 버리면 다음에 또 짭니다.
⑤ 고른 뒤 — 명세서로 돌아간다
<안 A> 로 간다.

이 선택 때문에 바뀌는 것을 전부 찾아줘.
- 명세서에서 고쳐야 할 숫자가 있나
- 이 안 때문에 새로 생기는 제약이 있나
찾아서 명세서를 고치고, 변경 기록에 이유를 남겨라.
시안을 고르면 명세서가 움직인다 달력 격자를 고르자 「1p 최대 8건」이 「5건」으로 바뀌었습니다. 달력이 세로를 먹기 때문입니다. 이 프롬프트가 없으면 명세서와 시안이 서로 다른 말을 하게 되고, 그 상태로 개발이 시작됩니다.
더 알아보기 — 디자인 프롬프트에만 있는 함정

디자인은 「안 된다」가 잘 안 통하는 영역입니다. 「예쁘게 하지 마」라고 할 수 없으니까요. 그래서 세 가지로 바꿔 말합니다.

  • 금지 목록을 구체적인 모양으로 — 「촌스럽게 하지 마」(X) / 「그라데이션 배경 쓰지 마」(O)
  • 값을 새로 정하지 못하게 — 「지금 코드에서 쓰는 값을 찾아서 써라」. 새로 정하게 두면 매번 달라진다
  • 판정 가능한 숫자로 — 「잘 읽히게」(X) / 「명도 대비 4.5:1 이상」(O)

세 층은 그대로 두고 값만 갈아 끼웁니다. 대비가 가장 선명한 두 가지로 봅니다.

0단계 판정 — 두 가지 예

한 줄 판정읽는 방식제일 아픈 실수
카드뉴스손님이 휴대폰에서 1~2초 스치는 정보 이미지스침날짜가 틀린다
대시보드담당자가 매일 몇 분씩 조작하는 화면조작숫자가 틀린다 · 뭘 봐야 할지 모른다

층 ① — 기계가 검사하는 숫자

카드뉴스대시보드
명도 대비둘 다 같다 — 본문 4.5:1 · 큰 글자 3:1 (표준)
최소 글자1080px 출력 기준 36px12px
누를 것의 크기해당 없음44×44pt 이상 (표준)
넘침틀 밖으로 글자 안 나감표·차트는 자기 칸 안에서만 가로 스크롤. 본문이 옆으로 밀리면 안 됨
이 종류만의 검사정사각으로 잘려도 안 잘림 · 예시 날짜가 실제와 맞음차트 축 라벨이 실제 데이터 범위 안 · 빈 상태 화면이 있는가

층 ② — 질문은 같고 답이 다르다

질문카드뉴스대시보드
어디서 보나카톡 채널 · 정사각으로 잘림사무실 PC · 넓은 화면
몇 초 보나1~2초매일 5분, 반복
고를 게 몇 개0개 — 고령 사용자는 선택지에서 멈춘다필요한 만큼 — 매일 쓰는 사람은 조작을 원한다
제일 크게 둘 것날짜지금 조치해야 할 것. 예쁜 큰 숫자가 아니라

층 ③ — 종류별 기본값 막기

AI가 그냥 하면 나오는 것 — 막을 것
카드뉴스그라데이션 · 둥근 카드 위 둥근 카드 · 이모지 구분 · 가운데 정렬 본문 · 얇은 글씨
대시보드모든 블록을 똑같은 카드로 만들기(강약이 사라진다) · 큰 숫자 타일 4개를 습관적으로 맨 위에 · 강조색과 상태색(정상·경고·위험)을 같은 색으로
이 표를 쓰는 법

0단계 한 줄 판정 → 가까운 쪽 열을 뽑아 규칙 파일에 적기. 딱 맞는 열이 없으면 새로 만듭니다. 랜딩페이지·보고서는 부록 C에 있습니다.

시범 — 카드뉴스 시안

1단계 판정

중장년 손님이 휴대폰에서 1~2초 스치는 정보 이미지. 만드는 사람은 50~60대 상인회 담당자. 틀렸을 때 제일 아픈 것은 날짜.

5단계 — 두 안

장점포기하는 것
안 A · 달력 격자한 달이 한눈에. 「5일~11일 특가」 같은 기간이 보인다칸이 작아 글자를 못 넣는다 → 아래 목록이 필수
안 B · 일정 목록휴대폰에서 훨씬 잘 읽힌다. 만들기도 쉽다기간이 한눈에 안 보인다
결정 — 안 A

현장을 아는 쪽의 판단으로 달력 격자. 그러면 제약이 따라옵니다 — 칸에 글자를 못 넣으니 아래 목록이 선택이 아니라 필수가 되고, 달력이 세로를 먹으므로 목록 건수가 줄어듭니다. 명세서의 「최대 8건」이 5건으로 바뀌었습니다.

6단계 — 기계 검사가 잡은 것

먼저 명도 대비. 눈으로는 전혀 몰랐던 두 곳이 걸렸습니다.

조합대비판정
흐린 흰 글자 60% · 짙은 바탕4.39 : 1미달
흐린 흰 글자 70% · 매장 카드4.35 : 1미달

최소 투명도가 0.62 / 0.72라는 것도 계산해서 나왔습니다. 「덜 중요하니까 흐리게」 하는 자리 — 부제·푸터·요일 표시 — 가 이 규칙의 단골 위반자입니다.

그다음 넘침. 세 장 전부 아래가 잘려 있었습니다.

카드틀 높이내용 높이넘침
1p 안 A36044988.8px
1p 안 B36044483.6px
2p 매장 소식360470109.8px

원인은 카드가 본문 줄간격(1.7)을 그대로 물려받은 것. 두 번 줄여 세 장 모두 0으로 맞췄습니다.

같은 검사가 하나 더 잡았습니다 — 달력의 요일이 실제 2026년 10월과 달랐습니다. 1일은 목요일인데 수요일에 놓여 있었습니다.


내 프로젝트 — 지금 채웁니다

양식 — 복사해서 채우세요
# 디자인 규칙 — 〈무엇〉

## 0. 한 줄 판정
이것은 〈누가〉 〈어디서〉 〈몇 초〉 보는 〈무엇〉 이다.
틀렸을 때 제일 아픈 것은 ____ 이다.

가까운 쪽:  [ ] 스치며 보는 것   [ ] 매일 조작하는 것

## 층 1  기계가 검사하는 것 (숫자만)
| 항목 | 기준 | 표준/우리 규칙 |
|---|---|---|
| 본문 명도 대비 | 4.5 : 1 | 표준 (WCAG 1.4.3) |
| 큰 글자 명도 대비 | 3 : 1 | 표준 |
| 최소 글자 크기 | | 우리 규칙 |
| 넘침 | 0건 | 우리 규칙 |
| | | |

## 층 2  사람이 판단하는 것
1. 어디서 보나 →
2. 몇 초 보나 →
3. 누가 보나 →
4. 한 번에 몇 개 →
5. 만드는 사람이 고를 게 몇 개 →
6. 틀리면 뭐가 제일 아픈가 →
   → 그래서 화면에서 가장 크게 둘 것:

## 층 3  하지 않는 것
- 금지:
- 금지:
- 금지:

## 시안 두 안
| | 장점 | 포기하는 것 |
|---|---|---|
| 안 A | | |
| 안 B | | |

선택: ____ / 이 선택 때문에 명세서에서 바뀌는 것:
0번을 먼저 쓴다 판정 한 줄이 아래 세 층을 전부 정합니다. 판정이 안 써지면 01차시 명세서 1·3번으로 돌아가십시오 — 거기가 비어 있는 것입니다.

이 순서로

  1. 0번 판정을 쓴다. 예시 탭의 「내 프로젝트는 어느 쪽인가」로 가까운 쪽을 고른다
  2. 예시 탭 해당 열에서 층 ①·②·③ 값을 뽑아 양식에 옮긴다
  3. 프롬프트 탭 ②번으로 규칙 파일을 만들게 한다
  4. 프롬프트 탭 ③번으로 시안 두 안을 받는다 — 서로 다른 것을 포기하는 두 안으로
  5. 프롬프트 탭 ④번으로 기계 검사를 돌린다. 눈으로 세지 않는다
  6. 고른 뒤 프롬프트 탭 ⑤번으로 명세서에서 바뀌는 숫자를 찾아 고친다

막히면 이 순서로

  1. 「고를 게 몇 개」가 안 정해진다 → 쓰는 사람이 그 화면을 얼마나 자주 여는지로 정하십시오. 어쩌다 한 번이면 0개, 매일이면 조작을 원합니다.
  2. 두 안이 그냥 「예쁜 정도」만 다르다 → 잘못 만든 겁니다. 서로 다른 것을 포기해야 합니다. 「무엇을 포기했나」가 한 줄로 안 나오면 다시 받으십시오.
  3. 검사할 숫자가 없다 → 명도 대비와 넘침은 어떤 작업에도 있습니다. 그 둘부터 돌리십시오.
검사 도구

시범에서 쓴 것은 scripts/design-check.py로 남겼고, 06차시에서 자동으로 도는 검사로 만듭니다.

체크리스트

  • □ 작업 종류를 한 줄로 판정했는가
  • □ 층 ① 숫자가 적혀 있는가 — 표준과 우리 규칙을 구분해서
  • □ 층 ② 여섯 질문에 답했는가 — 특히 6번
  • □ 층 ③ 금지 목록이 있는가
  • □ 시안이 두 안인가
  • 기계로 검사했는가 (눈으로 본 것 말고)
  • □ 고른 뒤 명세서를 고쳤는가
여기서 막힌다 ① — 기준이 없으면 취향 싸움이 된다

「여백을 충분히」 「일관성 있게」 같은 말은 기준이 아닙니다. 그 말을 듣고 만든 결과가 서로 다를 수 있기 때문입니다(01차시의 시험을 그대로 적용하면 그렇습니다).

그래서 세 층으로 나눕니다. 「예쁜지」는 싸움이 되지만 「4.39는 미달」은 싸움이 되지 않습니다.

여기서 막힌다 ② — 가진 스킬이 이 작업에 안 맞았다

레포에 이미 1,206줄짜리 디자인 스킬이 깔려 있었지만 적용 범위가 달랐습니다. 가지고 있다고 쓸 수 있는 게 아닙니다. 종류 판정을 안 하고 집어 들면 엉뚱한 문법이 얹힙니다.

여기서 막힌다 ③ — 눈으로 본 것은 증거가 아니다

시안 세 장을 눈으로 다 확인한 뒤 검사를 돌렸더니 세 장 전부 84~110px 넘쳐 있었습니다. 명도 대비도 두 곳이 미달이었습니다.

그리고 01차시에 「지어내지 않는다」를 써 놓고, 02차시 시안의 달력 요일을 확인하지 않고 그렸습니다. 같은 실수를 한 차시 만에 반복했습니다.

시안은 눈으로 고르고, 검사는 기계에게 맡깁니다.

산출물

  • docs/mockup-cardnews.html — 시안 3장
  • docs/design-rules-cardnews.md — 세 층을 규칙으로
  • scripts/design-check.py — 명도 대비 + 넘침 검사
03 · 본 과정

기술 스택 · 개발 계획진행 완료

무엇으로 만들지, 어떤 순서로 만들지를 정합니다. 여기서 잘못 잡으면 뒤가 전부 흔들립니다.

이 차시가 답하는 두 가지

  1. 무엇으로 만드나 — 어떤 언어·도구·서비스를 쓸까
  2. 어떤 순서로 만드나 — 한 번에 얼마만큼 시킬까

먼저 — 프로그램은 대개 세 부분이다

용어가 어렵게 들리지만 구조는 식당과 같습니다.

부분식당으로 치면하는 일
화면
프론트엔드 · front-end
사람이 보고 누르는 곳
일하는 곳
백엔드 · back-end
주방계산하고, 저장하고, 바깥 서비스를 부른다
창고
데이터베이스 · DB
냉장고자료를 담아 둔다
셋이 다 필요한 건 아니다

카드뉴스처럼 화면에서 그려서 저장만 하면 되는 것은 주방도 냉장고도 필요 없습니다. 자동화처럼 사람이 볼 화면이 없는 것은 홀이 없습니다. 안 만들어도 되는 부분을 알아보는 것이 이 차시의 절반입니다.

① 언어 — 무엇으로 쓰나

셋만 알면 대부분 해결됩니다.

언어한 줄로잘하는 것약한 것
자바스크립트
JavaScript · JS
웹 화면의 유일한 언어 브라우저에서 도는 모든 것. 주방 쪽도 할 수 있다 자료 계산·문서 처리는 파이썬이 편하다
파이썬
Python
자료를 다루는 언어 엑셀·PDF·이미지 처리, 자동화 스크립트, 계산 웹 화면을 직접 못 만든다
앱스크립트
Google Apps Script · GAS
구글 문서 안에서 도는 자바스크립트 시트·지메일·캘린더·드라이브를 바로 만진다. 설치·서버가 필요 없다 한도가 빡빡하다 (아래 표)
고르는 기준 한 줄

사람이 볼 화면이 있나? → 자바스크립트. 자료를 다루는 일인가? → 파이썬. 구글 시트·지메일 안의 일인가? → 앱스크립트.

타입스크립트(TypeScript)라는 말도 자주 보이는데, 자바스크립트에 「이 값은 숫자다」 같은 표시를 붙인 것입니다. 다른 언어가 아니라 같은 언어의 엄격한 버전이고, AI가 쓴 코드의 실수를 기계가 잡아내기 좋아집니다. 04차시 테스트와 같은 역할을 일부 합니다.

② 창고 — 자료를 어디에 담나

선택지한 줄로좋은 점한계
구글 시트창고를 엑셀로 쓴다사람이 직접 열어서 고칠 수 있다. 배울 게 없다줄이 많아지면 느리다. 여럿이 동시에 고치면 꼬인다
SQLite
파일 하나가 곧 창고
작은 진짜 창고빠르고 공짜. 파일 하나라 옮기기 쉽다사람이 직접 못 연다. 여러 컴퓨터에서 같이 쓰기 어렵다
Supabase
수파베이스
창고 + 로그인·파일보관·실시간이 한 묶음흩어진 것들을 한 번에 해결. 무료 구간이 있다새로 배울 게 있다. 바깥 서비스에 매인다
가장 흔한 실수 — 창고부터 고른다

「데이터베이스 뭐 쓰지?」부터 묻는 경우가 많은데, 대부분의 첫 프로젝트는 창고가 필요 없습니다. 만든 결과를 내려받아 쓰거나, 이미 쓰던 시트에 적으면 됩니다.

창고가 정말 필요한 때는 「여러 사람이 각자 접속해서 같은 자료를 본다」일 때입니다. 혼자 쓰는 도구라면 대개 필요 없습니다.

③ 어디서 돌리나

선택지언제 쓰나주의
내 컴퓨터나만 쓰는 것. 손으로 실행컴퓨터가 꺼지면 안 돈다
상시 켜둔 컴퓨터
집·사무실에 둔 작은 PC
매일 자동으로 도는 일인터넷·전원이 끊기면 조용히 멈춘다
클라우드
Vercel 등 남의 서버
남이 접속해서 보는 화면무료 요금제의 한도를 먼저 본다
구글
앱스크립트
시트·메일 관련 자동화실행 시간·횟수 한도가 있다

④ 무료 한도 — 이게 03차시의 진짜 함정

기능이 안 되는 게 아니라 한도에 걸려 조용히 멈추는 것이 실무에서 제일 자주 터집니다. 들이기 전에 숫자를 찾아봅니다.

서비스한도걸리면
앱스크립트 — 한 번 실행6분 (개인·회사 계정 동일)중간에 잘린다. 자료가 많으면 나눠 돌려야 한다
앱스크립트 — 자동 실행 총량개인 계정 하루 90분 · 회사(Workspace) 계정 하루 6시간그날 남은 자동 실행이 안 돈다
앱스크립트 — 메일 받는 사람 수개인 하루 100명 · 회사 하루 1,500명메일이 안 나간다
앱스크립트 — 바깥 호출개인 하루 20,000회 · 회사 100,000회넉넉한 편
클라우드 무료 요금제 — 예약 실행서비스마다 다름. 하루 1회만 허용하는 곳도 있다⚠️ 설정이 거부되면서 배포 전체가 실패할 수 있다 — 실제로 겪었다 (예시 탭)

근거 — Google, Apps Script quotas and limitations. 숫자는 바뀔 수 있으니 쓰기 전에 원본을 확인하십시오.

⑤ 그래서 새것을 들일까 말까

후보가 나오면 「없으면 어떻게 하나」를 먼저 씁니다. 이 한 줄에 답이 나오면 대개 안 들여도 됩니다.

비용언제 청구되나
배우는 비용지금 — 문서 읽고 붙이는 시간
고치는 비용나중에 — 안 써 본 것일수록 비싸다
중복 비용계속 — 같은 일을 하는 것이 두 벌이 되면, 한쪽만 고치는 날 어긋난다
돌아가는 비용매번 — 호출료, 기다리는 시간, 한도
판단 기준 한 줄

「없으면 어떻게 할 건가?」에 답이 나오면 안 들입니다. 답이 「손으로 한다」인데 그 손이 한 달에 한 번이면, 역시 안 들입니다.

절차 — 이 순서로 한다

  1. 새로 들일 후보를 적는다. 라이브러리·서비스·API 무엇이든.
  2. 후보마다 「없으면 어떻게 하나」를 쓴다. 답이 나오면 대개 안 들여도 됩니다.
  3. 그래도 들일 것에는 값을 매긴다 — 아래 네 가지 비용으로.
  4. 작업을 「한 걸음」씩 쪼갠다.
  5. 다음 세 걸음까지만 계획한다. 그 뒤는 셋째 걸음를 마치고 다시 정합니다.

새것은 왜 비싼가 — 네 가지 비용

비용언제 청구되나
배우는 비용지금 — 문서 읽고 붙이는 시간
고장 났을 때 고치는 비용나중에 — 안 써 본 것일수록 비쌈
중복 비용계속 — 같은 일을 하는 것이 두 벌이 되면, 한쪽만 고치는 날 어긋난다
돌아가는 비용매번 — API 호출료, 응답 대기 시간, 한도
판단 기준 한 줄

「없으면 어떻게 할 건가?」에 답이 나오면 안 들입니다. 답이 「손으로 한다」인데 그 손이 한 달에 한 번이면, 역시 안 들입니다.

쪼개는 크기 — 「한 걸음」

한 번에 시키는 크기의 기준은 딱 하나입니다.

이 걸음이 끝났을 때, 내가 화면을 열어서 맞는지 틀린지 판단할 수 있는가.
좋은 걸음「색면 배경에 달력 격자만 그린다. 일정은 고정값으로.」 → 열어 보면 맞는지 안다
나쁜 걸음「카드뉴스 기능을 만든다」 → 다 만들어질 때까지 맞는지 모른다. 틀렸다는 걸 제일 늦게 안다

걸음이 커질수록 「해줘」에 가까워집니다. 확인할 수 없는 크기로 시키면 확인을 안 하게 되고, 확인을 안 하면 쌓입니다.

더 알아보기 — 계획은 왜 짧아야 하나

긴 계획은 1단계가 끝나는 순간 틀립니다. 1단계에서 알게 된 것이 2~5단계의 전제를 바꾸기 때문입니다. 그런데 계획을 길게 써 두면 고치기가 아까워서 틀린 계획을 그냥 따라갑니다.

그래서 다음 세 걸음까지만 씁니다. 세 개를 마치면 다시 세 개를 씁니다. 명세서 9번(모르는 것)과 같은 장치입니다 — 모르는 걸 안다고 적지 않는 것.

더 알아보기 — AI가 새것을 좋아한다

AI에게 「이거 어떻게 만들지?」라고 물으면 새 라이브러리를 추천하는 쪽으로 기웁니다. 그게 문서에 많이 나와 있기 때문입니다. 지금 내 코드에 이미 있는 것은 AI가 모릅니다 — 알려 주기 전에는.

그래서 이 차시의 프롬프트는 전부 「먼저 지금 코드를 봐라」로 시작합니다.

03차시에서 실제로 쓴 프롬프트.

① 새것을 들이기 전에 지금 것을 뒤지게 한다
〈만들 것〉 을 만들려고 해. 새 라이브러리를 추천하기 전에 지금 코드부터 뒤져줘.

- 비슷한 일을 하는 기존 코드가 있나? 파일명과 줄 번호로.
- 그걸 고쳐 쓰면 되는 부분과, 정말로 없는 부분을 나눠줘.
- 새로 들여야 한다고 판단되면, "없으면 어떻게 하는지"를 먼저 써라.

아직 코드는 쓰지 마.
세 번째 줄이 핵심 「없으면 어떻게 하나」를 먼저 쓰게 하면, 그 답을 쓰다가 안 들여도 된다는 결론이 나오는 경우가 많습니다. 이번 시범에서도 그랬습니다.
② 한 번에 시켜서 눈으로 확인할 수 있는 크기로 쪼개게 한다
이제 작업을 쪼개줘. 기준은 하나야.

"이 걸음이 끝났을 때 내가 화면을 열어서 맞는지 틀린지 판단할 수 있는가"

- 판단할 수 없으면 더 쪼개라.
- 걸음마다 "무엇을 보면 됐는지 아는가"를 한 줄로 적어라.
- 다음 세 걸음까지만 써라. 그 뒤는 쓰지 마.
마지막 줄을 빼면 AI는 끝까지 다 계획합니다. 그리고 그 계획은 1단계가 끝나는 순간 틀립니다. 그런데 길게 써 두면 고치기 아까워서 틀린 계획을 따라가게 됩니다.
③ 비용을 따지게 한다 (그래도 새것이 필요할 때)
〈후보〉 를 들인다면 아래 네 가지를 각각 적어줘. 모르면 모른다고 해라.

- 배우는 비용: 붙이는 데 얼마나 걸리나
- 고치는 비용: 고장 나면 내가 고칠 수 있나
- 중복 비용: 지금 코드에 같은 일을 하는 게 있나
- 돌아가는 비용: 호출료·응답 시간·한도

그리고 "안 들이고 가는 길"도 같이 적어라. 둘을 비교해서 나에게 판단하게 해줘.
마지막 줄 「판단은 내가 한다」를 명시합니다. 이걸 안 쓰면 AI가 결론까지 내리고, 그 결론이 대개 「새것을 씁시다」입니다.
더 알아보기 — 03차시 프롬프트의 공통점

셋 다 「지금 있는 것」을 먼저 보게 하고, 「없으면 어떻게 하나」를 먼저 쓰게 합니다. AI의 기본값이 「새것 추천」이기 때문입니다. 02차시에서 디자인 기본값을 막았던 것과 같은 구조입니다.

종류마다 이 차시에서 정하는 것이 다릅니다. 그리고 실제로 어떻게 판단했는지를 사례로 봅니다.

종류별로 정할 것

카드뉴스 (스치며 보는 것)대시보드 (매일 조작하는 것)
정할 핵심그리는 방식 — 기존 렌더러 확장 vs 신규데이터를 어디서 읽나 — 원본 직접 vs 중간 저장
흔히 비싸지는 선택같은 기능을 두 벌 만들어 놓고 한쪽만 고치게 되는 것화면마다 숫자를 따로 계산해 같은 지표가 화면마다 다르게 나오는 것
첫 걸음고정 데이터로 한 장 그려 보기지표 하나만 띄우기 — 원본과 숫자 맞춰 보기
새것을 들일 만한 때거의 없음 — 그리는 일은 기존 도구로 대개 된다차트. 단 한 종류만 쓰고 시작한다
먼저 정해야 할 것출력 크기와 잘리는 규격지표 정의 — 「수강생 수」가 무엇을 센 숫자인가
대시보드의 함정 하나

대시보드는 03차시에서 실패가 결정됩니다. 화면마다 숫자를 따로 계산하게 만들면, 나중에 「합계가 안 맞는다」가 나오고 그때는 전부 뜯어야 합니다. 숫자를 계산하는 자리를 한 곳으로 정하는 게 이 차시의 일입니다.

실제 프로젝트는 무엇으로 되어 있나

이 교재를 쓴 사람이 운영 중인 것들입니다. 비어 있는 칸을 보십시오 — 안 만든 부분이 더 많습니다.

무엇화면일하는 곳창고어디서 도나
상인 교육 도구
이번 시범 프로젝트
자바스크립트없음 — 브라우저가 직접 그린다없음 — 만들어서 내려받는다클라우드
학원 관리 화면 자바스크립트자바스크립트SQLite 계열상시 켜둔 컴퓨터
예약 메일 자동 정리 없음 — 사람이 볼 화면이 없다파이썬구글 캘린더 + 문서상시 켜둔 컴퓨터
주문 자동 처리 없음앱스크립트구글 시트구글
회사 소개 페이지 자바스크립트없음없음클라우드
표에서 보이는 것

다섯 중 셋은 창고가 없고, 셋은 일하는 곳이 없습니다. 그리고 둘은 화면이 아예 없습니다.

「제대로 된 프로그램은 세 부분이 다 있어야 한다」는 생각이 가장 비싼 오해입니다. 실제로는 필요한 부분만 만듭니다.

무엇을 만드느냐에 따른 기본 조합

만들 것기본 조합여기에 창고를 더할 때
이미지·문서를 만들어 내려받는 도구자바스크립트 화면 하나. 끝만든 것을 나중에 다시 꺼내 봐야 할 때
혼자 보는 관리 화면자바스크립트 + 구글 시트줄이 수천 개로 늘거나 느려질 때
여럿이 로그인해서 쓰는 것자바스크립트 + Supabase처음부터 필요 — 로그인이 곧 창고
매일 도는 자동화파이썬 + 상시 켜둔 컴퓨터결과를 쌓아서 봐야 할 때
구글 시트·메일 안의 자동화앱스크립트. 끝거의 필요 없음 — 시트가 창고
남에게 보여줄 소개 페이지자바스크립트 + 클라우드문의를 쌓아 둬야 할 때 (메일로 받으면 창고 불필요)
「로그인이 필요한가」가 갈림길이다

로그인이 필요하면 누가 누구인지 기억해야 하므로 창고가 반드시 생깁니다. 그러면 만들 것이 두 배가 됩니다.

그래서 첫 프로젝트에서는 로그인을 피할 방법부터 찾습니다 — 링크를 아는 사람만 쓰게 하거나, 이미 쓰는 로그인(구글·카카오)에 얹거나.


판단 사례 여섯 개

전부 실제로 있었던 일입니다. 형식은 같습니다 — 후보 → 「없으면 어떻게 하나」 → 결정 → 나중에 어떻게 됐나.

만들려던 것후보와 판단나중에
예약 메일을 캘린더·장부에 넣기
업무 자동화
후보: 자동화 SaaS
없으면? 메일을 읽어 옮기는 일은 짧은 스크립트로 된다
안 들임. 스크립트 + 상시 켜둔 컴퓨터의 예약 실행
✅ 잘 돎. 대신 「어제 실제로 돌았나」를 확인하는 장치가 따로 필요했다
매일 아침 브리핑 자동 발송
업무 자동화
후보: 호스팅 업체의 예약 실행 기능
없으면? 내 컴퓨터에서 돌린다
들임. 이미 그 업체에 배포돼 있으니까
무료 요금제는 하루 한 번만 허용. 30분마다 돌리는 설정을 넣자 배포 전체가 거절됐고, 같이 올린 다른 수정 두 건까지 조용히 막혔다 → 결국 내 컴퓨터 예약 실행으로 옮김
웹앱을 서버에 계속 띄워 두기
운영
후보: 프로세스 관리 도구
없으면? 꺼지면 손으로 켠다
들임. 표준적인 선택
❌ 도구와 프레임워크가 서로 물려 프로세스가 계속 죽고 되살아났다. 겉보기엔 정상이라 몇 주 동안 몰랐다. 재시작 횟수가 천만 단위로 찍혀 있었다
메일 발송
기능
후보: 메일 발송 서비스
없으면? 직접 메일 서버를 다룬다 — 훨씬 비싸다
들임
⚠️ 잘 돎. 단 배달 확인 API가 기본 설정으로는 막혔다. 「전부 실패」로 보였지만 실제로는 다 도착해 있었다 — 도구가 아니라 내가 잘못 본 것
수업·결제 관리 화면
대시보드
후보: 스프레드시트를 그대로 쓰기 vs 별도 데이터베이스
없으면? 시트로 버틴다
데이터베이스로 옮김
⚠️ 옳았지만 전환기가 문제였다. 시트와 앱을 동시에 쓰는 동안 같은 숫자가 두 곳에서 달라졌다. 「어느 쪽이 원본인가」를 먼저 못 박았어야 했다
카드뉴스 (이번 시범)
카드뉴스
후보: 달력 라이브러리 · AI 이미지 생성
없으면? 격자는 줄 몇 개 긋는 일 / 배경이 색면이라 사진이 아예 불필요
둘 다 안 들임
새로 들인 것 0개. AI 호출도 안 늘었다
여섯 사례에서 반복되는 것

❌ 표시가 붙은 둘은 기능이 안 된 게 아니라 「조용히 실패」한 것입니다. 배포가 거절됐는데 몰랐고, 프로세스가 죽고 살기를 반복하는데 화면은 멀쩡했습니다.

그래서 03차시에서 새것을 들일 때 물어야 할 것이 하나 더 있습니다 — 「이게 고장 나면 내가 알 수 있나?」 알 수 없다면, 들이는 순간 확인 장치도 같이 만들어야 합니다.


쪼개기 예시 — 첫 세 걸음

같은 기준(「열어 보면 맞는지 아는가」)을 종류별로 적용하면 이렇게 나옵니다.

첫째 걸음둘째 걸음셋째 걸음
카드뉴스 고정 데이터로 한 장 그리기
→ 화면에 뜨는가
내용을 손으로 넣기
→ 넘침 0인가
글자 수 제한 걸기
→ 넘긴 입력이 잘리는가
대시보드 지표 하나만 띄우기
→ 원본과 숫자가 같은가
기간 바꾸기
→ 지난달로 바꿔도 맞는가
빈 데이터 화면
→ 데이터 없을 때 안 깨지는가
랜딩페이지 첫 화면만 글자로
→ 스크롤 없이 무슨 회사인지 아는가
모바일 폭
→ 320px에서 안 깨지는가
문의 폼 하나
→ 내가 보낸 게 실제로 도착하는가
업무 자동화 읽기만 — 입력을 화면에 찍기
→ 제대로 읽었는가
결과를 파일로만 내보내기
→ 내용이 맞는가
진짜로 넣기
→ 두 번 돌려도 두 번 들어가지 않는가
네 줄에 공통된 순서

보기 → 손으로 → 진짜로. 처음엔 읽기만 하고 화면에 찍어 보고, 다음엔 손으로 넣어 보고, 마지막에 실제로 쓰거나 저장합니다. 특히 업무 자동화는 첫째 걸음에서 아무것도 건드리지 않는 게 중요합니다 — 잘못 읽은 상태로 쓰기 시작하면 되돌리기 어렵습니다.

흔한 함정 — 체크할 것

함정언제 터지나미리 확인할 것
무료 한도실행 횟수·주기·용량이 한도를 넘는 순간들이기 전에 한도 숫자를 찾아본다
조용한 실패고장 났는데 화면은 멀쩡할 때「고장 나면 내가 알 수 있나?」
원본이 둘같은 데이터를 두 곳에서 고칠 때「어느 쪽이 원본인가」를 먼저 못 박는다
두 번 실행자동화를 다시 돌렸을 때같은 입력이 두 번 들어가면 어떻게 되나
기본 설정이 막힘바깥 서비스를 부를 때안 되면 서비스 탓 하기 전에 내 요청을 먼저 의심

랜딩페이지·보고서·업무 자동화의 나머지 값은 부록 C에 있습니다.

시범 — 카드뉴스 기술 판단

①②단계 — 후보를 적고 「없으면 어떻게 하나」를 썼다

새로 들일 후보없으면 어떻게 하나판단
달력 그리는 라이브러리격자는 칸 7개짜리 줄을 5~6줄 그리는 일이다. 이미 쓰는 캔버스로 된다안 들임
AI 이미지 생성(배경용)배경이 색면이라 사진이 아예 필요 없다안 들임 — 호출료 0, 대기 0
매장별로 나누는 기능담당자가 손으로 5줄 나누면 된다. 그런데 매주 하는 일이라 부담이 크다들임 — 단 기존 텍스트 호출 경로를 그대로 씀

③단계 — 코드를 뒤지다 나온 것

「사진 없는 배경」을 새로 만들 것으로 적어 놨는데, 코드를 뒤지니 「위 색지」라는 틀이 이미 있었습니다. 위는 색면에 글, 아래는 사진인 구조이고, 주석에 이렇게 적혀 있었습니다.

사진 위에 글을 얹으면 밝은 사진에선 후광, 어두운 사진에선 그늘로 매번 씨름해야 한다. 색면 위에 쓰면 그 싸움이 없다.

색면에 글을 얹는 일은 이미 풀려 있었습니다. 카드뉴스는 여기서 아래 사진 자리를 달력·목록으로 바꾸는 변형입니다. 「완전 신규」가 「기존 틀의 변형」으로 줄었습니다.

결론 — 새로 들인 것은 0개

필요한 것어떻게
색면 배경 + 글자기존 「색지」 틀 재사용
달력 격자기존 캔버스에 직접 그림 — 라이브러리 없음
매장 목록기존 줄바꿈·글자 크기 자동조절 재사용
매장별 나누기기존 텍스트 호출 경로 재사용
상인회 모드 노출이미 있음

④⑤단계 — 다음 세 걸음

  1. 색면 배경에 달력 격자만. 일정은 고정값.
    무엇을 보면 아나 — 화면에 10월 달력이 제 요일에 뜨는가
  2. 달력에 일정을 손으로 넣기. 최대 5건.
    무엇을 보면 아나 — 넘침 0, 5건이 다 보이는가
  3. 2p 매장 목록을 손으로 넣기. 5개, 글자 수 제한.
    무엇을 보면 아나 — 10자·20자를 넘긴 입력이 잘리는가

넷째 걸음(단톡방 붙여넣기 → 매장별 나누기)와 다섯 번째 걸음(케이스로 연결)는 지금 쓰지 않습니다. 세 걸음을 마치고 다시 정합니다.

순서가 왜 이런가

AI가 들어가는 부분(매장별 나누기)을 맨 뒤로 뺐습니다. 앞의 셋은 결과가 정해져 있어 맞는지 바로 압니다. AI가 들어가면 결과가 매번 달라져서, 앞이 틀렸는지 AI가 틀렸는지 구분이 안 됩니다.


내 프로젝트 — 지금 채웁니다

양식 — 복사해서 채우세요
# 기술 스택 · 개발 계획 — 〈무엇〉

## 1. 새로 들일 후보
| 후보 | 없으면 어떻게 하나 | 판단 |
|---|---|---|
| | | 들임 / 안 들임 |
| | | 들임 / 안 들임 |

## 2. 그래도 들이는 것의 값 (들이는 게 있을 때만)
| | |
|---|---|
| 배우는 비용 | |
| 고치는 비용 (고장 나면 내가 고치나) | |
| 중복 비용 (같은 일 하는 게 이미 있나) | |
| 돌아가는 비용 (호출료·대기·한도) | |
| 안 들이고 가는 길 | |

## 3. 다음 세 걸음   ← 세 개까지만
1) 무엇을:
   무엇을 보면 됐는지 아나:
2) 무엇을:
   무엇을 보면 됐는지 아나:
3) 무엇을:
   무엇을 보면 됐는지 아나:

## 4. 뒤로 미룬 것 (AI가 들어가는 부분은 뒤로)
-
2번이 비어 있으면 잘한 것 새로 들이는 게 없으면 2번은 통째로 빕니다. 그게 가장 좋은 결과입니다. 이번 시범도 그랬습니다.

막히면 이 순서로

  1. 후보가 너무 많다 → 「이번 세 걸음에 필요한 것」만 남기십시오. 넷째 걸음 이후에 필요한 건 그때 정합니다.
  2. 걸음을 못 쪼개겠다 → 「무엇을 보면 됐는지 아나」를 먼저 쓰십시오. 그 문장이 안 써지면 아직 걸음이 큰 것입니다.
  3. 전부 새로 만들어야 할 것 같다 → 01차시 8번으로 돌아가십시오. 코드를 덜 뒤진 것입니다.

체크리스트

  • □ 후보마다 「없으면 어떻게 하나」를 썼는가
  • □ 새로 들이는 것이 정말 필요한가 — 네 가지 비용을 따졌는가
  • □ 걸음마다 「무엇을 보면 됐는지 아나」가 한 줄로 적혀 있는가
  • □ 계획이 세 걸음을 넘지 않는가
  • AI가 들어가는 부분을 뒤로 뺐는가
여기서 막힌다 ① — 「새로 만들 것」이 실제보다 크게 잡혀 있었다

01차시에서 코드를 열어 보고 「새로 만들 것 셋」이라고 적었는데, 03차시에서 한 번 더 뒤지니 그중 하나(사진 없는 배경)가 이미 있는 틀의 변형이었습니다.

01차시의 조사가 부실했던 게 아니라, 조사는 한 번으로 끝나지 않는다는 쪽에 가깝습니다. 명세서를 쓸 때는 「무엇이 필요한가」를 보고, 이 차시에서는 「어떻게 만들 것인가」를 보기 때문에 같은 코드에서 다른 것이 보입니다.

그래서 이 차시의 첫 프롬프트도 「새 라이브러리를 추천하기 전에 지금 코드부터 뒤져줘」입니다.

여기서 막힌다 ② — 「AI로 만드는 기능」인데 AI 호출이 하나도 안 늘었다

이 기능은 AI 교육 과제의 산출물인데, 기술 판단을 마치고 보니 새로 들인 AI 호출이 0개였습니다. 배경이 색면이라 이미지 생성이 필요 없었고, 매장별 나누기는 기존 텍스트 경로를 그대로 씁니다.

「AI 기능」이라고 해서 AI를 더 부르는 게 아닙니다. 부르지 않아도 되는 자리를 찾는 것도 기술 판단입니다. 호출료와 대기 시간은 매번 청구되고, 결과가 매번 달라져 확인이 어려워집니다.

산출물

  • docs/plan-cardnews.md — 기술 판단과 다음 세 걸음
04 · 본 과정

TDD · 테스트 먼저실습 예정

AI는 「됐습니다」라고 말합니다. 테스트는 말하지 않고 통과·실패만 냅니다.

한 줄 정의

TDD(Test-Driven Development, 테스트 주도 개발) — 테스트를 먼저 쓰고, 그 테스트를 통과시키는 코드를 쓴다.

「테스트」라는 말부터 풀면 이렇습니다 — 내가 정한 조건을 만족하는지 기계가 대신 확인해 주는 짧은 코드입니다. 사람이 매번 눈으로 보는 대신, 한 번 적어 두면 그 뒤로는 기계가 봅니다.

순서가 전부입니다. 만들고 나서 테스트를 쓰면 이미 만든 것에 맞춰 쓰게 됩니다. 그건 「내가 만든 게 내가 만든 대로다」를 확인하는 것이지, 맞는지 확인하는 게 아닙니다.

AI 개발에서 특히 필요한 이유

AI는 「다 됐습니다」라고 말합니다. 그리고 대개 그렇게 보입니다. 사람은 그 말을 확인할 시간이 없어서 믿고 넘어가고, 그게 쌓입니다. 테스트는 말을 하지 않습니다. 통과 아니면 실패입니다.


처음부터 끝까지 한 번 — 「넘침」 테스트

말로만 하면 안 잡히니 실제 하나를 끝까지 따라갑니다. 02차시에서 시안 세 장이 전부 아래가 잘려 있었던 그 문제입니다.

1 · 무엇을 확인할지 한 문장으로 쓴다

매장 다섯 개를 넣었을 때 어떤 글자도 카드 밖으로 나가지 않는다.

이 문장이 나오면 절반은 끝난 것입니다. 안 나오면 아직 무엇이 맞는 상태인지를 내가 정하지 않은 것입니다. 그때는 04차시가 아니라 01차시로 돌아갑니다.

2 · 테스트를 쓴다 — 기능은 아직 없다

test_overflow.py — 아직 통과하지 못한다
def test_매장_다섯개_넘침없음():
    카드 = 카드뉴스_그리기(매장목록=[
        ("부산상회",   "전복 3미 1만원"),
        ("남천떡집",   "송편 전 품목 할인"),
        ("바다횟집",   "저녁 손님 음료 서비스"),
        ("금정청과",   "사과 한 박스 2만원"),
        ("해운대건어물", "멸치 500g 덤으로"),
    ])
    넘침 = 카드.밖으로_나간_픽셀()
    assert 넘침 == 0, f"{넘침}px 넘쳤다"
읽는 법 assert「이게 참이어야 한다」는 뜻입니다. 참이면 조용히 넘어가고, 거짓이면 뒤에 적은 말과 함께 실패합니다.
마지막 줄에 「{넘침}px 넘쳤다」를 붙인 것이 중요합니다. 그냥 「실패」만 나오면 얼마나 넘쳤는지를 모릅니다.

3 · 돌려서 실패를 눈으로 본다

실패 출력
FAILED test_overflow.py::test_매장_다섯개_넘침없음
    AssertionError: 109.8px 넘쳤다
이 단계를 건너뛰지 않는다 실패하는 걸 먼저 보지 않으면, 그 테스트가 실제로 뭔가를 보고 있는지 알 수 없습니다. 아무것도 확인하지 않는 테스트는 언제나 통과하고, 그게 제일 위험합니다 — 있는 줄 알았는데 없는 상태니까요.
그리고 실패 문구가 이해되는지를 여기서 확인합니다. 「109.8px 넘쳤다」는 이해되지만 「AssertionError」만 나오면 못 고칩니다. 실패 문구가 안 읽히면 테스트를 고칩니다.

4 · 통과시킨다

이제 그리는 코드를 고칩니다. 02차시에서 실제로 한 일은 카드 안의 줄간격을 1.3으로 고정하고 여백을 줄인 것이었습니다. 원인은 카드가 본문 줄간격(1.7)을 그대로 물려받은 것이었습니다.

통과 출력
PASSED test_overflow.py::test_매장_다섯개_넘침없음
여기서 멈추면 안 된다 대부분 여기서 끝냅니다. 그런데 아직 이 테스트가 진짜인지 모릅니다.

5 · 일부러 깨 본다 — 이게 핵심이다

매장명을 스무 자로 늘려 넣어 봅니다. 실패해야 정상입니다.

일부러 깬 결과
FAILED   AssertionError: 37.2px 넘쳤다      ← 정상. 테스트가 살아 있다
PASSED                                      ← 비정상. 이 테스트는 아무것도 안 보고 있다
왜 통과가 비정상인가 스무 자를 넣었는데 넘치지 않았다면 둘 중 하나입니다 — 그리는 코드가 글자를 잘라 버렸거나, 테스트가 잘못 재고 있거나. 둘 다 문제이고, 일부러 깨 보지 않으면 둘 다 못 찾습니다.
다섯 단계를 한 줄로

문장으로 쓴다 → 테스트를 쓴다 → 실패를 본다 → 통과시킨다 → 일부러 깬다. 세 번째와 다섯 번째가 대부분 빠지고, 그 둘이 빠지면 테스트가 있는데 없는 상태가 됩니다.


AI가 테스트를 통과시키는 세 가지 수법

「테스트를 통과시켜라」라고 하면 AI는 통과시킵니다. 문제는 방법입니다. 셋 다 실제로 자주 나옵니다.

수법 ① — 테스트에 나온 값만 맞춘다

겉보기엔 통과, 실제로는 가짜
def 카드뉴스_그리기(매장목록):
    if len(매장목록) == 5:          # 테스트가 딱 5개를 넣었으니까
        return 미리_만든_카드        # 그 경우만 맞춰 둔다
    ...
어떻게 잡나 일부러 깨 보면 잡힙니다. 여섯 개를 넣어 보면 바로 드러납니다. 5단계가 이래서 필요합니다.

수법 ② — 테스트를 고친다

기준이 조용히 바뀐다
-    assert 넘침 == 0, f"{넘침}px 넘쳤다"
+    assert 넘침 < 120, f"{넘침}px 넘쳤다"   # 109.8 이 통과하게
왜 제일 나쁜가 통과 표시가 뜨는데 무엇을 확인하려던 건지가 사라집니다. 그리고 다음 사람은 이 기준이 원래 0이었다는 걸 모릅니다.
막는 한 줄 — 「테스트를 고치지 마라. 구현을 고쳐라. 테스트가 틀렸다고 생각되면 고치기 전에 나에게 먼저 말해라.

수법 ③ — 건너뛰게 만든다

「전부 통과」인데 안 돈 것이 섞여 있다
@pytest.mark.skip(reason="나중에 고칠 것")
def test_매장_다섯개_넘침없음():
    ...

# 출력:  4 passed, 1 skipped        ← 「4개 통과」만 보고 넘어간다
어떻게 잡나 출력을 그대로 받아 보면 잡힙니다. 「통과했습니다」라는 말만 받으면 1 skipped를 못 봅니다. 그래서 05차시에서 「증거를 보여라」가 나옵니다.

테스트로 안 잡히는 것

테스트는 만능이 아닙니다. 무엇을 못 잡는지 아는 것이 이 차시의 절반입니다.

첫째, 「예쁜가」 「읽히는가」처럼 판정 기준이 없는 것. 이건 사람이 봐야 하고, 02차시 층 ②가 그 자리입니다.

둘째, 「이게 필요한 기능인가」. 코드 밖의 문제라 01차시 명세서에서 걸러야 합니다. 잘 만든 쓸모없는 기능은 테스트를 전부 통과합니다.

셋째가 가장 중요합니다 — 내가 생각하지 못한 경우. 테스트는 내가 생각한 것만 확인합니다. 이건 테스트를 늘려서 해결되지 않고, 실제로 써 보거나 남이 써 봐야 나옵니다.

우리가 실제로 놓친 것

02차시에서 달력 요일이 실제 2026년 10월과 달랐습니다. 1일이 목요일인데 수요일에 놓여 있었습니다.

이건 셋 중 어디에도 안 들어갑니다. 판정할 수 있었고, 필요한 기능이었고, 생각 못 한 경우도 아니었습니다. 그냥 테스트로 만들지 않았을 뿐입니다. 「지어내지 마라」를 프롬프트에만 적고 검사로 만들지 않았습니다.

그래서 이 차시의 목록에 그 줄이 들어갔습니다. 한 번 당한 것은 반드시 테스트가 됩니다.

더 알아보기 — 02차시 층 ①은 이미 테스트였다

디자인 차시에서 정한 숫자들을 다시 보면 — 명도 대비 4.5:1 이상, 넘침 0건, 매장명 10자. 전부 통과·실패로 판정됩니다. 이미 테스트인데 손으로 돌렸을 뿐입니다.

그러니 이 과정의 검사는 같은 것이 형태만 바꾸며 옮겨 다니는 것입니다 — 명세서 7번에 적고 → 디자인 층 ①에서 숫자로 만들고 → 04차시에서 코드로 고정하고 → 05차시에서 AI가 돌리고 → 06차시에서 잊어도 돌게 합니다.

TDD를 「새로 배우는 것」으로 볼 필요가 없는 이유입니다.

더 알아보기 — 테스트를 몇 개까지 쓰나

많을수록 좋은 게 아닙니다. 테스트도 코드라서 고장 나고, 고쳐야 하고, 틀리기도 합니다. 02차시에서 실제로 검사기 자체가 오진한 적이 있습니다.

기준은 하나입니다 — 「이게 틀리면 아픈가?」 아프지 않은 것은 테스트하지 않습니다. 명세서 7번에 적은 것만으로 시작하면 대개 3~7개가 나오고, 그 정도면 충분합니다.

아직 진행하지 않았습니다

실제로 이 차시를 밟으면서 쓴 프롬프트를 그대로 남깁니다. 써 보지 않은 프롬프트는 적지 않습니다.

다만 교육 탭에서 이미 한 줄은 정해 두었습니다 — 「테스트를 고치지 마라. 구현을 고쳐라. 테스트가 틀렸다고 생각되면 고치기 전에 나에게 먼저 말해라.」 실제로 이 줄이 효과가 있었는지는 진행한 뒤에 적습니다.

「테스트」가 종류마다 다른 것을 가리킵니다. 구분하지 않으면 쓸모없는 테스트가 쌓입니다.

테스트할 것테스트로 안 잡히는
카드뉴스
스치며 보는 것
글자 수 제한 · 줄바꿈 · 넘침 · 명도 대비 · 예시 날짜가 실제 달력과 맞는가「예쁜가」 — 사람이 봐야 한다
대시보드
매일 조작하는 것
합계가 원본과 일치하는가 · 기간을 바꿔도 맞는가 · 빈 데이터에서 안 깨지는가「무엇을 봐야 할지 알겠는가」
챗봇 · 알림
대화
같은 입력 두 번 · 모르는 질문에 「모른다」고 하는가 · 답하지 않기로 한 주제를 피하는가말투가 적절한가
업무 자동화
안 보는 것
같은 입력을 두 번 넣어도 두 번 실행되지 않는가 · 실패하면 멈추는가 · 잘못된 입력을 거르는가보내는 내용이 적절한가

제일 중요한 테스트 하나씩

카드뉴스
넘침 0건. 눈으로는 안 보이고, 잘리면 정보가 사라진다
대시보드
합계 대조. 숫자가 틀리면 화면 전체가 거짓이 된다
챗봇
모를 때 모른다고 하는가. 자신 있게 틀리는 게 제일 큰 사고
업무 자동화
두 번 실행되지 않는가. 메일이 두 번 가면 되돌릴 수 없다

「실패하는 것부터 본다」의 예

단계카드뉴스 넘침 테스트
1. 테스트를 쓴다「매장명 5개를 넣었을 때 어떤 글자도 틀 밖으로 안 나간다」
2. 돌려서 실패를 본다기능이 없으니 실패. 실패 메시지가 이해되는지 확인 — 여기서 「뭐가 틀렸는지 모르겠는」 실패 메시지면 테스트를 고친다
3. 통과시킨다그리는 코드를 쓴다
4. 일부러 깨 본다매장명을 20자로 늘려 본다. 실패해야 정상. 통과하면 그 테스트는 아무것도 안 보고 있다
4번이 핵심

일부러 깨 봐야 그 테스트가 실제로 뭔가를 보고 있는지 압니다. 이 한 단계가 「아무것도 검사하지 않는 테스트」를 걸러냅니다.

랜딩페이지·보고서는 부록 C에 있습니다.

시범 — 카드뉴스에서 무엇을 테스트할까

명세서 7번(완성 기준)과 디자인 층 ①에서 판정 가능한 것만 뽑았습니다. 03차시의 세 걸음과 짝을 맞췄습니다.

테스트어디서 나왔나어느 걸음에서
넘침 0건디자인 층 ①첫째 걸음부터 계속
명도 대비 4.5:1 (5색 전부)디자인 층 ① · WCAG첫째 걸음
달력 요일이 실제 달력과 맞는가디자인 층 ① — 02차시에서 틀렸던 것첫째 걸음
일정 5건이 다 보이는가명세서 6번둘째 걸음
매장명 10자 · 소식 20자를 넘기면 잘리는가명세서 6번셋째 걸음
한 장에 5개까지, 넘으면 다음 장명세서 6번셋째 걸음

여섯 개입니다. 「예쁜가」는 넣지 않았습니다. 그리고 「달력 요일」이 목록에 있는 이유는 02차시에서 실제로 틀렸기 때문입니다 — 검사할 수 있었는데 안 했던 것입니다.

이미 절반은 있다

scripts/design-check.py가 위 여섯 중 둘(넘침·명도 대비)을 이미 합니다. 이 차시는 나머지를 붙이고, 06차시는 사람이 잊어도 돌게 만듭니다.


내 프로젝트 — 지금 채웁니다

양식 — 복사해서 채우세요
# 테스트 목록 — 〈무엇〉

## 1. 명세서 7번에서 가져온 것
(완성 기준을 체크박스로 썼다면 그대로 옮긴다)
-
-
-

## 2. 디자인 층 1에서 가져온 것
(숫자로 적은 것은 전부 테스트가 된다)
-
-

## 3. 이 중 「켜고 끄듯 판정되는 것」만 남긴다
| 테스트 | 어느 걸음에서 | 틀리면 아픈가 |
|---|---|---|
| | | 예 / 아니오 |
| | | 예 / 아니오 |
| | | 예 / 아니오 |

→ 「아니오」인 줄은 지운다. 보통 3~7개가 남는다.

## 4. 테스트로 안 잡히는 것 (여기 적고 사람이 본다)
-
-

## 5. 제일 중요한 테스트 하나
(이게 틀리면 제일 아픈 것. 이것부터 쓴다)
1·2번이 비어 있다면 01차시 7번이나 02차시 층 ①로 돌아가십시오. 테스트는 새로 생각해 내는 게 아니라 이미 적은 것을 옮기는 일입니다. 옮길 게 없다는 건 앞 차시가 비어 있다는 뜻입니다.

이 순서로

  1. 제일 중요한 테스트 하나만 먼저 쓴다
  2. 돌려서 실패를 본다. 실패 메시지가 이해되는지 확인한다
  3. 통과시킨다
  4. 일부러 깨 본다. 실패해야 정상이다 — 통과하면 그 테스트는 아무것도 안 보고 있다
  5. 다음 테스트로

막히면 이 순서로

  1. 무엇을 테스트할지 모르겠다 → 명세서 7번을 보십시오. 거기가 비었으면 01차시로 돌아갑니다.
  2. 테스트가 너무 많아진다 → 「틀리면 아픈가」로 거르십시오. 아프지 않은 건 지웁니다.
  3. AI가 통과시켰다는데 못 믿겠다실행 결과를 그대로 보여 달라고 하십시오. 「통과했습니다」라는 말이 아니라 출력을 봅니다.
  4. 테스트가 계속 통과만 한다 → 일부러 깨 보십시오. 안 깨지면 그 테스트는 아무것도 안 봅니다.

체크리스트

  • □ 테스트를 명세서·디자인 규칙에서 옮겨 왔는가 (새로 지어내지 않고)
  • □ 「켜고 끄듯 판정되는 것」만 남겼는가
  • 실패를 먼저 봤는가
  • 일부러 깨 봤는가
  • □ 테스트로 안 잡히는 것을 따로 적어 뒀는가
  • □ AI가 테스트를 고치지 않았는가
여기서 막힌다

아직 이 차시를 진행하지 않았습니다. 실제로 막힌 지점이 나오면 그대로 적습니다.

05 · 본 과정

하네스 · AI 자기점검실습 예정

AI는 「다 된 것처럼 보일 때」 멈춥니다. 그 신호 말고 다른 신호를 주는 것이 이 차시입니다.

하네스가 무엇인가

하네스(harness)는 원래 말에 씌우는 마구(馬具)입니다. 힘을 죽이지 않고 방향만 잡아 주는 장치입니다. 여기서는 이렇게 씁니다.

AI가 스스로 돌려서 통과·실패를 읽을 수 있는 검사.

왜 필요한지는 한 문장으로 설명됩니다.

왜 필요한가 — 풀어서

AI는 자기가 만든 게 맞는지 스스로 확인할 방법이 없습니다. 그래서 「된 것 같다」 싶으면 거기서 손을 뗍니다. 그러면 이런 고리가 생깁니다.

  1. AI가 만든다
  2. 맞는지 확인할 방법이 없다
  3. 「된 것 같다」에서 멈춘다
  4. 내가 열어 본다
  5. 틀렸다고 말해 준다
  6. 고친다 → 다시 1번으로
이걸 한 문장으로

「스스로 돌릴 수 있는 검사가 없으면 「된 것처럼 보인다」가 유일한 신호이고, 그러면 당신이 검사 장치가 된다 — 모든 실수가 당신이 알아차릴 때까지 기다린다.」

사람이 기계 역할을 떠맡는 상태입니다. 4·5번이 매번 나한테 오니까요.

고치는 법은 하나

통과·실패를 내는 것을 하나 쥐여주면 AI가 스스로 「아직 아니네」를 알고 다시 고칩니다. 내 손을 안 거치고 그 안에서 왕복이 끝납니다.

근거 — Anthropic, Best practices for Claude Code: 「Claude stops when the work looks done. Without a check it can run, 'looks done' is the only signal available, and you become the verification loop: every mistake waits for you to notice it.」

없을 때와 있을 때 — 실제 대화

같은 일을 시켰을 때 무엇이 달라지는지 보면 분명해집니다.

검사가 없을 때 — 카드뉴스 한 장 그려줘.
AI — 다 만들었습니다. 달력과 매장 목록이 잘 나옵니다.
— (열어 본다) …아래가 잘렸는데?
AI — 죄송합니다. 여백을 줄이겠습니다. 수정했습니다.
— (열어 본다) 아직 잘려.
AI — 다시 수정했습니다.
— (열어 본다) …
내가 매번 열어 봐야 합니다. 세 번째쯤 되면 그냥 넘어가게 됩니다.
검사가 있을 때 — 카드뉴스 한 장 그려줘. 그리고 design-check.py를 돌려서 통과할 때까지 고쳐라.
AI — (그림) → (검사) 넘침 109.8px 미달 → (고침) → (검사) 넘침 23.1px 미달 → (고침) → (검사) 넘침 0px 통과
AI — 통과했습니다. 출력입니다: ✅ 카드 1: 틀 360px · 내용 360px · 넘침 0px
왕복이 AI 안에서 끝났습니다. 나는 마지막 출력만 봅니다.

차이는 능력이 아니라 신호입니다. 두 경우 다 AI는 똑같이 그렸습니다. 다만 첫 번째는 「잘 나온 것 같다」에서 멈췄고, 두 번째는 「109.8px 미달」이라는 읽을 수 있는 신호를 받았습니다.

검사가 될 수 있는 것

대화 안에서 읽을 수 있는 신호를 내면 무엇이든 검사입니다.

테스트
04차시에서 만든 것
빌드 성공·실패
코드가 돌 수 있는 상태인가
검사 스크립트
결과를 기준값과 대조 — design-check.py가 이것
화면 캡처 비교
만든 화면을 시안과 대 본다

근거 — 같은 문서: 「a test suite, a build exit code, a linter, a script that diffs output against a fixture, or a browser screenshot compared against a design.」

강도 사다리 — 네 칸

검사를 얼마나 강하게 걸지는 고를 수 있습니다. 위로 갈수록 준비가 들고, 대신 내가 안 봐도 됩니다.

강도어떻게무엇과 바꾸나
① 프롬프트 안에서「검사를 돌리고 통과할 때까지 고쳐라」를 같은 메시지에 쓴다준비 0 — 오늘 당장 된다
② 목표로 걸기통과 조건을 목표로 걸어 두면 매 차례 다시 확인한다약간의 설정
③ 강제 차단검사가 통과하기 전에는 대화를 끝낼 수 없게 막는다설정 필요 — 대신 잊을 수가 없다
④ 제2 의견다른 문맥의 검토자가 결과를 반박해 본다 — 일한 놈이 채점하지 않게비용·시간
④가 왜 다른가

검토자가 별도 문맥에서 돌면, 그 코드를 만든 과정을 모릅니다. 차이(diff)와 기준만 보고 판단합니다. 그래서 「내가 쓴 코드에 마음이 기우는」 편향이 없습니다.

근거 — 같은 문서: 「a verification subagent … has a fresh model try to refute the result, so the agent doing the work isn't the one grading it」 · 「a fresh context improves code review since Claude won't be biased toward code it just wrote.」

규칙 파일 — 02차시 ③단계를 실제로 만든다

02차시에서 「규칙을 파일에 박는다」를 봤습니다. 그 파일을 쓰는 법에는 분명한 기준이 있습니다.

한 줄마다 물을 것

「이 줄을 지우면 AI가 실수하게 되나?」 아니면 지웁니다.

✅ 넣을 것❌ 빼야 할 것
AI가 짐작할 수 없는 명령어코드를 읽으면 알 수 있는 것
기본값과 다른 코드 규칙누구나 아는 표준 관행
테스트 돌리는 방법자세한 API 문서 (링크만)
이 저장소만의 약속 (가지 이름·커밋 규칙)자주 바뀌는 정보
이 프로젝트만의 구조 결정긴 설명·강의
안 그러면 걸려 넘어지는 함정「깔끔하게 써라」 같은 당연한 말
길면 무시된다

부풀려진 규칙 파일은 AI가 당신의 실제 지시를 무시하게 만든다.

그래서 증상으로 진단할 수 있습니다 — 규칙을 적어 뒀는데 AI가 계속 안 지키면, 파일이 너무 길어서 그 줄이 묻힌 것입니다. 그리고 여러 줄에 강조를 하면 아무 줄도 강조되지 않습니다.

규칙 파일은 코드처럼 다룹니다 — 문제가 생기면 들여다보고, 주기적으로 잘라내고, 고친 뒤 실제로 행동이 바뀌는지 봅니다.

근거 — 같은 문서: 「For each line, ask: Would removing this cause Claude to make mistakes? If not, cut it. Bloated CLAUDE.md files cause Claude to ignore your actual instructions!」 · 「If you emphasize many lines, none of them stands out.」 · 「Treat CLAUDE.md like code: review it when things go wrong, prune it regularly.」

끝까지 한 번 — 열두 줄에서 다섯 줄로

기준을 말로만 들으면 안 잡힙니다. 실제로 후보를 늘어놓고 잘라 봅니다. AI에게 「이 저장소 규칙 파일을 써줘」라고 하면 대개 이 정도가 나옵니다.

후보 줄지우면 AI가 실수하나?판정
깔끔하고 읽기 좋은 코드를 작성한다아니다 — 안 적어도 그렇게 한다❌ 삭제
변수명은 의미가 드러나게 짓는다아니다 — 표준 관행❌ 삭제
이 프로젝트는 Next.js로 만들어져 있다아니다 — 파일을 보면 안다❌ 삭제
주요 파일: app/case/[id]/page.tsx 는 케이스 화면…아니다 — 코드를 읽으면 안다. 그리고 자주 바뀐다❌ 삭제
사용자 경험을 최우선으로 고려한다아니다 — 판정할 수 없는 말❌ 삭제
커밋 메시지는 한국어로 쓴다그렇다 — 안 적으면 영어로 쓴다△ 보류
카드뉴스를 만들면 scripts/design-check.py 를 돌리고, 통과 못 하면 끝내지 마라그렇다 — 안 적으면 안 돌린다✅ 남김
명도 대비 본문 4.5:1 · 큰 글자 3:1 미달이면 고쳐라그렇다 — 기준을 모른다✅ 남김
글자가 틀 밖으로 나가면 고쳐라 (넘침 0)그렇다✅ 남김
예시 데이터의 날짜·요일을 지어내지 마라. 실제 달력과 맞춰라그렇다02차시에 실제로 틀렸다✅ 남김
됐다고 말하지 말고 검사 출력을 보여라그렇다 — 안 적으면 「완료했습니다」로 끝낸다✅ 남김
이 버전은 호환성이 깨지는 변경이 있다. 코드를 쓰기 전에 설치된 문서를 읽어라그렇다 — 안 적으면 예전 방식으로 쓴다✅ 남김 (이미 있음)

열둘 중 다섯이 남고 하나가 보류입니다. 지운 다섯 줄의 공통점을 보십시오 — 전부 「맞는 말」입니다. 틀린 말이라 지운 게 아니라 없어도 되는 말이라 지웠습니다.

보류한 한 줄은 어떻게 하나

「커밋 메시지 한국어」는 지키면 좋지만 안 지켜도 사고가 안 납니다. 이런 줄은 규칙 파일이 다섯 줄 이하일 때만 넣습니다. 한 줄이 늘 때마다 나머지 줄의 힘이 조금씩 빠지기 때문입니다.

왜 이렇게까지 하나

규칙 파일은 매 대화마다 통째로 읽힙니다. 그래서 열두 줄이면 열두 줄이 매번 경쟁합니다. 그중 일곱 줄이 안 읽어도 되는 말이면, 정말 중요한 다섯 줄이 그 사이에 묻힙니다.

이게 「규칙을 적었는데 안 지킨다」의 정체입니다. AI가 무시한 게 아니라 내가 신호를 잡음으로 덮은 것입니다.

가장 중요한 구분 — 지시는 권고, 훅은 강제

규칙 파일에 쓰기훅으로 걸기
성격권고 — 지켜 주길 바라는 것강제 — 반드시 일어나는 것
안 지킬 수 있나있다 (특히 파일이 길면)없다
쓸 자리판단이 섞이는 것예외 없이 매번 해야 하는 것

그래서 「지켜지지 않는 규칙」은 훅으로 옮깁니다. 설명을 더 세게 쓰는 게 아니라 장치를 바꿉니다 — 02차시에서 「설명하지 말고 틀릴 수 없게 만들라」고 한 것과 같은 발상입니다.

근거 — 같은 문서: 「Unlike CLAUDE.md instructions which are advisory, hooks are deterministic and guarantee the action happens.」

「통과했습니다」를 믿지 않는다

성공을 주장하게 하지 말고 증거를 보여주게 하라 — 테스트 출력, 실행한 명령과 그 결과, 화면 캡처.

증거를 검토하는 것이 내가 직접 다시 돌려 보는 것보다 빠릅니다. 그리고 내가 안 보고 있던 작업에도 통합니다.

근거 — 같은 문서: 「Have Claude show evidence rather than asserting success.」

더 알아보기 — 검토자의 함정 (과잉 설계)

④ 제2 의견을 붙일 때 조심할 것이 하나 있습니다.

결함을 찾으라고 시킨 검토자는 일이 제대로 됐을 때도 대개 뭔가를 찾아냅니다. 그게 시킨 일이니까요. 찾아낸 것을 모두 쫓아가면 과잉 설계로 갑니다 — 쓸데없는 층, 방어적인 코드, 일어날 수 없는 경우를 위한 테스트.

그래서 검토자에게 범위를 못 박습니다 — 「맞고 틀림이나 적어 둔 요구사항에 영향을 주는 것만 지적하고, 취향은 말하지 마라.」

근거 — 같은 문서: 「A reviewer prompted to find gaps will usually report some, even when the work is sound… Tell the reviewer to flag only gaps that affect correctness or the stated requirements.」

더 알아보기 — 흔한 실패 다섯 가지
실패고치는 법
한 대화에 여러 일을 섞는다 — 앞 일과 무관한 내용이 쌓여 방해가 된다일이 바뀌면 대화를 새로 시작한다
계속 고쳐 주기 — 틀리면 지적하고, 또 틀리면 또 지적한다. 실패한 시도들이 쌓인다두 번 고쳐서 안 되면 대화를 비우고, 배운 것을 넣어 프롬프트를 다시 쓴다
규칙 파일이 과하다가차없이 잘라낸다. 안 써도 잘 하는 것은 지운다
「믿고 나서 확인」 격차 — 그럴듯한 결과가 나오는데 예외를 처리하지 않는다검사를 항상 준다. 확인할 수 없으면 내보내지 않는다
끝없는 조사 — 범위 없이 「알아봐」라고 하면 수백 개 파일을 읽는다조사 범위를 좁히거나 별도 문맥에 맡긴다

근거 — 같은 문서, 「Avoid common failure patterns」. 네 번째의 원문 표현이 특히 정확합니다 — 「The trust-then-verify gap. Claude produces a plausible-looking implementation that doesn't handle edge cases. Fix: Always provide verification… If you can't verify it, don't ship it.」

이 차시는 우리가 아직 밟지 않았습니다. 그래서 두 가지를 나눠 적습니다 — 출처가 있는 권장형우리가 써 본 것.

공식 문서가 권하는 형태 (출처 있음)

아래 셋은 Anthropic 문서에 실린 「좋은 프롬프트」의 짝 비교에서 가져왔습니다. 왼쪽이 흔한 방식, 오른쪽이 권장입니다.

이렇게 말고이렇게
「이메일 검사 함수 만들어줘」「이메일 검사 함수를 만들어줘. 예시: a@b.com 은 참, invalid 는 거짓, user@.com 은 거짓. 만든 뒤에 테스트를 돌려라.
「화면을 더 보기 좋게 해줘」「[시안 붙임] 이 디자인대로 만들어라. 결과를 캡처해서 원본과 대 보고, 차이를 나열한 뒤 고쳐라.
「빌드가 깨졌어」「빌드가 이 오류로 깨진다: [오류]. 고치고 빌드가 되는지 확인해라. 증상을 덮지 말고 원인을 고쳐라.

근거 — Anthropic, Best practices: 「Provide verification criteria」 · 「Verify UI changes visually」 · 「Address root causes, not symptoms」

규칙 파일을 만들게 한다 (권장형)
이 저장소의 규칙 파일(AGENTS.md 또는 CLAUDE.md)을 만들어줘.

넣을 것만 넣어라:
- 네가 짐작할 수 없는 명령어 (테스트·빌드·배포)
- 기본값과 다른 규칙
- 이 저장소만의 약속
- 안 그러면 걸려 넘어지는 함정

빼라:
- 코드를 읽으면 알 수 있는 것
- 누구나 아는 표준 관행
- 자주 바뀌는 정보
- "깔끔하게 써라" 같은 당연한 말

그리고 한 줄마다 스스로 물어라 — "이 줄을 지우면 내가 실수하게 되나?"
아니면 그 줄을 빼라. 다 쓴 뒤에 몇 줄인지 알려줘.
마지막 줄을 넣는 이유 줄 수를 세게 하면 짧아집니다. 그냥 시키면 AI는 길게 씁니다 — 많이 적는 게 성실해 보이니까요. 그런데 이 파일은 길어지는 순간 무시됩니다.
증거를 요구한다
됐다고만 하지 마라. 증거를 그대로 보여줘.

- 돌린 명령과 그 출력 전체
- 테스트 결과 (통과 개수·실패 개수)
- 화면이면 캡처

"통과했습니다" 같은 말은 증거가 아니다.
왜 이게 필요한가 AI는 「다 된 것처럼 보일 때」 멈춥니다. 그리고 그 판단을 말로 전달합니다. 출력을 보면 정말 돌았는지, 몇 개가 통과했는지가 나옵니다.
별도 문맥의 검토자를 붙인다
이 변경을 별도 문맥의 검토자에게 검토시켜줘.

- 검토자에게는 변경 내용과 아래 기준만 줘라. 만든 과정은 주지 마라.
- 기준: 〈명세서 7번 · 디자인 층 1〉
- 맞고 틀림이나 적어둔 요구사항에 영향을 주는 것만 지적하게 해라.
  취향 문제는 말하지 말라고 명시해라.
- 지적이 나오면 나에게 보여주고, 고칠지는 내가 정한다.
두 줄이 중요하다 「만든 과정은 주지 마라」 — 그래야 편향이 없습니다.
「취향은 말하지 말라」 — 결함을 찾으라 하면 없어도 찾아내고, 그걸 다 쫓으면 과잉 설계가 됩니다.
우리가 써 본 프롬프트는 아직 없다

이 차시를 실제로 밟은 뒤에 쓴 것과 그 결과를 여기에 적습니다. 위 셋은 출처가 있는 권장형이고, 우리 프로젝트에서 효과가 있었는지는 아직 모릅니다.

종류마다 규칙 파일에 박을 것과 검사가 다릅니다.

카드뉴스 (스치며 보는 것)대시보드 (매일 조작하는 것)
규칙 파일에 박을 것명도 대비 4.5:1 · 최소 글자 · 넘침 0 · 예시 데이터를 지어내지 않기지표 정의(무엇을 어떻게 센 숫자인가) · 어느 데이터가 원본인가
AI가 돌릴 검사design-check.py — 대비·넘침합계 대조 스크립트 · 빈 데이터 화면
훅으로 강제할 것배포 전 검사 통과숫자 계산을 한 곳에서만 하게 (다른 곳에서 계산하면 차단)
증거로 받을 것검사 출력 + 화면 캡처검사 출력 + 원본과 대조한 숫자
제2 의견을 붙일 자리시안과의 차이 (사람 눈 대신)지표 정의가 맞는지 — 여기가 제일 위험하다

규칙 파일 길이의 감

이 교재의 실습 저장소에 실제로 들어 있는 규칙 파일은 네 줄입니다.

「이건 네가 아는 그 프레임워크가 아니다. 이 버전은 호환성이 깨지는 변경이 있다 — API·관례·파일 구조가 학습한 것과 다를 수 있다. 코드를 쓰기 전에 설치된 문서를 읽어라.

네 줄인데 「지우면 실수하게 되나?」에 확실히 「예」입니다. 이 줄이 없으면 AI가 예전 방식으로 코드를 씁니다. 길이가 아니라 이 기준입니다.

랜딩페이지·보고서·업무 자동화는 부록 C에 있습니다.

시범 — 이 차시에서 할 것

02차시에서 만든 scripts/design-check.py이미 하네스의 절반입니다. 이 차시에서는 둘을 합니다.

  1. 04차시에서 정한 여섯 개 검사design-check.py에 모은다 — 지금은 둘(대비·넘침)만 있다
  2. 층 ①의 숫자만 규칙 파일로 올린다. 층 ②·③은 문서에 남긴다 (02차시 결정)
규칙 파일에 올릴 다섯 줄 (예정)
  • 카드뉴스 만들면 scripts/design-check.py를 돌려라. 통과 못 하면 끝내지 마라
  • 명도 대비 본문 4.5:1 · 큰 글자 3:1 미달이면 고쳐라
  • 글자가 틀 밖으로 나가면 고쳐라 (넘침 0)
  • 예시 데이터의 날짜·요일을 지어내지 마라. 실제 달력과 맞춰라
  • 됐다고 말하지 말고 검사 출력을 보여라

다섯 줄입니다. 넷째 줄은 02차시에서 실제로 틀렸기 때문에 들어갑니다 — 「지우면 실수하게 되나?」에 이미 「예」로 증명된 줄입니다.


내 프로젝트 — 지금 채웁니다

양식 — 복사해서 채우세요
# 하네스 — 〈무엇〉

## 1. AI가 스스로 돌릴 수 있는 검사
| 검사 | 무엇으로 | 몇 초 걸리나 |
|---|---|---|
| | | |
| | | |

→ 하나도 없으면 04차시로 돌아간다. 검사가 없으면 하네스도 없다.

## 2. 강도 — 어디까지 걸까
[ ] 1단계 · 프롬프트에 "돌리고 통과할 때까지 고쳐라"
[ ] 2단계 · 목표로 걸기
[ ] 3단계 · 통과 전에는 끝낼 수 없게 강제
[ ] 4단계 · 별도 문맥 검토자

## 3. 규칙 파일 (5줄 이내)
한 줄마다 물어라 — "이 줄을 지우면 AI가 실수하게 되나?"
1.
2.
3.

지운 줄과 지운 이유:
-

## 4. 규칙이 아니라 훅으로 강제할 것
(예외 없이 매번 일어나야 하는 것)
-

## 5. 증거로 받을 것
(무엇을 보여주면 됐다고 인정할까)
-
3번의 「지운 줄」 칸이 핵심 지운 것을 적어 두면 규칙 파일이 다시 길어지지 않습니다. 나중에 「이것도 넣어야 하나?」 싶을 때 이미 판단했던 기록이 남아 있습니다.

막히면 이 순서로

  1. 돌릴 검사가 없다 → 04차시로. 검사가 없으면 하네스를 만들 수 없습니다.
  2. 규칙을 적었는데 안 지킨다파일이 긴 것입니다. 줄여 보십시오. 그래도 안 되면 그 줄만 훅으로 옮깁니다.
  3. 규칙이 5줄을 넘는다 → 「지우면 실수하게 되나?」를 다시 물으십시오. 대개 절반이 없어도 됩니다.
  4. 검사가 너무 느리다 → 느리면 끄게 됩니다. 배포 전에 한 번 도는 것과 매번 도는 것을 나누십시오(06차시).

체크리스트

  • □ AI가 스스로 돌릴 수 있는 검사가 있는가
  • □ 강도를 의식적으로 골랐는가 (1~4단계)
  • □ 규칙 파일의 모든 줄이 「지우면 실수하게 되나?」에 「예」인가
  • □ 규칙 파일이 짧은가 — 길면 무시된다
  • □ 「매번 반드시」인 것을 훅으로 옮겼는가
  • 증거를 받고 있는가 (「됐습니다」가 아니라 출력)
  • □ 검토자에게 범위를 못 박았는가 (취향 지적 금지)
한 줄 요약

지시는 권고, 훅은 강제. 지켜지지 않는 규칙은 더 세게 쓰는 게 아니라 장치를 바꿉니다.

여기서 막힌다

아직 이 차시를 진행하지 않았습니다. 실제로 막힌 지점이 나오면 그대로 적습니다.

06 · 본 과정

CI/CD · 기계 검증실습 예정

사람이 잊어도 도는 검사. 그리고 조용히 실패한 것을 알아내는 장치.

말부터 쉽게

풀이한 줄로
CI
지속적 통합
코드를 올릴 때마다 기계가 검사를 돌린다「올리면 검사한다」
CD
지속적 배포
검사를 통과하면 자동으로 실제 서비스에 올라간다「통과하면 내보낸다」

05차시와 다른 점은 누가 잊을 수 있느냐입니다. 하네스는 AI가 돌리는 검사라 시키지 않으면 안 돌 수 있습니다. CI는 사람도 AI도 잊을 수 없습니다 — 올리면 무조건 돕니다.

왜 AI로 개발할 때 더 중요해지나

느낌과 실제가 갈라지기 때문입니다. 서로 독립된 두 조사가 같은 방향을 가리킵니다.

① 개인 — 빨라졌다고 느끼지만 느려졌다

숙련 개발자 16명에게 자기 저장소의 실제 작업 246건을 주고, AI 사용 여부를 무작위로 배정한 실험입니다.

결과
시작 전 예상AI로 24% 빨라질
실제19% 느려졌다
끝난 뒤 본인 체감그래도 20% 빨라졌다고 믿었다

마지막 줄이 「거짓 생산성」의 실측치입니다. 느려진 것을 겪고도 빨라졌다고 느꼈습니다.

근거 — METR, Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity.
⚠️ 한계를 함께 봐야 합니다 — 참가자 16명, 자기가 잘 아는 저장소에서, 2025년 초 도구로. 연구진 스스로 「하나의 상황에서 찍은 한 장면」이라고 적었습니다. 모든 경우에 AI가 느리다는 뜻이 아닙니다. 다만 체감과 실제가 어긋날 수 있다는 것은 분명히 보여 줍니다.

② 팀 — 만족도는 오르고 안정성은 내려간다

AI 도입은 개인 생산성과 흐름, 직무 만족도를 크게 올린다. 그러나 소프트웨어 배포 안정성과 처리량에는 부정적으로 작용한다.

그래서 같은 보고서의 결론이 이것입니다 — 「작은 단위와 튼튼한 테스트 같은 기본이 여전히 결정적이다.」

근거 — Google Cloud, DORA 2024 Accelerate State of DevOps Report. 구체적 수치는 전체 보고서 PDF에 있고 여기서는 확인하지 않았습니다 — 위 문장은 공개 페이지의 요약 표현입니다.

두 조사를 합치면

개인은 빨라졌다고 느끼고, 만족도도 오릅니다. 그런데 실제 속도와 배포 안정성은 내려갑니다. 이 어긋남을 메우는 것이 사람의 느낌이 아니라 기계의 판정입니다. 그게 이 차시의 존재 이유입니다.

절차 — 이 순서로 한다

  1. 05차시의 검사를 그대로 가져온다. 새로 만들지 않습니다 — 이미 있는 것을 자동으로 돌게만 합니다
  2. 몇 초까지 허용할지 정한다. 느리면 끄게 됩니다. 기준은 「기다릴 수 있는가」
  3. 실패하면 어떻게 할지 정한다. 막을 것인가, 알리고 통과시킬 것인가
  4. 검사를 두 층으로 나눈다 — 매번 도는 빠른 것 / 배포 전에만 도는 느린 것
  5. 조용한 실패를 잡는 장치를 붙인다. 이게 이 차시의 절반입니다

끝까지 한 번 — 배포가 거절된 날

말로 「조용히 실패한다」고 하면 안 잡힙니다. 실제로 있었던 하루를 그대로 따라갑니다.

오전 — 세 가지를 한꺼번에 올렸다

고칠 것이 셋 있었습니다.

  1. 메일 문구에서 불필요한 표기 지우기
  2. 회사 소개에서 지역 표기 고치기
  3. 알림을 30분마다 보내도록 예약 설정 바꾸기

셋을 한 번에 올렸습니다. 여기까지는 아무 문제가 없어 보였습니다.

오후 — 화면은 멀쩡했다

사이트에 들어가 보니 정상이었습니다. 페이지가 뜨고, 버튼이 눌리고, 메일도 나갔습니다.

여기가 함정이다

배포가 실패하면 이전 버전이 계속 돕니다. 그래서 화면은 정상입니다. 「고친 것이 반영됐나」를 따로 확인하지 않으면 알 방법이 없습니다.

다음 날 — 알림이 안 왔다

30분마다 와야 할 알림이 안 왔습니다. 처음 의심한 것은 알림 보내는 코드였습니다. 그런데 코드는 멀쩡했습니다.

그래서 배포 기록을 열어 봤습니다. 거기에 이렇게 적혀 있었습니다.

배포 기록
Error: Hobby accounts are limited to daily cron jobs.
       This cron expression (30 0-9 * * 1-5) would run more than once per day.

Deployment failed.
무슨 말인가 무료 요금제는 예약 실행을 하루 한 번만 허용하는데, 내가 넣은 설정은 하루에 여러 번 돌리는 것이었습니다. 그래서 거절됐습니다.

진짜 피해는 다른 데 있었다

예약 설정만 안 된 게 아닙니다. 같이 올린 나머지 두 개도 함께 막혔습니다. 배포는 통째로 처리되기 때문입니다 — 하나가 거절되면 전부 거절됩니다.

고친 것내가 믿은 상태실제
메일 문구고쳐져서 나가는 중옛 문구로 계속 나갔다
회사 소개 지역 표기고쳐짐안 고쳐짐
알림 30분마다돌고 있음안 돎

셋 중 둘은 「고쳤다」고 믿고 넘어간 것입니다. 알림이 안 와서 우연히 발견하지 않았다면 계속 몰랐을 겁니다.

무엇을 바꿨나

  1. 예약 실행을 다른 곳으로 옮겼다. 무료 한도가 없는 곳(상시 켜둔 컴퓨터)으로
  2. 배포한 뒤 「지금 도는 것이 내가 올린 것인가」를 확인하는 한 줄을 넣었다. 배포 시각과 버전을 대조
  3. 들이기 전에 한도를 찾아보는 것을 03차시 절차에 넣었다
이 하루가 말해 주는 것

기능은 하나도 고장 나지 않았습니다. 코드도 멀쩡했고 서버도 멀쩡했고 화면도 멀쩡했습니다. 문제는 내가 올린 것이 올라가지 않았다는 것뿐이었습니다.

그리고 그 사실은 아무 신호도 내지 않았습니다. 오류 화면도, 알림도 없었습니다. 이게 조용한 실패입니다.

조용한 실패 — 이 차시의 본론

기계 검증을 붙이면 새로운 실패 방식이 생깁니다. 검사 자체가 안 도는 것, 배포가 거절된 것, 프로세스가 죽어 있는 것 — 전부 화면은 멀쩡합니다.

실제로 있었던 일왜 몰랐나무엇으로 잡나
배포가 거절됐다. 무료 요금제의 예약 실행 한도(하루 1회)를 넘긴 설정을 넣자 배포 전체가 거절됐고, 같이 올린 수정 두 건까지 조용히 막혔다이전 버전이 계속 돌고 있어 화면이 정상이었다「지금 도는 것이 내가 올린 것인가」를 확인 — 배포 시각·버전 대조
프로세스가 죽고 살기를 반복했다. 재시작 횟수가 천만 단위로 찍혀 있었다죽자마자 되살아나서 접속은 됐다. 화면도 정상이었다재시작 횟수·가동 시간을 주기적으로 본다. 「가동 시간이 몇 초」면 방금 되살아난 것이다
예약 실행이 멈췄다. 매일 도는 줄 알았는데 몇 주 안 돌았다안 돌면 아무 일도 안 일어난다 — 알림도 안 온다「어제 실제로 돌았나」를 확인하는 별도 검사
공통점

셋 다 기능이 고장 난 게 아니라 「안 돌고 있었다」는 것이 문제였습니다. 그리고 안 도는 것은 아무 신호도 내지 않습니다.

그래서 검사 하나가 더 필요합니다 — 「검사가 돌고 있는지 검사하는 것」.

검사를 두 층으로 나눈다

매번 도는 층배포 전에만 도는 층
언제파일을 고칠 때마다 · 올릴 때마다실제로 내보내기 직전
시간몇 초몇 분까지
무엇형식 검사 · 빠른 테스트 · 타입 검사전체 테스트 · 화면 검사 · 데이터 대조
실패하면막는다막는다 + 알린다

나누는 이유는 하나입니다 — 느린 검사를 매번 돌리면 사람이 끕니다. 끈 검사는 없는 검사입니다.

더 알아보기 — AI를 검사에 넣기

AI 자체를 검사의 일부로 쓸 수도 있습니다. 대화형이 아니라 한 번 물어 한 번 답하는 방식으로 스크립트에 넣습니다.

쓸 만한 자리는 기계가 판정하기 어렵고 사람이 매번 보기는 번거로운 것입니다 — 예를 들어 「이번 변경 내용이 명세서와 어긋나지 않는가」.

주의

AI 검사는 매번 결과가 달라질 수 있습니다. 그래서 막는 자리에는 쓰지 않습니다 — 알리는 자리에만 씁니다. 막는 자리는 언제나 같은 답을 내는 검사(숫자·형식·테스트)로 채웁니다.

참고 — Anthropic 문서는 대화 없이 한 번에 실행하는 방식(claude -p)을 CI와 커밋 전 검사에 쓰는 용례로 안내합니다.

02·04·05차시와 이어지는 한 줄

이 과정의 검사는 같은 것이 네 번 형태를 바꾼 것입니다 — 명세서 7번(적는다) → 디자인 층 ①(숫자로 만든다) → 04차시(코드로 고정한다) → 05차시(AI가 돌린다) → 06차시(잊어도 돈다).

아직 진행하지 않았습니다

실제로 붙이면서 쓴 프롬프트를 그대로 남깁니다.

다만 이 차시에서 반드시 물어야 할 것은 정해져 있습니다 — 「이 검사가 안 도는 상황이 무엇이고, 그때 내가 어떻게 아나?」 이 질문을 프롬프트에 넣지 않으면 AI는 도는 경우만 만들어 줍니다.

종류마다 기계에게 맡길 검사와 「조용한 실패」의 모양이 다릅니다.

카드뉴스 (스치며 보는 것)대시보드 (매일 조작하는 것)
매번 도는 층타입 검사 · 글자 수 규칙타입 검사 · 지표 계산이 한 곳에서만 일어나는지
배포 전 층명도 대비 · 넘침 · 예시 날짜합계 대조 · 빈 데이터 화면 · 기간 바꿔 보기
조용한 실패이미지 만드는 기능이 예전 코드로 도는 것 — 화면은 나온다데이터가 갱신되지 않는 것 — 화면에는 어제 숫자가 그대로 떠 있다
그걸 잡는 검사배포 버전·시각 대조「가장 최근 데이터가 언제 것인가」를 화면에 표시하고 검사한다
대시보드의 조용한 실패가 제일 고약하다

숫자가 틀린 게 아니라 오래된 것이기 때문입니다. 형태가 정상이라 사람이 알아챌 방법이 없습니다. 그래서 대시보드에는 「언제 것인가」가 화면에 항상 떠 있어야 합니다 — 이건 디자인 결정이기도 합니다(02차시).

「어제 실제로 돌았나」를 확인하는 방법

방식어떻게한계
흔적을 남긴다돌 때마다 시각을 파일·표에 적는다. 그 시각이 오래됐으면 안 돈 것적는 것 자체가 실패하면 모른다
결과물의 시각을 본다만들어진 파일·기록의 날짜를 본다간단하고 튼튼하다
따로 확인하는 것을 둔다주 1회 「지난 주에 몇 번 돌았나」를 세어 알린다이것도 멈출 수 있다 — 사람이 받는 알림이어야 한다

랜딩페이지·보고서·업무 자동화는 부록 C에 있습니다.

시범 — 이 차시에서 할 것

  1. scripts/design-check.py배포 전에 자동으로 돌게 한다
  2. 통과 못 하면 배포가 안 되게 막는다
  3. 배포된 것이 내가 올린 것인지 확인하는 한 줄을 붙인다 — 과거에 조용히 거절된 적이 있다
이 저장소의 특수 사정

실습 저장소는 저장소 연동 자동 배포가 아니라 직접 배포 방식입니다. 그래서 「올리면 배포된다」가 아니라 「배포 명령을 돌리면 배포된다」입니다. 이 경우 CI를 붙이는 자리가 달라집니다 — 배포 명령 안에 검사를 넣어야 합니다. 자기 프로젝트가 어느 방식인지 먼저 확인하십시오.


내 프로젝트 — 지금 채웁니다

양식 — 복사해서 채우세요
# 기계 검증 — 〈무엇〉

## 0. 내 배포 방식
[ ] 올리면 자동 배포   [ ] 배포 명령을 직접 돌린다   [ ] 배포가 없다(내 컴퓨터에서만)
→ 검사를 넣을 자리:

## 1. 매번 도는 층 (몇 초)
| 검사 | 시간 | 실패하면 |
|---|---|---|
| | | 막는다 / 알린다 |

## 2. 배포 전에만 도는 층 (몇 분까지)
| 검사 | 시간 | 실패하면 |
|---|---|---|
| | | 막는다 / 알린다 |

## 3. 조용한 실패 — 내 경우엔 어떤 모양인가
"이게 고장 나도 화면은 멀쩡한" 상황 세 개:
1.
2.
3.

각각 무엇으로 알아챌까:
1.
2.
3.

## 4. "어제 실제로 돌았나"
확인 방법:
누가 그 알림을 받나:
며칠 안 돌면 이상한 건가:  ____일

## 5. 검사가 느려서 끄고 싶어지면
어느 검사를 배포 전 층으로 내릴까:
3번이 이 차시의 핵심 「고장 나도 화면은 멀쩡한」 상황을 세 개 적는 것이 어렵습니다. 그런데 적어 보면 대개 이미 겪은 것이 떠오릅니다. 겪은 것부터 적으십시오.

막히면 이 순서로

  1. 배포가 없다 → 그래도 1번(매번 도는 층)은 만듭니다. 「내 컴퓨터에서 돌리기 전에 검사」로 충분합니다.
  2. 조용한 실패가 안 떠오른다 → 「이 프로그램이 아무것도 안 하고 있어도 내가 알 수 있나?」를 물으십시오.
  3. 검사가 느리다 → 두 층으로 나누십시오. 나누지 않으면 끕니다.
  4. 막을지 알릴지 모르겠다숫자로 판정되는 것은 막고, AI가 판단하는 것은 알리기만 합니다.

체크리스트

  • □ 05차시의 검사가 자동으로 도는가
  • □ 검사를 두 층으로 나눴는가 (매번 / 배포 전)
  • □ 매번 도는 층이 몇 초인가 — 끄고 싶지 않은 속도인가
  • 막는 것알리는 것을 구분했는가
  • 조용한 실패 세 가지를 적었는가
  • 「어제 실제로 돌았나」를 확인하는 장치가 있는가
  • □ 그 알림을 사람이 받는가
한 줄 요약

기계 검증은 고장을 잡는 장치가 아니라 「안 돌고 있는 것」을 잡는 장치입니다. 고장은 티가 나고, 안 도는 것은 티가 안 납니다.

여기서 막힌다

아직 이 차시를 진행하지 않았습니다. 실제로 막힌 지점이 나오면 그대로 적습니다.

07 · 본 과정

분석·학습을 병렬로실습 예정

앞의 여섯 가지를 다 갖추고도 남는 문제. 이 과정의 결론입니다.

여섯 가지는 필요조건이지 충분조건이 아니다

01부터 06까지는 이미 알려진 방법입니다. 그런데 그걸 전부 해본 사람이 남긴 말이 이것이었습니다.

그럼에도 결과가 나오면 무한정 수정해야 하고, 집중력이 떨어지면 생각도 분석도 없이 「해줘」가 된다. 그리고 뭔가 대단한 걸 한 것 같은 기분이 든다. 배운 것도, 느는 것도 거의 없는데.

그래서 결론은 이렇게 붙습니다.

의도적으로 프로젝트를 분석하고 학습하고 연구하는 과정이 반드시 병렬로 돌아가야 한다.

이 말이 근거 없는 감상이 아니다 — 숫자로 확인된다

체감과 실제가 갈라진다

06차시에서 본 실험을 다시 봅니다. 숙련 개발자 16명, 자기 저장소의 실제 작업 246건, AI 사용 여부 무작위 배정.

결과
시작 전 예상24% 빨라질
실제19% 느려졌다
끝난 뒤 본인 체감그래도 20% 빨라졌다고 믿었다

세 번째 줄이 이 차시의 존재 이유입니다. 느려진 것을 몸으로 겪고도 빨라졌다고 느꼈습니다. 체감은 증거가 아닙니다.

근거 — METR, Early-2025 AI 실험. 한계는 06차시에 적어 두었습니다 — 16명 · 익숙한 저장소 · 2025년 초 도구. 「AI는 느리다」가 결론이 아니라 「체감이 어긋날 수 있다」가 결론입니다.

여섯 장치가 잡아 주는 것과 못 잡는 것

차시잡아 주는 것못 잡는 것
01 SDD무엇을 만들지 어긋나는 것내가 배우는지 아닌지

여섯 장치는 전부 결과물을 지킵니다.
만드는 사람은 아무도 안 봅니다.
02 디자인 시안눈으로 안 보이는 미달
03 기술 스택비싼 선택 · 너무 큰 걸음
04 TDD판정 가능한 오류
05 하네스AI가 「된 것처럼 보일 때」 멈추는 것
06 CI/CD사람이 잊는 것 · 조용한 실패

결과물이 멀쩡한데 내가 아무것도 모르는 상태는 여섯 장치를 다 통과합니다. 그리고 그 상태는 다음 프로젝트에서 청구됩니다.

판별 기준 — 하나로 충분하다

설명 시험

AI가 한 것을 내가 설명할 수 있는가. 「왜 이렇게 했는지」까지.

이 시험이 값어치 있는 이유는 속일 수 없기 때문입니다. 「이해했다」는 느낌은 설명하려 들 때까지 확인되지 않습니다. 말로 꺼내 보면 어디가 빈칸인지 즉시 드러납니다.

이건 설명이 아니다이게 설명이다
「이 함수가 카드뉴스를 그립니다」「캔버스 크기를 1080으로 직접 지정합니다. 원래는 사진 크기에서 가져왔는데, 카드뉴스는 사진이 없어서 그 값이 안 나옵니다」
「검사를 돌려서 통과했습니다」「반투명 글자는 합성된 색으로 계산해야 합니다. 그냥 계산하면 대비가 실제보다 높게 나와서 미달인데 통과로 나옵니다」

오른쪽은 「왜 그래야 하는지」가 들어 있습니다. 그게 들어 있으면 다음에 비슷한 상황에서 혼자 판단할 수 있습니다. 왼쪽은 다음에도 물어봐야 합니다.

끝까지 한 번 — 설명 시험을 실제로 쳐 본다

이 교재를 만들면서 나온 것 하나를 골라 시험을 쳐 봅니다. 대상은 「명도 대비 검사」입니다.

1문 — 이게 무엇을 하나?

글자와 배경의 밝기 차이를 재서, 4.5:1보다 낮으면 미달로 잡습니다.

→ 여기까지는 대부분 답합니다. 시험은 여기서 시작도 안 했습니다.

2문 — 왜 이 방법인가? 다른 방법 대신.

얕은 답「업계 표준이라서요.」
→ 출처를 아는 것과 이해하는 것은 다릅니다. 다음 질문에서 무너집니다.
진짜 답눈으로 보면 대비가 낮은 걸 못 알아챕니다. 실제로 4.39:1과 4.51:1은 눈으로 구분이 안 됩니다. 그런데 시력이 약한 사람에게는 갈립니다. 그래서 사람이 판단할 자리가 아니라 숫자로 정한 겁니다.

3문 — 고장 나면 어디를 보나?

검사가 통과인데 실제로는 안 읽히는 경우를 먼저 의심합니다. 원인은 대개 하나 — 반투명 글자를 그냥 계산한 것입니다.
이 함수가 없으면 검사가 거짓말을 한다
def blend(글자색, 배경색, 투명도):
    """반투명 글자가 실제로 눈에 보이는 색을 구한다."""
    ...

# 투명도 0.6 인 흰 글자를 짙은 배경 위에 얹으면
#   그냥 계산:  흰색 vs 배경   →  9.11 : 1   ← 통과 (거짓말)
#   합성 계산:  섞인색 vs 배경 →  4.39 : 1   ← 미달 (진짜)
무슨 일이 일어나나 글자를 흐리게 깔면 눈에는 배경과 섞인 색으로 보입니다. 그런데 코드에는 여전히 「흰색」이라고 적혀 있습니다. 적힌 색으로 계산하면 실제보다 대비가 높게 나옵니다.
그래서 미달인데 통과로 나옵니다 — 검사가 있는데 없는 상태입니다.

4문 — 이걸 다른 데 쓰려면 무엇을 고쳐야 하나?

이 질문이 가장 어렵고 가장 정확합니다. 답하려면 어디까지가 이 경우에만 맞는 것인지를 알아야 하기 때문입니다.

색 목록을 바꿔야 합니다. 지금은 상권 색 다섯 가지가 코드에 박혀 있습니다.
반투명 단계도 바꿔야 합니다. 지금은 이 시안에서 쓴 0.72·0.78만 검사합니다.
기준 숫자는 안 바꿔도 됩니다. 4.5:1은 매체와 무관한 공개 기준이니까요.
4문에 답할 수 있으면

원리를 안 것입니다 — 무엇이 변하고 무엇이 안 변하는지 구분했으니까요. 못 하면 이번 경우만 통과한 것이고, 다음 프로젝트에서 처음부터 다시 묻게 됩니다.

시험을 치고 나서 — 빈칸을 채운다

위 시험에서 2문이 막혔다고 해봅시다. 그러면 물을 질문이 정해집니다.

「4.5:1이라는 숫자는 어디서 나온 건가? 왜 하필 4.5인가?」

이게 좋은 질문입니다 — 막힌 자리에서 나왔으니까요. 반대로 안 막혔는데 미리 공부하려 드는 것은 대개 남지 않습니다.

그럼 어떻게 병렬로 굴리나 — 네 가지 습관

  1. 코드베이스에 질문한다. 「이건 왜 이렇게 돼 있나」 「이 줄은 무슨 뜻인가」 「이 함수는 어떤 예외를 처리하나」. 다른 엔지니어에게 물을 질문을 그대로 묻습니다.
    근거 — Anthropic 문서는 이 방식을 새 코드베이스에 적응하는 효과적인 방법으로 명시합니다. 「Using Claude Code this way is an effective onboarding workflow, improving ramp-up time.」
  2. 계획을 읽는다. 바로 짜게 하지 않고 계획을 먼저 만들게 한 뒤 그것을 읽습니다. 결과물은 읽어도 「왜」가 안 보이지만 계획에는 「왜」가 적혀 있습니다.
    근거 — 같은 문서, 「Explore first, then plan, then code」. 다만 작은 일에는 계획을 건너뛰라고도 적혀 있습니다 — 「If you could describe the diff in one sentence, skip the plan.」
  3. 되돌리기를 연습한다. 되돌릴 수 있으면 과감하게 시도할 수 있습니다. 시도가 학습입니다. 되돌릴 방법을 모르면 안전한 것만 하게 되고, 안전한 것만 하면 안 늡니다.
  4. 막힌 시간을 적는다. 하루 끝에 세 줄 — 오늘 막힌 곳 / 몇 분 만에 알았나 / 더 일찍 알 수 있었던 방법. 이게 이 과정 전체의 성적표입니다.
4번이 왜 성적표인가

이 과정의 목적은 여섯 가지를 해보는 것이 아니라 틀린 걸 더 일찍 아는 것입니다. 「몇 분 만에 알았나」를 매번 적으면 그 숫자가 줄어드는지가 보입니다. 줄어들지 않으면 장치를 늘려도 효과가 없는 것입니다.

무엇을 물어야 하나 — 질문 목록

「질문하세요」는 도움이 안 됩니다. 무엇을 물을지가 어렵기 때문입니다. 아래는 그대로 써도 되는 질문들입니다.

코드를 처음 볼 때

  • 이 프로젝트에서 기록은 어디에 남나? 문제가 생기면 어디를 보나?
  • 새 화면을 하나 추가하려면 어느 파일을 만져야 하나?
  • 이 함수는 어떤 예외 상황을 처리하고 있나?
  • 이 줄은 왜 이렇게 돼 있나? 기록을 찾아서 어떻게 이렇게 됐는지 알려줘

AI가 뭔가 만들어 준 뒤

  • 이 중에 내가 몰라도 되는 부분반드시 알아야 하는 부분을 나눠줘
  • 여기서 제일 고장 나기 쉬운 곳은 어디인가? 왜?
  • 이걸 다른 프로젝트에 쓰려면 무엇을 고쳐야 하나?
  • 더 쉬운 방법이 있었는데 안 쓴 이유가 있나?
마지막 질문이 특히 좋다

「더 쉬운 방법이 있었나」를 물으면 선택지가 드러납니다. AI는 대개 한 가지 답만 내놓는데, 거기엔 고르지 않은 다른 길이 숨어 있습니다. 그 길을 알아야 다음에 스스로 고를 수 있습니다.

근거 — Anthropic 문서는 코드베이스에 질문하는 방식을 새 코드에 적응하는 효과적인 방법으로 명시합니다. 「You can ask Claude the same sorts of questions you would ask another engineer… No special prompting required.

속도를 목표로 두지 않는다

이 과정이 약속하지 않는 것

「빨라진다」를 약속하지 않습니다. 앞의 실험대로면 체감은 이미 빨라져 있고, 그 체감은 틀릴 수 있습니다.

약속하는 것은 하나입니다 — 틀린 것을 더 일찍 알게 됩니다. 그 결과로 빨라질 수도 있고, 처음에는 오히려 느려질 수도 있습니다. 검사를 만드는 시간이 들기 때문입니다.

대신 되돌리기가 싫어져서 그냥 밀어붙이는 상태로 가지 않습니다. 그 상태가 「해줘」의 정체입니다.

더 알아보기 — 「믿고 나서 확인」 격차

Anthropic 문서가 흔한 실패 다섯 가지 중 하나로 꼽은 것입니다.

믿고 나서 확인하는 격차. AI가 그럴듯해 보이는 결과를 내는데 예외를 처리하지 않는다. → 확인할 수 없으면 내보내지 마라.

이 격차가 학습에서도 똑같이 일어납니다. 그럴듯한 설명을 들으면 이해한 것 같지만, 내가 말로 꺼내 보기 전까지는 확인되지 않습니다. 코드에 검사를 붙이는 것과 같은 이유로 나 자신에게도 검사가 필요합니다 — 그게 설명 시험입니다.

더 알아보기 — 이 차시가 07번인 이유

01~06을 먼저 하지 않으면 이 차시는 그냥 훈계입니다. 「공부하면서 하세요」는 아무것도 바꾸지 않습니다.

앞의 여섯 개를 실제로 갖추면 상황이 달라집니다 — 검사가 있으니 과감하게 시도할 수 있고, 명세서가 있으니 무엇을 배워야 하는지가 적혀 있고, 계획이 있으니 읽을 것이 생깁니다.

즉 07차시는 앞의 여섯 개가 만들어 준 여유로 하는 일입니다. 순서가 바뀌면 안 됩니다.

「설명할 수 있는가」를 종류별로 대 보면 물어야 할 것이 다릅니다.

설명할 수 있어야 하는 것모르면 나중에 터지는 곳
카드뉴스왜 이 크기·이 색인가 · 왜 이 값이 이 자리에서 나오나다른 상권에 적용할 때 — 색이 왜 이렇게 나오는지 모르면 손을 못 댄다
대시보드이 숫자가 무엇을 센 것인가 · 어디서 계산되는가숫자가 안 맞을 때 — 어디를 볼지 모른다
랜딩페이지문의가 어디로 가고 누가 받는가문의가 안 올 때 — 안 오는 건지 못 받는 건지 모른다
업무 자동화무엇이 이걸 깨우는가 · 실패하면 어디에 남는가멈췄을 때 — 어디서 멈췄는지 모른다
공통점

전부 「고장 났을 때 어디를 볼지」입니다. 만들 때는 몰라도 되지만, 고칠 때는 이것 하나가 전부입니다. 그리고 모든 것은 결국 고쳐야 합니다.

하루 기록의 예

이 교재를 쓰면서 실제로 나온 기록입니다.

막힌 곳몇 분 만에 알았나더 일찍 알 수 있었던 방법
명세서가 원본 요청과 정반대로 적혀 있었다대조하자 몇 분처음부터 원본을 열었으면 애초에 안 생겼다
시안 세 장이 전부 아래가 잘려 있었다검사 돌리자 1분눈으로 보기 전에 검사를 먼저 돌렸으면
달력 요일이 실제와 달랐다달력을 찍어 보자 1분「지어내지 마라」를 프롬프트에만 넣고 검사로 안 만들었다
교재 파일이 188MB로 터졌다파일 크기를 보자 1분큰 수정 전에 백업을 뜨는 습관
네 줄에서 보이는 것

전부 「알아내는 데 1~몇 분」이었습니다. 그런데 확인하지 않았다면 며칠을 잘못된 방향으로 갔을 일입니다.

그리고 세 번째 줄이 이 과정의 요약입니다 — 프롬프트에 적는 것과 검사로 만드는 것은 다릅니다. 적는 것은 권고이고, 검사는 판정입니다(05차시).

내 프로젝트 — 매일 씁니다

이 차시만 양식이 매일입니다. 한 번 채우고 끝나는 것이 아닙니다.

하루 세 줄 — 매일 씁니다
━━━ 〈날짜〉 ━━━

오늘 막힌 곳:
그걸 몇 분 만에 알았나:  ____분
더 일찍 알 수 있었던 방법:

오늘 AI가 한 것 중
  내가 설명할 수 있는 것:
  설명할 수 없는 것:      ← 여기가 내일 물어볼 것
마지막 줄만 봐도 된다 「설명할 수 없는 것」이 매일 쌓이면서 줄지 않으면 만들기만 하고 배우지 않는 상태입니다. 그게 이 과정이 막으려는 상태입니다.

주 1회 — 설명 시험

주 1회 양식
# 이번 주 설명 시험

## 1. 이번 주에 만든 것 하나를 고른다
무엇:

## 2. 남에게 설명한다 (또는 소리내어 말한다)
- 이게 무엇을 하나:
- 왜 이 방법인가 (다른 방법 대신):
- 고장 나면 어디를 보나:
- 이걸 다른 데 쓰려면 무엇을 고쳐야 하나:

## 3. 말하다 막힌 곳
(막힌 곳이 곧 빈칸이다)
-

## 4. 그 빈칸을 채운다
AI에게 물을 질문:
-

## 5. "몇 분 만에 알았나" 숫자가 줄고 있나
이번 주 평균:  ____분
지난 주 평균:  ____분
→ 줄지 않으면: 장치를 늘리는 게 아니라 다른 문제다
2번의 네 질문 네 번째(「다른 데 쓰려면 무엇을 고쳐야 하나」)가 가장 어렵고 가장 정확합니다. 이 질문에 답할 수 있으면 원리를 안 것이고, 못 하면 이번 경우만 통과한 것입니다.

막히면 이 순서로

  1. 설명할 수 없는 것이 너무 많다 → 정상입니다. 하나만 고르십시오. 전부 이해하려 들면 아무것도 못 합니다.
  2. 「몇 분 만에 알았나」가 안 줄어든다 → 검사를 늘리는 게 아니라 어떤 종류의 실수가 반복되는지 보십시오. 같은 종류가 반복되면 그건 장치가 아니라 습관 문제입니다.
  3. 기록이 귀찮아서 안 쓴다 → 세 줄로 줄이십시오. 안 쓰는 긴 양식보다 쓰는 세 줄이 낫습니다.

이 과정의 결론

한 줄

「해줘」가 되는 이유는 도구가 부족해서가 아니라 틀렸다는 걸 늦게 알기 때문입니다. 여섯 장치는 그것을 일찍 알게 해 주고, 07차시는 그 여유로 배우는 일입니다.

체크리스트

  • □ 이번 주에 만든 것 하나를 남에게 설명해 봤는가
  • □ 「다른 데 쓰려면 무엇을 고쳐야 하나」에 답할 수 있는가
  • 막힌 시간을 적고 있는가
  • □ 그 숫자가 줄고 있는가
  • 설명할 수 없는 것이 쌓이기만 하지는 않는가
  • □ 되돌리는 방법을 아는가 — 모르면 과감하게 시도할 수 없다
여기서 막힌다 — 우리도 답이 없다

솔직하게 적습니다. 이 차시는 우리도 아직 해내지 못했습니다.

01~06은 방법이 분명합니다 — 적고, 재고, 검사를 붙입니다. 그런데 07은 강제할 장치가 없습니다. 규칙 파일에 「배워라」를 쓸 수 없고, CI로 「설명할 수 있는가」를 검사할 수 없습니다.

지금까지 찾은 것은 기록뿐입니다 — 막힌 시간을 적고, 설명 못 하는 것을 적는 것. 그것도 안 쓰면 그만입니다.

이 차시가 실제로 어떻게 굴러갔는지는 한 프로젝트를 끝까지 마친 뒤에 적습니다. 그때 「이 기록이 실제로 도움이 됐나」를 숫자로 보고, 안 됐으면 안 됐다고 적습니다.

D1 · 내보내기

아티팩트는 웹사이트가 아니다

내 컴퓨터 → GitHub → Vercel — 세 장소의 역할.

세 장소

① 내 컴퓨터② GitHub③ Vercel
하는 일만들고 고치는 곳보관하고 이력을 남기는웹에 올려 주소를 주는
남이 볼 수 있나❌ (코드만)✅ 링크로 연다
꺼져도 남나내 컴퓨터가 켜져 있을 때만
되돌릴 수 있나커밋했으면✅ 이전 배포로

아티팩트(대화창 미리보기)는 ①보다도 앞입니다 — 주소도 없고 대화를 닫으면 사라질 수 있습니다. 초보자 대부분이 ①이나 그 앞에서 「다 됐다」고 합니다. 완성은 ③입니다.

「배포」는 어려운 말이 아니다

남이 열 수 있는 곳에 올리는 것입니다. 그게 전부입니다.

왜 두 곳(GitHub·Vercel)이 필요한가

GitHub만 있으면코드는 안전하고 되돌릴 수 있습니다. 그런데 남이 열 수 없습니다. 코드 파일이지 웹사이트가 아닙니다.
Vercel만 있으면남이 열고 주소도 있습니다. 그런데 이력이 없습니다. 망치면 돌아갈 곳이 없습니다.
그래서 잇는다

GitHub → Vercel. GitHub에 올리면 Vercel이 자동으로 받아 올립니다. 사람이 하는 일은 GitHub에 올리는 것까지입니다.

지금 해보세요 — 5분

  1. 위 표에서 내 것이 어느 줄인지 찍는다
  2. 「완성(③)」까지 몇 칸 남았는지 센다
  3. 다음 두 차시에서 그 칸을 채운다

대부분 ①이거나 그 앞입니다. 부끄러운 게 아니라 정상입니다.

D2 · 내보내기

GitHub에 올리기

보관 · 이력 · 되돌리기. 명령어를 외울 필요 없습니다.

절차 — 다섯 줄

  1. GitHub에서 빈 저장소를 만든다 — 이름은 폴더와 같게
  2. AI에게 「이 폴더를 그 저장소에 연결하고 올려줘
  3. 올라갔는지 GitHub 페이지에서 눈으로 확인한다
  4. 이후는 걸음 하나 끝날 때마다 「커밋하고 올려줘
  5. 망쳤으면 「마지막 커밋으로 되돌려줘

무엇을 시킬지만 알면 됩니다. 명령어는 AI가 압니다.

제일 흔한 사고 — 비밀 키를 올린다

한 번 올라간 건 지워도 남는다

설정 파일(.env)에 든 AI 키·비밀번호가 저장소에 올라가면 비공개 저장소도 위험합니다. 이력에 남기 때문에 지워도 되돌려 볼 수 있습니다.

규칙 파일에 한 줄 — 「.env 파일은 절대 커밋하지 마라」. 그리고 올릴 때마다 「비밀 키가 섞여 있는지 확인해라」.

올릴 때마다 쓰는 프롬프트
지금까지 한 걸 커밋하고 GitHub에 올려줘.

- 올리기 전에 비밀 키·비밀번호가 섞여 있는지 확인해라. 있으면 멈추고 말해라.
- 커밋 메시지는 무엇을 왜 고쳤는지 한 줄로.
- 올린 뒤 GitHub 주소를 알려줘.
「멈추고 말해라」이게 없으면 AI는 키가 섞여 있어도 그냥 올립니다.

지금 해보세요 — 15분

  1. 저장소를 만들고 올린다 — GitHub에서 눈으로 확인
  2. 일부러 파일 하나를 망친다
  3. 마지막 커밋으로 되돌려줘」 — 돌아오는지 본다
3번을 꼭

되돌리기를 한 번 해본 사람과 안 해본 사람은 그 뒤로 시도하는 크기가 다릅니다.

D3 · 내보내기

Vercel로 내보내기

GitHub와 한 번 연결하면 그 뒤로는 자동입니다.

한 번 연결하면 이렇게 돈다

고친다올린다빌드검사공개 주소
내 컴퓨터GitHubVercel 자동06차시가 붙는 곳남이 연다

사람이 하는 건 왼쪽 둘뿐입니다. 빌드는 사람이 쓴 코드를 돌 수 있는 형태로 바꾸는 일이고, 여기서 실패하면 이전 버전이 계속 돕니다 — 06차시의 「조용한 실패」가 이겁니다.

절차 — 한 번만

  1. Vercel에서 「새 프로젝트」 → GitHub 저장소 고르기
  2. 설정은 그대로 두고 배포 — 대부분 자동으로 알아봅니다
  3. 주소가 나온다 — 「이름.vercel.app」
  4. 열어서 내 컴퓨터에서 본 것과 같은지 확인
  5. 이후는 GitHub에 올리기만 하면 자동으로 다시 배포

무료 요금제 한도 — 확인한 숫자

항목Hobby(무료)걸리면
하루 배포 횟수100회넉넉합니다
월 전송량100 GB작은 사이트는 충분
서버 함수 실행 시간기본 10초 · 최대 60초오래 걸리는 일은 잘립니다
예약 실행(크론)하루 1회만⚠️ 더 자주 걸면 배포 전체가 거절 — 06차시 사고
실행 기록 보관1시간어제 오류는 못 봅니다
상업적 이용비상업 용도 조건가게 사이트면 약관 확인

출처 — Vercel Docs, Limits (2026-09). 숫자는 바뀝니다. 쓰기 전에 원본을 확인하십시오.

환경변수 — 비밀 키를 넣는 자리

AI 호출 키, 데이터베이스 주소 같은 것은 코드 파일에 쓰면 GitHub에 올라갑니다. Vercel의 「환경변수」 칸에 따로 넣고 코드는 그 이름만 부릅니다.

AI에게 한 문장

「이 키를 환경변수로 옮기고 코드에서는 이름으로 불러라.」 이거면 됩니다.

지금 해보세요 — 20분

  1. Vercel에서 GitHub 저장소를 연결한다
  2. 주소를 받고 휴대폰으로 열어 본다
  3. 옆 사람에게 링크를 보내 열리는지 확인
휴대폰으로 여는 게 중요하다

내 컴퓨터에서는 되는데 휴대폰에서 깨지는 경우가 많습니다. 02차시 층 ①의 「모바일 320px에서 안 깨짐」이 여기서 확인됩니다.

D4 · 내보내기

데이터와 주소

Supabase · Cloudflare — 필요할 때만. 첫 프로젝트는 대개 둘 다 없어도 됩니다.

먼저 — 정말 필요한가

데이터베이스가 필요한 때내 도메인이 필요한 때
여럿이 로그인해서 같은 자료를 본다
만든 것을 나중에 다시 꺼내 봐야 한다

둘 다 아니면 → 구글 시트나 파일로
명함·간판에 주소를 적어야 한다
「vercel.app」이 어색한 상대에게 보낸다

둘 다 아니면 → 무료 주소 그대로

Supabase — 무료 한도와 함정

항목무료
프로젝트2개셋째부터 유료
데이터베이스500 MB작은 관리 화면은 충분
파일 저장1 GB사진 몇백 장
로그인 사용자월 5만 명걱정 없음
⚠️ 안 쓰면1주일 뒤 멈춘다다시 켜야 합니다 — 초보자가 제일 많이 당하는 것
유료월 $25부터

출처 — Supabase Pricing (2026-09). 「1주일 안 쓰면 멈춘다」는 06차시 조용한 실패 목록에 넣으십시오.

자주 나오는 질문 — 「아마존 서버(AWS)」는 Vercel 대신인가?

맞기도 하고 아니기도 합니다. 층이 다릅니다. 그리고 사실 — Vercel도 실제로는 아마존 같은 서버 위에서 돕니다. 복잡한 설정을 다 해 놓고 「올리면 끝」으로 포장한 것입니다. 그래서 대체재는 맞지만 같은 층의 대체가 아니라 한 칸 아래로 내려가는 것입니다.

AWS · 구글클라우드 · AzureVercel · Netlify · Render
식당으로 치면빈 상가 + 전기·수도주방 설비 다 갖춘 가게
무엇을 하나주방 설계부터 직접요리만 하면 된다
성격부품 창고조립된 제품

Vercel에 올리면 뒤에서 아마존·구글 서버를 빌려 거기에 올려 줍니다. 우리가 몰라도 되게 감춰 둔 것입니다.

그럼 언제 한 칸 내려가나 — 다섯 경우뿐

상황판단
첫 프로젝트 · 소개 페이지 · 관리 화면Vercel. 내려가면 할 일만 늘어납니다
파일을 아주 많이 저장 (사진 수만 장)S3 · R2 — 여기는 Vercel이 약합니다
서버를 24시간 내 맘대로 굴려야 한다가상서버(Lightsail · Vultr · Hetzner) 또는 상시 켜둔 내 컴퓨터
회사가 「우리 AWS 계정에 올려라」선택의 여지가 없습니다
규모가 커져 Vercel 요금이 아프다이게 진짜 이유입니다 — 그때 내려갑니다

흔한 경로는 작을 땐 Vercel, 커지면 AWS입니다. 처음부터 AWS로 가는 건 대개 안 해도 될 일을 하는 것입니다 — 03차시의 「없으면 어떻게 하나」를 그대로 물어보십시오.

「내 컴퓨터를 서버로」도 정당한 선택지다

남의 서버를 빌리면(AWS·Vercel·Render) 안정적이지만 무료 한도와 요금이 따라옵니다. 내 서버를 쓰면(상시 켜둔 컴퓨터 하나) 한도가 없어 예약 실행·상시 구동이 자유롭지만 전원·인터넷이 끊기면 멈춥니다.

이 교재를 쓴 사람은 둘 다 씁니다 — 웹은 Vercel, 매일 도는 자동화는 상시 켜둔 컴퓨터. 역할로 나눈 것이지 어느 쪽이 우월한 게 아닙니다.

도구 지도 — 넷이 전부가 아니다

이 과정은 GitHub → Vercel → Supabase → Cloudflare 한 길만 끝까지 갑니다. 역할마다 대안이 여럿이고 앞으로도 계속 생깁니다. 그런데 이름을 아는 것과 쓸 줄 아는 것은 다릅니다. 한 길을 끝까지 가 본 뒤에 이 지도를 보면 「같은 역할, 다른 이름」으로 읽힙니다.

① 올리고 돌리는 곳

역할이 과정다른 선택지언제 바꾸나
웹에 올리기VercelNetlify · Cloudflare Pages · GitHub Pages정적 페이지만이면 GitHub Pages로도 충분
서버를 계속 켜 두기상시 켜둔 컴퓨터Render · Railway · Fly.io · 가상서버(Lightsail·Vultr·Hetzner)집 컴퓨터가 불안하면
예약 실행상시 컴퓨터의 cronGitHub Actions · Vercel Cron · 앱스크립트 트리거 · n8n무료 한도(하루 1회 등)에 걸리면
자동화 잇기직접 짠 스크립트n8n · Make · Zapier코드 없이 서비스끼리 이어야 할 때

② 담고 지키는 곳

역할이 과정다른 선택지비고
창고(데이터베이스)Supabase (Postgres)Neon · Turso(SQLite) · Firebase · MongoDB Atlas · 구글 시트 · Airtable · Notion첫 프로젝트는 시트로 충분한 경우가 많다
로그인Supabase AuthFirebase Auth · Clerk · Auth0 · 카카오·구글 로그인한국 손님 대상이면 카카오 로그인이 문턱이 낮다
파일 저장Supabase StorageCloudflare R2 · AWS S3 · Vercel Blob사진이 많으면 R2가 싸다
도메인·주소 관리Cloudflare가비아 · 호스팅케이알 · Namecheap사는 곳과 관리하는 곳은 달라도 된다

③ 보내고 받는 곳

역할선택지한국 소상공인이면
메일 보내기Resend · SendGrid · Mailgun · 앱스크립트(Gmail)앱스크립트가 제일 쉽다 (하루 100통 한도)
메일 받기Cloudflare Email Routing (무료)내 도메인 메일을 Gmail로 받는다
알림텔레그램 봇 · 디스코드 웹훅 · 슬랙텔레그램 봇이 제일 간단하다
문자·카톡솔라피(문자) · 카카오 알림톡손님에게 보내려면 알림톡 (템플릿 심사 있음)
결제Stripe(해외) · 토스페이먼츠 · 포트원 · 카카오페이⚠️ 사업자등록 필요. 첫 프로젝트에서는 피한다
폼·설문Tally · Typeform · 구글 폼Tally가 무료 범위가 넓다

④ 보고 재는 곳

역할선택지언제 필요한가
오류 잡기Sentry · Better Stack남이 쓰기 시작하면 — 내가 못 보는 오류가 생긴다
살아있나 확인UptimeRobot (무료)06차시 「어제 실제로 돌았나」의 도구
방문 분석Vercel Analytics · Google Analytics · Plausible · Umami문의가 안 올 때 — 안 오는지 못 받는지 가른다
AI 호출Anthropic · OpenAI · Google Gemini03차시 — 호출료·대기·한도를 먼저 본다

이 표는 2026-09 기준이고 서비스는 생기고 사라집니다. 역할 이름은 남습니다 — 「창고」 「올리는 곳」 「알림」.

도구를 고를 때 — 순서

역할부터 정한다 → ② 그 역할에서 무료 한도가 내 규모에 맞는 것을 찾는다 → ③ 「없으면 어떻게 하나」를 쓴다(03차시) → ④ 들이면 「고장 나면 내가 알 수 있나」를 같이 만든다(06차시). 넷 다 이미 배운 것입니다.

Cloudflare — 도메인 연결 세 단계

  1. 도메인을 산다 — 어디서 사든 됩니다. 연 1~2만 원
  2. Cloudflare에 도메인을 등록한다 (무료) — 주소록 관리를 여기서
  3. Vercel이 알려주는 값을 Cloudflare에 붙여넣는다 → 몇 분 뒤 연결
왜 Cloudflare인가

도메인으로 메일 받기(무료)도 되고, 나중에 다른 서비스로 옮길 때 주소만 바꾸면 됩니다. 도메인 파는 곳과 관리하는 곳을 분리해 두는 게 편합니다.

지금 해보세요 — 10분

  1. 내 프로젝트에 데이터베이스가 필요한가 — 두 조건으로 판정
  2. 내 도메인이 필요한가 — 두 조건으로 판정
  3. 둘 다 「아니오」면 이 차시는 끝

대부분 둘 다 「아니오」입니다. 필요 없는 걸 안 만드는 것도 03차시에서 배운 기술 판단입니다.

D5 · 내보내기

내보낸 뒤

배포는 끝이 아니라 시작입니다.

배포한 날 반드시 — 네 가지

  1. 지금 도는 것이 내가 올린 것인가 — 배포 시각·버전 대조 (06차시 사고)
  2. 휴대폰으로 연다
  3. 남에게 링크를 보내 열리는지 묻는다
  4. 되돌리는 법을 한 번 해본다 — Vercel은 이전 배포로 한 번에 돌아갑니다

4번을 롤백이라고 부릅니다. 망친 배포를 몇 초 만에 되돌리는 기능인데, 있는 줄 모르면 못 씁니다.

내보낸 뒤의 조용한 실패 — 06차시에 셋이 더 붙는다

실패왜 모르나확인
배포가 거절됐는데 이전 버전이 돈다화면이 멀쩡하다배포 기록을 본다
Supabase가 멈췄다 (1주 미사용)오류가 아니라 빈 화면주 1회 열어 본다
무료 한도를 넘겼다알림이 메일로만 온다한도 알림을 켜 둔다

비용

Vercel·Supabase 둘 다 무료 범위 안에서 첫 프로젝트가 됩니다. 넘기기 전에 알림이 오게 설정만 해 두면 됩니다.

월 비용의 감
Claude 유료$20
도메인연 1~2만 원
GitHub · Vercel · Supabase · Cloudflare0 (무료 범위)
상업용으로 커지면Vercel Pro $20 · Supabase Pro $25

참고 영상

내용은 검증하지 않았습니다. 도구 화면이 바뀌면 낡으니 흐름만 보고 화면은 실제 도구를 여십시오.

지금 해보세요 — 10분

  1. 배포 기록에서 내가 올린 것이 도는지 본다
  2. 롤백을 한 번 해보고 다시 되돌린다
  3. 한도 알림을 켠다
이 셋을 해본 사람은

「배포했다」고 말할 자격이 있습니다.

D6 · 내보내기

스킬로 남기기

이번에 배운 순서를 다음에도 쓰는 법 — 그리고 보안·최적화는 무엇을 지금 하고 무엇을 미루나.

다음 프로젝트에서 또 처음부터 설명할 것인가

여섯 단계를 한 번 밟았습니다. 그런데 새 대화를 열면 AI는 아무것도 기억하지 못합니다. 매번 「명세서부터 쓰자」 「안 하는 일도 적어」를 다시 설명하게 됩니다.

그래서 마지막 일이 남았다

이 순서를 글로 굳혀 두는 것. 그걸 스킬이라고 부릅니다. 거창한 게 아니라 「이럴 땐 이렇게 해라」를 적은 글 한 장입니다.

규칙 파일 · 스킬 · 훅 — 셋을 구분한다

언제 읽히나무엇을 적나
규칙 파일매번 자동으로항상 지켜야 할 숫자. 짧게명도 대비 4.5:1
스킬필요할 때만 불러서가끔 쓰는 절차「명세서 쓰는 법」
정해진 순간에 반드시예외 없이 매번 할 일올리기 전 검사

규칙 파일에 절차를 다 넣으면 길어져서 무시됩니다(05차시). 그래서 절차는 스킬로 뺍니다.

무엇을 스킬로 만드나 — 두 번 이상 한 것

  1. 이 과정의 여섯 단계 — 다음 프로젝트에서 그대로 씁니다
  2. 내 일의 반복 절차 — 견적서 쓰는 법, 보고서 양식, 응대 문구
  3. 내가 매번 고쳐 주는 것 — AI가 계속 틀리는 지점을 글로
  4. 남에게 넘길 것 — 직원·동료가 같은 방식으로 하게
기준 하나

「두 번 이상 똑같이 말했다면」 스킬로 만들 때입니다.

어디에 두나

클로드 코드웹 · 앱 (ChatGPT · Claude 등)
프로젝트 폴더 안에 .claude/skills/이름/SKILL.md
/이름 으로 부릅니다
새 대화 맨 앞에 붙여넣습니다. 또는 「맞춤 지시」·「프로젝트 지시」에
효과는 같습니다

이 과정의 여섯 단계를 적은 스킬이 부록 G에 통째로 있습니다 — 복사해서 바로 쓰십시오.


보안과 최적화 — 대부분은 나중 일이다. 셋만 지금

속도 튜닝, 부하 대비, 정교한 권한 관리 — 전부 규모가 생긴 뒤 문제입니다. 방문자 열 명짜리 첫 프로젝트에서 하면 안 해도 될 일을 하는 것입니다(03차시). 그런데 딱 셋은 첫날부터 터집니다. 이건 규모와 무관합니다.

지금 해야 하는 셋

위험무슨 일이 나나막는 법어디서 배웠나
비밀 키를 GitHub에 올림남이 내 AI 계정·DB를 씁니다. 지워도 이력에 남습니다규칙 파일에 「.env 커밋 금지」 + 올릴 때마다 확인D2
키를 코드에 박음그 파일이 어디로든 새면 같이 샙니다환경변수로 옮기고 코드는 이름만 부릅니다D3
자동으로 발송·결제·삭제되돌릴 수 없습니다. 사람이 자는 사이 일어납니다규칙 파일에 「자동으로 절대 안 하는 것」05

셋 다 이미 배운 것입니다. 여기서 한자리에 모아 확인하는 것입니다.

나중에 할 것 — 언제가 「나중」인가

할 일시작 신호
속도 최적화사람이 느리다고 말할 때. 그 전엔 재지도 마십시오
오류 추적 도구남이 쓰기 시작할 때 — 내가 못 보는 오류가 생깁니다
접근 권한 관리쓰는 사람이 둘 이상이 될 때
백업·복구 계획잃으면 곤란한 데이터가 쌓이기 시작할 때
비용 최적화요금이 아플 때 (D4 · AWS 이야기)

전부 「신호가 오면」입니다. 미리 하면 03차시의 「없으면 어떻게 하나」에 답할 수 없는 일을 하게 됩니다.

2부의 마지막 한 줄

만든 것을 남기고, 방법을 남긴다. 결과물은 Vercel에, 방법은 스킬에 — 둘 다 남겨야 다음이 쉬워집니다.

지금 해보세요 — 15분

  1. 이번에 두 번 이상 똑같이 말한 것 하나를 찾아 글로 적는다
  2. 부록 G의 여섯 단계 스킬을 내 도구에 넣는다
  3. 보안 셋을 점검한다 — .env 안 올렸나 · 키가 코드에 있나 · 자동 발송 막았나
3번은 5분이면 끝난다

그런데 안 하면 언젠가 하루를 씁니다.

체크리스트 — 과정을 마치기 전에

  • 두 번 이상 말한 것을 스킬로 적었는가
  • □ 여섯 단계 스킬을 내 도구에 넣었는가
  • .env가 GitHub에 안 올라갔는가
  • □ 키가 환경변수에 있는가
  • 자동으로 절대 안 할 것이 규칙 파일에 있는가
  • □ 나중에 할 것과 그 신호를 적어 뒀는가
부록 H · 명세서 실물

명세서 실물

시범 프로젝트의 명세서 전문입니다. 249줄, 열두 번 고친 상태 그대로 — 다듬지 않았습니다.

읽는 법

처음부터 끝까지 읽을 필요 없습니다. 5번(안 하는 일) · 6번(입력·출력) · 9번(모르는 것) · 맨 아래 변경 기록 넷만 보십시오. 그 넷에 이 교재가 말한 것이 다 들어 있습니다.

docs/spec-cardnews.md — 전문
# 명세서 — 상권 카드뉴스

> 카카오 「프로젝트 단골」 AX 심화 교육 산출물.
> **근거 문서** — 카카오 요청서(2026-09-06, 오준희 매니저 공유) + 유디임팩트 회의(2026-09-10).
> 작성 2026-09-11 · 상태 **초안** · 작성자 송병근

---

## 1. 한 문장으로

**상인회 담당자가 단톡방에 올라온 매장 소식을 복사해서 붙여넣으면, 채널에 올릴 카드뉴스가 나온다.**

---

## 2. 왜 만드나

**목적은 카드뉴스가 아니다. 단골 프로젝트가 끝난 뒤에도 카카오 채널이 계속 돌아가게 하는 것이다.**
그것도 상인회만이 아니라 **개별 상인들까지 함께.**

교육이 끝나면 대개 채널이 죽는다. 이유는 둘이다.

- **소재가 마른다.** 행사가 없는 기간에는 올릴 거리가 없다.
- **만드는 사람이 한 명이다.** 상인회 담당자 혼자 글 쓰고 사진 구하고 이미지를 다듬는다. 한 사람이 지치면 그날로 멈춘다.

이 기능은 그 둘을 동시에 푼다. **재료는 개별 매장이 주고, 상인회는 조립만 한다.**
소재가 매장 수만큼 늘어나고, 일이 한 사람에게 몰리지 않는다.

그리고 개별 상인 쪽에도 이유가 생긴다 — **단톡방에 한 줄 올리면 상인회 채널이 내 가게를 홍보해 준다.**
이게 카카오가 짚은 목적(개별 매장 사장님을 상인회 활동에 참여시키는 것)과 정확히 맞물린다.

## 3. 누가 쓰나

| | |
|---|---|
| **사용자 ①** | 상인회 담당자 1명 (매니저·상무 등) — 조립하는 쪽 |
| **나이·숙련도** | 50~60대. 복사·붙여넣기와 JPG 저장은 할 수 있는 수준 |
| **쓰는 상황** | 주 1회 또는 월 1회. 단톡방을 훑고 → 카드뉴스를 만들고 → 채널에 올린다 |
| **쓰는 기기** | 주로 PC. 모바일도 가능해야 한다 |

| | |
|---|---|
| **사용자 ②** | 개별 매장 사장님 — **재료를 주는 쪽** |
| **하는 일** | 단톡방에 자기 가게 소식 한 줄 올리기. 그게 전부다 |
| **계속 하게 만드는 것** | 올리면 상인회 채널에 내 가게가 나온다 |

⚠️ **사용자 ②가 안 움직이면 이 기능은 무용지물이다.** 그래서 「단톡방에 한 줄 올리기」보다 쉬운 방법을 요구해서는 안 된다 — 이미 쓰고 있는 도구여야 한다.

### 대상은 전원이 아니다 — 선별한다 (회의 확정)

| 기준 | 내용 |
|---|---|
| **상권 수** | **2~3곳**. 전 상권 아님 |
| **고르는 기준** | 복사·붙여넣기, JPG 저장 같은 **디지털 리터러시가 되는 사람**이 있는 곳 |
| **완주도** | 1~6회차를 **확실히 따라온** 상권 |
| **제외** | 전통시장·고령 상권은 한 회차도 버거운 곳이 있다 — 심화가 무리 |

⚠️ **별도 과정이 아니라 「6회차 + α」다.** 1~6회차를 다 마친 뒤 이어서 운영한다.
운영 방식은 **온라인 1차 교육 → 2차는 직접 해보기**, 집체·오프라인 중심.

### 확인된 전제 (2026-09-11)

✅ **상인회에는 단톡방이 대체로 있다.** 회장·매니저 등 임원들이 쓰는 방이 존재하고, 상권 일은 거기서 논의된다.
→ 「방을 새로 만들어야 하나」는 해소됐다. 다만 **그 방에 개별 매장이 들어와 있는지는 아직 모른다** (9번 참조).

⚠️ **이 사용자는 「기능이 많으면」 안 쓴다.** 지금까지 단골메이커가 지켜온 원칙 — 화면 하나에 질문 하나.

---

## 4. 하는 일

1. 담당자가 **단톡방 내용을 통째로 붙여넣는다** (여러 매장 소식이 섞인 상태)
2. 붙여넣은 글에서 **매장별 소식을 나눠서 보여준다** — 담당자가 확인·수정
3. **1p 상권 캘린더** 이미지를 만든다 — 이번 달 행사 일정·세일 기간
4. **2p~ 개별 매장 소식** 이미지를 만든다 (매장이 많으면 여러 장) — 매장 이름 + 할인·이벤트 내용
5. 담당자가 **이미지를 저장**하고, 채널에 올리는 방법을 안내받는다

---

## 5. 안 하는 일 (중요)

명세서의 절반은 이것이다. 여기 적지 않으면 만드는 쪽이 알아서 채운다.

### ⛔ 가장 큰 제약 — 「우리가 만들어 드립니다」형은 폐기된다

제안서에 있던 AX 심화(**영수증 OCR · 장부 자동화**)는 카카오가 부적합 판정했다. 이유가 그대로 이 기능의 심판 기준이 된다.

> 「AX프로덕트를 제공하여도 **유지 보수·활용도 측면에서 미지수**」

즉 카드뉴스도 **상인회가 스스로 계속 돌릴 수 있어야** 살아남는다.
우리가 대신 만들어 주는 구조, 우리가 붙어 있어야 돌아가는 구조는 **같은 이유로 폐기된다.**

### 그 외 하지 않는 것

- ❌ **단톡방을 자동으로 읽지 않는다.** 카카오톡 채팅방은 외부에서 불러올 수 없다. 복사·붙여넣기가 유일한 길이다.
- ❌ **매장별 계정을 만들지 않는다.** 개별 매장은 단톡방에 글만 올린다. 앱에 가입시키면 아무도 안 쓴다.
- ❌ **디자인을 고르게 하지 않는다.** 상권 색은 기존 방식대로 자동 배정한다. 선택지를 주면 50~60대는 멈춘다.
- ❌ **쿠폰·메시지를 더 가르치지 않는다.** 쿠폰은 현장에서 거의 안 쓰이고 있다. 이 기능의 방향은 **채널 자체를 살려 두는 것**이지 기능을 더 얹는 것이 아니다.

### ⚠️ 확정 안 된 경계 — 채널 게시를 자동으로 하나

카카오 정리본은 **「상인회에서 자체적으로 채널 소식 게시」**(수동)이다.
그런데 회의 현장 메모에는 **「카카오톡으로 받아서 채널에 자동 포스팅」**이라고 적혀 있다.

현재 명세는 **수동**으로 잡는다 — 담당자가 확인하지 않고 나가면 사고가 나고, 권한 문제도 생긴다.
**다만 이 차이는 미팅에서 확인해야 한다** (9번 참조).

## 6. 입력과 출력

### 입력 ① 단톡방 붙여넣기

- 카카오톡 대화 내보내기 또는 화면에서 긁은 **여러 줄 텍스트**
- 형식이 제각각이다 — `[홍길동] [오후 3:12] 우리 가게 이번 주 20% 할인합니다` 같은 줄이 섞여 있다
- 빈 줄·이모지·사진 표시(`사진`)가 섞여 있어도 처리돼야 한다

### 입력 ② 담당자 확인·수정

나눠진 결과를 **담당자가 눈으로 보고 고칠 수 있어야 한다.** AI가 잘못 나눌 수 있기 때문이다.

### 출력 ① 1p 상권 캘린더

| 항목 | 내용 |
|---|---|
| 크기 | 정사각 (카카오 소식이 정사각으로 자른다) |
| 담는 것 | 상권명 · 해당 월 · 날짜별 행사/세일 표시 |
| 글자 수 | 항목 하나당 **최대 14자** (넘으면 줄임표) |
| 구성 | **달력 격자 + 아래 일정 목록** (2026-09-12 안 A 확정) |
| 항목 수 | 최대 **5건** — 달력이 세로를 먹어 6건부터 넘친다(시안 실측) |

### 출력 ② 2p~ 개별 매장 소식

| 항목 | 내용 |
|---|---|
| 크기 | 정사각 |
| 담는 것 | 매장명 + 소식 한 줄 |
| 매장 수 | 한 장에 **최대 5개** |
| **장수** | **2p부터 여러 장** — 카카오 요청 원문이 「2p~ 개별 매장 소식」이다. 매장이 많으면 3p·4p로 이어진다 |
| 글자 수 | 매장명 최대 **10자** · 소식 최대 **20자** |

---

## 7. 어떻게 되면 완성인가 (검수 기준)

숫자로 적는다. 「잘 나오면」은 기준이 아니다.

- [ ] 실제 상인회 단톡방 텍스트를 붙여넣어 **매장 5곳이 정확히 나뉜다**
- [ ] 만들어진 이미지에서 **한글이 깨지지 않는다** (기존 포스터 기능과 동일 방식)
- [ ] 글자가 **틀 밖으로 넘치지 않는다** — 최대 글자 수에서 확인
- [ ] 이미지를 **저장해서 카카오톡 채널 소식에 올렸을 때 잘리지 않는다**
- [ ] 담당자가 **설명 없이 혼자** 처음부터 끝까지 해낸다 (교육 없이 화면만 보고)

### 진짜 완성 기준 — 계속 쓰이는가

위의 다섯 개는 「한 번 되는가」다. 목적은 「계속 되는가」이므로 기준이 하나 더 붙는다.

- [ ] **교육 종료 4주 뒤**에도 그 상권 채널에 소식이 올라오고 있다
- [ ] 그 소식의 재료가 **개별 매장에서 나왔다** (담당자가 혼자 지어낸 것이 아니라)
- [ ] 단톡방에 소식을 올린 매장이 **2곳 이상**이다

⚠️ 이 세 줄은 개발이 끝난 날에는 확인할 수 없다. **교육이 끝나고 한 달 뒤에 확인한다.**

---

## 8. 기존 자산으로 되는 것 / 새로 만들 것

| 요구 | 어떻게 | 새로 만드나 |
|---|---|---|
| 붙여넣기 입력 | `Step` 의 `text` 종류 — 이미 있음 | ❌ |
| 매장별로 나누기 | AI 호출로 나눔 | ✅ 신규 |
| 이미지 위에 한글 | `poster`의 캔버스·글꼴(`KFONT`)·줄바꿈(`wrapLines`)은 그대로 | **절반** |
| **사진 없는 배경 위 구성** | 기존 **「위 색지」 틀**이 색면+글자를 이미 한다 → 아래 사진 자리를 달력·목록으로 바꾸는 **변형**. 단 캔버스 크기를 1080으로 직접 지정하는 경로는 필요 | **변형** |
| 상권별 색 배정 | 기존 방식 그대로 | ❌ |
| 정사각 출력 | `poster.square` — 이미 있음 | ❌ |
| **월간 달력 그리기** | — | ✅ **신규, 가장 어려움** |
| 상인회 모드 노출 | `audience: "상인회"` — 이미 있음 | ❌ |

**결론 — 신규는 둘이다.** 매장별로 나누기, 월간 달력 그리기. (2026-09-12 03차시에서 셋 → 둘로 줄었다. 계획은 `docs/plan-cardnews.md`)

### 상권 색 자동 배정 확인 (2026-09-11)

`themeFor()`는 5색뿐이라 담당 5상권 중 **3곳이 같은 「진초록」**으로 나온다.

| 상권 | 배정 색 |
|---|---|
| 남천해변시장 · 도계부부시장 · 중앙길 | 진초록 `#14532D` |
| 동매신포동 | 보라 `#4C1D95` |
| 남목마성시장 | 진빨강 `#8B1E1E` |

각 상권은 자기 채널만 보므로 실사용에 문제는 없다. **색을 늘리지 않는다** — 고르게 하지 않는다는 원칙이 더 중요하다.

---

## 9. 아직 모르는 것

빈칸을 메우지 않고 빈칸으로 둔다. 여기를 추측으로 채우면 그게 나중에 사고가 된다.

- ❓ **그 단톡방이 임원용인가, 전 점포용인가** — 임원용이면 개별 매장 소식이 거기 올라오지 않는다. 이 경우 「전 점포 단톡방 개설」이 1단계가 된다
- ❓ **계약·정산 형태** — 기존 U-F26.1.0021(6회차·상권당 210만)과 별건인지 증액인지
- ❓ **산출물 귀속** — 단골메이커는 우리가 만든 것인데 확장분의 소유·운영 주체
- ❓ **채널 게시가 수동인가 자동인가** — 정리본은 수동, 현장 메모는 「자동 포스팅」
- ❓ **대상 상권 2~3곳이 어디인가** — 기준은 정해졌으나 상권명 미정
- ❓ **대전 응고비 채널** 실물 — 카드뉴스 톤·구성의 벤치마킹 기준인데 채널명·링크 미확인

---

## 10. 회의에서 나온 아이디어 (이번 범위 밖 · 검토 대상)

명세에 넣지 않았지만 버리지도 않는다.

| 아이디어 | 상태 |
|---|---|
| **상권 캘린더를 카카오 이모티콘으로** | 검토만 — 이번 개발 범위 아님 |
| **AX로 상권 캐릭터 만들기** | 검토만 |
| **카카오맵 쉬운광고** (30만원, 주변 매장에 자동 노출) | ⚠️ 업종에 따라 「서비스 준비 중」으로 막힌다. **단골메이커에서 이미 숨김 처리함(2026-09-03)** |
| **상인회 홈페이지** | 니즈만 확인됨 |

---

## 11. 일정

11월 말~12월 성과공유회 전에 교육이 끝나야 한다. 역산은 별도 문서.

---

*이 명세서는 개발하면서 고친다. 고친 이유는 아래에 남긴다.*

## 변경 기록

| 날짜 | 무엇을 | 왜 |
|---|---|---|
| 2026-09-11 | 초안 작성 | — |
| 2026-09-11 | 「단톡방이 있는가」를 확인된 전제로 옮김 | 병근 확인 — 상인회 임원 단톡방은 대체로 있다 |
| 2026-09-11 | 「임원용인가 전 점포용인가」를 새 물음으로 추가 | 답 하나가 더 좁은 물음을 낳았다. 개별 매장이 그 방에 없으면 4번 1단계가 통째로 바뀐다 |
| 2026-09-11 | **2번 목적을 다시 씀** | 병근 — 「본질은 프로젝트가 끝나도 상인·상인회 모두가 카카오 채널을 계속 쓰게 하는 것」. 카드뉴스는 수단이지 목적이 아니다 |
| 2026-09-11 | 사용자를 둘로 나눔 (상인회 담당자 / 개별 매장) | 개별 상인도 「계속 쓰는」 대상이다. 둘째 사용자가 안 움직이면 기능 자체가 돌지 않는다 |
| 2026-09-11 | **7번에 지속 기준 3줄 추가** | 목적이 「계속 쓰임」이면 「한 번 됨」은 완성이 아니다. 개발 끝난 날에는 확인할 수 없는 기준이 생겼다 |
| 2026-09-11 | **원본 대조 후 대폭 수정** | 카카오 요청서·9/10 회의록을 한 줄씩 대조. 아래 다섯 건이 어긋나 있었다 |
| ↳ | 「3p 이상 안 만든다」 **삭제** | 원문이 「2p~ 개별 매장 소식」이다. 여러 장을 상정한 요구였는데 반대로 못 박아 놨었다 |
| ↳ | 「우리가 만들어 드립니다형 금지」를 5번 맨 위로 | 영수증 OCR 폐기 사유(유지보수·활용도 미지수)가 이 기능의 심판 기준이다 |
| ↳ | 3번에 **선별 기준** 추가 | 전원이 아니라 상권 2~3곳. 리터러시·완주도로 고른다. 「6회차 + α」 형태 |
| ↳ | 「쿠폰·메시지 더 안 가르침」 추가 | 쿠폰은 현장에서 거의 안 쓰인다 |
| ↳ | **10번 검토 대상 아이디어** 신설 | 이모티콘·캐릭터·쉬운광고·홈페이지 — 범위 밖이지만 버리지 않는다 |
| ↳ | 「채널 자동 게시」를 **확정 안 된 경계**로 | 정리본은 수동, 현장 메모는 자동 포스팅. 확인 필요 |
| 2026-09-11 | 8번 「이미지 위 한글 = 이미 있음」을 **절반**으로 정정 | 시안을 그려 보니 기존 포스터는 「사진 위 글자」였다. 카드뉴스는 사진이 없어 구성을 새로 짜야 한다 |
| 2026-09-11 | 상권 색 배정 실측 추가 | 5상권 중 3곳이 같은 색. 색은 늘리지 않기로 |
| 2026-09-12 | **1p = 달력 격자(안 A) 확정** | 병근 선택. 기간이 눈에 보이는 쪽 |
| 2026-09-12 | 1p 항목 수 **8건 → 5건** | 달력이 세로를 먹는다. 시안을 실측해 6건부터 넘치는 것을 확인 |
| 2026-09-12 | 8번 「사진 없는 배경」을 신규 → **변형**으로 | 03차시에서 코드를 한 번 더 뒤지니 「위 색지」 틀이 이미 있었다. 신규가 셋에서 둘로 |
| 2026-09-12 | 새로 들인 라이브러리·서비스 **0개** 확정 | AI 이미지 생성도 불필요(배경이 색면) |
눈여겨볼 곳 셋 9번 — 물음표 여섯 개가 지워지지 않고 남아 있습니다.
10번 — 「검토 대상 아이디어」. 범위 밖이지만 버리지도 않은 것들입니다.
변경 기록 — 열두 줄. 초안이 어떻게 틀렸고 어떻게 고쳐졌는지가 그대로 남아 있습니다.
부록 A · 실전 기록

하루치 기록실제 사례

2026년 9월 10일 하루 동안 실제로 있었던 다섯 장면. 전부 「늦게 알 뻔한 것을 일찍 알아낸」 사례입니다.

무슨 일이 있었나무엇을 배웠나
광고가 이틀째 노출 0
상태는 전부 정상으로 보였다. 추측하지 않고 API로 직접 물어보니 입찰가가 최저가 70원이었고, 실제 노출에는 1,560~79,120원이 필요했다.
추측하지 말고 찔러 봐라.
화면이 정상으로 보이는 것과 실제로 도는 것은 다르다.
메일 95통 전수 검사
사람이 다 읽을 수 없어 전부 렌더해서 규칙으로 걸렀다. 모순 55건이 나왔다 — 아동 강좌 안내에 「자기 업무를 가져오세요」가 들어가 있었다.
눈으로 못 보는 건 기계로 세어라.
「대충 맞겠지」가 가장 비싸다.
그 검사기가 4건을 오진
「홈페이지에서 보았습니다」의 홈페이지를 제작물로 읽었다. 검사 도구 자체가 틀렸다.
검사 도구를 믿지 마라.
검사기도 검사 대상이다.
화면 하나를 만들었다가 철회
「입력이 번거로워 기록이 안 된다」는 가정으로 전용 화면을 만들었는데, 기록을 보니 가정이 틀렸다. 문제는 옆 칸에 잘못 입력한 것이었다. 만든 것을 지웠다.
증거가 반대면 되돌려라.
진단이 틀리면 만든 것이 전부 낭비다.
배달 19건이 전부 실패로 보임
알고 보니 요청 헤더 하나 때문에 서버가 막은 것이었다. 메일은 처음부터 다 도착해 있었다.
「고장났다」보다 「내가 잘못 봤다」를 먼저 의심하라.
이 다섯 장면의 공통점

전부 확인하는 데 몇 분이 걸렸고, 확인하지 않았다면 며칠을 잘못된 방향으로 갔을 일입니다. 거짓 생산성은 확인을 건너뛸 때 생깁니다.

부록 B · 대상 프로젝트

이번에 만들 것

카카오 「프로젝트 단골」 AX 심화 교육에 들어갈 카드뉴스 생성 기능. 가상의 예제가 아니라 실제 납품물입니다.

요구사항

  1. 개별 매장이 할인·소식을 단톡방에 올린다
  2. 상인회 담당자가 그 내용을 복사해서 붙여넣는다
  3. 카드뉴스가 만들어진다 — 1p 상권 캘린더(행사 일정·세일 기간) / 2p 개별 매장 소식
  4. 상인회가 카카오톡 채널에 게시한다

왜 이 기능인가

교육이 끝나면 대개 채널이 죽습니다. 만들어 준 것은 유지가 안 되고, 담당자 한 분이 콘텐츠를 다 만들 수도 없습니다. 이 기능은 개별 매장이 재료를 주고 상인회가 조립만 하게 만들어, 교육이 끝난 뒤에도 굴러가게 하는 것이 목적입니다.

기술적으로 확인된 것

요구실현 방법난이도
채팅방 내용 취합카톡 채팅방은 외부에서 불러올 수 없다. 담당자가 복사해 붙여넣는 방식 — 기존 제품이 이미 쓰는 패턴낮음
카드뉴스 이미지 생성기존 포스터 기능 확장. 한글이 깨지지 않는 방식은 이미 확보낮음
1p 상권 캘린더신규 — 날짜·행사·세일 기간을 받아 월간 달력형으로중간
2p 개별 매장 소식기존 소식 케이스를 여러 매장 취합형으로 변형낮음
이 프로젝트가 교재로 좋은 이유

크기가 적당합니다. 너무 작으면 설계서를 쓸 일이 없고, 너무 크면 한 과정에 담기지 않습니다. 신규 케이스 한두 개 분량이면서 실제 마감과 납품처가 있습니다.

부록 C · 다른 종류의 작업

랜딩페이지 · 보고서 · 업무 자동화

본 과정은 카드뉴스대시보드 두 가지로 설명합니다. 내 프로젝트가 아래에 더 가깝다면 여기서 값을 가져가십시오.

한 줄 판정

종류한 줄 판정읽는 방식제일 아픈 실수
랜딩페이지모르는 사람이 처음 와서 판단하는 페이지판단무슨 회사인지 모르고 나간다
보고서·제안서결정권자가 읽고 결재하는 문서읽기근거가 없다 · 숫자가 안 맞는다
업무 자동화지금 사람이 하는 일이 사람 손을 떠난다안 봄 — 잘 돌면 아무도 안 본다조용히 멈춘다 · 하면 안 될 것을 한다
챗봇 · 알림봇사람이 말을 걸거나, 봇이 사람을 찾아온다대화 — 한 번에 한 줄무시당한다 · 거짓을 자신 있게 말한다
업무 자동화만의 특이점

다른 셋은 사람이 결과를 봅니다. 자동화는 잘 돌 때 아무도 안 봅니다. 그래서 「어제 실제로 돌았는가」를 확인하는 장치가 기능 자체만큼 중요합니다.

챗봇 · 알림봇은 「업무 자동화 + 대화」다

텔레그램·디스코드 알림, 사내 문의 챗봇, 일정 리마인더 — 전부 업무 자동화의 갈래입니다. 여섯 단계가 그대로 적용되고, 하나가 더 붙습니다.

차시챗봇·알림봇에서는
01 SDD5번에 「이 봇이 답하지 않는 것」을 적는다. 가격·일정·법률처럼 틀리면 큰 것부터
02 시안화면 대신 대화 전체를 적는다. 첫 인사 · 모를 때 · 틀렸을 때 · 끝낼 때 네 가지는 반드시
03 스택어디서 돌릴지 · 같은 메시지에 두 번 답하지 않게 하는 방법
04 TDD같은 입력 두 번 · 모르는 질문에 「모른다」고 하는가
05 하네스⚠️ 봇이 자신 있게 지어내는 것을 막는 규칙. 「근거 없으면 답하지 말고 담당자에게 넘겨라」
06 CI/CD어제 실제로 알림이 갔는가 · 답이 끊긴 질문이 있는가
+ 알림에만끄는 법보내지 않을 시간. 이게 없으면 며칠 만에 무시당한다
봇에서 제일 흔한 실패

기능이 안 돼서가 아니라 무시당해서 죽습니다. 원인은 대개 둘입니다 — 너무 자주 보내거나, 한 번 크게 틀렸거나.

그래서 봇은 01차시 5번(안 하는 일)과 05차시(지어내기 막기)가 다른 종류보다 훨씬 무겁습니다.

01차시 — 명세서에서 무게가 실리는 칸

랜딩페이지보고서업무 자동화
1. 한 문장누가 와서 무엇을 하고 가나누가 읽고 무엇을 결재하나무엇이 사람 손을 떠나나
3. 누가 쓰나얼마나 모르는 상태로 오나결정 권한과 읽는 시간지금 그 일을 하는 사람 — 없어지는 일인가 줄어드는 일인가
5. 안 하는 일이 페이지가 안 받는 문의이 보고서가 안 다루는 범위⚠️ 자동으로 절대 안 하는 것 — 발송·결제·삭제
6. 입력·출력받는 값과 어디로 가나숫자의 출처와 기준 시점트리거 · 실패 시 행동
7. 완성 기준문의 전환 · 첫 화면에서 이해되나표 합계가 본문과 일치틀렸을 때 되돌릴 수 있나 · 손으로 하던 시간
제일 위험한 칸1번6번5번

02차시 — 디자인 세 층

랜딩페이지보고서
층 ① 숫자본문 16px · 모바일 320px에서 안 깨짐 · 누를 것 44×44pt · 첫 화면 로딩 2.5초인쇄 10pt · 여백 15mm · A4 경계를 넘지 않음
이 종류만의 검사첫 화면이 정지 상태에서 읽히는가(스크롤 없이) · 깨진 링크표 합계가 본문 숫자와 일치
고를 게 몇 개1개 — 다음 행동 하나0개 — 읽는 문서다
제일 크게 둘 것무슨 회사인지. 그다음이 그 하나의 행동결론
층 ③ 막을 것화면 꽉 채우는 히어로 · 보라~파랑 그라데이션 · 똑같은 기능카드 3장 · 스크롤해야 나타나는 글근거 없는 도표 · 원본에 없는 숫자 채워 넣기 · 영어 약자 단독 사용

03~06차시

랜딩페이지보고서업무 자동화
기술 선택의 함정문의 한 줄 받으려고 서버·DB를 들이는 것매번 손으로 다시 만드는 것무료 한도(실행 횟수·주기)에 걸려 조용히 멈추는
테스트할 것폼 유효성 · 링크 살아있음 · 모바일 폭표 합계 · 숫자 일치같은 입력을 두 번 넣어도 두 번 실행되지 않는가
테스트로 안 잡히는 것「설득되는가」「결론이 옳은가」보내는 내용이 적절한가
규칙 파일에 박을 것브랜드 색·글꼴 · 하지 않는 표현숫자는 원본에서만 · 없는 값은 빈칸으로⚠️ 자동으로 절대 하지 않는 것 · 실패하면 멈춘다
기계에게 맡길 검사깨진 링크 · 모바일 폭 · 로딩 속도합계 대조어제 실제로 돌았는가
표에 내 것이 없다면

열을 새로 만듭니다. 「한 줄 판정」부터 쓰면 나머지는 따라옵니다 — 읽는 방식(스침·조작·판단·읽기·안 봄)이 정해지면 층 ①·②·③이 거의 결정됩니다.

부록 D · 워크시트

워크시트 한 장

전 차시의 「내 프로젝트」 칸만 모았습니다. 강의 중에는 이 한 장만 채워도 됩니다.

전체 워크시트 — 복사해서 쓰세요
━━━ 내 프로젝트 워크시트 ━━━
이름 ______   프로젝트 ______   날짜 ____-__-__

■ 시작 전 — 가져온 것
무엇을 만들 것인가 (한 줄):
혼자서 2~3주에 끝낼 수 있는 크기인가?   [ ] 예  [ ] 아니오(줄이기)
원본 자료가 있는가 (요약본 말고):        [ ] 있음 ______  [ ] 없음

■ 01 SDD
1. 한 문장 — 누가 ____ 하면 ____ 가 나온다
2. 왜 만드나 — 없으면 ____ 한 일이 벌어진다
3. 누가 쓰나 —
5. 안 하는 일 (5줄) —
6. 입력·출력 (숫자로) —
7. 완성 기준 — [ ]   [ ]   [ ]
8. 이미 있는 것 / 새로 만들 것 —
9. 아직 모르는 것 (물음표로) —

■ 02 디자인 시안
0. 한 줄 판정 — 이것은 〈누가〉 〈어디서〉 〈몇 초〉 보는 〈무엇〉 이다.
   틀렸을 때 제일 아픈 것은 ____
   가까운 쪽:  [ ] 스치며 보는 것   [ ] 매일 조작하는 것
층 1 숫자 — 명도 대비 4.5:1 / 최소 글자 ____ / 넘침 0 / 기타 ____
층 2 6번 답 — 제일 크게 둘 것: ____
층 3 막을 것 —
두 안 — A( 포기: ____ ) / B( 포기: ____ ) → 선택 ____
이 선택 때문에 명세서에서 바뀐 것: ____

■ 03 기술 스택 · 개발 계획
이미 쓰는 것 위에 얹나 / 새로 들이나:
새로 들인다면 그 값어치 (없으면 얹는다):
한 번에 시키는 크기 (한 번에 시켜서 눈으로 확인할 수 있는 크기):
다음 세 걸음:  1)        2)        3)

■ 04 TDD
테스트할 것 (판정 가능한 것):
테스트로 안 잡히는 것 (사람이 봐야 하는 것):

■ 05 하네스
규칙 파일에 박을 것 (숫자만, 5개 이내):
자동으로 절대 하지 않을 것:

■ 06 CI/CD
기계에게 맡길 검사:
배포가 조용히 실패하면 어떻게 아나:

■ 07 분석·학습
이번에 AI가 한 것 중 내가 설명할 수 있는 것:
설명할 수 없는 것 (← 여기가 다음에 공부할 것):

━━━ 매 차시 끝에 한 줄 ━━━
오늘 막힌 곳:
그걸 몇 분 만에 알았나:  ____분
더 일찍 알 수 있었던 방법:
맨 아래 세 줄이 이 과정의 핵심 「몇 분 만에 알았나」를 매번 적으면 확인 장치가 실제로 값어치가 있는지가 숫자로 보입니다. 이 과정의 목적은 여섯 가지를 해보는 것이 아니라 틀린 걸 더 일찍 아는 것입니다.

차시별로 나눠 쓰려면

각 차시의 실습 탭에 그 차시 양식만 따로 있습니다. 처음에는 이 한 장으로 시작하고, 막히는 차시에서 그 탭의 상세 양식으로 넘어가는 것을 권합니다.

강사용 메모

차시마다 워크시트를 다 채우게 하지 마십시오. 빈칸이 남는 게 정상이고, 특히 9번(모르는 것)이 비어 있으면 오히려 잘못된 것입니다. 「모르는 걸 모른다고 적는 연습」이 이 과정에서 제일 어렵습니다.

부록 E · 근거 자료

근거 자료

이 교재에서 내 판단이 아닌 부분은 출처를 본문에 붙여 두었습니다. 여기 모아 둡니다.

실증 연구 — 「거짓 생산성」의 근거

자료핵심쓴 곳
METR — Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity
metr.org
숙련 개발자 16명 · 실제 작업 246건 · 무작위 배정.
예상 24% 빨라짐 → 실제 19% 느려짐 → 사후 체감 20% 빨라짐
00 · 06 · 07
DORA 2024 — Accelerate State of DevOps Report (Google Cloud)
dora.dev
「AI 도입은 개인 생산성·흐름·직무 만족도를 크게 올리지만, 배포 안정성과 처리량에는 부정적」 → 「작은 단위와 튼튼한 테스트 같은 기본이 여전히 결정적」 06
한계를 함께 읽어야 한다

METR — 참가자 16명, 자기가 잘 아는 저장소에서, 2025년 초 도구로. 연구진 스스로 「하나의 상황에서 찍은 한 장면」이라고 적었습니다. 「AI는 느리다」가 결론이 아닙니다.

DORA — 위 문장은 공개 요약 페이지의 표현이고, 구체적 수치는 전체 보고서 PDF에 있습니다. 여기서는 확인하지 않았습니다. 수치를 인용해야 할 때는 원본을 열어 확인하십시오.

실무 지침 — 방법의 근거

자료쓴 곳
Anthropic — Best practices for Claude Code
code.claude.com/docs/en/best-practices
05 「검사가 없으면 당신이 검사 장치가 된다」 · 강도 사다리 · 규칙 파일 넣을 것/뺄 것 · 「지시는 권고, 훅은 강제」 · 증거 요구 · 검토자의 과잉 설계 함정 · 흔한 실패 다섯 · 07 코드베이스 질문하기(온보딩) · 탐색→계획→구현
W3C — WCAG 2.2
w3.org/TR/WCAG22
02 본문 대비 4.5:1 (성공기준 1.4.3) · 큰 글자 3:1 · 글자 아닌 것 3:1 (1.4.11) · 누를 것 최소 크기 (2.5.8)
Apple — Human Interface Guidelines
developer.apple.com · Material Design
02 누를 것 44×44pt (Apple) · 48×48dp (Material)

이 교재 자체의 기록

다음은 남의 자료가 아니라 이 교재를 쓰면서 실제로 생긴 것입니다. 「여기서 막힌다」 칸의 출처입니다.

산출물어느 차시
docs/spec-cardnews.md — 명세서 (변경 기록 12줄)01
docs/mockup-cardnews.html — 시안 3장02
docs/design-rules-cardnews.md — 디자인 규칙 세 층02
scripts/design-check.py — 명도 대비 + 넘침 검사02 → 05 → 06
docs/plan-cardnews.md — 기술 판단과 다음 세 걸음03

참고 영상

내용을 검증하지 않았습니다. 강의 준비용 참고로만 씁니다 — 영상은 말로 지나가서 근거로 인용하기 어렵습니다.

영상채널이어지는 차시
AI Agent Harness & Loop EngineeringSean's AI Stories05 하네스
Guardrails with LangChainKrish Naik05
Master ALL 20 Agentic AI Design PatternsMark Kashef후속 과정
Why AI Agents Need A Human in the Loop NowIBM Technology후속 과정

한국어 영상은 대부분 특정 도구 소개 위주라 방법론 근거로는 약합니다. 도구는 바뀌고 위 기준은 남습니다.

출처를 붙이는 이유

강의에서 「제가 해보니까」와 「이건 표준입니다」는 무게가 다릅니다. 둘을 섞으면 듣는 사람이 무엇을 믿어야 할지 모릅니다. 그래서 이 교재는 표준 · 공개 지침 · 우리 규칙 · 우리 경험을 구분해서 적었습니다.

부록 F · 말 풀이

말 풀이

이 교재에 나오는 말과, AI를 쓰다 보면 마주칠 말을 한 줄씩 풉니다. 모르는 말이 나오면 여기부터 보십시오.

외우지 마십시오

필요할 때 찾아보는 표입니다. 실제로 자주 쓰는 건 열 개쯤이고, 나머지는 「어디선가 본 말」로만 남아도 충분합니다.

이 과정에서 쓰는 말

어디서
명세서
SDD · 스펙
코드를 짜기 전에 무엇을 만들지 글로 못 박은 문서. 만드는 쪽이 읽고 그대로 만들 수 있어야 한다01
시안코드를 짜기 전에 눈으로 볼 수 있게 만든 견본02
세 층디자인 기준을 셋으로 나눈 것 — ① 기계가 재는 숫자 ② 사람이 답하는 질문 ③ 하지 않을 것02
명도 대비글자와 배경의 밝기 차이. 4.5:1 이상이어야 읽힌다는 공개 기준이 있다02
한 걸음한 번에 시켜서 끝내고, 열어 보면 맞는지 아는 작업 한 덩어리03
하네스AI가 스스로 돌려서 통과·실패를 읽을 수 있는 검사. 원래 뜻은 말에 씌우는 마구05
여기서 막힌다이 교재에서 실제로 막혔던 지점만 적는 칸. 지어내지 않는다전 차시

개발에서 쓰는 말

식당으로 치면
프론트엔드사람이 보고 누르는 화면
백엔드계산하고 저장하고 바깥을 부르는 일하는 곳주방
데이터베이스
DB
자료를 담아 두는 창고냉장고
API다른 프로그램에 일을 부탁하는 창구. 「이렇게 물으면 이렇게 답한다」는 약속주문서 양식
라이브러리남이 만들어 둔 부품 묶음. 가져다 쓰면 시간이 준다완제품 소스
프레임워크라이브러리보다 큰 것. 전체 뼈대까지 정해져 있다주방 설비 일체

언어·도구 이름

이름한 줄
자바스크립트 (JavaScript)웹 화면의 유일한 언어. 브라우저가 이것만 알아듣는다
타입스크립트 (TypeScript)자바스크립트에 「이 값은 숫자다」 같은 표시를 붙인 것. 실수를 기계가 잡아 준다
파이썬 (Python)자료를 다루는 언어. 엑셀·PDF·자동화에 강하다. 웹 화면은 못 만든다
앱스크립트 (Apps Script)구글 문서 안에서 도는 자바스크립트. 시트·지메일·캘린더를 바로 만진다
Next.js자바스크립트로 웹사이트를 만드는 프레임워크. 화면과 일하는 곳을 한 프로젝트에 담는다
SQLite파일 하나가 곧 창고인 작은 데이터베이스
Supabase창고 + 로그인·파일보관·실시간을 한 묶음으로 주는 서비스
Vercel만든 웹사이트를 남의 서버에 올려 주는 서비스. 무료 구간이 있다
깃 · 깃허브 (Git · GitHub)코드의 변경 이력을 남기고 되돌리는 도구 · 그것을 올려 두는 곳

AI를 쓸 때 나오는 말 — 제일 자주 보는 것

왜 중요한가
API다른 프로그램에 일을 부탁하는 창구. 「이렇게 물으면 이렇게 답한다」는 약속바깥 서비스를 쓰려면 거의 항상 나온다
API 키그 창구를 쓸 수 있는 내 출입증남이 주우면 내 돈으로 씁니다. 코드에 적지 않습니다 (D3)
MCP
Model Context Protocol
AI에게 도구를 꽂아 주는 규격. 콘센트 규격 같은 것AI가 내 자료(노션·파일·DB)를 보게 할 때
토큰AI가 글을 세는 단위. 대충 한글 한 글자 ≈ 1토큰요금과 한도가 이걸로 매겨진다
컨텍스트
컨텍스트 윈도
AI가 지금 한 번에 볼 수 있는 양넘치면 앞의 말을 잊는다 → /clear 를 쓰는 이유
모델AI의 종류. 같은 회사에도 여러 개센 모델 = 비싸고 느림. 03차시 「모델 고르는 순서」
프롬프트AI에게 주는 지시문이 과정 전체가 이것을 다듬는 일
할루시네이션
환각 · 지어내기
AI가 없는 것을 그럴듯하게 만들어 내는 것「모르면 모른다고 해라」가 모든 프롬프트에 들어가는 이유
RAG
검색 붙이기
답하기 전에 내 자료에서 먼저 찾아보게 하는 방식지어내기를 줄이는 흔한 방법. 「문서 주소를 주는 것」이 가장 단순한 형태
에이전트스스로 판단하고 도구를 골라 쓰는 AI「시키면 답하는 것」과 다르다 — 후속 과정 주제
스킬반복하는 절차를 글로 적어 둔 것필요할 때만 불려 온다 (D6)
파인튜닝모델 자체를 내 자료로 다시 훈련시키는 것⚠️ 대부분 필요 없습니다. 프롬프트·RAG로 먼저 해결됩니다
멀티모달글뿐 아니라 그림·소리·영상도 다루는 것시안 이미지를 붙여넣을 수 있는 이유 (02차시)
온프레미스남의 서버 말고 우리 회사 안에서 돌리는 것자료를 밖에 못 내보내는 기관에서 나온다

웹·인터넷 쪽 말

도메인사람이 읽는 주소 이름 (busanaicodingschool.com)
서브도메인도메인 앞에 붙이는 방 이름 — vibebook.busanaicodingschool.com
DNS주소록. 「이 이름은 저 서버」를 알려 주는 안내소
호스팅만든 것을 남이 볼 수 있게 올려 두는 일 (Vercel 등)
서버항상 켜져 있으면서 요청에 답하는 컴퓨터
클라이언트요청하는 쪽 — 내 브라우저·앱
HTTP · HTTPS브라우저와 서버가 말을 주고받는 방식. S가 붙으면 암호화
SSL 인증서HTTPS를 쓰게 해 주는 신분증. Vercel이 자동으로 준다
캐시한 번 받은 걸 저장해 뒀다 다시 쓰는 것
정적 · 동적정적 = 누가 봐도 같은 화면 · 동적 = 사람마다 다른 화면
반응형화면 크기에 따라 배치가 바뀌는 것 (휴대폰·PC)

자료·저장 쪽 말

JSON프로그램끼리 자료를 주고받는 글 형식. 이름과 값이 짝지어진 목록
CSV쉼표로 칸을 나눈 표 파일. 엑셀로 열린다
스키마자료의 모양 규칙 — 「이 표에는 이런 칸이 있다」
쿼리창고에 물어보는 말 — 「이번 달 예약만 뽑아줘」
마이그레이션창고의 모양을 바꾸는 작업 (칸 추가 등)
백업복사본을 따로 떠 두는 것. 「잃으면 곤란한 것」이 생기면 (D6)

만들고 고칠 때 나오는 말

함수일 하나를 하는 코드 덩어리. 이름을 부르면 그 일을 한다
변수값을 담아 두는 이름표
패키지 · 의존성남이 만든 부품과, 내 프로젝트가 그것에 기대고 있는 상태
npm · pip그 부품을 받아 오는 도구 (자바스크립트 · 파이썬)
리팩터링기능은 그대로 두고 코드를 정리하는 일
디버깅왜 안 되는지 찾아내는
로그프로그램이 남긴 기록. 고장 나면 여기부터 본다 (06차시)
브랜치원본은 두고 딴 줄기에서 작업하는 것
머지그 줄기를 다시 합치는
PR
풀 리퀘스트
「이렇게 고쳤는데 합쳐도 될까요」 하고 올리는 것
이슈할 일·버그를 적어 두는 쪽지
롤백배포한 것을 이전 것으로 되돌리기 (D5)

돌리고 내보내는 말

빌드사람이 쓴 코드를 실제로 돌 수 있는 형태로 바꾸는 일. 여기서 실패하면 아예 안 돈다
배포만든 것을 실제 서비스에 올리는 일
커밋지금까지 고친 것을 한 덩어리로 기록해 두는 일. 되돌릴 지점이 된다
CI올릴 때마다 기계가 검사를 돌리는 것
CD검사를 통과하면 자동으로 배포되는 것
(hook)정해진 순간에 반드시 실행되는 장치. 지시는 안 지킬 수 있지만 훅은 못 피한다
린터 (linter)코드의 형식·흔한 실수를 자동으로 지적하는 도구
크론 (cron)정해진 시각에 자동 실행시키는 장치
몰라도 되는 말

위 표에 없는 말이 강의에 나오면 물어보십시오. 설명 없이 지나가는 용어가 있다면 그건 강의 쪽 잘못입니다. 이 교재는 「전문 용어를 단독으로 쓰지 않는다」를 규칙으로 삼습니다.

부록 G · 가져가서 쓰는 것

가져가서 쓰는 스킬

과정이 끝나면 이 여섯 단계를 AI에게 들려 주고 각자 프로젝트에 쓸 수 있습니다. 아래를 통째로 복사해 쓰십시오.

무엇인가

AI에게 「너는 이 순서로 나를 도와라」라고 미리 일러 두는 글입니다. 한 번 넣어 두면 매번 설명하지 않아도 됩니다.

도구어디에 넣나
Claude Code프로젝트 폴더에 .claude/skills/vibe/SKILL.md로 저장 → /vibe로 부른다
ChatGPT · Claude 웹새 대화 맨 앞에 붙여넣거나, 맞춤 지시·프로젝트 지시에 넣는다
그 외대화 시작할 때 붙여넣으면 된다
전문 — 통째로 복사하세요
---
name: vibe
description: 막히는 곳부터 배우는 바이브코딩 — 여섯 단계로 함께 만든다
---

너는 나와 함께 하나의 프로젝트를 만든다. 아래 여섯 단계를 순서대로 밟는다.
단계를 건너뛰지 마라. 내가 건너뛰자고 해도 한 번은 말려라.

## 공통 규칙 (모든 단계에)
- 모르면 모른다고 해라. 추측으로 빈칸을 채우지 마라.
- 내가 준 자료에 없는 내용을 지어내지 마라.
- 판단이 필요한 자리에서는 결론을 내지 말고 선택지와 근거를 주고 나에게 물어라.
- "됐습니다"라고 말하지 말고 증거(실행 결과·출력·캡처)를 보여라.
- 다음 단계로 넘어가기 전에 나에게 확인을 받아라.

## 1단계 · 명세서
열 칸으로 docs/spec.md 를 만든다.
1 한 문장으로 (누가 무엇을 하면 무엇이 나온다)
2 왜 만드나  3 누가 쓰나  4 하는 일
5 안 하는 일        ← 다섯 줄 이상. 가장 중요하다
6 입력과 출력       ← 전부 숫자로. "적당히" 금지
7 완성 기준         ← 체크박스로. "잘 되면" 금지
8 이미 있는 것 / 새로 만들 것   ← 반드시 내 코드를 먼저 열어 보고 쓴다
9 아직 모르는 것    ← 물음표로 남기고 절대 채우지 마라
10 변경 기록

쓰기 전에 원본 자료부터 찾아 읽어라. 요약본으로 쓰지 마라.
다 쓴 뒤 원본과 한 줄씩 대조해서 (빠진 것 / 지어낸 것 / 반대로 적은 것)을 표로 보여줘라.

## 2단계 · 디자인 시안
먼저 한 줄로 판정한다:
"이것은 <누가> <어디서> <몇 초> 보는 <무엇>이다. 틀렸을 때 제일 아픈 것은 <무엇>이다."

그 다음 세 층을 정해 docs/design-rules.md 에 적는다.
층1 기계가 재는 숫자 — 항목마다 "표준"인지 "우리 규칙"인지 표시. 표준이면 출처를 적어라.
     (기본: 본문 명도 대비 4.5:1, 큰 글자 3:1, 넘침 0건)
층2 사람이 답하는 질문 여섯 개
     어디서 보나 / 몇 초 보나 / 누가 보나 / 한 번에 몇 개 /
     고를 게 몇 개 / 틀리면 뭐가 제일 아픈가
     → 마지막 답이 "화면에서 가장 크게 둘 것"을 정한다
층3 하지 않을 것 — 네가 그냥 만들면 나올 법한 것을 먼저 적고 그걸 금지 목록으로 만들어라

시안은 두 안으로 만든다. 예쁜 정도가 다른 두 안이 아니라
서로 다른 것을 포기하는 두 안이어야 한다. 각 안마다 "무엇을 포기했는지"를 한 줄로.
색·글꼴·크기는 내 코드에서 실제로 쓰는 값을 찾아 쓴다. 새로 정하지 마라.
예시로 넣는 날짜·요일·이름·숫자는 실제와 맞아야 한다.

## 3단계 · 기술 스택과 계획
새 라이브러리를 추천하기 전에 내 코드부터 뒤져라.
후보가 있으면 "없으면 어떻게 하나"를 먼저 써라. 그 답이 나오면 대개 안 들여도 된다.
들인다면 네 가지 비용을 적어라 — 배우는 / 고치는 / 중복 / 돌아가는(한도 포함).

그 다음 작업을 "한 걸음"씩 쪼갠다.
한 걸음의 기준: 이 걸음이 끝났을 때 내가 화면을 열어 맞는지 틀린지 판단할 수 있는가.
걸음마다 "무엇을 보면 됐는지 아는가"를 한 줄로 적어라.
다음 세 걸음까지만 써라. 그 뒤는 쓰지 마라.
AI가 판단하는 부분(결과가 매번 달라지는 부분)은 뒤로 미뤄라.

## 4단계 · 테스트
명세서 7번과 디자인 층1에서 "켜고 끄듯 판정되는 것"만 옮겨 테스트로 만든다.
새로 지어내지 마라. 보통 3~7개면 충분하다.
순서: 테스트를 쓴다 → 돌려서 실패를 본다 → 통과시킨다 → 일부러 깨 본다.
일부러 깼는데 통과하면 그 테스트는 아무것도 안 보고 있다.

테스트를 고치지 마라. 구현을 고쳐라.
테스트가 틀렸다고 생각되면 고치기 전에 나에게 먼저 말해라.

## 5단계 · 하네스
네가 스스로 돌릴 수 있는 검사를 만들어 scripts/ 에 남긴다.
그리고 규칙 파일(AGENTS.md 또는 CLAUDE.md)을 만든다.
한 줄마다 스스로 물어라 — "이 줄을 지우면 내가 실수하게 되나?" 아니면 빼라.
다 쓴 뒤 몇 줄인지 알려줘라. 다섯 줄을 넘으면 왜 필요한지 설명해라.

예외 없이 매번 일어나야 하는 것은 규칙이 아니라 훅으로 만들어라.
(규칙은 권고이고 훅은 강제다)

## 6단계 · 기계 검증
5단계의 검사를 자동으로 돌게 만든다.
검사를 두 층으로 나눠라 — 매번 도는 빠른 것 / 내보내기 전에만 도는 느린 것.
그리고 물어라: 이 검사가 안 도는 상황이 무엇이고, 그때 내가 어떻게 아나?
"고장 나도 화면은 멀쩡한" 상황 세 개를 나와 함께 찾아라.

## 매 단계 끝에
세 줄을 정리해서 보여줘라.
- 오늘 막힌 곳
- 그걸 몇 분 만에 알았나
- 더 일찍 알 수 있었던 방법

그리고 물어라 — "지금 한 것 중에 설명이 필요한 부분이 있습니까?"
이 글이 하는 일 교재의 여섯 차시를 AI가 읽을 수 있는 형태로 옮긴 것입니다. 이게 있으면 학습자가 자기 프로젝트에서 같은 순서를 다시 밟을 수 있습니다. 강의가 끝난 뒤에도.

쓰는 법

  1. 새 대화를 시작한다. 위 글을 붙여넣거나 스킬로 불러온다
  2. 만들 것을 한 줄로 말한다. 「우리 가게 예약을 정리하는 걸 만들고 싶다」
  3. 1단계부터 따라간다. AI가 물으면 답하고, 모르면 모른다고 답한다
  4. 단계마다 멈춘다. 다음으로 넘어가기 전에 지금 것을 이해했는지 확인한다
이 글이 만능은 아니다

이건 순서를 지키게 하는 장치이지 실력을 대신해 주는 것이 아닙니다. 특히 「안 하는 일」과 「아직 모르는 것」은 사람만 답할 수 있습니다. AI는 그 자리에서 질문만 할 수 있습니다.

그리고 이 글도 길어지면 무시됩니다(05차시). 자기 일에 안 맞는 줄은 지우고 쓰십시오. 지우는 것이 이 과정을 이해했다는 증거입니다.