책소개
"바이브 코딩 시대에는 코드를 잘 짜는 능력보다 AI와 협업하며 아이디어를 실제 결과물로 완성하는 경험이 중요하다. 많은 사람이 AI로 코드를 생성하는 데는 익숙해졌지만, 실제 서비스를 끝까지 완성하는 데는 어려움을 겪는다. AI에게 적절한 기능을 요청하고, 생성된 결과를 검토하며, 오류를 수정하고, 배포까지 이어 가는 과정이 생각보다 쉽지 않기 때문이다. 《Do it! 바이브 코딩 + 커서 AI》는 5가지 실전 프로젝트를 직접 완성하며 아이디어를 실제 서비스로 만드는 전 과정을 경험할 수 있도록 기획했다.
이 책은 커서 AI와 함께 실제 프로젝트를 완성하며 바이브 코딩으로 개발하는 흐름을 안내한다. 개발 환경 설정부터 시작해 AI에게 기능을 요청하고, 구현 결과를 테스트하며 오류를 수정한 뒤 배포까지 진행하는 실제 서비스 제작 과정을 단계별로 따라가는 방식이다. 그 결과 프로젝트를 진행하면서 AI와 협업하는 방식은 물론, 각 서비스를 구현하는 데 필요한 기술 스택도 자연스럽게 익힐 수 있다.
가계부 웹 사이트, 여행 기록 앱, 카카오톡 대화 분석기, 주식 데이터 분석기, 논문 요약 대시보드까지 총 5가지 프로젝트를 완성하며 웹, 앱, 데이터 분석, AI 자동화 등 다양한 형태의 서비스를 직접 만들어 본다. 기능 구현에서 끝나지 않고 수파베이스로 데이터베이스를 연동하고, 지도 API로 외부 데이터를 연결하며, 버셀과 스트림릿 커뮤니티 클라우드로 배포까지 진행해서 실제 사용할 수 있는 서비스로 완성하는 과정을 경험할 수 있다."
저자소개
"시스템공학과 컴퓨터공학을 전공하며 AI와 소프트웨어 개발을 연구했다. 대학 재학 중 생성형 AI 서비스를 직접 개발하고, 바이브 코딩을 활용해 아이디어를 실제 서비스로 구현했다. 커서를 활용해 AI 만화 생성 서비스를 개발했으며, 5,000명 이상의 수강생과 3억 회 이상의 콘텐츠 조회수, 200건 이상의 광고·비즈니스 계약, 6억 원 이상의 누적 매출을 달성했다. 또한 청년창업사관학교 선정과 프라이머(Primer)의 투자를 유치하며 생성형 AI에 기반한 서비스의 개발부터 사업화까지 전 과정을 경험했다.현재 AI 크리에이터 IP 인큐베이터 ‘만화제면소’를 창업해 생성형 AI에 기반한 콘텐츠 제작과 크리에이터 성장을 지원하고 있다. 또한 생성형 AI, 바이브 코딩, AI 창업을 주제로 강연과 교육에 열정을 다하고 있다. 누구나 AI를 활용해 아이디어를 서비스로 만들고 창업에 도전할 수 있도록 돕는 것을 목표로 한다. 저자와 소통할 수 있는 채널●스레드 threads.com/@poodle_doodle_noodle●깃허브 github.com/diatomicC"
목차
"01장 커서로 바이브 코딩 시작하기
_01-1 바이브 코딩의 핵심 도구, 커서
__아이디어를 현실로 만드는 바이브 코딩
__전통 개발 방식 vs 바이브 코딩
__여전히 개발자의 역할은 중요하다
__커서란?
__커서를 사용하는 이유
_01-2 커서 개발 환경 설정하기
__[Do it! 실습] 커서 가입하기
__[Do it! 실습] 커서 프로 플랜으로 전환하기
__[Do it! 실습] 커서 프로 플랜 해지하기
__[Do it! 실습] 커서 설치하기
_01-3 커서 AI 기능 이해하기
__커서 화면 구성 살펴보기
__AI의 작업 방식 설정하기
02장 돈이 차곡차곡 모이는 가계부 웹 사이트 만들기
_02-1 웹 사이트 개발 환경 설정하기
__웹 사이트 개발에 필요한 도구
__[Do it! 실습] Node.js 설치하기
__[Do it! 실습] 깃 설치하기
__[Do it! 실습] 깃허브 가입하기
_02-2 가계부 웹 사이트 첫 화면 만들기
__프로젝트 폴더란?
__[Do it! 실습] 프로젝트 폴더 생성하기
__[Do it! 실습] 개발 서버로 첫 화면 만들기
__[Do it! 실습] 커서의 AI 기능으로 첫 화면 꾸미기
_02-3 수파베이스로 데이터 저장하고 화면 다듬기
__데이터를 ‘저장한다’는 것은 무슨 뜻일까?
__[Do it! 실습] 수파베이스에서 DB와 테이블 만들기
__[Do it! 실습] 수파베이스 연결 정보 등록하기
__[Do it! 실습] 웹 사이트와 DB 연결하기
__[Do it! 실습] 모바일 화면 최적화하기
__[Do it! 실습] 웹 사이트 화면 디자인 개선하기
_02-4 버셀로 가계부 웹 사이트 배포하기
__배포란 무엇일까?
__[Do it! 실습] 깃허브에 가계부 웹 사이트 코드 파일 업로드하기
__[Do it! 실습] 버셀로 웹 사이트 배포하기
__[Do it! 실습] 배포한 후 작동되는지 테스트하기
__[Do it! 실습] 코드 수정 후 다시 배포하기
_02-5 AI 챗봇 기능 추가하고 오류 해결하기
__대화하듯 기록하는 AI 챗봇
__제미나이 연결하기
__[Do it! 실습] 제미나이 API 키 발급받기
__[Do it! 실습] 챗봇 인터페이스로 전환하기
__[Do it! 실습] 제미나이 연결하고 AI 챗봇 기능 구현하기
__[Do it! 실습] 다양한 표현 테스트하기
__[Do it! 실습] 통계 질문 기능 추가하기
__[Do it! 실습] 환경 변수 설정하고 웹 사이트 배포하기
__여러 기능 추가하기
__외부 API 오류 해결하기
__[Do it! 실습] AI에게 오류 해결 요청하기
__[Do it! 실습] 브라우저 콘솔에서 오류 찾기
__[Do it! 실습] 커서의 터미널 오류 해결하기
03장 사진으로 여행을 기록하는 플러터 앱 만들기
_03-1 플러터 개발 환경 설정하기
__웹과 네이티브 앱의 차이 이해하기
__여행 기록 앱을 만드는 이유
__플러터를 사용하는 이유
__개발 환경 설정하기
__[Do it!] 플러터 SDK 설치하기
__[Do it!] 커서에 플러터 확장 프로그램 설치하기
__[Do it!] 안드로이드 스튜디오 설치하기
__[Do it!] Flutter Doctor로 확인하기
__[Do it!] 에뮬레이터 만들기
_03-2 여행 기록 앱의 기본 구조 만들기
__[Do it!] 커서의 AI 기능으로 프로젝트 폴더 생성 요청하기
__[Do it!] main.dart 파일의 기본 예제 코드 수정하기
__[Do it!] 구글 지도 API 키 연동하기
__[Do it!] 여행 기록 앱 실행하기
__[Do it!] Hot Reload 기능 사용하기
_03-3 사진 메타데이터로 경로 시각화하기
__메타데이터란?
__[Do it!] 패키지 설치하고 사진 접근 권한 설정하기
__[Do it!] 에뮬레이터에 샘플 사진 넣기
__[Do it!] 지도 위 여행 경로 시각화하기
_03-4 타임라인 화면으로 여행 흐름 정리하기
__타임라인 화면이 필요한 이유
__[Do it!] 새로운 타임라인 화면 파일 만들기
__[Do it!] 타임라인 화면 연결하기
04장 대화를 데이터로 분석하는 카카오톡 대화 분석기 만들기
_04-1 파이썬 개발 환경 설정하기
__파이썬을 왜 사용하나요?
__이 절에서 사용할 파이썬 라이브러리
__가상 환경이란?
__[Do it!] 파이썬 설치하기
__[Do it!] 프로젝트 폴더 만들기
__[Do it!] 가상 환경 만들기
__[Do it!] 필요한 라이브러리 설치하기
_04-2 카카오톡 대화 분석기 만들기
__CSV 파일이란?
__[Do it!] 카카오톡 대화를 CSV 파일로 내보내기
__[Do it!] 카카오톡 대화 분석기의 기본 화면 만들기
__[Do it!] 참여자별 메시지 통계 기능 추가하기
__[Do it!] 시간대별 분석 기능 추가하기
__[Do it!] 자주 쓰는 단어 분석 기능 추가하기
__[Do it!] 답장 속도 분석 기능 추가하기
_04-3 스트림릿으로 화면 꾸미기
__[Do it!] 탭으로 메뉴 구분하기
__[Do it!] 사이드바 추가하기
__[Do it!] 대시보드 스타일로 꾸미기
_04-4 스트림릿 커뮤니티 클라우드로 배포하기
__스트림릿 커뮤니티 클라우드란?
__[Do it!] 깃허브에 코드 파일 업로드하기
__[Do it!] 스트림릿 커뮤니티 클라우드로 웹 앱 배포하기
__[Do it!] 배포 후 정상 작동 테스트하기
__[Do it!] 코드 수정 후 재배포하기
05장 상승 추세를 찾는 주식 데이터 분석기 만들기
_05-1 실시간 주식 데이터 가져오기
__yfiance란?
__[Do it!] 프로젝트 폴더 만들기
__[Do it!] 라이브러리 설치하기
__[Do it!] 첫 번째 주식 데이터 가져오기
__[Do it!] 스트림릿으로 주식 데이터 분석기의 기본 구조 만들기
_05-2 기술적 분석 차트로 주가 흐름 시각화하기
__기술적 분석 도구란?
__[Do it!] 주가 선 차트 만들기
__[Do it!] 캔들스틱 차트 추가하기
__[Do it!] 거래량 차트 추가하기
__[Do it!] 이동평균선 추가하기
_05-3 주식 데이터 분석 기능 추가하고 배포하기
__[Do it!] 여러 종목 비교 기능 추가하기
__[Do it!] 수익률 계산기 기능 추가하기
__[Do it!] AI에게 깃허브 업로드 요청하기
__[Do it!] 스트림릿 커뮤니티 클라우드로 배포하기
06장 매일 자동으로 크롤링하는 논문 요약 대시보드 만들기
_06-1 크롤링의 기초와 파이프라인 설계하기
__크롤링이란?
__[Do it!] 아카이브 웹 사이트의 robots.txt 확인하기
__[Do it!] 네이버 뉴스 웹 사이트의 robots.txt 확인하기
__합법적인 크롤링의 6가지 원칙
__파이썬 딕셔너리 구조로 저장하기
__ 크롤링 전략 세우기
_06-2 아카이브 웹 사이트 분석하기
__아카이브 웹 사이트란?
__아카이브 웹 사이트의 URL 구조 이해하기
__PDF 다운로드 링크로 자동 변환하기
__웹 브라우저 개발자 도구로 HTML 구조 파악하기
__[Do it!] 논문 초록 페이지 구조 분석하기
__[Do it!] 논문 목록 페이지 분석하기
_06-3 뷰티풀숩으로 최신 논문 크롤러 만들기
__크롤링에 필요한 라이브러리
__[Do it!] 프로젝트 폴더 만들고 라이브러리 설치하기
__[Do it!] 카테고리 목록 페이지에서 아카이브 ID 수집하기 - 크롤링 전략 1단계
__[Do it!] 상세 페이지에서 논문 제목 추출하기 - 크롤링 전략 2단계
__[Do it!] 중복 체크 기능 추가하기 - 크롤링 전략 3단계
__[Do it!] 안전 장치 추가하기
__[Do it!] 최신 AI 논문 수집하기
_06-4 제미나이로 수집한 논문 요약하기
__논문 요약 구조 설정하기
__[Do it!] 제미나이 API 키 준비하기
__[Do it!] 논문 요약하는 함수 만들기
__[Do it!] 여러 논문 한 번에 요약하기
_06-5 최신 논문 AI 요약 대시보드 만들고 배포하기
__[Do it!] 스트림릿으로 논문 요약 대시보드 만들기
__[Do it!] 깃허브 저장소에 코드 파일 업로드하기
__[Do it!] 스트림릿 커뮤니티 클라우드로 배포하기
찾아보기"