AI에게 요청하기
드디어 무언가를 만들어 볼 시간입니다. 이번 파트에서는 자기소개 웹페이지를 처음부터 끝까지 완성합니다. 가장 먼저 할 일은 AI에게 우리가 원하는 것을 설명하는 것입니다.
Cursor에서 프로젝트 열기
파트 1에서 만들어 둔 프로젝트를 엽니다.
- Cursor를 실행합니다
- File → Open Folder를 클릭합니다
- 파트 1에서 만든 프로젝트 폴더를 선택합니다 (예:
my-first-site) - 왼쪽에 파일 목록이 보이면 준비 완료입니다
프로젝트 폴더가 어디 있는지 모르겠다면 파트 1의 프로젝트 만들기 절을 다시 확인해 보세요.
AI 채팅창 열기
Cursor에는 AI와 대화할 수 있는 채팅창이 내장되어 있습니다. 열어봅시다.
- 키보드에서 Ctrl + L 을 누릅니다 (Mac은 Cmd + L)
- 화면 오른쪽에 채팅창이 열립니다
- 아래쪽 입력칸에 글을 쓸 수 있습니다
이 채팅창이 바로 AI에게 요청을 보내는 곳입니다. 카카오톡으로 메시지를 보내는 것과 비슷합니다. 다만 상대방이 사람이 아니라 AI입니다.
첫 번째 요청 보내기
채팅창에 다음 문장을 그대로 입력하고 Enter를 누릅니다:
자기소개 페이지를 만들어줘. 이름, 사진, 간단한 소개글이 있는 깔끔한 한 페이지 웹사이트.
잠시 기다리면 AI가 코드를 작성하기 시작합니다. 화면에 코드가 쭉 나타나는 것이 보일 겁니다.
코드 적용하기
AI가 코드를 다 작성하면, 화면에 "Accept All" 버튼이 나타납니다.
- Accept All을 클릭합니다
- 왼쪽 파일 목록에서 파일이 변경된 것을 확인합니다
이것으로 끝입니다. AI가 여러분을 위해 웹페이지 전체를 작성했습니다.
지금 무슨 일이 일어난 건가요?
방금 일어난 일을 정리해 봅시다:
- 여러분이 한국어로 "이런 페이지를 만들어줘"라고 설명했습니다
- AI가 그 설명을 이해했습니다
- AI가 웹페이지를 만드는 코드를 자동으로 작성했습니다
- 여러분이 "Accept All"을 눌러 그 코드를 적용했습니다
코드를 한 줄도 직접 쓰지 않았습니다. 이것이 바이브 코딩입니다.
더 잘 요청하는 방법
AI에게 요청할 때 한 가지 중요한 원칙이 있습니다:
더 자세하게 설명할수록 더 좋은 결과가 나옵니다.
예를 들어 비교해 보세요:
| 간단한 요청 | 자세한 요청 |
|---|---|
| "자기소개 페이지 만들어줘" | "자기소개 페이지를 만들어줘. 이름은 '홍길동'이고, 직업은 '꽃집 운영'이야. 배경은 따뜻한 느낌으로 하고, 아래쪽에 연락처를 넣어줘." |
두 번째 요청이 훨씬 구체적이죠? AI는 구체적인 요청을 받을수록 여러분이 원하는 결과에 가까운 것을 만들어 줍니다.
처음부터 완벽하게 요청할 필요는 없습니다. 일단 간단하게 시작하고, 결과를 보면서 "이 부분을 이렇게 바꿔줘"라고 추가로 요청하면 됩니다. 대화하듯이 진행하세요.
이 절의 요약
- Ctrl + L로 Cursor의 AI 채팅창을 엽니다
- 한국어로 원하는 것을 설명하면 AI가 코드를 작성합니다
- Accept All을 클릭하면 AI가 만든 코드가 적용됩니다
- 자세하게 설명할수록 더 좋은 결과가 나옵니다
- 처음부터 완벽하지 않아도 괜찮습니다. 대화하듯이 수정해 나가면 됩니다