Codex · 입문 코스 · Codex로 첫 웹페이지 만들기03 / 06다음: 내 규칙을 기억시키기

Codex 무료 강의 · 입문 코스 · 3강 / 6

다시 시키면서 원하는 대로 고치기

for 챗지피티 구독자 · 3강 — 의도적인 변경 다섯 번으로 바이브 코딩의 진짜 기술인 루프를 훈련해요. 일부러 내는 사고와 되돌리기까지 포함이에요.

끝나면 손에 남는 것: 다섯 번 다듬은 페이지 + 잘못된 변경을 바로잡은 경험

"AI를 잘 다루는" 사람들의 비밀을 하나 알려드릴게요. 그 사람들의 첫 프롬프트도 우리 것과 크게 다르지 않아요. 두 번째 프롬프트가 더 빠르고 침착할 뿐이에요. 기술의 핵심은 완벽한 주문이 아니라 루프예요. 접시를 보고, 뭐가 어긋났는지 말하고, 다시 요청하기.

오늘은 2강에서 만든 페이지 위에서 그 루프를 일부러 다섯 라운드 돌려요. 네 번째 라운드는 의도적인 사고예요. 오타가 난 게 아니라 진짜로 일부러 망가뜨려요. 부수고 다시 고쳐 보는 게, 과감한 주문을 막는 두려움을 없애는 가장 빠른 방법이거든요.

오늘 만들 것

의도적인 변경 다섯 번을 거쳐 한층 나아진 페이지. 그리고 실수가 되돌려지는 걸 몸으로 느껴본 경험. 사실 두 번째가 오늘의 진짜 요리예요.

준비물

  • index.html이 들어 있는 first-page 폴더
  • 약 30분

따라 하기

주방을 열고(폴더 → 오른쪽 Codex 패널) 다섯 라운드를 순서대로 진행하세요. 프롬프트는 전부 Codex 채팅창에 붙여넣으면 돼요.

라운드 1 — 정밀한 주문

내 페이지에서: 섹션 제목을 살짝 키우고, 섹션 사이에 여백을
조금 더 줘. 브라우저에서 새로고침해 줘.

주문의 모양새를 보세요. 어디(페이지), 무엇(제목, 여백), 얼마나(살짝, 조금). 양이 모호해도 괜찮아요. "살짝"도 엄연한 지시예요. 다음으로 넘어가기 전에 결과를 꼭 보세요. 매번요.

라운드 2 — 구조적인 주문

작은 푸터를 추가해 줘: 연도랑 "cooked with an AI agent,
seasoned by hand"라는 문구만. 페이지가 이미 가진 스타일에 맞춰 줘.

"이미 가진 스타일에 맞춰 줘"는 힘이 센 문구예요. 기준이 에이전트의 상상이 아니라 지금 내 페이지라는 걸 알려주거든요.

라운드 3 — (일부러) 모호한 주문

정확히 이렇게, 나쁘게 주문하세요:

더 좋게 만들어 줘.

뭘 하는지 지켜보세요. 밋밋한 뭔가가 나올 거예요. 나쁘진 않은데 딱히 내 것 같지는 않은 결과요. 이게 이 레슨에서 가장 중요한 맛보기예요. 모호하게 넣으면 밋밋하게 나온다. 그리고 그건 에이전트 잘못이 아니다. 이제 진짜 의견을 담아 다시 주문하세요:

네가 생각한 '더 좋게'는 되돌려 줘. 내가 진짜 원하는 건:
[페이지에 있었으면 하는 그 한 가지 — 예: "내 이름이 제목이
아니라 로고처럼 느껴지게"].

라운드 4 — 사고

과정을 믿으세요:

index.html에서 스타일을 전부 지워 줘. 알맹이 내용만 남겨 줘.

새로고침해 보세요. 스타일이 홀랑 벗겨져서 1994년 웹사이트처럼 보일 거예요. "어떡해" 하는 작은 철렁함도 함께요. 이제:

스타일을 마지막 변경 직전 모습 그대로 되돌려 줘.

새로고침. 돌아왔어요. 이 왕복이 오늘의 핵심이에요. 망칠까 봐 무서운 마음은 망가짐이 영구적이라는 가정에서 나와요. 다만 지금 복원은 대화 기억에 기대고 있어요. 5강에서는 파일 상태를 실제 저장점으로 남겨, 훨씬 확실하게 되돌려요.

라운드 5 — 복기

평범한 말로 네 줄만: 오늘 우리가 뭘 바꿨고, 그중 어떤 변경이
페이지를 가장 좋게 만들었다고 생각해? 내 생각과 달라도 괜찮아.

에이전트의 설명까지 읽어야 루프가 완성돼요. 문제가 되기 전에 오해를 잡아낼 수 있고, 가끔은 훔쳐 쓰고 싶은 관점이 나오기도 하거든요.

막혔을 때

  • "완료!"라는데 페이지가 그대로예요 — 더 세게 새로고침하세요 (Ctrl+F5 / Cmd+Shift+R). 그래도 그대로면 이렇게 물어보세요. "새로고침해도 내 화면에는 차이가 안 보여. 정확히 뭘, 어느 파일에서 바꿨어?"
  • 변경이 엉뚱한 곳에 들어갔어요 — 사람에게 말하듯 위치를 짚어 주세요. "헤더 말고, '요즘 배우는 것' 섹션이야."
  • 계속 사과하면서 제자리를 맴돌아요 — 어긋난 대화를 붙잡고 계속 조종하려 하지 마세요. 원하는 최종 상태를 처음부터 다시 묘사하는 게 빨라요. "지난 몇 번의 시도는 잊어. 이 섹션은 이런 모습이어야 해: …"
  • 이제 전부 다 마음에 안 들어요 — "페이지를 이 대화 시작 시점 모습으로 되돌려 줘"가 보통은 통해요. 안 통했다면, 그 아픔이 바로 5강의 오프닝 논거예요.

마무리 체크

나가기 전에 하나씩 확인해요:

□ 다섯 라운드를 주문했고, 다섯 결과를 눈으로 확인했다
□ 모호한 라운드를 진짜 의견을 담아 다시 주문했다
□ 페이지를 일부러 망가뜨렸다 — 그리고 되살렸다
□ 루프를 입으로 말할 수 있다: 보고, 뭐가 어긋났는지 말하고, 다시 요청하기

다음 레슨 — 04 내 규칙을 기억시키기 (AGENTS.md). 지금까지 같은 말을 몇 번씩 반복했죠("파일 하나만!", "따뜻한 색!"). 이제 규칙을 한 번만 적어둘 차례예요. 에이전트가 매 세션 그걸 기억하도록요.

막히면 아래 질문 상자에 남겨 주세요 — 그러라고 있는 거예요.

직접 만들고 돌아가는 걸 확인했나요? 그럼 완료를 눌러요. 이 브라우저에만 저장돼요 — 주방 밖으로는 아무것도 나가지 않아요.

어느 단계에서 막혔나요?

여기에 바로 물어보세요. 계정은 필요 없어요. 헤맨 단계가 있다면 그건 레슨에 난 구멍이지, 읽는 사람 잘못이 아니에요. 답변은 본문에 반영돼서 다음 사람은 매끄럽게 지나가요.

더 고픈가요?

새 강의가 열리는 대로 메일함에 도착해요. 스팸 없이, 언제든 구독 취소할 수 있어요.

회원가입하면 자료실이 열려요.전자책 「바이브 코딩 네 시즌」을 비롯한 자료를 무제한으로 받을 수 있어요. 강의는 가입 없이도 무료예요.

구글 계정으로 가입 →