바이브코딩 실습 2편 — 말로 만드는 미니앱: 메뉴 룰렛

오늘 만드는 건 룰렛이지만, 진짜 배우는 건 룰렛이 아니다. AI에게 말로 시키고, 확인하고, 말로 고치는 세 박자 리듬이다. 이 리듬이 손에 붙으면 뭐든 말로 만들 수 있게 된다.

이 글 3줄 요약

• 버튼을 누르면 점심 메뉴를 뽑아주는 웹앱을 AI에게 말로 시켜 만든다. 설치는 없다. 지난 실습에서 도구를 이미 다 깔았으니 오늘부터는 바로 말로 시키기만 한다.
• 만든 룰렛을 말로 세 번 고친다. 1회전은 디자인(색·모양), 2회전은 기능(메뉴 수·움직임), 3회전은 내 것으로(내 단골 메뉴). 오늘의 핵심은 룰렛이 아니라 이 고치는 대화다.
• 요청 → 확인 → 수정을 오늘 네 번 돌린다(처음 만들 때 1번 + 고치기 3번). 내 화면이 강사와 달라도 정상이다. AI는 매번 조금씩 다르게 만들고, 우리는 말로 내 쪽으로 맞춰간다.

이 글은 AI 바이브코딩 실습 시리즈(전 9편)의 2편이다. 이론이 아니라 손으로 직접 만들어보는 실습 트랙이다. 아직 실습 1편에서 Claude Code 설치와 로그인을 끝내지 않았다면 먼저 하고 오는 걸 권한다. 이 실습은 그게 끝나 있다는 전제에서 시작한다. 개념이 더 궁금하면 짝이 되는 이론 2편에서 터미널과 명령어의 정체를, 이론 10편에서 Claude Code 같은 도구가 어떤 판 위에 있는지를 다룬다. 이번 편의 목표는 단 하나다. AI에게 말로 시켜서 진짜 웹앱 하나를 완성하고, 그걸 말로 고치는 감각을 몸에 새기는 것이다.

오늘 만드는 것 — 버튼 누르면 메뉴를 뽑는 룰렛

먼저 완성물부터 보자. "돌리기" 버튼을 누르면 메뉴가 룰렛처럼 돌다가 하나로 딱 멈추는 웹앱이다. 오늘 점심 뭐 먹지 하는 고민을 대신 해주는 진짜 앱이다. 화면 가운데에 뽑힌 메뉴가 크게 뜨고, 그 아래 "돌리기" 버튼이 하나 있는 단순한 구조다.

그런데 여기서 멈추지 않는다. 이걸 말로 세 번 고친다. 색을 바꾸고, 메뉴를 늘리고, 내 단골 메뉴로 교체한다. 이 고치는 대화가 오늘의 핵심이다. 룰렛을 만드는 건 10분이면 끝나지만, 말로 고치는 세 번이 오늘의 진짜 수업이다. 왜냐하면 앞으로 뭘 만들든 여러분이 실제로 하게 될 일이 바로 이 만들고 고치기의 반복이기 때문이다.

오늘의 지도를 한 줄로 그리면 이렇다. 새 폴더 → 말로 시키기 → 확인 → 말로 3번 고치기. 요청 → 확인 → 수정, 이 세 박자를 오늘 네 번 돌린다(처음 만들 때 1번, 고치기 3번). 이 리듬이 손에 붙으면 뭐든 말로 만들 수 있게 된다. 그게 바이브코딩이다.

준비물 — 실습 1편을 끝냈다면 준비 끝

오늘은 설치가 없다. 이게 이번 실습의 반가운 점이다. 필요한 건 세 가지뿐이고, 대부분 지난 실습에서 이미 갖췄다.

• 실습 1편 완료(필수). Claude Code 설치와 로그인이 끝나 있어야 한다. 지난 시간에 자기소개 페이지를 띄워봤다면 통과다.
• 크롬 브라우저. 만든 룰렛을 여기서 확인한다. 실습 1편에서 쓰던 그 크롬 그대로면 된다.
• 시간 40분. 만들기 10분에 말로 고치기 3번이 오늘의 진짜 수업이다. 천천히 따라오면 된다. 한 번에 완결되는 분량이다.

실습 1편에서 도구는 이미 다 깔았으니, 오늘부터는 바로 말로 시키기만 한다. 이게 앞으로 매번 하게 될 진짜 작업이다. 설치 과정 없이 곧장 AI에게 주문을 넣는 것, 그 감각을 오늘 처음 제대로 맛보게 된다.

STEP 1 — 새 폴더 만들고 claude 실행

터미널을 열고 아래 세 줄을 한 줄씩 복사해서 Enter를 친다. 폴더를 만들고, 그 안으로 들어가고, AI를 켜는 순서다.

mkdir menu-roulette
cd menu-roulette
claude

첫 줄 mkdir menu-roulette는 룰렛 전용 폴더를 새로 만든다. 둘째 줄 cd menu-roulette는 그 폴더 안으로 들어간다. 셋째 줄 claude는 그 폴더 안에서 AI를 켠다.

왜 새 폴더부터 만드나. 프로젝트마다 책상을 따로 쓰기 위해서다. 지난번 자기소개 페이지와 오늘 룰렛이 한 책상에 섞이면 AI도 나도 헷갈린다. "이건 룰렛 책상"이라고 딱 정해주는 것이다. 그래야 나중에 파일을 찾거나 되돌릴 때도 안 꼬인다.

체크포인트. 프롬프트가 ...\menu-roulette> 로 바뀌고, claude 실행 후 환영 화면과 함께 > 입력칸이 뜨면 준비 완료다. 이 상태면 이제 AI에게 말을 걸 수 있다.

STEP 2 — 첫 프롬프트: 기능 + 느낌 + 파일명

이제 > 입력칸에 원하는 걸 문장으로 적는다. 아래를 복사해 붙여넣고 Enter를 친다.

점심 메뉴 룰렛 웹페이지를 만들어줘. 버튼을 누르면 메뉴 5개 중 하나가 룰렛 돌아가는 느낌으로 뽑혀. 파일명 index.html.

AI가 "파일을 만들어도 될까요?"라고 물으면 Yes(허락)를 고른다. 내 폴더 안에서 하는 일이라 안전하다.

왜 이렇게 길게 말하나. 이 주문 한 문장에 세 가지를 담았다. ① 기능(버튼 누르면 하나 뽑기), ② 느낌(룰렛 돌아가는 느낌), ③ 파일명(index.html). AI는 말한 만큼만 만든다. 원하는 그림을 구체적으로 그려줄수록 결과가 내 머릿속에 가까워진다. 대충 시키면 대충 나오고, 구체적으로 시키면 구체적으로 나온다. 이게 프롬프트의 첫 원칙이다.

체크포인트. AI가 파일을 만든 뒤 "index.html을 만들었어요" 같은 완료 메시지와 함께 다시 > 입력칸으로 돌아오면 성공이다. 아직 화면에 뜬 건 아니다. 다음 단계에서 눈으로 확인한다.

STEP 3 — 결과 확인: 더블클릭 한 번

만든 룰렛을 브라우저에 띄워 눈으로 확인할 차례다. 두 단계면 끝난다.

• 파일 탐색기로 menu-roulette 폴더를 연다. 지난번 그 문서 폴더 안에 있다.
• 그 안의 index.html을 더블클릭한다. 크롬이 열리며 내 룰렛이 뜬다.

서버도 없는데 어떻게 뜨나. 브라우저는 원래 파일을 읽는 프로그램이다. index.html은 웹페이지 문서라서, 더블클릭은 "크롬아 이 문서 열어줘" 하는 것과 같다. 인터넷 연결도, 복잡한 실행도 필요 없다. 사진 파일을 더블클릭하면 사진 뷰어가 열리는 것과 똑같은 원리다.

체크포인트. 크롬에 룰렛 페이지와 버튼이 보이고, 버튼을 눌렀을 때 메뉴가 뽑히면 완성이다.

만약 흰 화면만 뜬다면 두 가지를 확인한다. 먼저 새로고침(F5)을 한 번 눌러본다. 그래도 안 되면 혹시 다른 파일을 연 건 아닌지, 주소창 끝이 index.html로 끝나는지 확인한다.

STEP 4 — 말로 고치기 1회전: 디자인

여기부터가 오늘의 진짜 수업이다. 이제 만든 룰렛을 말로 고친다. 첫 회전은 색과 모양이다. 터미널의 > 뒤에 아래를 붙여넣고 Enter를 친다.

배경을 어두운 남색으로, 버튼은 크고 둥글게 바꿔줘.

다 되면 브라우저로 가서 새로고침(F5)을 누른다. 색이 바뀌어 있다.

새로 만드는 게 아닌가. 아니다. 수정은 새 명령이 아니라 이어지는 대화다. AI는 방금 만든 룰렛을 기억하고 있어서, "그거 배경 바꿔줘" 한마디면 알아듣는다. 친구에게 "아까 그거 색만 바꿔줘" 하는 것과 똑같다. 파일명을 다시 말할 필요도, 뭘 만들었는지 다시 설명할 필요도 없다.

체크포인트. 새로고침했을 때 배경이 남색으로, 버튼이 둥글게 바뀌어 있으면 1회전 완료다.

STEP 5 — 말로 고치기 2회전: 기능

이번엔 보이는 것 말고 동작을 바꾼다. 같은 자리에 아래를 붙여넣고 Enter, 그리고 브라우저 새로고침이다.

메뉴를 10개로 늘리고, 뽑힌 메뉴가 3초간 반짝이게 해줘.

이번엔 메뉴 수(내용)와 반짝임(움직임)이 바뀐다. 색만 바꾸던 1회전과 달리, 앱이 하는 일 자체가 달라진다.

왜 한 번에 하나씩 시키나. 색·기능·글자를 한 문장에 몰아넣으면 AI도 놓치고, 결과가 이상해도 어디서 틀렸는지 찾기 어렵다. "한 번에 하나씩 고치고 바로 확인"이 왕초보에게 제일 안전하다. 마음에 안 들면 그 부분만 다시 말하면 된다. 한꺼번에 다섯 개를 시켜 뒤죽박죽이 되는 것보다, 하나씩 시켜 매번 확인하는 게 결국 더 빠르다.

체크포인트. 메뉴가 10개로 늘고, 당첨된 메뉴가 잠깐 반짝이면 2회전 완료다.

STEP 6 — 말로 고치기 3회전: 내 것으로

마지막 회전이다. 남의 예시를 내 룰렛으로 바꾼다. 아래를 붙여넣되, 메뉴 이름은 여러분 걸로 바꿔서 시킨다. 우리 동네 맛집이든 자주 먹는 것이든 뭐든 좋다.

메뉴를 내 단골 메뉴로 바꿔줘: 국밥, 냉면, 제육덮밥, 마라탕, 순대국, 돈까스.

붙여넣고 Enter, 그리고 새로고침이다.

이 3회전이 왜 오늘의 핵심인가. 여기서 룰렛은 완전히 내 것이 됐다. 처음 예시에서 시작해 말로 조금씩 내 쪽으로 끌어온 것, 이 요청 → 확인 → 수정을 반복하는 감각이 바로 바이브코딩의 전부다. 오늘 배운 게 룰렛 만드는 법이라고 생각하기 쉽지만, 진짜로 배운 건 남이 만든 출발점을 내 것으로 조율해가는 이 리듬이다.

체크포인트. 룰렛에 내가 정한 메뉴들이 뜨고 그중에서 뽑히면, 세상에 하나뿐인 내 앱이 완성된 것이다.

가장 중요한 감각 — 내 화면이 강사와 달라도 정상

여기서 오늘 가장 중요한 이야기를 하나 하겠다. 버튼 색이 조금 다르고, 룰렛 도는 모양이 다르고, 글자 위치가 달라도 전부 정상이다. AI는 매번 조금씩 다르게 만든다. 똑같이 안 나오는 게 오히려 당연하다.

"어? 강사님 버튼은 파란데 내 건 초록이네" 하는 생각이 들어도 틀린 게 아니다. AI가 그때그때 다르게 고른 것뿐이다. 색이 마음에 안 들면 그냥 "버튼을 파란색으로 바꿔줘" 하면 된다. 결과는 말로 맞춰가는 것이지 복사하는 게 아니다.

중요한 건 "강사랑 똑같이"가 아니라 "내가 원하는 모습으로 말해서 맞춰가는 것"이다. 마음에 안 드는 부분이 있으면 그냥 말로 고치면 된다. 그게 오늘 배운 전부다. 이 감각을 놓치면 매번 강사 화면과 픽셀 단위로 비교하며 스트레스받게 되고, 이 감각을 잡으면 어떤 결과가 나와도 "그럼 이렇게 바꿔줘" 하고 편하게 나아갈 수 있다.

골라서 더 해보기

룰렛의 구조는 딱 하나다. 여러 항목 중 버튼을 누르면 하나가 뽑힌다. 그래서 뽑을 항목만 바꾸면 완전히 다른 앱이 된다. 아래는 전부 오늘 만든 룰렛과 똑같은 구조이고, 전부 index.html 더블클릭이면 뜨는 난이도다. 마음에 드는 걸 골라 프롬프트를 복사해 시켜보자.

저녁 메뉴 룰렛 — 퇴근길 저녁 고민을 대신 해준다.

저녁 메뉴 룰렛 웹페이지를 만들어줘. 버튼 누르면 메뉴 8개 중 하나가 룰렛처럼 뽑혀. 배경은 어두운 보라색, 파일명 index.html.

주말 데이트 코스 뽑기 — 뭐 하고 놀지 코스를 정해준다.

주말 데이트 코스를 뽑아주는 웹페이지 만들어줘. 버튼 누르면 코스 하나가 룰렛처럼 뽑혀. 파스텔 핑크톤, 파일명 index.html.

청소 당번 뽑기 — 이름 넣고 버튼 누르면 오늘 당번이 결정된다.

청소 당번을 뽑아주는 웹페이지 만들어줘. 이름 5명 중 버튼 누르면 한 명이 룰렛처럼 뽑혀. 파일명 index.html.

오늘 운동 부위 뽑기 — 헬스장에서 오늘 어디 할지 정해준다.

오늘 운동할 부위를 뽑아주는 웹페이지 만들어줘. 가슴·등·하체·어깨·팔 중 버튼 누르면 하나가 룰렛처럼 뽑혀. 어두운 초록톤, 파일명 index.html.

오늘 볼 영화 장르 뽑기 — 뭘 볼지 못 정할 때 장르를 대신 뽑아준다.

오늘 볼 영화 장르를 뽑아주는 웹페이지 만들어줘. 액션·코미디·스릴러·로맨스·SF·공포 중 버튼 누르면 하나가 룰렛처럼 뽑혀. 어두운 극장 느낌, 파일명 index.html.

다섯 개 모두 뽑을 항목만 다를 뿐 오늘 배운 요청 → 확인 → 수정을 그대로 쓴다. 하나 만들어보면 나머지도 다 만들 수 있다.

막혔을 때 — 자주 나는 3가지

실습 중 흔히 만나는 상황 세 가지다. 나와도 놀라지 말고 아래대로 대처하면 된다.

대원칙은 하나다. 뭐가 안 되면 혼자 고민하지 말고 AI에게 그대로 물어본다. 에러를 되돌려주는 법은 이론 트랙의 이론 10편까지 이어지는 흐름에서 더 깊이 다루지만, 지금 당장은 "이상하면 그대로 복사해서 AI에게 던진다" 이 한 줄이면 충분하다.

오늘 배운 것 — 진짜 수확은 룰렛이 아니라 리듬

오늘 손에 넣은 건 룰렛 하나가 아니라 네 가지 감각이다.

오늘 한 말로 시키고 고치기는 이론 2편에서 다룬 터미널과 명령어 위에서 벌어진 일이고, Claude Code 같은 도구가 어떤 생태계 안에 있는지는 이론 10편에서 짚는다. 실습으로 감을 잡은 뒤 이론으로 원리를 채우면 이해가 훨씬 단단해진다.

숙제는 없다. 단, 오늘 만든 룰렛의 메뉴를 한 번 더 바꿔보거나 색을 한 번 더 고쳐보면 오늘은 성공이다. 요청 → 확인 → 수정, 이 세 박자를 한 번이라도 더 돌려보는 게 다음 편으로 가는 가장 좋은 준비다.

다음 편에서는 오늘 만든 룰렛을 일부러 망가뜨린 뒤, 한 방에 되돌리는 안전벨트를 배운다. 망쳐도 되돌릴 수 있다는 자신감이 생기면 훨씬 과감하게 시킬 수 있게 된다.

다음 편 — 바이브코딩 실습 3편