할 일 앱은 작지만, 거의 모든 앱의 기본형입니다
할 일 관리 앱은 너무 흔해서 오히려 만만해 보입니다. "해야 할 일을 적고, 끝나면 체크하고, 필요 없으면 지우는 앱 아닌가요?" 맞습니다. 그런데 바로 그 단순함 때문에 할 일 관리 앱은 바이브 코딩 연습에 아주 좋습니다.
대부분의 업무용 앱은 결국 어떤 목록을 다룹니다. 고객 목록, 주문 목록, 상담 목록, 강의 신청자 목록, 회의 안건 목록, 독서 기록 목록도 구조만 보면 비슷합니다. 무언가를 추가하고, 상태를 바꾸고, 필요하면 삭제하고, 원하는 순서로 보는 것입니다.
할 일 관리 앱은 이 목록 관리의 가장 기본형입니다. 이번 장에서 우리는 다음 흐름을 연습합니다.
할 일을 입력하고 목록에 추가하기
완료 여부를 체크하기
필요 없는 할 일을 삭제하기
우선순위를 표시하기
카테고리와 마감일 필터를 나중에 추가하기
모바일에서 누르기 쉬운 화면으로 다듬기
처음부터 완벽한 생산성 앱을 만들 필요는 없습니다. 구글 캘린더, 노션, 투두이스트 같은 앱을 따라 만들려고 하면 금방 어려워집니다. 오늘의 목표는 "내가 만든 작은 앱에서 할 일을 추가하고 체크할 수 있다"입니다. 이 경험만 해도 다음 앱을 만들 때 훨씬 덜 막막해집니다.
이 앱을 만드는 이유
할 일 관리 앱은 일상과 업무 양쪽에서 모두 이해하기 쉽습니다. 직장인은 오늘 처리할 업무를 적을 수 있고, 부모는 장보기나 아이 준비물을 기록할 수 있습니다. 강사는 강의 준비 항목을 관리할 수 있고, 크리에이터는 콘텐츠 제작 단계를 정리할 수 있습니다.
예를 들어 직장인 민지는 매일 아침 메모장에 할 일을 적습니다. 하지만 업무가 끝났는지 확인하기 어렵고, 급한 일과 덜 급한 일이 섞여 헷갈립니다. 강사 준호는 강의 전 준비물을 종이에 적지만, 매번 비슷한 항목을 다시 적습니다. 부모인 수연은 장보기 목록을 가족 채팅방에 보내지만, 누가 무엇을 샀는지 확인하기 어렵습니다.
이 문제들은 거창하지 않습니다. 하지만 반복됩니다. 바이브 코딩에서 좋은 첫 앱은 바로 이런 반복되는 불편함에서 나옵니다.
이번 실습 앱은 "작은 생산성 도구"입니다. 완성 후에는 간단히 할 일을 추가하고, 완료 체크를 하고, 우선순위를 보며, 필요 없는 항목을 삭제할 수 있습니다. 여기에 카테고리와 마감일 필터를 단계적으로 붙이면 꽤 그럴듯한 개인 업무 관리 앱이 됩니다.
완성 후 모습 상상하기
앱을 만들기 전에 먼저 완성된 화면을 머릿속으로 그려봅시다. AI 앱 빌더에게 설명할 때는 "할 일 앱 만들어줘"보다 "어떤 화면에 무엇이 있고, 사용자가 어떤 순서로 쓰는지"를 알려주는 편이 훨씬 좋습니다.
이번 앱의 첫 화면은 단순합니다. 위쪽에는 "오늘의 할 일"이라는 제목이 있습니다. 그 아래에는 할 일을 입력하는 칸과 추가 버튼이 있습니다. 사용자는 "견적서 보내기", "운동 30분 하기", "세탁소 들르기" 같은 문장을 입력합니다.
목록에는 각 할 일이 카드 형태로 보입니다. 카드에는 체크박스, 할 일 내용, 우선순위 표시, 삭제 버튼이 있습니다. 체크박스를 누르면 완료 상태가 되고, 완료된 항목은 글자에 취소선이 생기거나 색이 연해집니다. 삭제 버튼을 누르면 바로 지워지는 대신 "정말 삭제할까요?"라고 한 번 물어봅니다.
조금 더 개선한 버전에서는 상단에 완료 개수가 보입니다. 예를 들어 "전체 7개 중 3개 완료"처럼 표시됩니다. 이 작은 문구 하나만 있어도 앱을 쓰는 느낌이 훨씬 좋아집니다.
필요한 기능과 처음에는 뺄 기능
바이브 코딩에서 중요한 것은 "넣을 기능"만큼 "뺄 기능"을 정하는 것입니다. 초보자가 할 일 앱을 만들 때 흔히 하는 실수는 처음부터 너무 많은 기능을 요구하는 것입니다. 로그인, 팀 공유, 알림, 반복 일정, 캘린더 연동, 음성 입력, AI 추천까지 한 번에 넣으려 하면 결과물이 복잡해지고 오류도 늘어납니다.
이번 장의 첫 버전에 넣을 기능은 다음 네 가지입니다.
할 일 추가
완료 체크
삭제
우선순위 표시
여기까지만 해도 할 일 앱의 뼈대는 충분합니다. 그다음 단계에서 카테고리, 마감일, 필터, 정렬, 완료 개수 표시를 추가하면 됩니다.
처음 버전에서 제외할 기능도 분명히 적어야 합니다. 로그인은 빼겠습니다. 여러 사용자 공유도 빼겠습니다. 푸시 알림도 빼겠습니다. 외부 캘린더 연동도 빼겠습니다. 반복 일정도 빼겠습니다.
이렇게 말하면 조금 허전하게 느껴질 수 있습니다. 하지만 첫 앱에서는 허전한 것이 오히려 좋습니다. 허전해야 내가 무엇을 고쳐야 할지 보입니다. 너무 많은 기능이 한꺼번에 들어가면 어디가 문제인지 찾기 어렵습니다.
이번 장에서 알아둘 용어
체크박스
체크박스는 사용자가 어떤 항목을 선택했는지 표시하는 작은 네모 버튼입니다. 할 일 앱에서는 "이 일을 끝냈는가?"를 표시하는 데 씁니다. 종이 할 일 목록 옆에 네모 칸을 그리고, 끝난 일에 체크 표시를 하는 것과 같습니다.
상태
상태는 앱 안에서 어떤 항목이 현재 어떤 상황인지 나타내는 정보입니다. 할 일에는 "완료 전"과 "완료됨"이라는 상태가 있을 수 있습니다. 식당 주문으로 비유하면 "주문 접수", "조리 중", "서빙 완료" 같은 단계가 상태입니다.
정렬
정렬은 목록을 어떤 기준으로 나열할지 정하는 것입니다. 마감일이 빠른 순서, 우선순위가 높은 순서, 최근에 추가한 순서처럼 보여줄 수 있습니다. 책상 위 서류를 날짜순이나 중요도순으로 다시 쌓는 것과 비슷합니다.
필터
필터는 전체 목록 중에서 조건에 맞는 것만 보여주는 기능입니다. 예를 들어 "업무" 카테고리만 보기, "오늘 마감"만 보기, "완료 안 된 일"만 보기가 필터입니다. 커피 필터가 원두 찌꺼기를 걸러내듯, 앱의 필터는 보고 싶은 항목만 남겨줍니다.
반응형 디자인
반응형 디자인은 화면 크기에 맞게 앱 모양이 자연스럽게 바뀌는 것을 말합니다. 컴퓨터에서는 넓게 보이고, 스마트폰에서는 버튼과 카드가 손가락으로 누르기 쉽게 배치됩니다. 같은 메뉴판이라도 큰 벽 메뉴판과 손에 쥐는 작은 메뉴판의 구성이 달라지는 것과 비슷합니다.
첫 버전 앱 생성 프롬프트
이제 앱 빌더형 도구에 넣을 첫 프롬프트를 작성해봅시다. Lovable, Replit Agent, Bolt.new 같은 도구에 넣기 좋은 형태입니다. 도구마다 결과는 조금씩 다르지만, 요청 구조는 비슷하게 사용할 수 있습니다.
중요한 점은 "할 일 앱 만들어줘"라고 짧게 말하지 않는 것입니다. 내가 누구인지, 어떤 앱을 원하는지, 어떤 기능을 넣고 뺄지, 어떤 화면을 원하는지 말해야 합니다.
나는 코딩을 모르는 초보자입니다.
개인 업무와 일상 할 일을 관리하는 간단한 웹앱을 만들고 싶습니다.
앱의 목적:
사용자가 오늘 해야 할 일을 입력하고, 완료 여부를 체크하고, 필요 없는 항목을 삭제할 수 있게 해주세요.
사용 대상:
직장인, 프리랜서, 학생처럼 하루 할 일을 간단히 정리하고 싶은 사람입니다.
첫 버전에 필요한 기능:
1. 할 일 입력창과 추가 버튼
2. 할 일 목록 표시
3. 각 할 일마다 완료 체크박스
4. 완료된 할 일은 취소선 또는 연한 색으로 표시
5. 각 할 일마다 삭제 버튼
6. 우선순위 선택: 높음, 보통, 낮음
7. 우선순위에 따라 색상 배지 표시
화면 구성:
- 상단에는 앱 제목 "오늘의 할 일"을 보여주세요.
- 그 아래에 할 일 입력창, 우선순위 선택, 추가 버튼을 배치해주세요.
- 그 아래에 할 일 목록을 카드 형태로 보여주세요.
- 각 카드에는 체크박스, 할 일 내용, 우선순위 배지, 삭제 버튼이 있어야 합니다.
디자인 분위기:
깔끔하고 밝은 생산성 앱 느낌으로 만들어주세요.
흰색 배경, 부드러운 회색 테두리, 파란색 포인트 컬러를 사용해주세요.
모바일에서도 버튼을 누르기 쉽게 만들어주세요.
처음 버전에서 제외할 기능:
로그인, 회원가입, 팀 공유, 알림, 캘린더 연동, 반복 일정 기능은 넣지 마세요.
MVP로 작고 단순하게 만들어주세요.
코드 설명보다 먼저 작동하는 화면을 만드는 데 집중해주세요.이 프롬프트의 핵심은 범위를 잘라냈다는 점입니다. 로그인도 없고, 알림도 없고, 캘린더도 없습니다. 대신 할 일 앱의 중심인 추가, 체크, 삭제, 우선순위만 분명하게 요청했습니다.
결과물을 처음 확인할 때 보는 순서
앱이 생성되면 바로 디자인부터 평가하고 싶어질 수 있습니다. 하지만 처음에는 예쁜지보다 작동하는지가 먼저입니다. 다음 순서로 확인해보세요.
첫째, 할 일을 입력하고 추가 버튼을 눌렀을 때 목록에 나타나는지 봅니다. "보고서 작성", "우유 사기", "강의 자료 확인"처럼 서로 다른 예시를 3개 정도 넣어보세요.
둘째, 완료 체크박스를 눌렀을 때 화면이 바뀌는지 봅니다. 체크가 표시되고, 완료된 항목이라는 느낌이 나야 합니다. 취소선이 생기거나 글자 색이 연해지면 충분합니다.
셋째, 삭제 버튼이 작동하는지 확인합니다. 한 항목만 삭제했는데 전체 목록이 사라지지는 않는지, 삭제 버튼을 눌렀을 때 오류가 나지는 않는지 살펴봅니다.
넷째, 우선순위가 눈에 보이는지 확인합니다. "높음"은 빨간색, "보통"은 노란색이나 파란색, "낮음"은 회색이나 초록색처럼 구분되면 좋습니다. 색은 취향의 문제가 아니라 정보를 빠르게 알아보기 위한 장치입니다.
이 네 가지가 작동하면 첫 성공입니다. 아직 부족해 보여도 괜찮습니다. 바이브 코딩은 한 번에 완성하는 일이 아니라, 결과물을 보고 다시 요청하는 과정입니다.
1차 수정: 카테고리와 마감일 추가하기
첫 버전이 잘 작동한다면 이제 한 단계 확장해봅시다. 할 일 목록은 많아질수록 구분이 필요합니다. 모든 일이 한 줄로 섞이면 앱을 써도 다시 헷갈립니다.
이번에는 카테고리와 마감일을 추가합니다. 카테고리는 업무, 개인, 심부름 세 가지로 시작하겠습니다. 너무 많은 카테고리를 만들면 오히려 입력이 귀찮아집니다. 초보자용 앱에서는 선택지가 적을수록 쓰기 쉽습니다.
현재 할 일 관리 앱에 카테고리와 마감일 기능을 추가해주세요.
추가할 기능:
1. 할 일을 추가할 때 카테고리를 선택할 수 있게 해주세요.
- 카테고리: 업무, 개인, 심부름
2. 할 일을 추가할 때 마감일을 선택할 수 있게 해주세요.
3. 목록 카드에 카테고리와 마감일을 함께 표시해주세요.
4. 마감일이 오늘이면 "오늘 마감" 배지를 보여주세요.
5. 마감일이 지난 미완료 할 일은 눈에 띄게 표시해주세요.
주의할 점:
- 기존의 할 일 추가, 완료 체크, 삭제, 우선순위 기능은 그대로 유지해주세요.
- 화면이 복잡해지지 않도록 입력 영역을 깔끔하게 정리해주세요.
- 모바일에서도 카테고리 선택과 날짜 선택이 쉽게 가능해야 합니다.여기서 중요한 표현은 "기존 기능은 그대로 유지"입니다. AI 앱 빌더에게 기능 추가를 요청할 때는 새 기능만 말하면 기존 기능이 약해지거나 사라지는 경우가 있습니다. 그래서 반드시 유지할 기능을 함께 적어주는 것이 좋습니다.
2차 수정: 필터와 정렬 추가하기
카테고리와 마감일이 생기면 다음으로 필요한 것은 필터와 정렬입니다. 할 일이 3개일 때는 필요 없지만, 10개만 넘어가도 목록을 나눠 보고 싶어집니다.
필터는 "업무만 보기", "개인만 보기", "완료 안 된 일만 보기"처럼 원하는 항목만 보여주는 기능입니다. 정렬은 "마감일 빠른 순", "우선순위 높은 순"처럼 순서를 바꾸는 기능입니다.
할 일 관리 앱에 필터와 정렬 기능을 추가해주세요.
필터 기능:
1. 전체 보기
2. 미완료만 보기
3. 완료된 일만 보기
4. 카테고리별 보기: 업무, 개인, 심부름
5. 오늘 마감만 보기
정렬 기능:
1. 최근 추가한 순
2. 마감일 빠른 순
3. 우선순위 높은 순
화면 구성 요청:
- 할 일 입력 영역 아래에 필터 버튼 또는 선택 메뉴를 배치해주세요.
- 정렬 선택은 너무 크게 보이지 않게 오른쪽 또는 필터 영역 아래에 배치해주세요.
- 현재 선택된 필터가 무엇인지 사용자가 알 수 있게 표시해주세요.
주의할 점:
- 초보자도 이해하기 쉬운 한국어 문구를 사용해주세요.
- 기능이 늘어나도 화면이 답답해 보이지 않게 해주세요.
- 모바일에서는 필터 버튼이 두 줄로 자연스럽게 내려가도 괜찮습니다.처음부터 필터와 정렬을 넣지 않고 두 번째, 세 번째 단계에서 추가하는 이유가 있습니다. 한 번에 많이 넣으면 오류가 났을 때 원인을 찾기 어렵습니다. "카테고리를 추가한 뒤 괜찮았다. 필터를 추가하니 이상해졌다." 이렇게 단계가 나뉘어 있으면 수정 요청도 쉬워집니다.
모바일에서 누르기 쉬운 디자인으로 바꾸기
할 일 앱은 스마트폰에서 자주 씁니다. 출근길 지하철에서, 장 보러 가는 길에, 회의 직전에 빠르게 확인하는 경우가 많습니다. 그래서 모바일 화면에서 버튼이 작거나 간격이 좁으면 금방 쓰기 싫어집니다.
컴퓨터 화면에서는 괜찮아 보였는데 스마트폰에서 버튼이 너무 작게 보일 수 있습니다. 삭제 버튼이 체크박스와 너무 가까우면 실수로 삭제할 수도 있습니다. 입력창이 화면 밖으로 밀리거나, 필터 버튼이 너무 촘촘하게 붙을 수도 있습니다.
이럴 때는 "반응형으로 해줘"라고만 말하기보다, 어떤 사용 상황에서 무엇을 고쳐야 하는지 설명해야 합니다.
이 할 일 관리 앱을 모바일에서 더 쓰기 쉽게 개선해주세요.
개선 목표:
스마트폰에서 한 손으로 사용할 때도 입력, 체크, 삭제, 필터 선택이 편해야 합니다.
구체적인 수정 요청:
1. 모바일 화면에서 할 일 입력창과 추가 버튼이 너무 작지 않게 해주세요.
2. 체크박스와 삭제 버튼 사이의 간격을 넉넉하게 만들어주세요.
3. 삭제 버튼은 실수로 누르지 않도록 카드 오른쪽 끝에 배치하고, 크기를 적당히 키워주세요.
4. 할 일 카드의 높이를 너무 낮게 만들지 말고 손가락으로 누르기 편하게 해주세요.
5. 필터 버튼은 모바일에서 가로로 무리하게 끼워 넣지 말고, 필요하면 두 줄로 배치해주세요.
6. 긴 할 일 내용이 들어와도 화면이 깨지지 않고 줄바꿈되게 해주세요.
디자인 분위기:
깔끔한 모바일 생산성 앱 느낌을 유지해주세요.이 프롬프트는 단순히 예쁘게 해달라는 요청이 아닙니다. 손가락으로 누르는 상황을 기준으로 설명합니다. 바이브 코딩에서 좋은 디자인 요청은 "감성"과 "사용 상황"을 함께 말합니다.
삭제 전 확인창 추가하기
삭제 기능은 편리하지만 조심해야 합니다. 특히 할 일 앱에서는 실수로 누른 삭제가 불편함을 만듭니다. 사용자가 힘들게 입력한 할 일이 한 번에 사라지면 앱에 대한 신뢰가 떨어집니다.
그래서 삭제 전 확인창을 추가해보겠습니다. 확인창은 "정말 삭제할까요?"라고 한 번 더 묻는 작은 안전장치입니다. 고급 기능은 아니지만 실제 앱에서는 매우 중요합니다.
삭제 버튼을 누를 때 바로 삭제하지 말고 확인창을 보여주도록 수정해주세요.
요청 사항:
1. 사용자가 삭제 버튼을 누르면 "이 할 일을 삭제할까요?"라는 확인창을 보여주세요.
2. 확인창에는 "삭제"와 "취소" 버튼을 넣어주세요.
3. 사용자가 "삭제"를 누른 경우에만 해당 할 일이 삭제되게 해주세요.
4. "취소"를 누르면 아무 변화 없이 목록으로 돌아가게 해주세요.
5. 삭제 확인 문구는 너무 무섭지 않고 간단한 한국어로 작성해주세요.
주의할 점:
- 다른 할 일 항목에는 영향을 주지 않아야 합니다.
- 완료 체크, 필터, 정렬 기능은 그대로 유지해주세요.이 기능은 이후 다른 앱에도 그대로 응용할 수 있습니다. 독서 기록 삭제, 예약 문의 삭제, 프롬프트 삭제, 운동 기록 삭제처럼 사용자가 만든 데이터를 지울 때는 확인 단계를 넣는 것이 좋습니다.
완료 개수 표시 추가하기
생산성 앱은 작은 성취감을 주어야 합니다. "전체 8개 중 5개 완료"라는 문구를 보면 사용자는 진행 상황을 한눈에 알 수 있습니다. 이 기능은 어렵지 않지만 앱의 완성도를 크게 높여줍니다.
할 일 목록 상단에 완료 개수와 진행률을 표시해주세요.
추가할 내용:
1. 전체 할 일 개수
2. 완료된 할 일 개수
3. 미완료 할 일 개수
4. "전체 8개 중 5개 완료" 같은 한국어 문구
5. 가능하다면 간단한 진행률 바도 추가해주세요.
표시 위치:
- 앱 제목 아래 또는 필터 영역 위에 배치해주세요.
주의할 점:
- 필터가 적용되어도 전체 기준 개수와 현재 보이는 목록 기준이 헷갈리지 않게 해주세요.
- 문구는 초보자가 이해하기 쉽게 작성해주세요.
- 모바일에서도 진행률 바가 너무 작지 않게 해주세요.이 요청에서 한 가지 주의할 점이 있습니다. 필터가 있을 때 개수를 어떻게 셀지 헷갈릴 수 있습니다. 예를 들어 "업무"만 보고 있을 때 전체 개수를 보여줄지, 업무 카테고리 안에서의 개수를 보여줄지 정해야 합니다. 처음에는 단순하게 전체 기준으로 표시해도 충분합니다. 나중에 필요하면 "현재 필터 기준 개수도 함께 표시해줘"라고 추가 요청하면 됩니다.
흔한 오류와 수정 프롬프트
앱을 만들다 보면 거의 반드시 작은 오류를 만납니다. 오류가 나온다고 실패한 것이 아닙니다. 오히려 오류를 설명하고 고치는 과정이 바이브 코딩의 핵심 연습입니다.
추가 버튼을 눌러도 목록에 안 생길 때
할 일 입력창에 내용을 적고 추가 버튼을 눌러도 목록에 새 할 일이 나타나지 않습니다.
확인하고 수정해주세요:
1. 입력창의 값이 제대로 읽히는지 확인해주세요.
2. 추가 버튼을 눌렀을 때 새 할 일이 목록 데이터에 저장되는지 확인해주세요.
3. 저장된 할 일이 화면 목록에 다시 렌더링되는지 확인해주세요.
4. 빈 내용은 추가되지 않게 해주세요.
5. 수정 후 어떤 부분을 고쳤는지 초보자도 이해할 수 있게 간단히 설명해주세요.여기서 "렌더링"이라는 말이 나왔습니다. 렌더링은 앱의 데이터가 화면에 보이도록 그려지는 일을 말합니다. 장부에 적힌 주문을 손님용 전광판에 표시하는 것과 비슷합니다.
완료 체크가 바로 풀리거나 저장되지 않을 때
할 일의 완료 체크박스를 눌러도 체크 상태가 유지되지 않습니다.
새로고침하거나 다른 버튼을 누르면 완료 상태가 사라집니다.
수정 요청:
1. 각 할 일 항목에 완료 상태가 저장되도록 해주세요.
2. 체크박스를 누르면 해당 항목만 완료 또는 미완료로 바뀌게 해주세요.
3. 다른 할 일의 상태는 바뀌지 않게 해주세요.
4. 완료된 항목은 취소선과 연한 색으로 계속 표시되게 해주세요.
5. 현재 앱에서 사용하는 저장 방식에 맞게 수정해주세요.첫 버전 앱은 브라우저 안에서만 임시 저장될 수도 있습니다. 앱을 새로고침하면 데이터가 사라질 수 있다는 뜻입니다. 이 단계에서는 괜찮습니다. 나중에 로컬 저장이나 데이터베이스를 붙이면 더 오래 저장할 수 있습니다. 중요한 것은 지금 단계에서 완료 체크가 화면 안에서 제대로 작동하는지입니다.
삭제 버튼을 누르면 엉뚱한 항목이 삭제될 때
삭제 버튼을 누르면 내가 선택한 할 일이 아니라 다른 할 일이 삭제되는 문제가 있습니다.
수정 요청:
1. 각 할 일 항목을 구분할 수 있는 고유한 ID를 사용해주세요.
2. 삭제 버튼을 누른 항목만 삭제되도록 로직을 확인해주세요.
3. 필터나 정렬이 적용된 상태에서도 정확한 항목이 삭제되어야 합니다.
4. 삭제 전 확인창은 유지해주세요.
5. 수정 후 테스트할 수 있는 예시를 함께 알려주세요.여기서 ID는 각 항목의 이름표 같은 것입니다. 같은 이름의 사람이 두 명 있을 때 사번이나 학번으로 구분하듯, 앱도 각 할 일을 구분할 고유한 표시가 필요합니다.
우선순위 정렬이 이상할 때
우선순위 높은 순 정렬이 제대로 작동하지 않습니다.
높음, 보통, 낮음 순서로 보여야 하는데 순서가 섞여 보입니다.
수정 요청:
1. 우선순위 정렬 기준을 높음 > 보통 > 낮음 순서로 명확히 설정해주세요.
2. 단순히 가나다순으로 정렬하지 않게 해주세요.
3. 같은 우선순위 안에서는 최근 추가한 순으로 보여주세요.
4. 정렬을 바꿔도 완료 체크와 삭제 기능이 유지되게 해주세요.AI가 만든 앱에서 "높음, 보통, 낮음"을 문자 그대로 정렬하면 이상한 순서가 나올 수 있습니다. 그래서 우선순위의 의미를 명확히 알려줘야 합니다.
모바일에서 화면이 깨질 때
모바일 화면에서 할 일 카드와 버튼이 겹치거나 화면 밖으로 밀려납니다.
수정 요청:
1. 모바일 화면 너비에 맞게 전체 레이아웃을 반응형으로 수정해주세요.
2. 할 일 카드 안의 텍스트가 길면 줄바꿈되게 해주세요.
3. 우선순위 배지, 마감일, 삭제 버튼이 서로 겹치지 않게 배치해주세요.
4. 작은 화면에서는 카드 내부 요소를 세로로 배치해도 괜찮습니다.
5. 버튼은 손가락으로 누르기 편한 크기와 간격을 유지해주세요.화면이 깨졌을 때는 "예쁘게 고쳐줘"보다 "어디가 어떻게 깨지는지"를 알려주는 편이 좋습니다. 가능하다면 스크린샷을 함께 보여주면 더 좋습니다.
더 실용적인 앱으로 만드는 응용 아이디어
첫 버전이 안정적으로 작동한다면 다음 단계로 확장할 수 있습니다. 다만 모든 기능을 한꺼번에 붙이지 말고 하나씩 추가하세요.
예를 들어 직장인용으로 쓰고 싶다면 "업무, 회의, 보고, 연락" 같은 카테고리를 만들 수 있습니다. 강사용으로 쓰고 싶다면 "강의 준비, 과제 확인, 수강생 연락, 자료 업로드"로 바꿀 수 있습니다. 가족용으로 쓰고 싶다면 "장보기, 집안일, 아이 준비물, 병원/예약" 같은 카테고리가 더 적합합니다.
조금 더 발전시키면 다음 기능도 생각해볼 수 있습니다.
자주 쓰는 할 일을 템플릿으로 저장하기
오늘 할 일과 이번 주 할 일을 나눠 보기
완료한 할 일을 숨기거나 아래로 보내기
마감일이 지난 할 일을 상단에 표시하기
할 일 검색 기능 추가하기
카테고리별 완료율 보여주기
하지만 아직 로그인, 팀 공유, 푸시 알림, 캘린더 연동은 서두르지 않아도 됩니다. 특히 여러 사람이 동시에 쓰는 앱은 권한 관리와 데이터 저장 문제가 생깁니다. 이건 나중 단계입니다. 지금은 개인이 쓰는 작은 앱을 안정적으로 만드는 것이 더 중요합니다.
점검 프롬프트: AI에게 스스로 문제를 찾게 하기
앱이 어느 정도 만들어졌다면 AI에게 점검을 요청해보세요. 초보자는 무엇이 문제인지조차 모를 때가 많습니다. 이럴 때 "이 앱의 문제점을 찾아줘"라고 요청하면 다음 수정 방향을 잡는 데 도움이 됩니다.
지금 만든 할 일 관리 앱을 초보 사용자 관점에서 점검해주세요.
점검 기준:
1. 처음 쓰는 사람이 사용법을 바로 이해할 수 있는가?
2. 할 일 추가, 완료 체크, 삭제 흐름이 자연스러운가?
3. 우선순위, 카테고리, 마감일 표시가 헷갈리지 않는가?
4. 모바일에서 버튼을 누르기 편한가?
5. 삭제 실수를 막는 장치가 있는가?
6. 한국어 문구가 어색하지 않은가?
7. 첫 버전 MVP에 비해 기능이 너무 많아지지는 않았는가?
출력 형식:
- 잘된 점 3가지
- 개선할 점 5가지
- 지금 바로 고치면 좋은 것 3가지
- 나중에 해도 되는 것 3가지이 프롬프트는 앞으로 거의 모든 앱에 재사용할 수 있습니다. 앱을 만들고 나면 늘 "잘된 점, 개선할 점, 지금 고칠 것, 나중에 할 것"으로 나눠보세요. 그래야 끝없이 기능을 붙이다가 지치지 않습니다.
실습 미션
이번 장의 목표는 보기 좋은 앱을 한 번에 만드는 것이 아닙니다. 할 일 관리 앱의 기본 상호작용을 직접 경험하는 것입니다. 아래 순서대로 진행해보세요.
첫 앱 생성 프롬프트를 앱 빌더형 도구에 넣어 할 일 관리 앱을 만듭니다.
"보고서 작성", "운동 30분", "세탁소 들르기" 세 가지 할 일을 추가합니다.
하나를 완료 체크하고 화면이 바뀌는지 확인합니다.
하나를 삭제하고 나머지 항목이 유지되는지 확인합니다.
우선순위 높음, 보통, 낮음을 각각 넣어 색상 표시가 구분되는지 확인합니다.
카테고리와 마감일 추가 프롬프트를 넣어 1차 수정합니다.
필터와 정렬 추가 프롬프트를 넣어 2차 수정합니다.
모바일 화면에서 버튼 크기와 간격을 확인합니다.
삭제 전 확인창을 추가합니다.
완료 개수 표시를 추가합니다.
시간이 부족하다면 1번부터 5번까지만 해도 괜찮습니다. 첫 앱 실습에서 가장 중요한 것은 "내 요청이 화면과 기능으로 바뀌는 경험"입니다.
앱 만들기 전 작은 체크리스트
할 일 관리 앱을 만들기 전, 아래 질문에 답해보세요. 답을 적어두면 프롬프트가 훨씬 선명해집니다.
이 앱은 나 혼자 쓸 앱인가, 다른 사람과 공유할 앱인가?
할 일은 하루 단위로 관리할 것인가, 주간 단위로 관리할 것인가?
우선순위는 꼭 필요한가?
카테고리는 몇 개면 충분한가?
마감일이 꼭 필요한가?
완료된 일은 계속 보여줄 것인가, 숨길 것인가?
모바일에서 주로 쓸 것인가, 컴퓨터에서 주로 쓸 것인가?
로그인 없이 써도 되는가?
삭제한 할 일을 복구해야 하는가?
처음 버전에서 빼도 되는 기능은 무엇인가?
이 질문에 답하다 보면 앱의 범위가 자연스럽게 줄어듭니다. 범위가 줄어들수록 첫 성공 가능성은 올라갑니다.
흔한 실수와 고치는 방법
초보자가 할 일 앱을 만들 때 가장 흔한 실수는 기능을 너무 빨리 늘리는 것입니다. 첫 화면이 제대로 작동하기 전에 카테고리, 마감일, 필터, 통계, 알림을 한꺼번에 요청하면 수정이 어려워집니다. 해결 방법은 간단합니다. 추가, 체크, 삭제가 먼저입니다. 그다음 우선순위, 그다음 카테고리, 그다음 필터로 가세요.
두 번째 실수는 삭제 기능을 너무 가볍게 보는 것입니다. 내가 직접 쓰는 앱이라도 삭제 전 확인창은 넣는 편이 좋습니다. 작은 안전장치는 앱을 더 믿고 쓰게 만듭니다.
세 번째 실수는 모바일 화면을 마지막에야 확인하는 것입니다. 할 일 앱은 스마트폰에서 자주 쓰기 때문에, 초반부터 모바일 사용성을 봐야 합니다. 버튼이 작거나 서로 붙어 있으면 아무리 기능이 좋아도 손이 가지 않습니다.
네 번째 실수는 저장 방식을 확인하지 않는 것입니다. 어떤 앱은 새로고침하면 데이터가 사라질 수 있습니다. 첫 MVP에서는 괜찮지만, 실제로 매일 쓰려면 로컬 저장이나 데이터베이스 저장이 필요할 수 있습니다. 이 부분은 아직 깊게 들어가지 않아도 됩니다. 다만 "내 데이터가 언제까지 남는가?"라는 질문은 꼭 해봐야 합니다.
이번 장에서 만든 프롬프트를 내 상황에 맞게 바꾸기
같은 할 일 앱이라도 사용자에 따라 표현이 달라집니다. 직장인이라면 업무 중심으로, 부모라면 가족 일정과 심부름 중심으로, 강사라면 강의 준비 중심으로 바꾸면 됩니다.
직장인용으로 바꾸고 싶다면 이렇게 시작할 수 있습니다.
나는 직장인입니다.
매일 처리해야 하는 업무를 우선순위와 마감일 기준으로 정리하는 간단한 할 일 관리 웹앱을 만들고 싶습니다.
카테고리는 보고, 회의, 연락, 개인 업무로 구성해주세요.가족용으로 바꾸고 싶다면 이렇게 바꿀 수 있습니다.
나는 가족의 장보기와 집안일을 정리하고 싶습니다.
가족이 함께 볼 수 있는 아주 간단한 할 일 목록 웹앱을 만들고 싶습니다.
카테고리는 장보기, 집안일, 아이 준비물, 병원/예약으로 구성해주세요.
처음 버전에서는 로그인과 가족별 권한 기능은 제외해주세요.강사용으로 바꾸고 싶다면 이렇게 요청할 수 있습니다.
나는 강사입니다.
강의 준비 과정을 관리하는 할 일 앱을 만들고 싶습니다.
카테고리는 강의자료, 수강생 연락, 과제 확인, 강의장 준비로 구성해주세요.
각 할 일에는 마감일과 우선순위를 표시하고, 완료된 항목은 아래로 내려가게 해주세요.이처럼 앱의 구조는 비슷하지만, 단어를 내 상황에 맞게 바꾸면 훨씬 쓸모 있는 앱이 됩니다. 바이브 코딩은 도구를 잘 다루는 기술이기도 하지만, 내 상황을 구체적인 언어로 바꾸는 기술이기도 합니다.
한 장 요약
할 일 관리 앱은 단순해 보이지만 대부분의 업무용 앱에 들어가는 목록 관리의 기본형입니다. 이번 장에서는 할 일 추가, 완료 체크, 삭제, 우선순위 표시를 첫 버전으로 만들고, 이후 카테고리, 마감일, 필터, 정렬, 모바일 최적화, 삭제 전 확인창, 완료 개수 표시를 단계적으로 추가했습니다.
중요한 원칙은 한 번에 완벽한 앱을 요구하지 않는 것입니다. 먼저 작동하는 작은 앱을 만들고, 결과를 확인한 뒤, 필요한 기능을 하나씩 요청해야 합니다. 기능을 추가할 때는 기존 기능을 유지해달라고 분명히 말하는 것도 잊지 마세요.
이번 장에서 익힌 추가, 체크, 삭제, 필터, 정렬은 앞으로 만들 앱에서도 계속 반복됩니다. 강의 후기 수집 앱에서는 후기 목록을 관리하고, 예약 문의 앱에서는 문의 목록을 관리하며, 프롬프트 보관함 앱에서는 저장한 프롬프트 목록을 관리합니다.
첫 앱은 작아도 됩니다. 중요한 것은 "내가 말한 기능이 실제 화면에서 움직이는 경험"입니다. 이 경험이 쌓이면, 바이브 코딩은 낯선 유행어가 아니라 내 일과 생활을 조금씩 바꾸는 실용적인 도구가 됩니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.