6주차 PROJECT 10. AI 공감 다이어리 앱 만들고 캡처하기

 

나만의 개발 일지

 

 

 

 

 

 

• openrouter 대신 google AI API를 사용한다...goolge API 무료로 사용할 수 있다. (https://blog.naver.com/ryurime88/224153496396?)
• google AI API를 변경하니..응답을 못받는다... 출력 내용과 google의 샘플 코드를 제공하여 수정이 되었다.
• Claude의 Agent에 대응되는 Gemini는 agent skill이고 skill 이라고 호칭하는 것 같다.
  • gemini는 별도 skill을 생성하기 위한 메뉴는 없고. cli로 SKILL.md를 생성해달라고 한다. 이 때 사용된 프롬프트는 도서의 내용과 동일한다.
  • claude의 agent에 대응되는 gemini를 알아보느냐고 시간이 걸렸다. 덕분에 claude의 agent가 gemini에서 호환/사용된다는 것을 알게되었다. gemini의 extension도 공부해야 겠구나 생각이 든다.
• Hands-On Guide to Claude Code for Power Users : https://github.com/automazeio/claude-code-for-power-users

• Google API 사용을 위해 사용한 프롬프트

AI 공감 다이어리를 만들어 줘. 오늘 있었던 일을 한 줄로 쓰면, AI가 감정을 분석하고   공감하며 위로해 주는 일기 애플리케이션이야.   backend-developer가 Gemini API를 연동해서 감정 분석과 공감 메시지를 생성하는   기능을 구현해 줘.  gemini-3-flash-preview 모델을 사용하고, API 키는 현재 폴더의 ‘.env’   파일에  저장된 것을 사용해.   frontend-developer가 따뜻하고 편안한 느낌의 일기장 UI를 만든 다음, quality   assurance가 실제로 여러 상황에서 문제없이 작동하는지 테스트해 줘.  문제를 발견하면   완전히 해결할 때까지 수정하고, 최종 버전을 브라우저에서 바로 열 수 있는 ‘index.html’   파일로 만들어 줘.

 

• skill을 설명해달라고 했더니 이렇게 응답을 주네..

 

• 한번 더 코드를 생성하였더니 UI가 조금 바뀌었네

 

• Google API 사용량도 변화가 있군.. 굿!!!

 

 

Agent Skilll 만들기

• gemini-cli가 알려주는 skill 생성 방법

> skill은 어떻게 생성해야 하는지 알려줘 ✦ Skill을 생성하려면 프로젝트의 .gemini/skills/ 디렉토리 아래에 새로운 스킬   이름으로 폴더를 만들고, 그 안에 SKILL.md 파일을 작성해야 합니다.   SKILL.md 파일은 Gemini CLI가 해당 역할을 수행할 때 따를 전문적인 행동   지침(Instruction)을 정의하는 곳입니다.   Skill 생성 단계    1. 폴더 생성:       .gemini/skills/<skill-name>/ 경로에 폴더를 만듭니다.        * 예: .gemini/skills/ios-developer/    2. SKILL.md 작성:       위 폴더 안에 SKILL.md 파일을 생성하고 내용을 채웁니다.   SKILL.md 작성 템플릿     1 # Role: [스킬 이름, 예: iOS Developer]     2     3 ## Objective     4 [이 스킬의 핵심 목표를 한 문장으로 설명하세요.]     5 예: SwiftUI와 최신 iOS 아키텍처를 활용하여 고품질의 iOS 애플리케이션을       개발하고 유지보수합니다.     6     7 ## Capabilities (역량)     8 [이 스킬이 수행할 수 있는 주요 작업들을 나열하세요.]     9 - Swift 및 SwiftUI를 사용한 네이티브 앱 개발    10 - Combine 또는 Async/Await를 활용한 비동기 데이터 처리    11 - Human Interface Guidelines(HIG)를 준수하는 UI/UX 설계    12    13 ## Instructions (지침)    14 [AI가 이 스킬을 사용할 때 따라야 할 구체적인 규칙과 절차를 적으세요.]    15 1. **Code Style**: SwiftLint 규칙을 따르며, 명확하고 가독성 높은 코드를       작성하십시오.    16 2. **Architecture**: MVVM 패턴을 기본으로 사용하되, 필요에 따라 TCA(The       Composable Architecture)를 고려하십시오.    17 3. **Testing**: 주요 비즈니스 로직에 대해 XCTest를 사용한 단위 테스트를       작성하십시오.    18 4. **Safety**: 강제 언래핑(`!`)을 피하고, `guard let` 또는 `if let`을 사용하       안전하게 옵셔널을 처리하십시오.    19    20 ## Best Practices    21 [해당 분야의 모범 사례나 팁을 적으세요.]    22 - 뷰의 재사용성을 높이기 위해 컴포넌트 단위로 분리하십시오.    23 - 네트워크 요청 시 에러 핸들링을 철저히 하십시오.   팁    * 구체적일수록 좋습니다: AI에게 "코드를 잘 짜라"고 하는 것보다 "함수형      프로그래밍 스타일을 선호하고, 불변 객체를 사용하라"고 하는 것이 훨씬      효과적입니다.    * 컨텍스트 제공: 해당 프로젝트만의 코딩 컨벤션이나 특별한 규칙이 있다면      SKILL.md에 포함시키세요.   ---

 

• 코드 리뷰어 Agent skill (프롬프트는 도서의 내용을 사용)

프롬프트..

> 코드 리뷰어 skill을 만들려고해. SKILL.md를 만들어줘   코드 리뷰어: 코드를 읽고 버그는 없는지, 코딩 규칙에 따라 올바르게 작성되었는지를   점검하고 성능 최적화를 제안하는 전문 코드 품질 검토자.

gemini-cli 출력

✦ I will create a new directory for the code-reviewer skill and then create the   SKILL.md file with the specified content, defining the role, objectives,   capabilities, instructions, and best practices for a code reviewer. │ ✓  WriteFile Writing to .gemini/.../code-reviewer/SKILL.md                     │ │                                                                                │ │  1 # Role: Code Reviewer (코드 리뷰어)                                         │ │  2                                                                             │ │  3 ## Objective                                                                │ │  4 코드를 정밀하게 분석하여 잠재적인 버그를 식별하고, 프로젝트의 코딩 컨벤션을 │ │    준수하는지 확인하며, 성능 및 유지보수성을 향상시키기 위한 최적화 방안을     │ │    제안합니다.                                                                 │ │  5                                                                             │ │  6 ## Capabilities (역량)                                                      │ │  7 - **버그 탐지:** 논리적 오류, 런타임 에러 가능성, 엣지 케이스 처리 미흡     │ │    등을 식별.                                                                  │ │  8 - **스타일 가이드 준수 확인:** 네이밍 컨벤션, 들여쓰기, 주석 등 일관된 코딩 │ │    스타일 점검.                                                                │ │  9 - **성능 최적화:** 비효율적인 알고리즘, 불필요한 메모리 할당, 리소스 누수   │ │    등을 발견하고 개선안 제시.                                                  │ │ 10 - **보안 취약점 점검:** SQL Injection, XSS 등 일반적인 보안 취약점 확인.    │ │ 11 - **가독성 및 구조 개선:** 복잡한 로직의 단순화, 모듈화 제안, 클린 코드     │ │    원칙 적용.                                                                  │ │ 12                                                                             │ │ 13 ## Instructions (지침)                                                      │ │ 14 이 스킬이 활성화되면 다음 절차에 따라 코드 리뷰를 수행하십시오:             │ │ 15                                                                             │ │ 16 1.  **맥락 파악 (Understand Context):**                                     │ │ 17     -   리뷰할 코드의 의도와 기능을 먼저 파악하십시오.                      │ │ 18     -   변경된 파일뿐만 아니라 영향을 받을 수 있는 주변 코드도 함께         │ │    고려하십시오.                                                               │ │ 19                                                                             │ │ 20 2.  **안전성 최우선 (Safety First):**                                       │ │ 21     -   시스템의 안정성을 해칠 수 있는 치명적인 버그나 예외 처리 누락을     │ │    최우선으로 찾으십시오.                                                      │ │ 22     -   보안상 위험한 코드 패턴이 없는지 확인하십시오.                      │ │ 23                                                                             │ │ 24 3.  **코드 품질 및 스타일 (Quality & Style):**                              │ │ 25     -   변수명, 함수명이 직관적인지 확인하십시오.                           │ │ 26     -   중복 코드가 있는지 확인하고(DRY 원칙), 필요시 리팩토링을            │ │    제안하십시오.                                                               │ │ 27     -   언어별 관용적 표현(Idiomatic Code)을 사용하고 있는지 점검하십시오.  │ │ 28                                                                             │ │ 29 4.  **건설적인 피드백 (Constructive Feedback):**                            │ │ 30     -   단순히 "잘못됨"을 지적하기보다 "이러한 이유로 ~게 변경하는 것이     │ │    좋습니다"라고 구체적인 이유와 대안을 제시하십시오.                          │ │ 31     -   코드 예시(Code Snippet)를 포함하여 수정 방향을 명확히 보여주십시오. │ │ 32     -   작성자의 노력을 존중하며 정중하고 전문적인 톤을 유지하십시오.       │ │ 33                                                                             │ │ 34 5.  **성능 및 효율성 (Performance):**                                       │ │ 35     -   시간 복잡도나 공간 복잡도 측면에서 비효율적인 부분이 있다면         │ │    지적하고 개선된 알고리즘을 제안하십시오.                                    │ │ 36                                                                             │ │ 37 ## Best Practices                                                           │ │ 38 - **작은 단위 리뷰:** 한 번에 너무 많은 코드를 리뷰하기보다 기능 단위로     │ │    나누어 집중적으로 리뷰하는 것을 권장합니다.                                 │ │ 39 - **테스트 코드 확인:** 비즈니스 로직 변경 시 해당 로직을 검증하는 테스트   │ │    코드가 함께 작성되었는지 확인하십시오.                                      │ │ 40 - **문서화:** 복잡한 로직에는 적절한 주석이나 문서화가 동반되어야 함을      │ │    상기시키십시오.                                                             │ ╰────────────────────────────────────────────────────────────────────────────────╯ ✦ code-reviewer 스킬을 생성했습니다.   생성 위치: .gemini/skills/code-reviewer/SKILL.md   이제 activate_skill 도구를 사용하여 이 스킬을 활성화하면, Gemini가 전문 코드   리뷰어로서 코드를 분석하고 피드백을 제공하게 됩니다.   예: "code-reviewer 스킬을 사용해서 index.html 파일을 리뷰해 줘"라고 요청해   보세요.

 

 

 

skill이 잘 만들어 졌는지 확인해 보자 : code-reviewer가 잘 생겼다

$ gemini skills list Loading extension: conductor Discovered Agent Skills: ai-intergartion [Enabled]   Description: 텍스트 생성 및 요약 솔루션을 설계하고 구현   Location:    06Sskills/.gemini/skills/ai-integration-specialist/SKILL.md backend-developer [Enabled]   Description: 백엔드 시스템을 구축   Location:    06Sskills/.gemini/skills/backend-developer/SKILL.md code-reviewer [Enabled]   Description: 코드를 읽고 버그는 없는지, 코딩 규칙에 따라 올바르게 작성되었는지를 점검하고 성능 최적화를 제안하는 전문 코드 품질 검토자.   Location:    06Sskills/.gemini/skills/code-reviewer/SKILL.md frontend-developer [Enabled]   Description: 웹 기술을 활용하여 인터랙티브 웹 애플리케이션 구축   Location:    06Sskills/.gemini/skills/frontend-developer/SKILL.md product-planning [Enabled]   Description: PRD 작성을 통해 제품의 목표, 기능, 사용자 요구사항 정의   Location:    06Sskills/.gemini/skills/product-planning-manager/SKILL.md quality assurance [Enabled]   Description: 버그 발견 및 사용성 개선사항을 개선   Location:    06Sskills/.gemini/skills/qa-engineer/SKILL.md

 

 

AI 에이전트로 개발팀 구성하기

 

[1단계] 에이전트(Agent)의 이해와 생성

클로드 코드의 'AI 에이전트' 개념을 익히고, 코드를 읽기만 하는 '코드 리뷰어' 에이전트를 만들어 안전하게 코드를 점검하는 방법을 배웁니다.

• 레슨 (Lesson)

    ◦ 에이전트 개념: 사용자의 목표에 따라 스스로 판단하고 작업을 수행하는 '대리인' 개념을 이해합니다.

    ◦ /agent 명령어: 터미널에서 /agent를 입력하여 에이전트 관리 메뉴를 열고, 새로운 에이전트를 생성하는 흐름을 익힙니다.

    ◦ 권한 및 설정: '읽기 전용(Read-only)' 권한 설정과 에이전트별 고유 색상(Blue 등)을 지정하여 역할을 구분하는 법을 배웁니다.

• 실습 (Practice)

    ◦ 기존 Study04 폴더에서 터미널을 열고 /agent를 입력합니다.

    ◦ "코드 버그를 찾고 품질을 점검하는 전문가"라는 역할을 부여하여 'Code Reviewer' 에이전트를 생성합니다.

    ◦ 권한은 'Read-only tools'로 설정하고, 모델은 'Sonnet', 색상은 'Blue'로 지정합니다.

• 프로젝트 (Project): "냉장고 앱 코드 점검"

    ◦ 생성된 코드 리뷰어에게 "냉장고를 부탁해 앱의 코드를 검토해 줘"라고 명령하여 버그 분석 리포트를 받습니다.

• 체크리스트 (Checklist)

    ◦ [ ] .claude/agents 폴더 안에 CodeReviewer.md 파일이 생성되었는가?

    ◦ [ ] 코드 리뷰어가 코드를 수정하지 않고 '분석'만 수행했는가?

    ◦ [ ] 에이전트 실행 시 파란색(Blue)으로 이름이 표시되는가?

--------------------------------------------------------------------------------

[2단계] 다중 에이전트 협업 (리뷰→최적화→디자인)

서로 다른 역할을 가진 3명의 에이전트가 순차적으로 협업하여 기존 앱을 업그레이드하는 파이프라인을 구축합니다.

• 레슨 (Lesson)

    ◦ 역할 분담: 성능을 개선하는 '최적화 전문가(Optimizer)'와 사용성을 개선하는 'UX 디자이너(Designer)'의 역할을 정의합니다.

    ◦ 순차적 실행: A(리뷰) → B(최적화) → C(디자인) 순서로 작업이 이어지도록 프롬프트를 구성하는 원리를 배웁니다.

    ◦ 모델 차별화: 복잡한 추론이 필요한 최적화 작업에는 고성능 모델(Opus)을 할당하는 전략을 익힙니다.

• 실습 (Practice)

    ◦ Performance Optimizer: 'Opus' 모델, 초록색(Green), 모든 권한(All tools)을 가진 최적화 에이전트를 생성합니다.

    ◦ UX Designer: '시스템 기본' 모델, 주황색(Orange)을 가진 디자인 에이전트를 생성합니다.

• 프로젝트 (Project): "앱 리팩토링 자동화"

    ◦ "코드 리뷰어가 문제를 찾으면, 최적화 담당자가 성능을 개선하고, 디자이너가 UI를 수정해 줘"라는 협업 명령을 내립니다.

    ◦ 3명의 에이전트가 차례로 작업한 결과물을 브라우저에서 확인합니다.

• 체크리스트 (Checklist)

    ◦ [ ] 총 3개의 에이전트 파일이 생성되었는가?

    ◦ [ ] 에이전트들이 순서대로(리뷰→최적화→디자인) 실행되는가?

    ◦ [ ] 작업 완료 후 웹 앱의 디자인이나 성능이 개선되었는가?

--------------------------------------------------------------------------------

[3단계] 5인 AI 개발팀 구축과 완전 자동화

기획부터 QA까지 5명의 전문 에이전트로 구성된 'AI 개발팀'을 꾸리고, 권한 승인 절차를 생략하여 개발 속도를 극대화합니다.

• 레슨 (Lesson)

    ◦ 5인 개발팀: PM(기획), 백엔드, 프론트엔드, QA, AI 통합 전문가로 구성된 완전체 팀을 설계합니다.

    ◦ 프로젝트별 에이전트: 폴더가 바뀌면 프로젝트(Study05) 전용 에이전트를 새로 생성해야 함을 이해합니다.

    ◦ 자동 승인 모드: --dangerously-skip-permissions 옵션을 사용하여 사람의 승인 없이 끝까지 개발을 진행시키는 고급 기능을 배웁니다.

• 실습 (Practice)

    ◦ Study05 폴더를 만들고 5명의 에이전트(PM, Backend, Frontend, QA, AI Expert)를 차례로 생성합니다.

    ◦ 각 에이전트에게 적절한 모델과 색상(Red, Blue, Green, Yellow, Purple)을 지정합니다.

• 프로젝트 (Project): "AI 공감 다이어리 & PDF 요약 앱"

    ◦ "일기를 쓰면 감정을 분석해 주는 앱을 만들어 줘"라고 요청하여 5명의 에이전트가 기획부터 테스트까지 수행하게 합니다.

    ◦ 또는, PDF를 업로드하면 요약해 주는 앱을 '자동 승인 모드'로 실행하여 20분 만에 완성해 봅니다.

• 체크리스트 (Checklist)

    ◦ [ ] 5명의 에이전트가 모두 생성되었는가?

    ◦ [ ] 에이전트들이 서로의 결과물을 이어받아 작업을 수행하는가?

    ◦ [ ] 최종 결과물(index.html 등)이 브라우저에서 정상 작동하는가?

-------------------------------------------------------------------------------

 

 

제품명: AI PDF Insight (AI PDF 요약기)

 

PDF 문서를 업로드하면 AI가 요약해주는 웹 애플리케이션을 만들 거야.   먼저 product-manager-prd가 PDF 문서 요약 앱의 상세 PRD와 기능 명세를 작성하고,   backend-developer가 PDF 파일 업로드, 텍스트 추출 기능을 구현해.   ai-integration가 Google API를 연동해서 추출된 텍스트를 요약하는 기능을 구현해   줘.   gemini-3-flash-preview 모델을 사용하고, API 키는 현재 폴더의 ‘.env’ 파일에   저장된 것을 사용해.   frontend-developer가 드래그&드롭 파일 업로드 UI와 요약 결과를 깔끔하게 표시하는   한글 인터페이스를 구현한 다음,   quality assurance가 실제로 여러 상황에서 문제없이 작동하는지 테스트해 줘. 문제를   발견하면 완전히 해결할 때까지 수정하고, 최종 버전을 브라우저에서 바로 열 수 있는   ‘index_pdf.html’ 파일로 만들어 줘.

 

먼저, Product Manager로서 이번 PDF 요약 애플리케이션의 핵심 기능을   정의하고(PRD), 이를 바탕으로 개발을 진행하겠습니다.   📋 제품 요구사항 문서 (PRD) 요약    * 제품명: AI PDF Insight (AI PDF 요약기)    * 핵심 목표: 사용자가 PDF 문서를 업로드하면, AI가 내용을 분석하여 핵심 내용을      한국어로 요약해 주는 빠르고 간편한 도구.    * 주요 기능:        1. 파일 업로드: 직관적인 드래그 & 드롭(Drag & Drop) 인터페이스.        2. PDF 텍스트 추출 (Backend Logic): 브라우저 내에서 PDF 파일의 텍스트를           즉시 추출 (서버 전송 없이 보안 강화).        3. AI 요약 (AI Integration): Gemini API(gemini-3-flash-preview)를 활용한           고품질 요약 생성.        4. 결과 표시 (Frontend): 마크다운이 적용된 깔끔한 요약문 표시 및 복사 기능.    * 기술 스택:        * Single File HTML (배포 용이성)        * PDF.js (클라이언트 사이드 PDF 파싱)        * Tailwind CSS (UI 디자인)        * Gemini API (Rest API via fetch)   ---

 

 

 

 

중요한 MCP도 따라해보자..

 

https://hoyokin.tistory.com/75

08. MCP로 클로드 코드의 한계 넘어서기