홈앤서비스 SK BROADBAND

AI와 대화만으로 웹앱과 프로그램을 만드는 ‘바이브 코딩’ 방식을 안내하며 깃허브 코파일럿을 코드 자동완성을 넘어 창작 도구로 활용하는 법을 단계별로 정리한다. 기초 환경 설정과 필수 CS 개념을 10개 챕터로 정리하고 바로 실습을 배치해 바탕화면 정리 앱, PDF 편집기, 이메일 자동화, 주식 데이터 크롤러, QR 코드 생성기 등 일상에 유용한 프로그램을 스스로 만들 수 있게 돕는다. 기초 웹 개발부터 프런트엔드·백엔드 개념, 데이터베이스, API 활용, 배포까지 자연스럽게 익히며 유튜브 클론, 실시간 대시보드, Vercel 배포 등 실전 기술을 체험하게 한다. 총 31개 프로젝트를 통해 코파일럿과 협업해 문제를 해결하며 프로그래밍 사고를 익히도록 구성했고, MCP를 활용한 확장 기능까지 다뤄 AI 기반 개발 흐름을 한 권으로 따라잡을 수 있다. 실패를 두려워하지 않고 아이디어를 바로 실행으로 옮기는 창작 습관을 돕는 것이 책의 핵심 가치로, 실무와 생활에 즉시 적용할 수 있는 프로그램 제작 경험을 원하는 초보자·직장인·창업 준비생·교사·학생 모두에게 실질적인 도움을 준다.

[파트 01] 처음 만나는 깃허브 코파일럿과 CS 지식 _챕터 01 깃허브 코파일럿 설치하고 개발 환경 준비하기 : 코드 편집기, IDE __깃허브 회원가입 후 깃허브 코파일럿 구독 관리하기 __비주얼 스튜디오 코드 설치하고 깃허브 코파일럿 설정하기 __[바이브 코딩 01] 기업 소개 웹사이트 만들기 __[바이브 코딩 02] 사과 게임 만들어보기 _챕터 02 깃허브 코파일럿로 파일, 폴더 조작해보기 : 터미널 __[바이브 코딩 03] 바탕화면 정리시켜 보기 _챕터 03 웹사이트를 만들려면 꼭 알아야 하는 3가지 : HTML, CSS, 자바스크립트 __웹사이트의 뼈대를 담당하는 HTML __웹사이트를 아름답게 해주는 CSS __웹사이트에 기능을 추가해주는 자바스크립트 __[바이브 코딩 04] 자기소개 페이지 만들기 __[바이브 코딩 05] 자기소개 페이지를 다른 사람에게 공유하고 싶다면? _챕터 04 눈으로 보고, 상호작용할 수 있는 영역 : 프런트엔드 __리액트요? 전 개발자가 아닌데요? __[바이브 코딩 06] 유튜브과 비슷한 사이트 만들어보기 __[바이브 코딩 07] 투두리스트 앱 만들어보기 _챕터 05 디자인에도 기술이 있다고요? : 라이브러리, 프레임워크 __라이브러리? 프레임워크? __[바이브 코딩 08] 투두리스트 앱 디자인 변경해보기 __[바이브 코딩 09] v0 서비스로 더 쉽게 웹사이트 만들기 _챕터 06 내가 만든 사이트를 서비스하는 방법 : 서버, 배포 __24시간 사용자 요청을 기다리는 컴퓨터, 서버 __localhost가 무엇이길래 __포트 번호가 무엇이길래 __내 컴퓨터에 구동한 웹 서버가 여러 개라면? __친구가 내가 만든 웹 서비스를 보려면? __[바이브 코딩 10] 버셀 서비스에 내가 만든 쇼핑몰 사이트 배포해보기 _챕터 07 회원가입, 게시판을 구현하고 싶어 : 데이터베이스 __데이터베이스란? __[바이브 코딩 11] 노션과 비슷한 사이트 만들어보기 _챕터 08 크롤링을 하고 싶어 : 파이썬 __파이썬으로 할 수 있는 일들 __크롤링, 막 해도 되는 것일까? __크롤링 핵심, 태그와 속성 __[바이브 코딩 12] 1년 치 금 시세 크롤링하기 __[바이브 코딩 13] 데이터도 꿰어야 보배, 통계 처리하고 시각화하기 __[바이브 코딩 14] 해외 주식 크롤링 프로그램 만들기 _챕터 09 나만의 프로그램을 만들고 싶어 : 디버그, 바이브 코딩 __스스로 수십 번의 디버그를 하는 깃허브 코파일럿 __코딩, 수정은 AI에게 맡기고 나는 방향만 이끄는 바이브 코딩 __[바이브 코딩 15] 나만의 QR 코드 생성기 쉽게 만들기 __[바이브 코딩 16] PDF 편집기 만들기 : 페이지 추출 기능 __[바이브 코딩 17] PDF 편집기 완성하기 : 페이지 이어 붙이기 기능 _챕터 10 데이터를 이용하고 싶어 : API __API가 뭐예요? __[바이브 코딩 18] 랜덤 이미지를 주는 API로 미술관 사이트 만들기 __[바이브 코딩 19] 한국거래소 주식 데이터 API로 나만의 대시보드 만들기 __[바이브 코딩 20] 네이버 API로 쇼핑 트렌드 분석기 만들기 [파트 02] 깃허브 코파일럿로 유용한 프로그램 만들어보기 _챕터 11 업무에 유용한 프로그램 6가지 만들기 __[바이브 코딩 21] 메일 발송 자동화 프로그램 만들기 __[바이브 코딩 22] 챗GPT API로 PDF 요약 프로그램 만들기 __[바이브 코딩 23] 블로그 최적화 글 생성 프로그램 만들기 __[바이브 코딩 24] 고객 리뷰 분석하여 보고서 생성하는 프로그램 만들기 __[바이브 코딩 25] 유튜브 자막 추출 후 맞춤법 검사하는 프로그램 만들기 __[바이브 코딩 26] 가계부 대시보드 만들기 _챕터 12 MCP로 더 수준 높은 프로그램 만들기 __그래서 MCP가 뭐죠? __스미더리 회원가입하고 Context7 MCP 설치하고 실행해보기 __[바이브 코딩 27] 테트리스 게임 만들어보기 __[바이브 코딩 28] 리더보드가 있는 카드 뒤집기 게임 만들기 __[바이브 코딩 29] 카드 뒤집기 게임에 보안 챙기기 __[바이브 코딩 30] 나만의 블로그 만들기 __[바이브 코딩 31] 나만의 커뮤니티 게시판 만들기