Kiro 핸드북

테마

Scene E · MCP 연동 ​

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

목표 ​

Playwright MCP를 설정하여 실행 중인 To-Do 앱의 핵심 사용자 흐름을 자율 E2E 테스트합니다. 선택 과정에서는 Fetch MCP로 외부 웹 자료를 조회하고 코드 개선 아이디어를 얻습니다.

사전 준비 ​

  • 할 일 앱 프로젝트(vibe-todo 또는 spec-todo)가 열린 상태
  • 인터넷 연결 필요
  • Node.js 설치 완료

빠른 필수 경로 ​

앱의 핵심 흐름을 E2E로 확인하려면 아래 순서만 진행하세요.

  1. 0단계에서 개발 서버를 실행하고 실제 로컬 URL을 확인합니다.
  2. 5단계에서 Playwright MCP를 설정합니다.
  3. 6단계에서 추가·완료·필터·새로고침을 테스트합니다.
  4. 7단계에서 결과와 스크린샷을 검토합니다.

1~4단계의 Fetch MCP와 마지막 Skills·Powers 섹션은 외부 정보 탐색과 확장 기능을 위한 선택 심화 과정입니다.

해볼 것 ​

0단계: 개발 서버 실행 ​

먼저 Kiro 터미널을 열고 Node.js와 npm이 설치되어 있는지 확인합니다:

bash
node --version
npm --version

To-Do 앱이 index.html, css/, js/로 구성된 순수 정적 프로젝트라면 프로젝트 루트에서 다음 명령을 실행합니다:

bash
npx serve .

터미널에 표시되는 로컬 URL(예: http://localhost:3000)을 브라우저에서 열어 앱이 보이는지 확인합니다.

앱이 Vite 기반이라면 프로젝트 루트에서 다음 명령을 차례로 실행합니다:

bash
npm install
npm run dev

이 경우에도 터미널에 표시되는 로컬 URL(예: http://localhost:5173)을 브라우저에서 확인합니다. 포트는 환경에 따라 달라질 수 있으므로, 이후 단계에서는 예시 포트가 아니라 터미널에 실제로 출력된 URL을 사용하세요. 서버를 중지할 때는 터미널에서 Ctrl+C를 누릅니다.

1단계: (선택) Fetch MCP 설정 ​

Fetch MCP 서버 실행에는 uvx가 필요합니다. Playwright 빠른 경로만 진행한다면 설치하지 않아도 됩니다.

bash
brew install uv
uvx --version
bash
curl -LsSf https://astral.sh/uv/install.sh | sh
uvx --version

Kiro 패널에서 MCP Servers 섹션 → 버튼을 클릭하여 설정 파일을 생성합니다.

또는 아래 프롬프트를 사용:

MCP 서버 설정 프롬프트

text
웹 콘텐츠에 접근할 수 있는 Fetch MCP 서버를 설정해주세요.

설정 요구사항:
- 서버명: fetch
- 웹 페이지 내용 가져오기 기능
- 자동 승인 설정

설정 파일 위치: .kiro/settings/mcp.json

생성된 파일 확인 (.kiro/settings/mcp.json):

json
{
  "mcpServers": {
    "fetch": {
      "command": "uvx",
      "args": ["mcp-server-fetch"],
      "disabled": false,
      "autoApprove": ["fetch"]
    }
  }
}

2단계: (선택) MCP 활용 — 웹 정보 검색 ​

Fetch MCP 서버를 사용해서 다음 정보를 가져와주세요:
https://developer.mozilla.org/en-US/docs/Web/API/localStorage

로컬 스토리지 사용법에 대한 최신 정보를 요약해주세요.

3단계: (선택) MCP 활용 — 코드 개선 제안 ​

현재 우리 할 일 앱의 로컬 스토리지 구현을 개선할 수 있는 방법을 웹에서 찾아서 제안해주세요.

참고할 사이트:
- MDN Web Docs
- JavaScript.info
- 관련 기술 블로그

4단계: (선택) MCP 활용 — 최신 트렌드 ​

최신 웹 개발 트렌드 중 할 일 앱에 적용할 수 있는 새로운 기술이나 패턴이 있는지 조사해주세요.

특히:
- 프론트엔드 프레임워크
- CSS 새로운 기능
- 웹 API 활용

5단계: Playwright MCP 서버 설정 ​

1~4단계를 건너뛴 경우 .kiro/settings/mcp.json을 다음과 같이 만듭니다.

json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"],
      "disabled": false,
      "autoApprove": []
    }
  }
}

Fetch MCP도 설정했다면 기존 fetch 항목을 지우지 말고, 같은 mcpServers 객체에 위 playwright 항목을 나란히 추가합니다.

저장 후 Kiro 패널의 MCP Servers에서 playwright가 green 상태인지 확인합니다. 첫 실행은 브라우저 바이너리 다운로드 때문에 30–60초가 걸릴 수 있습니다.

6단계: 핵심 사용자 흐름 자율 테스트 ​

0단계에서 개발 서버가 표시한 실제 URL로 아래 http://localhost:5173을 바꿔 입력합니다.

Playwright MCP 자율 E2E 프롬프트

text
Playwright MCP로 http://localhost:5173 의 To-Do 앱을 자율 테스트해주세요.

1. 새 할 일을 추가하고 목록 표시를 확인
2. 완료 상태로 변경하고 진행률 반영을 확인
3. 상태 필터가 올바르게 동작하는지 확인
4. 페이지를 새로고침하고 localStorage 데이터가 유지되는지 확인
5. 각 단계의 스크린샷과 성공·실패 결과를 요약

코드는 수정하지 말고, 실패 시 재현 단계와 예상 원인을 보고해주세요.

Kiro가 navigate → click → fill → screenshot 호출을 순차 실행하는지 관찰합니다. 도구 승인이 표시되면 작업 범위를 확인한 뒤 승인하세요.

7단계: 결과 검토와 후속 작업 ​

  • 각 단계의 성공·실패 판정과 스크린샷이 일치하는지 확인
  • 실패 항목의 재현 단계가 명확한지 확인
  • 수정이 필요하면 별도 세션에서 코드를 변경한 뒤 같은 프롬프트로 재검증

💡 개발 검증과 CI/CD의 역할

MCP 기반 테스트는 기능 개발 중 빠른 검증과 탐색에 적합합니다. 프로덕션 CI/CD 회귀 테스트에는 정식 Playwright 테스트 파일을 유지하세요. 탐색 결과를 기반으로 Kiro에게 테스트 파일 생성을 요청할 수 있습니다.

기대 결과 ​

  • Playwright MCP 서버 설정 완료
  • Kiro가 브라우저에서 To-Do 핵심 흐름을 실행하고 스크린샷 증거를 남김
  • (선택) Fetch MCP를 설정했다면 웹 콘텐츠 조회와 외부 정보 기반 제안까지 확인
0 / 5항목을 클릭해 체크 · 진행 상태는 이 브라우저에 저장됩니다

🎯 심화 도전

(선택) Skills·Powers 맛보기 ​

공식 Kiro 워크샵은 MCP와 함께 Agent Skills와 Powers를 독립 실습으로 다룹니다. MCP가 "외부 도구 연결"이라면, Skills·Powers는 "작업 워크플로와 컨텍스트를 패키지로 재사용"하는 수단입니다. 이 핸드북에서는 개념 체험만 간단히 안내하고, 상세는 기능 카탈로그로 연결합니다.

  • Agent Skills — 반복 작업을 캡슐화한 이식 가능한 워크플로. 작업 내용이 Skill의 설명과 맞으면 온디맨드로 활성화됩니다. 예: 프런트엔드 디자인 가이드, 테스트 작성 규약.
  • Powers — 컨텍스트와 MCP 도구를 하나로 묶은 번들. 개방형 Agent Plugin 포맷을 지원해 로컬 경로나 GitHub URL에서 설치할 수 있습니다(예: 배포·데이터·인프라용 Power).

(선택) Skill 활용 예시

text
현재 To-Do 앱의 UI를 개선하고 싶어요. 사용 가능한 프런트엔드 디자인 관련 Skill이 있으면 적용해서 카드 레이아웃과 접근성을 다듬어주세요.

Skills·Powers의 저장 위치, 지원 app, 선택 기준은 Context Engineering에서 정리합니다. Powers 설치·사용은 IDE·Web과 CLI V3에서 가능합니다.

🚨 문제 해결

  • MCP 연결 안 됨: 인터넷 연결 확인 → Kiro 재시작 → mcp.json 문법(JSON) 확인.
  • (Fetch 선택 시) uvx 명령어 없음: brew install uv 또는 curl -LsSf https://astral.sh/uv/install.sh | sh 실행.
  • (Fetch 선택 시) 권한 오류: uvx 설치 경로가 PATH에 포함되었는지 확인. 터미널 재시작.
  • (Fetch 선택 시) fetch 실패: 대상 URL이 접근 가능한지 브라우저에서 직접 확인.
  • Playwright가 시작되지 않음: node --version과 npx --version 확인 → MCP 서버 재시작.
  • 브라우저가 앱에 접속하지 못함: 개발 서버가 실행 중인지 확인하고 프롬프트의 포트를 실제 포트로 변경.
  • 도구 호출이 반복 승인됨: 정상적인 안전 장치입니다. 쓰기 동작을 자동 승인하기 전에 범위를 검토하세요.

© 2026 Kiro 핸드북 · 비공식 자료이며 AWS와 무관합니다.