Artifacts 이해하기
학습 목표
- Artifacts가 무엇인지 이해할 수 있다
- 다양한 Artifacts 유형을 구분할 수 있다
- Artifacts를 확인하고 피드백을 줄 수 있다
1. Artifacts란?
Artifacts는 Agent가 작업을 수행하면서 생성하는 산출물입니다. 작업 진행 상황, 구현 계획, 변경 요약 등을 사용자에게 전달하기 위해 만들어집니다.
1.1 Artifacts의 역할
| 역할 | 설명 |
|---|---|
| 작업 추적 | Agent가 현재 무엇을 하고 있는지 확인 |
| 계획 공유 | 구현 전 계획을 검토하고 피드백 |
| 결과 요약 | 완료된 작업 내용을 한눈에 확인 |
| 나중에 확인 | Agent가 오랜 시간 작업하더라도, 실시간으로 지켜보지 않고 나중에 결과를 확인할 수 있습니다 |
💡 왜 Artifacts가 필요한가요?
Agent가 복잡한 작업을 수행할 때, 모든 과정을 실시간으로 지켜보기 어렵습니다. Artifacts는 Agent의 생각과 작업을 정리하여 사용자가 필요할 때 확인할 수 있게 해줍니다.
1.2 Artifacts와 Agent 모드
Artifacts는 Planning 모드에서 생성됩니다. Fast 모드에서는 Artifacts 없이 바로 작업이 진행됩니다.
2. Artifacts 확인하기
2.1 어디서 볼 수 있나요?
Artifacts는 두 곳에서 확인할 수 있습니다.
| 위치 | 특징 |
|---|---|
| Agent Manager | Artifacts 관리에 최적화, 목록으로 정리 |
| Editor | 코드 작업 중 빠르게 확인 |
2.2 Agent Manager에서 확인
- Agent Manager 열기 (
Cmd/Ctrl + E) - 대화 선택
- Artifacts 패널에서 목록 확인
그림 7-1: Agent Manager의 Artifacts 목록
3. Artifacts 유형
Agent는 상황에 따라 다양한 유형의 Artifacts를 생성합니다.
3.1 Task List (작업 목록)
복잡한 작업을 처리할 때 Agent가 만드는 체크리스트입니다.
| 특징 | 설명 |
|---|---|
| 용도 | 작업 진행 상황 추적 |
| 형식 | 마크다운 목록 |
| 상호작용 | 보통 직접 수정하지 않음 |
# 작업 목록
- [x] 프로젝트 구조 분석
- [x] HTML 파일 생성
- [ ] CSS 스타일 적용
- [ ] JavaScript 기능 추가
그림 7-2: Task List Artifact
3.2 Implementation Plan (구현 계획)
코드 변경 전에 Agent가 작성하는 설계 문서입니다.
| 특징 | 설명 |
|---|---|
| 용도 | 변경 계획을 사전에 검토 |
| 형식 | 기술적인 상세 설명 |
| 상호작용 | 검토 후 승인 또는 피드백 |
💡 구현 계획 검토가 중요한 이유
Agent가 작업을 시작하기 전에 계획을 확인하면, 원하지 않는 방향으로 진행되는 것을 미리 막을 수 있습니다.
구현 계획 승인하기
- 계획 내용 확인
- 문제 없으면 "Proceed" 버튼 클릭
- Agent가 구현 시작
그림 7-3: Implementation Plan Artifact
피드백 남기기
계획을 수정하고 싶다면?
- 수정하고 싶은 부분에 댓글 추가
- "Review" 버튼을 누르고 피드백 제출(Submit)
- Agent가 피드백을 반영하여 계획 수정
피드백 예시
- "이 부분은 다른 라이브러리를 사용해주세요"
- "기능 범위를 좀 더 줄여주세요"
- "이 파일은 수정하지 말아주세요"
그림 7-4: Implementation Plan에 피드백 남기기
3.3 Walkthrough (작업 요약)
Agent가 작업을 완료한 후 생성하는 변경 사항 요약입니다.
| 특징 | 설명 |
|---|---|
| 용도 | 완료된 작업 내용 확인 |
| 형식 | 변경 사항 요약 문서 |
| 상호작용 | 읽기 전용 |
Walkthrough는 다음 상황에서 유용합니다.
- Agent가 오래 작업한 후 결과 확인
- 코드 변경 내용 빠르게 파악
- 팀원에게 변경 사항 공유
💡 Browser 작업의 Walkthrough
Browser Subagent가 웹 작업을 수행한 경우, Walkthrough에 스크린샷과 녹화 영상이 포함될 수 있습니다.
그림 7-5: Walkthrough Artifact
3.4 Screenshots (스크린샷)
Browser Subagent가 웹 페이지를 캡처한 이미지입니다. 스크린샷에 댓글을 남겨 Agent에게 피드백을 줄 수 있습니다.
| 특징 | 설명 |
|---|---|
| 용도 | 웹 페이지 상태 확인 |
| 형식 | 이미지 파일 |
| 상호작용 | 댓글로 피드백 가능 |
Agent에게 스크린샷을 요청할 수 있습니다.
현재 페이지 스크린샷을 찍어주세요.
그림 7-6: Screenshot Artifact
3.5 Browser Recordings (브라우저 녹화)
Browser Subagent의 작업 과정을 담은 동영상입니다. 작업 후 녹화를 확인하면 Agent가 어떤 순서로 작업했는지 파악할 수 있습니다.
| 특징 | 설명 |
|---|---|
| 용도 | Agent의 브라우저 작업 확인 |
| 형식 | 동영상 재생 (루프) |
| 상호작용 | 반복 재생하며 확인 |
그림 7-7: Browser Recording Artifact
4. Artifacts 유형 정리
| 유형 | 생성 시점 | 주요 용도 |
|---|---|---|
| Task List | 복잡한 작업 시작 시 | 진행 상황 추적 |
| Implementation Plan | 코드 변경 전 | 계획 검토 및 승인 |
| Walkthrough | 작업 완료 후 | 변경 사항 요약 |
| Screenshots | 웹 페이지 확인 시 | 시각적 결과 확인 |
| Browser Recordings | 브라우저 작업 시 | 작업 과정 확인 |
| Knowledge | 대화 중 자동 | 학습 내용 저장 및 재활용 |
4.1 Knowledge (지식 항목)
Knowledge는 Agent의 지속적 메모리 시스템입니다. 대화 중 중요한 패턴, 인사이트, 해결책을 자동으로 저장하고 정리합니다.
| 특징 | 설명 |
|---|---|
| 용도 | 이전 대화에서 배운 내용을 다음 대화에 활용 |
| 생성 방식 | Agent가 대화를 분석하여 자동으로 생성 |
| 확인 위치 | Agent Manager |
💡 Knowledge가 유용한 경우
- 프로젝트의 코딩 스타일을 Agent가 기억
- 자주 사용하는 패턴이나 규칙을 자동 학습
- 이전 대화에서 해결한 문제의 해결책 재활용
📌 고급 기능 안내
Knowledge는 Agent가 자동으로 관리하므로, 처음에는 별도로 설정하지 않아도 됩니다. Agent와 대화를 많이 나눌수록 더 유용해집니다.
5. Artifacts 설정
Settings에서 Artifacts 관련 동작을 조정할 수 있습니다.
5.1 설정 확인 방법
- 상단 메뉴에서 Settings 클릭
- Agent 탭 선택
- Artifact Review Policy 확인
5.2 Artifact Review Policy
| 옵션 | 설명 |
|---|---|
| Request Review | 구현 계획 생성 시 승인 대기 (기본값) |
| Always Proceed | 승인 없이 바로 진행 |
💡 초심자 추천
"Request Review"를 권장합니다. Agent의 계획을 검토하고 피드백을 주는 연습을 할 수 있습니다.
⚠️ Implementation Plan이 안 보인다면?
- 모드 확인: Fast 모드가 아닌 Planning 모드인지 확인하세요.
- 설정 확인: Artifact Review Policy가 "Always Proceed"로 되어 있으면 계획 없이 바로 진행됩니다. "Request Review"로 변경하세요.
- 작업 복잡도: 아주 간단한 작업은 Agent가 계획 없이 바로 진행할 수 있습니다.
6. 다음 단계
Artifacts의 개념을 이해했다면, 실제로 Artifacts를 활용해봅시다.
Artifacts 실습 예제에서 Agent와 함께 프로젝트를 진행하며 다양한 Artifacts를 경험합니다.