챌린지 5주차 미션

챕터 6 ~ 7

- API는 외부 AI 서비스와 프로그램을 연결하는 다리로, 간단한 요청만으로 복잡한 AI 기능을 활용할 수 있게 해주는 통신 규악
- 오픈 라우터(URL)와 같은 API 통합 플랫폼에서는 여러 AI 모델을 한 곳에서 비교하고 선택할 수 있다

- API 서비스에 접근하기 위해서는 API 키를 발급받아 사용자 인증을 해야 하며, API 키는 .env 파일에 저장하여 관리하며, .env 파일은 깃허브에 올라가지 않도록 .gitignore에 .env 파일을 명시해야 한다

- 이미지 인식, 텍스트 등 목적에 맞게 여러 AI 모델을 활용하는 다중 AI 모델 연동 애플리케이션을 제작할 때에는 단계별 계획에 따라 점진적으로 완성도를 높여야 한다

- 웹 프레임워크는 웹 애플리케이션을 쉽게 만들 수 있도록 도와주는 도구 모음으로, 파이썬의 경우 streamlit, gradio, flask 등이 있다

- 클로드 코드에서는 AI 서브에이전트를 생성하고 사용할 수 있으며, 이는 특정 유형의 작업을 전문적으로 수행하는 개발 도우미로, 사용자가 직접 시스템 프롬프트를 정의하는 등 커스터마이징 할 수 있어 효율적인 문제 해결을 돕는다

  - 커스텀 명령어가 반복 작업을 빠르게 실행하는 단축키라면, 에이전트는 독립적인 AI 전문가이다 에이전트는 각자 다른 AI 모델을 선택할 수 있고, 파일 접근 권한을 개별 설정할 수 있으며, 다른 에이전트와 협업할 수도 있다 예를 들어 코드 리뷰어 에이전트는 읽기 전용으로, 수정 에이전트는 쓰기 권한을 갖도록 설정해 역할을 분리할 수 있다

서브에이전트 생성 방법

 

여러 개의 서브에이전트를 실행하는 경우, 작업의 성격과 파일 충돌 가능성을 고려해 직렬 또는 병렬 처리 방식을 선택한다. 직렬 처리는 작업을 한 번에 하나씩, 순서대로 처리하는 방식이고 병렬 처리는 여러 작업을 동시에 나누어 처리하는 방식이다.

다음과 같은 프롬프트로 서브에이전트 간 협업을 실행할 수 있다. 

code-bug-analyzer로 ‘냉장고를 부탁해’ 애플리케이션 코드 전체를 리뷰한 뒤, 발견한 문제를 performance-optimizer가 수정해서 성능 최적화한 다음, ux-design-advisor가 사용자 경험을 개선하게 해 줘

 

작업 결과 백업하기

여러 에이전트가 동시에 작업하다 보면 예상치 못한 충돌이나 중복 수정이 발생할 수 있다. 이런 경우를 대비해 작업 전 백업을 만들어 두면 좋다.

 

백업으로 복원해 줘

 

나만의 AI 개발팀 구축하기

 

공감 일기 앱 만들기

소프트웨어 개발 시 여러 분야의 전문가가 함께 팀을 이루어 일하며, 다음과 같은 AI 서브 에이전트를 만들 수 있다.

• 제품 기획 관리자: 전체 개발 일정을 관리하는 프로덕트 매니저로서 PRD를 작성하여 제품의 목표, 기능, 사용자 요구사항을 정의한다
• 백엔드 개발자: 서버 아키텍처 설계, API 개발, 데이터 처리, 외부 서비스 통합, 보안 및 성능 최적화를 담당하는 서버 사이드 개발 전문가. 안정적이고 확장 가능한 백엔드 시스템 구축.
• 프론트엔드 개발자: 사용자 인터페이스 설계 및 구현, 반응형 디자인, 웹 접근성, 성능 최적화를 담당하는 클라이언트 사이드 개발 전문가.
• 품질 보증 엔지니어: 전체 시스템의 기능 테스트, 에러 처리 검증, 성능 최적화, 코드 리뷰를 수행하는 품질 관리 전문가. 버그 발견, 사용성 개선사항 제안.
• AI 통합 전문가: LLM 및 AI 서비스 통합, 프롬프트 최적화, 모델 파인튜닝, AI 파이프라인 구축을 담당하는 인공지능 전문가. 여기서는 OpenRouter API를 통해 DeepSeek 모델과 연동하여 텍스트 생성, 요약을 구현하는 LLM 활용 전문가

그 결과, 프로젝트 폴더 하위의 .claude > agents에 .md 파일이 저장되어 있는 것을 확인할 수 있다. 또한, 아래와 같은 프롬프트를 활용하여 공감 일기 애플리케이션을 만들 수 있다. 

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

 

PDF 문서 요약 AI 앱 만들기

• 제품 기획 관리자 : PDF 문서 요약 앱의 상세 PRD와 기능 명세 작성
• 백엔드 개발자 : PDF 파일 업로드, 텍스트 추출 기능 구현
• AI 통합 전문가 : OpenRouter API를 연동해서 추출된 텍스트를 요약하는 기능 구현. 무료 모델을 사용하고 API 키는 .env 파일에 저장된 것을 사용
• 프론트엔드 개발자 : 드래그&드롭 파일 업로드 UI와 요약 결과를 깔끔하게 표시하는 인터페이스를 구현
• 품질 보증 엔지니어 : 다양한 PDF 형식으로 전체 시스템을 철저히 테스트하고 버그를 수정

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

 

 

🚶기본 미션(필수)

PROJECT 9. 냉장고를 부탁해 앱 만들고 캡처하기

OpenRouter API를 활용하여 냉장고 사진에서 재료를 인식하고 레시피를 추천 및 저장하는 냉장고를 부탁해 앱을 만들었다. 클로드 코드에 프롬프트를 통해 1,2,3단게로 구분하여 PRD를 작성하도록 하였고, 각각을 직접 순차적으로 실행했다.

AI 서브 에이전트를 만들어 코드 리뷰, 최적화, UX 개선을 진행할 수 있다.

냉장고를 부탁해 앱 화면

 

 

🏃추가 미션(선택)

AI 에이전트 팀 구축하기

AI 서브 에이전트로 PM, 백엔드 개발자, 프론트엔드 개발자, QA, AI 전문가를 구분하여 특정 어플리케이션 기능에 대해 각각의 서브 에이전트가 각각의 역할을 수행하여 하나의 앱을 만들도록 할 수 있다.

 

나는 PM, 백엔드 개발자, 프론트엔드 개발자 서브 에이전트를 생성하였고, 평소 사용해보고 싶었던 15분 버전의 뽀도모로 타이머 웹사이트를 만들어보았다. 그런데, 해당 프로젝트에는 백엔드 기능 개발이 별도로 필요하지 않아서 백엔드 개발자 서브 에이전트는 호출되지 않고, 완성되었다.

뽀도모로 타이머 웹사이트를 만들어줘. 15분 집중 5분 휴식하는 패턴이야. 각각 시간이 완료되면 타이머가 울리게 돼. 타이머 알람 소리는 내가 선택할 수 있어. 그리고 새로고침 기능이 있고, 화면에는 명언이 표시되도록 해. 이때, 생성한 agents를 활용하여 각 순서대로 기능과 화면을 구현하도록 해. 완성되면 최종 버전을 웹 브라우저에서 열어줘

뽀모도로 타이머