01. 홈페이지 개선

Steering 파일로 Kiro에 프로젝트 맥락을 먼저 알려주고, 게임 홈페이지를 자유로운 바이브 코딩으로 빠르게 개선하는 실습입니다.

시작하기 전에

이전 모듈인 Setup을 완료해 게임을 로컬에서 띄울 수 있는 상태여야 합니다. 브라우저에서 localhost:5173 에 접속하면 현재 홈페이지를 확인할 수 있는데, 그래픽이나 설명, 마케팅 카피가 거의 없는 미니멀한 화면입니다. 비어 있는 만큼 자유롭게 다듬어 볼 수 있어 바이브 코딩(vibe coding)을 처음 경험하기에 좋은 소재입니다.

1) Steering 파일 만들기

Kiro에게 곧장 코드를 부탁하기 전에, 이 프로젝트가 어떤 제품이고 어떤 기술 스택과 폴더 구조를 가지는지 미리 알려두면 결과 품질이 훨씬 좋아집니다. 이 역할을 하는 것이 Steering 파일입니다.

  1. Command Palette를 엽니다. 단축키는 Control/Command + Shift + P 입니다.
  2. "Steering" 으로 검색해 Kiro: Generate project steering documents 명령을 선택합니다.
  3. Agent가 저장소를 훑어보고 .kiro 폴더 아래에 문서를 생성할 때까지 기다립니다.
Steering 문서 생성 명령 실행 화면
Command Palette에서 Steering 문서 생성 명령을 실행하는 모습.

생성되는 기본 파일은 다음 세 가지입니다.

.kiro 폴더에 생성된 steering 문서
Agent가 저장소를 분석해 .kiro 폴더에 채워 넣은 steering 문서들.
Steering 파일은 한 번 만들고 끝이 아닙니다. 제품 방향이 바뀌거나 의존성이 추가되면 직접 손봐 두는 편이 이후 대화에서 시간을 아껴 줍니다.

2) 가볍게 개선 요청 던져 보기

게임 클라이언트는 Vite 기반이라 저장하는 즉시 브라우저가 갱신됩니다. 결과를 실시간으로 확인할 수 있으니 부담 없이 자유롭게 지시해 보세요. 예를 들어 다음과 같이 말해도 충분합니다.

I want you to make my homepage better.

Kiro는 steering 파일을 참고해 이 프로젝트에 어울리는 방향으로 마크업과 스타일을 손봐 줍니다. 마음에 들지 않으면 되돌리고 다른 방향을 시도하면 그만입니다.

3) 다양한 컨셉으로 실험하기

한 번에 완성하려 하지 말고, 후보를 잔뜩 만들어 비교해 보세요. 아이디어가 떠오르지 않을 땐 Kiro에게 직접 후보를 뽑아 달라고 해도 좋습니다.

Give me 20 potential themes for a game landing page.

마음에 드는 테마가 나오면 해당 테마로 랜딩 페이지를 다시 그려 달라고 부탁합니다. 예시로 시도해 볼 만한 방향은 다음과 같습니다.

이 단계에서는 코드 품질보다 "느낌"을 빠르게 탐색하는 것이 목적입니다. 마음에 들지 않는 결과는 미련 없이 버리고 다음 시도로 넘어가세요.

핵심 정리

  1. Steering 파일을 먼저 세팅해 Kiro에게 프로젝트의 맥락을 제공합니다. 이후 모든 대화의 출발점이 됩니다.
  2. AI는 시제품을 만드는 비용을 크게 낮춰 줍니다. 한 번에 정답을 찾기보다 여러 후보를 빠르게 만들어 비교하는 흐름이 효과적입니다.