NxtCloud NxtCloud Workshop / 키로 AI 중급: 구조적 AI개발
로그인

Lab 04: 배포와 확장 (심화·선택)

목표

완성한 정적 앱을 S3 정적 웹사이트 호스팅으로 배포해 누구나 접속할 수 있게 합니다.

⚠️ 심화·선택 과정 — 이 단계는 AWS 계정이 필요합니다. 계정이 없다면 강사 시연을 참고하세요.

정적 호스팅과 S3 (개념)

Amazon S3란

Amazon S3(Simple Storage Service) 는 AWS의 객체 스토리지 서비스입니다. 파일을 ‘객체’로 저장하고, ‘버킷’이라는 최상위 공간에 담습니다. 용량을 미리 준비할 필요 없이 파일을 올리고, URL로 어디서든 꺼내 쓸 수 있습니다.

  • 버킷(Bucket) — 파일을 담는 최상위 공간입니다. 이름은 전 세계에서 유일해야 합니다.
  • 객체(Object) — 버킷에 저장되는 파일 하나하나입니다. (파일 내용 + 메타데이터)

정적 웹사이트 호스팅

우리 퀴즈 앱은 서버 없이 index.html·style.css·app.js만으로 도는 정적 앱입니다. S3에서 “정적 웹사이트 호스팅”을 켜면, EC2 같은 서버 없이 S3가 직접 이 파일들을 웹페이지로 제공합니다. 인덱스 문서(index.html)만 지정하면 됩니다.

구분정적 앱 (S3)동적 앱 (서버 필요)
요청 처리미리 만든 파일을 그대로 전송서버가 요청마다 페이지 생성
예퀴즈 앱, 소개 페이지, 문서 사이트로그인·DB 연동 서비스
필요한 것S3 버킷EC2/Lambda + 서버 코드

정적 앱은 서버를 관리할 필요가 없어 저렴하고, 트래픽이 몰려도 자동으로 확장되며, 잘 죽지 않습니다. 그래서 우리 퀴즈 앱 같은 앱에는 S3가 가장 간단한 배포처입니다.

전체 흐름

Step 1
S3 버킷 + 정적 호스팅
올릴 자리 마련
Step 2
앱 파일 업로드
파일 배치
Step 3
공개 URL 접속 확인
남이 접속 가능

Step 1: S3 버킷 만들고 정적 호스팅 켜기

AWS에서 S3 버킷을 만들고 정적 웹사이트 호스팅을 켭니다. 절차가 헷갈리면 Kiro에게 아래처럼 물어봅니다. Lab 03에서 연결한 MCP를 그대로 씁니다.

AWS 공식 문서를 근거로 S3 정적 웹사이트 호스팅 설정 방법을 알려줘.
S3 정적 웹사이트 호스팅 설정 안내 1 — 버킷 생성, 정적 웹사이트 호스팅 활성화S3 정적 웹사이트 호스팅 설정 안내 2 — 퍼블릭 액세스 차단 해제, 버킷 정책, 콘텐츠 업로드, 엔드포인트 형식S3 정적 웹사이트 호스팅 설정 안내 3 — 리전별 엔드포인트 형식과 AWS 공식 문서 출처
MCP로 연결된 AWS 공식 문서를 근거로, Kiro가 버킷 생성 → 호스팅 활성화 → 퍼블릭 접근 → 버킷 정책 → 업로드까지 순서대로 안내합니다.
🎯 체크포인트
  • S3 버킷을 만들고 정적 웹사이트 호스팅을 켰다

Step 2: Kiro에게 S3 배포 맡기기

버킷 생성 → 퍼블릭 접근 → 호스팅 활성화 → 업로드를 손으로 하나씩 하는 대신, 폴더째 Kiro에게 맡길 수 있습니다. 입력창에서 #folder 로 4.fact-errors 를 선택한 뒤, 아래처럼 지시합니다.

폴더를 aws s3로 정적 웹사이트 호스팅해줘

그러면 Kiro가 AWS CLI로 버킷 생성 → 퍼블릭 접근 허용 → 정적 웹사이트 호스팅 활성화 → 파일 업로드를 한 번에 진행합니다. (버킷 이름·리전은 Kiro가 제안하며, 원하면 바꿔 달라고 하면 됩니다.)

⚠️ 이 방법은 AWS 액세스 키가 필요합니다. Kiro가 AWS CLI로 실제 배포를 하려면, 로컬에 AWS 자격 증명(액세스 키)이 aws configure로 설정돼 있어야 합니다. 액세스 키가 없다면 Step 1의 콘솔 방법으로 직접 진행하세요.

Kiro가 4.fact-errors 폴더를 AWS CLI로 S3 정적 웹사이트 호스팅하는 과정 — 버킷 이름·리전·퍼블릭 접근을 확인하는 화면
#folder로 지정한 폴더를 Kiro가 CLI로 배포합니다. 버킷 이름·리전·퍼블릭 접근을 먼저 확인하고 진행합니다.

버킷 이름·리전을 정해 주면 Kiro가 나머지를 알아서 진행하고, 끝나면 접속 URL과 배포 요약을 보여줍니다.

Kiro의 S3 배포 완료 화면 — 웹사이트 URL과 배포 요약(버킷 생성·Block Public Access 해제·버킷 정책·호스팅·업로드·엔드포인트 접속 전부 완료)
배포가 끝나면 접속 URL(예: http://<버킷>.s3-website-us-east-1.amazonaws.com/)과 단계별 완료 요약이 나옵니다.
🎯 체크포인트
  • #folder로 4.fact-errors를 지정해 S3 배포를 지시했다
  • Kiro가 버킷 생성·퍼블릭 접근·호스팅·업로드를 진행했다
  • 배포 완료 후 접속 URL을 받았다

Step 3: 공개 URL 접속 확인

공개 URL로 접속해 실제로 퀴즈가 열리는지 확인합니다. 휴대폰으로도 접속해 봅니다.

예상 결과: 공개 URL에서 퀴즈 앱이 열리고, 다른 기기에서도 접속됩니다.

왜? 배포 방법조차 AWS 공식 문서(MCP)에 물어가며 진행할 수 있습니다. 오늘 배운 도구로 오늘 끝내는 셈입니다.

🎯 체크포인트
  • 공개 URL로 앱에 접속했다
  • 다른 기기(휴대폰 등)에서도 접속을 확인했다
도전 과제 — 미니 풀사이클 챌린지 (Options)

오늘 배운 5가지(Spec · 구현 · /review · MCP · Hook)를 새 기능 하나에 전부 한 번씩 적용해 봅니다. 오늘 배운 게 따로 노는 도구가 아니라 하나의 작업 흐름이었다는 게 확실해집니다.

  1. 추가할 기능을 하나 고릅니다 (작게). 예: “오답만 모아 다시 푸는 화면”, “주제를 골라 그 주제 문제만 풀기”, “점수 이력을 그래프로 보기”.
  2. Spec → 구현 순서로 시킵니다.
이 앱에 "○○○" 기능을 추가할 거야. 먼저 요구사항을 spec에 반영해줘. 코드는 아직 만들지 마.
→ (명세 확인 후) 규칙을 지켜 구현해줘.
  1. /review로 점검합니다. 규칙을 지켜 만들었으니 지적이 적게 나와야 정상입니다.
  2. 저장해서 Hook이 자동 검사를 통과하는지 봅니다. 문항과 관련된 기능이면 MCP로 사실 검증까지 이어서 합니다.

완주가 어려우면 /review까지만 해도 충분합니다. 흐름을 한 번 겪는 것이 목적입니다.

🎯 체크포인트
  • 새 기능 하나로 풀사이클(기획→구현→검토→검증)을 한 바퀴 돌았다

마무리 — 오늘 배운 것

여러분은 “빠르게 만들기(바이브) → 문제를 겪기(리뷰) → 원인을 이해하기 → 구조로 다시 만들기 → 사실 검증 → 자동화”의 한 바퀴를 직접 돌았습니다. 도구(Kiro·GStack·MCP)는 앞으로 바뀌더라도, 오늘 몸에 익힌 습관 하나는 남습니다.

먼저 규칙과 명세로 구조를 세우고, 결과를 검증한다.

전체 과정 되돌아보기

🎯 전체 체크리스트
  • 바이브 코딩으로 동작하는 퀴즈 앱을 만들었다
  • /review·/cso로 리뷰 결과를 받아 보았다
  • 지적이 왜 나오는지(확률 생성 · 구조의 필요) 이해했다
  • Steering·Spec을 만들고, v1 대비 v2의 지적이 줄어든 것을 확인했다
  • MCP로 문항의 사실 오류를 검증·수정했다
  • 저장 시 자동 검사(Hook)가 도는 것을 확인했다
  • (선택) 앱을 S3에 배포해 접속해 보았다

참고 자료