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

/

프론트엔드

생성형 AI로 웹 사이트 제작부터 배포(w. Chat GPT, Cursor AI, Database)

생성형 AI(Chat GPT, Cursor AI)를 통해서 웹 사이트 개발과 배포하는 과정을 전반적으로 학습합니다.

10명 이 수강하고 있어요.

3시간 만에 완강할 수 있는 강의 ⏰HTML/CSSJavaScript웹앱ChatGPTAI 활용 (AX)

이런 걸 배울 수 있어요

  • Chat GPT와 Cursor AI의 활용도를 높일 수 있습니다

  • HTML/CSS, JavaScript 개발

  • 웹 사이트 프로젝트 URL 배포

  • 데이터베이스 연동

Chat GPT와 Cursor AI로 DB를 연동한 웹 사이트 제작과 배포

Chat GPT와 Cursor AI를 통해 코드를 몰라도 웹 사이트를 제작할 수 있게 학습할 수 있는 강의입니다. 최근 자료에 의하면 현재 AI를 통해 개발을 하거나 자신의 프로젝트에 AI를 탑재하여 웹/앱, 게임 등 대부분의 프로젝트를 AI와 함께 개발하는 비율이 96%라는 결과가 나왔습니다. 지금은 AI를 무시할 수 없을 정도로 인간 친화적으로 다가 왔고, 오히려 AI 사용법을 모르는 사람들이 도태되는 그런 시대가 다가오고 있습니다. 이제는 검색을 하는 시대가 아닌 질문을 하는 시대입니다.


이 강의에서 AI에게 질문하는 방법을 학습하고 AI가 작성한 결과물을 통해 종합 콘텐츠 웹 사이트 프로젝트를 제작하고 배포까지 할 수 있도록 학습하실 수 있습니다. 생성형 AI 활용은 한번만 익히시면 강의에서 제공하는 내용 뿐 아니라 그 어떤 프로젝트 제작도 충분히 가능합니다. Chat GPT와 Cursor 에디터 내에 내장된 생성형 AI를 가지고 미래 시대를 맞이하는 개발자로 성장하세요!


그리고 비록 강의에서는 다루지 않지만 종합 콘텐츠 사이트는 구글 애드센스를 삽입하여 웹 사이트 광고도 넣을 수 있습니다. 사이트를 한번 만들어 놓으면 다방면으로 활용하실 수 있습니다.

화면 캡처 2025-05-09 174952

이런 내용을 배워요

1⃣ 생성형 AI와 대화하는 방법

생성형 AI(Chat GPT, Cursor AI)에게 질문하는 방법, 흔히 프롬프트라고 합니다. 프롬프트를 통해 답변의 질과 결과물의 완성도를 높이는 질문 방법을 배울 수 있습니다. 육하원칙과 거의 비슷한 방법으로 질문을 해야 합니다.

화면 캡처 2025-05-09 173408

2⃣ 웹 사이트 프로젝트 제작

생성형 AI를 통해 웹 사이트를 제작하고 URL을 등록하여 우리가 접속하는 사이트처럼 배포까지 학습합니다. 그리고 로그인, 회원가입 기능을 구현하는 데이터베이스까지 다룹니다.

화면 캡처 2025-05-09 173507

3⃣ Cursor AI와 친해지기

Chat GPT도 강력한 도구이지만 개발자만을 위한 도구인 Cursor AI를 다룰 수 있습니다. Cursor AI는 좀 더 개발자 친화적인 도구입니다.

화면 캡처 2025-05-09 173234

Cursor AI 작업 영상

수강 전 참고 사항

실습 환경

  • 노트북과 데스크탑만 있으면 가능합니다.

  • 파이어베이스 사용을 위한 구글 계정

  • Chat GPT와 Cursor AI

학습 자료

  • 웹 사이트에 사용할 이미지 로고 제공


선수 지식 및 유의사항

  • HTML/CSS, JavaScript의 기초적인 지식

  • 하지만 생성형 AI를 통해서 학습과 제작을 하기에 거의 모르셔도 괜찮습니다.

  • 본 강의에서 제공하는 웹 사이트 이미지 로고의 제작자는 강의의 저자에게 있습니다. 학습 목적 외 사용은 금합니다. 무단 배포 및 편집을 하실 수 없습니다.


이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 생성형 AI로 코딩을 하고 싶으신 분

  • 웹 사이트 포트폴리오 제작을 원하시는 분

  • 생성형 AI의 활용도를 높이고 싶으신 분

선수 지식,
필요할까요?

  • HTML/CSS, JavaScript 기초 지식

안녕하세요
입니다.

76

명

수강생

8

개

수강평

8

개

답변

4.6

점

강의 평점

4

개

강의

안녕하세요!

게임 스타트업 대표 JEngineer입니다!

현재 스타트업을 운영 중에 있습니다. 여러분들에게 제가 공부하면서, 실제 프로젝트를 개발하면서 얻은 노하우를 모두 전달해드리겠습니다!

커리큘럼

전체

25개 ∙ (2시간 54분)

해당 강의에서 제공:

수업자료

  • 2. Cursor AI 설치

    07:22

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

JEngineer님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

책 3권을 영상으로 만든 Unity 게임 개발강의 썸네일

책 3권을 영상으로 만든 Unity 게임 개발

JEngineer

1인 개발자, 1인 기업, 초보 개발자의 Unity 게임 프로젝트 개발입니다. 프로젝트를 개발하면서 Unity를 익히실 수 있습니다!

초급

초급

C#, Unity

데이터베이스를 결합한 Unity 실전 게임 만들기강의 썸네일

데이터베이스를 결합한 Unity 실전 게임 만들기

JEngineer

데이터베이스와 함께 Unity 실전 게임을 만드는 강의입니다. 접하기 힘든 부분을 강의로 풀어나갈 수 있습니다.

초급

초급

C#, Unity, Firebase

AI와 함께하는 게임 기획강의 썸네일

AI와 함께하는 게임 기획

JEngineer

AI 비서와 함께하는 게임 기획의 시작과 끝

초급

초급

게임기획, 기획서, 서비스 기획

비슷한 강의

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

자바스크립트부터 리액트까지 [PART1/4] 포기없는 리액트로 가는 길강의 썸네일

자바스크립트부터 리액트까지 [PART1/4] 포기없는 리액트로 가는 길

영코디 킴쌤

혹시, 리액트를 공부하다가 좌절하신 적이 있나요? 리액트의 기초가 되는 자바스크립트의 기본을 탄탄히 다진 후에 단계적으로 학습하여 포기하지 않고 리액트로 가는 길을 열어드립니다.

입문

입문

JavaScript, vanilla-js, ES6

AI 시대, 이제 현업이 개발한다! Cursor와 ChatGPT로 시작하는 바이브코딩강의 썸네일

AI 시대, 이제 현업이 개발한다! Cursor와 ChatGPT로 시작하는 바이브코딩

개발하는 분석가

개발팀 눈치 보지 말고, 이제 내가 직접 만든다! 이 강의는 기획, 마케팅, 영업 등 실무 담당자가 개발자 도움 없이 AI도구를 활용하여 웹서비스의 핵심 기능을 직접 구현할 수 있도록 도와줍니다.

초급

초급

Python, FastAPI, cursor

Cursor AI로 만들면서 배우는 Web & Javascript강의 썸네일

Cursor AI로 만들면서 배우는 Web & Javascript

주말코딩

나만의 기술을 가지고 싶으신 분, 웹 개발을 차근차근 배워보고 싶으신 분에게 추천드립니다. 웹 브라우저와 언어의 역사부터 가르쳐드립니다.

입문

입문

HTML/CSS, JavaScript, LLM

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

초급

초급

JavaScript, HTML/CSS, 객체지향

멀티패러다임 프로그래밍 1편: 반복자 패턴 & LISP (with TypeScript, Clojure, Kotlin)강의 썸네일

멀티패러다임 프로그래밍 1편: 반복자 패턴 & LISP (with TypeScript, Clojure, Kotlin)

MDU 유인동

중고급 개발자로 성장하기 위한 고급 프로그래밍 언어 활용 능력과, 함수형, 객체 지향, LISP 패러다임이 결합된 소프트웨어 설계 및 구현 능력을 기릅니다.

중급이상

중급이상

멀티 패러다임 프로그래밍, TypeScript, 함수형 프로그래밍

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)강의 썸네일

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

도도(코딩루팡)

Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

입문

입문

nextjs, ChatGPT, React

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)강의 썸네일

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

도도(코딩루팡)

1시간안에 끝내는 React기반의 GPT AI서비스 강의 수강 후 나만의 AI GPT SASS 솔루션을 만들어 보세요.

초급

초급

React, ChatGPT, JavaScript

모바일, 태블릿, pc 반응형 인스타그램 클론코딩강의 썸네일

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

초급

초급

HTML/CSS, JavaScript, 클론코딩

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스강의 썸네일

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

입문

입문

NestJS, Node.js, JavaScript

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발강의 썸네일

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

김영한

실무에 가까운 예제로, 스프링 부트와 JPA를 활용해서 웹 애플리케이션을 설계하고 개발합니다. 이 과정을 통해 스프링 부트와 JPA를 실무에서 어떻게 활용해야 하는지 이해할 수 있습니다.

초급

초급

Java, Spring, 웹앱

<M.B.I.T> 테스트 페이지 만들기! with Django강의 썸네일

<M.B.I.T> 테스트 페이지 만들기! with Django

제주코딩베이스캠프

개발 유형을 테스트하는 웹 페이지를 만들어보세요! MBTI아닌 MBIT(My Best IT personalities)! 'MBIT 테스트 페이지'를 직접 만들어보며 웹 개발의 전반적인 프로세스를 익혀볼 수 있습니다. (Django 3.1 버전을 사용합니다.)

초급

초급

HTML/CSS, JavaScript, Django

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]강의 썸네일

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

잔재미코딩 DaveLee

현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.

입문

입문

HTML/CSS, JavaScript, ES6

부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프강의 썸네일

부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

영코디 킴쌤

디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의[개정판] 입니다.

초급

초급

Bootstrap, 반응형 웹, 웹 디자인

코로나맵 개발자와 함께하는 지도서비스 만들기 1강의 썸네일

코로나맵 개발자와 함께하는 지도서비스 만들기 1

이동훈

코로나맵 개발자가 알려주는 지도서비스 만들기 강의입니다.

초급

초급

Node.js, 웹앱, Express

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프강의 썸네일

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

초급

초급

HTML/CSS, 반응형 웹, 인터랙티브 웹

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)강의 썸네일

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

초급

초급

HTML/CSS, jQuery, JavaScript

자바스크립트로 알아보는 함수형 프로그래밍 (ES5)강의 썸네일

자바스크립트로 알아보는 함수형 프로그래밍 (ES5)

MDU 유인동

마플(http://www.marpple.com)의 CTO 유인동님이 알려주는 함수형 프로그래밍에 대한 강좌 입니다. 함수형 프로그래밍으로 라이브러리를 직접 만들어가며 함수형 프로그래밍의 패러다임과 코딩의 즐거움을 느낄 수 있습니다.

초급

초급

JavaScript, 함수형 프로그래밍

키워드와 실습으로 읽는 웹 프론트엔드 기초개념 총정리강의 썸네일

키워드와 실습으로 읽는 웹 프론트엔드 기초개념 총정리

어메이징론

웹 개발 입문자를 위한 나침반, 당신이 웹 프론트엔드에 대해 모르는 것을 발견하고 체계적으로 나아가기 위한 가이드 강의입니다.

입문

입문

네트워크, Google Chrome, Chrome DevTools

Do it! Node.js 프로그래밍 입문강의 썸네일

Do it! Node.js 프로그래밍 입문

이지스퍼블리싱

Node.js+자바스크립트+익스프레스+몽고DB로 서버의 핵심을 향해 한눈팔지 않고 달린다!

초급

초급

Node.js, JavaScript, Express

AI 시대, 반나절 만에 웹사이트 개발부터 배포까지 바이브 코딩 with MCP & Gemini CLI강의 썸네일

AI 시대, 반나절 만에 웹사이트 개발부터 배포까지 바이브 코딩 with MCP & Gemini CLI

코드브릿지

요즘 핫한 바이브 코딩! AI 도구를 활용하여 딸깍! 클릭만으로 웹사이트(Next.js)를 개발하고 배포하는 방법을 배울 수 있습니다.

입문

입문

인공지능(AI), AI 활용 (AX), AI Agent