[실전] 코딩 몰라도 OK, Claude와 Cursor로 1시간 만에 '나만의 투두리스트' 웹 배포하기
안녕하세요. 누구나 개발자가 되는 세상, '바이브 코딩' 실전 편입니다.
지난 시간까지 우리는 Cursor 에디터를 설치하고, 최강의 AI 모델인 Claude 3.5 Sonnet을 세팅했습니다. 이제 준비 운동은 끝났습니다. 오늘은 진짜로 '내 손으로 만든 웹사이트'를 세상에 내놓을 차례입니다.
"저는 HTML 태그가 뭔지도 모르는데요?"
괜찮습니다. 오늘 우리는 단 한 줄의 코드도 직접 타이핑하지 않을 겁니다. 오직 한국어(자연어)로만 명령해서, 10분 만에 깔끔한 '투두리스트(To-Do List)' 앱을 만들고, 친구들에게 자랑할 수 있는 링크까지 생성해 보겠습니다.
준비물: 딱 2가지만 있으면 됩니다
- Cursor 에디터: 설치 안 하셨다면 지난 글(설치 가이드)을 보고 오세요.
- Vercel 계정: 만든 사이트를 무료로 배포해 주는 서비스입니다. (이메일 가입)
STEP 1. 프로젝트 폴더 만들기
먼저 바탕화면에 새 폴더를 하나 만듭니다. 이름은 my-todo-list라고 지어주세요.
그리고 Cursor 에디터를 열고, File > Open Folder를 눌러 방금 만든 폴더를 선택합니다.
텅 빈 화면이 나왔나요? 이제 마법을 시작해 봅시다.
STEP 2. AI에게 명령하기 (Composer 활용)
키보드에서 Ctrl + I (Mac은 Cmd + I)를 눌러 Composer(작곡가) 창을 엽니다. 이곳이 바로 우리의 작업 지시서입니다.
아래 프롬프트를 그대로 복사해서 붙여넣으세요.
"HTML, CSS, JavaScript를 사용하여 모던하고 심플한 디자인의 '투두리스트(To-Do List)' 웹 앱을 만들어줘.
기능 요구사항:
1. 할 일을 입력하고 엔터를 치면 목록에 추가되어야 함.
2. 할 일 목록 옆에는 '삭제' 버튼이 있어서 클릭하면 지워져야 함.
3. 할 일을 클릭하면 취소선이 그어지며 '완료' 처리가 되어야 함.
4. 새로고침을 해도 데이터가 날아가지 않게 '로컬 스토리지(Local Storage)'에 저장해줘.
디자인 요구사항:
- 전체적으로 파스텔 톤의 부드러운 색감을 사용해줘.
- 모바일에서도 보기 좋게 반응형으로 만들어줘.
- index.html, style.css, script.js 파일로 나눠서 작성해줘."
입력 후 엔터(Enter)를 치면, Cursor가 "Generating..."이라는 메시지와 함께 3개의 파일(html, css, js)을 순식간에 만들어냅니다.
(Alt Text: Cursor Composer 기능으로 HTML/CSS/JS 파일 생성 중)
생성이 완료되면 [Accept All] (또는 Save All) 버튼을 클릭하세요. 놀랍게도 파일 탐색기에 코드가 채워진 파일들이 생겼을 겁니다.
STEP 3. 결과물 확인하기 (Live Preview)
제대로 만들어졌는지 눈으로 확인해 봐야겠죠?
- Cursor 왼쪽 파일 목록에서
index.html파일을 우클릭합니다. - 'Open with Live Server'를 클릭하거나, 해당 폴더로 가서
index.html파일을 더블클릭해서 크롬 브라우저로 엽니다.
짜잔! 방금 AI가 만들어준 투두리스트가 화면에 떴습니다. 할 일을 입력해 보고, 새로고침도 해보세요. 잘 작동하나요?
다시 Ctrl + I를 누르고 이렇게 말하세요.
"배경색을 좀 더 어두운 다크 모드로 바꿔주고, 버튼을 둥글게 만들어줘."
그러면 AI가 즉시 수정해 줍니다. 이게 바로 '바이브 코딩'입니다.
(Alt Text: AI로 만든 반응형 투두리스트 웹사이트 디자인)
STEP 4. 전 세계에 배포하기 (Vercel)
지금은 내 컴퓨터에서만 보입니다. 이제 친구들에게 링크를 보내줄 수 있도록 인터넷에 올리는 '배포(Deployment)'를 해봅시다. 서버 비용은 평생 무료입니다.
1. Vercel 접속
Vercel.com에 접속하여 회원가입/로그인을 합니다.
2. 드래그 앤 드롭 (Drag & Drop)
코딩을 몰라도 배포할 수 있는 가장 쉬운 방법은 Vercel CLI를 쓰는 것이지만, 초보자에겐 어렵습니다. 더 쉬운 방법이 있습니다. (단, GitHub를 통하는 것이 정석이지만 오늘은 가장 쉬운 방법으로 갑니다.)
*참고: 최근 Vercel 정책 변경으로 드래그 앤 드롭 배포가 제한될 수 있으므로, Netlify Drop을 추천합니다.
Netlify Drop(클릭) 사이트로 이동하세요. 여기는 로그인만 하면 파일을 끌어다 놓는 것만으로 배포가 됩니다.
3. 폴더 업로드
아까 만든 my-todo-list 폴더 자체를 마우스로 끌어서 Netlify 화면 중앙에 Drop 하세요.
(Alt Text: 코딩 없이 웹사이트 배포하는 Netlify Drop)
4. 배포 완료!
업로드가 끝나면 무작위로 생성된 URL 주소(예: brave-curie-12345.netlify.app)가 나옵니다. 이 주소를 클릭해 보세요.
축하합니다! 여러분이 만든 웹사이트가 인터넷 세상에 공개되었습니다. 이제 이 링크를 친구에게 카톡으로 보내보세요. 스마트폰에서도 잘 작동할 겁니다.
5. 마치며: 당신은 이제 '메이커(Maker)'입니다
어떤가요? "Hello World"를 찍기 위해 검은 화면에 흰 글씨를 치던 시절은 지났습니다.
우리는 오늘 단 1시간(빠르면 10분) 만에 기획부터 개발, 디자인, 배포까지 전 과정을 마쳤습니다. 중요한 건 '코드를 외우는 능력'이 아니라 '무엇을 만들지 상상하는 능력'과 'AI에게 시키는 능력'입니다.
투두리스트를 만들었다면 다음은 무엇일까요? '나만의 맛집 지도'? 'D-day 계산기'? 무엇이든 가능합니다. 지금 바로 Cursor를 켜고 여러분의 상상을 현실로 만들어보세요.
[다음 글 예고]
다음 포스팅에서는 "프론트엔드 개발자 없이 UI 디자인? V0.dev와 Claude로 10분 만에 대시보드 만들기"를 다룹니다. 오늘 만든 것보다 훨씬 더 예쁘고 복잡한 디자인을 AI가 어떻게 그려내는지 보여드리겠습니다.