인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
NEW

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

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

Thumbnail

입문자를 위해 준비한
[웹 개발, CursorAI] 강의입니다.

이런 걸 배울 수 있어요

  • LLM으로 먼저 개발! 그리고 해석하면서 배워요.

  • 웹은 누가 만들었을까? 왜 만들었지? 역사부터 차근차근~

  • AI? 나랑은 너무 먼 이야기 아닐까? 아니에요! Cursor AI로 경험해보세요.

  • 차근차근 배우는 Web APIs와 Javascript. 이해될 때까지!

  • 내가 만든 웹 페이지. 내 컴퓨터에만? No! 직접 배포해서 유저에게 보여줘요.


< AI Tool을 통한 소프트웨어 개발을 꿈꾸고 계신가요? >


📢 언제까지 기초 문법만 배울 수는 없어요!


더 이상 기초 문법 먼저 배우는 것은 No!

AI 에디터를 이용해서 만들면서 배우기 Yes!


ChatGPT 이후로 수 많은 소프트웨어 강좌 팁과 개발 방법론이 쏟아지고 있습니다.

프롬프트 몇 줄로 홈페이지나 게임 제작하기, 심지어는 코드를 하나도 타이핑하지 않고 목소리로 하는 바이브 코딩(vibe coding)까지?


하지만 아직까지 AI로 하는 개발은 한계가 있다는 의견도 있어요.

개발을 모두 맡기면 지속적인 소프트웨어를 개발하기도 쉽지 않고요.


이렇게 다양한 의견이 첨예하게 나뉘는 시대에는, 어떻게 코드를 배워야할까요?


소프트웨어 개발 시작을 망설이고 있는 분, 비전공자인데 나만의 웹 페이지를 만들어보고 싶으신 분,

웹 페이지가 어떻게 동작하는 것인지 알고 싶으신 분, LLM으로 코드는 만들었는데 해석을 해보고 싶은 분!


지금 이 강의로 웹 개발의 기초를 시작하세요. (Javascript, HTML/CSS)

직접 Claude 무료 버전으로 생성한 코드를 수정하면서 차근차근 웹의 개념, 웹 브라우저의 동작 방식, 그 위에서 동작하는 Javascript 언어의 문법을 설명해드립니다.


그냥 문법만 배우는게 아니고, 나만의 프로젝트를 직접 개발해보면서요!


앞으로 AI를 통해 생성하는 코드와 소프트웨어는 점점 많아질 거에요.

지금도 늦지 않았어요. 모두가 뛰어가는 세상에 우리도 함께 첫 걸음을 떼보는 것이 어떨까요?

ChatGPT, Claude, Gemini로 생성한 코드.. 해석하고 수정해보고 싶다면?



📌 눈 앞에서 직접 보여드립니다! 똑같이 프롬프트로 생성한 코드, 이렇게 해석하는 거에요!

💻 문법만 열심히 공부하면 뭐해요. 뭔가를 만들면서 배워야죠! "진짜" 프로젝트를 만들면서 배워요.

🛠 LLM이 생성한 코드를 수정하면서 개념을 잡아요. 아~ 이렇게 코드가 동작하는 거구나!

선행 지식? No! 컴퓨터 전공자만 이해할 수 있는 전문 용어? No! 미래의 제 자녀에게도 보여줄 거에요.

코드를 수정하다가 잘 안돼요.. 어떻게 하죠? 바로 답변해드려요! 많이 많이 질문 올려주세요.

💡다른 강의와 차별점이 무엇인가요?

  • 이 강의는 앞뒤 맥락 없이 바로 문법을 들이밀지 않아요. 우리는 문법만 배우려는 게 아니에요.

  • 일단 먼저 LLM으로 핵심 아이디어를 구현해요. 그 다음에 코드를 해석하면서 배워요.

  • 기술의 역사를 함께 배워요. 이 기술은 왜 생겨났을까요? 누가 만들었을까요? 어떻게 발전했나요?

이런 분들에게 큰 도움이 되는 강의에요.

웹 페이지 개발을 시작하고 싶어요

매번 HTML, CSS, Javascript 문법만 몇 번씩 봤어요.

나만의 것을 만들어보고 싶어요.

LLM을 잘 사용해보고 싶어요
요새 AI가 핫하다던데,

제가 뭔가 이용할 수 없을까요?

새로운 툴을 어떻게 써야 할까요.

웹 기술의 역사와 근원이 궁금해요
웹 페이지는 어떻게 동작하지?

API는 뭐지? 웹 브라우저는?

HTML은 누가 만들었을까?

💡마구잡이로 LLM(ChatGPT, Claude, Grok)에서 생성된 코드를 해석하기 어렵다면?

  • 만들어진 프로젝트를 통해 문법과 동작을 해석해요.

  • 모든 IT 기술은 단점과 불편함에서 탄생했어요. ES6는 무엇일까요? HTML은요?

  • 끝까지 완성해요. 나만의 프로젝트를 직접 올려보고, 실제 유저에게 내가 만든 페이지를 제공해요.

실제 강의에서 배우는 자료를 보고 판단하세요 😀

Cursor AI 코드 에디터를 세팅해요.

우리가 사용할 에디터를 직접 세팅해요.

개별 메뉴에 대해서 배워보고, 더 편하게 세팅할 방법은 없는지 함께 고민해봐요.

LLM을 통해 작성한 코드를 수정해봐요.

무작정 프롬프트로 생성한 웹 페이지!

이건 무슨 의미일까? 왜 이렇게 작동할까?

Javascript와 HTML를 하나씩 직접 수정해봐요.

예제로 배우고, 모르는 것은 설명해드릴게요.

이 문법은 언제 쓰는 걸까요?

책에서만 읽었던, 지나가다가 듣기만 했던 것을

직접 예제를 통해서 설명해요. 지루하지 않게 😃

직접 LLM으로 코드를 생성해보고 응용해요.

21세기는 AI의 시대! 이제 모두가 LLM으로 코드를 작성하죠. 그런데 읽을 줄 모르고 수정할 수 없다면? 그러면 제대로 동작하는 소프트웨어로 바꿔봐요!

수업만 들으면 재미없잖아요...!

코딩을 할 때 알면 좋은 것들은 무엇이 있을까요?

실제 개발을 하면서 어려움을 겪는 경우는 뭘까요?


화면에서 코드만 작성하지 않아요.

더이상 코드만 작성하는 수업은 No!

왜 이렇게 동작하는 지를 필기로 설명해드려요.


👍이 강의를 들으면 도대체 뭐가 남을까요.


이 강의는 LLM이 생성해주는 코드를 기반으로 cursor 프로젝트를 만들면서 웹 개발을 차근차근 배웁니다.

하지만! 단순한 웹 개발 뿐만 아니라 아래와 같은 고민이 있으신 분에게도 도움이 될 거에요.


1. 혼자서라도 창업할 수 있는 방법은 없을까요? 인디 해커가 되고 싶어요!

<한 사람이 만든 10억 달러 가치의 회사>

출처: https://every.to/napkin-math/the-one-person-billion-dollar-company

<10개의 인상 깊은 한 사람이 만든 회사들>

출처: https://hackernoon.com/check-out-these-impressive-1-person-companies

1인 기업으로서 10억 달러(1.3조원) 가치를 가지는 기업들이 나올 것이라고 예측하는 사람들이 있어요.

그 중 한 명이 OpenAI의 샘 알트먼이죠! AI는 이 시대를 바꿀 새로운 기술이라고 해요.

반대로 혼자서는 그렇게 크게 성공하기 쉽지 않다는 사람도 있죠.


그런 생각해본 적 있으세요?

'혼자서 세상에 영향을 미칠 수 있는 방법은 무엇일까?'

'퇴근하고 나서, 휴직 기간에, 시간과 장소에 영향을 덜 받고 할 수 있는 활동은 없을까?'

창업 비용은 제로로 떨어지고, 소프트웨어 개발은 날로 쉬워지고 있어요.

소프트웨어 개발이 이런 고민들의 대답이 될 수 있어요.


이제는 LLM의 시대에요.

Grok, Claude, ChatGPT, Gemini, DeepSeek까지!

여러 개의 LLM 모델을 통해서 코드를 자동 생성하고, 수정해보고, 해석해보는 것을 배워요.


2. 뭔가가 되긴 되는데, 왜 되는지 모르겠어요. 배우고 싶습니다!

< 이제는 자연어 문장 하나로 간단한 웹 페이지가 나오는 세상이에요. >


이걸로 뭔가를 만들어볼 수는 없을까요?

여러 페이지가 있는 기업형 랜딩페이지, 나를 알릴 수 있는 포트폴리오 홈페이지, 간단한 퀴즈를 내고 상식을 알려주는 정보성 페이지나 블로그는요?


무엇가를 만들 수 있는 세상에서 조금만 더 툴을 알면 "진짜 제품"을 만들 수 있어요!

이 강의를 통해서 여러분들이 직접 만든 웹 페이지를 무료 호스팅 서비스에 업로드하고, 실제 유저들을 모아보세요.


3. 웹 페이지를 만들었다! 그 다음은...?

제목: 「혼자 SaaS를 창업하는 사람들에게 좋은 툴?」 출처: 해커뉴스

웹 페이지는 누구나 만들 수 있다고요?

배포는요? 유지보수는요? 데이터 수집은 어떻게 할까요? 수익화 할 수 있는 방법은 무엇일까요?


첫 번째 허들을 넘으면 다음 허들을 넘어야해요.

데이터 수집, 백엔드 개발, DB 관리....

까지 가기 전에!


먼저 제대로 된 웹을 업로드하고, 배포하면서 어떻게 웹 페이지가 동작하는 지를 배워야 해요.

이 강의에서는 웹 페이지를 만드는 과정과 그 이후에 어떤 것들이 필요한지도 간단하게 배울 거에요.

👋 강의를 만든 이유 & 강사 소개


안녕하세요, 유튜브에서 @weekendcode로 활동하고 있는 주말코딩이라고 합니다.

Java 개발자로 일하다가 현재는 프로그래밍 교육 관련 콘텐츠를 만들고 있습니다.


컴퓨터를 전공하지 않은 분들, 컴퓨터에 관심있는 노년층 분들, 다른 업을 하다가 은퇴한 분들을 과외로 가르쳐 본 경험이 있습니다. 기존에 대학에서 가르치는 방식에 대해 회의가 많았습니다.


이번에는 웹 개발입니다!

처음으로 나만의 웹 페이지를 개발해보고 싶은 분들을 위해서 A부터 Z까지 준비해보고 싶었어요.

한 땀 한 땀 만든 고퀄리티 발표 자료 슬라이드와 아무도 안 알려주는 웹과 인터넷의 역사까지!


처음부터 어떻게 탄생했는지, 왜 이렇게 사용하게 되었는 지를 알면 훨씬 더 이해가 쉬워지니까요 😃


다른 강의는 어려웠어요. 그래서 이 강의를 만들었어요.


제가 처음 웹 개발을 배운 날을 아직도 기억합니다.

수 많은 강의를 듣고, 학교에서 수업도 듣고, 학원도 다녔어요.

그런데 도대체 왜 이렇게 쓰는 건지, 이런 것들은 어떻게 생겨났는지 설명해주는 사람이 아무도 없었어요.


하지만 현장에서 직접 개발을 하니 생각보다 쉬운 것들이 많았고,

그런 것들을 하나하나 모아서 하나의 강의로 엮어서 제공해드리려고 합니다.



학습 이해도를 높이기 위해서 최선을 다합니다.


이 강의는 제 첫 강의가 아닙니다.

다른 영상과 강좌에서의 리뷰를 보여드립니다.

허투루 만든 강좌가 아닌, 하나하나 이해가 될 때까지 설명해드립니다.

모르면 바로바로 질문 올려주세요!


시대가 빠르게 변하고 있지만.. 알아야 할 것은 배워야 해요.


이제는 모두가 AI를 말하고 있어요. 생성형AI, LLM, 프로그래밍...

수많은 키워드 속에서 "한방에! 자동화!"를 외치기 전에 기초를 알아야 해요.

그래야 좀 더 큰 규모의 웹 페이지, 잘 정돈된 코드, 유지보수하기 쉬운 소프트웨어를 작성할 수 있어요.


우리는 제품도 만들면서 Javascript 문법과 웹 브라우저의 동작을 배워볼 거에요.

💡모르는 것은 바로 질문 올려주세요!

  • '내가 이해 못하는 내용이 있지 않을까' 싶으신가요? 걱정 마세요. 모두에게 처음이 있듯이 어떤 질문에 대해서도 충분히 고민하고 바로 답변드립니다 😃

  • 이 강의 하나로 웹 페이지 제작부터 배포까지 모두 끝내요. 어려운 만큼 여러분의 성장을 위한 경험이 될 것이라고 믿습니다.


🤔 수강 전 참고 사항

실습 환경

  • Cursor AI, 웹 브라우저에서 실습합니다.

  • 우리가 만든 웹 페이지는 Cloudflare Pages에 배포합니다.

  • Windows, MacOS 모든 환경을 설명드립니다.


학습 자료

  • 코드(HTML, JS, CSS)는 모두 파일 원본 그대로 제공

  • 일목요연하게 정리한 Javascript 문법 PDF로 제공

🖋 Tips! 강의만 들으면 너무 재미없잖아요.

제가 개발을 하면서 겪었던 재미있는 이야기와 썰로 쉬어가면서 강의를 들어요.


  • 내게 맞는 프로그래밍 폰트는 어떻게 찾을 수 있을까?

  • 개발하다가 장애물을 만나면 어떻게 해결하지? MDN / ECMA 문서 보기!

  • 브라우저 호환성으로 직접 고생한 썰 풀어드립니다.

  • 제가 직접 경험한 위대한 비전공자들 (혼자 개발해서 수 억 원을 벌었다고요?!)

  • 생각보다 어렵지 않네? 내가 개발한 웹 페이지로 돈을 버는 방법!


웹 개발을 처음 경험하시나요? 아마 이 강의가 여러분의 인생을 바꿀 수도 있어요!

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 웹 페이지 개발을 배워보고 싶으신 분

  • Javascript는 들어봤는데, 어떻게 활용할지 모르는 분

  • 지긋지긋한 언어 튜토리얼이 아닌 "제품 개발"을 해보고 싶으신 분

  • 빠른 프로토타입핑 & 나만의 사업 시작을 원하는 분

선수 지식,
필요할까요?

  • 초보 수준의 HTML, Javascript가 도움은 됩니다.

안녕하세요
주말코딩입니다.

2,946

수강생

246

수강평

824

답변

4.7

강의 평점

2

강의

안녕하세요. @weekendcode 라는 유튜브 채널을 운영하고 있습니다.

비전공자, 코딩에 관심 있는 학생들을 위해 최대한 쉽게 설명하고자 노력하는 강사입니다.

커리큘럼

전체

63개 ∙ (10시간 4분)

해당 강의에서 제공:

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

수강평

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