Artifacts 실습 예제
학습 목표
- Implementation Plan을 검토하고 승인할 수 있다
- Artifacts에 피드백을 남길 수 있다
- Walkthrough로 작업 결과를 확인할 수 있다
1. 실습 개요
이 실습에서는 Agent에게 기능을 요청하고, 생성되는 Artifacts를 활용하는 방법을 배웁니다. Chapter 6에서 만든 자기소개 페이지에 새 기능을 추가해봅니다.
1.1 실습 목표
| 단계 | 목표 |
|---|---|
| 1단계 | 기능 요청 → Task List 확인 |
| 2단계 | Implementation Plan 검토 |
| 3단계 | 피드백으로 계획 수정 |
| 4단계 | Walkthrough로 결과 확인 |
2. 준비: 설정 및 워크스페이스 확인
2.1 설정 확인 (중요!)
실습 전에 다음 설정을 확인하세요.
- Agent Manager 상단 메뉴에서 Settings(톱니바퀴 모양) 클릭
- Agent 탭 선택
- Artifact Review Policy가 "Request Review"인지 확인
그림 7-8: Artifact Review Policy 설정 위치
⚠️ 왜 확인해야 하나요?
"Always Proceed"로 설정되어 있으면 Implementation Plan이 표시되지 않고 바로 진행됩니다. 이 실습에서는 계획을 검토하는 것이 목표이므로 "Request Review"로 설정해야 합니다.
2.2 워크스페이스 열기
- Agent Manager 열기 (
Cmd/Ctrl + E) - 기존
my-profile워크스페이스 선택 - Editor로 전환 (
Cmd/Ctrl + E)
💡 새로 시작해도 됩니다
Chapter 6 실습을 하지 않았다면, 새 워크스페이스를 만들어 간단한 HTML 파일을 먼저 생성하세요.
2.3 Planning 모드 확인
Artifacts를 경험하려면 Planning 모드여야 합니다. 새 대화 시작 시 모드를 확인하세요.
3. 1단계: 기능 요청하기
Agent에게 새 기능을 요청합니다.
3.1 요청 보내기
Agent Side Panel에서 다음과 같이 요청합니다.
자기소개 페이지에 다음 기능을 추가해주세요.
1. 다크 모드 토글 버튼
2. 버튼 클릭 시 다크/라이트 모드 전환
3. 사용자 설정을 로컬 스토리지에 저장
3.2 Task List 확인
Agent가 Planning 모드에서 작업을 시작하면 Task List가 생성됩니다.
Agent Manager에서 확인.
- 대화 선택
- Artifacts 패널에서 "Task List" 확인
- 진행 상황 파악
그림 7-9: 생성된 Task List
4. 2단계: Implementation Plan 검토
Agent가 코드를 작성하기 전에 구현 계획을 생성합니다.
4.1 계획 내용 확인
Implementation Plan에서 확인할 내용
| 확인 항목 | 예시 |
|---|---|
| 수정할 파일 | index.html, style.css, script.js |
| 추가할 요소 | 토글 버튼, 다크 모드 스타일 |
| 구현 방식 | CSS 변수, localStorage API |
# 구현 계획
## 변경 파일
- index.html: 토글 버튼 추가
- style.css: 다크 모드 스타일 추가
- script.js: 토글 기능 및 저장 로직
## 구현 방식
1. CSS 변수로 테마 색상 관리
2. body에 data-theme 속성으로 테마 전환
3. localStorage에 사용자 선호도 저장
그림 7-10: Implementation Plan 내용
4.2 계획 승인하기
계획이 마음에 들면 다음과 같이 진행합니다.
- "Proceed" 버튼 클릭
- Agent가 구현 시작
- 완료까지 대기
5. 3단계: 피드백으로 계획 수정
계획을 수정하고 싶다면 피드백을 남깁니다.
5.1 피드백 시나리오
예를 들어, 다음과 같은 수정이 필요할 수 있습니다.
시나리오 1: 색상 변경
다크 모드 배경색을 #1a1a1a 대신 #2d2d2d로 해주세요.
시나리오 2: 기능 축소
로컬 스토리지 저장 기능은 빼주세요.
토글 기능만 구현해주세요.
시나리오 3: 구현 방식 변경
CSS 변수 대신 class 토글 방식으로 구현해주세요.
5.2 피드백 남기기
- Implementation Plan에서 수정할 부분 선택
- 댓글 아이콘 클릭
- 피드백 내용 입력
- "Review" 버튼 클릭
그림 7-11: Implementation Plan에 피드백 입력
5.3 Agent 응답 확인
Agent가 피드백을 반영하여
- 계획을 수정하거나
- 수정된 계획으로 다시 검토 요청
피드백이 반영되면 다시 "Proceed"로 진행합니다.
6. 4단계: Walkthrough 확인
Agent가 구현을 완료하면 Walkthrough가 생성됩니다.
6.1 Walkthrough 내용
| 섹션 | 설명 |
|---|---|
| 변경 요약 | 무엇이 추가/수정되었는지 |
| 파일 목록 | 변경된 파일들 |
| 스크린샷 | 결과물 미리보기 (Browser 작업 시에만 포함) |
💡 스크린샷이 안 보여요?
스크린샷과 녹화 영상은 Browser Subagent가 웹 페이지 작업을 수행한 경우에만 Walkthrough에 포함됩니다. 코드 수정만 한 경우에는 스크린샷이 없을 수 있습니다.
그림 7-12: 작업 완료 후 Walkthrough
6.2 결과 확인
- 변경된 파일 클릭하여 코드 확인
- Browser로 실제 동작 테스트
- 추가 수정이 필요하면 Agent에게 요청
7. 실습: 직접 해보기
7.1 연습 1: 다른 기능 요청
다음 기능을 요청하고 Artifacts 과정을 경험해보세요.
페이지에 스크롤 시 상단에 고정되는 네비게이션 바를 추가해주세요.
- Task List 확인
- Implementation Plan 검토
- 필요시 피드백 남기기
- Walkthrough 확인
7.2 연습 2: 피드백 연습
의도적으로 피드백을 남겨보세요.
- Agent에게 기능 요청
- Implementation Plan 생성 대기
- 아무 부분이나 선택하여 피드백 남기기
- Agent의 반응 확인
7.3 연습 3: Screenshot 요청
Browser 작업 후 스크린샷을 요청해보세요.
현재 페이지의 스크린샷을 찍어주세요.
다크 모드와 라이트 모드 둘 다 캡처해주세요.
8. 실습 정리
이 실습에서 경험한 Artifacts 활용 흐름
기능 요청
↓
Task List 생성 (진행 상황 추적)
↓
Implementation Plan 생성 (계획 검토)
↓
검토 → 승인 또는 피드백
↓
구현 진행
↓
Walkthrough 생성 (결과 요약)
↓
결과 확인 및 추가 수정
8.1 핵심 포인트
| 포인트 | 설명 |
|---|---|
| 사전 검토 | 구현 전 계획을 확인하면 실수 방지 |
| 적극적 피드백 | 원하는 방향으로 Agent 유도 |
| Walkthrough 활용 | 변경 사항 빠르게 파악 |
9. 문제 해결
실습 중 문제가 발생하면 다음을 확인하세요.
9.1 Implementation Plan이 안 나와요
| 원인 | 해결 방법 |
|---|---|
| Fast 모드 사용 중 | Planning 모드로 새 대화 시작 |
| 설정이 "Always Proceed" | Settings → Agent → "Request Review"로 변경 |
| 작업이 너무 간단함 | 더 복잡한 기능 요청 (여러 파일 수정 필요한 작업) |
9.2 Proceed 버튼을 못 찾겠어요
- Implementation Plan Artifact 상단 또는 대화 내 "Proceed" 버튼 확인
- Agent Manager와 Editor 모두에서 확인 가능
9.3 Walkthrough가 생성되지 않아요
- 작업이 완료될 때까지 기다리세요
- 간단한 작업에서는 생성되지 않을 수 있습니다
10. 다음 단계
Artifacts 활용법을 익혔다면, 다음 챕터에서 워크스페이스를 효율적으로 관리하는 방법을 배워봅시다.
워크스페이스 관리