독서 기록 앱 만들기

첫 실습은 왜 독서 기록 앱이 좋을까

앱을 처음 만들어보는 순간에는 괜히 긴장됩니다. "내가 코딩을 모르는데 정말 앱이 만들어질까?", "프롬프트를 잘못 쓰면 이상한 결과가 나오지 않을까?", "도구 화면에서 막히면 어떡하지?" 같은 생각이 자연스럽게 듭니다.

그래서 첫 실습 앱은 단순해야 합니다. 기능이 적고, 화면 구조가 눈에 잘 보이고, 결과가 맞는지 내가 직접 확인할 수 있어야 합니다. 그런 면에서 독서 기록 앱은 바이브 코딩 입문자에게 아주 좋은 첫 번째 연습입니다.

독서 기록 앱은 구조가 단순합니다. 책 제목을 입력하고, 저자를 적고, 읽은 날짜와 별점, 한 줄 메모를 남깁니다. 저장 버튼을 누르면 아래 목록에 기록이 쌓입니다. 복잡한 결제도, 회원 권한도, 외부 서비스 연결도 필요 없습니다. 그럼에도 앱의 기본 흐름인 입력, 저장, 목록 표시, 수정 요청을 모두 경험할 수 있습니다.

처음부터 대단한 앱을 만들 필요는 없습니다. 오히려 첫 앱은 작을수록 좋습니다. 독서 기록 앱처럼 구조가 단순한 앱으로 시작해야 AI에게도 설명하기 쉽고, 내가 결과물을 검토하기도 쉽습니다.

이번 장의 목표는 완벽한 독서 관리 서비스를 만드는 것이 아닙니다. 목표는 단 하나입니다. 내가 원하는 작은 앱을 AI 앱 빌더에게 설명하고, 나온 결과물을 보고, 다시 고쳐달라고 요청하는 전체 흐름을 한 번 경험하는 것입니다.

이번에 만들 앱의 완성 모습

우리가 만들 독서 기록 앱은 아주 작습니다. 사용자는 읽은 책을 하나씩 기록하고, 저장된 책 목록을 확인할 수 있습니다. 앱을 열면 위쪽에는 입력 폼이 있고, 아래쪽에는 지금까지 기록한 책 목록이 보입니다.

예를 들어 이런 식입니다.

첫 번째 기록에는 《아몬드》라는 책 제목, 손원평이라는 저자명, 읽은 날짜, 별점 5점, "감정을 이해하는 방식에 대해 생각하게 해준 책"이라는 한 줄 메모가 들어갑니다.

두 번째 기록에는 《역행자》라는 책 제목, 자청이라는 저자명, 읽은 날짜, 별점 4점, "실행의 중요성을 다시 느꼈다"라는 메모가 들어갈 수 있습니다.

세 번째 기록에는 《불편한 편의점》이라는 책 제목, 김호연이라는 저자명, 읽은 날짜, 별점 5점, "가볍게 읽히지만 마음이 오래 남는다"라는 메모가 들어갈 수 있습니다.

이 정도면 충분합니다. 지금은 검색 기능도, 장르별 필터도, 월별 통계도 만들지 않습니다. 그런 기능은 멋져 보이지만 첫 버전에서는 오히려 방해가 됩니다. 첫 번째 목표는 "기록이 저장되고 목록에 보이는가?"입니다.

필요한 기능을 작게 자르기

앱을 만들기 전에 먼저 기능을 정리해야 합니다. AI 앱 빌더에게 "독서 기록 앱 만들어줘"라고만 말하면 결과가 들쭉날쭉할 수 있습니다. 어떤 도구는 예쁜 화면만 만들고 저장 기능을 빠뜨릴 수도 있고, 어떤 도구는 처음부터 로그인이나 통계를 넣으려고 할 수도 있습니다.

그래서 우리는 필요한 기능과 제외할 기능을 나눠서 말해야 합니다.

이번 MVP에 넣을 기능은 다음과 같습니다.

• 책 제목 입력

• 저자 입력

• 읽은 날짜 입력

• 별점 선택

• 한 줄 메모 입력

• 저장 버튼

• 저장된 독서 기록 목록 표시

• 각 기록 삭제 기능

여기서 삭제 기능은 꼭 필요한 기능에 가깝습니다. 잘못 입력했을 때 지울 방법이 없으면 앱을 테스트하기 어렵기 때문입니다. 다만 수정 기능은 첫 버전에서 빼도 됩니다. 수정 기능까지 넣으면 입력 폼과 목록의 관계가 조금 더 복잡해집니다. 첫 실습에서는 "잘못 입력하면 삭제하고 다시 입력한다" 정도로 단순하게 가도 괜찮습니다.

반대로 이번 버전에서 제외할 기능은 다음과 같습니다.

• 로그인 기능

• 검색 기능

• 장르별 필터

• 월별 독서 통계

• 책 표지 자동 검색

• 다른 사람과 공유

• 클라우드 데이터베이스 연결

• AI 추천 기능

검색, 필터, 통계는 나중에 넣기 좋은 기능입니다. 그러나 첫 번째 실습에서는 미루는 편이 좋습니다. 바이브 코딩의 핵심은 한 번에 모든 것을 요구하는 것이 아니라, 작게 만들고 확인한 뒤 대화하며 키우는 것입니다.

이번 장에서 알아야 할 용어

이번 실습에서 알아야 할 용어는 많지 않습니다. 딱 네 가지만 기억해도 충분합니다.

입력 폼은 사용자가 정보를 적는 영역입니다. 종이 신청서로 치면 이름, 연락처, 요청 사항을 적는 칸입니다. 독서 기록 앱에서는 책 제목, 저자, 읽은 날짜, 별점, 메모를 적는 부분이 입력 폼입니다.

저장은 사용자가 입력한 정보를 앱 안에 남겨두는 일입니다. 장부에 기록을 남기는 것과 비슷합니다. 저장이 제대로 되지 않으면 버튼을 눌러도 목록에 아무것도 나타나지 않습니다.

목록은 저장된 정보를 한눈에 볼 수 있게 나열한 화면입니다. 독서 기록 앱에서는 지금까지 읽은 책들이 카드나 표 형태로 보이는 부분입니다.

로컬 저장은 내 브라우저 안에 데이터를 임시로 보관하는 방식입니다. 내 컴퓨터나 휴대폰의 브라우저에 작은 메모장을 두는 것과 비슷합니다. 첫 실습에는 로컬 저장만으로도 충분합니다. 다만 다른 기기에서 같은 데이터를 보거나 여러 사람이 함께 쓰려면 나중에 클라우드 저장이나 데이터베이스가 필요합니다.

여기서 중요한 점이 있습니다. 첫 앱에서 꼭 진짜 데이터베이스를 붙일 필요는 없습니다. 데이터베이스는 장부나 엑셀 파일 같은 역할을 하지만, 처음부터 제대로 연결하려면 설정이 복잡해질 수 있습니다. 우리는 일단 작은 앱이 작동하는 경험을 먼저 얻겠습니다.

어떤 도구에서 만들어볼까

이번 실습은 Lovable, Replit Agent, Bolt.new 같은 초보용 앱 빌더형 도구에 잘 맞습니다. 자연어로 "이런 앱을 만들어줘"라고 설명하면 화면과 기본 기능을 만들어주는 도구들입니다.

이 장에서는 특정 버튼 위치를 하나하나 설명하지 않습니다. 도구들은 계속 바뀌고, 화면 구성도 자주 달라집니다. 대신 어떤 순서로 생각하고 요청해야 하는지를 익히겠습니다.

흐름은 단순합니다.

• 앱 빌더형 도구를 연다.

• 새 프로젝트를 만든다.

• 아래의 앱 생성 프롬프트를 붙여넣는다.

• 만들어진 앱을 실행해본다.

• 잘 되는 부분과 이상한 부분을 확인한다.

• 수정 프롬프트로 다시 요청한다.

유명한 도구가 초보자에게 쉬운 도구는 아닙니다. Claude Code, Codex, Cursor 같은 개발자형 도구는 코드베이스, 터미널, GitHub 같은 개발 흐름에 더 가깝습니다. 이번 첫 실습에서는 그런 도구보다 앱 빌더형 도구로 성공 경험을 만드는 것이 좋습니다.

앱 생성 프롬프트

이제 첫 프롬프트를 작성해봅시다. 중요한 것은 "독서 기록 앱 만들어줘"라고 짧게 말하지 않는 것입니다. AI가 알아서 잘 만들어주기를 기대하기보다, 내가 원하는 앱의 범위를 친절하게 알려줘야 합니다.

아래 프롬프트를 그대로 복사해서 사용할 수 있습니다.

나는 코딩을 모르는 초보자입니다. 개인적으로 사용할 간단한 독서 기록 웹앱을 만들고 싶습니다.

앱의 목적은 내가 읽은 책을 기록하고, 나중에 목록으로 다시 확인하는 것입니다.

사용 대상은 나 혼자입니다. 처음 버전은 MVP로 작게 만들어주세요.

필요한 기능은 다음과 같습니다.
1. 책 제목을 입력할 수 있어야 합니다.
2. 저자명을 입력할 수 있어야 합니다.
3. 읽은 날짜를 선택할 수 있어야 합니다.
4. 별점을 1점부터 5점까지 선택할 수 있어야 합니다.
5. 한 줄 메모를 입력할 수 있어야 합니다.
6. 저장 버튼을 누르면 입력한 내용이 아래 독서 기록 목록에 추가되어야 합니다.
7. 저장된 기록은 카드 형태로 보여주세요.
8. 각 기록에는 삭제 버튼이 있어야 합니다.

화면 구성은 다음과 같이 해주세요.
- 상단: 앱 제목과 짧은 설명
- 중간: 독서 기록 입력 폼
- 하단: 저장된 독서 기록 목록

디자인은 따뜻한 독서 노트 느낌으로 만들어주세요. 배경은 밝고 편안한 색을 사용하고, 카드에는 살짝 둥근 모서리와 여백을 넣어주세요.

처음 버전에서는 다음 기능은 제외해주세요.
- 로그인
- 검색
- 필터
- 통계
- 책 표지 자동 검색
- 다른 사용자와 공유
- 외부 API 연결

데이터는 우선 브라우저의 로컬 저장 방식으로 저장되게 해주세요. 새로고침해도 기록이 사라지지 않으면 좋겠습니다.

코딩을 모르는 사람이 테스트할 수 있도록 사용 방법이 직관적인 MVP로 만들어주세요.

이 프롬프트에는 우리가 앞에서 배운 기본 구조가 들어 있습니다. 나는 누구인지, 무엇을 만들고 싶은지, 누가 쓰는지, 필요한 기능은 무엇인지, 화면은 어떻게 구성할지, 디자인 분위기는 어떤지, 무엇을 제외할지까지 적었습니다.

특히 "처음 버전에서는 제외해주세요"라는 문장이 중요합니다. AI 앱 빌더는 때때로 친절하게 더 많은 기능을 넣으려고 합니다. 하지만 첫 앱에서는 친절함이 복잡함이 될 수 있습니다. 우리는 작게 시작해야 합니다.

결과물을 처음 확인하는 방법

앱이 만들어졌다면 바로 감탄하거나 실망하기 전에 차분히 확인해야 합니다. 첫 결과물은 초안입니다. 사람이 쓴 글도 초고가 필요하듯이, AI가 만든 앱도 첫 결과물은 다듬어야 합니다.

먼저 책 기록을 하나 입력해봅니다. 책 제목에는 "아몬드", 저자에는 "손원평", 읽은 날짜에는 오늘 날짜, 별점은 5점, 메모에는 "감정을 이해하는 방식에 대해 생각하게 해준 책"이라고 적어봅니다. 저장 버튼을 누른 뒤 목록에 제대로 나타나는지 확인합니다.

다음으로 두 번째 기록을 입력해봅니다. 책 제목은 "불편한 편의점", 저자는 "김호연", 별점은 4점, 메모는 "편하게 읽히지만 여운이 남는 이야기"라고 적어봅니다. 이렇게 두 개 이상 넣어봐야 목록의 간격, 카드 디자인, 정렬 상태를 확인할 수 있습니다.

마지막으로 새로고침을 해봅니다. 기록이 그대로 남아 있으면 로컬 저장이 작동하는 것입니다. 새로고침했을 때 기록이 사라진다면 저장 방식이 제대로 구현되지 않았을 수 있습니다. 이때는 오류 해결 프롬프트로 다시 요청하면 됩니다.

1차 수정 프롬프트: 기능을 바로잡기

첫 결과물에서 가장 자주 생기는 문제는 기능이 빠져 있거나, 입력값이 목록에 제대로 표시되지 않는 경우입니다. 예를 들어 별점을 선택했는데 목록에는 별점이 보이지 않을 수 있습니다. 날짜가 이상한 형식으로 표시될 수도 있습니다. 삭제 버튼이 없거나, 눌러도 작동하지 않을 수도 있습니다.

이럴 때는 "이상해요. 고쳐주세요"라고만 말하지 않는 편이 좋습니다. AI에게는 무엇이 기대와 다르고, 어떤 방식으로 고치면 되는지 알려주는 것이 좋습니다.

아래 프롬프트를 사용해보세요.

현재 독서 기록 앱의 첫 버전이 만들어졌습니다. 기능을 점검해보니 몇 가지를 수정하고 싶습니다.

수정 요청은 다음과 같습니다.
1. 저장된 독서 기록 카드에 책 제목, 저자, 읽은 날짜, 별점, 한 줄 메모가 모두 보이게 해주세요.
2. 저장 버튼을 누른 뒤 입력 폼이 비워지게 해주세요.
3. 별점은 숫자만 보이기보다 ★ 기호로 보기 좋게 표시해주세요.
4. 삭제 버튼을 누르면 해당 기록만 삭제되게 해주세요.
5. 기록이 하나도 없을 때는 "아직 기록한 책이 없습니다. 첫 책을 기록해보세요."라는 안내 문구를 보여주세요.

기존에 요청한 것처럼 로그인, 검색, 필터, 통계 기능은 아직 추가하지 말아주세요. MVP 범위를 유지해주세요.

이 프롬프트는 기능 추가라기보다 기능 정리에 가깝습니다. 처음 만든 앱이 우리가 기대한 기본 동작을 제대로 하도록 바로잡는 요청입니다.

바이브 코딩에서 첫 프롬프트는 앱의 뼈대를 만드는 요청입니다. 1차 수정 프롬프트는 뼈대가 제대로 움직이게 만드는 요청입니다. 두 프롬프트의 역할이 다릅니다.

디자인 개선 프롬프트: 보기 좋게 다듬기

기능이 어느 정도 작동한다면 이제 디자인을 다듬을 수 있습니다. 디자인 개선은 기능 수정과 분리해서 요청하는 편이 좋습니다. 기능도 고치고 디자인도 바꾸고 구조도 바꿔달라고 한 번에 말하면 AI가 중요한 부분을 놓칠 수 있습니다.

이번 앱은 독서 기록 앱이므로 차분하고 따뜻한 느낌이 잘 어울립니다. 하지만 "예쁘게 해줘"라는 말은 너무 넓습니다. 어떤 느낌의 예쁨인지 구체적으로 말해야 합니다.

아래 프롬프트를 사용해보세요.

이제 독서 기록 앱의 디자인을 개선하고 싶습니다. 기능은 현재 상태를 유지하고, 디자인만 다듬어주세요.

원하는 분위기는 따뜻한 독서 노트 느낌입니다.

디자인 수정 요청은 다음과 같습니다.
1. 전체 배경은 눈이 편한 아이보리 또는 연한 베이지 계열로 해주세요.
2. 입력 폼과 독서 기록 카드는 흰색 카드 형태로 보여주세요.
3. 카드에는 둥근 모서리, 은은한 그림자, 충분한 여백을 넣어주세요.
4. 앱 제목 아래에 "읽은 책을 기록하고, 생각을 한 줄로 남겨보세요."라는 설명 문구를 넣어주세요.
5. 저장 버튼은 잘 보이도록 따뜻한 갈색 또는 초록색 계열로 만들어주세요.
6. 모바일에서도 입력 폼과 카드가 세로로 자연스럽게 보이게 해주세요.

주의할 점:
- 기능은 바꾸지 말아주세요.
- 검색, 필터, 통계는 아직 추가하지 말아주세요.
- 너무 화려한 애니메이션은 넣지 말아주세요.

디자인 요청에서 중요한 표현은 "기능은 현재 상태를 유지하고, 디자인만 다듬어주세요"입니다. 앱 빌더가 디자인을 바꾸는 과정에서 기능 구조까지 건드리는 경우가 있기 때문입니다. 초보자일수록 요청 범위를 좁혀주는 습관이 필요합니다.

오류 해결 프롬프트: 저장이 안 될 때

첫 앱에서 가장 당황스러운 순간은 버튼을 눌렀는데 아무 일도 일어나지 않을 때입니다. 저장 버튼을 눌렀는데 목록에 추가되지 않거나, 새로고침하면 기록이 사라지거나, 삭제 버튼을 누르면 엉뚱한 카드가 사라질 수 있습니다.

이때 중요한 것은 화내지 않고 증상을 설명하는 것입니다. AI에게 오류를 설명할 때는 병원에서 증상을 말한다고 생각하면 쉽습니다. "아파요"보다 "언제부터, 어디가, 어떤 상황에서 아픈지"를 말해야 진단이 쉬워집니다.

저장이 되지 않을 때는 이렇게 요청해보세요.

독서 기록 앱에서 저장 기능에 문제가 있습니다.

현재 상황은 다음과 같습니다.
1. 책 제목, 저자, 읽은 날짜, 별점, 메모를 입력했습니다.
2. 저장 버튼을 눌렀습니다.
3. 그런데 아래 목록에 기록이 추가되지 않습니다.

원하는 동작은 다음과 같습니다.
- 저장 버튼을 누르면 입력한 내용이 독서 기록 목록에 즉시 추가되어야 합니다.
- 책 제목, 저자, 읽은 날짜, 별점, 메모가 모두 표시되어야 합니다.
- 저장 후 입력 폼은 비워져야 합니다.

현재 코드 또는 앱 구조를 확인해서 저장 버튼과 목록 표시 로직이 제대로 연결되어 있는지 점검하고 수정해주세요.
로그인, 검색, 필터, 통계 기능은 추가하지 말고 저장 문제만 해결해주세요.

새로고침 후 데이터가 사라질 때는 이렇게 요청할 수 있습니다.

독서 기록 앱에서 새로고침하면 저장한 기록이 사라지는 문제가 있습니다.

원하는 동작은 다음과 같습니다.
- 사용자가 독서 기록을 저장하면 브라우저의 로컬 저장소에 기록이 저장되어야 합니다.
- 페이지를 새로고침해도 이전에 저장한 독서 기록이 다시 목록에 표시되어야 합니다.
- 삭제 버튼을 누른 기록은 로컬 저장소에서도 삭제되어야 합니다.

현재 앱에서 로컬 저장 기능이 제대로 구현되어 있는지 확인하고 수정해주세요.
단, 이번 버전에서는 데이터베이스나 로그인 기능은 추가하지 말아주세요. 로컬 저장 방식으로만 해결해주세요.

목록 화면이 깨질 때는 이렇게 말하면 좋습니다.

독서 기록 앱의 목록 화면이 보기 어렵게 깨져 보입니다.

문제 상황은 다음과 같습니다.
1. 독서 기록을 여러 개 추가하면 카드 간격이 너무 좁습니다.
2. 긴 메모를 입력하면 카드 밖으로 글자가 삐져나옵니다.
3. 모바일 화면에서 카드 내용이 가로로 눌려 보입니다.

수정 요청은 다음과 같습니다.
- 기록 카드는 세로로 자연스럽게 쌓이게 해주세요.
- 카드 사이에 충분한 여백을 넣어주세요.
- 긴 메모는 카드 안에서 줄바꿈되게 해주세요.
- 모바일 화면에서도 가로 스크롤 없이 볼 수 있게 해주세요.

기능은 바꾸지 말고 목록 표시 디자인과 반응형 화면만 수정해주세요.

오류 수정 프롬프트의 핵심은 세 가지입니다. 현재 상황, 원하는 동작, 건드리지 말아야 할 범위를 함께 말하는 것입니다. 이 세 가지가 있으면 AI가 훨씬 안정적으로 수정할 수 있습니다.

검색과 통계는 왜 나중으로 미룰까

독서 기록 앱을 만들다 보면 욕심이 생깁니다. "책이 많아지면 검색이 필요하지 않을까?", "올해 몇 권 읽었는지 통계도 보고 싶은데?", "별점 높은 책만 필터링하면 좋겠다" 같은 생각이 들 수 있습니다.

이 생각은 틀리지 않습니다. 실제로 독서 기록 앱에는 검색, 필터, 통계가 잘 어울립니다. 다만 지금은 첫 실습입니다. 첫 실습에서 너무 많은 기능을 넣으면 어디서 문제가 생겼는지 알기 어려워집니다.

예를 들어 저장이 안 되는 문제가 생겼다고 해봅시다. 앱에 검색, 필터, 통계, 로그인까지 들어 있다면 원인이 어디인지 찾기 어렵습니다. 저장 로직 문제인지, 필터 조건 문제인지, 로그인 권한 문제인지, 통계 계산 문제인지 헷갈립니다.

반대로 기능이 단순하면 확인이 쉽습니다. 입력했다. 저장했다. 목록에 보인다. 삭제했다. 사라진다. 이 흐름만 확인하면 됩니다. 그래서 첫 앱은 단순해야 합니다.

검색과 통계는 나중 버전에서 추가하면 됩니다. 예를 들어 기본 앱이 안정적으로 작동한 뒤에는 이런 프롬프트를 사용할 수 있습니다.

독서 기록 앱의 기본 기능이 안정적으로 작동합니다. 이제 작은 기능을 하나만 추가하고 싶습니다.

검색 기능을 추가해주세요.
- 사용자가 책 제목이나 저자명으로 검색할 수 있게 해주세요.
- 검색어를 입력하면 목록에서 해당 단어가 포함된 기록만 보이게 해주세요.
- 검색어를 지우면 전체 기록이 다시 보이게 해주세요.

다른 기능은 추가하지 말고 검색 기능만 추가해주세요.

통계 기능은 이렇게 요청할 수 있습니다.

독서 기록 앱에 간단한 통계 영역을 추가하고 싶습니다.

추가할 통계는 다음 3가지만 넣어주세요.
1. 전체 기록한 책 수
2. 평균 별점
3. 이번 달에 읽은 책 수

통계 영역은 앱 상단 또는 목록 위에 작은 카드 형태로 보여주세요.
검색, 필터, 로그인, 외부 API 기능은 추가하지 말아주세요.
기존 저장 기능과 목록 기능이 망가지지 않도록 유지해주세요.

여기서도 원칙은 같습니다. 한 번에 하나씩 추가합니다. 바이브 코딩은 AI에게 한 번에 완벽한 앱을 요구하는 기술이 아닙니다. 내가 원하는 것을 AI가 이해하게 설명하고, 대화하며 고쳐나가는 기술입니다.

실습 미션: 내 책 3권을 기록해보기

이제 직접 테스트할 차례입니다. 앱을 만들었다면 실제 데이터를 넣어봐야 합니다. 가짜 데이터만 넣으면 내가 정말 쓰고 싶은 앱인지 알기 어렵습니다.

먼저 최근 읽은 책이나 읽고 있는 책 3권을 떠올려보세요. 꼭 유명한 책일 필요는 없습니다. 자기계발서, 소설, 에세이, 업무 관련 책, 육아책, 만화책도 괜찮습니다.

각 책에 대해 다음 정보를 입력해봅니다.

• 책 제목

• 저자

• 읽은 날짜

• 별점

• 한 줄 메모

한 줄 메모는 길게 쓰지 않아도 됩니다. "다시 읽고 싶다", "업무에 바로 써먹을 내용이 있었다", "중반부터 몰입이 잘 됐다" 정도면 충분합니다.

입력한 뒤에는 다음을 확인해보세요.

• 저장 버튼을 눌렀을 때 목록에 바로 추가되는가?

• 별점이 알아보기 쉽게 표시되는가?

• 메모가 너무 길어도 화면이 깨지지 않는가?

• 새로고침해도 기록이 남아 있는가?

• 삭제 버튼이 의도한 기록만 삭제하는가?

이 확인 과정이 바로 앱 검토입니다. AI가 만든 앱도 반드시 사람이 검토해야 합니다. 작동하는 것처럼 보여도 실제로 써보면 불편한 부분이 드러납니다.

흔한 실수와 고치는 방법

첫 번째 흔한 실수는 프롬프트가 너무 짧은 것입니다. "독서 기록 앱 만들어줘"라고만 말하면 AI가 무엇을 넣고 뺄지 스스로 판단합니다. 그러면 내가 원하지 않은 로그인이나 복잡한 통계가 들어갈 수 있습니다. 고치는 방법은 간단합니다. 필요한 기능, 화면 구성, 제외할 기능을 분명하게 적어야 합니다.

두 번째 흔한 실수는 한 번에 너무 많은 기능을 요구하는 것입니다. 독서 기록 앱에 검색, 필터, 통계, 책 표지 검색, AI 추천, 소셜 공유까지 한 번에 넣으려고 하면 첫 실습이 갑자기 어려워집니다. 고치는 방법은 MVP를 지키는 것입니다. 먼저 입력, 저장, 목록, 삭제만 확인하세요.

세 번째 흔한 실수는 오류를 모호하게 말하는 것입니다. "앱이 이상해요"라고 하면 AI가 무엇을 고쳐야 할지 알기 어렵습니다. "저장 버튼을 눌렀는데 목록에 추가되지 않습니다", "새로고침하면 기록이 사라집니다", "모바일에서 카드 글자가 밖으로 나갑니다"처럼 상황을 구체적으로 말해야 합니다.

네 번째 흔한 실수는 디자인과 기능을 한꺼번에 바꾸는 것입니다. 기능 오류를 고치면서 디자인까지 전부 바꾸라고 하면 결과가 더 흔들릴 수 있습니다. 먼저 기능을 안정화하고, 그다음 디자인을 수정하세요.

다섯 번째 흔한 실수는 로컬 저장의 한계를 모르는 것입니다. 로컬 저장은 간단하고 편하지만, 같은 데이터를 다른 기기에서 자동으로 볼 수 있는 방식은 아닙니다. 휴대폰과 노트북에서 같은 기록을 보고 싶다면 나중에 데이터베이스나 로그인 기능을 검토해야 합니다. 다만 그것은 지금 단계가 아닙니다.

응용 아이디어

독서 기록 앱을 완성했다면 같은 구조로 다른 기록형 앱도 만들 수 있습니다. 핵심은 같습니다. 무엇을 입력하고, 어떻게 저장하고, 어떤 목록으로 보여줄지 정하면 됩니다.

예를 들어 영화 감상 기록 앱을 만들 수 있습니다. 책 제목 대신 영화 제목, 저자 대신 감독, 읽은 날짜 대신 감상 날짜를 넣으면 됩니다. 별점과 한 줄 메모는 그대로 사용할 수 있습니다.

카페 방문 기록 앱도 가능합니다. 카페 이름, 위치, 방문 날짜, 분위기 별점, 추천 메뉴, 한 줄 메모를 저장하면 됩니다. 나중에 지역별 필터를 추가할 수도 있습니다.

업무 회고 기록 앱으로 바꿀 수도 있습니다. 날짜, 오늘 한 일, 잘한 점, 아쉬운 점, 내일 할 일을 입력하면 간단한 회고장이 됩니다. 직장인에게는 독서 기록 앱보다 더 실용적일 수 있습니다.

이처럼 첫 앱을 하나 만들었다는 것은 단순히 독서 기록 앱 하나를 만든 것이 아닙니다. 기록형 앱의 기본 패턴을 익힌 것입니다. 이 패턴은 할 일 관리 앱, 운동 루틴 기록 앱, 블로그 글감 저장소 앱, AI 프롬프트 보관함 앱으로 이어집니다.

오늘의 체크리스트

이번 장을 마치기 전에 아래 항목을 확인해보세요.

• 독서 기록 앱의 사용자가 누구인지 정했다.

• 첫 버전의 목적을 "읽은 책 기록하기"로 좁혔다.

• 책 제목, 저자, 읽은 날짜, 별점, 한 줄 메모를 입력 항목으로 정했다.

• 검색, 필터, 통계, 로그인은 나중 버전으로 미뤘다.

• 앱 생성 프롬프트를 앱 빌더형 도구에 넣어보았다.

• 저장 버튼을 눌렀을 때 목록에 기록이 추가되는지 확인했다.

• 새로고침 후에도 기록이 남는지 확인했다.

• 문제가 생겼을 때 현재 상황과 원하는 동작을 나누어 설명했다.

• 기능 수정 프롬프트와 디자인 개선 프롬프트를 구분해서 사용했다.

• 내 책 3권을 실제로 기록해보았다.

체크가 모두 되지 않아도 괜찮습니다. 중요한 것은 한 번에 완성하는 것이 아니라, 어디서 막혔는지 설명할 수 있게 되는 것입니다.

한 장 요약

독서 기록 앱은 바이브 코딩의 첫 실습으로 적합합니다. 기능이 단순하면서도 앱의 기본 흐름인 입력, 저장, 목록 표시, 삭제, 수정 요청을 모두 경험할 수 있기 때문입니다.

이번 장에서 만든 MVP는 책 제목, 저자, 읽은 날짜, 별점, 한 줄 메모를 저장하는 작은 앱입니다. 검색, 필터, 통계, 로그인, 책 표지 자동 검색은 나중 버전으로 미뤘습니다. 첫 앱에서는 완성도보다 작동 경험이 중요합니다.

앱 생성 프롬프트는 앱의 뼈대를 만드는 요청입니다. 1차 수정 프롬프트는 기능을 바로잡는 요청입니다. 디자인 개선 프롬프트는 보기 좋게 다듬는 요청입니다. 오류 해결 프롬프트는 현재 상황과 원하는 동작을 구체적으로 설명하는 요청입니다.

바이브 코딩은 코딩을 안 배워도 된다는 뜻이 아닙니다. 내가 원하는 것을 AI가 이해하게 설명하는 기술입니다. 오늘 독서 기록 앱을 만들었다면, 당신은 이미 첫걸음을 뗀 것입니다. 다음 장에서는 같은 원리를 바탕으로 조금 더 실용적인 할 일 관리 앱을 만들어보겠습니다.