1. Rules란?

Rules는 Agent에게 제공하는 가이드라인입니다. 사용자의 코딩 스타일, 프로젝트 규칙, 선호사항을 Agent에게 알려줍니다.

1.1 Rules로 할 수 있는 것

1.2 Rules의 종류

2. Rules 만들기

2.1 Customizations 패널 열기

1. Editor에서 Agent 패널 상단의 "..." 버튼 클릭
2. "Customizations" 선택
3. "Rules" 탭으로 이동

그림 6-1: Rules 패널

2.2 Global Rule 만들기

모든 프로젝트에 적용되는 규칙.

1. "+ Global" 버튼 클릭
2. 규칙 작성 (Markdown 형식)
3. 저장

예시: 기본 코딩 스타일

# 코딩 스타일 가이드

## 일반 규칙
- 들여쓰기는 2칸 스페이스 사용
- 함수 이름은 동사로 시작
- 변수 이름은 명확하게 작성

## 응답 스타일
- 한국어로 응답해주세요
- 코드에 간단한 주석 추가

2.3 Workspace Rule 만들기

현재 프로젝트에만 적용되는 규칙.

1. "+ Workspace" 버튼 클릭
2. 규칙 이름 작성(test)
3. 규칙 작성
4. 저장

그림 6-2: Workspace Rule 생성 버튼

예시: 웹 프로젝트 규칙

# 웹 프로젝트 규칙

## 파일 구조
- HTML 파일은 루트 폴더에 저장
- CSS 파일은 css/ 폴더에 저장
- JavaScript 파일은 js/ 폴더에 저장

## 코딩 스타일
- CSS 클래스명은 케밥-케이스 사용 (예: main-header)
- JavaScript 변수명은 camelCase 사용

3. Rules 활성화 방식

Rules가 언제 적용되는지 설정할 수 있습니다.

그림 6-3: Rules 활성화 방식 선택 화면

3.1 @ 멘션으로 Rule 활성화

Manual로 설정된 Rule은 채팅에서 @로 언급하여 활성화합니다.

@test.md 를 따라서 연락처 페이지를 만들어주세요.

그림 6-4: @ 멘션으로 Rule 호출하기

4. Workflows란?

Workflows는 반복적인 작업 순서를 저장해두는 기능입니다. 에이전트에 슬래시 명령어(/workflow-name)로 호출합니다.

4.1 Workflows로 할 수 있는 것

• 새 페이지 생성 절차
• 코드 리뷰 체크리스트 실행
• 프로젝트 초기 설정
• 배포 전 점검 사항

5. Workflow 만들기

5.1 Customizations 패널에서 생성

1. Customizations 패널 열기
2. "Workflows" 탭으로 이동
3. "+ Global" 또는 "+ Workspace" 클릭

그림 6-5: Workflows 패널

5.2 Workflow 구조

Workflow는 Markdown 파일로 작성합니다. 제목, 설명, 단계 순서로 구성됩니다.

# new-page (워크플로우 제목) 

## 설명 (Description)
새 HTML 페이지를 만들 때 사용하는 워크플로우입니다.

## 단계 (Content)

### 1단계: HTML 파일 생성
루트 폴더에 새 HTML 파일을 생성하세요.

### 2단계: 기본 구조 작성
HTML5 기본 구조를 작성하세요.

### 3단계: CSS 연결
css 폴더의 style.css를 연결하세요.

### 4단계: JavaScript 연결
js 폴더의 main.js를 연결하세요.

5.3 Workflow 실행

Agent 채팅에서 슬래시 명령어로 실행합니다.

/new-page about.html 페이지를 만들어주세요.

그림 6-6: 슬래시 명령어로 Workflow 실행

이후 Agent가 Workflow의 각 단계를 순차적으로 실행합니다.

6. 실습: Rules와 Workflows 만들기

06-02에서 만든 자기소개 프로젝트에 Rules와 Workflows를 적용해봅시다.

6.1 실습 1: Global Rule 만들기

Agent에게 항상 적용될 기본 규칙을 만들어봅시다.

1단계: Customizations 패널 열기

Editor에서 Agent 패널 상단의 "..." 버튼을 클릭하고 "Customizations"를 선택합니다.

2단계: Global Rule 생성

Rules 탭에서 "+ Global" 버튼을 클릭합니다.

3단계: 규칙 작성

다음 내용을 입력합니다.

# 내 코딩 스타일

- 들여쓰기: 2칸 스페이스
- 문자열: 작은따옴표 사용
- 세미콜론: 항상 사용
- 응답: 한국어로

4단계: 저장

저장(Ctrl+S/Cmd+S) 버튼을 클릭합니다.

그림 6-8: Global Rule 작성 및 저장

6.2 실습 2: Workspace Rule 만들기

자기소개 프로젝트에만 적용되는 규칙을 만들어봅시다.

1단계: Workspace Rule 생성

Rules 탭에서 "+ Workspace" 버튼을 클릭하고, new-rule 이름을 작성합니다.

2단계: 규칙 작성

다음 내용을 입력합니다.

# 자기소개 프로젝트 규칙

이 프로젝트는 다음 기술을 사용합니다.
- HTML5
- CSS3
- Vanilla JavaScript

외부 라이브러리는 사용하지 않습니다.

3단계: 저장

저장 버튼을 클릭합니다.

그림 6-9: Workspace Rule 작성 완료

4단계: 테스트

Agent에게 다음과 같이 요청해봅시다. (이전에 만들었던 자기소개 페이지 활용)

연락처 섹션에 이메일 아이콘을 추가해주세요.

Agent가 외부 라이브러리 없이 CSS나 SVG로 아이콘을 만들어주는지 확인합니다.

그림 6-9: Workspace Rule 테스트 완료

6.3 실습 3: Workflow 만들기

자주 사용하는 작업을 Workflow로 만들어봅시다.

1단계: Workflow 생성

Workflows 탭에서 "+ Workspace" 버튼을 클릭합니다.

2단계: Workflow 작성

다음 내용을 입력합니다.

# add-new-section (제목)

## 설명
자기소개 페이지에 새 섹션을 추가합니다.

## 단계

### 1단계
index.html에 새 section 요소를 추가하세요.

### 2단계
섹션에 적절한 id와 class를 부여하세요.

### 3단계
style.css에 새 섹션의 스타일을 추가하세요.

### 4단계
Browser로 결과를 확인하세요.

3단계: 저장

저장 버튼을 클릭합니다.

그림 6-10: Workflow 작성 완료

4단계: 테스트

Agent에서 슬래시 명령어로 테스트합니다.

/add-new-section "취미" 섹션을 추가해주세요.

그림 6-11: Workflow 실행 결과

7. Agent가 Workflow 생성하기

Agent에게 Workflow 생성을 요청할 수도 있습니다.

방금 했던 작업을 Workflow로 만들어줘.

Agent가 대화 내용을 분석하여 자동으로 Workflow를 생성합니다. 반복적인 작업을 Agent와 함께 한 후 이 기능을 활용하면 편리합니다.

그림 6-12: Agent가 대화 기반으로 생성한 Workflow

8. 활용 팁

8.1 Rules 작성 팁

8.2 Workflows 활용 예시

• /new-page - 새 HTML 페이지 생성
• /add-section - 페이지에 새 섹션 추가
• /test-style - CSS 스타일 일관성 점검
• /browser-test - 여러 화면 크기에서 테스트

9. 정리

10. 다음 단계

Agent 커스터마이징을 익혔다면, Skills로 Agent의 기능을 더 확장하는 방법을 배워봅시다.

Skills

Skills까지 학습을 완료했거나 건너뛰려면, 다음 챕터에서 Artifacts를 활용하는 방법을 배워봅시다.

Artifacts 활용하기