확인할 수 있는 작은 프로젝트
처음에는 개인정보를 저장하지 않는 행사 페이지, 작업물 페이지, 계산기가 좋습니다. 여기서는 가상 견적 계산기를 만듭니다. 수량, 단가, 배송비로 총액을 계산하며 주문을 저장하거나 결제를 받지 않습니다.
1. 요구사항을 적으세요
아래를 AI에 전달하고 자신의 상황에 맞게 바꿔보세요.
한국어 견적 계산기를 만들어 주세요. 수량, 단가, 배송비 입력과 계산 버튼, 총액이 필요합니다. 공식은 수량 × 단가 + 배송비입니다. 수량은 양의 정수, 단가와 배송비는 0 이상이어야 합니다. 입력이 빠지면 어떤 항목인지 알려주세요. 휴대폰과 컴퓨터에서 쓰는 페이지 하나만 만들고 로그인, 결제, 데이터베이스는 넣지 마세요. 먼저 요구사항을 다시 설명하고 확인할 질문을 정리해 주세요.
설명을 따로 저장하세요. 기능을 추가할 때도 먼저 이 문서를 고칩니다. 요구사항 템플릿을 써도 됩니다.
2. 로컬에서 직접 실행하세요
정상적으로 접근하고 프로젝트 파일을 다룰 수 있는 AI 코딩 도구를 고릅니다. 현재 공식 문서대로 프로젝트를 열고, 화면과 입력 항목을 확인한 뒤 계산을 추가하세요.
시작 명령, 입구 파일, 다시 여는 방법을 AI에 설명하게 한 다음 직접 실행합니다. 설명을 보관하고 작은 기능이 완성될 때마다 작동하는 버전을 남기세요. Git을 쓴다면 이번에 무엇이 저장됐는지도 확인합니다.
3. 답을 아는 입력으로 시험하세요
| 입력 | 기대 결과 |
|---|---|
| 수량 10, 단가 12, 배송비 8 | 총액 128 |
| 배송비 0 | 정상 계산 |
| 수량이 비었거나 0 | 양의 정수가 필요하다는 안내 |
| 음수 단가 | 음수 불가 안내 |
휴대폰 폭에서도 입력, 버튼, 결과를 직접 확인합니다. 계산 로직을 바꾸면 같은 예시를 다시 시험하세요. 새 수정이 잘못되면 현재 상태를 남기고 이전 버전으로 복구합니다.
4. 접근 가능한 주소로 배포하세요
실제 프로젝트 구조에 맞춰 호스팅 선택지, 계정, 비용, 배포 순서를 정리하게 하세요. 단순 페이지는 정적 호스팅부터 검토할 수 있습니다. 도메인과 사용 지역에 따른 조건은 선택한 서비스에서 확인합니다.
배포 후 새 브라우저 창에서 주소를 열어 같은 입력을 다시 시험합니다. 모바일 화면, 링크, 새로고침을 확인하고 실패한 배포를 되돌리는 방법도 남기세요. 배포 전 점검표로 확장할 수 있습니다.
배포한 다음
사용할 사람에게 실제로 써보게 하고 막힌 지점을 적으세요. 가장 큰 불편을 먼저 고친 뒤 내보내기나 계정을 검토합니다. 기능을 더할 때마다 확인할 예시도 추가하세요.
도움이 필요하면 요구사항, 재현 순서, 오류 원문, 현재 버전을 준비하세요. 15분 무료 상담에서 프로젝트에 맞는 수업인지 확인할 수 있습니다.
자주 묻는 질문
HTML, CSS, JavaScript를 먼저 배워야 하나요?
첫 프로젝트는 무엇이 좋나요?
서버를 꼭 사야 하나요?
얼마나 걸리나요?
이어 읽기
- Vibe Coding과 더 넓은 작업 — 설명, 실행, 확인, 재사용
- 배포 전 점검표 — 프로젝트에 맞는 항목 선택
- 한 장 작업 설명 — 첫 버전의 범위부터 정하기
