콜로소

Search Input

앱스토어 3위에게 기초부터 배우는 실전형 바이브 코딩 웹/앱 서비스 런칭 프로젝트

AI 연구원 서찬
  • 수강가능
바이브코딩풀스택인터랙티브웹모바일앱
‌
‌

클래스 상세 정보

  • 수강가능
  • 입문~중급
  • 총 66회
  • 한국어
  • -
  • 강의자료 포함
‌
‌
‌

[Dictionary] AI연구원 서찬 Details

커리큘럼
커리큘럼

커리큘럼을 보여드려요

- 1차 영상공개 (1-30강) 8/8 (금) - 2차 영상공개 (31-66강) 9/25 (목)
  • SECTION 01
    첫 만남! 바이브 코딩으로 진짜 내 서비스 만들기
    curriculum-dictionary-seochan-01.webp

    • 01. 코딩? AI? 요즘 핫한 바이브 코딩에 대하여- 바이브 코딩이란? - AI 시대, 코딩 기초는 왜 여전히 중요한가? - 비전공자도 개발자도 주목해야 하는 이유 - 서찬의 실전 경험 소개 - 이번 강의가 열어줄 가능성과 변화

    • 02. 웹부터 앱까지, 강의 목적 & 성장 로드맵- 웹 → 풀스택 → 앱으로 이어지는 전체 흐름 소개 - 프로젝트별 학습 목표 및 완성 결과물 - 수강 이후 실무 및 개인 프로젝트 적용 방법 안내

    • 03. 강의 효과를 200% 올리는 학습 자료 활용법- Notion 기반 강의 자료 활용법 - GitHub 코드 자료 보는 법 - GitHub 폴더 구조 소개

    • 04. 우리만의 학습 아지트, 커뮤니티 활용 가이드- Discord 기반 커뮤니티 운영 소개 - 질문 잘하는 법 & 빠른 답변을 위한 TIP - 프로젝트 공유 및 피드백 받는 법 - 사이드 프로젝트 팀 빌딩

    • 05. [부록] 비전공자를 위한 개발 핵심 용어 해설집- 강의 전반에 자주 등장할 주요 용어 정리 - 개발 용어 해설집 가이드

  • SECTION 02
    개발 환경 구축 : 단단한 코딩 첫걸음
    curriculum-dictionary-seochan-02.webp

    • 06. AI에게 시키면 끝? 바이브 코딩 100배 활용 전략- ChatGPT, Gemini를 활용해 코드 초안 만들기 - AI 코딩의 한계와 보완이 필요한 이유 - 오류 수정, 코드 확장, 질문 설계의 중요성 - 코딩 기초와 AI를 함께 배워야 하는 이유

    • 07. 내 손에 착붙는 코딩 작업실 세팅 : VSC, Cursor, 필수 확장 프로그램- VSC vs. Cursor, 어떤 도구가 있을까? - 설치 가이드 및 셋업 TIP - 필수 확장 프로그램 추천 및 설치 방법

    • 08. 협업과 버전 관리의 기본, GitHub 핵심 기능 정복하기- GitHub의 개념과 쓰임새 쉽게 이해하기 - 기본 명령어 실습 : clone, commit, push

    • 09. 내 아이디어에 맞는 프로젝트 타입 고르기- 정적 웹, 웹앱, 모바일 앱의 차이점 비교하기 - 내가 계획한 서비스에 가장 어울리는 형태 찾아보기 - 의사 결정 플로우 차트를 바탕으로 프로젝트의 방향 잡기

  • SECTION 03
    Vanilla JS로 만드는 나의 첫 웹페이지
    curriculum-dictionary-seochan-03.webp

    • 10. 코딩의 기본 재료, 순수 JS(Vanilla JS)의 이해- Vanilla JS의 정의 및 역할 - 프레임워크와의 관계 - 순수 JS가 학습 초기에 적합한 이유

    • 11. 한눈에 보는 HTML, CSS, JS 파일의 구조- HTML의 기본 구조와 핵심 태그 - 각 태그의 역할과 비유 - 파일 간 연결 방식의 이해

    • 12. 외부 폰트와 아이콘, CDN으로 쉽고 빠르게 적용하기!- CDN의 개념 및 활용 방법 - Google Fonts, FontAwesome 불러오기 - <link>, <script> 태그 실습

    • 13. 예제 프로젝트 '바이브 미' 소개- 온라인 명함 '바이브 미' 프로젝트 개요

    • 14. 내 손으로 온라인 명함의 뼈대 만들기- 이름, 소개, 버튼 구성 - 시멘틱 태그 설명과 적용

    • 15. CSS로 온라인 명함에 직접 스타일 입히기- Flexbox 정렬 - 폰트, 색상, 버튼 스타일링 - 반응형 디자인 추가하기

    • 16. JavaScript로 인터랙티브 온라인 명함에 생명 불어넣기- 팝업/다크모드 Toggle 기능 - 간단한 모션 효과 적용

    • 17.' 바이브 미' 완성 & 바이브 마무리- 강사의 바이브 코딩 - 프롬프팅 개선 TIP 적용

    • 18. 내 웹사이트를 세상에 공개한는 Netlify 명함 배포 방법- Drag & Drop 배포 실습 - GitHub 연동 & 실시간 반영

    • 19. Meta Tag 설정 및 매력적인 공유 페이지 제작하기- OG 태그 개념과 활용 예시 - HTML에 OG 태그 추가하기

    • 20. 나만의 인터넷 주소를 갖는 커스텀 도메인 연결법- 도메인 종류 및 구매 방법 알아보기 - Netlify에서 도메인 연동하기

  • SECTION 04
    React와 AI API로 완성하는 나의 첫 인터랙티브 웹앱
    curriculum-dictionary-seochan-04.webp

    • 21. React와의 첫 만남- React의 등장 배경 및 주요 특징 알아보기 - SPA 구조와 컴포넌트 기반 개발 방식

    • 22. React의 데이터 흐름 이해하기 : 단방향 데이터 흐름 & 상태 관리 기초- useState, props로 배우는 단방향 데이터 흐름 - 상태 관리의 기초 개념

    • 23. 세상의 모든 데이터를 활용하는 API 기초 & LLM API 파헤치기- API의 기본 원리(HTTP, JSON) - Gemini LLM API의 작동 원리 및 문서 읽는 법

    • 24. 프로젝트 '물어봐이브' 소개- LLM 기반 AI Q&A - '물어봐이브' 프로젝트 개요

    • 25. React 프로젝트 초기 세팅- Vite로 빠른 프로젝트 시작하기 - ESLint & Prettier 설정

    • 26. '물어봐이브' UI 레이아웃 구성하기- 입력창, 버튼, 결과창 UI 설계

    • 27. AI API 데이터 가져오기 : fetch + useEffect 심층 활용법- fetch + useEffect로 API 연동하기 - 프롬프트 전송 및 응답 처리

    • 28. 보기 좋게 AI 답변 출력하기- 상태 관리 및 조건부 렌더링 - 보기 좋은 텍스트 출력 방법

    • 29. '물어봐이브' 완성! 바이브로 마무리하기- 바이브 코딩 시연 - 프롬프팅 개선 TIP 적용 방법

    • 30. 환경 변수 & Netlify 배포- API 키 안전하게 숨기고 세상에 공개하기

  • SECTION 05
    Next.js와 Supabase로 만드는 나의 첫 풀스택 웹앱
    curriculum-dictionary-seochan-05.webp

    • 31. 한 단계 더! React를 넘어 Next.js로- Next.js의 구조와 렌더링 방식 소개 - CSR/SSR/SSG 개념 비교 - App Router 기반 폴더 구조

    • 32. 타입도 스타일도 확실하게! TypeScript & Tailwind의 핵심- TypeScript 기본 문법과 타입 선언 - Tailwind로 UI 스타일링 실습

    • 33. 풀스택의 새로운 기준, Supabase 파헤치기- Supabase DB, Auth, Storage 소개 - 실시간 기능 원리 설명

    • 34. 프로젝트 '바이보 보드' 소개 - 실시간 협업 보드 '바이브 보드' 프로젝트 개요

    • 35. Next.js + Supabase 프로젝트 초기 세팅- Supabase 프로젝트 생성하기 - 초기 폴더 구조 세팅

    • 36. '바이브 보드' UI 레이아웃 구성하기- 기본 레이아웃 설계 및 UI 배치

    • 37. 구글 로그인 및 나만의 보드 만들기 (Auth & DB Create- 소셜 로그인 구현(OAuth) - 로그인 사용자 전용 보드 생성

    • 38. 혼자 쓰는 포스트잇 붙이기 : 기본 CRUD 구현- 포스트잇 CRUD 기능 구현

    • 39. 실시간의 마법! 내 보드에 친구 초대하기 : Realtime 구독- Realtime Subscriptions 설정 - 변경 사항 자동 반영 구현

    • 40. 보드에 이미지 업로드하기 : Supabase Storage- 이미지 업로드 UI 구성 - Storage 연동 및 출력

    • 41. '바이브 보드' 완성! 바이브로 마무리하기- 바이브 코딩 시연 - 프롬프팅 개선 TIP 적용

    • 42. Vercel 배포 & 도메인 연결로 서비스 런칭하기- GitHub 푸시 & Vercel 연동 - Vercel에서 도메인 연동하기

  • SECTION 06
    React Native와 Firebase로 만드는 나의 첫 모바일 앱
    curriculum-dictionary-seochan-06.webp

    • 43. 웹에서 앱으로? React Native와 Expo의 개념- 웹/앱 개발의 차이 - 앱 개발 하이브리드/네이티브의 차이

    • 44. Supabase vs. Firebase? NoSQL 맛보기- SQL vs. NoSQL 핵심 개념 - 상황에 따른 선택 가이드

    • 45. 프로젝트 '바이브 투데이' 소개- 하루 기록 앱 '바이브 투데이' 프로젝트 개요

    • 46. React Natvie 프로젝트 초기 세팅- IDE 설치 및 프로젝트 생성 - 프로젝트 폴더 구조 설계 - 스마트폰/시뮬레이터에서 실행

    • 47. '바이브 투데이' UI 레이아웃 구성하기- 앱 기본 화면 UI 설계

    • 48. 구글 로그인으로 전용 기록장 만들기- Firebase Auth로 소셜 로그인 구현하기

    • 49. 정적 데이터를 활용해 오늘의 바이브 키워드 보여주기- 랜덤 키워드 출력 기능 구현하기

    • 50. AI를 활용해 나의 하루를 그림으로 표현하기- Gemini로 글, 키워드 기반 이미지 생성하기 - Firestore에 데이터 저장하기

    • 51. 나의 바이브 기록을 갤러리처럼 모아보기- Firestore에서 이미지 불러오기 - 날짜순 기록 목록 UI 구현

    • 52. 하루 기록 앱, 바이브로 마무리하기- 바이브 코딩 시연 - 프롬프팅 개선 TIP 적용

    • 53. [부록] 푸쉬 알림 맛보기- Firebase Cloud Messaging

    • 54. iOS 배포 (Apple Connect)- iOS 배포 방법 - 배포 프로세스

    • 55. Android 배포 (Google Play Console)- Android 배포 방법 - 배포 프로세스

  • SECTION 07
    풀스택 마무리 : 한눈에 보는 배포 & 운영
    curriculum-dictionary-seochan-07.webp

    • 56. 웹/앱 개발 여정 총정리- 전체 개발 여정 총 정리

    • 57. 웹 출시, 커스텀 도메인 연결 복기 : Netify, Vercel- 웹 배포의 흐름 복기 - 도메인 연결, 마켓 심사 등 운영 개요

    • 58. 어플 출시 복기 : iOS/Android 배포 플로우- 앱 배포의 흐름 복기

    • 59. 앱 업데이트와 사용자 관리의 기술- 버전 관리 전략 및 마켓 심사 통과 꿀팁 모음집 - 버전명 전략 & 심사 통과 TIP - 배포 주기 및 반려 사유 예시 소개

    • 60. [부록] Figma & MCP로 스토어 리소스 쉽게 만들기- Figma → MCP 연동 방법 - 앱 스토어용 이미지 제작 실습

  • SECTION 08
    나만의 서비스 알리고 키우기
    curriculum-dictionary-seochan-08.webp

    • 61. 첫 사용자 10명 만들기 : 돈 안 드는 커뮤니티 홍보 & 입소문 전략- 타겟 커뮤니티 찾기 - 서비스 소개 글 작성 요령

    • 62. 유입 유저를 추적해 보자 : Google Analytics4(GA4) 연동- 웹/앱 GA 설정법 - 유입 경로와 클릭 이벤트 분석

    • 63. 서찬의 실전 마케팅 치트키: 피드백, 유저 모으기- 실전 경험에 기반한 마케팅 전략 - 피드백 수집과 유저 확보 TIP

  • SECTION 09
    앱스토어 3위를 이끈 한 끝이 다른 서비스 기획 & 검증 노하우
    curriculum-dictionary-seochan-09.webp

    • 64. 성공하는 서비스를 만든 서찬의 아이디에이션- 다양한 아이디어를 발산하는 법 - 트렌드 커뮤니티에서 유저 문제 포인트 찾기 - 문제를 서비스 아이디어로 발전시키는 법

    • 65. 유저가 공감하는 서비스를 만드는 기획 센스- 일상의 불편함에서 출발하는 서비스 아이디어 기획 - 문제 찾기 → 상황 정의 → 개발 계획 → 서비스 구상 - GPT와 함께 아이디어를 고도화하기

    • 66. 이제 진짜 시작! 나만의 첫 서비스, MVP로 만들기- MVP 전략 이해 - 작게 시작해 빠르게 검증하는 법

추천 클래스

유의사항

*강의 영상 공개일은 예고 없이 변경될 수 있습니다. *상세페이지 내 일부 이미지는 수강생의 이해를 돕기 위한 참고 이미지입니다. * 본 상품은 동영상 형태의 강의를 수강 하는 상품입니다.(ASSET상품 제외) * 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다. * 사전 예약 강의의 경우, 강의 영상은 공개 일정에 따라 순차적으로 제작되어 오픈되며, 1차 영상 공개일이 수강시작일이 됩니다. * 수강 신청 및 결제를 완료하시면, 마이페이지를 통해 바로 수강이 가능합니다. 총 학습기간: – 정상 수강기간(유료 수강기간) 최초 10일, 무료 수강 기간은 11일부터 이후로 무제한이며, 유료 수강기간과 무료 수강기간 모두 동일하게 시청 가능합니다. – 수강시작일: 수강 시작일은 결제일로부터 기간이 산정되며, 결제를 완료하시면 마이페이지를 통해 바로 수강이 가능합니다. (사전 예약 강의는 1차 강의 오픈일) – 콜로소의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다.
회사의 환불정책은 다음과 같습니다.
  • 가. 결제 후 파일 공개 전(강의 영상 공개 전)환불을 요청하시면 전액 환불이 가능합니다.
  • 나. 결제일로부터 7일 이내 및 3개 미만의 파일을 이용하신 경우 환불을 요청하시면 전액 환불이 가능합니다.
  • 다. 결제일로부터 7일 이내 3개 이상의 파일을 이용하신 경우 환불을 요청하시면 실 결제금액의 1/2에 해당하는 금액을 환불해드립니다.
  • 라. 결제일로부터 7일 초과 10일 이내 및 3개 미만의 파일을 이용하신 경우 실 결제금액의 1/2에 해당하는 금액을 환불해드립니다.
  • 마. 결제일로부터 7일 초과 10일 이내 및 3개 이상의 파일을 이용하신 경우 환불 가능 금액이 없습니다.
  • 바. 결제일로부터 10일 초과 시 환불 가능 금액이 없습니다.
  • 사. 환불 금액 확인 후 실제 환불이 이루어지기 전 추가적으로 강의 영상 파일 또는 강의 자료 파일을 이용한 상황이 확인되면 환불 가능 금액은 달라질 수 있습니다.
  • 아. 평생 시청 수강권의 경우 수강 일수에 제한이 없으나, 기간 선택 수강권은 구매 시점에 선택하신 기간에 해당하는 일 수만큼 수강이 가능하며, 일시 정지 및 기간 연장이 불가합니다.
  • 자. 기간 선택 수강권은 평생 시청 수강권으로 전환이 불가합니다.
  • 차. 1:1 코칭권의 경우 결제일로부터 10일까지 전액 환불이 가능하며, 결제일로부터 10일 초과시, 사용 여부에 관계없이 환불 가능 금액이 없습니다.
결제 기준일
이용 파일 개수
환불률
결제 후 파일 공개 전
없음
100%
결제일로부터 7일 이내
3개 미만
100%
결제일로부터 7일 이내
3개 이상
50%
결제일로부터 7일 초과 10일 이내
3개 미만
50%
결제일로부터 7일 초과 10일 이내
3개 이상
0%
결제일로부터 10일 초과
무관
0%
- 본 제품을 재판매, 재배포, 도용, 양도하는 등의 행위는 불가능 합니다. - 본 제품에서 추출된 이미지, 단순 보정 이미지는 양도,배포, 판매가 불가능합니다. - 본 제품은 결제 완료 직후 [나의 강의장] > [수강하기] > [강의자료]로 확인 가능합니다. - 본 제품은 결제 후 7일 이내 및 파일을 이용하지 않으신 경우 환불을 신청하시면 전액 환불이 가능합니다. - 본 제품은 무형 상품의 특성상 결제 후 7일 이내 및 1개 이상의 파일을 이용하신 경우 환불 가능 금액이 없습니다. - 본 제품은 결제일로부터 7일 초과시 파일 사용 여부에 관계 없이 환불 가능 금액이 없습니다.
[유의사항] - 기간 선택 옵션은 구매 시점부터 선택하신 옵션에 해당하는 기간만큼 수강이 가능하며, 일시정지 및 기간 연장이 불가합니다. - 기간제 클래스의 수강기간이 끝난 뒤 평생시청 클래스로의 전환은 불가합니다. - 기간제 클래스의 수강기간이 끝난 뒤 평생시청 클래스로 수강을 원할 시 판매중인 평생시청 클래스를 구매하셔야 합니다. [환불안내] - 결제 후 파일 공개 전(강의 영상 공개 전)환불을 요청하시면 전액 환불이 가능합니다. - 결제일로부터 7일 이내 및 3개 미만의 파일을 이용하신 경우 환불을 요청하시면 전액 환불이 가능합니다. - 결제일로부터 7일 이내 3개 이상의 파일을 이용하신 경우 환불을 요청하시면 실 결제금액의 1/2에 해당하는 금액을 환불해드립니다. - 결제일로부터 7일 초과 10일 이내 및 3개 미만의 파일을 이용하신 경우 실 결제금액의 1/2에 해당하는 금액을 환불해드립니다. - 결제일로부터 7일 초과 10일 이내 및 3개 이상의 파일을 이용하신 경우 환불 가능 금액이 없습니다. - 결제일로부터 10일 초과 시 환불 가능 금액이 없습니다. - 환불 금액 확인 후 실제 환불이 이루어지기 전 추가적으로 강의 영상 파일 또는 강의 자료 파일을 이용한 상황이 확인되면 환불 가능 금액은 달라질 수 있습니다. - 평생 시청 수강권의 경우 수강 일수에 제한이 없으나, 기간 선택 수강권은 구매 시점에 선택하신 기간에 해당하는 일 수만큼 수강이 가능하며, 일시 정지 및 기간 연장이 불가합니다. - 기간 선택 수강권은 평생 시청 수강권으로 전환이 불가합니다. - 1:1 코칭권의 경우 결제일로부터 10일까지 전액 환불이 가능하며, 결제일로부터 10일 초과시, 사용 여부에 관계없이 환불 가능 금액이 없습니다. - 특별강좌는 이벤트성 강좌, 비정규 강좌, 특별기획 강좌 등으로서 이는 별도의 수강 취소, 변경 및 환불정책이 적용될 수 있습니다. - 보다 자세한 환불규정은 [여기]에서 확인 부탁드립니다. (2024-04-01 이용약관 개정) [영상 재생 가능 기기 대수 제한] - 하나의 계정당 영상 재생 가능한 기기 수를 3대로 제한하며, 핸드폰 변경 등과 같은 사유로 등록된 사용 기기를 변경하고 싶으실 경우 help@coloso.co.kr로 문의주시면 연 1회에 한하여 기기 변경 도와드리도록 하겠습니다. (등록하실 첫 3대의 기기는 로그인 후 영상 재생과 동시에 자동 등록됩니다.) [기타 사항] - 콜로소는 환불 시 금융거래수수료, 제세공과금 등을 공제할 수 있습니다. - 콜로소는 고객이 이용약관, 관련 법령 등을 위반한 경우 이용약관 및 관련 법령에 따라 환불을 거부할 수 있습니다. - 회원이 다음과 같은 행위 등으로 ‘사이트’의 업무를 방해하는 경우 ‘회사’는 회원자격을 제한 및 정지시킬 수 있습니다. ① ‘사이트’를 통해 ‘상품 등’을 구매한 후 정당한 이유 없이 상습 또는 반복적으로 취소∙반품하여 ‘회사’의 업무를 방해하는 경우 ② ‘사이트’를 통해 구입한 ‘상품 등’에 특별한 하자가 없는데도 불구하고 일부 사용 후 상습적인 취소∙전부 또는 일부 반품 등으로 ‘회사’의 업무를 방해하는 경우 [기타 문의] - 기타 프로모션에 대한 문의는 고객센터로 문의주시면 답변해 드립니다.
- 이용방법 : 본인의 포트폴리오 결과물 및 질문 최대 3개를 보내주시면 21일(영업일 기준) 이내로 피드백을 제공합니다. - 이용기한 : 결제일로부터 90일 이내 (이후 사용 여부에 관계 없이 이용권 소멸) *얼리버드(사전판매)로 구매하셨을 경우, 강의 영상 최초공개일이 수강시작일로 간주됩니다. - 제출방식 : feedback@coloso.co.kr 로 [이름 / 콜로소 ID / 휴대폰번호]를 적고, [포트폴리오 파일]을 첨부해 보내주세요. - 유의사항 : 코칭권 별 최대 질문 수, 제출 방식이 상이 할 수 있으니 자세한 내역은 코칭권 안내 섹션을 확인해주세요.
[사용기기 대수 제한] 하나의 계정당 수강 가능한 기기+브라우저 수량을 3개로 제한하며, 핸드폰 변경 등과 같은 사유로 등록된 사용 기기+브라우저를 변경하고 싶으실 경우 help@coloso.co.kr로 문의주시면 연 1회에 한하여 기존 등록된 내역 삭제 드리도록 하겠습니다. (등록하실 첫 3개의 기기+브라우저는 강의장 접속과 동시에 자동 등록됩니다.) [동시 접속 제한] 동일한 아이디로 2대 이상의 디바이스에서 서비스를 동시에 이용하거나 서비스 이용 중 복제프로그램을 실행하는 경우 또는 녹화를 하는 경우 영상 재생이 자동으로 정지됩니다. [기타 사항] - 콜로소는 환불 시 금융거래수수료, 제세공과금 등을 공제할 수 있습니다. - 콜로소는 고객이 이용약관, 관련 법령 등을 위반한 경우 이용약관 및 관련 법령에 따라 환불을 거부할 수 있습니다. - 회원이 다음과 같은 행위 등으로 ‘사이트’의 업무를 방해하는 경우 ‘회사’는 회원자격을 제한 및 정지시킬 수 있습니다. ① ‘사이트’를 통해 ‘상품 등’을 구매한 후 정당한 이유 없이 상습 또는 반복적으로 취소∙반품하여 ‘회사’의 업무를 방해하는 경우 ② ‘사이트’를 통해 구입한 ‘상품 등’에 특별한 하자가 없는데도 불구하고 일부 사용 후 상습적인 취소∙전부 또는 일부 반품 등으로 ‘회사’의 업무를 방해하는 경우