Inflearn brand logo image
Inflearn brand logo image
BEST
개발 · 프로그래밍

/

프론트엔드

3시간 만에 끝내는 Cursor 완벽 가이드

Agent Mode, MCP, PRD 작성, Custom Chat Mode까지! 새로워진 Cursor의 기능들을 알아보세요

(4.8) 수강평 32개

수강생 259명

Next.jsReactcursor인공지능(AI)

초급자를 위해 준비한
[프론트엔드, AI · ChatGPT 활용] 강의입니다.

이런 걸 배울 수 있어요

  • Chat 모드 완벽하게 이해하기

  • Token과 Context Window 이해하고 AI 제대로 활용하기

  • Cursor Rule을 직접 만들고, 반복적으로 개선 해보기

  • Github MCP로 레포지터리 생성부터 PR 자동 생성까지 한 번에!

  • 새롭게 추가된 Custom Chat 모드까지

Cursor가 새로워졌습니다.
AI와 함께 제대로 바이브 코딩하세요.

AI가 내 뜻대로 안 움직여 답답했나요?
이 강의로 한 번에 해결 하세요


속도·퀄리티 둘 다 잡는 바이브 코딩

지금 바로 시작하세요

간단한 서비스를 직접 만들어보며 AI도구 활용방법을 익혀보세요! 💁‍♂

바이브 코딩이란?

AI에게 하고 싶은 걸 말로 설명하면, 알아서 코드를 작성하는 방식입니다.
어려운 문법 몰라도, 아이디어만 있으면 바로 만들 수 있어요.

Cursor IDE란?

VS Code를 기반으로 한 AI 중심 코드 편집 툴이에요. AI와 쉽게 소통하며 개발할 수 있는 혁신적인 툴입니다

이런 분들께 추천해요

AI

AI를 더 잘 써보고 싶어요

Cursor의 더욱 새로워진 기능으로 나의 생산성을 3배 올려보세요

think

사수없이 스스로 해결하고 싶어요

내 코드를 기반으로 AI와 대화하고, 코드를 수정할 수 있어요

copilot

Copilot이 아쉬워요

코파일럿의 tab 보다 더욱 진보된 AI를 느껴보세요

수강 후에는

  • 디자이너 없이 NextJS, React 기반의 단한 페이지를 이쁘게 만들 수 있어요

  • 모르는 것이 있을 때, chatGPT, claude가 아닌, 코드에서 바로 AI에게 물어볼 수 있게 되요

  • 나만의 Agent를 만들고, 나의 코드 습관들을 AI에게 적용시킬 수 있어요

이 강의의 특징 ⭐️

nexjs_vercel

AI와 같이 개발하는 방법을 한 단계 높여 보세요

PRD 문서에서 실제 코드, 그리고 배포까지 간단하지만 핵심만을 담았습니다

cursor_설명

Cursor 사용 노하우를 찐하게 압축했습니다
Cursor 사용에 핵심이 되는 Chat Mode, Cursor Rule, MCP 등 cursor를 사용하기 앞서 꼭 필요한 내용만 넣었습니다

이런 내용을 배워요

Cursor

어디에도 없는 Cursor 최신 기능들에 대해서 알아보세요.
Chat Mode, Cursor Rule, MCP 뿐만 아니라, Custom Chat Mode까지. Cursor의 새로운 기능을 모두 체험해 보세요.

Frame 12

Cursor Directory

Cursor Directory에 있는 다양한 시스템 프롬프트 혹은 나만의 프롬프트를 통해서 나만의 Agent를 만들어 보세요

cursor directory

directory.cursor

Vercel

어려웠던 E2C 배포는 잊어버리고,
AI와 함께 만든 내용을 클릭 한번에 쉽게 배포해 보세요

vercel

Vercel

강의 커뮤니티

디스코드 채널

어려운 점이 있다면 언제든 Discord에서 물어보세요! 항상 도와드릴 준비가 되어 있습니다.


https://discord.gg/YZ4sz9rXKh

새로운 Cursor 소식

Threads에서 새로운 팁과 기능을 공유하고 있습니다. 팔로우하고 많은 정보를 받아가세요!


https://www.threads.net/@toy_crane911

예상 질문 Q&A

Q. 강의 대상자는 어떻게 되나요?

  • React와 Typescript에 대한 이해가 반드시 필요합니다.

  • Nextjs에 대한 지식이 있다면 더욱 좋습니다.

Q. Cursor는 결제가 필요한가요?

  • 무료 플랜으로도 강의 진행은 가능하지만, 편하게 개발하기 위해선 결제가 필요합니다.

Q. 강사님의 코드와 다른 결과물이 나왔어요?

  • AI의 특성상 같은 프롬프트로 내용을 작성하더라도, 같은 결과물이 나오지 않습니다. 그렇기 때문에 강의에서는 큰 방법론 하에 하나씩 스스로 해결할 수 있도록 알려드리고 있습니다.

  • 아래 링크에서 전체 코드를 참조하실 수 있습니다

수강 전 참고 사항

실습 환경

  • 사용 도구: Cursor

  • 기술 stack: NextJS 14, Shadcn, Tailwind, React-hooks-form, Vercel


이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • Chat GPT, Copilot으로만 개발해왔던 개발자

  • Vibe Coding이 무엇인지 알고 싶은 개발자

  • 새로운 Cursor에 대해서 제대로 알고 싶은 개발자

선수 지식,
필요할까요?

  • Next.js 또는 React.js에 대한 기본적인 이해

  • 기본적인 CSS 지식

안녕하세요
토이크레인입니다.

259

명

수강생

32

개

수강평

5

개

답변

4.8

점

강의 평점

1

개

강의

안녕하세요 👋👋

솔로프로너로 이것저것 만들고 있는 토이크레인입니다.

Nextjs, Supabase, LLM 기반으로 한 새로운 서비스들 만들고 있어요

  • (현) ODD 대표

  • (전) 패션, 여행, 핀테크 스타트업 소프트웨어 엔지니어

  • (전) 스파르타 코딩 클럽 튜터, 패스트 캠퍼스 튜터

  • 디어리, 파크골프가자 운영

📮X | Thread | About Me

더보기

커리큘럼

전체

17개 ∙ (3시간 14분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

32개

4.8

32개의 수강평

  • 무무님의 프로필 이미지
    무무

    수강평 1

    ∙

    평균 평점 5.0

    5

    65% 수강 후 작성

    좋은 내용 강의 감사합니다

    • 토이크레인
      지식공유자

      도움이 되셨다니, 너무 기쁩니다 감사합니다

  • 김유나님의 프로필 이미지
    김유나

    수강평 1

    ∙

    평균 평점 5.0

    5

    93% 수강 후 작성

    AI 툴을 어떻게 써야 할지 막막했는데, 이 강의보고 완전 이해했어요 무조건 AI를 신뢰하기보단, 친구처럼 AI와 대화하면서 코딩하라는 말씀이 너무 와닿았습니다!!! AI 활용을 공부하고싶은 분들에게 강력 추천합니다!!

    • 토이크레인
      지식공유자

      앗 감사합니다!!! 더욱 열심히 해보겠습니다!!

  • Justice Axe님의 프로필 이미지
    Justice Axe

    수강평 4

    ∙

    평균 평점 5.0

    5

    18% 수강 후 작성

  • hgpark님의 프로필 이미지
    hgpark

    수강평 7

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    • 토이크레인
      지식공유자

      감사합니다!! 🙇‍♂️🙇‍♂️🙇‍♂️

  • Brad Lee님의 프로필 이미지
    Brad Lee

    수강평 7

    ∙

    평균 평점 4.4

    5

    35% 수강 후 작성

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

Next.js 시작하기강의 썸네일

Next.js 시작하기

장기효(캡틴판교)

React를 시작할 때 꼭 알아야 하는 Next.js 프레임워크. 입문자 관점의 쉬운 설명과 실무자가 만족하는 심도 깊은 동작 원리 이해까지. Next.js를 한방에 해결합니다.

초급

초급

Next.js, React, JavaScript

대세는 바이브 코딩과 MCP_Cursor AI로 시작하기강의 썸네일

대세는 바이브 코딩과 MCP_Cursor AI로 시작하기

Masocampus

생성형 인공지능의 최신 트렌드, AI 에이전트! 개발 업무를 다 해주는 Cursor와 기능을 확장해주는 MCP로 앞서나가는 방법!

입문

입문

cursor, 바이브코딩, mvp

챗GPT 이해와 활용강의 썸네일

챗GPT 이해와 활용

papadave

챗GPT로 나만의 콘텐츠(노래, 만화, 블로그, 책, 논문 등)를 만들고 새로운 비즈니스를 창출해 보세요

초급

초급

ChatGPT, LLM, NLP

프로젝트로 배우는 React.js강의 썸네일

프로젝트로 배우는 React.js

코지 코더

블로그 프로젝트를 통해 리액트 기초를 배울수 있습니다

초급

초급

React, Redux, ES6

코드로 배우는 React 19 with 스프링부트 API서버강의 썸네일

코드로 배우는 React 19 with 스프링부트 API서버

구멍가게코딩단

스프링 부트(Spring Boot ver3.4.x)로 제작되는 API 서버와 React 19 (with TypeScript) 연동 프로젝트 완성하기! 포트폴리오 작성 부트캠프 과정 전체를 강의로 제작

중급이상

중급이상

React, Spring Boot, JPA

Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)강의 썸네일

Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)

짐코딩

최신 Next.js v15 App Router를 학습하며 Notion 기반의 실용적인 개발자 블로그를 함께 구축하는 강의입니다. 추가로 Cursor AI 활용법 등 다양한 인사이트도 얻을 수 있습니다.

초급

초급

Next.js, CursorAI, React

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어강의 썸네일

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

제주코딩베이스캠프

프론트엔드 개발자인데 로그인 기능을 구현하지 못해 아쉬웠던 적 있으신가요? DB를 이용해 데이터를 저장하고 불러오는 기능을 구현하고 싶지만 쿼리를 공부하기는 부담스러우셨나요? 파이어베이스라면 쉽게 가능합니다! 리액트와 파이어베이스의 힘으로 유저 인증, 데이터 저장, 호스팅 등 웹 개발에 필수적인 기능들을 같이 구현해봅시다! (해당 강의는 22년 8월 녹화로 파이어베이스의 메이저 업데이트를 반영한 강의입니다.)

초급

초급

Firebase, React

CrewAI와 LLM으로 인공지능 판사 만들기강의 썸네일

CrewAI와 LLM으로 인공지능 판사 만들기

아리가람

LLM 기반 다중 에이전트 기술을 구현할 수 있게 하는 CrewAI, 지식 그래프, 추론 시스템을 결합해 인공지능 판사를 만들어 봅니다.

중급이상

중급이상

인공지능(AI), LLM, AI Agent

Next.js와 yolov11로 화재감지 시스템 구축하기강의 썸네일

Next.js와 yolov11로 화재감지 시스템 구축하기

ludgi

Next.js, YOLOv11, FastAPI를 활용하여 실시간 화재 감지 시스템을 구축하는 방법을 배웁니다.

초급

초급

Next.js, yolo, Python

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)강의 썸네일

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

이진석

파이썬/장고 웹서비스 개발의 기초를 탄탄히 다져보세요. 장고 학습에는 시간도 걸리지만, 반복되는 개발 속에 여러분의 생산성을 극대화하실 수 있습니다. 여러분의 상상을 현실로 만들어보세요.

초급

초급

Python, Django, React

PixiJS로 만드는 2D 그래픽과 게임 with Cursor(AI)강의 썸네일

PixiJS로 만드는 2D 그래픽과 게임 with Cursor(AI)

1분코딩

2D 그래픽의 독보적 강자 PixiJS의 기본을 익히고, AI 코드 에디터 Cursor를 이용해 빠르고 효율적으로 개발하는 방법도 배워봅니다.

입문

입문

pixijs, cursor, webgl

진짜 현장에서 통하는 OCR, 이렇게 만듭니다.강의 썸네일

진짜 현장에서 통하는 OCR, 이렇게 만듭니다.

데이비드최

현업에서 진짜 쓰이는 OCR 기술, 제대로 배워보고 싶다면 이 강의 하나로 끝! 비정형 문서와 복잡한 레이아웃에서도 98% 이상의 정확도를 목표로, 최신 SOTA 모델과 실전 노하우를 바탕으로 기업 수준의 OCR 프로젝트를 함께 만들어갑니다.

초급

초급

Python, 인공지능(AI), openai

비전공자 혼자서 하루 만에 수익화 앱 출시하기강의 썸네일

비전공자 혼자서 하루 만에 수익화 앱 출시하기

김은찬

이 강의는 한 줄의 아이디어로 시작해 기획, 디자인, 개발, 각 플랫폼 앱 출시까지 전 과정의 노하우를 알려드려요. 지금 바로 1인 수익화 앱 개발을 시작해 보세요.

초급

초급

Flutter, 모바일 디자인, cursor

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

초급

React, Next.js, expo

나도! 스프링으로 인공지능을 할 수 있다(인프1탄)강의 썸네일

나도! 스프링으로 인공지능을 할 수 있다(인프1탄)

박매일

Spring Boot와 Spring AI를 이용한 AI 애플리케이션 개발: 실제 솔루션을 위한 OpenAI 마스터링 하기

초급

초급

Java, Spring, Spring Boot

AI 시대의 혁신적인 게임 개발 입문 with Unity6강의 썸네일

AI 시대의 혁신적인 게임 개발 입문 with Unity6

UniCoti

당신을 진정 실전 게임개발자로 만들어줄 강의. 실전 프로젝트 4개와 AI 특화 3개의 게임으로 한계를 넘어보세요!

입문

입문

Unity, C#, 인공지능(AI)

공식문서로 배우는 실전 타입스크립트강의 썸네일

공식문서로 배우는 실전 타입스크립트

어쩔코딩

타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

입문

입문

TypeScript, JavaScript, ES6

기획자,PM을 위한 누구나 이해할 수 있는 인공지능강의 썸네일

기획자,PM을 위한 누구나 이해할 수 있는 인공지능

최진영

기획자, PM의 눈높이에 맞춘 인공지능 입문 강의! 데이터부터 생성형 AI까지, 성공적인 인공지능 기획을 위한 핵심 개념을 쉽게 정리했습니다. 인공지능을 만드는 것이 아닌 질문하고 설명할 수 있는 수준의 실무 이해를 목표로 합니다.

입문

입문

머신러닝, 딥러닝, 추천 시스템

챗GPT로 응용하는 파이썬 실전 예제들 (입문자용)강의 썸네일

챗GPT로 응용하는 파이썬 실전 예제들 (입문자용)

박가네 데이터랩

지루한 문법부터 소개하는 강의는 그만! 일단 활용부터 하고 보는 파이썬 실전 응용 예제들

입문

입문

Python, 인공지능(AI), 생성형AI

요즘지식-AX트렌드 딱1시간강의 썸네일

요즘지식-AX트렌드 딱1시간

피코쌤

[요즘 필요한 요즘지식] 1. AX, ChatGPT와 로봇 기술이 가져온 변화. 2. 블록버스터-코닥필름-노키아 공통점. 3. 요즘 AX 키워드 5가지. - 달러 패권 유지 OOOO코인. - 머스크 OOOO으로 정부운영비 절감. - 트럼프 OOOO 전략 비축. - 중국 OO유치원, 사교육 받는 OO. - 중국 OO팩토리, 노동자가 없으니 OO이 필요 없어졌다. 4. ChatGPT/Gemini/Grok - 앞서 학습한 내용으로 프롬프트 작성하여 결과 비교 - 클레이모션 인포그래픽으로 이미지 생성

입문

입문

디지털 마케팅, 업무 생산성, 자기계발

월 ₩15,180

5개월 할부 시

₩75,900