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

Lab 01: 바이브 코딩과 코드 리뷰

목표

바이브 코딩으로 동작하는 퀴즈 앱을 몇 분 만에 만들고, /review·/cso로 그 앱을 전문가 관점에서 점검해 지적을 수집합니다. 지금은 고치지 않고 결과만 모읍니다.

개념: 바이브 코딩이란 (배경 이론)

AI가 일상이 되기까지, 그리고 코드까지

아침에 눈 뜨는 순간부터 밤까지 — 추천 피드, 번역, 검색 요약, 챗봇 상담. 이제 AI 없는 하루가 없습니다. 이 시대를 연 상징이 2022년 11월 ChatGPT입니다. 그전까지 AI는 연구실·전문가의 것이었는데, ChatGPT가 “누구나 말로 쓰는 AI”를 열었습니다.

그 확산 속도는 역사상 가장 빨랐습니다. 공개 후 5일 만에 100만 명, 2개월 만에 1억 명. “AI를 연구하는 시대”에서 “AI를 쓰는 시대”로 넘어온 분기점입니다.

그리고 그 AI가 이제 글·그림을 넘어 코드까지 만듭니다. 왜 코딩이 그다음이었을까요? AI가 어떤 영역을 잘하려면 ‘정답을 기계적으로 확인’할 수 있어야 하는데, 코드는 실행하면 바로 맞는지 나옵니다. 그래서 글·그림 다음으로 코딩이 빠르게 정복됐고, “말로 시켜 소프트웨어를 만드는” 일이 현실이 됐습니다. 오늘 여러분이 해볼 바이브 코딩이 바로 여기서 나왔습니다.

바이브 코딩이란

결과가 동작하는 모습만 보고 대화로 고쳐 나가며, 코드는 읽지 않는 방식입니다. AI가 코드를 쓰고, 사람은 결과만 검수합니다. 기존 코딩이 “사람이 쓰고 AI가 자동완성으로 거드는” 방식이었다면, 바이브 코딩은 주객이 바뀝니다.

이 표현은 2025년 2월 Andrej Karpathy(OpenAI 창립 멤버·前 Tesla AI 총괄)가 남긴 말에서 나왔습니다. “분위기(vibe)에 몸을 맡기고, 코드가 존재한다는 사실조차 잊는다.” 처음엔 농담처럼 받아들여졌지만 반년 만에 업계 표준어가 됐습니다. 그리고 이 “코드를 안 읽는다”가 오늘 오후 이야기의 핵심 복선이 됩니다.

왜 지금 가능해졌는가

두 가지 덕분입니다.

  • 코딩이 AI가 제일 잘하는 영역이 됐습니다. 학습 데이터에 코드가 방대하고, 무엇보다 실행해서 맞는지 기계적으로 확인할 수 있습니다(글쓰기는 정답 판정이 어렵습니다). 그래서 학습·개선이 가장 빠른 영역이 됐습니다.
  • 에이전트 루프가 붙었습니다. 예전 AI는 ‘답만’ 했습니다. 이제는 파일을 만들고 → 실행하고 → 에러를 읽고 → 고치고 → 다시 실행하는 반복을 사람 대신 자동으로 돕니다. 도구(파일·터미널)를 직접 씁니다. “대화 상대”에서 “일하는 존재”로 바뀐 것입니다.

세상은 이렇게 만든다

프로토타입·해커톤·1인 개발·비개발자의 도구 제작에서 바이브 코딩이 기본값이 되어 갑니다. 핵심은 “아이디어 → 동작 결과물까지의 거리가 무너졌다”는 것입니다. 말로 설명할 수 있으면 일단 만들어볼 수 있는 시대입니다.

오늘의 목적지 — 바이브에서 ‘구조’로

바이브 코딩은 강력한 시작점입니다. 그런데 이걸로 진짜 쓸 물건, 남과 같이 쓸 물건을 만들려 하면 반드시 ‘구조(스펙)‘로 나아가게 됩니다. 오늘은 바이브로 빠르게 시작해서, 왜 구조가 필요한지를 직접 겪고, 스펙 방식으로 넘어갑니다.

이 Lab에서는 일단 빠르게 만들어 봅니다. 완벽함이 아니라 동작하는 결과물이 목표입니다. “그래서 이게 충분한가, 왜 구조가 필요한가”는 Lab 02에서 직접 겪으며 답을 찾습니다.

전체 흐름

Step 1
바이브로 퀴즈 앱 생성
동작하지만 검증은 없다
Step 2
/review · /cso 리뷰
지적 8~12개 수집

만들기(Step 1)와 리뷰(Step 2), 두 단계를 거칩니다. 지적에 대한 해석과 수정은 Lab 02에서 합니다.

Step 1: 바이브 코딩으로 퀴즈 앱 만들기

1-1. 스타터 레포 준비

먼저 실습에 쓸 스타터 저장소를 내려받습니다. 터미널에서 아래를 실행한 뒤, quiz-app/1.starter 폴더를 Kiro로 엽니다. (이 폴더의 빈 index.html이 오늘의 출발점입니다.)

git clone https://github.com/nxtcloud-edu/nxt-kiro-agent-lv1.git
cd nxt-kiro-agent-lv1/quiz-app/1.starter

git clone이 안 되나요? git이 없거나 네트워크·사내망 때문에 막힐 수 있습니다. 그럴 땐 아래 ZIP을 받아 압축을 푼 뒤 nxt-kiro-agent-lv1/quiz-app/1.starter 폴더를 Kiro로 열면 똑같이 진행됩니다.

📦 스타터 레포 (ZIP) 다운로드

1-2. 대상 파일 지정 + 프롬프트 입력

먼저 입력창 하단에서 # 를 입력하고 #file 을 골라 index.html을 선택합니다. 그러면 메시지 위에 <> index.html 칩이 붙어, Kiro가 그 파일에 직접 작업하게 됩니다. (칩으로 지정하면 엉뚱한 위치에 새 파일을 만드는 일을 막을 수 있습니다.)

Kiro 입력창 상단에 <> index.html 칩이 붙고, 아래에 퀴즈 앱 생성 프롬프트가 입력된 화면
#로 index.html을 지정하면 메시지 위에 <> index.html 칩이 붙습니다.

이어서 아래 프롬프트를 통째로 한 번에 붙여넣고 전송합니다. 하나의 요구사항이라 나눠 보내면 안 됩니다.

이 폴더의 index.html 파일에 AWS 기초 개념 4지선다 퀴즈 웹앱을 만들어줘.
문항 5개를 직접 만들어서 포함하고, 보기를 고르면 정답 여부와 해설이 보이고,
점수가 집계되고, 새로고침해도 진행 상황이 유지되게 해줘.

1-3. 브라우저에서 확인

Kiro가 파일을 만들고 코드를 작성하는 과정을 지켜봅니다. 완료되면 만들어진 index.html을 브라우저로 열어 퀴즈를 직접 풀어 봅니다.

예상 결과:

  • ✅ 문항이 보이고, 보기를 고르면 정답/오답과 해설이 표시됨
  • ✅ 점수가 집계됨
  • ✅ 새로고침해도 진행 상황이 남아 있음
브라우저에서 실행한 AWS 기초 개념 퀴즈 앱 — 점수 표시, 문제 1/5, 4개 보기
바이브 코딩으로 만든 AWS 미니 퀴즈 앱. 문항·보기·점수·오답 노트가 한 화면에 나옵니다.

1-4. 기능 덧붙이기

이제 만든 앱에 아래 두 기능을 한 줄씩 추가합니다. 한 줄을 입력해 결과를 확인한 뒤, 다음 줄을 입력하세요.

틀린 문제만 다시 푸는 기능을 추가해줘
틀린 문제를 따로 스크랩해서 모아보는 기능을 추가해줘
퀴즈 결과 화면 — 점수 4/5, '전체 다시 풀기'와 '틀린 문제만 다시 풀기(1문제)' 버튼, 오답 노트 탭
두 기능을 추가하면 결과 화면에 틀린 문제만 다시 풀기 버튼과 오답 노트 탭이 생깁니다.
🎯 체크포인트
  • 바이브 코딩으로 동작하는 퀴즈 앱을 만들었다
  • 브라우저에서 문제 풀이·점수·새로고침 유지가 동작한다

Step 2: 코드 리뷰 받기 (/review · /cso)

“잘 돌아가던 내 앱”이 전문가 눈에는 어떻게 보이는지 결과만 모읍니다. 지금은 고치지 않습니다.

2-1. 코드 검토 (/review)

Kiro 채팅에 입력합니다. 잠시 뒤 코드 검토 리포트가 나옵니다. (대략 8~12개의 지적)

/review
/review 실행 결과 — 잘된 점, 문제점(심각도별), 권장 수정으로 정리된 코드 리뷰 리포트
/review는 잘된 점 · 문제점(심각도별) · 권장 수정으로 지적을 정리해 줍니다.

2-2. 보안 점검 (/cso)

이어서 입력합니다. 이번엔 보안 관점의 점검 결과가 나옵니다.

/cso

예상 결과: 순수 정적 앱이라 서버 공격 면적은 없지만, 프론트엔드 관점에서 몇 가지가 잡힙니다. 특히 화면 출력에 innerHTML을 쓴 부분이 XSS 위험(High) 으로 지적되어, 보통 7점대 점수가 나옵니다.

/cso 보안 감사 결과 1 — 전체 보안 점수 7.5/10, 위험(High) XSS via innerHTML, 주의(Medium) 항목/cso 보안 감사 결과 2 — 긍정적 보안 요소와 권장 보안 조치(innerHTML→textContent, try-catch 등)/cso 보안 감사 결과 3 — STRIDE 위협 모델 요약과 결론
/cso는 보안 점수 · 위험/주의/낮음 취약점 · 권장 조치 · STRIDE 위협 모델까지 정리해 줍니다.

2-3. 확인하기

나온 지적들을 천천히 읽어 봅니다. /review가 짚은 코드 품질 지적과 /cso가 짚은 보안 지적을 나눠서 살펴보세요.

같은 앱을 두 각도로 본 것입니다. /review는 코드 품질 전반을, /cso는 그중 보안 위험을 짚습니다. 둘 다 “구조 없이 빠르게 만들면” 쌓이는 것들입니다. Lab 02에서 구조를 세워 이 지적들이 실제로 줄어드는지 확인합니다.

🎯 체크포인트
  • /review로 코드 품질 지적 목록을 받았다
  • /cso로 보안 점검 결과를 확인했다

핵심 확인 포인트

#확인 항목상태
1바이브 코딩으로 동작하는 퀴즈 앱을 만들었다☐
2브라우저에서 정답·해설·점수·새로고침 유지가 동작한다☐
3/review로 코드 품질 지적을 받았다☐
4/cso로 보안 점검 결과를 확인했다☐
교육 포인트 정리

이 Lab에서 배운 것

  1. 바이브 코딩: 말로 설명하면 앱이 나오는 속도의 감각
  2. 에이전트 방식: AI가 파일을 만들고 실행하며 스스로 일한다
  3. 코드 리뷰: /review로 품질을, /cso로 보안을 점검한다
  4. 리뷰 지적 ≠ 보안 취약점: 둘은 다른 축의 문제다

아직 안 된 것 (다음 Lab에서 해결)

  • ❌ 지적이 왜 나왔는지 원인을 모른다
  • ❌ 지적을 줄이는 방법(구조)을 아직 안 썼다
트러블슈팅

생성 도중 에러가 남

→ 에러 메시지를 그대로 복사해 Kiro에 이 에러 고쳐줘와 함께 붙여넣습니다.

앱이 안 열림

→ 파일 위치를 Kiro에게 방금 만든 파일 어디에 있어? 미리보기 여는 법 알려줘라고 물어봅니다.

/review·/cso가 목록에 없음

→ 사전 준비의 GStack 확인(②)으로 돌아갑니다. Kiro 재시작이 대부분 해결합니다.

앱을 끝내 못 만들었다면

→ Step 1-1에서 받은 저장소의 quiz-app/2.vibe-coded 폴더에 완성 예시 앱이 있습니다. 그 index.html로 다음 단계를 이어갈 수 있습니다.

참고 자료