실전 사례: 홍보용 원페이지 만들기

음성이나 자막 없이 화면만 녹화된 15분짜리 실습 영상을 화면 캡처와 설명으로 재구성했습니다. “단어장 서비스를 홍보하는 홈페이지를 만들고 싶다”는 프롬프트 한 문장에서 시작해, 실제로 Node.js가 없거나 PowerShell 보안 정책에 막히는 등 진짜 문제를 만나고 Kiro와 함께 해결해가며 완성된 랜딩페이지까지 도달하는 과정입니다.

아래는 이 실습을 그대로 촬영한 원본 영상(약 15분)입니다. 먼저 전체 흐름을 한 번 보고, 그 아래 캡처 화면과 설명을 따라가며 과정을 확인하세요.

1. 프롬프트로 시작하기

Kiro 첫 화면에 이미 프롬프트가 입력되어 있습니다: “나는 내가 만든 단어장 서비스를 홍보하는 홈페이지를 만들어 보고 싶다.” 만들고 싶은 것을 이렇게 편하게 문장으로 적는 것이 바이브 코딩의 시작입니다.

2. Kiro의 확인 질문

프롬프트를 보내면 Kiro는 바로 코드를 쓰는 대신 서비스 이름, 주요 기능, 타겟 사용자, 원하는 분위기, 기술 스택 다섯 가지를 되묻습니다. 답하기 번거롭다면 “그냥 만들어줘”를 눌러 기본값으로 진행할 수도 있습니다.

3. 폴더가 필요하다는 안내

기본값 제안(Next.js로 그냥 만들어줘)을 누르자 Kiro는 파일을 생성하려면 먼저 작업할 폴더를 열어야 한다고 안내합니다. AI가 아무 곳에나 파일을 만드는 것이 아니라, 사용자가 지정한 프로젝트 폴더 안에서만 작업한다는 뜻입니다.

4. 새 프로젝트 폴더 만들기

탐색기에서 로컬 디스크(C:) 아래 새로 “Project” 폴더를 만들고 엽니다. 이 폴더가 곧 Word Quiz 홈페이지 프로젝트의 작업 공간이 됩니다.

5. 다시, 더 구체적인 프롬프트

폴더가 열리자 Kiro는 새 세션으로 다시 시작합니다. 이번에는 “나는 단어장 서비스를 홍보하는 홈페이지를 만들고 싶다. Next.js로 초안을 잡아줘. 서비스 이름은 Word Quiz 이다.”처럼 서비스 이름과 기술 스택까지 담아 더 구체적으로 요청합니다.

6. 명령 실행 승인 요청

Kiro가 터미널 명령(Get-Location)을 실행하기 전에 “Your approval is required to continue”라며 먼저 사용자의 허락을 구합니다. Allow를 눌러야 다음 단계로 넘어갑니다 — AI가 컴퓨터를 마음대로 조작하지 못하게 막는 안전장치입니다.

7. npx를 못 찾아 방식을 바꾸다

Next.js 프로젝트를 만들려고 npx create-next-app을 실행했지만 npx 명령을 찾지 못합니다. Kiro는 포기하는 대신 “직접 파일을 생성하는 방식으로 진행하겠습니다”라며 package.json부터 하나씩 직접 작성하는 쪽으로 전략을 바꿉니다.

8. 19개 파일 완성

몇 분 뒤 Kiro는 Navbar, Hero, Stats, Features, HowItWorks, Testimonials, Pricing, FAQ, CTA, Footer까지 총 19개 파일을 만들어 냅니다. 오른쪽 채팅에는 각 섹션이 어떤 내용을 담고 있는지 요약까지 정리되어 있습니다.

9. 직접 실행해야 하는 명령어 안내

Kiro는 npm 명령을 직접 실행할 수 없어서, 터미널에 순서대로 입력할 명령어(cd, npm install, npm run dev)를 알려줍니다. 사용자는 터미널에 그대로 복사해서 붙여넣기만 하면 됩니다.

10. npm을 찾을 수 없다는 오류

안내대로 npm install을 실행했지만 “npm 용어가... 인식되지 않습니다”라는 오류가 뜹니다. 이 컴퓨터에는 애초에 Node.js 자체가 설치되어 있지 않았던 것입니다. Kiro는 원인을 파악하고 설치 방법 두 가지(공식 인스톨러, winget)를 제시합니다.

11. winget으로 Node.js 설치

winget install OpenJS.NodeJS.LTS 명령으로 터미널에서 바로 Node.js를 설치합니다. 사용권 계약에 동의(Y)하면 다운로드와 설치가 자동으로 진행됩니다.

12. 이번엔 보안 정책 오류

Node.js는 설치됐지만(node --version 성공), npm --version을 실행하면 “이 시스템에서 스크립트를 실행할 수 없다”는 PowerShell 보안 오류가 또 나타납니다. 실제 개발 환경에서 흔히 만나는 종류의 문제입니다.

13. 실행 정책을 풀어 해결

Kiro가 알려준 대로 Set-ExecutionPolicy RemoteSigned -Scope CurrentUser 명령으로 정책을 풀자 npm --version이 정상 동작합니다. 이제 npm install이 문제없이 시작됩니다.

14. next.config.ts 오류

npm run dev를 실행하자 이번에는 “next.config.ts 방식은 지원되지 않는다”는 오류가 뜹니다. 파일을 만들 당시 Kiro가 가정했던 Next.js 버전과 실제 설치된 버전이 달라 생긴 문제입니다.

15. 사용자가 먼저 최신 버전을 확인하다

설정을 임시로 고치는 대신 사용자가 “nextjs 16이 최신 버전 같은데?”라고 되묻습니다. Kiro는 실제로 확인한 뒤 “맞습니다! Next.js 16.2가 최신 버전이네요”라며 16.2.10으로 업데이트합니다. AI의 말을 그대로 믿지 않고 되짚어보는 것도 바이브 코딩의 중요한 습관입니다.

16. 개발 서버 실행

npm run dev를 다시 실행하자 이번엔 성공적으로 Next.js 16.2.10 개발 서버가 http://localhost:3000 에서 열립니다.

17. 완성된 랜딩페이지 — 히어로

브라우저에서 localhost:3000에 접속하면 완성된 Word Quiz 홈페이지가 나타납니다. “단어 암기, 퀴즈로 더 빠르게”라는 헤드라인과 실제 퀴즈 화면을 흉내 낸 목업까지, 처음 프롬프트 한 문장에서 시작됐다고는 믿기 어려운 결과물입니다.

18. 통계와 핵심 기능 섹션

스크롤을 내리면 활성 사용자·학습된 단어 수 같은 통계 섹션과, “단어 학습을 더 스마트하게”로 시작하는 핵심 기능 섹션이 이어집니다.

19. FAQ와 마무리 CTA

더 내려가면 자주 묻는 질문(FAQ)과 “오늘부터 단어 암기가 달라집니다”라는 마지막 전환 유도 섹션까지 이어지며, 완전한 한 페이지짜리 랜딩페이지가 완성되어 있습니다.