AI 코딩 도우미(예: Trae)가 생성한 코드가 요구사항과 일치하지 않을 때, 가장 먼저 Skill 파일을 직접 수정하는 것은 일반적인 해결책이 아닙니다. Skill 파일은 주로 AI의 '페르소나'와 '일반 규칙'을 정의하며, 구체적인 로직 오류는 종종 AI의 맥락 이해 부족이나 불명확한 지시로 인해 발생하기 때문입니다.

다음은 Trae의 코드 출력을 효율적으로 수정하기 위한, 비용 효율적인 순서에 따른 표준화된 접근 방식입니다.

핵심 원칙: 대화로 먼저 수정하고, 설정 조정은 나중에 문제가 발생하면 즉시 Skill 파일을 수정하기보다, 대화를 통해 먼저 수정하려고 시도해야 합니다. Skill 파일은 AI의 '헌법'과 같고, 대화는 '구체적인 지시'입니다. 구체적인 기능 오류는 대화로 수정하고, 반복적으로 발생하는 스타일 오류나 규칙 위반에 대해서만 Skill 파일을 조정하는 것이 좋습니다.

1단계: 명확한 대화를 통한 수정 (가장 권장, 시간 최소 소요) 채팅 인터페이스에서 오류를 직접 지적하되, 다음 공식에 따라 구조화된 피드백을 제공해야 합니다: '현상 + 원인 + 기대 결과 + 증거'.

1. AI에게 무엇이 잘못되었는지 어떻게 알려줄까요? '틀렸다' 또는 '다시 작성해달라'고만 말하지 마세요. AI는 구체적인 기준점이 필요합니다.

• 잘못된 예시:> "이 코드는 작동하지 않아. 로그인 기능에 문제가 있으니 다시 작성해줘."

(AI는 문제점을 추측하거나, 이미 잘 작동하는 부분까지 수정할 수 있습니다.)

• 올바른 예시 (구조화된 프롬프트):> [오류 피드백]

1. 문제 현상: 로그인 버튼 클릭 후 페이지가 이동하지 않고, 콘솔에 Uncaught TypeError: Cannot read property 'value' of null 오류가 발생합니다.
2. 코드 위치: 문제는 src/components/Login.js 파일의 15번째 줄에 있습니다. React에서는 document.getElementById 대신 useState와 ref를 사용해야 합니다.
3. 기대 결과: 로그인 버튼 클릭 시, 먼저 입력 값 필드(non-empty) 유효성 검사를 수행한 후 /api/login 엔드포인트로 API 요청을 보내고, 성공 시 /dashboard 페이지로 이동해야 합니다.
4. 참고 자료/코드: 프로젝트 내의 Register.js 파일의 작성 방식을 참고하거나, React Hook을 사용한 폼 처리 관련 공식 문서를 참조해주세요.

Login 컴포넌트만 수정하고 다른 파일은 변경하지 마세요.

2. AI에게 오류 정보를 어떻게 보여줄까요? AI는 일반적으로 대화의 맥락을 읽지만, 오류 정보를 명시적으로 제공하면 정확도를 높일 수 있습니다.

• 오류 로그 직접 붙여넣기:> "터미널에 출력된 오류 메시지입니다. 원인을 분석하고 수정해주세요:

npm run build<br></br>> error TS2304: Cannot find name 'UserType'.

UserType을(를) import하지 않은 것 같습니다. src/types/index.ts 파일을 확인해주세요."

• **스크린샷 (지원 시):**UI 레이아웃이 깨졌다면, 스크린샷을 첨부하여 "이 이미지를 보세요. 버튼이 가려져 있습니다. CSS의 z-index나 flex 레이아웃을 조정해주세요." 와 같이 요청할 수 있습니다.
• '올바른 예시' 제공 (Few-Shot Prompting):> "당신이 작성한 코드 스타일이 너무 오래되었습니다. 아래 코드 스타일(.then() 대신 async/await 사용)을 모방하여 방금 작성한 함수를 다시 작성해주세요.

// 올바른 예시<br></br>const fetchData = async () => { ... }"

2단계: Trae의 '편집/적용' 기능 활용 (코드 수준의 미세 조정) Trae가 생성한 코드의 대부분은 올바르고, 일부 논리만 수정해야 할 경우 다음 단계를 따릅니다.

1. 코드 블록 선택: Trae의 채팅 창이나 편집기에서 수정이 필요한 코드 부분을 선택합니다.
2. /edit 또는 마우스 오른쪽 버튼 메뉴 사용: - 명령어 입력: "이 코드 블록에서 하드코딩된 URL을 환경 변수 VITE\_API\_URL로 변경하고, 오류 처리 로직을 추가해주세요." - 이 방법을 사용하면 AI는 전체 구조를 손상시키지 않고 선택된 부분만 수정합니다.
3. AI의 '자가 수정' 유도:> "방금 생성한 UserService 클래스를 다시 검토해주세요. 네트워크 타임아웃 상황을 처리하고 있나요? 그렇지 않다면, timeout 로직을 추가하여 해당 파일을 다시 작성해주세요."

3단계: Skill 파일 수정 (반복적인 오류 발생 시에만 사용) Trae가 반복적으로 동일한 유형의 오류를 범하는 경우(예: 항상 주석을 누락하거나, 오래된 라이브러리를 사용하거나, 특정 명명 규칙을 무시하는 경우), 이때 Skill 파일을 수정해야 합니다.

Skill 파일은 언제 수정해야 할까요?

• 시나리오 A: 매번 "TypeScript를 사용해줘"라고 반복해서 말해야 하는 경우. → Skill 수정: Always use TypeScript for new files. 규칙 추가.
• 시나리오 B: Trae가 항상 한글 변수명을 생성하지만, 영문 사용을 요구하는 경우. → Skill 수정: Variable names and comments must be in English. 규칙 추가.
• 시나리오 C: Trae가 프로젝트의 특정 디렉토리 구조를 계속 무시하는 경우. → Skill 수정: Skill 파일에 프로젝트 구조 명시 Project Structure: src/components/, src/hooks/, ...

Skill 파일은 어떻게 수정하나요? Skill 설정 파일(일반적으로 .trae/skill.md 또는 설정 내의 Custom Instructions)을 찾아 다음 형식에 따라 내용을 추가합니다.

## 🚫 금지 행위 (Negative Constraints)
- `var` 키워드 사용 금지, 반드시 `const` 또는 `let` 사용.
- 컴포넌트 내 직접적인 DOM 조작 금지, 반드시 React Refs 사용.
- API 주소 하드코딩 금지, 반드시 `config.env` 에서 읽어오기.

## ✅ 필수 규약 (Mandatory Rules)
- 모든 비동기 함수는 `try-catch` 오류 처리를 포함해야 함.
- 새로 생성되는 컴포넌트는 props에 대한 설명을 담은 JSDoc 주석을 반드시 포함해야 함.
- 불확실한 의존성 패키지 버전은, 먼저 최신 안정 버전을 조회 후 사용.

## 🛠️ 오류 처리 절차
- 사용자가 코드 오류를 지적할 경우, 타입 정의 및 import 경로를 우선 확인.
- 버그 수정 후, 해당 테스트 케이스를 자동으로 생성해야 함.

수정 후: 이전 대화는 기존의 오류 패턴에 고착되었을 수 있으므로, 새로운 채팅 창(New Chat)을 열어야 합니다. 새로운 대화는 최신 Skill 설정을 로드합니다.

요약: 작업 흐름도

1. 소프트웨어가 요구사항과 불일치 ↓
2. 오류 유형 판단 - **구체적인 로직/버그인가?** → **3단계 (대화 수정)**으로 이동 - **스타일/규칙/반복적인 오류인가?** → **4단계 (Skill 파일 수정)**으로 이동 ↓
3. 대화 수정 (Prompt Engineering) - 오류 로그/스크린샷 복사 - 특정 파일 및 줄 번호 명시 - 올바른 코드 조각을 참고 자료로 제공 - 지시: "위 오류 정보를 바탕으로 xxx 파일을 수정하고, 나머지 부분은 그대로 유지해주세요." ↓
4. 결과 검증 - 수정 완료 → ✅ 종료 - 여전히 오류가 있거나, 매번 동일한 말을 반복해야 함 → **4단계**로 이동 ↓
5. Skill 파일 수정 (시스템 수준 설정) - Skill 파일에 '금지 항목' 및 '필수 항목' 추가 - **핵심:** '새 대화'를 시작하여 새로운 Skill 활성화

유용한 '오류 수정' 프롬프트 템플릿 다음 템플릿을 복사하여 AI에게 직접 전달할 수 있습니다:

# 역할: 수석 코드 검토자

# 작업: 현재 코드의 결함 수정

# 컨텍스트:
당신이 생성한 코드를 실행했으나 예상과 다르게 작동합니다.

# 오류 상세 정보:
1. <strong>오류 메시지</strong>: [여기에 콘솔 오류 또는 현상 설명 붙여넣기]
2. <strong>오류 위치</strong>: [파일 이름: 줄 번호 또는 특정 기능 모듈]
3. <strong>기대 결과</strong>: [원래 발생했어야 하는 상황 설명]
4. <strong>실제 결과</strong>: [실제로 발생한 상황 설명]

# 제약 조건:
- 전체 프로젝트를 리팩토링하지 말고, 위에 명시된 문제만 수정해주세요.
- 수정 후, 오류의 원인에 대해 간략히 설명해주세요.
- 외부 의존성이 관련된 경우, 버전 호환성을 확인해주세요.

# 조치:
원인을 분석하고 수정된 전체 코드 블록을 제공해주세요.

이처럼 '구체적 피드백 → 부분 수정 → 시스템적 예방'의 흐름을 따르면, AI의 출력 품질을 최대한 제어하고 '무한 재작성'의 굴레에 빠지는 것을 방지할 수 있습니다.