[바이브코딩 2편] 10분만에 서비스 만들기 With Cursor AI - 코딩지식 없이 서비스 개발하기

10분 만에 서비스 만들기 With Cursor AI - 코딩지식 없이 서비스 개발하기

 

안녕하세요! 저번 편에서 다운로드한 Cursor를 활용해서 이번 편에서는 서비스 개발을 진행해 보도록 하겠습니다.
첫 번째로는 간단한 To-Do웹을 같이 만들어보고 간단한 쇼핑몰을 만드는 프롬프트도 제공해드릴 예정입니다.
먼저 Cursor 프로그램을 켜서 로그인을 진행해 주세요!

지난 편을 안 보고 오셨다면!? 
- [바이브코딩 1편] 10분만에 설치하는 Cursor AI - 코딩지식 없이 서비스 개발하기

나만의 서비스 만들기

먼저 저희는 Cursor AI에게 간단한 TODO 웹을 만들어 달라고 해볼 예정입니다.
첫 번째로 TODO 웹을 만들기 위해 아래 사진처럼 AI 탭을 열어주세요!

Cursor AI

간단한 투두 앱을 만들 이 위해 AI에서 프롬프트를 작성해 줘야 하는데요! 이때는 ChatGPT를 활용하거나 아래 프롬프트를 복사해서 붙여 넣어주세요! 
임시로 파일 위치는 바탕화면에 만들어 달라고 프롬프트에 적어놨는데 수정이 필요하다면 해당 부분을 수정해서 사용해 주세요 ! 

간결하고 사용자 친화적인 To-Do 웹 애플리케이션을 만들어줘.

**디자인:**
*   깔끔하고 모던한 UI/UX
*   반응형 웹 디자인 (모바일, 데스크톱 지원)

**기능:**
*   **할 일 추가:** 새로운 할 일을 입력하고 추가 버튼으로 목록에 추가.
*   **할 일 완료/미완료:** 각 할 일 옆에 체크박스를 두어 완료 상태를 토글.
*   **할 일 수정:** 할 일 내용을 클릭하거나 수정 버튼으로 내용 변경 가능.
*   **할 일 삭제:** 개별 할 일 삭제 버튼 제공.
*   **할 일 필터링:** '전체', '진행 중', '완료' 세 가지 상태로 목록 필터링 기능.
*   **데이터 지속성:** 추가/수정/삭제된 할 일 목록은 웹 브라우저의 로컬 스토리지에 저장되어 페이지를 닫았다 열어도 데이터가 유지되도록 구현.

**기술 스택 (선택 사항):**
*   HTML, CSS, 바닐라 JavaScript

** 파일위치 **
* 파일은 바탕화면에 만들어줘

작성하고 시작을 누르게 되면 AI가 알아서 파일을 생성하고 코딩을 진행하게 되는데 가끔씩 권한이 필요한 경우 사용자에게 권한요청을 하면서 중간에 멈추게 됩니다.
아래와 같이 창이 뜨게 되면 Accept를 눌러서 계속 진행하게 해주세요

Cursor AI Accept

AI가 생성을 완료하게 되면 index.html , styles.css , script.js 파일 총 세 개가 바탕화면에 만들어지게 됩니다. 
여기서 index.html파일을 누르게 되면 AI가 만들어준 To-Do 웹이 켜지게 됩니다. 
만들어진 웹을 눌러서 사용해 보면 아래와 같이 만들어졌네요!

Cursor AI를 통해 만든 To-Do웹

근데 뭔가 밋밋하군요.. 다크모드가 존재하면 좋을 거 같다는 생각이 들어서 다크모드도 만들어달라고 요청해 보겠습니다. 이번에는 간단하게 아래와 같이 요청해보겠습니다.

다크모드도 만들어줘 토글형식으로 다크모드를 껏다킬수있게

완성된 프로그램에서는 다크모드로 변환하는 토글 버튼이 생겼네요! 해당버튼을 눌러 다크모드로도 변경해 보겠습니다.

To-Do 웹 기본버전

버튼을 누르게 되면 이쁘게 다크모드로 변하는 것을 확인할 수 있습니다. 
이런 식으로 맘에 들지 않는 부분을 대화형식으로 요청하면서 수정해 달라고 하면 CursorAI가 자동으로 수정해 주게 됩니다.

To-Do 웹 다크버전

 

이로써 To-Do웹은 완성되었습니다! 더 수정하고 싶은 부분이나 개선하고 싶은 부분이 있다면 CursorAI에게 대화형식으로 더 이쁘고 기능이 많게 개선해 나가 보세요! To-Do웹과 비슷하게 간단한 쇼핑몰을 만들어 보고 싶은 분이 계시다면 아래 프롬프트를 사용해서 간단하게 만들어보시는 것도 추천드립니다.

나만의 쇼핑몰 만들기

기능

기능은 회원(로그인/회원가입/로그아웃), 상품(목록, 상세), 장바구니, 마이페이지 등으로 구성되어 있고 웹/앱 버전으로 모바일 데스크톱 모두 호환가능한 구조로 요청하는 내용입니다.

프롬프트

간결하고 기능적인 쇼핑몰 웹 서비스를 개발해줘.

**디자인:**
*   깔끔하고 사용하기 쉬운 UI/UX
*   모던하고 반응형 디자인 (데스크톱, 모바일 환경 모두 지원)
*   사용자 친화적인 내비게이션 구조

**주요 기능:**

1.  **회원 관리:**
    *   **로그인/회원가입:** 이메일/비밀번호 기반의 간단한 회원가입 및 로그인 기능.
    *   **로그아웃:** 로그인된 사용자를 위한 로그아웃 기능.

2.  **상품:**
    *   **상품 목록 페이지:**
        *   등록된 모든 상품을 이미지, 상품명, 가격과 함께 표시.
        *   상품 검색 기능 (상품명 기준).
        *   상품 필터링 기능 (예: 가격대, 카테고리 등 - 간단한 구현).
    *   **상품 상세 페이지:**
        *   선택된 상품의 상세 이미지, 상품명, 가격, 상세 설명 표시.
        *   장바구니에 담기 버튼 (수량 선택 기능 포함).

3.  **장바구니:**
    *   **장바구니 페이지:**
        *   장바구니에 담긴 상품 목록 (상품 이미지, 상품명, 수량, 가격) 표시.
        *   각 상품의 수량 변경 및 삭제 기능.
        *   전체 상품 총 결제 금액 표시.

4.  **마이페이지:**
    *   **주문 내역:** 로그인한 사용자의 과거 주문 내역을 간단하게 조회.
    *   **내 정보 수정:** 사용자가 자신의 개인 정보를 수정할 수 있는 기능.

**데이터 관리:**
*   상품 정보, 장바구니 내용, 회원 정보 등은 페이지를 새로고침하거나 다시 방문해도 유지될 수 있도록 로컬 스토리지(Local Storage)나 간단한 백엔드 (mock API 등)를 활용하여 데이터 지속성을 확보.

**기술 스택 (선택 사항):**
*   HTML, CSS, JavaScript (프론트엔드)
*   간단한 백엔드 또는 로컬 스토리지를 활용한 데이터 관리

** 파일위치 **
* 파일은 바탕화면에 만들어줘

위 프롬프트로 요청하게 되면 아래와 같이 간단한 쇼핑몰이 완성되게 됩니다. 모든 기능은 로그인을 진행한 후 사용이 가능하며 디자인 변경이나 기능변경/추가는 동일하게 대화형식으로 변경해 나가시면 됩니다.
간단하게 상품 그룹핑, 로고변경, 디자인 개선등이 생각나네요!

쇼핑몰 바이브코딩

만약 비슷하게 만들고 싶은 대상이 명확하다면 프롬프트에서 
"~~"와 비슷하게 디자인을 만들어줘라고 요청하게 되면 프롬프트가 변경을 해줍니다. ( 링크나 이미지를 첨부해도 가능합니다 ) 

다음 편에서는 내가 AI로 만든 웹사이트를 무료로 배포해 보는 방법에 대해 작성해 보도록 하겠습니다.