[6팀 전이진] Chapter 1-2. AI와 테스트를 활용한 안정적인 기능 개발

[im-binary]

과제 체크포인트

필수 스펙

1. 반복 유형 선택

• 일정 생성 또는 수정 시 반복 유형을 선택할 수 있다.
• 반복 유형은 다음과 같다: 매일, 매주, 매월, 매년
  • 31일에 매월을 선택한다면 → 매월 마지막이 아닌, 31일에만 생성하세요.
  • 윤년 29일에 매년을 선택한다면 → 29일에만 생성하세요!
• 반복일정은 일정 겹침을 고려하지 않는다.

2. 반복 일정 표시
   • 캘린더 뷰에서 반복 일정을 아이콘을 넣어 구분하여 표시한다.
3. 반복 종료
   • 반복 종료 조건을 지정할 수 있다.
   • 옵션: 특정 날짜까지
     • 예제 특성상, 2025-12-31까지 최대 일자를 만들어 주세요.
4. 반복 일정 수정
   1. ‘해당 일정만 수정하시겠어요?’ 라는 텍스트에서 ‘예’라고 누르는 경우 단일 수정
      • 반복일정을 수정하면 단일 일정으로 변경됩니다.
      • 반복일정 아이콘도 사라집니다.
   2. ‘해당 일정만 수정하시겠어요?’ 라는 텍스트에서 ‘아니오’라고 누르는 경우 전체 수정
      • 이 경우 반복 일정은 유지됩니다.
      • 반복일정 아이콘도 유지됩니다.
5. 반복 일정 삭제
   1. ‘해당 일정만 삭제하시겠어요?’ 라는 텍스트에서 ‘예’라고 누르는 경우 단일 수정
      1. 해당 일정만 삭제합니다.
   2. ‘해당 일정만 삭제하시겠어요?’ 라는 텍스트에서 ‘아니오’라고 누르는 경우 전체 수정
      1. 반복 일정의 모든 일정을 삭제할 수 있다.

기본 과제

공통 제출

• 테스트를 잘 작성할 수 있는 규칙 명세
• 명세에 있는 기능을 구현하기 위한 테스트를 모두 작성하고 올바르게 구현했는지
• 명세에 있는 기능을 모두 올바르게 구현하고 잘 동작하는지

기본 과제(Easy)

• AI 코드를 잘 작성하기 위해 추가로 작성했던 지침
• 커밋별 올바르게 단계에 대한 작업
• AI 도구 활용을 개선하기 위해 노력한 점 PR에 작성

기본 과제(Hard)

• Agent 구현 명세 문서 또는 코드
• 커밋별 올바르게 단계에 대한 작업
• 결과를 올바로 얻기위한 history 또는 log
• AI 도구 활용을 개선하기 위해 노력한 점 PR에 작성

심화 과제

• 모든 질문에 대해 꼼꼼하게 정리했는지

---

과제 셀프회고

쪼끔 제가 한 과제에 대한 설명이 필요할 것 같아 덧붙입니다!

처음에는 Gemini 무료 플랜으로 에이전트를 구현하고, 오케스트레이션 구조로 진행하려 했습니다.
아래는 초기에 구상했던 구조입니다.

pnpm agent:run -r "일정 삭제 확인 다이얼로그 추가할 건데 어떤 기능이냐면 ~~~~~~"

1. 최소 변경으로 요구사항을 구현하는 에이전트
2. 테스트 코드 설계 전략을 수립하는 에이전트
3. 테스트 코드를 작성하는 에이전트 (TDD RED)
4. 구현을 진행하는 에이전트 (TDD GREEN)
5. 리팩토링을 수행하는 에이전트 (TDD REFACTOR)

그러려면 꼭 필요한 작업이 두 가지 정도 있었습니다.

1. 요구사항과 관련된 코드를 gemini 에게 알려주기
2. gemini가 만들어준 코드를 올바른 곳에 두기

요구사항과 관련된 코드를 gemini에게 알려주는 것은 scanCodebase() 라는 함수를 만들어 요구사항에서 키워드를 추출해 그 키워드를 기반으로 프로젝트의 파일을 찾고 파일 내용(토큰 때문에 최대 10개)과 프로젝트의 구조를 프롬프트에 담았습니다.

gemini가 만들어준 코드를 올바른 곳에 두는 것은 gemini에게 오는 답변이 일관적이지 않았습니다. full code로 올 때는 파일을 삭제하고 다시 생성하는 방법을 사용하고, 변경이 필요한 부분부분만 오는 경우는 diff를 비교해주어야 했습니다. AST 파싱을 해야 하나 또 AI가 라인 번호도 잘 모르니까 더 어떻게 해야 할 수 있을 지 감이 잡히지 않았습니다. 그러다가 더는 리소스를 쓰는 게 의미있게 느껴지지 않아 코드를 수정하는 건 다른 AI에게 위임을 해야겠다고 생각했습니다.

(사실 여기서 한계를 느껴서 claude로 넘어가는 선택지도 있었으나 너무 멀리와버려서 지금 가기로 한 길을 끝까지 가봐야겠다… 싶었습니다.)

제가 Github 학생 계정이 있어 Copilot Chat을 무료로 쓸 수 있다는 사실을 알게 되고 Copilot의 에이전트에게 코드 수정의 역할을 위임해야겠다고 계획을 세웠습니다.

그래서 아래의 구조로 수정해보기로 했습니다.

pnpm agent:run -r "일정 삭제 확인 다이얼로그 추가할 건데 어떤 기능이냐면 ~~~~~~"

# 워크플로우 시작...

📋 Step 1: Feature Specification (Gemini)
─────────────────────────────────────────
1. Gemini가 아래를 자동 분석:
   - 요구사항: "일정 삭제 확인 다이얼로그 추가"
   - 프로젝트 구조 스캔 (scanCodebase())
   - 관련 기존 코드 탐색 (키워드 기반)
   - feature-selector.md 프롬프트 템플릿
2. 출력: agents/output/workflow-xxx_feature-selector_xxx.md
   - 기능 분석, 수정 대상, 복잡도 평가 등
   
✅ 사용자 확인: "계속 진행할까요?" (yes/no)
─────────────────────────────────────────

📝 Step 2: Test Design (Gemini)
─────────────────────────────────────────
1. Gemini가 아래를 조합하여 테스트 설계:
   - Step 1에서 생성된 Feature Spec 문서 (자동 로드)
   - test-designer.md 프롬프트 템플릿
   - TDD 원칙, F.I.R.S.T 원칙
2. 출력: agents/output/workflow-xxx_test-designer_xxx.md
   - 테스트 케이스 목록 (TC001, TC002...)
   - Given-When-Then 형식
   
✅ 사용자 확인: "계속 진행할까요?" (yes/no)
─────────────────────────────────────────

🔴 Step 3: TDD RED Phase (프롬프트 생성)
─────────────────────────────────────────
1. Orchestrator가 자동으로 프롬프트 조합:
   - Feature Spec (Step 1 결과)
   - Test Design (Step 2 결과)
   - red-phase.md 템플릿 (테스트 작성 가이드)
   - 변수 치환: {{requirement}}, {{featureSpec}}, {{testDesign}}
2. 생성된 프롬프트를 클립보드에 자동 복사
3. 터미널에 프롬프트 출력

👉 사용자 액션: Copilot Chat에 Ctrl+V → 테스트 코드 작성
✅ 사용자 확인: "테스트 작성 완료했나요?" (yes/no)
─────────────────────────────────────────

🟢 Step 4: TDD GREEN Phase (프롬프트 생성)
─────────────────────────────────────────
1. Orchestrator가 자동으로 프롬프트 조합:
   - Feature Spec (Step 1 결과)
   - Test Design (Step 2 결과)
   - 사용자가 작성한 테스트 코드 (수동 참조)
   - green-phase.md 템플릿 (최소 구현 가이드)
2. 생성된 프롬프트를 클립보드에 자동 복사

👉 사용자 액션: Copilot Chat에 Ctrl+V → 구현 코드 작성
✅ 사용자 확인: "구현 완료 & 테스트 통과했나요?" (yes/no)
─────────────────────────────────────────

🔵 Step 5: TDD REFACTOR Phase (프롬프트 생성)
─────────────────────────────────────────
1. Orchestrator가 자동으로 프롬프트 조합:
   - Feature Spec (Step 1 결과)
   - Test Design (Step 2 결과)
   - 현재 구현 코드 (사용자가 작성한)
   - refactor-phase.md 템플릿 (리팩토링 가이드)
2. 생성된 프롬프트를 클립보드에 자동 복사

👉 사용자 액션: Copilot Chat에 Ctrl+V → 코드 개선
✅ 완료!
─────────────────────────────────────────

원래는 다섯 개의 에이전트를 만드려고 했는데 어쩌다보니 3개는 앞선 에이전트들이 만들어 준 프롬프트를 이용하여 누군가 만들어놓은 에이전트를 사용하는 방식처럼 되어버렸습니다.

사실 과제할 때 어떻게든 만들어야 한다보다 어떻게 해야 실제로 동작할까 에 집중했다보니까 아쉬움이 좀 많이 남는데요. 만약 gemini로 에이전트를 구성한다고 가정했을 때 제가 고민했던 지점인 gemini가 알려준 코드를 기존의 내 코드에 어떻게 얹을까를 더 딥하게 고민해서 완성했어야 했나 싶기도 합니다.

혹시 과제의 의도가 그것까지 고려한 과제였을까요? 만약 제가 그걸 구현한다면 어떤 정보나 문서를 찾아보는 게 도움이 될까요?

AI 도구 활용 개선 기록

💸 토큰 절약 실험

• Gemini의 불필요한 Markdown 문법(*, **, 이모지`) 제거 지시
• 완화된 지시 → 강제 규칙(CRITICAL OUTPUT RULES)으로 수정
• 결과: 출력 일관성 확보, 응답 속도 약간 저하

🤡 API 오류 대응

• Gemini 무료 플랜 503 에러 다수 발생
• 최대 토큰 점진적 확장 (6000 → 8000 → 16000 → 30000)
• 토큰 증가 후 분석 품질 개선

🥊 각 에이전트와의 시행착오

1. 최소 수정 기획 에이전트

• 코드 맥락을 알 수가 없음 -> pnpm agent:run -r "요구사항" 입력 시 keyword 추출 기반 코드 탐색
  • claude의 init 같이 멋지게 맥락을 공유하는 건 불가능했지만, 일부 코드 공유 가능

2. 테스트 설계 에이전트

• MUI를 몰라 테스트 코드 오류 발생 -> 환경 정보 추가
• 이후 MUI 기반 Select 테스트도 정상 처리

3. RED 단계 에이전트

• 이미 존재하는 테스트 파일 중복 생성 -> “기존 테스트 제외” 조건 추가로 해결

4. GREEN 단계 에이전트

• App 전체 렌더링 테스트 -> 프롬프트 수정으로 컴포넌트 단위 렌더링 유도
• 시간 조작, 비동기 테스트 이해 부족 -> 추가 프롬프트(vi.setSystemTime, act(), vi.advanceTimersByTimeAsync 정보 추가)로 보완

기술적 성장

LLM 응답의 일관성을 위해 출력 형식 제어하는 방법을 알게 되었습니다.
그냥 느낌으로 알고 있던 CLI 도구 만드는 방법을 이번 기회에 활용해보게 되어 앞으로 자동화하고 싶은 작업이 있을 때마다 종종 잘 써먹을 수 있을 것 같습니다.

코드 품질

위에서 구조 설명하며 정리하여 생략합니다!

학습 효과 분석

ChatGPT에 개인 맞춤 설정해서 사용했을 때는 그닥 그 설정의 효용을 느끼지 못했습니다.
그런데 이번 과제에서 AI에게 잘 전달하기 위해 프롬프트에 문구를 추가하고 가다듬고 몇 번씩이나 검증하는 과정을 거치면서 맞춤형 설정을 했지만 왜 내 AI는 내 맞춤형이 아닌가를 깨달을 수 있었던 것 같습니다.

LLM은 줄 번호를 .. 인식하지 못한다는 것도 알게 되었습니다.

과제 피드백

AI에게 설명을 잘하면 잘할 수록 대답의 질이 좋아진다는 것은 알고는 있었지만 어느 수준으로까지 설명해야 하나 싶었는데 이번 과제를 통해 그 기준을 조금은 잡을 수 있었던 것 같습니다. 또 효과적으로 AI 가 내 말을 듣게 하는 방법도 여러 번 프롬프트 검증하는 과정을 통해 배울 수 있었습니다.

리뷰 받고 싶은 내용