코딩 경험 없이 Cursor AI로 앱 만드는 법 | 1강

Corbin Brown 구독자 104,000명

요약

이 강의에서는 코딩 경험이 전혀 없어도 인공지능을 활용해 소프트웨어를 완전한 스크래치부터 단계별로 빌드하고, 최종적으로 라이브 웹사이트로 배포하는 방법을 안내합니다. 첫 번째 레슨에서는 전체 개발에 필요한 기술 스택과 도구를 살펴보며, 이후 설정·프론트엔드·백엔드·수익화·배포 과정을 순차적으로 다룹니다. 강의가 끝나면 누구나 실시간 링크를 통해 실제 작동하는 웹 애플리케이션을 직접 배포할 수 있습니다.

주요 키워드

Cursor AI ChatGPT React BumpUps API Firebase GCP GitHub Google AdSense API 프롬프트 엔지니어링

하이라이트

🔑 AI 기반 개발: Cursor AI와 ChatGPT를 사용해 직접 코딩하지 않고도 핵심 로직과 UI를 생성할 수 있습니다.
📌 단계별 로드맵: 총 6개의 레슨(테크 스택, 환경 설정, 프론트엔드, 백엔드, 수익화, 배포)과 보너스 팁으로 구성된 체계적인 학습 플랜을 제공합니다.
⚡️ IDE 선택 이유: VS Code 대신 Cursor AI를 메인 IDE로 활용하고, 복잡한 코드 생성은 ChatGPT 모델을 통해 처리하는 최적의 워크플로우를 선보입니다.
🌟 프론트엔드 기술: React를 사용해 사용자 인터페이스를 구성하고, BumpUps API로 유튜브 영상의 타임스탬프를 자동 생성합니다.
🚀 백엔드 인프라: Firebase와 GCP를 결합해 서버리스 함수로 모든 요청을 처리하고, 확장성과 안정성을 확보합니다.
🎯 버전 관리: GitHub를 통해 코드 백업·브랜치·커밋을 실습하며 체크포인트 방식의 안전한 배포 워크플로우를 익힙니다.
💡 수익화 전략: Google AdSense를 연동해 좌우측 배너 광고를 자동 삽입하고, 실사용자 트래픽으로 수익을 창출합니다.
📖 재사용 가능한 스킬: AI 프롬프트 작성 기법과 클라우드 툴 활용법은 시간이 지나도 최신 모델과 플랫폼에 적용할 수 있습니다.

용어 설명

Cursor AI

IDE(통합 개발 환경) 내에서 AI 기반 코드 작성을 지원하는 도구로, 자동 완성과 코드 생성 기능을 제공합니다.

ChatGPT

OpenAI의 대규모 언어 모델로 복잡한 코드 로직 작성과 보조 역할을 수행합니다.

React

Meta(구 Facebook)에서 개발한 UI 라이브러리로 컴포넌트 기반의 사용자 인터페이스를 구축할 수 있습니다.

API(응용 프로그래밍 인터페이스)

서로 다른 소프트웨어 간에 기능이나 데이터를 주고받기 위한 명세로, 이 강의에서는 BumpUps API를 활용합니다.

Firebase

Google Cloud Platform(GCP) 위에서 동작하는 서버리스 백엔드 서비스로 데이터베이스·인증·호스팅 등을 간편하게 제공합니다.

GCP(Google Cloud Platform)

구글이 제공하는 클라우드 컴퓨팅 플랫폼으로, 확장 가능한 서버 인프라와 다양한 관리형 서비스를 갖추고 있습니다.

GitHub

분산 버전 관리 시스템 Git을 기반으로 코드 저장·협업·배포까지 지원하는 웹 플랫폼입니다.

Google AdSense

웹사이트에 배너 광고를 삽입해 방문자 클릭·노출 수익을 창출할 수 있는 구글의 광고 네트워크 서비스입니다.

코딩 경험이 없어도 AI로 소프트웨어를 완전 스크래치부터 빌드하는 과정을 소개합니다. 시리즈 전체 목표와 최종 결과물(라이브 웹사이트 링크)을 확인하세요.

[00:00] 코빈이 코딩 경험 없이도 AI를 활용해 완전히 처음부터 소프트웨어를 개발할 수 있다고 소개하며, 이 시리즈를 통해 실제로 인터넷에서 접근 가능한 라이브 웹사이트를 배포할 수 있게 될 것이라고 설명합니다.

[00:29] 전체 시리즈 구성을 설명하는데, 첫 번째 레슨에서는 소프트웨어 배포에 필요한 기술 스택과 도구들을 다루고, 두 번째 레슨에서는 터미널 오류나 Node.js 문제 등을 해결하는 개발 환경 설정 방법을 알려준다고 합니다.

총 6개 레슨(테크 스택→환경 설정→프론트엔드→백엔드→수익화→배포)과 보너스 팁으로 구성된 단계별 로드맵을 제시합니다. 각 단계별 핵심 학습 내용을 미리 살펴봅니다.

[01:03] 세 번째부터 여섯 번째 레슨까지의 내용을 소개합니다. AI를 활용한 프론트엔드와 백엔드 구축, 소프트웨어 수익화 방법, 그리고 실제 런칭 과정을 다룰 예정이며, 시리즈 완료 후 실제 작동하는 소프트웨어를 공개할 것이라고 약속합니다.

[01:32] 빌더스 콘솔 로그의 보너스 레슨을 소개하며, 자신이 bumpups.com을 개발하면서 겪었던 실수들과 개발 과정을 몇 달 지연시킨 함정들에 대한 경험을 공유하여 시청자들이 같은 실수를 반복하지 않도록 도움을 주겠다고 설명합니다.

[01:49] 오늘 첫 번째 레슨의 주제인 기술 스택과 소프트웨어 개발에 필요한 모든 도구들에 대해 다룰 것이라고 안내하며, 직접 그린 다이어그램을 통해 소프트웨어 개발의 첫 번째 단계인 코딩 도구 선택에 대해 설명을 시작합니다.

AI 기반 개발 워크플로우를 위해 Cursor AI를 메인 IDE로, 복잡한 코드 작성은 ChatGPT(주로 GPT-4 모델)를 사용합니다. 미래에도 적용 가능한 프롬프트 작성 스킬을 강조합니다.

[02:07] Cursor AI와 ChatGPT를 사용하여 코딩하는 방법을 설명하며, 개인적으로는 VS Code를 선호하지만 시청자들의 선호도를 고려해 Cursor AI를 메인 IDE로 사용하고 복잡한 코드에는 ChatGPT를 활용할 예정이라고 설명합니다.

[02:38] 다양한 IDE(Windsurf, Cursor AI, VS Code)가 이 튜토리얼에서 모두 사용 가능하며, 배우게 될 스킬들은 대부분의 앱 빌딩 플랫폼에 적용 가능하다고 강조합니다.

[02:52] ChatGPT의 GPT-4 mini 모델을 사용할 예정이며, 시간이 지나도 AI 프롬프팅 스킬은 변하지 않을 것이라고 설명하고, 소프트웨어 구축의 인프라스트럭처에 대해 설명하기 시작합니다.

React 라이브러리로 UI를 구성하고, BumpUps API의 ‘generate timestamps’ 엔드포인트를 활용해 유튜브 영상에 타임스탬프를 자동 생성합니다. 광고 슬롯도 함께 설정합니다.

[03:19] 프론트엔드로 React를 사용할 것이라고 발표하며, React가 Meta에서 만든 훌륭하고 잘 다듬어진 라이브러리로 멋진 UI 제작이 가능하다고 설명합니다.

[03:42] BumpUps API를 활용하여 인터넷의 비디오에서 가치를 추출할 것이라고 설명하고, API의 개념을 간단히 소개하며 애플리케이션이 다른 서비스와 연결되어 소비자에게 가치를 제공하는 방식을 설명합니다.

[04:07] 구축할 소프트웨어가 YouTube 비디오에 타임스탬프를 제공하는 기능을 가질 것이라고 설명하며, YouTube나 TikTok 비디오 다운로드 사이트처럼 URL을 입력하면 되는 간단한 방식으로 작동할 것이라고 설명합니다.

[04:26] 유튜브 URL 입력으로 비디오를 다운로드할 수 있는 웹사이트의 기본 기능과 광고 설정에 대해 설명합니다.

[04:43] tubestamp.com을 기반으로 무료 AI 타임스탬프 생성기를 만들어 콘텐츠 크리에이터들에게 제공하고 구글 광고로 수익화하는 계획을 소개합니다.

[04:56] BumpUps API를 활용하여 타임스탬프를 생성하는 방법과 이것이 소프트웨어에서 제공하는 핵심 가치임을 설명합니다.

[05:10] 소프트웨어 개발에서 ChatGPT 같은 서비스를 통합할 때 API 엔드포인트를 사용하는 방법에 대해 설명합니다.

[05:27] 소프트웨어에서 커스텀 코드의 역할을 설명하며, bumpups.com의 예시로 비디오 파일 처리와 AI 출력 생성 과정을 소개합니다.

[05:50] 서드파티 API 사용과 자체 개발의 장단점을 비교하며, ChatGPT API 활용이 자체 개발보다 효율적임을 강조합니다.

Firebase를 통해 서버리스 함수로 모든 요청(request)을 처리하고, GCP의 관리형 인프라를 사용해 확장성과 안정성을 확보합니다. AWS 대신 GCP를 선호하는 이유도 설명합니다.

[06:20] 프론트엔드에서 백엔드로 넘어가며, 백엔드의 역할을 요청 처리 시스템으로 설명하고 Firebase와 GCP 사용 계획을 언급합니다.

[06:53] Firebase와 GCP의 관계를 설명하며, Firebase가 GCP의 제품으로 초보 개발자에게 친화적인 인터페이스를 제공한다고 소개합니다.

[07:07] 개인적으로 AWS보다 구글 GCP를 선호한다며, 익숙한 기술을 사용하는 이유를 설명합니다.

[07:16] 앱 개발의 핵심 요소들을 케이크 만들기에 비유하며, 관리와 버전 컨트롤, 배포를 위해 GitHub이 필요하다고 설명합니다.

로컬 코드 백업과 브랜치·커밋 기반 버전 관리 워크플로우를 GitHub로 실습합니다. 체크포인트 개념으로 안전하게 배포하고, 실시간 배포 환경을 준비합니다.

[07:34] 시리즈 전반에 걸쳐 가능한 한 간단한 용어와 비유를 사용하여 설명하겠다고 다짐하며, 실제로는 몇 개의 퍼즐 조각만으로도 소프트웨어를 만들 수 있다고 강조합니다.

[07:50] GitHub과 클라우드 코드의 개념을 설명하며, 로컬 코드가 노트북의 폴더에 존재한다는 기본 개념부터 시작합니다.

[08:06] GitHub에 배포하지 않으면 노트북 고장 시 코드를 잃을 수 있다는 위험성을 경고하며, GitHub이 클라우드 저장과 버전 컨트롤 기능을 제공한다고 설명합니다.

[08:20] 버전 컨트롤을 마리오와 스카이림 게임의 체크포인트 시스템에 비유하여 설명합니다. 게임에서 진행 상황을 저장하듯이 코드 개발에서도 중요한 지점을 저장할 수 있다고 합니다.

[08:39] 애플리케이션 개발에서 GitHub을 활용한 브랜치 관리와 커밋 시스템을 설명하며, 실수가 생겨도 이전 체크포인트로 되돌릴 수 있다는 장점을 강조합니다.

[09:08] GitHub의 체크포인트 기능을 스카이림 게임의 세이브 포인트에 비유하며 설명합니다. 코딩 중 실수해도 이전 상태로 쉽게 되돌릴 수 있다는 점을 강조합니다.

웹사이트 사이드바에 Google AdSense 배너 광고를 삽입해 수익을 창출하는 방법을 설명합니다. 실사용자 트래픽으로 수익화 모델을 구축합니다.

[09:28] 앱으로 수익을 창출하는 방법으로 구글 애드센스를 소개합니다. 블로그나 웹사이트에서 흔히 볼 수 있는 배너 광고를 통해 수익화할 수 있다고 설명합니다.

[09:43] 전체 기술 스택에 대한 설명을 마무리하고, 다음 레슨에서 개발 환경 설정에 대해 다룰 것이라고 예고합니다. 소프트웨어 개발의 기초를 탄탄히 다지는 것의 중요성을 강조합니다.

이번 레슨에서 다룬 기술 스택과 도구 구성을 기반으로, 다음 레슨에서는 개발 환경 설정(설치·연결·오류 해결)을 실습하며 안정적인 코딩 환경을 구축합니다.

타임라인 정보가 없습니다.

[00:00] 코딩 경험이 전혀 없어도

[00:01] 소프트웨어를 만들 수 있습니다. 이제

[00:03] 인공지능을 사용해서

[00:04] 완전히 처음부터 소프트웨어를

[00:05] 만드는 방법을 보여드리겠습니다.

[00:07] AI가 모든 힘든 작업을 대신 해줄 거예요.

[00:09] 이걸 가장 잘 보여드리기 위해

[00:11] 단계별로, 레슨별로 나누어서

[00:13] 진행하겠습니다. 이 시리즈가 끝날 때쯤

[00:15] 여러분은 실제로 라이브 웹사이트를

[00:17] 배포할 수 있게 될 거예요. 인터넷에서

[00:20] 누구나 접속해서 여러분의 소프트웨어를

[00:22] 사용할 수 있는 웹사이트 말이에요.

[00:24] 좋죠? 시작해봅시다. 저기 화이트보드에

[00:26] 써있듯이, 코딩 경험 없이도

[00:27] 소프트웨어를 만들 수 있어요. 이 시리즈에서

[00:29] 보여드릴 내용은

[00:30] 여러 단계로 나뉘어져 있습니다.

[00:31] 첫 번째 레슨에서는 기술 스택이나

[00:34] 다시 말해서, 실제로

[00:35] 실제 소프트웨어를 웹사이트에

[00:37] 배포하기 위해 필요한 도구들과

[00:39] 앱들에 대해 알아보겠습니다. 사용자들이

[00:42] 실제로 사용할 수 있도록 말이에요.

[00:44] 두 번째 레슨은 설정 방법입니다.

[00:46] 많은 분들이 이 부분을 좋아하실 텐데

[00:47] 평소에 받는 댓글 중에 많은 게

[00:48] "코빈, 터미널에서 오류가 나요.

[00:50] Node.js가 없다고 나와요"라는 거거든요.

[00:51] 이번 레슨에서는 GitHub와 연결하는 방법을

[00:54] 알려드릴 텐데, 왜 이렇게 하는지는

[00:55] 나중에 더 자세히 설명하겠지만

[00:57] 기본적으로 개발자 환경을

[00:59] 올바르게 설정하는 데 필요한

[01:01] 모든 것들을 다룰 거예요.

[01:03] 세 번째 레슨에서는 인공지능을 사용해서

[01:05] 전체 프론트엔드를 함께

[01:06] 만들어보겠습니다.

[01:08] 네 번째 레슨에서는 인공지능을 사용해

[01:09] 전체 백엔드를 구축해서

[01:11] 사용자들에게 가치를 제공할 수 있도록

[01:13] 하겠습니다. 다섯 번째 레슨에서는

[01:14] 실제로 이걸 어떻게 수익화해서

[01:16] 소프트웨어로 돈을 벌 수 있는지

[01:18] 알아보겠습니다. 마지막 부분에서는

[01:19] 실제로 소프트웨어를 런칭하겠습니다.

[01:20] 여기서 가장 좋은 점은 여러분이

[01:21] "이게 진짜야? 이 사람이 정말

[01:22] 가르쳐줄까?"라고 생각하실 수도 있는데

[01:23] 아래 설명란을 확인해보세요.

[01:24] 이 시리즈가 끝날 때까지 우리가 함께

[01:26] 만든 실제 소프트웨어를 올려놓을 거예요.

[01:28] 라이브로 작동할 거고 여러분이

[01:29] 직접 사용해볼 수 있을 거예요.

[01:31] 그리고 빌더스 콘솔 로그에서 찾을 수 있는

[01:32] 멋진 보너스 레슨도 있어요.

[01:33] 아래 설명란에서 확인해보세요.

[01:35] 제가 직접 소프트웨어를 만들면서

[01:36] 겪었던 함정들에 대한 내용이에요.

[01:38] bumpups.com을 만들면서

[01:39] 배운 교훈들입니다. 개발 과정에서

[01:41] 몇 달을 지연시킨 실수들을

[01:43] 소프트웨어를 만들면서 저지른

[01:44] 실수들 말이에요. 그 몇 달을

[01:46] 절약해드리고 싶어서 그 레슨에서

[01:48] 더 많은 걸 배울 수 있도록 했어요.

[01:49] 하지만 오늘 레슨에서는

[01:50] 기술 스택과 실제로 소프트웨어를

[01:52] 만드는 데 필요한 모든 도구들에 대해

[01:54] 알아보겠습니다. 이 작은 다이어그램을

[01:55] 확인해보세요. 멋진 다이어그램을

[01:57] 준비했어요. 제가 직접 그렸답니다!

[01:58] 알아야 할 모든 것을 보여드릴게요.

[02:00] 소프트웨어 개발의 첫 번째 단계는

[02:02] "코빈, 어떻게 코딩할 건가요?"

[02:03] "이 시리즈에서 코딩하는 데 필요한

[02:05] 도구들이 뭔가요?"라는 질문이에요. 제가

[02:07] Cursor AI와 ChatGPT로 하는 방법을 알려드리겠습니다.

[02:10] 먼저 두 가지 중요한 것을 설명하고 싶습니다.

[02:11] 질문은 왜 Cursor AI와 ChatGPT를 사용하는가입니다.

[02:13] 첫 번째 질문에 답하자면, 솔직히 말해서

[02:15] 저는 개인적으로 VS Code에서 개발하는 것을 좋아하고

[02:17] IDE와 AI를 분리해서 사용하는 것을 선호합니다.

[02:19] 하지만 제가 발견한 것은

[02:21] 이 채널을 보시는 많은 분들이나

[02:23] 이런 종류의 콘텐츠를 소비하는 사람들은

[02:25] Cursor AI 타입의 콘텐츠를 선호하는 경향이 있다는 것입니다.

[02:27] 그래서 Cursor AI를 메인 IDE로 사용하겠지만

[02:29] 더 복잡한 코드에는 ChatGPT도 사용할 예정입니다.

[02:30] 왜 이렇게 하는지는 나중에 자세히 설명드리겠습니다.

[02:32] Cursor AI가 IDE가 되겠지만

[02:35] 예상하시겠지만 어떤 통합 개발 환경이든 사용하실 수 있습니다.

[02:36] Windsurf, Cursor AI, VS Code

[02:38] 이 모든 것들이 이 튜토리얼에서 작동할 것이고

[02:40] 여러분이 배울 스킬들은 대부분의 앱 빌딩 플랫폼에 적용될 수 있습니다.

[02:45] 그러면 두 번째 질문인

[02:47] ChatGPT에 대해 이야기해보겠습니다.

[02:49] 저는 개인적으로 이 튜토리얼에서

[02:51] GPT-4 mini와 GPT-4 mini를 사용할 예정입니다.

[02:52] 왜 둘 중 하나를 선택해야 하는지 보여드리겠습니다.

[02:54] 그리고 여러분이 이 튜토리얼을 볼 때쯤이면

[02:57] 그 모델들이 더 좋아져 있을 수도 있습니다.

[02:58] 따라서 이것을 게시된 후 2주 후에 보시든

[03:00] 2년 후에 보시든 상관없이

[03:01] AI 프롬프팅에 관해 배우게 될 스킬들은

[03:04] 동일하게 유지될 것입니다.

[03:05] 이제 다시 돌아가서

[03:08] 소프트웨어 구축의 실제 인프라스트럭처를 보거나

[03:09] 다르게 말하면 점들을 연결하는 방법을 보겠습니다.

[03:10] 작동하는 멋진 라이브 웹사이트 링크를 만들어보겠습니다.

[03:12] 먼저 프론트엔드부터 시작하겠습니다.

[03:14] 지금 YouTube에서 보시는 모든 것들

[03:15] 멋진 작은 좋아요 버튼 같은 것들 말이죠.

[03:17] 프론트엔드를 테스트해보기 위해 좋아요 버튼을 클릭해보시는 것도 좋겠네요.

[03:19] 오늘 튜토리얼에서 사용할 프론트엔드는

[03:21] React입니다. 제가 이 전체 기술 스택에서

[03:23] 설명하려는 모든 것들은

[03:25] 여러분의 사용 사례와 상황에 따라

[03:26] 서로 바꿔서 사용할 수 있습니다.

[03:28] 하지만 이 프론트엔드는 React가 될 것입니다.

[03:29] 우리는 React를 사랑합니다.

[03:31] React는 Meta에서 만든 것으로

[03:33] 정말 좋고 매우 잘 다듬어진 라이브러리입니다.

[03:35] 정말 멋진 UI를 만들 수 있게 해줍니다.

[03:37] 이제 프론트엔드를 알았으니

[03:39] 최종 소비자에게 어떤 가치를 제공할 것인지 알아보겠습니다.

[03:42] 그것은 bumpups.com에서 나올 것입니다.

[03:44] 우리는 여기서 BumpUps API를 활용할 것이고

[03:47] 특히 그 API 엔드포인트 중 하나를 사용할 것입니다.

[03:48] BumpUps가 우리에게 허용하는 것은

[03:50] 인터넷에서 찾을 수 있는 어떤 비디오든 입력하고

[03:51] API를 통해 가치를 추출하는 것입니다.

[03:54] 한 발 물러서서, API가 무엇을 의미하는지 모르신다면

[03:56] 간단히 말해서 이것입니다. 우리는 멋진 작은 프론트엔드

[03:58] 멋진 작은 애플리케이션을 구축했습니다.

[04:00] 이 작은 애플리케이션이

[04:02] 인터넷의 다른 무언가와 연결되어

[04:04] 소비자에게 가치를 제공해야 합니다.

[04:05] 그래서 오늘 우리가 구축하는 소프트웨어는

[04:07] YouTube 비디오에 타임스탬프를 제공할 것입니다.

[04:09] 여러분도 이런 웹사이트를 본 적이 있을 것입니다.

[04:11] YouTube 비디오 다운로드, TikTok 비디오 다운로드 같은

[04:13] 웹사이트에 와서 간단히

[04:15] URL을 입력하면 되는 그런 사이트들 말이죠.

[04:16] 그리고 나서

[04:18] 웹사이트에 와서 단순히

[04:20] YouTube URL을 입력하고

[04:21] TikTok 비디오를 다운로드하고

[04:22] 그런 다음 입력하는 것입니다.

[04:24] URL을 입력하면 됩니다.

[04:26] 유튜브 URL을 입력하면 다운로드할 수 있게 됩니다.

[04:27] 다른 용도도 있지만

[04:29] 일반적으로 이런 웹사이트들에서는

[04:31] 좌우 컬럼에 작은 광고들이 보입니다.

[04:32] 우리도 이 소프트웨어에

[04:34] 그런 광고를 설정할 예정이고

[04:36] 우리의 목표와 우리가 구축할 소프트웨어의 사용 사례는

[04:38] 이 기술 스택에서

[04:39] 이런 것들 중 하나가 될 것이고

[04:42] tubestamp.com의 URL을 기반으로 할 것입니다.

[04:43] 저는 현재 이 웹사이트를

[04:45] 가져와서 새롭게 만들어

[04:46] 무료로 사용할 수 있는 AI 타임스탬프

[04:48] 생성기를 만들 예정입니다

[04:52] 모든 콘텐츠 크리에이터를 위한 것으로

[04:54] 구글 광고로도 수익화할 것입니다.

[04:56] 이를 위해 우리는

[04:57] BumpUps에서 제공하는 API를 활용할 것입니다

[04:59] 타임스탬프를 생성하고 이 API를 호출하는 방법을

[05:01] 단계별로 보여드리겠습니다.

[05:03] 이것이 제가 이 소프트웨어에서

[05:04] 제공하는 가치입니다.

[05:06] 바로 여기가 여러분이

[05:08] 소프트웨어에서 제공할 가치입니다.

[05:10] 일반적으로 소프트웨어를 구축할 때

[05:11] ChatGPT가 통합되어야 한다면

[05:14] 여기에 ChatGPT API 엔드포인트를

[05:15] 설정하게 됩니다.

[05:18] 무엇이든 상관없이, 소프트웨어 인프라에서는 일반적으로

[05:20] 커스텀 파이프라인을 구축합니다

[05:22] 제가 지금 너무 복잡하게 말하고 있군요.

[05:24] 한 단계 뒤로 물러서서

[05:25] 가능한 한 쉽게 설명해보겠습니다.

[05:27] 본질적으로 소프트웨어에서는 일부 코드가

[05:29] 커스텀입니다. 예를 들어

[05:31] 제가 bumpups.com을 위해 개발하는 소프트웨어에서

[05:33] 커스텀 코드는 비디오 파일을 처리하고

[05:35] 데이터를 추출한 다음

[05:38] AI 출력을 제공하는 방식입니다.

[05:40] 여러분의 가치가 무엇이든

[05:42] 이는 서드파티

[05:44] 소프트웨어 연결을 통해 이루어집니다.

[05:46] 예를 들어, 이 영상이나

[05:48] 이 시리즈에서 우리는 API를 위해

[05:50] 이 서드파티 제공업체에 연결하지만

[05:53] 이론적으로는 BumpUps가 하는 일의

[05:55] 자체 버전을 구축할 수도 있습니다.

[05:58] 다만 훨씬 더 복잡한 코드와

[05:59] 훨씬 더 많은 작업이 필요합니다.

[06:02] 제가 장황하게 말하고 있는 것은, 네

[06:04] ChatGPT에서 ChatGPT 엔드포인트를 사용할 수도 있고

[06:06] 채팅 완성 요청 같은 API를 사용하거나

[06:09] ChatGPT의 자체 버전을 구축할 수도 있다는 것입니다.

[06:11] 어느 것이 더 쉬울까요?

[06:13] ChatGPT의 자체 버전을 구축하는 것과

[06:15] ChatGPT의 API를 활용하는 것 중?

[06:18] API 쪽으로 기울고 있는 것 같습니다.

[06:20] 이제 이 기술 스택에서 프론트엔드와

[06:22] 최종 소비자에게 가치를 제공하는 방법을

[06:23] 알았으니, 백엔드는 무엇일까요?

[06:25] 명확히 하자면, 백엔드는 실제로

[06:28] 소프트웨어의 모든 요청을

[06:29] 처리할 수 있게 해주는 것입니다.

[06:31] 요청이라고 할 때, 이는 단순히

[06:32] 예를 들어 틱톡이나 인스타그램을 열어서

[06:35] 새 인스타그램 포스트를

[06:36] 만들겠다고 할 때를 의미합니다.

[06:38] 생성한다고 하면, 그것이

[06:40] 백엔드로 전송되는 요청입니다.

[06:43] 이는 기능입니다. 이를 단순히 액션으로 번역하면

[06:45] 우리 앱에 어떤 액션을 줄 것인가?

[06:47] 그리고 액션과 우리가

[06:48] 앱에 액션을 제공하는 방법은

[06:50] Firebase와 GCP를 사용하는 것입니다.

[06:53] 코빈, 왜 둘 다 언급하는지 궁금할 수 있는데요

[06:54] Firebase가 GCP의 제품이기 때문입니다

[06:56] Firebase는 친숙하고 사용자 친화적인 인터페이스로

[06:59] 초보 개발자인 여러분이 이해하기 매우 쉬울 거예요

[07:01] 이들은 기술 스택에 따라

[07:03] 서로 교체 가능합니다

[07:04] AWS와 아마존 인프라를 사랑하는

[07:06] 사람들이 많다는 걸 알아요

[07:07] 개인적으로 저는 구글의 GCP를 선호합니다

[07:10] 저에게 익숙하거든요

[07:11] 제가 아는 것으로 가는 편이죠

[07:14] 자, 이제 이 부분은 케이크의 핵심 부분 같은 거예요

[07:16] 우리 케이크가 구워질 거예요

[07:17] 케이크를 구우고 싶어요

[07:19] 이제 여기서 내려와서 어떻게 하면

[07:21] 좋은 관리, 버전 컨트롤

[07:23] 그리고 실제 라이브 웹사이트 링크로 배포를

[07:25] 할 수 있을까요?

[07:27] GitHub 같은 것을 사용해야 합니다

[07:29] 그리고 또 궁금할 수 있는 건

[07:31] 코빈, 왜 클라우드 코드라고 부르는지?

[07:33] 이 전체 시리즈에서

[07:34] 가능한 한 간단한 용어를 사용하려고 해요

[07:35] 따라서 설명할 때

[07:37] 비유를 들고 정말로

[07:39] 최대한 쉽게 설명하려고 하는데

[07:40] 실제로 소프트웨어를 만드는 건

[07:42] 보시다시피

[07:44] 여기서 정말 몇 개의 퍼즐 조각일 뿐이에요

[07:45] GitHub와 클라우드 코드, 그리고 GitHub에서 함께 할 모든 것을

[07:48] 이렇게 생각해 주세요

[07:50] 이것은 여러분의 노트북에

[07:52] 로컬로 있는 코드를 가져오는 방법입니다

[07:53] 로컬이라는 것은

[07:55] 코드가 말 그대로 폴더에

[07:58] 존재한다는 의미입니다

[08:00] 커맨드를 누르거나

[08:01] 우클릭해서 새 폴더를 만드는

[08:03] 그런 폴더에 코드가 있는 거예요

[08:06] 만약 이것을 GitHub 같은 곳에 배포하지 않으면

[08:08] 노트북이 고장나거나 파괴되면

[08:11] 코드를 영원히 잃게 됩니다

[08:13] 따라서 우리는 GitHub을 사용해서 코드를 클라우드에 저장할 뿐만 아니라

[08:16] 버전 컨트롤에도 도움이 됩니다

[08:18] 버전 컨트롤이라는 것은

[08:19] 예를 들어 설명해 드릴게요

[08:20] 마리오 게임 해보셨나요?

[08:22] 마리오를 할 때 레벨 1에서

[08:23] 깃발에 도달해서 치면

[08:25] 초록 깃발 같은 거고

[08:26] 체크포인트 완료 같은 게 나오잖아요

[08:28] 아니면 스카이림을 할 때

[08:29] 이게 더 좋은 예일 것 같은데

[08:31] 스카이림에서 윈터폴에 가서

[08:33] 기본적으로 난동을 부리고

[08:34] 모든 사람을 공격하려고 하기 전에

[08:35] 메뉴에서 작은 체크포인트를 저장하는 것처럼

[08:37] GitHub이 바로 그런 역할을 해요

[08:39] 애플리케이션을 만들 때

[08:40] 애플리케이션의 체크포인트에 도달해서

[08:42] 이거 정말 좋네, 이 버전이 마음에 든다고 하면

[08:44] 그걸 브랜치로 저장하고

[08:45] 메인에 병합해서

[08:47] 언제든 그 커밋으로 되돌릴 수 있게 됩니다

[08:49] 이렇게 하면 더 자유롭게 코딩할 수 있어서

[08:51] 그 체크포인트를 지나서 코딩하다가

[08:54] 완전히 망쳐버렸다고 하면

[08:56] 소프트웨어 개발에서는 이런 일이 생기거든요

[08:59] 첫째로는 AI로 코딩하고 있고

[09:00] 둘째로는 그냥 일어나는 일이에요

[09:02] 이 체크포인트로 되돌아갈 수 있습니다

[09:04] 이 체크포인트로 되돌아갈 수 있습니다

[09:08] GitHub에서 이전 체크포인트로 되돌아갈 수 있어서 걱정할 필요가 없어요.

[09:11] 윈터펠로 가는 것과 같죠. 윈터펠이 맞나요?

[09:12] 댓글로 알려주세요.

[09:14] 스카이림에서 프로(FRO)를 하면서 마을 사람들 절반을 죽였을 때,

[09:17] 마을을 공격하기 전 체크포인트로

[09:20] 되돌아갈 수 있잖아요.

[09:21] 이해가 되시나요? 다시 돌아가죠.

[09:23] 어릴 때 스카이림을 정말 좋아했어요.

[09:25] 정말 재미있었거든요.

[09:26] 그리고 마지막으로 가장 중요한 부분은

[09:28] 수익화입니다. 어떻게 돈을 벌 것인가요?

[09:30] 오늘 우리가 사용할 방법은

[09:31] 구글 애드센스입니다.

[09:32] 구글 애드센스를 통해

[09:33] 왼쪽과 오른쪽 컬럼에 보이는

[09:35] 작은 배너 광고들을 넣을 수 있어요.

[09:36] 블로그 사이트에서 흔히 볼 수 있는 것들이죠.

[09:38] 스톡 트위츠(Stock Twits)에서도 사용하고 있어요.

[09:40] 이를 활용하는 방법을 보여드릴게요.

[09:42] 전체적으로 이것이 기술 스택이고,

[09:43] 여기서 모든 것을 가능한 한

[09:45] 간단하게 설정하는 방법을 보여드릴게요.

[09:46] 믿어주세요.

[09:48] 따라서 다음 레슨에서는 설정에 대해 다룰 거예요.

[09:51] 개발 환경을 설정하는 방법을 보여드려서

[09:52] 가장 안전하고 생산적인 방식으로

[09:53] 적극적으로 코딩을 시작할 수 있도록 할게요.

[09:55] 이것이 전체 기술 스택에 대한 내용입니다.

[09:57] 소프트웨어 구축에 대해 기본적으로 알아야 할

[09:59] 모든 것을 다뤘어요.

[10:01] 벽돌을 하나씩 쌓아가며 기초를 다지고,

[10:03] 소프트웨어를 만들기 위해 사용할 도구들에 대해

[10:05] 알 수 있도록 했습니다.

[10:07] 지금까지 뭔가 배운 것 같다면

[10:09] 좋아요를 눌러주세요.

[10:10] 이 시리즈의 최신 정보를 놓치지 않으려면

[10:11] 구독도 꼭 해주세요.

[10:13] 더 이상 말하지 않고,

[10:14] 이미 알고 계시겠지만 다음 편에서 만나요.