개념만 배우던 시리즈 ①②를 졸업하고,
오늘은 Cursor로 실제 작동하는 웹앱을 직접 완성합니다.
오늘 수업이 끝나면 여러분의 PC에는 이런 웹앱이 생깁니다.
┌──────────────────────────────────────────────┐
│ ☕ 커피 내기 룰렛 | AX팀 │
├─────────────────────┬────────────────────────┤
│ │ ☕ 참가자 명단 │
│ ▼ (포인터) │ │
│ ┌──────────┐ │ [ 이름 입력 ] [추가] │
│ │ 🎡 룰렛 │ │ │
│ │ 휠 │ │ ● 김팀장 ✕ │
│ └──────────┘ │ ● 이과장 ✕ │
│ │ ● 박대리 ✕ │
│ [ 돌려라! ☕ ] │ ● 최주임 ✕ │
└─────────────────────┴────────────────────────┘
버튼 하나로 이름이 들어간 컬러풀한 휠이 돌아가고, 멈추면 당첨자 팝업이 뜹니다. 완성된 앱을 미리 볼 수 있어요.
🎡 완성된 룰렛 미리 보기 →Cursor는 AI가 내장된 코드 편집기예요. 마이크로소프트 메모장처럼 파일을 열고 편집하는 프로그램인데, 여기에 AI 채팅창이 달려 있습니다.
Week 9에서 Plan 모드를 배웠죠. 오늘 직접 써봅니다.
Plan 모드 = AI가 코드 작성 전에 "이렇게 하겠습니다" 계획을 먼저 보여주는 기능. 사람이 승인하면 그때 코드를 씁니다.
AI에게 요청할 내용을 프롬프트(지시문)라고 해요. 아래 프롬프트를 그대로 복사해서 Cursor 채팅창에 붙여넣기 하세요.
프롬프트에는 두 가지가 들어 있어요:
| 항목 | 설명 | 예시 |
|---|---|---|
| 기능 설명 | 무엇을 만들지 | "이름 추가/삭제", "휠 돌아감" |
| 디자인 방향 | 어떻게 생겼으면 하는지 | "다크 모드", "컬러풀" |
| 제약 조건 | 형식, 파일 구조 | "파일 하나로" |
| 플랜 요청 | 계획 먼저 보기 | "계획을 먼저 보여줘" |
프롬프트를 보내면 AI가 코드 대신 단계별 계획을 먼저 보내줍니다. 이렇게 생겼어요.
"좋아, 진행해줘"를 보내면 AI가 코드를 작성하기 시작합니다.
처음 결과가 완벽하지 않아도 괜찮아요. Vibe 코딩의 핵심은 대화로 다듬어 가는 것입니다.
| 이렇게 말하면 | 이렇게 말하면 더 좋아요 |
|---|---|
| "예뻐 보이게 해줘" | "버튼 색을 초록색으로 바꾸고 둥글게 해줘" |
| "좀 고쳐줘" | "당첨자 이름 글자가 너무 작아. 두 배로 키워줘" |
| "이상해" | "스핀 버튼을 눌러도 아무 반응이 없어. 고쳐줘" |
| 오늘 배운 것 | 핵심 |
|---|---|
| Cursor 준비 | 폴더 열기 → index.html 만들기 → 시작 |
| Plan 모드 | 코드 전에 계획 먼저 → 검토 → "좋아, 진행해" |
| 프롬프트 작성 | 기능 + 디자인 + 제약 조건 + "계획 먼저" |
| 결과 확인 | Ctrl+S 저장 → HTML 더블클릭 → 브라우저에서 테스트 |
| 수정 요청 | 구체적으로 ("빨간색으로", "더 크게", "오른쪽에") |
| 공유 | index.html 파일 하나를 팀 채팅에 첨부 |
오늘로 개념 → 실전 전환을 완료했습니다.
다음 수업부터는 오늘 만든 룰렛을 업그레이드하거나,
새로운 미니 프로젝트에 도전해봐요!