Scene B · Steering 표준 적용

💡 이 실습에서 사용하는 Steering의 개념과 원리는 기능 카탈로그 · Steering에서 자세히 볼 수 있습니다.

목표

Steering 파일을 작성하여 코딩 표준을 정의하고, 이후 AI가 생성하는 모든 코드에 자동으로 표준이 적용되는 것을 확인합니다.

사전 준비

vibe-todo 폴더가 Kiro에서 열려 있는 상태
Scene A 완료 (Steering 적용 전/후 비교 가능)

해볼 것

1단계: 기본 Steering 파일 생성

Kiro 패널에서 Steering 섹션 클릭
생성 버튼 클릭
Kiro가 자동으로 기본 파일들(product.md, tech.md, structure.md)을 생성합니다

2단계: 커스텀 Steering 파일 생성

Steering 섹션에서 새 파일을 생성하고, 파일명은 todo-app-standards.md로 지정합니다. 아래 내용을 붙여넣기:

markdown

---
title: Todo App Development Standards
inclusion: always
---

# Todo App 개발 표준

## 코딩 스타일

### HTML
- 시맨틱 태그 사용 (header, main, section, article 등)
- 접근성 속성 포함 (aria-label, alt 등)
- 들여쓰기: 2칸 스페이스

### CSS
- BEM 방법론 사용 (Block__Element--Modifier)
- CSS 변수 활용 (--primary-color 등)
- 모바일 퍼스트 반응형 디자인
- 들여쓰기: 2칸 스페이스

### JavaScript
- ES6+ 문법 사용
- const/let 사용 (var 금지)
- 함수명은 동사로 시작 (addTodo, deleteTodo)
- 주석은 한글로 작성
- 들여쓰기: 2칸 스페이스

## 파일 구조

todo-app/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── assets/
    └── images/

## 기능 구현 원칙
- 로컬 스토리지 사용으로 데이터 영속성 보장
- 사용자 입력 검증 필수
- 에러 처리 포함
- 접근성 고려 (키보드 내비게이션 등)

## 네이밍 규칙
- HTML ID: kebab-case (todo-input, todo-list)
- CSS 클래스: BEM 방식 (todo__item--completed)
- JavaScript 변수: camelCase (todoList, addTodoBtn)

3단계: Steering 효과 테스트

테스트 1 — 자동 표준 적용 확인:

할 일 추가 버튼 HTML을 만들어주세요.

→ 시맨틱 태그, aria-label, BEM 클래스명이 적용되었는지 확인

테스트 2 — CSS 클래스 생성:

할 일 목록을 표시하는 CSS 클래스를 만들어주세요.

→ BEM 방식, CSS 변수 활용, 2칸 들여쓰기 확인

테스트 3 — JavaScript 함수 생성:

할 일을 추가하는 JavaScript 함수를 만들어주세요.

→ ES6+, const/let, 동사 시작 함수명, 한글 주석 확인

4단계: Scene C 프로젝트에도 Steering 복사

이 표준은 이후 Spec 실습(Scene C)에서도 재사용합니다. vibe-todo와 같은 위치에 Scene 0에서 만든 spec-todo 폴더가 있는지 확인한 뒤, todo-app-standards.md를 다음 경로로 복사합니다:

spec-todo/
└── .kiro/
    └── steering/
        └── todo-app-standards.md

파일 탐색기에서는 spec-todo 안에 .kiro/steering 폴더를 만들고, vibe-todo/.kiro/steering/todo-app-standards.md를 복사해 붙여넣습니다. 터미널을 사용한다면 vibe-todo 폴더에서 다음 명령을 실행합니다:

bash

mkdir -p ../spec-todo/.kiro/steering
cp .kiro/steering/todo-app-standards.md ../spec-todo/.kiro/steering/

Scene C1에서 spec-todo를 열었을 때 .kiro/steering/todo-app-standards.md가 보이면 준비가 끝났습니다.

기대 결과

.kiro/steering/ 폴더에 Steering 파일 생성 확인
이후 모든 코드 생성 시 표준이 자동 적용됨
같은 Steering 파일이 spec-todo/.kiro/steering/에도 있어 Scene C 구현에 적용됨
팀 단위로 동일 기준 공유 가능

0 / 5항목을 클릭해 체크 · 진행 상태는 이 브라우저에 저장됩니다

`.kiro/steering/` 폴더에 기본 파일 3개 생성필수
커스텀 Steering `todo-app-standards.md` 생성필수
코드 생성 시 BEM 클래스명 자동 적용 확인필수
JavaScript에 한글 주석·ES6+ 자동 적용 확인필수
`spec-todo/.kiro/steering/`에 커스텀 Steering 복사필수

🎯 심화 도전

Steering 파일에 커밋 메시지 규칙(예: "feat: / fix: / docs: 접두사 사용")을 추가한 뒤, Kiro에게 코드 변경과 커밋 메시지를 동시에 요청해보세요. 규칙이 자동으로 적용되는지 확인합니다.
팀원과 공유할 수 있도록 .kiro/steering/ 폴더를 Git에 커밋하는 것도 시도해보세요.

🚨 문제 해결

Steering이 적용되지 않는 경우: Kiro 재시작 → Steering 파일의 frontmatter 문법 확인(inclusion: always) → 파일이 .kiro/steering/ 경로에 저장되었는지 확인.
기존 코드와 충돌: Steering은 새로 생성하는 코드에 적용됩니다. 기존 코드를 표준에 맞추려면 "현재 코드를 Steering 표준에 맞게 리팩터링해주세요"라고 요청.

Scene B · Steering 표준 적용 ​

목표 ​

사전 준비 ​

해볼 것 ​

1단계: 기본 Steering 파일 생성 ​

2단계: 커스텀 Steering 파일 생성 ​

3단계: Steering 효과 테스트 ​

4단계: Scene C 프로젝트에도 Steering 복사 ​

기대 결과 ​