강의

N
챌린지

멘토링

로드맵

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

/

AI 코딩

비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)

이 강의를 모두 들으시고, 응용하면 여러분만의 사이트, 앱을 만들 수 있어요. 이 강의는 Cursor AI 를 이용하여, 우리 가족만을 위한 단톡방을 Web사이트로 만들면서, 코딩의 흐름을 자연스럽게 익혀보는 바이브코딩 입문 강의입니다. App 개발자 계정이나 맥북 없이, 윈도우 환경만으로도 개발을 몰라도 누구나 쉽게 따라 할 수 있고, 실제 웹사이트로 배포하는 법도 배웁니다.

(4.7) 수강평 15개

수강생 182명

  • 체험코딩
실습 중심
AI 코딩
AI 활용법
토이프로젝트
FirebaseNext.jsvercelCursorAI바이브코딩

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • 바이브 코딩을 가장 효율적으로 배웁니다.

  • 실습 중심: 따라만 해도 완성되는 실전 채팅웹

  • Firebase의 핵심 서비스(Auth, Firestore) 완전 정복

  • Vercel로 배포까지 한 번에!

👨‍👩‍👧‍👦 내 아이를 위한 프라이빗 메신저, 직접 만들었습니다


혹시 이런 고민 해보신 적 있으신가요?

“어린 아이가 상용 메신저를 쓰는 게 걱정된다…
가족끼리만 쓸 수 있는,
안전한 메신저가 있었으면 좋겠다!”


광고도 많고, 낯선 사람과 연결될 수도 있는
일반 메신저보다는
우리 가족만 사용할 수 있는,
간단하고 안전한 메신저가 있었으면 좋겠더라고요.


그래서 Flutter와 Firebase를 이용해
직접 우리 가족 전용 메신저를 만들었습니다.
(이 강의에서는 Web + Firebase를 이용합니다.)


아이폰, 아이패드, 안드로이드 폰…
가족들이 사용하는 기기 운영체제가 제각각이라
크로스 플랫폼을 지원하는 Flutter를 선택했죠.


🧑‍💻 그런데, 이걸 어떻게 만들었냐고요?


바로 요즘 한창 유행한다는 ‘바이브코딩’으로요!


저는 애플, 구글 개발자 계정이 있기때문에
실제 기기에 설치까지 해 봤지만,

하지만 이 강의에서는 그런 계정 없이도,
윈도우 환경에서 누구나 쉽게 따라할 수 있도록
웹 기반 메신저 버전으로 준비했습니다.

일단 바이브코딩을 접해보는 것이 중요하니까요!


📚 이 강의는 이런 분들을 위한 강의예요!


  • "개발 하나도 몰라도 괜찮을까?" 싶은 비전공자, 입문자

  • 맥북 없이 윈도우만 있는 환경에서 시작하고 싶은 분

  • 실제로 작동하는 웹사이트를 내 손으로 만들고 싶은 분

  • 가족, 커플, 친구들끼리 쓸 나만의 메신저를 만들어보고 싶은 분



🎥 강의는 이런 순서로 진행돼요


  1. 완성된 웹 메신저 시연 — 먼저 결과물을 보고 동기 부여 받기!

  2. Firebase, GitHub, Vercel 계정 만들기 — 실전 준비 단계

  3. Node.js 설치 및 환경 구성 — 개발 환경 세팅도 차근차근

  4. Cursor 설치 (AI 코딩 도우미) — 코딩이 처음이라도 걱정 없어요!

  5. 본격적인 메신저 코딩 시작 — 직접 기능을 구현해봐요

  6. Vercel을 통한 실시간 웹 배포 — 내가 만든 메신저, 세상에 공개!


🌟 실제로 작동하는, 나만의 웹 메신저


이 강의는 코딩 언어를 가르치지 않습니다.
바이브 코딩을 하는 법만 배웁니다.

그리고 이렇게 만든 메신저는
실제로 친구나 가족과 사용할 수 있는
진짜 메신저 웹사이트를 완성하게 됩니다.


🌱 그리고, 다음 도전은 Flutter 앱입니다!
(이 강의에서 모바일 App은 만들지 않습니다)


웹으로 메신저의 구조와 원리를 익혔다면,
이제는 모바일 앱에도 여러분이 직접 도전해보세요!


Flutter는 한 번의 코드 작성으로
iOS, Android, 웹까지 동시에 개발할 수 있는 놀라운 도구입니다.
언젠가는 여러분도
가족을 위한 나만의 앱, 직접 만들 수 있을 거예요.

코딩이 처음이라도 괜찮습니다.
가장 쉬운 출발선에서, 실전까지 함께 갑니다.
우리만의 메신저를 만들 준비 되셨나요? 😄

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 직접 동작하는 채팅을 만들어보고 싶은 입문자

  • Firebase의 실전 활용법을 배우고 싶은 분

안녕하세요
입니다.

226

명

수강생

18

개

수강평

4

개

답변

4.8

점

강의 평점

2

개

강의

안녕하세요. 코딩 및 개발을 체험하면서 서비스까지 만들어보는 강의를 하는 체험코딩입니다.

커리큘럼

전체

11개 ∙ (1시간 21분)

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

수강평

전체

15개

4.7

15개의 수강평

  • 백승헌님의 프로필 이미지
    백승헌

    수강평 1

    ∙

    평균 평점 5.0

    5

    36% 수강 후 작성

    • Jang Jaehoon님의 프로필 이미지
      Jang Jaehoon

      수강평 525

      ∙

      평균 평점 4.8

      5

      27% 수강 후 작성

      좋은 강의 감사합니다!

      • 체험코딩
        지식공유자

        미흡한 강의인데 잘 들으셨다니 다행이고 감사드립니다. 궁금한점은 언제든 질문주세요~

    • Hyewon Kim님의 프로필 이미지
      Hyewon Kim

      수강평 1

      ∙

      평균 평점 5.0

      5

      45% 수강 후 작성

      • 예박님의 프로필 이미지
        예박

        수강평 8

        ∙

        평균 평점 5.0

        5

        36% 수강 후 작성

        • kyoungmin Han님의 프로필 이미지
          kyoungmin Han

          수강평 2

          ∙

          평균 평점 4.5

          5

          36% 수강 후 작성

          뭔지 잘 모르지만 재밌어요 ^^;;

          • 체험코딩
            지식공유자

            안녕하세요 kyoungmin Han님, 수강평 남겨주셔서 감사해요 잘 이해 안되는 부분은 커뮤니티에 질문 게시판에 남겨주시면, 최대한 설명 드릴게요~ 포기하지마시고 끝까지 도전해보시고, 다 완강하시면 다른 앱도 꼭 만드는거 도전해보세요!

        ₩9,900

        체험코딩님의 다른 강의

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

        Strapi로 코딩없이 나만의 API 서버 만들기Course Thumbnail

        Strapi로 코딩없이 나만의 API 서버 만들기

        체험코딩

        나만의 백엔드 API 서버를, Node기반의 Strapi v4를 이용하여, 몇 번의 클릭으로 별다른 코딩없이 만들어 AWS EC2에 배포 해보는 과정입니다. Strapi v5도 거의 동일하게 적용이 가능합니다. 강의 A/S도 있으니 참고하세요~

        Intermediate

        Intermediate

        strapi, Node.js, ec2

        Strapi로 코딩없이 나만의 API 서버 만들기Course Thumbnail

        Strapi로 코딩없이 나만의 API 서버 만들기

        체험코딩

        비슷한 강의

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

        비전공자도 가능한 AI 바이브코딩 입문 코스Course Thumbnail

        비전공자도 가능한 AI 바이브코딩 입문 코스

        아이티커넥트

        💡 비개발자도 AI와 함께 단 10시간 창업 MVP부터 수익화 서비스까지! 💰 외주비 수천만원이 필요했던 개발 이제 12만원으로 완전 해결 🎯 명함인식, 감정분석, 입지분석까지 실전 비즈니스 프로젝트 5개 완주 🔥 기획자, 마케터, 예비창업자라면 개발자 없이도 아이디어 구현 ⚡ 지금 시작하면 평생 써먹을 개발 자립 능력을 획득하세요!

        Beginner

        Beginner

        HTML/CSS, Java, 웹앱

        비전공자도 가능한 AI 바이브코딩 입문 코스Course Thumbnail

        비전공자도 가능한 AI 바이브코딩 입문 코스

        아이티커넥트

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

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

        개발하는 분석가

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

        Basic

        Basic

        Python, FastAPI, cursor

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

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

        개발하는 분석가

        Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)Course Thumbnail

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

        짐코딩

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

        Basic

        Basic

        React, 블로그, Next.js

        Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)Course Thumbnail

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

        짐코딩

        AI툴을 활용한 바이브코딩으로 월 1,000만원 벌기Course Thumbnail

        AI툴을 활용한 바이브코딩으로 월 1,000만원 벌기

        주상천하

        AI 툴과 자동화 기술이 넘쳐나는 시대, 'Cursor' 하나로 누구나 시작할 수 있는 바이브 코딩을 소개합니다. 개발자만 가능한 일이라고요? 아닙니다. 이 클래스에서는 코드 한 줄 몰라도, 마우스 클릭, 프롬프트 입력만으로 Cursor를 활용해 앱과 앱을 만들어서 수익을 창출하는 자동화 시스템을 구축할 수 있습니다. 수강 대상 개발은 어렵지만 자동화로 수익을 내고 싶은 분 디지털 노마드, 1인 기업, 프리랜서 AI 활용을 통해 시간과 비용을 절감하고 싶은 모든 분

        Beginner

        Beginner

        cursor, CursorAI, MySQL

        AI툴을 활용한 바이브코딩으로 월 1,000만원 벌기Course Thumbnail

        AI툴을 활용한 바이브코딩으로 월 1,000만원 벌기

        주상천하

        코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)Course Thumbnail

        코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)

        FreAiner Harris

        제가 이 강의를 만든 이유는 하나입니다. “나 같은 비전공자가 자신의 아이디어를 실현할 수 있도록 돕고 싶다”는 마음 때문입니다.

        Beginner

        Beginner

        cursor, No-code, Firebase

        코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)Course Thumbnail

        코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)

        FreAiner Harris

        만약 "영업사원"이 바이브 코딩을 배운다면 (Bolt)Course Thumbnail

        만약 "영업사원"이 바이브 코딩을 배운다면 (Bolt)

        퇴근후딴짓

        혹시 중요한 고객 미팅 후, 아이 컨택 대신 메모에만 집중하거나 미팅 내용을 정확히 기록하지 못해 아쉬웠던 경험 있으신가요? 이제 더 이상 걱정 마세요! 이 강의에서는 바이브 코딩(Vibe Coding)을 활용해 AI로 핵심 내용을 요약하며, 깔끔하게 미팅 내용을 저장하는 나만의 CRM 어시스턴트를 직접 만들 수 있도록 도와드립니다. 번거로운 문서 작성 시간을 획기적으로 줄여 업무 생산성을 극대화하고, 고객 관리를 혁신하는 방법을 배우게 될 거예요!

        Beginner

        Beginner

        Firebase, 업무 생산성, 프롬프트엔지니어링

        만약 "영업사원"이 바이브 코딩을 배운다면 (Bolt)Course Thumbnail

        만약 "영업사원"이 바이브 코딩을 배운다면 (Bolt)

        퇴근후딴짓

        Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)Course Thumbnail

        Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

        도도(코딩루팡)

        Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

        Basic

        Basic

        Next.js, supabase, React

        Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)Course Thumbnail

        Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

        도도(코딩루팡)

        Next.js 시작하기(feat. 지도 서비스 개발)Course Thumbnail

        Next.js 시작하기(feat. 지도 서비스 개발)

        박용주

        Next.js의 기본을 다루는 강의입니다. Next.js로 지도 서비스를 처음부터 끝까지 개발해봅니다.

        Basic

        Basic

        Next.js, SEO, vercel

        Next.js 시작하기(feat. 지도 서비스 개발)Course Thumbnail

        Next.js 시작하기(feat. 지도 서비스 개발)

        박용주

        앵귤러 파이어베이스 완전정복 - PetStore 쇼핑몰 프로젝트Course Thumbnail

        앵귤러 파이어베이스 완전정복 - PetStore 쇼핑몰 프로젝트

        노마드크리에이터

        앵귤러 Front-end와 파이어베이스 Back-end를 이용하여 다양한 분야에 바로 적용할 수 있는 Pet Store 쇼핑몰 Blueprint Application을 따라가면서 같이 만들어보는 실전 프로젝트 역량강화 과정입니다.

        Intermediate

        Intermediate

        Angular, PWA, Firebase

        앵귤러 파이어베이스 완전정복 - PetStore 쇼핑몰 프로젝트Course Thumbnail

        앵귤러 파이어베이스 완전정복 - PetStore 쇼핑몰 프로젝트

        노마드크리에이터

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

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

        코드캠프

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

        Basic

        Basic

        React, Next.js, expo

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

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

        코드캠프

        손에 익는 Next.js - 공식 문서 훑어보기Course Thumbnail

        손에 익는 Next.js - 공식 문서 훑어보기

        하조은

        공식 문서로 최신 Next.js를 배워봅니다. 문제 해결의 도구로써 Next.js가 필요한 이유를 이해하실 수 있어요!

        Basic

        Basic

        Next.js, next.js13, React

        손에 익는 Next.js - 공식 문서 훑어보기Course Thumbnail

        손에 익는 Next.js - 공식 문서 훑어보기

        하조은

        MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 ReactCourse Thumbnail

        MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

        판다코딩

        MERN Stack을 활용하여 커뮤니티 어플리케이션을 제작하고, 배포합니다. (MongoDB, Express, React, Node + Firebase)

        Basic

        Basic

        MongoDB, Express, React

        MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 ReactCourse Thumbnail

        MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

        판다코딩

        손에 익는 Next.js - 블로그 만들기Course Thumbnail

        손에 익는 Next.js - 블로그 만들기

        하조은

        Next.js로 개인 블로그를 만들며 Next.js를 손에 익혀봐요!

        Basic

        Basic

        Next.js, React, 블로그

        손에 익는 Next.js - 블로그 만들기Course Thumbnail

        손에 익는 Next.js - 블로그 만들기

        하조은

        비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

        딩코딩코

        코딩 몰라도 OK! 당신의 아이디어를 단 4주 만에 실제 수익으로 바꿔보세요. AI와 최신 도구를 활용해, 웹사이트와 앱을 동시에 만들고 바로 서비스까지 연결합니다.

        Beginner

        Beginner

        Flutter, Next.js, cursor

        비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

        딩코딩코

        찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)Course Thumbnail

        찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

        ludgi

        찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

        Intermediate

        Intermediate

        Next.js, React, GraphQL

        찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)Course Thumbnail

        찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

        ludgi

        [2021] 요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - JavascriptCourse Thumbnail

        [2021] 요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - Javascript

        David

        2021년 새롭게 돌아온, "요즘 누가 유료로 웹서비스 구축하나, Firebase의 모든 것 - JavaScript" 강의! 1인 창업을 꿈꾸는 초급 개발자를 위한 바이블이 되어드립니다.

        Basic

        Basic

        Firebase

        [2021] 요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - JavascriptCourse Thumbnail

        [2021] 요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - Javascript

        David