바로바로 바이브 코딩 with 커서 AI · 01장 바이브 코딩 시작하기 · 01.4 바이브 코딩 시작하기
바로 01 애플 사이트 따라 만들기
이제부터 복잡한 코드를 직접 써 내려가는 대신 커서와 대화하며 만들고 싶은 결과물을 정확히 설명하고 이해시키는 법을 배울 겁니다. 커서가 제안하는 결과물을 확인하고 마음에 들 때까지 구체적으로 수정을 요청하는 요령이나 내장 브라우저와 실행 환경 같은 강력한 도구들을 활용해 어려운 작업을 순식간에 끝내는 방법도 자연스럽게 익혀봅시다.
기억하고 있나요?
- 커서의 자체 개발 모델로 코드 문맥을 잘 파악하고 빠른 속도가 특징인 모델은 무엇인가요?
- 정답: Composer
커서가 세우는 계획을 검토하다 보면 자주 보이는 단어나 개념이 생길텐데 책에서 차근차근 설명할 예정이니 다 이해하려고 하지 말고 일단 가벼운 마음으로 따라와주세요. 자, 그럼 설레는 마음으로 본격적인 첫 실습을 시작해보겠습니다.
가장 먼저 애플 사이트와 비슷한 사이트를 따라 만들겠습니다. 이 과정을 통해 여러분은 커서의 에이전틱한 동작과 함께 놀라울 정도로 완성도가 높은 결과물을 볼 수 있을 겁니다. 여러분이 이 과정을 통해 만들 수 있는 결과물은 다음과 같습니다.
놀랍지 않나요? 이 사이트는 단 몇 줄의 프롬프트로 완성할 수 있습니다. 그럼 지금부터 본격적인 바이브 코딩 세계로 들어가봅시다.
실습 파일 준비하고 폴더 생성하기
가장 먼저 사이트에 사용할 이미지를 내려받고 준비해야 합니다. 다음 링크의 폴더에서 상품 이미지를 내려받으세요. 파일은 아무 데나 내려받아도 됩니다. 어차피 나중에 커서에게 시켜서 모두 알아서 정리하게 할 겁니다.
- 독자 제공용 파일 링크 : bit.ly/4iTGFh2
NOTE
실습에 필요한 자료는 모두 ‘독자 제공용 파일’에서 내려받을 수 있습니다. 독자 제공용 파일 링크 내 [폴더]에서 실습에 필요한 자료를 확인하세요.
앞서 살펴본 커서의 기능을 바탕으로 애플 사이트를 만들겠습니다. 왼쪽 사이드바에서 [Open Folder]를 눌러 앞으로 실습할 폴더 cursorstudy를 원하는 위치에 만든 다음 [열기]를 눌러 해당 폴더를 여세요. 커서는 열려 있는 폴더의 내용을 모두 참고하여 동작합니다. 만약 다른 파일이나 폴더가 섞여 있다면 불필요한 내용을 참고해 엉뚱하게 동작할 수 있습니다. 따라서 새 작업은 항상 완전히 비어 있는 새 폴더에서 시작해야 한다는 점을 기억하기 바랍니다.
NOTE
‘내 문서’나 ‘바탕 화면’ 등 접근하기 편하고 기억하기 쉬운 곳에 만드는 것을 추천합니다.
Ask모드로 물어보기
파일 탐색기의 cursorstudy 폴더에서 마우스 오른쪽 클릭을 한 다음 [New File]을 눌러 test.html이라는 파일을 하나 만드세요.
파일이 생성되면 중앙에 test.html 파일을 수정할 준비가 됩니다. 오른쪽 채팅 창을 보면 [@Add context]에 test.html 파일이 포함된 것을 확인할 수 있습니다.
NOTE
만약 추가되어 있지 않으면 파일을 채팅 창으로 드래그 앤 드롭하세요.
처음으로 컨텍스트를 사용해보는 장면입니다. 이렇게 파일을 채팅 창에 추가하면 프롬프트와 함께 커서가 test.html 파일을 파악하고 동작합니다.
이제 컨텍스트에 test.html이 있으니 이것에 대해 물어보겠습니다. 커서가 이 파일을 어떻게 파악할까요? 지금은 코드 작업을 할 상황이 아니므로 [Ask] 모드로 물어보겠습니다.
AI 답변
현재 test.html 파일은 비어 있는 상태입니다. HTML 파일은 웹페이지를 만들 때 사용하는 기본적인 파일 형식입니다. HTML 파일의 주요 용도는 다음과 같습니다.
웹페이지의 구조와 내용을 정의합니다.
텍스트, 이미지, 링크 등의 웹 콘텐츠를 표시합니다.
CSS와 JavaScript를 연결하여 웹페이지의 스타일과 동작을 제어합니다. 이 파일이 비어 있는 것을 보니 아직 사용되지 않았거나 새로 생성된 파일인 것 같습니다. 웹페이지를 만들고 싶으시다면, 기본적인 HTML 구조를 추가하는 것부터 시작할 수 있습니다. 필요하면 기본적인 HTML 템플릿을 만들어드릴 수 있습니다.
놀랍게도 커서는 현재 파일이 비어 있다는 것을 알고, 파일의 확장자를 보고 어떤 용도인지 설명해줍니다. 앞서 언급한 컨텍스트를 통해 커서가 이 파일의 구성을 파악하는 겁니다. 이 과정을 통해 커서에게 파일의 주 용도와 상태를 주입했습니다. 우리가 텍스트로 ‘이 파일은 비어 있고, 웹사이트를 만들기 위해 만든 거야’라고 설명할 필요가 없습니다. 이렇게 대화를 통해 컨텍스트를 풍부하게 하는 방식은 이후 작업을 부드럽게 하는 열쇠가 됩니다. 질문을 통해 컨텍스트를 역주입하는 겁니다.
Plan모드로 개발 계획 세워 개발하기
이제 커서에게 애플 사이트를 만들어보자고 하면서 [Plan] 모드로 채팅을 이어가보겠습니다. 모델은 자유롭게 선택하면 됩니다. 저는 [Composer 1] 모델을 선택했습니다.
NOTE
Composer 모델은 계속 업데이트되고 있습니다. 이 책은 Composer 1 모델로 충분히 실습할 수 있지만, 여러분이 학습하는 시점 기준 가장 최신 Composer 모델을 활용해보세요.
프롬프트
https://www.apple.com/kr과 디자인과 레이아웃이 완벽하게 같은 사이트를 만들고 싶어. 상품 이미지는 나중에 줄 테니 우선 디자인과 레이아웃부터 작업할 계획을 세워보자.
그러면 커서가 웹 검색을 직접 하려고 허락을 구합니다. 에이전트 특유의 동작입니다. 사이트 링크를 줬으니 링크를 확인하려고 하는 겁니다. 이때 [Auto-search web]을 체크하기 바랍니다. 그러면 이후 커서가 웹 검색을 해야 할 때 ‘알아서’ 합니다.
커서가 사이트에 접속하여 사이트의 구조를 둘러본 다음 코드를 작성합니다. 이처럼 커서는 코드만 작성하는 것이 아니라 다양한 동작을 할 수 있습니다.
이어서 부족한 정보는 추가 질문을 하고 사용자가 답을 선택할 수 있게 해줍니다. 답을 다 클릭한 후 [Continue]를 누르세요.
NOTE
질문은 상황에 따라 다르게 나옵니다. 고민이 된다면 가장 무난한 선택지인 [A]를 고르면 대부분 괜찮습니다. 커서는 무난한 선택지를 [A]에 두는 경향이 있습니다.
그러면 커서가 계획을 수립해서 결과를 가운데 화면과 채팅 창에 보여주고 대기합니다. [Build]를 누르면 개발을 진행합니다.
잠시 기다리면 요청한 작업을 토대로 커서가 파일을 추가하고 코드를 작성합니다. 작성이 끝나면 어떤 작업을 했는지, 어떻게 실행하면 좋은지도 알려줍니다.
AI 답변
작업을 완료했습니다. Apple.com/kr의 디자인과 레이아웃을 복제했습니다. • HTML 구조 (test.html) ° 고정 헤더 내비게이션 (Apple 로고, 메뉴, 검색/장바구니 아이콘) ° 메인 히어로 섹션(선물 테마 Apple 로고, 텍스트, CTA 버튼) • CSS 스타일링 (styles.css) ° 전역 스타일 및 Apple 브랜드 컬러 변수 ° 헤더 내비게이션 스타일 (고정 바, 반투명 배경) ° 히어로 섹션 스타일(중앙 정렬, 타이포그래피, CTA 버튼) • SVG 로고 (test.html) ° 그라데이션 Apple 로고 (파란색 → 오렌지색) ° 리본 디자인 오버레이 • JavaScript 인터랙션 (script.js) ° 스크롤 시 헤더 배경이 변화합니다. ° 부드러운 호버 효과
- 완료된 작업주요 특징
프롬프트
• Apple의 San Francisco 폰트 스택을 사용합니다. • Apple 브랜드 컬러 적용 (#0071e3 등) • 미니멀한 디자인과 넓은 여백 • 상품 이미지는 나중에 쉽게 교체할 수 있는 구조입니다. 브라우저에서 test.html을 열어 확인하세요. 상품 이미지는 나중에 제공하면 교체할 수 있습니다.
코드 작성 후에는 작성한 파일 목록과 함께 [Undo all], [Keep all], [Review]를 보여줍니다. 수정 내용이 마음에 들면 [Keep all]을 눌러 확정하고, 마음에 들지 않으면 [Undo all]을 눌러 취소합니다. 만약 좀 둘러보고 싶다면 [Review]를 누르면 되는데 보통은 [Keep all]을 눌러 마무리합니다.
완성한 사이트 열어 살펴보고 수정하기
답해준 대로 test.html 파일을 열어봅시다. 왼쪽의 파일 목록 창에서 test.html 파일을 마우스 오른쪽 클릭하고 [Reveal in finder] 또는 [Reveal in explorer]를 누르면 탐색기가 열립니다. 탐색기가 열리면 더블클릭해서 웹브라우저로 HTML 파일을 열어보세요. 그러면 완성된 애플 사이트를 볼 수 있습니다.
이제 상품 이미지를 넣고 미진한 디자인을 더 완벽하게 만들겠습니다. 내려받은 이미지를 파일 탐색 창에 옮기고 모델을 Gemini로 바꾸세요.
디자인은 Composer 모델보다 Gemini 모델이 더 잘해줍니다. 만약 Gemini 모델이 보이지 않으면 모델 선택 드롭다운 메뉴에서 [Add models]를 누른 다음 그림을 참고하여 [View All Models]를 눌러 Gemini 모델을 찾아 ON/OFF 토글 버튼을 ON으로 전환하세요.
그런 다음 컨텍스트에 이미지를 드래그 앤 드롭하세요. 이렇게 하면 커서 채팅 창에서 상품 이미지를 인식할 수 있습니다.
그 상태에서 수정을 요청해봅니다. 이때는 수정 방향이 크지 않으므로 [Agent] 모드로 부탁하면 됩니다.
결과를 보면 놀랍습니다. 상품 이미지를 배치하고 애플 사이트처럼 만들어주었습니다. 커서의 다양한 도구를 활용해서 애플 사이트와 비슷한 사이트를 만들었습니다. 처음이라 정신이 없을 겁니다. 처음 쓰는 도구는 뭐든지 어렵습니다. 걱정 마세요. 실습을 반복하면 커서에 점점 익숙해질 겁니다.