1. 프로젝트 소개

이 실습에서는 Agent와 함께 간단한 자기소개 웹 페이지를 만듭니다. 직접 코드를 작성하지 않고, Agent에게 요청하여 완성합니다.

1.1 완성 목표

자기소개 페이지
├── 헤더: 이름과 한 줄 소개
├── 소개 섹션: 간단한 자기소개
├── 기술 섹션: 관심 있는 기술 목록
└── 연락처 섹션: 이메일, SNS 링크

2. 1단계: 프로젝트 시작

2.1 워크스페이스(작업 공간) 생성

1. Agent Manager 열기 (Cmd/Ctrl + E)
2. "Open Workspace" 클릭 → Open New Workspace 선택
3. 새 폴더 생성: my-profile
4. 저장 위치 선택
5. 생성 완료

그림 6-1: 새 워크스페이스 생성 화면

2.2 Editor로 전환

1. 생성된 워크스페이스 선택
2. Cmd/Ctrl + E로 Editor 열기
3. Agent Side Panel 확인 (Cmd/Ctrl + L)

3. 2단계: Agent에게 HTML 요청

3.1 첫 번째 요청

Agent Side Panel에서 다음과 같이 요청합니다.

간단한 자기소개 웹 페이지를 만들어주세요.

포함할 내용:
- 헤더: "홍길동" (이름), "웹 개발을 배우는 중입니다" (한 줄 소개)
- 소개 섹션: 간단한 자기소개 2-3문장
- 기술 섹션: HTML, CSS, JavaScript 목록
- 연락처: 이메일 주소

파일 이름은 index.html로 해주세요.

3.2 Agent 작업 관찰

Agent가 작업을 시작하면,

1. Task Group 생성: Planning 모드에서는 작업을 단계별로 나눔
2. 파일 생성: index.html 파일 자동 생성
3. 코드 작성: HTML 구조 작성

그림 6-2: Agent가 HTML 파일을 생성하는 과정

3.3 결과 확인

Agent가 완료하면,

1. 파일 탐색기에서 index.html 클릭
2. 생성된 코드 확인
3. 마음에 들지 않는 부분이 있으면 수정 요청

4. 3단계: 스타일 추가 요청

4.1 CSS 요청

Agent에게 계속해서 요청합니다.

index.html에 스타일을 추가해주세요.

요구사항:
- 깔끔하고 모던한 디자인
- 파란색 계열의 메인 컬러
- 각 섹션에 적절한 여백
- 모바일에서도 잘 보이게

style.css 파일로 분리해주세요.

4.2 작업 과정 확인

1. Agent가 style.css 생성
2. index.html에 CSS 파일 연결
3. 스타일 적용 확인

5. 4단계: Browser로 결과 확인

5.1 로컬 서버 실행 요청

방금 만든 페이지를 브라우저에서 확인하고 싶어요.
로컬 서버를 실행해주세요.

Agent가 터미널에서 서버를 실행합니다.

# Python 사용 시
python -m http.server 8000

# 또는 Node.js 사용 시
npx serve .

5.2 Browser로 확인

localhost:8000 페이지를 열고 어떻게 보이는지 확인해주세요.

Browser Subagent가 아래의 단계를 진행합니다.

1. 페이지 열기
2. 스크린샷 캡처
3. 결과 보고

그림 6-3: Browser로 확인한 자기소개 페이지

6. 5단계: 피드백으로 수정

6.1 수정 요청 예시

결과를 보고 수정이 필요하면 Agent에게 요청합니다.

예시 1: 색상 변경

메인 색상을 파란색에서 초록색으로 바꿔주세요.

예시 2: 섹션 추가

기술 섹션 아래에 "프로젝트" 섹션을 추가해주세요.
프로젝트 이름과 설명을 넣을 수 있게 해주세요.

예시 3: 레이아웃 변경

기술 목록을 가로로 나열해주세요.
태그처럼 보이게 스타일링해주세요.

6.2 반복적인 개선

Agent와 대화하며 원하는 모습이 될 때까지 수정합니다.

수정 → 확인 → 피드백 → 수정 → 확인 → ...

7. 6단계: JavaScript 기능 추가

7.1 간단한 인터랙션 추가

다음 기능을 추가해주세요.
1. 이메일 주소 클릭 시 클립보드에 복사
2. 복사 완료 시 "복사되었습니다!" 알림 표시

script.js 파일로 분리해주세요.

7.2 기능 테스트

Browser에서 이메일 복사 기능이 잘 작동하는지 테스트해주세요.

8. 완성된 프로젝트 구조

my-profile/
├── index.html    # HTML 구조
├── style.css     # 스타일
└── script.js     # JavaScript 기능

그림 6-3: Browser로 확인한 자기소개 페이지2

9. 실습 정리

이 실습에서 배운 내용은 아래와 같습니다.

9.1 핵심 포인트

1. 대화형 개발: Agent와 대화하며 점진적으로 완성
2. 구체적인 요청: 원하는 것을 명확히 설명
3. 반복적인 개선: 결과 확인 후 수정 요청
4. Browser 활용: 실제 결과물 확인

10. 추가 연습

10.1 연습 1: 내용 수정

자기소개 페이지의 내용을 본인 정보로 바꿔보세요.

이름, 소개, 기술 스택을 제 정보로 바꿔주세요:
- 이름: [본인 이름]
- 소개: [본인 소개]
- 기술: [관심 기술]

10.2 연습 2: 다크 모드 추가

다크 모드 토글 버튼을 추가해주세요.
버튼을 클릭하면 다크/라이트 모드가 전환되게 해주세요.

10.3 연습 3: 애니메이션 추가

페이지 로드 시 각 섹션이 순차적으로 나타나는
애니메이션을 추가해주세요.

11. 다음 단계

Agent와 함께 프로젝트를 만드는 방법을 배워보았습니다.

다음 챕터에서는 Agent가 생성하는 다양한 산출물(Artifacts)을 활용하는 방법을 배워봅시다.

Artifacts 활용하기