Cursor 웹앱 도전기 1탄

소개

요즘 핫한 "바이브코딩(Vibe Coding)"! 이름부터 심상치 않죠? 👀 코드를 짜는 것도, 디자인을 잡는 것도 다 vibe하게(!) 해보는 게 뭔가 멋져 보여서 저도 도전해봤습니다.

마침 제 이력을 담은 랜딩페이지를 만들고 싶던 참이었어요. 그래서 바이브코딩의 대표 툴, 바로 "Cursor"를 중심으로 작업을 시작하게 되었습니다.

진행 방법

1. Cursor 다운로드 & 초기 세팅

가볍게 설치하고 열어봤을 뿐인데, 처음부터 마법 같은 UX에 감탄 😲

2. 챗GPT를 활용한 PRD 작성

처음이라 감 잡기 어려웠는데, PRD(Product Requirements Document)를 챗GPT로 작성해보니 개요가 잡히더라고요.

"GPT야, 나의 경력과 작업물 중심의 랜딩페이지를 만들고 싶어. 어떤 구성으로 가면 좋을까? PRD 형식으로 정리해줘."

이렇게 물어보니 기본 섹션부터 추천 CTA까지 술술 정리되어 나왔습니다.

3. GPTs도 함께!

방장님이 소개해주신 "GPTs"도 시도해봤어요. 커서 안에서도 다양한 GPT 기능들을 연동해 쓰면서 작업이 한결 수월해졌습니다.

4. 본격 시작! 그런데...

화면 구성을 점검하고, 드디어 본격적으로 랜딩페이지 코딩에 착수했는데...

🎢 에러 → 수정 → 또 에러 → 개선... 무한 루프 도달 😵

한 문제를 해결하면 또 다른 이슈가 기다리고 있었습니다. 초심자에게 쉽지만은 않더라고요. 하지만, 그게 또 이 작업의 매력이기도 했어요.

한국어 텍스트가있는 검은 색 화면

결과와 배운 점

  • Cursor는 노코드 입문자에게는 정말 친절한 가이드 같은 도구였습니다. 마치 코딩 세계의 내비게이션 같다고 할까요?

  • 하지만 바이브코딩은 한 번에 뚝딱 되는 게 아니더라고요. 끈기와 인내심이 가장 중요한 도구였습니다.

  • 무엇보다, "첫 숟가락에 배부를 수 없다"는 말처럼, 이건 이제 시작일 뿐이라는 생각이 듭니다.

도움 받은 글 (옵션)

  • 커서 소개 자료 by 방장님

  • PRD 작성 관련 PRD Builder

1
2개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요