ONLINE CLASS

AI 바이브코딩 웹앱·프로그램 제작 실무

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

◆
기업이 선택한 신뢰 강의

검증된 커리큘럼과 전문 강사진으로 높은 만족도를 제공합니다.

자세히 보기  >
♥
수강료 일부는 사회환원에 사용됩니다.

작은 나눔이 더 나은 내일을 만듭니다.

자세히 보기  >
REAL REVIEW

수강생 리얼후기!

실제 수강생의 학습 경험을 확인해 보세요.

수강후기를 불러오는 중입니다.

RECENT Q&A

최근 수강질문

최근 등록된 수강질문을 작성순서대로 확인해 보세요.

AI 바이브코딩 웹앱·프로그램 제작 실무 AI 바이브코딩 웹앱·프로그램 제작 실무
  • AI 바이브코딩 웹앱·프로그램 제작 실무

  • 강의구성
  • (40강) 전체 : 7시간 45분|평균 : 11분37초
  • 이용기간/강사
  • 2개월
    알지오 R&D [AI]
  • 증빙가능
  • 수료증, 수강증, 학습진도
  • 수강료
  • 330,000원할인165,000원
?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q 초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

  • 01.11분 AI 바이브코딩 시작하기
    자연어로 지시하고 직접 실행하는 첫 웹페이지 만들기
    바이브코딩의 작업 흐름 이해, 웹사이트·웹앱·PC 프로그램 구분, AI에게 자기소개 페이지 제작 요청하기, 생성된 코드 저장과 브라우저 실행, 문구와 색상 수정하기
  • 02.13분 AI 개발 작업 환경 준비하기
    Windows에서 웹앱 제작과 실행에 필요한 환경 완성하기
    Cursor 설치와 프로젝트 폴더 열기, Node.js와 Git 준비, 파일 탐색기·편집기·터미널 이해, 개발 서버 실행과 종료, localhost 접속과 실행 오류 확인하기
  • 03.11분 원하는 결과를 만드는 작업 지시 작성하기
    모호한 아이디어를 AI가 구현할 수 있는 요구사항으로 바꾸기
    대상 사용자와 사용 목적 정하기, 입력·처리·출력 구분, 화면과 기능 목록 작성, 완료 조건과 제외 범위 지정, 작업을 작은 단위로 나누어 요청하기
  • 04.13분 생성된 웹 코드 이해하고 수정하기
    HTML·CSS·JavaScript의 역할을 실제 화면과 연결하기
    화면 구조와 HTML 요소 확인, CSS로 글꼴·여백·색상 변경, JavaScript로 버튼 동작 구현, 파일 연결 관계 파악, 개발자 도구로 수정 결과 확인하기
  • 05.13분 Cursor로 프로젝트 수정하기
    기존 파일의 맥락을 전달하고 필요한 부분만 정확하게 변경하기
    코드와 파일 참조하기, 관련 파일을 지정해 질문하기, 작업 계획 확인, 변경 내용 비교, 수정 승인과 되돌리기, 프로젝트 작업 규칙 작성하기
  • 06.12분 오류를 찾고 AI와 함께 해결하기
    실행되지 않는 화면과 잘못된 동작을 단계적으로 고치기
    터미널·브라우저 오류 확인, 오류 재현 절차 작성, 로그와 화면 전달, 원인 분석과 최소 수정 요청, 정상·실패 상황 재검사, 반복 수정으로 생긴 문제 복구하기
  • 07.12분 Git과 GitHub로 작업 기록 관리하기
    정상 작동하는 버전을 보관하고 이전 상태로 돌아가기
    저장소 생성, 변경 파일 확인, 커밋 작성, 제외 파일 설정, GitHub 비공개 저장소 연결, 이전 변경 확인과 복구, 비밀키가 포함되지 않았는지 검사하기
  • 08.12분 서비스 소개 랜딩페이지 제작하기
    제품과 서비스를 소개하는 첫 번째 실전 웹사이트 만들기
    방문 목적과 핵심 문구 정하기, 첫 화면·특징·사용 사례·문의 영역 구성, 버튼과 이동 링크 연결, 임시 콘텐츠 교체, 실제 이용 흐름 점검하기
  • 09.12분 반응형 디자인과 화면 완성도 높이기
    PC와 스마트폰에서 모두 보기 좋은 페이지 완성하기
    화면 너비별 배치 변경, 글자 크기와 여백 조정, 이미지 비율 유지, 모바일 메뉴 구현, 키보드 이동과 입력 레이블 확인, 가로 넘침과 요소 겹침 수정하기
  • 10.12분 첫 웹사이트 배포하기
    완성한 랜딩페이지를 인터넷 주소로 공개하기
    배포 전 빌드 검사, GitHub와 Vercel 연결, 미리보기와 운영 배포 구분, 공개 주소 확인, 수정 내용 재배포, 배포 오류와 이전 버전 복구하기
  • 11.12분 맞춤 견적 계산기 제작하기
    선택한 항목에 따라 금액이 달라지는 웹 도구 만들기
    상품과 옵션 데이터 구성, 수량·단가·할인 입력, 계산 규칙 명세화, 합계 자동 계산, 잘못된 입력 차단, 예상값과 실제 계산 결과 비교하기
  • 12.11분 견적 저장과 출력 기능 완성하기
    작성한 견적을 다시 불러오고 문서로 출력하기
    브라우저 저장소 활용, 견적 목록과 불러오기, 저장 데이터 초기화, JSON 내보내기와 가져오기, 인쇄 전용 화면 구성, 브라우저 PDF 저장과 개인정보 저장 범위 안내하기
  • 13.12분 React 기반 웹앱으로 확장하기
    여러 화면과 반복 요소를 관리하는 프로젝트 구조 만들기
    React와 Vite 프로젝트 생성, 기존 견적 계산기 옮기기, 컴포넌트와 상태 이해, 공통 버튼·입력창 분리, 패키지 설치와 실행 명령 확인하기
  • 14.12분 업무관리 웹앱 기획하기
    담당자와 진행 상태를 관리하는 서비스 설계하기
    사용자와 관리자 역할 정의, 업무 등록·조회·수정·삭제 흐름 작성, 목록·상세·대시보드 화면 설계, 데이터 항목 정하기, 샘플 데이터와 기능별 완료 조건 준비하기
  • 15.11분 업무 목록과 등록 화면 제작하기
    새 업무를 입력하고 목록에서 확인하는 기능 만들기
    공통 화면과 메뉴 구성, 업무 등록 폼 제작, 제목·담당자·기한 입력, 목록과 상세 화면 연결, 필수값 검사, 빈 목록과 잘못된 입력 안내하기
  • 16.11분 검색·필터·상태 변경 구현하기
    업무가 많아져도 필요한 항목을 빠르게 찾도록 만들기
    검색어 입력, 담당자·진행 상태별 필터, 마감일 정렬, 업무 수정과 삭제 확인, 상태 변경, 검색 결과 없음과 중복 제출 처리하기
  • 17.12분 Supabase 데이터베이스 연결하기
    브라우저를 닫아도 유지되는 서버 저장 기능 만들기
    Supabase 프로젝트 생성, 업무 테이블과 자료형 설정, 테스트 데이터 등록, 환경변수 구성, 데이터 조회·추가·수정·삭제 연결, 로컬 저장과 서버 저장 차이 확인하기
  • 18.12분 회원가입과 로그인 구현하기
    사용자 계정으로 접속하는 업무관리 서비스 만들기
    이메일 회원가입과 로그인, 로그아웃, 세션 유지, 비밀번호 재설정 흐름, 로그인 전후 화면 전환, 인증 실패와 만료 상황 처리하기
  • 19.12분 사용자별 데이터 접근 권한 설정하기
    다른 사람의 업무 데이터에 접근하지 못하도록 제한하기
    인증과 인가 구분, 사용자 식별자 연결, 행 수준 보안 정책 설정, 본인 데이터만 조회·수정하기, 관리자 권한 검사, 두 계정으로 접근 제한 테스트하기
  • 20.12분 파일 첨부와 다운로드 구현하기
    업무에 필요한 자료를 안전하게 보관하고 내려받기
    파일 저장소 연결, 허용 확장자와 용량 제한, 사용자별 파일 경로 구성, 비공개 파일 접근 제어, 첨부파일 다운로드와 삭제, 업로드 실패 처리하기
  • 21.11분 업무 현황 대시보드 제작하기
    진행 상태와 마감 정보를 한눈에 확인하는 화면 만들기
    전체·진행 중·완료 업무 집계, 마감 임박 항목 표시, 담당자별 현황과 차트 구성, 필터와 집계 연동, 빈 데이터 처리, 집계 결과 검증하기
  • 22.12분 CSV 자료 가져오기와 내보내기
    기존 업무 자료를 웹앱으로 옮기고 다시 활용하기
    CSV 파일 읽기, 열 이름과 데이터 항목 연결, 날짜와 필수값 검증, 중복 자료 처리, 가져오기 전 미리보기, 실패 행 안내, 검색 결과 CSV 다운로드하기
  • 23.12분 업무관리 웹앱 테스트하기
    실제 사용 순서에 따라 핵심 기능과 오류 상황 검증하기
    가입부터 업무 완료까지 테스트 시나리오 작성, 주요 동작 자동 검사, 권한 우회와 잘못된 입력 점검, 모바일 화면 검사, 오류 수정 후 기존 기능 재검사하기
  • 24.13분 업무관리 웹앱 배포와 운영 준비하기
    실제 접속 가능한 서비스로 공개하고 수정에 대비하기
    운영 환경변수 설정, 인증 주소와 파일 접근 확인, 배포 후 계정별 검사, 오류 로그 확인, 데이터 백업과 복구 연습, 운영 버전 기록과 되돌리기
  • 25.12분 AI 문서 도우미 설계하기
    문서를 요약하고 필요한 정보를 정리하는 웹앱 기획하기
    사용 목적과 지원 문서 범위 정하기, 텍스트 입력·요약·질문 화면 설계, AI API 요청과 응답 이해, 입력 길이와 이용 한도 설정, 샘플 응답으로 화면 먼저 만들기
  • 26.12분 서버에서 AI API 연결하기
    API 키를 보호하면서 AI 응답을 받아오기
    서버 요청 경로 구현, 환경변수로 비밀키 관리, 모델 호출과 응답 표시, 요청 검증, 시간 초과·인증 실패 처리, 호출 비용과 요청량 확인하기
  • 27.13분 요약 형식과 결과 품질 개선하기
    용도에 맞는 요약 결과를 일관된 형식으로 제공하기
    핵심 요약·항목 정리·할 일 추출 모드 구성, 출력 형식 지정, 구조화된 응답 검증, 문서에 없는 정보 처리, 결과 복사와 다운로드, 동일 예제로 품질 비교하기
  • 28.12분 문서 업로드와 내용 추출 구현하기
    TXT와 텍스트형 PDF를 읽어 AI 요약에 활용하기
    파일 업로드 화면 구성, 문서 텍스트 추출, 파일 크기와 처리 분량 제한, 스캔 PDF 구분과 안내, 긴 문서 분할 처리, 추출 실패와 빈 문서 처리하기
  • 29.12분 문서 기반 질문과 답변 구현하기
    업로드한 문서에서 근거를 찾아 답하는 기능 만들기
    문서 구간 나누기, 임베딩과 검색의 역할 이해, 관련 구간 검색, 근거를 포함한 질문 전달, 출처 구간 표시, 근거 없는 질문에 답변을 제한하고 결과 검증하기
  • 30.13분 AI 서비스 사용량과 이용 권한 관리하기
    사용자별 이용 한도와 유료 기능의 기본 구조 만들기
    요청 횟수와 처리량 기록, 사용자별 한도 적용, 중복 요청 방지, 요금제 화면 구성, 결제 테스트 환경 연결, 서버 결제 검증과 중복 알림 처리, 이용 권한 반영하기
  • 31.12분 Windows 자동화 프로그램 시작하기
    파일 정리 프로그램을 만들기 위한 Python 환경 준비하기
    Python 설치와 가상환경 생성, 패키지 설치, 폴더와 파일 경로 이해, 테스트용 파일 준비, 파일 목록 읽기, 프로그램 실행과 오류 로그 확인하기
  • 32.12분 파일 분류와 이름 변경 기능 제작하기
    반복되는 파일 정리 작업을 자동으로 처리하기
    확장자·날짜 기준 분류, 파일명 변경 규칙 작성, 실행 전 변경 목록 미리보기, 동일 이름 충돌 처리, 원본 보존 방식 적용, 처리 내역 저장과 복구하기
  • 33.12분 버튼으로 사용하는 프로그램 화면 만들기
    명령어를 입력하지 않아도 사용할 수 있는 GUI 완성하기
    Tkinter 화면 구성, 작업 폴더 선택, 분류 규칙 입력, 실행·취소 버튼 연결, 진행률과 결과 표시, 작업 중 화면 멈춤 방지, 오류 안내창 구현하기
  • 34.11분 Windows 실행 파일로 패키징하기
    Python이 없는 PC에서도 실행할 수 있는 프로그램 만들기
    PyInstaller로 실행 파일 생성, 아이콘과 설정 파일 포함, 저장 경로와 권한 확인, 로그와 사용자 설정 관리, 배포용 ZIP 구성, 별도 Windows 환경에서 실행 검사하기
  • 35.12분 Claude Code로 기존 프로젝트 개선하기
    프로젝트를 분석하고 계획에 따라 기능을 추가하기
    기존 프로젝트 열기, 폴더와 실행 구조 파악, 작업 규칙과 요구사항 전달, 변경 계획 검토, 제한된 범위의 기능 추가, 변경 내용과 테스트 결과 확인하기
  • 36.10분 Codex로 오류 수정과 코드 검토하기
    다른 AI 도구로도 이어서 작업할 수 있는 개발 방식 익히기
    프로젝트 인계 문서 준비, 오류 재현 조건 전달, 코드 검토와 수정 요청, 테스트 실행 결과 확인, 불필요한 변경 제거, 동일 작업의 결과와 사용량 비교하기
  • 37.10분 MCP와 프로젝트 규칙 활용하기
    AI에게 필요한 도구와 작업 맥락을 연결하기
    MCP의 역할 이해, 브라우저 검사 도구 연결, 접근 범위와 실행 권한 확인, 프로젝트 규칙과 반복 작업 절차 정리, 외부 문서 속 지시 구분, 도구 실행 결과 검증하기
  • 38.9분 종합 프로젝트 기획과 화면 제작하기
    앞에서 만든 기능을 활용해 고객 요청 관리 서비스 구성하기
    고객 요청 등록·처리 서비스 기획, 필수 기능과 후속 기능 구분, 화면과 데이터 구조 설계, 기존 컴포넌트 재사용, 요청 목록·상세·관리 화면 구현하기
  • 39.9분 종합 프로젝트 기능 연결과 검증하기
    고객 요청을 접수하고 AI로 정리하는 서비스 완성하기
    로그인과 접근 권한 연결, 요청 저장과 담당자 배정, 첨부파일 관리, AI 요청 내용 요약, 처리 상태와 이력 기록, 전체 사용자 흐름과 실패 상황 검사하기
  • 40.8분 최종 배포와 프로젝트 인계하기
    완성한 웹앱과 프로그램을 배포하고 스스로 유지보수하기
    운영 배포와 최종 기능 검사, API 비용과 사용량 확인, 소스·설정 예시·실행 방법 정리, 데이터 백업과 복구 절차 작성, 사용자 안내문 제작, 개선 요청을 다음 개발 작업으로 전환하기

강의목록 다운로드                        1:1 강의 질문&답변






도움이 필요하신가요?
💬
알지오 학습·수강 도우미
운영진이 확인한 안내를 자세히 보고, 필요하면 바로 상담하세요.
상담 상태 확인 중