『어쨌든, 바이브 코딩』읽고 실습하기: 시립 배드민턴장 예약 앱 만들기

soleil_lucy·4일 전

『어쨌든, 바이브 코딩』을 읽게 된 이유

2026년 초에 '하네스 엔지니어링'이라는 개념이 등장하고, SNS에서는 『어쨌든, 에이전틱 코딩』을 읽어보면 좋다는 이야기를 들었다. 그래서 홀린 듯 온라인 서점에 들어갔다.

책을 찾아보다 『어쨌든, 바이브 코딩』도 시리즈로 묶여 있다는 걸 알았다. 에이전틱 코딩을 배우기 전에 바이브 코딩부터 읽는 편이 낫지 않을까 싶었다. 시리즈는 앞권부터 읽어야 마음이 편한 성격이라 두 권을 장바구니에 담아 바로 구매했다.

그런데 책을 사고도 한동안 펼쳐보지 않았다. 게으름과 무기력함에 시간을 흘려보내며 잠시 방황하던 때였다. 책장에 꽂혀 있던 책을 꺼내 든 건 2026년이 100일도 채 남지 않은 지금이다. 올해 안에 뭐라도 해보고 싶어, 우선 예전에 사둔 책부터 읽어보자는 생각이 들었다.

사실 ChatGPT, Claude, Gemini의 유료 요금제를 써봤고, AI 코딩 에이전트로 코드를 직접 작성하지 않은 채 모바일 청첩장과 레시피 웹 서비스를 만들어본 경험도 있다. 그래서 책 내용이 아주 새롭게 느껴지지는 않을 수 있겠다고 생각했다. 출간된 지도 시간이 꽤 흘러 지금의 AI 모델이나 도구를 사용하는 방식과는 차이가 있을 수도 있다.

그래도 프롬프트를 어떻게 작성하는지, 프롬프트로 아이디어를 프로토타입으로 구현하는 과정을 다시 살펴보고 싶었다. 그렇게 미뤄뒀던 『어쨌든, 바이브 코딩』을 읽기 시작했다.

1장부터 10장까지 읽고 얻은 인사이트

읽으며 기억해두고 싶은 내용을 정리했다.

코드를 떠올리기보다 사용자의 행동을 생각하기

바이브 코딩으로 무언가를 만들 때는 코드보다 사용자가 무엇을 할지 먼저 생각한다.

  • 이 페이지에서 사용자는 무엇을 해야 할까?
  • 화면은 어떻게 보여야 할까?
  • 버튼을 클릭하면 어떤 일이 일어나야 할까?

원하는 결과를 얻기 위한 네 가지 태도

AI와 함께 더 나은 결과를 만들려면 요청부터 실행까지 계속 주의를 기울여야 한다.

  • 원하는 것을 명확하게 말하기
  • 코드보다 결과와 행동을 기준으로 생각하기
  • LLM을 모든 답을 아는 존재로 여기기보다, 함께 일하는 동료로 대하기
  • 코드가 실행된 뒤에도 결과를 확인하고 살피기

좋은 프롬프트의 네 가지 요소

좋은 프롬프트는 AI가 무엇을 해야 하는지, 왜 해야 하는지 이해할 수 있도록 쓴다.

  1. 구체적으로 쓰기
    한 번에 한 가지 작업에 집중한다.

  2. 구조화하기
    목록이나 섹션을 사용해 요청을 알아보기 쉽게 나눈다.

  3. 대화하듯 쓰기
    동료에게 업무를 설명하듯 자연스럽고 명확하게 작성한다.

  4. 목적과 방법을 함께 설명하기
    '어떻게' 할지뿐 아니라 '무엇을 위해' 하는지도 알려준다.

상황에 따라 활용하는 프롬프트 템플릿

새 구성 요소 만들기

"[특정 동작 또는 콘텐츠]가 있는 [구성 요소]를 만들어 줘. [디자인 선호도]로 스타일링하고, [도구 유형]에서 작동하도록 해 줘."

오류 원인과 해결 방법 찾기

"[오류]가 발생했어. 코드는 다음과 같아: [코드 붙여넣기]. 무엇이 잘못되었는지, 어떻게 고칠 수 있는지 알려 줘."

기존 코드 개선하기

"다음 코드를 [더 빠르게 / 더 읽기 쉽게 / 모바일에서 사용하기 좋게 / 접근성 좋게] 개선해 줘. 무엇을 변경했는지도 설명해 줘."

다른 도구나 기술로 바꾸기

"이 섹션을 [바닐라 자바스크립트 / 리액트]로 변환해 줘. 또는 [Tailwind CSS]를 사용하도록 다시 작성해 줘."

작업 순서 지정하기

"[기능]을 수행하는 [도구 또는 앱]을 만들어 줘. 먼저 HTML을 작성하고, 그다음 CSS와 자바스크립트를 순서대로 작성해 줘."

더 나은 프롬프팅을 위한 팁

  • 큰 요청은 작은 단계로 나누기
  • 원하는 결과의 예시 보여주기
  • 모호한 표현 대신 명료하게 요청하기
  • 어려운 용어보다 자연스러운 말로 설명하기
  • 후속 요청을 할 때 필요한 맥락을 다시 알려주기

프롬프트와 결과를 반복해서 다듬기

한 번의 프롬프트로 완성하려고 하기보다, 결과를 살피고 다듬는 과정을 반복한다.

  1. 명확하고 구체적인 프롬프트로 시작합니다.
  2. 결과물을 꼼꼼히 검토합니다.
  3. 후속 질문을 하거나 개선을 요청합니다.
  4. 실습 환경에서 코드를 실행해 확인합니다.
  5. 필요하면 이 과정을 반복합니다.

AI와 함께 워크플로 만들기

AI 동료를 최대한 활용하기 위해 일을 구조화한다.

  • 업무를 작게 나누기
    거대한 프롬프트 하나로 해결하려 하지 말고 프로젝트를 작은 작업 단위로 나눈다.

  • 프롬프트와 결과물 기록하기
    프롬프트와 코드의 변경 사항을 기록해 어떤 요청이 효과적이었는지 살펴본다.

  • AI 코드와 직접 수정 병행하기
    AI의 결과물을 완성품이 아니라 다듬어 갈 초안으로 활용한다.

  • 코드 설명 요청하기
    복잡한 코드는 쉬운 말로 설명해 달라고 요청해 내용을 이해한다.

  • 테스트와 디버깅에 활용하기
    테스트 케이스를 만들거나 오류를 찾는 데 AI의 도움을 받는다.

1~10장을 읽고 얻은 배움과 생각

1장부터 10장까지는 바이브 코딩을 처음 배우는 사람에게 프롬프트를 어떻게 쓰면 좋을지 알려준다. 작성 요령부터 프롬프트 템플릿, 워크플로를 구성하는 방법까지 다룬다.

프롬프트를 꽤 많이 써온 편이라 공감되는 내용도 있었다. 원하는 바를 구체적으로 쓰고, 요청의 목적과 방법을 함께 설명하라는 부분이 특히 그랬다.

그동안 AI가 만든 코드를 제대로 살펴보지 않을 때가 많았다. 코드가 한꺼번에 너무 많이 나오면 검토하기가 부담스러웠던 것 같다. 앞으로는 내가 확인할 수 있을 만큼 작업을 잘게 나누고, 결과물도 꼼꼼히 살펴봐야겠다.

책 속 예약 앱 예제를 응용해보기

간단한 예약 앱 예제에서 아이디어 얻기

책에는 작은 워크숍을 운영하면서 참가자가 온라인으로 예약할 수 있는 간단한 앱을 만드는 실습이 나온다. 참가자가 날짜와 시간을 고르고 이름과 이메일을 입력하면 예약이 접수되고, 예약 데이터는 구글 시트로 전송되는 앱이다.

책의 예제를 그대로 따라 하기보다, 비슷한 방식으로 예약할 수 있는 다른 앱을 만들어보고 싶었다. 어떤 주제가 좋을지 생각하다가 최근 시에서 운영하는 배드민턴장을 예약해 한 시간 정도 운동했던 경험이 떠올랐다. 워크숍 시간대를 예약하는 앱을 배드민턴 코트 예약 앱으로 바꾸면, 예제의 기본 흐름을 살리면서 새로운 기능도 고민해볼 수 있을 것 같았다.

배드민턴장 예약 앱을 만들기 위한 프롬프트

책의 예제에서 날짜와 시간, 예약자 정보를 입력하는 흐름을 가져오고 예약 대상을 배드민턴장으로 바꿨다. 여기에 캘린더와 코트별 예약 가능 여부도 확인할 수 있도록 요청했다.

프롬프트:

단일 페이지 앱을 만들어 줘. 사용자가 드롭다운 목록에서 날짜와 시간을 선택하고, 이름과 전화번호, 이메일을 입력해 시에서 운영하는 배드민턴장을 예약할 수 있어야 해. 사용자 경험을 높이기 위해 사이트에서 캘린더를 볼 수 있고, 현재 예약 가능한 배드민턴 코트도 확인할 수 있어야 해. 배드민턴장은 총 6개 코트로 이루어져 있고, 사용자는 한 시간씩 예약할 수 있어. 예약 가능한 시간은 오전 9시부터 오후 3시까지 한 시간 단위야. 제출하면 확인 메시지를 보여 주고 예약 데이터를 구글 시트로 보내 줘.

나는 LLM 모델로 GPT-6 Sol High를 사용했다. 프롬프트를 입력하고 약 5분 뒤 첫 번째 앱이 만들어졌다.

첫 번째 결과물

시립 배드민턴장 예약 앱 첫번째 버전

결과

첫 번째 결과물에서 기본적인 예약 흐름을 확인한 뒤, 화면을 몇 차례 수정했다. MacBook Air 13에서 스크롤하지 않고 주요 화면을 볼 수 있도록 해 달라고 요청했고, 캘린더와 코트 현황, 예약자 정보의 위치와 높이도 조정했다.

수정 요청:

  • 스크롤하지 않고 예약 화면을 한눈에 볼 수 있도록 조정
  • 캘린더와 코트 현황의 배치를 바꾸고, 예약자 정보와 날짜·코트 선택 영역의 높이를 맞춰 달라고 요청

최종 결과물

시립 배드민턴장 예약 앱 최종 버전

몇 차례 수정한 끝에 화면을 한눈에 보기 쉽게 정리할 수 있었다. 처음 프롬프트를 입력한 때부터 최종 화면을 다듬기까지 30분이 채 걸리지 않은 것 같다.

확실히 빠르게 프로토타입을 만들 때는 AI를 활용하는 게 좋은 것 같다. 프로덕션 레벨의 서비스를 만들려면 검토하는 과정이 필요해 조금 더 걸리지만, 사람이 직접 코드를 작성하는 것보다는 비교할 수 없을 정도로 빠른 것 같다.

다음 실습을 기대하며

이제 실습 50개가 남았다. "습관 관리 도구 만들기", "레시피 영양 계산기 만들기", "영화 티켓 예매 데모 웹 페이지 만들기"처럼 만들어 볼 앱의 주제가 다양해 하나씩 해보는 게 기대된다.

다음 글에서는 실습을 진행하며 배운 점을 정리하고, 책을 읽으면서 직접 만들어 보고 싶었던 앱도 하나 만들어 소개해 보려 한다. 실습을 마칠 때쯤에는 AI를 지금보다 더 잘 활용하는 사람이 되어 있으면 좋겠다.

profile
여행과 책을 좋아하는 개발자입니다.

1개의 댓글

comment-user-thumbnail
3일 전

코드를 떠올리기보다 사용자의 행동을 생각하기
바이브 코딩으로 무언가를 만들 때는 코드보다 사용자가 무엇을 할지 먼저 생각한다.

  • 이 페이지에서 사용자는 무엇을 해야 할까?
  • 화면은 어떻게 보여야 할까?
  • 버튼을 클릭하면 어떤 일이 일어나야 할까?

책의 시작부에 이런 내용이 있어서 오 좋다. 라는 생각을 했습니다.
입문자 책이라고 했지만, 50개나 만드는 아이디어를 어떻게 생각하고 만드는 흐름으로 가는지
읽어보고 싶어요!

답글 달기