바이브코딩이란? 바이브코딩 직접 해봤다 - 행사 체크인 페이지를 30분 만에 만든 이야기

 

 

 

IT 트렌드 · AI 활용 · 바이브 코딩 시리즈 2편

바이브 코딩 직접 해봤다
— 행사 체크인 페이지를 30분 만에 만든 이야기

말로만 들었던 바이브 코딩을 실제로 써봤다.
코딩 경험 제로. 결과는 생각보다 훨씬 쓸 만했다.

2026. 03. 24  |  읽는 시간 약 6분

📌 이전 글: 바이브 코딩이란? 코딩 몰라도 앱 만드는 시대가 왔다 — 1편을 먼저 읽고 오시면 더 자연스럽게 이어집니다.

시작하기 전 1편을 올리고 나서 생각했다. "직접 해보지도 않고 글을 썼구나."

마침 다음 달 행사 준비를 하면서 늘 불편했던 게 있었다. 참가자 체크인. 매번 엑셀 파일 출력해서 이름 찾고, 형광펜으로 줄 긋고, 나중엔 종이가 구겨져서 알아보기도 힘들었다.

"이거, 바이브 코딩으로 만들어보면 어떨까."

그래서 해봤다. 코딩 경험은 여전히 제로인 채로.

결론부터 말하면, 30분 만에 실제로 작동하는 체크인 페이지가 만들어졌다. 완벽하진 않았지만, 현장에서 충분히 쓸 수 있는 수준이었다. 그 과정을 그대로 옮겨본다.

---

01먼저 뭘 만들지 구체적으로 정했다

1편에서 강조했던 것처럼, AI에게 "그냥 만들어줘"라고 하면 안 된다. 내가 원하는 것을 먼저 종이에 적었다.

내가 원했던 것 · 참가자 이름을 검색하면 바로 찾을 수 있을 것
· 체크인 버튼을 누르면 체크 표시가 생길 것
· 전체 몇 명 중 몇 명이 왔는지 숫자로 보일 것
· 스마트폰에서도 잘 보일 것
· 스태프 누구든 링크만 받으면 바로 쓸 수 있을 것

이렇게 정리하고 나니 AI에게 할 말이 자연스럽게 정해졌다. 막막했던 것이 이 단계에서 절반은 해결된 느낌이었다.

---

02실제로 입력한 말과 결과

도구는 Claude.ai를 썼다. 브라우저에서 바로 열고, 이렇게 입력했다.

내가 입력한 첫 번째 요청

행사 당일 스태프가 태블릿이나 스마트폰으로 사용할 참가자 체크인 페이지를 만들어줘.

기능은 세 가지야.
첫째, 이름을 검색하면 명단에서 바로 찾아줄 것.
둘째, 이름 옆에 '체크인' 버튼이 있고, 누르면 완료 표시가 생길 것.
셋째, 상단에 전체 참가자 수와 현재까지 체크인한 수가 보일 것.

디자인은 깔끔하게, 글씨는 크게, 모바일에서도 잘 보이게 해줘.
참가자 명단은 내가 나중에 직접 수정할 수 있게 코드 안에 넣어줘.

AI의 반응 약 10초 뒤, 실제로 작동하는 HTML 코드가 생성됐다. 화면 오른쪽 미리보기 창에 체크인 페이지가 바로 떴다. 검색창, 참가자 목록, 체크인 버튼, 상단 집계 숫자까지 — 요청한 것이 그대로 나왔다.

솔직히 이 순간 잠깐 멈췄다. "이게 진짜 되는구나." 코드가 어떻게 생겼는지는 전혀 몰랐지만, 화면에서 직접 이름을 검색하고 버튼을 눌러보니 실제로 작동했다.

---

03부족한 부분은 대화로 채웠다

첫 결과물이 완벽하지는 않았다. 두 가지가 마음에 걸렸다. 하나는 체크인을 취소하는 버튼이 없었고, 다른 하나는 명단이 너무 빽빽해 보였다. 이것도 말로 해결했다.

• 1
  체크인 취소 기능 추가 "체크인 완료된 사람 옆에 '취소' 버튼도 추가해줘. 실수로 눌렀을 때 되돌릴 수 있게."
• 2
  간격과 가독성 개선 "각 참가자 항목 사이 간격을 좀 더 넓게 해줘. 태블릿 손가락으로 누를 때 실수 없도록."
• 3
  체크인 완료자 시각적 구분 "체크인 완료된 사람은 배경색을 연한 초록색으로 바꿔줘. 한눈에 구분되게."

각 요청마다 AI가 수정된 버전을 바로 내줬다. 마치 옆에 개발자가 앉아서 실시간으로 고쳐주는 것 같았다. 세 번의 추가 요청까지 포함해서 총 소요 시간은 28분.

✅ 최종 완성된 기능 · 이름 실시간 검색
· 체크인 / 체크인 취소 버튼
· 완료자 초록 배경 표시
· 상단 집계 (전체 50명 중 32명 체크인 완료)
· 모바일·태블릿 최적화
· 참가자 명단 직접 수정 가능

---

04실제 행사에서 써보니

행사 당일 스태프한테 링크 하나 카카오톡으로 보냈다. 별도 설명 없이 "이거 쓰면 돼요"라고만 했다.

10초 만에 "오, 이거 편하네요"라는 답장이 왔다.

행사 내내 종이 명단을 꺼낼 일이 없었다. 참가자가 오면 이름 두 글자 치고, 버튼 한 번 누르면 끝이었다. 마지막에 "50명 중 47명 체크인"이라는 숫자가 화면에 떠 있었다. 예전 같았으면 형광펜 칠한 종이를 손으로 세어야 했을 일이었다.

물론 아쉬운 점도 있었다. 페이지를 새로고침하면 체크인 데이터가 초기화됐다. 행사 중간에 실수로 새로고침을 눌렀다가 잠깐 당황하기도 했다. 데이터를 저장하는 기능은 이번 버전엔 없었던 것이다.

💡 이런 점은 미리 알고 시작하자 바이브 코딩으로 만든 기본 HTML 페이지는 새로고침 시 데이터가 사라진다. 행사 현장에서 쓸 때는 새로고침을 하지 않도록 스태프에게 미리 안내하거나, AI에게 "데이터가 저장되게 해줘"라고 추가 요청해두는 것이 좋다.

---

05해보고 나서 바뀐 생각

바이브 코딩을 직접 써보기 전까지 나는 두 가지를 잘못 생각하고 있었다.

첫째, "AI가 만들어주는 건 어딘가 허술할 것"이라는 선입견이 있었다. 직접 해보니 달랐다. 기본 기능만큼은 실제로 현장에서 쓸 수 있는 수준이었다. 완벽하지 않았지만, 충분했다.

둘째, "말로 설명하는 게 어려울 것"이라는 막연한 불안감이 있었다. 이것도 달랐다. 오히려 내가 원하는 것을 미리 종이에 적어두는 준비 단계가 훨씬 중요했다. AI에게 전달하는 것 자체는 어렵지 않았다.

바이브 코딩을 써보고 달라진 생각 "AI가 만들어준다"는 것은 맞지만, 정확히는 "내가 방향을 정하고, AI가 만드는 것"에 가깝다. 방향을 잘 정할수록 결과물이 좋아진다. 결국 이 과정에서 중요한 건 코딩 실력이 아니라 내가 무엇을 원하는지 명확히 아는 것이다.

---

이번 편 요약

코딩 경험 제로로 행사 체크인 페이지를 28분 만에 만들었다.

핵심은 AI에게 말하기 전, 내가 원하는 것을 먼저 구체적으로 정리하는 것이었다.

처음부터 완벽할 필요 없다. 일단 만들고, 부족한 부분은 대화로 채워나가면 된다. 그 과정 자체가 바이브 코딩이다.

#바이브코딩 #바이브코딩후기 #AI활용 #비개발자코딩 #행사운영 #체크인페이지 #Claude활용 #직장인AI