VIBE CODING 방법론 · 8강

환경 사실을 Rule에 기록하기

새 대화를 시작할 때마다 AI는 어떤 모델을 호출해야 하는지, 타임아웃을 어떻게 설정해야 하는지, 프로젝트가 어떤 프레임워크를 사용하는지 모릅니다. 이러한 환경 사실을 Rule에 한 번만 고정하세요 — AI에게 미리 채워진 .env 참조 시트를 주는 것과 같으며, 매 대화에 자동으로 주입됩니다. 이 페이지의 두 데모는 모두 실제로 조작할 수 있습니다.

Rule을 사용하는 이유: 설정을 .env에 쓰고 AI가 직접 읽게 하면 항상 능동적으로 읽지 않을 수 있습니다. 대화에 쓰면 대화가 길어질수록 잘려 잊혀집니다. Rule은 매 대화 턴이 시작되기 전에 컨텍스트에 로드됩니다 — 가장 안정적인 주입 방법입니다.

인터랙티브 데모 1 · isComposing — IME로 직접 체험

한국어/중국어 IME(입력기)가 후보 단어를 확정할 때 Enter가 트리거됩니다. e.key === 'Enter'만 확인하는 입력창은 반쯤 조합된 메시지를 전송합니다. AI 학습 데이터에서 isComposing 커버리지가 낮으므로 Rule에 작성하지 않으면 반드시 잊어버립니다. 한국어 IME로 전환하고 아래 입력창에서 직접 테스트해보세요.

실시간 데모
isComposing: false(IME 조합 중에는 true가 됩니다)
키 입력 기록이 여기에 표시됩니다. 먼저 IME로 입력하고 Enter를 눌러 후보를 선택한 다음, Enter를 한 번 더 눌러 두 판정 결과를 비교하세요. IME가 없는 사용자는 일반 타이핑 후 Enter를 눌러 false 상황을 관찰할 수 있습니다.
표준 패턴
const handleKeyDown = (e: React.KeyboardEvent) => {
  if (e.key === 'Enter' && !e.shiftKey
      && !e.nativeEvent.isComposing) {
    e.preventDefault()
    handleSend()
  }
}
  • isComposing가 true: IME가 아직 조합 중 — Enter는 후보만 확정하고 전송을 트리거하지 않습니다
  • isComposing가 false: 직접 키보드 입력 — Enter가 정상 전송합니다
  • 규칙 내용: isComposing을 확인하지 않고 e.key === 'Enter'만 판단하는 것을 금지합니다
인터랙티브 연습 2 · 이 시나리오에 어떤 형식이 맞나요

데이터 형식 3분법: 세 가지 형식, 각자 자신의 영역을 담당하며 절대 혼용하지 않습니다. 시나리오를 클릭하고 적합하다고 생각하는 형식을 선택하세요.

❌ JSON escape hell: 문자열 안에 JSON 중첩
{
  "tool": "send_message",
  "arguments": "{\"channel\": \"dev\",
    \"payload\": \"{\\\"title\\\":
      \\\"배포 알림\\\", \\\"body\\\":
      \\\"v1.4 출시됨\\\"}\"}"
}
✅ 동일한 내용, XML 버전
<tool_call name="send_message">
  <channel>dev</channel>
  <payload>
    <title>배포 알림</title>
    <body>v1.4 출시됨</body>
  </payload>
</tool_call>

JSON은 중첩 레벨마다 백슬래시가 두 배로 늘어나 LLM이 token 단위로 생성할 때 괄호와 따옴표를 쉽게 잘못 매칭합니다. XML 태그 닫기는 직관적이어서 모델 오류율이 훨씬 낮습니다.

진행: 0 / 3 시나리오

모델 설정: 한 번 고정, 매 턴 적용
타임아웃

이미지 생성에 최소 120~180초 필요

이미지 API는 기본 30초 타임아웃으로 자주 실패하며, AI는 동일한 잘못된 설정을 계속 재시도합니다. HTTP 클라이언트 타임아웃 값을 Rule에 작성하면 한 번에 해결됩니다.

프록시 폴백

네트워크 실패 시 먼저 프록시로 재시도

네트워크 요청 실패 시 반드시 프록시를 통해 재시도(기본값 127.0.0.1:7890)한 후 사용자에게 실패를 보고해야 합니다. 프록시를 건너뛰고 직접 오류를 내는 것을 금지합니다.

스트리밍

사용자에게 보이는 모든 응답은 스트리밍 필수

사용자에게 보이는 모든 LLM 응답은 Streaming으로 반환해야 합니다. 비스트리밍은 백엔드 내부 호출에만 허용됩니다.

기술 스택 고정 및 취향 규칙

스택 선정은 사람의 결정입니다

  • 백엔드: FastAPI; 프론트엔드: React + Tailwind + Vite; 데이터베이스: SQLite; 벡터 스토어: Chroma
  • 한번 결정하면 대안을 더 이상 논의하지 않습니다 — AI의 역할은 결정된 스택 내에서 코드를 잘 작성하는 것입니다
  • 5000번 포트를 피하고 8000~9000 사이에서 랜덤 할당하여 여러 프로젝트가 충돌하지 않도록 합니다

아이콘 및 세부 규격

  • 버튼 아이콘에 emoji를 사용하는 것을 금지합니다 — 아이콘은 반드시 SVG를 사용해야 합니다
  • 제품 톤에 맞게 아이콘 세트를 선택하세요: SaaS → Lucide; 따뜻한 톤 → Tabler Icons
  • 아이콘을 로컬에 직접 다운로드하여 사용하고, CDN에 의존하지 마세요

참고: GPT 시리즈만 사용하는 프로젝트는 도구 호출을 JSON으로 되돌릴 수 있습니다 — function calling이 기본적으로 JSON입니다. "Agent는 XML 사용"은 다중 모델 환경에서 최대 공약수 선택이며, Claude 계열 모델은 XML 형식에서 더 안정적인 성능을 보입니다.

수업 실습 · 20분

제출물: Rule의 환경 설정 섹션. ① 프로젝트의 환경 사실을 나열하세요: 모델, API 공급자, 타임아웃, 프록시, 기술 스택, 데이터베이스. ② Rule 섹션으로 작성하고, 민감한 Key는 별도 secrets 파일에 넣고 .gitignore에 추가하세요. ③ 새 대화를 열어 확인하세요: 아무런 설명 없이 AI가 기술 스택과 모델 설정을 바로 말할 수 있나요?

출처: 오픈소스 저장소 itshen/xs_vibe_rules, rule-opensource.mdc, 1장 "모델 설정", 4장 "문서 및 디자인 규격", 5장 "데이터 형식 규격", 6장 "기술 스택 및 프레임워크".