전체

[개인 역량 맞춤 프로젝트] AI로 만드는 웹 서비스 개발 과정

개인 역량 맞춤 프로젝트 AI로 만드는 웹 서비스 개발 과정

강좌 소개

난이도

보통

카테고리

ICT - AI·SW 장기교육

태그

인공지능, 웹개발, AI, 웹, 풀스택, VOD, 온라인, zoom, 프론트엔드, 백엔드

강좌 진행 기간

26.04.25부터 26.10.17까지

소요 시간

960 시간

추천 수강대상

- [취업 준비생]: AI 활용 역량까지 갖춘 예비 개발자로 압도적 경쟁력을 쌓고 싶은 취준생
- [재직자]: 디지털 전환 시대의 필수 역량을 확보하여 확실한 커리어 점프를 원하는 재직자
- [비전공자/입문자]: 비전공자의 한계를 넘어 실전 기술과 협업 능력을 장착하고 싶은 예비 인재

교육 과정

모두 펼치기

01
[AI] AX/AI 인사이트 실무 활용

1-1 2025 상반기 AX 트랜드 정리

1-2 요즘 대학생 Claude 사용 패턴 분석

1-3 현대 인공지능, 머신러닝, 딥러닝, 강화학습

1-4 GPT, Gemini같은 LLM을 만드는 방법

2-1 머신러닝 데이터분석: 벤츠 데이터 사례

2-2 데이터분석 커뮤니티 Kaggle 활용

2-3 GPT를 이용한 데이터 분석 가이드

2-4 Colab 파이썬 노트북 기반 데이터 분석

3-1 딥러닝 데이터분석: 쉐브론, AES

3-2 데이터 원천으로서 깃허브 활용

3-3 데이터 로딩 등 작업에 GPT 활용

3-4 리서치 작업에 NotebookLM 활용

4-1 제약기업 모더나의 GPT 활용 전략

4-2 지식기반 에이전트 - GPTs 만들기

4-3 GPTs에 맥락지식(Knowledge) 제공

4-4 GPTs를 이용한 정보 정리/요약 및 추론/예측

5-1 생성형 인공지능을 활용한 삶과 업무 개선

5-2 Perplexity를 이용한 시장조사

5-3 Claude를 이용한 커피 브랜드 일본 출점조사

5-4 Gemini를 이용한 만성질환 극복루틴 추천

6-1 생성형 인공지능을 만든 10인의 혁신가

6-2 2025 상반기 생성형 인공지능 트랜드 분석

6-3 생성형 인공지능 기반기술로서 딥러닝 이해

6-4 이미지 분석을 위한 CNN 노트북 활용 실무

7-1 GenAI 기반기술로서 GPU, GAN, FM

7-2 구글의 GenAI 비전: 구글 클라우드 넥스트

7-3 구글 AI Studio와 나노 바나나

7-4 GenAI 프롬프트 엔지니어링

8-1 생성형 인공지능의 중개자로서 GPT의 역할

8-2 KlingAI를 이용한 이미지, 영상 생성

8-3 ElevenLabs Music을 이용한 음악 생성

8-4 노코드 기반의 수요예측

8-5 결론: MCP 등 최근 기술 및 AI 활용의 주의사항

02
[AI] 바이브코딩으로 만드는 AI 웹앱

1-1 AI와 함께하는 새로운 코딩 방식, ‘바이브코딩(VibeCoding)’의 탄생

1-2 GPT와 Claude로 기획하는 나만의 첫 웹앱 아이디어

1-3 Cursor로 코딩 시작하기: 설치, 계정 연결, 기본 설정

1-4 HTML·CSS·JavaScript로 웹의 뼈대 이해하기

1-5 GitHub와 연동해 협업·버전관리 환경 구축하기

2-1 MyToDo App 기획: GPT와 함께 기능 목록 설계하기

2-2 Cursor에서 MyToDo App UI 빌드: HTML·CSS로 기본 화면 만들기

2-3 JavaScript로 To-Do 입력, 삭제, 완료 기능 구현하기

2-4 GPT를 활용한 디버깅과 기능 개선 — “자동 저장”과 “필터링”

2-5 GitHub Pages로 나의 첫 웹앱 배포하기

3-1 Node·React·Vite 이해하기 — 현대 웹앱 기술스택의 기본

3-2 GPT API와 Open API 연결 실습: 프롬프트에서 코드까지

3-3 MyDataInsight App 기획: CSV 데이터로 인사이트 추출 설계

3-4 MyDataInsight App 빌드: React + GPT API 연동

3-5 MyDataInsight App 디버깅 및 시각화 기능 추가하기

3-6 Vercel로 서버리스 환경에 MyDataInsight App 배포하기

4-1 MyTechResearch App 기획: GPT API로 기술 R&D 리서치 자동화

4-2 MyTechResearch App 빌드: 검색 → 요약 → 인사이트 생성

4-3 MyTechResearch App 디버깅 및 결과 리포트 자동화

4-4 Vercel 배포 및 세 프로젝트 통합 포트폴리오 완성

03
[AI] AI 어시스턴트 & 업무 자동화 실습

1-1 생성형 AI와 AI 어시스턴트의 개념

1-2 프롬프트 엔지니어링 기초

1-3 생산성 도구로서 ChatGPT

1-4 Claude와 Gemini의 차이 이해

1-5 NotebookLM & Perplexity 실무 활용

1-6 GPTs를 이용한 정보정리·요약 및 추론·예측

2-1 LangChain 구조 이해하기

2-2 LangGraph로 워크플로 자동화

2-3 API 연동을 통한 자동화 확장

2-4 데이터 분석 자동화

2-5 리서치 자동화 프로젝트

2-6 마케팅 자동화 프로젝트

2-7 사내 보고 자동화 프로젝트

2-8 개인 비서형 어시스턴트 만들기

3-1 산업별 AI 자동화 사례 분석

3-2 글로벌 AI 기업의 조직내 AI 도입전략

3-3 글로벌 기업의 GPTs 활용사례 분석

3-4 BYOK 기반 에이전트 시스템

3-5 멀티 LLM 연계 시스템 기획

3-6 멀티 LLM 연계 시스템 구현 및 결론

04
[AI] 비전공자를 위한 AI 기본기

1-1 AI 윤리·보안·저작권 문제의 중요성

1-2 AI 보안 사고와 데이터 보호 실패 사례 분석

1-3 생성형 AI와 저작권: 안전한 활용의 기준선

1-4 신뢰할 수 있는 AI를 위한 윤리 가이드라인

1-5 AI 오용을 막는 개인·조직 실천 가이드

1-1 AI가 수학을 활용하는 방식

1-2 데이터는 어떻게 숫자가 되는가

1-3 평균과 분산 – AI가 ‘보통’을 이해하는 방법

1-4 확률이란 무엇인가 – AI 관점에서

1-5 AI 예측 결과와 신뢰도

1-6 오차(Error)는 왜 생기는가

1-7 손실 함수 – AI의 자체 평가법

1-8 벡터란 무엇인가 – AI의 기본 언어

1-9 거리와 유사도 – AI가 ‘비슷함’을 판단하는 기준

1-10 행렬 – AI가 데이터를 한 번에 처리하는 방법

1-11 가중치(Weight)의 의미

1-12 입력이 바뀌면 출력은 어떻게 변할까

1-13 경사하강법 – AI는 어떻게 정답에 가까워질까

1-14 과적합과 일반화

1-15 AI 수리 개념으로 모델 결과 읽기

05
[백엔드]

[백엔드] 따라하며 배우는 TDD 개발

[백엔드] 따라하며 배우는 리액트 테스트

[백엔드] 따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기

[백엔드] 따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기

[백엔드] Next + React Query로 SNS 서비스 만들기

06
[프론트엔드] 인프런 강좌

[프론트엔드] 따라하며 배우는 HTML, CSS

[프론트엔드] 따라하며 배우는 자바스크립트 A-Z

[프론트엔드] 팀 개발을 위한 Git, Github 입문

[프론트엔드] 따라하며 배우는 타입스크립트 A-Z

[프론트엔드] 따라하며 배우는 리액트 A-Z

[프론트엔드] 따라하며 배우는 도커와 CI환경

[프론트엔드] 따라하며 배우는 노드, 리액트 시리즈 - 기본

07
[프론트엔드] 시선을 사로잡는 웹 - 초급

[프론트엔드] 시선을 사로잡는 웹 - 초급: HTML+CSS의 기본- 1강

[프론트엔드] 시선을 사로잡는 웹 - 초급: HTML+CSS의 기본- 2강

[프론트엔드] 시선을 사로잡는 웹 - 초급: HTML+CSS의 기본- 3강

[프론트엔드] 시선을 사로잡는 웹 - 초급: HTML+CSS의 기본- 4강

[프론트엔드] 시선을 사로잡는 웹 - 초급: 블럭과 인라인 세상 들여다보기- 1강

[프론트엔드] 시선을 사로잡는 웹 - 초급: 클래스 선택자로 좀 더 복잡한 페이지 만들기- 2강

[프론트엔드] 시선을 사로잡는 웹 - 초급: 클래스 선택자로 좀 더 복잡한 페이지 만들기- 3강

[프론트엔드] 시선을 사로잡는 웹 - 초급: 클래스 선택자로 좀 더 복잡한 페이지 만들기- 4강

[프론트엔드] 시선을 사로잡는 웹 - 초급: 블럭과 인라인 세상 들여다보기- 1강

[프론트엔드] 시선을 사로잡는 웹 - 초급: 블럭과 인라인 세상 들여다보기- 2강

[프론트엔드] 시선을 사로잡는 웹 - 초급: 블럭과 인라인 세상 들여다보기- 3강

[프론트엔드] 시선을 사로잡는 웹 - 초급: 블럭과 인라인 세상 들여다보기- 4강

[프론트엔드] 시선을 사로잡는 웹 - 초급: CSS 타이포그래피 기초- 1강

[프론트엔드] 시선을 사로잡는 웹 - 초급: CSS 타이포그래피 기초- 2강

[프론트엔드] 시선을 사로잡는 웹 - 초급: CSS 타이포그래피 기초- 3강

[프론트엔드] 시선을 사로잡는 웹 - 초급: CSS 타이포그래피 기초- 5강

[프론트엔드] 시선을 사로잡는 웹 -초급: Float 속성으로 가로배치하기- 1강

[프론트엔드] 시선을 사로잡는 웹 -초급: Float 속성으로 가로배치하기- 2강

[프론트엔드] 시선을 사로잡는 웹 -초급: Float 속성으로 가로배치하기- 3강

[프론트엔드] 시선을 사로잡는 웹 -초급: Float 속성으로 가로배치하기- 4강

[프론트엔드] 시선을 사로잡는 웹 -초급: Float 속성으로 가로배치하기- 5강

[프론트엔드] 시선을 사로잡는 웹 -초급: Float 속성으로 가로배치하기- 6강

[프론트엔드] 시선을 사로잡는 웹 -초급: Float 속성으로 가로배치하기- 7강

[프론트엔드] 시선을 사로잡는 웹 -초급: Float 속성으로 가로배치하기- 8강

[프론트엔드] 시선을 사로잡는 웹 -초급: Float 속성으로 가로배치하기- 9강

[프론트엔드] 시선을 사로잡는 웹 - 초급: Position 속성 입문하기- 1강

[프론트엔드] 시선을 사로잡는 웹 - 초급: Position 속성 입문하기- 2강

[프론트엔드] 시선을 사로잡는 웹 - 초급: Position 속성 입문하기- 3강

[프론트엔드] 시선을 사로잡는 웹 - 초급: Position 속성 입문하기- 4강

[프론트엔드] 시선을 사로잡는 웹 - 초급: Position 속성 입문하기- 5강

[프론트엔드] 시선을 사로잡는 웹 - 초급: Position 속성 좀 더 다뤄보기- 1강

[프론트엔드] 시선을 사로잡는 웹 - 초급: Position 속성 좀 더 다뤄보기- 2강

[프론트엔드] 시선을 사로잡는 웹 - 초급: Position 속성 좀 더 다뤄보기- 3강

[프론트엔드] 시선을 사로잡는 웹 - 초급: Position 속성 좀 더 다뤄보기- 4강

08
[프론트엔드] 시선을 사로잡는 웹 - 중급

[프론트엔드] UI/UX, Figma 기초

[프론트엔드] 시선을 사로잡는 웹 - 중급: auto와 %, Negative Margins - 1강

[프론트엔드] 시선을 사로잡는 웹 - 중급: auto와 %, Negative Margins - 2강

[프론트엔드] 시선을 사로잡는 웹 - 중급: auto와 %, Negative Margins - 3강

[프론트엔드] 시선을 사로잡는 웹 - 중급: auto와 %, Negative Margins - 4강

[프론트엔드] 시선을 사로잡는 웹 - 중급: auto와 %, Negative Margins - 5강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 반응형 사이드바 레이아웃 - 1강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 반응형 사이드바 레이아웃 - 2강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 반응형 사이드바 레이아웃 - 3강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 반응형 사이드바 레이아웃 - 4강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 반응형 사이드바 레이아웃 - 5강

[프론트엔드] 시선을 사로잡는 웹 - 중급: float 기반의 그리드 시스템1 - 1강

[프론트엔드] 시선을 사로잡는 웹 - 중급: float 기반의 그리드 시스템1 - 2강

[프론트엔드] 시선을 사로잡는 웹 - 중급: float 기반의 그리드 시스템1 - 3강

[프론트엔드] 시선을 사로잡는 웹 - 중급: float 기반의 그리드 시스템1 - 4강

[프론트엔드] 시선을 사로잡는 웹 - 중급: float 기반의 그리드 시스템1 - 5강

[프론트엔드] 시선을 사로잡는 웹 - 중급: float 기반의 그리드 시스템1 - 6강

[프론트엔드] 시선을 사로잡는 웹 - 중급: float 기반의 그리드 시스템2 - 1강

[프론트엔드] 시선을 사로잡는 웹 - 중급: float 기반의 그리드 시스템2 - 2강

[프론트엔드] 시선을 사로잡는 웹 - 중급: float 기반의 그리드 시스템2 - 3강

[프론트엔드] 시선을 사로잡는 웹 - 중급: float 기반의 그리드 시스템2 - 4강

[프론트엔드] 시선을 사로잡는 웹 - 중급: float 기반의 그리드 시스템2 - 5강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 모바일 우선 반응형 작업 - 1강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 모바일 우선 반응형 작업 - 2강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 모바일 우선 반응형 작업 - 3강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 모바일 우선 반응형 작업 - 4강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 모바일 우선 반응형 작업 - 5강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 실전 예제 작업1 - 1강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 실전 예제 작업1 - 2강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 실전 예제 작업1 - 3강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 실전 예제 작업1 - 4강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 실전 예제 작업1 - 5강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 실전 예제 작업2 - 1강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 실전 예제 작업2 - 2강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 실전 예제 작업2 - 3강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 실전 예제 작업2 - 4강

[프론트엔드] 시선을 사로잡는 웹 - 중급: 실전 예제 작업2 - 5강

[프론트엔드] 시선을 사로잡는 웹 - 중급: Outro - 1강

[프론트엔드] 시선을 사로잡는 웹 - 중급: Outro - 2강

[프론트엔드] 시선을 사로잡는 웹 - 중급: Outro - 3강

[프론트엔드] 시선을 사로잡는 웹 - 중급: Outro - 4강

[프론트엔드] 시선을 사로잡는 웹 - 중급: Outro - 5강

09
[실시간 특강]

[특강 1] 개발 환경의 대전환: Vibe Coding 세팅

[특강 2] AI와 함께하는 '초속' UI 개발 1: Tailwind & Shadcn

[특강 3] AI 에이전트의 눈, API 연동: 비동기 처리와 데이터 페칭

[특강 4] AI와 함께하는 '초속' UI 개발 2: SDD 스팩주도개발

[특강 5] 서버 없는 백엔드: Firebase&Supabase와 DB 설계

[특강 6] 생성형 UI(Generative UI)와 쇼핑몰 아키텍처 전략

[특강 7] 브라우저에 심는 뇌: On-Device AI와 Local-First

[특강 8] AI 시대의 포트폴리오: "Coder"에서 "Maker"로

10
[실무·커리어] AI 코딩 에이전트, 더 똑똑하게 쓰기
1개 (56:52)

AI 코딩 에이전트, 더 똑똑하게 쓰기