본문 바로가기
Develog/Study

Cursor 사용 후기: 초보자도 웹사이트 만들기 가능한 AI 코드 에디터 체험기

예 강 2025. 4. 6. 14:34
 
 
 

 

 

한줄요약 : 세시간 반동안 Cursor로 이거만듬 삼행시로 행복한 시간

0. 발단

코파일럿과 같은 AI 어시스턴트가 생산성을 올려준다는 요즘, 저는 코드는 직접 쳐야 늘지! 라는 사람입니다. 주변의 무수한 코파일럿 추천에도 꿋꿋이 경험치가 쌓일 때까지 쓰지 않겠다는 마음이었는데요.

하지만 너무 궁금했습니다! 너무 써보고 싶어! 궁금해! 대체 왜 다들 그렇게 열광하는가?! 그래서

 

 

 

네, Cursor, AI code editor

 

결국 찍. 먹 시작합니다.

 

1. 개요 : Cursor란?

 

누군가의 리뷰

  • 요즘 핫 한 AI를 활용한 코드 에디터입니다.
  • 탭과 간단한 프롬프트를 통해 코드를 짜주며, 개발자의 코드 베이스를 읽고 그에 맞춰 응답한다고 합니다.

2. Cursor랑 다른 AI 랑 가격비교

가격비교표

completions란?

Completions는 AI에게 어떤 **입력(prompt)**을 주고, 그에 대한 **출력(response)**을 받아오는 한 번의 대화 응답 단위를 말합니다.

즉, "질문을 던지고, 답변을 받는 한 번의 흐름" = 1 completion

 

Cursor가 비싼 이유?

Cursor는 단순한 텍스트 AI 툴이 아니라, 개발자용 AI 코드 편집기입니다.

따라서 아래와 같은 고급 기능들이 포함되어 있어서 가격이 올라갑니다.

🚀 주요 고급 기능들:

  1. 자동 코드 작성 (AI pair programming)
    • 내가 코딩하면 AI가 자동으로 이어서 작성해줌 (Copilot보다 더 강력하다는 평도 있음)
  2. 코드 리팩토링 자동화
    • 함수 분리, 네이밍 변경, 타입 추가 등 제안 및 자동 적용
  3. 자연어로 리팩토링 명령 가능
    • 예: "이 함수 async로 바꿔줘" → 바로 코드 변환됨
  4. 대형 프로젝트 지원
    • 컨텍스트 윈도우가 커서 수천 줄 코드도 한 번에 이해하고 수정 가능
  5. 프리미엄 모델 API 비용 포함
    • GPT-4 같은 모델은 API 단가 자체가 비쌈. Cursor는 그걸 무제한으로 쓸 수 있게 해줌.

 

3. 설치

https://www.cursor.com/

여기서 받으시면 됩니다.

 

헉?

Import from VS code가 있네요? 헐, 지금 하는 프로젝트를 옮길 생각은 없었는데, 마치 vscode를 잡아먹겠다는 의지가 느껴집니다.

 

Import를 누르면 세팅이나 extension도 함께 옮길것인지 물어봅니다.

 

테마설정

  • 우선 순정부터 맛보겠습니다. Cursor Dark 선택!

사용법을 간략히 알려줍니다. (정말쉬움)

 

 

  1. Agent : 어떤 코드를 짤 것인지 계획합니다. 프롬프트를 통해 설명을 합니다.
  2. Cursor Tab : 탭,탭,탭을 눌러가며 코딩합니다.
  3. Ctrl-K : 코드를 AI와 함께 수정해갑니다.

  • 자신의 데이터를 학습에 이용할 건지 물어보는 창입니다. 학습해라, 내가 나쁜 데이터를 넣어주겠다.

 

 

  • 언어 선택과 터미널로 열 것인지 물어봅니다. 나중에 하면 귀찮으니까 일단 다합니다.

 

  • VScode와 유사한 에디터, 그러나 바로 오른쪽에 Agent 채팅 창이 있어요

4. 채팅창 파악하기

 

 

클로드와 지피티, gmini의 최신모델을 사용할 수 있습니다.

  • 제 경험상 Claude, GPT보다는 gmini가 더 빨랐습니다.
  • Max O : 무제한으로 쓸 수 있어요.
  • MAX X: 더 요청당 0.05달러가 든다고 하네요. 100번 하면 5달러니까,
    궁극기 쓰듯 중요한 작업할 때만 쓰는 게 좋아 보입니다.
  • 가격을 토큰 당으로 체크하는 것이 아니라 1 completion으로 응답으로 체크하니까 대량의 응답을 받을 수 있는 코드를 작업할 때 좋아 보입니다.

 

auto-select/thinking

  • auto-select : 커서가 성능과 퍼포먼스에 맞게 알아서 모델을 골라줍니다. 편리하네요
  • thinking : thinking은 선택 가능한데 추천한 것 중 개발자가 고릅니다.

 

 

 

5. 기획 시작

  • autoSelect로 만들겠습니다. (하다가 중간중간 바꿔줍니다)
  • 대충 뭐 만들지 고민중이라고 물어봤습니다.

재미없는 것만 추천해줌

 

그래서 그냥 제가 원래 만들고 싶어하던 삼행시 사이트 만들거라고 했어요.

그랬더니 기획해줍니다...!

 


아주 재미있는 아이디어네요! 삼행시 공유 웹사이트를 만들어보겠습니다. 제가 프로젝트의 주요 기능과 기술 스택을 제안해드리겠습니다.

프로젝트 이름 제안: "삼행시 놀이터" 또는 "삼행시 갤러리"

주요 기능:

삼행시 작성 기능 주제어 입력 (3글자) 각 글자별로 문장 입력 실시간 글자 수 확인 임시저장 기능 삼행시 공유 기능 피드 형식의 메인 페이지 좋아요/공감 기능 댓글 기능 공유하기 기능 사용자 기능 회원가입/로그인 프로필 페이지 자신이 작성한 삼행시 모아보기 좋아요한 삼행시 보관함 추가 기능 인기 주제어 태그 클라우드 주간/월간 인기 삼행시 랜덤 주제어 추천 검색 기능

기술 스택 제안:

Frontend:

Next.js (React) Tailwind CSS SWR 또는 React Query (데이터 페칭) Framer Motion (애니메이션)

Backend:

Node.js + Express 또는 Next.js API Routes MongoDB 또는 PostgreSQL (데이터베이스) Prisma (ORM)

인프라:

Vercel (호스팅) Cloudinary (이미지 저장소, 필요한 경우) Auth0 또는 NextAuth (인증)

 

//데이터 모델 예시 
//삼행시
interface Samsungsi {
  id: string;
  keyword: string;        // 주제어
  lines: string[];        // 3개의 문장
  authorId: string;       // 작성자 ID
  createdAt: Date;
  likes: number;
  comments: Comment[];
  tags?: string[];
}

// 사용자
interface User {
  id: string;
  username: string;
  email: string;
  profile: {
    avatar?: string;
    bio?: string;
  };
  createdSamsungsis: Samsungsi[];
  likedSamsungsis: Samsungsi[];
}

 


UI/UX 고려사항:

모바일 친화적인 반응형 디자인 삼행시 작성 시 실시간 피드백 무한 스크롤 적용된 피드 다크모드 지원 한글 입력에 최적화된 인터페이스

이 프로젝트를 시작해보고 싶으신가요? 어떤 부분부터 시작하고 싶으신지, 또는 특정 기능에 대해 더 자세히 알고 싶으신 부분이 있다면 말씀해 주세요!

 

5분도 안걸렸습니다.

  • 출력은 불편함을 느낄 정도는 아닙니다.
  • 하다 보니까 Gemini가 빨라서 Gemini 위주로 간단한 거 쓰다가 얘가 하도 오류를 못 잡아서 Claude 에다가 참고 웹사이트 주면서 수정해서 작업했습니다.

삼행시 사이트를 만들고 싶다고 하니까 바로 기획과 전체적인 프로젝트 세팅을 도와줍니다.

 

6. 개발&완성품

타이머를 재고 개발해보겠습니당

 

 

준비 시작
완성

개발과정은 ...

 

그냥 채팅치고 개발해줘~

이거해줘~

이거 레이아웃 마음에안들어!

꾸며줘!

 

이것의 반복이었습니다... 어쩌면 나중엔 해커톤이 사라지지 않을까요ㅋㅋ ㅠ 다 Cursor 쓸테니까. .

 

완성한 삼행시 사이트입니다!

 

삼행시로 행복한 시간

 

궁금하신 분들은 위 링크에서 해보세요!

 

놀랐습니다.

제가 평소 마음만 먹고 안 만들던 삼행시 사이트가 뚝딱 만들어졌어요.

백엔드 firebase연동까지 아주 쉬웠습니다.

삼행시 규칙 검사

 

  • 다른주제 고르기 하면 랜덤으로 제가 등록한 다른 주제 골라집니다.

 

관리자 페이지

 

  • 주제어를 관리할 수 있는 관리자 페이지를 만들어 달랬더니 이렇게 만들어 줬습니다.

 

7. Cursor로 개발 후기 및 장단점

 

한 줄 요약 : 딸깍거리며 해 줘~ 하면 다 해준다.

 

장점?

  • 코알못도 사이드 프로젝트 가능 : 압도적으로 개발이 쉬워졌습니다. 코딩을 모르는 사람들도 조금만 해달라고 하면 사이드 프로젝트 하나 뚝딱 완성할 수 있습니다.
  •  
  • 아낌없이 다해주는 커서 : 기획, 프론트, 백엔드, 디자인까지 다해줍니다. 기획만 제대로 하고 설명을 잘한다면 아마 초등학생이나 유치원생도 웹사이트 하나 만들 수 있어요

 

단점

 

  • 최신기술엔 한계가 있음 : 최신 기술 스택 정보는 업데이트 속도가 느려서 사람이 에러를 잡아줘야 합니다. 일례로 tailwindCss4 정보를 업데이트 하지 않아서 tailwindCss3 식으로 작성하다가 언제까지 삽질하나 구경하면서 한 50분은 쓴 것 같습니다. 아마 그거 아니었으면 2시간 컷이었을 것 같아요

 

  • 코드가 더러움 : 제가 제 코드 베이스를 안 입력하고 0에서 100까지 새로 짜서 그런지, layout, page 구분 없이 코드를 더럽게 짭니다ㅋㅋ 리팩토링 필수입니다. 해달라면 해줄 것 같은데 거기까진 해보지 않았습니다.

 

  • 세부 디자인 컨트롤 힘듦 : 세부 레이아웃을 고치고 싶으면 AI가 짠 코드를 읽어서 해독하는데, 이게 남이 짠 코드 읽는 거랑 똑같아서 좀 귀찮았습니다. 그리고 채팅으로 설명하기엔 한계가 있었어요. 전 agent 기능만 이용했는데 Ctrl+k 하면 좀 다른지 궁금하네요

 

  • 단점이 많아 보이지만, 단점은 사실 일반사람이 취미용으로 쓰기엔 별 상관없는 것들입니다.
  • 마치 사진 넣고 지브리 스타일로 해줘! 하면 됐던 것처럼, Cursor도 딸깍으로 웹사이트 하나 만들어 줄 것 같아요. 이제 진짜 아이디어 싸움이 될 것 같습니다.
  • 제가 넣은 단점도 AI가 발전하면 모두 상쇄될 것입니다.
  • 어쩌면 인공지능이 학습할 때까지 사람들이 공부를 안 하는 미래가 올까 봐 두려워지네요.

8. 소감

 

뭔가 제가 항상 생각만 하던 삼행시 사이트가 3시간 반 만에 만들어진 건 제 기초베이스가 있었기 때문이었겠지만… 그래도 뭔가 씁쓸하면서도 신나는 느낌입니다.

 

뭐 해 먹고 살지… 라는 직업에 대한 씁쓸함과, 기술의 발전으로 어떤 미래가 올까에 대한 호기심에서 설렘이 옵니다.

 

“앞으로는 직업이 아니라 개인의 역량이 브랜드가 된다”라는 말이 떠오르네요.

 

나 자신이라는 존재를 유일하게 만드는 것이 무엇인가 고민해 봐야 할 때인 것 같습니다...

'Develog > Study' 카테고리의 다른 글

Node.js 패키지 매니저 선택(npm& yarn & pnpm 비교)  (0) 2025.04.20
React의 state는 동기인가 비동기인가. with 이벤트 루프  (0) 2025.04.17
프론트엔드 에러 핸들링 구조 정리 (Axios + CustomError 적용)  (2) 2025.04.05
Next.js 보일러 플레이트 만들기  (0) 2025.03.31
[기술부채 해결하기] SSE(Server-Sent-Event)와 WebSocket  (0) 2025.02.16

'Develog/Study' Related Articles

티스토리툴바