Do it! 바이브 코딩 + 커서 AI : 아이디어를 현실로! AI와 완성하는 5가지 실전 프로젝트

허주희

저자:허주희
시스템공학과컴퓨터공학을전공하며AI와소프트웨어개발을연구했다.대학재학중생성형AI서비스를직접개발하고,바이브코딩을활용해아이디어를실제서비스로구현했다.커서를활용해AI만화생성서비스를개발했으며,5,000명이상의수강생과3억회이상의콘텐츠조회수,200건이상의광고·비즈니스계약,6억원이상의누적매출을달성했다.또한청년창업사관학교선정과프라이머(Primer)의투자를유치하며생성형AI에기반한서비스의개발부터사업화까지전과정을경험했다.

현재AI크리에이터IP인큐베이터‘만화제면소’를창업해생성형AI에기반한콘텐츠제작과크리에이터성장을지원하고있다.또한생성형AI,바이브코딩,AI창업을주제로강연과교육에열정을다하고있다.누구나AI를활용해아이디어를서비스로만들고창업에도전할수있도록돕는것을목표로한다.

01장커서로바이브코딩시작하기

_01-1바이브코딩의핵심도구,커서
__아이디어를현실로만드는바이브코딩
__전통개발방식vs바이브코딩
__여전히개발자의역할은중요하다
__커서란?
__커서를사용하는이유

_01-2커서개발환경설정하기
__[Doit!실습]커서가입하기
__[Doit!실습]커서프로플랜으로전환하기
__[Doit!실습]커서프로플랜해지하기
__[Doit!실습]커서설치하기

_01-3커서AI기능이해하기
__커서화면구성살펴보기
__AI의작업방식설정하기

02장돈이차곡차곡모이는가계부웹사이트만들기

_02-1웹사이트개발환경설정하기
__웹사이트개발에필요한도구
__[Doit!실습]Node.js설치하기
__[Doit!실습]깃설치하기
__[Doit!실습]깃허브가입하기

_02-2가계부웹사이트첫화면만들기
__프로젝트폴더란?
__[Doit!실습]프로젝트폴더생성하기
__[Doit!실습]개발서버로첫화면만들기
__[Doit!실습]커서의AI기능으로첫화면꾸미기

_02-3수파베이스로데이터저장하고화면다듬기
__데이터를‘저장한다’는것은무슨뜻일까?
__[Doit!실습]수파베이스에서DB와테이블만들기
__[Doit!실습]수파베이스연결정보등록하기
__[Doit!실습]웹사이트와DB연결하기
__[Doit!실습]모바일화면최적화하기
__[Doit!실습]웹사이트화면디자인개선하기

_02-4버셀로가계부웹사이트배포하기
__배포란무엇일까?
__[Doit!실습]깃허브에가계부웹사이트코드파일업로드하기
__[Doit!실습]버셀로웹사이트배포하기
__[Doit!실습]배포한후작동되는지테스트하기
__[Doit!실습]코드수정후다시배포하기

_02-5AI챗봇기능추가하고오류해결하기
__대화하듯기록하는AI챗봇
__제미나이연결하기
__[Doit!실습]제미나이API키발급받기
__[Doit!실습]챗봇인터페이스로전환하기
__[Doit!실습]제미나이연결하고AI챗봇기능구현하기
__[Doit!실습]다양한표현테스트하기
__[Doit!실습]통계질문기능추가하기
__[Doit!실습]환경변수설정하고웹사이트배포하기
__여러기능추가하기
__외부API오류해결하기
__[Doit!실습]AI에게오류해결요청하기
__[Doit!실습]브라우저콘솔에서오류찾기
__[Doit!실습]커서의터미널오류해결하기

03장사진으로여행을기록하는플러터앱만들기

_03-1플러터개발환경설정하기
__웹과네이티브앱의차이이해하기
__여행기록앱을만드는이유
__플러터를사용하는이유
__개발환경설정하기
__[Doit!]플러터SDK설치하기
__[Doit!]커서에플러터확장프로그램설치하기
__[Doit!]안드로이드스튜디오설치하기
__[Doit!]FlutterDoctor로확인하기
__[Doit!]에뮬레이터만들기

_03-2여행기록앱의기본구조만들기
__[Doit!]커서의AI기능으로프로젝트폴더생성요청하기
__[Doit!]main.dart파일의기본예제코드수정하기
__[Doit!]구글지도API키연동하기
__[Doit!]여행기록앱실행하기
__[Doit!]HotReload기능사용하기

_03-3사진메타데이터로경로시각화하기
__메타데이터란?
__[Doit!]패키지설치하고사진접근권한설정하기
__[Doit!]에뮬레이터에샘플사진넣기
__[Doit!]지도위여행경로시각화하기

_03-4타임라인화면으로여행흐름정리하기
__타임라인화면이필요한이유
__[Doit!]새로운타임라인화면파일만들기
__[Doit!]타임라인화면연결하기

04장대화를데이터로분석하는카카오톡대화분석기만들기

_04-1파이썬개발환경설정하기
__파이썬을왜사용하나요?
__이절에서사용할파이썬라이브러리
__가상환경이란?
__[Doit!]파이썬설치하기
__[Doit!]프로젝트폴더만들기
__[Doit!]가상환경만들기
__[Doit!]필요한라이브러리설치하기

_04-2카카오톡대화분석기만들기
__CSV파일이란?
__[Doit!]카카오톡대화를CSV파일로내보내기
__[Doit!]카카오톡대화분석기의기본화면만들기
__[Doit!]참여자별메시지통계기능추가하기
__[Doit!]시간대별분석기능추가하기
__[Doit!]자주쓰는단어분석기능추가하기
__[Doit!]답장속도분석기능추가하기

_04-3스트림릿으로화면꾸미기
__[Doit!]탭으로메뉴구분하기
__[Doit!]사이드바추가하기
__[Doit!]대시보드스타일로꾸미기

_04-4스트림릿커뮤니티클라우드로배포하기
__스트림릿커뮤니티클라우드란?
__[Doit!]깃허브에코드파일업로드하기
__[Doit!]스트림릿커뮤니티클라우드로웹앱배포하기
__[Doit!]배포후정상작동테스트하기
__[Doit!]코드수정후재배포하기

05장상승추세를찾는주식데이터분석기만들기

_05-1실시간주식데이터가져오기
__yfiance란?
__[Doit!]프로젝트폴더만들기
__[Doit!]라이브러리설치하기
__[Doit!]첫번째주식데이터가져오기
__[Doit!]스트림릿으로주식데이터분석기의기본구조만들기

_05-2기술적분석차트로주가흐름시각화하기
__기술적분석도구란?
__[Doit!]주가선차트만들기
__[Doit!]캔들스틱차트추가하기
__[Doit!]거래량차트추가하기
__[Doit!]이동평균선추가하기

_05-3주식데이터분석기능추가하고배포하기
__[Doit!]여러종목비교기능추가하기
__[Doit!]수익률계산기기능추가하기
__[Doit!]AI에게깃허브업로드요청하기
__[Doit!]스트림릿커뮤니티클라우드로배포하기

06장매일자동으로크롤링하는논문요약대시보드만들기

_06-1크롤링의기초와파이프라인설계하기
__크롤링이란?
__[Doit!]아카이브웹사이트의robots.txt확인하기
__[Doit!]네이버뉴스웹사이트의robots.txt확인하기
__합법적인크롤링의6가지원칙
__파이썬딕셔너리구조로저장하기
__크롤링전략세우기

_06-2아카이브웹사이트분석하기
__아카이브웹사이트란?
__아카이브웹사이트의URL구조이해하기
__PDF다운로드링크로자동변환하기
__웹브라우저개발자도구로HTML구조파악하기
__[Doit!]논문초록페이지구조분석하기
__[Doit!]논문목록페이지분석하기

_06-3뷰티풀숩으로최신논문크롤러만들기
__크롤링에필요한라이브러리
__[Doit!]프로젝트폴더만들고라이브러리설치하기
__[Doit!]카테고리목록페이지에서아카이브ID수집하기―크롤링전략1단계
__[Doit!]상세페이지에서논문제목추출하기―크롤링전략2단계
__[Doit!]중복체크기능추가하기―크롤링전략3단계
__[Doit!]안전장치추가하기
__[Doit!]최신AI논문수집하기

_06-4제미나이로수집한논문요약하기
__논문요약구조설정하기
__[Doit!]제미나이API키준비하기
__[Doit!]논문요약하는함수만들기
__[Doit!]여러논문한번에요약하기

_06-5최신논문AI요약대시보드만들고배포하기
__[Doit!]스트림릿으로논문요약대시보드만들기
__[Doit!]깃허브저장소에코드파일업로드하기
__[Doit!]스트림릿커뮤니티클라우드로배포하기

찾아보기

바이브코딩,개발이처음이어도시작할수있나요?

‘코딩을몰라도AI가다만들어준다’는이야기는많이들었지만,막상시작하려면무엇부터해야할지막막한경우가많습니다.개발환경은어떻게준비하는지,AI에게무엇을요청해야하는지,결과물을어떻게완성해야하는지알기어렵기때문입니다.

〈Doit!바이브코딩+커서AI〉는개발환경설정부터시작해커서AI와기능을구현하고,테스트와오류수정,배포까지실제프로젝트를진행하는과정을차근차근안내합니다.AI에게코드를맡기기만하는것이아니라,결과를확인하고수정하며원하는방향으로발전시키는과정을통해AI와협업하는개발방식을자연스럽게익힐수있습니다.

커서AI만으로도서비스를제대로만들수있나요?

중요한것은AI가작성한코드를그대로사용하는것이아니라,결과를확인하고수정하며하나의서비스를완성하는과정입니다.이책에서는다음5가지프로젝트를직접만들며다양한개발분야를경험합니다.

〈이책에서만드는5가지실전프로젝트〉

·자산관리챗봇을탑재한가계부웹사이트
·지도기반여행아카이브플러터앱
·SNS대화패턴분석대시보드
·실시간주식차트분석서비스
·최신논문AI요약서비스

다른책과어떤점이다른가요?

이책은단순히커서AI의기능이나사용법을소개하는데그치지않습니다.웹,앱,데이터분석,AI자동화까지다양한분야의프로젝트를직접구현하며Next.js,플러터,파이썬,수파베이스,스트림릿등다양한기술스택을특정언어나프레임워크에국한하지않고AI와협업하는방식을폭넓게경험할수있습니다.완성한프로젝트는버셀과스트림릿커뮤니티클라우드로직접배포해실제사용할수있는서비스로완성해봅니다.

또한〈알아두면좋아요〉코너에서는실습에필요한핵심개념과배경지식을쉽게설명하고,〈한걸음더!〉코너에서는프로젝트를확장하는아이디어와실전활용법을제공합니다.단순히예제를따라만드는데그치지않고자신만의서비스로응용해볼수있도록구성했습니다.

바이브코딩+커서AI,어떤사람에게적합할까요?

·머릿속아이디어를실제서비스로만들어보고싶은기획자와마케터
·혼자서도직접프로토타입을만들고싶은PM
·AI와함께포트폴리오프로젝트를완성하고싶은대학생과취업준비생
·MVP를빠르게만들어검증하고싶은예비또는1인창업가

완독을돕는특별한학습지원!

혼자계획을세우고공부하다보면금방지치기마련입니다.‘Doit!스터디룸’의공부단에접속해서이책완독에도전해보세요.함께공부하는사람들도만나고,공부한내용을올려공유하고인증하면이지스퍼블리싱에서출간한책선물도받을수있습니다.어려운내용이있다면‘Doit!스터디룸’게시판에질문을남겨보세요.전문가와저자가명쾌하게답해드립니다.

·Doit!스터디룸:cafe.naver.com/doitstudyroom
커서에관해더자세히알고싶거나업데이트소식이궁금하다면저자가운영하는오픈채팅방에참여해보세요.질문을남기면답변도받을수있습니다.
·카카오톡오픈채팅방:https://open.kakao.com/o/snVlgwVb

프롬프트파일과결과코드는어디서내려받을수있나요?

이책에서사용하는프롬프트파일과결과코드는이지스퍼블리싱홈페이지나저자깃허브에서내려받을수있습니다.본문을따라해보고내려받은결과코드와비교해보면서학습효과를빠르게거둘수있습니다.