Kiro 스티어링 및 게임 홈페이지 개선¶
이 모듈은 설정 지침에 따라 게임을 로컬로 이미 실행했다고 가정합니다.
1
문제 이해¶
브라우저에서 localhost:5173을 로드하여 홈페이지를 확인하세요. 보시다시피 이 홈페이지는 매우 미니멀하게 시작합니다. 그래픽, 게임이 무엇인지에 대한 설명, 마케팅 문구가 없습니다. 이것은 "vibe coding"을 위한 완벽한 작업입니다.
2
Kiro 스티어링 파일 설정¶
하지만 "vibe"를 시작하기 전에 준비해야 합니다. 이 게임은 상당히 복잡하므로 Kiro가 프로젝트가 무엇인지, 어떤 기술을 사용하는지, 코드를 탐색하는 방법을 제대로 이해하도록 준비하는 것이 매우 유용합니다.
Control/Command + Shift + P를 사용하여 명령 팔레트를 연 다음 "Steering"이라는 단어를 검색합니다. "Kiro: Generate project steering documents" 옵션을 선택합니다.
Kiro 에이전트는 리포지토리의 주요 파일을 탐색하고 프로젝트 목적, 구조 및 기술을 설명하는 일부 "스티어링" 파일을 만드는 작업을 시작합니다. 이 파일들은 향후 모든 에이전트 상호작용을 안내하여 더 빠르고 정확하게 만드는 데 도움이 됩니다.
생성된 .kiro 폴더를 잠시 살펴보세요. 몇 가지 파일이 보일 것입니다:
product.md- 프로젝트가 무엇인지 설명합니다. 이것은 Kiro가 무언가를 하도록 요청할 때 무슨 일이 일어나고 있는지에 대한 큰 그림을 이해하는 데 도움이 됩니다.tech.md- 이 프로젝트에서 사용되는 모든 기술을 설명합니다. 이것은 Kiro가 다른 옵션을 추천하는 대신 기존 기술 선택을 고수하는 데 도움이 됩니다.structure.md- 프로젝트의 주요 폴더 및 영역을 설명합니다. 이것은 Kiro가 작업할 때 올바른 위치에 더 빨리 도달하는 데 도움이 됩니다.
3
일부 개선 사항 적용¶
이제 스티어링 파일이 설정되었으므로 "I want you to make my homepage better."와 같은 기본 "vibe coding" 프롬프트를 시도해 보세요.
게임 클라이언트는 Vite에서 제공되므로 Kiro가 페이지를 수정함에 따라 실시간으로 변경 사항이 반영되는 것을 볼 수 있습니다.
4
창의력을 발휘하세요!¶
Kiro에게 다음과 같은 질문을 하세요:
Give me 20 potential themes for a game landing page.
그런 다음 Kiro에게 해당 테마로 랜딩 페이지를 재구상하도록 요청합니다.
팁
AI는 매우 상상력이 풍부하며 머릿속에 확실한 계획이 없더라도 디자인 프로토타입을 만드는 데 완벽합니다. "Apple product marketing page", "Retro" 또는 "Startup"과 같은 다양한 스타일을 가지도록 홈페이지를 만들도록 요청하거나 "carousel", "quotes" 또는 "animations"와 같이 페이지에서 원하는 특정 기능을 요청해 보세요.
이 모듈에서 두 가지 핵심 개념을 배웠습니다:
- 스티어링 파일은 AI가 프로젝트를 안내하는 데 도움이 됩니다. 첫 번째 단계는 항상 AI를 위한 이 기본 컨텍스트를 수집하고 설정하는 것이어야 합니다.
- AI는 매우 창의적이며 실험에 대한 장벽을 크게 낮춥니다. 여러 가지 다른 프로토타입을 매우 빠르게 시도한 다음 마음에 들지 않는 것은 버리세요.
다음 작업으로 넘어가봅시다: