"대화 말고 명세로 만들어봤다" — AWS Kiro로 테이블 오더 서비스 만들기

소개

Claude Code로 이것저것 만들어보다가 문득 궁금해졌어요. AI 코딩 도구가 Claude Code 말고 또 뭐가 있을까?

찾아보다가 AWS에서 만든 Kiro를 발견했습니다. 소개 페이지를 보니 Claude Code와 철학 자체가 달랐어요. Claude Code가 "대화하면서 코드를 만들어가는" 방식이라면, Kiro는 "명세 먼저, 구현 나중" 을 강조하더라고요.

어떤 느낌인지 직접 써봐야 알 것 같아서, 연습 프로젝트 주제로 음식점 테이블 오더 서비스 를 골랐습니다. QR 코드 찍으면 메뉴 보고 주문할 수 있는 그 서비스요. 기능이 명확하고 화면도 여러 개라 도구 비교용으로 딱 맞을 것 같았어요.

결론부터 말하면 — Claude Code와 Kiro는 잘하는 게 다른 도구였습니다.

사용 도구

• Kiro (AWS AI 네이티브 IDE)

• React + Node.js (Kiro가 자동 선택)

• AWS Amplify (배포)

• Amazon DynamoDB (메뉴/주문 데이터)

1단계: Kiro 설치와 첫 인상

kiro.dev에서 다운로드할 수 있어요. VS Code 기반 포크라 인터페이스가 낯설지 않았고, 설치 자체는 무난했습니다.

Claude Code와 가장 먼저 달랐던 점은 프로젝트 구조부터 다르다는 것 이에요. Kiro를 열면 .kiro/ 폴더가 루트에 생기는데, 여기에 세 가지가 들어갑니다:

• specs/ — 기능 명세 (뭘 만들지)

• steering/ — 프로젝트 컨텍스트 (어떤 기술 스택으로, 어떤 스타일로)

• hooks/ — 자동화 트리거 (파일 저장하면 린트 돌리기 같은 것)

Claude Code에서 CLAUDE.md 하나에 다 적던 것을 Kiro는 역할별로 폴더로 분리해놓은 셈이에요.

ALT

맥 os x macos x macos x macos x macos x macos

2단계: Spec 작성 — Claude Code와 가장 다른 부분

Kiro의 핵심 차이가 여기서 느껴졌어요.

Claude Code에서는 보통 이렇게 시작하죠:

"QR 코드 찍으면 메뉴 보고 주문하는 웹 서비스 만들어줘"

그러면 Claude Code가 바로 코드를 작성하기 시작해요. 빠르고 편한데, 나중에 "아 이 기능도 있어야 했는데" 하면서 다시 손대는 일이 생기기도 하죠.

Kiro는 달랐어요. 같은 내용을 Spec 패널에 입력하면 바로 코드로 가지 않고, 먼저 요구사항을 구조화해서 보여주고 확인을 받습니다:

## Features
1. [고객] QR 스캔 → 메뉴 조회 → 장바구니 → 주문 제출
2. [관리자] 메뉴 CRUD (이름, 가격, 사진, 품절 표시)
3. [주방] 실시간 주문 현황 대시보드

## Tech Stack (제안)
- Frontend: React
- Backend: Node.js + Express
- DB: DynamoDB
- 실시간: WebSocket
- 배포: AWS Amplify

처음엔 "이게 왜 필요하지?" 싶었는데, 이걸 한 번 확정하고 나니 구현 중에 방향이 흔들리는 일이 없었어요. Claude Code로 작업할 때 중간에 "사실 주방 화면도 있어야 할 것 같은데..." 이런 순간이 꽤 있었거든요.

3단계: 프로젝트 스캐폴딩

Spec을 승인하자 Kiro가 프로젝트 뼈대를 한 번에 생성했어요:

table-order/
├── .kiro/
│   ├── specs/menu-order.md
│   ├── steering/project.md
│   └── hooks/
├── frontend/
│   ├── src/
│   │   ├── pages/MenuPage.tsx
│   │   ├── pages/CartPage.tsx
│   │   ├── pages/AdminPage.tsx
│   │   └── pages/KitchenPage.tsx
└── backend/
    ├── routes/menu.js
    ├── routes/orders.js
    └── server.js

Claude Code에서는 파일을 하나씩 요청하거나 대화 흐름에서 자연스럽게 만들어지는 방식인데, Kiro는 Spec에서 도출된 전체 구조가 먼저 나왔어요. 각 파일엔 // TODO: 로 구현할 부분이 표시되어 있고 에이전트가 순서대로 채워나가는 흐름이었습니다.

4단계: Hooks — 좋았던 기능

Kiro의 Hooks 는 Claude Code에 없는 개념이에요. 파일 저장, 테스트 완료 같은 이벤트에 자동으로 실행될 작업을 정의할 수 있어요.

저는 이렇게 설정했어요:

# .kiro/hooks/lint-on-save.yaml
trigger:
  event: file_saved
  pattern: "**/*.tsx"
actions:
  - run: cd frontend && npx eslint src --fix

파일을 저장할 때마다 린트가 자동으로 돌았어요. Claude Code의 /loop가 주기적 실행이라면, Hooks는 이벤트 기반 자동화 예요. 개발 중 반복 작업이 줄어드는 게 체감됐습니다.

5단계: 구현 — 잘 된 것과 아쉬운 것

잘 됐던 부분

S3 이미지 업로드나 WebSocket 패턴처럼 제가 먼저 생각하지 않아도, Kiro가 Spec을 보고 "이런 경우엔 이 패턴이 맞다"고 알아서 골라 구현해줬어요. Claude Code에서는 "S3 Presigned URL 어떻게 쓰는지 알아봐줘" → "이 코드 여기 연결해줘" 식으로 몇 번 왔다 갔다 했을 텐데, Kiro는 Spec에 이미지 업로드가 명시되어 있으니 알아서 패턴을 선택했습니다.

아쉬웠던 부분

즉흥적인 수정에는 Claude Code가 훨씬 빨랐어요. "메뉴 카드 색깔 좀 바꿔줘", "이 버튼 위치 옮겨줘" 같은 사소한 요청을 Kiro에 하면 Spec 문서가 바뀌지 않았으니 컨텍스트를 다시 설명해야 하는 경우가 생겼어요. 작은 수정은 Claude Code가 훨씬 유연했습니다.

6단계: AWS Amplify 배포

배포는 생각보다 간단했어요. Kiro가 스캐폴딩할 때 amplify.yml을 이미 만들어뒀기 때문에 AWS 콘솔에서 레포를 연결하는 것만으로 끝났습니다.

최종 결과

Claude Code vs Kiro — 써보고 느낀 차이

어느 쪽이 낫다기보다, 빠른 실험이나 스크립트엔 Claude Code, 화면이 여러 개 얽히는 서비스엔 Kiro가 잘 맞는 것 같았어요. 다음엔 두 도구를 단계별로 섞어 쓰는 것도 시도해볼 생각입니다.

시행착오

도움이 필요한 부분

Spec을 얼마나 상세하게 써야 할까요? 너무 추상적으로 쓰면 나중에 수정이 많아지고, 너무 세세하게 쓰면 작성 자체에 시간이 오래 걸려요. Kiro Spec 작성에 나름의 기준을 만드신 분 계신가요?

Kiro Hooks 활용 패턴 린트 자동화 정도로만 써봤는데 더 잘 활용하는 방법이 궁금해요. 테스트 자동 실행이나 타입 체크 연결해보신 분의 경험이 궁금합니다.

앞으로의 계획

• 결제 연동 (토스페이먼츠 연결 시도)

• QR 코드 자동 생성 (테이블 번호별)

• Kiro + MCP 연동 탐구