AI로 첫 번째 앱 만들기

AI를 처음 써서 앱을 만들려고 하면 막막하게 느껴질 수 있습니다. 어디서 시작해야 할지, 어떻게 말해야 할지 몰라서요. 이 가이드는 그 막막함을 없애주는 5단계 과정입니다.

시작 전에 정할 것

만들 앱의 목적을 한 문장으로 정리하세요. “할 일을 추가하고 완료 체크할 수 있는 To-do 앱”처럼 구체적일수록 좋습니다.

아이디어를 구체화하기

막연한 “메모 앱”보다는 “제목과 본문이 있고, 날짜별로 정렬되는 메모 앱”처럼 기능 목록을 3~5개로 정리하세요. 처음엔 적을수록 좋습니다.

첫 프롬프트 — 뼈대 요청

AI에게 전체 구조를 먼저 잡아달라고 요청합니다.

React로 간단한 To-do 앱을 만들어줘.
기능:
- 할 일 텍스트를 입력하고 추가 버튼 누르면 목록에 추가
- 각 항목 옆에 체크박스로 완료 표시
- 완료된 항목은 취소선으로 표시

기술: React hooks만 사용, 스타일은 Tailwind CSS

결과물 확인하고 피드백

AI가 코드를 만들어주면 바로 실행해봅니다. 눈에 띄는 문제가 있으면 구체적으로 말해주세요.

버튼 색상을 파란색으로 바꾸고,
입력창은 더 넓게 만들어줘 (full-width로).
할 일이 없을 때는 "아직 할 일이 없어요" 메시지를 보여줘.

기능 하나씩 추가

처음부터 모든 기능을 요청하면 코드가 복잡해집니다. 핵심이 작동하면 기능을 하나씩 붙여나가세요.

완료된 항목만 숨기는 "완료 숨기기" 토글 버튼을 추가해줘.
버튼은 오른쪽 상단에 배치해줘.

배포하기

코드가 마음에 들면 VIBEE 배포 기능을 통해 바로 인터넷에 올릴 수 있습니다. 별도 서버 설정 없이 URL 하나로 공유할 수 있어요.

5단계 가이드