0:00 안녕하세요. 조코딩입니다. 바이브 코딩 1인 창업 부트캠프에 오신 것을 환영합니다. 코딩을 진짜 아예 모르는 왕초보도 이해하실 수 있도록 기본적인 용어부터 글로벌 서비스를 만들고 광고 결제를 붙여서 수익화를 진행하고 심지어 미국 법인 설립 엑시까지 모두 다루는 완성형 1인 창업과 커리큘럼입니다. 조금 더 구체적으로 소개해 드리면 바이브 코딩으로 AI 기반의 IT 프로덕을 만드는 전 과정을 다루는 강의인데요. 아이디어 기획부터 개발, 마케팅, 수익화, 데이터 분석, 그로스까지 AI 시대 1인 창업과 프로덕트 빌더가 되기 위해 필요한 모든 내용을 배우는 강의입니다. 지금 보고 계시는이 영상은 5주 동안 라이브 방송을 통해서 이렇게 주차별 커리큘럼으로 진행한 영상을 편집하여 합쳐 놓은 영상인데요. 각 주차별 커리큘럼을 간략하게 소개해 드리면 먼저 1주차 때는 첫 기획부터 수익까지 즉 기본적인 개념부터 광고 수익화까지를 배워 보고요. 2주차 과정에는 기본적인 데이터 분석, 퍼널, SEO, GEO, 바이럴 구조, 마케팅, 유입부터 성장까지 다루고 1:01 3주차에는 내 서비스에 AI를 붙이고 글로벌 결제를 구현해서 내 서비스를 결제를 받아서 사용할 수 있도록 만들어 보겠습니다. 4주차 때는 데이터베이스, 회원 가입과 로그인 기능도 구현을 해서 구독 서비스를 구현하고 매월 반복 결제되는 그런 사스 서비스로 만들어 볼 예정이고요. 우주 차이는 실무적인 운영, 퍼포먼스 마케팅, 그리고 앱 개발, 미국 법인 설립, 엑시 전략까지 이렇게 5주 과정 안에 AI 시대 1인 창업을 위해 필요한 실전적인 내용들을 꽉꽉 압축해서 담아두었습니다.이 영상을 통해 많은 부분들을 무료로 공개를 하였지만 라이브 풀 버전으로 직접 실시간 지의 응답까지 포함된 더 상세한 내용을 보고 싶으시다면 멤버십의 가입 후 시청하실 수가 있게 되어 있고요. 편집본 내용 중에서도 일부 내용은 이렇게 멤버십 전용으로 공개를 해 두었으니 모든 내용을 완벽하게 배우고 싶으시다면 멤버십 가입도 해 주시면 정말 감사드리겠습니다. 그러면 강의 시작하겠습니다. 바이브 코딩 1인 창업가 부트 캠프를 진행해 보도록 하겠습니다. 1주차에는 뭘 배울 2:02 건가? 꽤 많은 양을 배울 겁니다. 일단 개요. 왜 지금 1인 프로덕트 빌더의 시대인가? 왜 지금 이걸 하는가에 대해서 좀 다뤄 보려고 하고요. 그다음에 IT 프로덕 우리가 만들 거기 때문에 그런 좀 큰 구조 어떻게 생겼나 이런 큰 그림에서 보고 그걸 세부적으로 하나씩 공부를 하려고 합니다. 그다음에 웹 개발을 먼저 시작을 할 겁니다. 사실 IT 프로덕이라 하면은 뭐 게임도 있고 웹도 있고 앱도 있고 뭐 만들 수도 있는데 그중에 가장 쉬운 웹을 할 겁니다. 당연히 AI와 함께 할 거고요. 네. 그다음에 배포해 가지고 실제로 전 세계 누구나 쓸 수 있게 공개를 할 거고요. 그다음에 이제 외부 서비스 활용하는 거를 이번 주는 해 볼 겁니다. 왜냐면 1주차부터 막 모든 걸 직접 만들기에는 좀 품이 많이 들어서 외부 서비스를 연결해 가지고 데이터베이스를 연결해서 폼 제출 이런 거 받는다거나 댓글 기능을 구현해서 사람들이 댓글을 쓸 수 있게 만든다거나 아니면 AI 기능을 붙여 가지고 내 사이트에서 이제 AI가 돌아가게 약간 요런 것들을 한번 활용해서 붙여 볼 예정입니다. 그다음에 이제 가장 중요한 거 광고 수익화까지 하면서 끝내 보도록 하겠습니다. 돈을 못 벌면 사실 요걸 만들어서 뭐 하나라는 생각이 들 수 있잖아요. 실제 수익과 연결될 수 있도록 광고 수익화까지 만들어 보도록 3:04 하겠습니다. 그러면 가장 중요한 1번 왜 지금 AI 프로덕트 빌더 시대인가 소개를 드리도록 하겠습니다. 채 GPT를 만든 오픈 AI CEO 샘 알트만이 이런 말을 남겼죠. 조만간 한 명이 운영하는 1조원 가치 기업이 나온다. 언급을 한게 굉장히 화제가 많이 됐는데요. 실제로 그런 시대가 오고 있습니다. 오픈 에아에서 무슨 모델 나왔고 구글에서 재미나이가 새로 나왔고 뭐 나왔고 하면서 서로 경쟁을 어마어마하게 하면서 AI가 빠르게 발전하고 있다는 거는 모두가 느끼고 계실 것 같습니다. 뭐 대표적으로 이제 코딩이 얼마나 빨리 발전했나를 중심으로 좀 보도록 하겠습니다. 대표적인 사례를 하나 보여 드리면 국제대학생 프로그래밍 대회 ICPC라는 대회가 있습니다. 굉장히 어려운 알고리즘을 막 코딩으로 풀어야 되는 그런 대학생 프로그래밍 대회인데요. 이번에 2025년 가장 최근 대회에서 1등한 팀이 총 12 문제 중에서 11 문제를 풀어 가지고 1등을 한 사건이 있었습니다. 네. 이렇게 인간은 11 문제밖에 못 풀었는데 이제 AI는 얼마나 풀었나? 네. AI는 12 문제 맞췄습니다. 오픈해할 모델이 모든 문제를 다 맞췄고요. 심지어 여기 아래 보시면 1트라이라고 돼 있죠. 인간은 막 4:04 머리 싸매면서 막 알고리즘 짜면서 수정하면서 엄청나게 결혼은이 대회를 AI는 1트라이만의 11 문제를 해결했고 어려운 문제는 아홉 번의 시도만에 맞춰 가지고 결국 12 문제를 모두 맞춰서 이제는 인간을 뛰어넘은 그런 모습을 보여주고 있었습니다. 결국에 일단 AI가 알고리즘 풀이 측면에서는 그래도 인간을 뛰어넘었다라고 충분히 말을 할 수 있을 것 같고요. 이제 AI는 계속 발전하고 있기 때문에 금방 더 뛰어나질 거는 너무 명확한 거 같습니다. 엘파고와 이세돌 9단님의 대결. 딱 이때의 대결에서 이세돌 님 1승 하시고 알파고가 4승을 하면서 이제 바둑은 이때 이후로 너무 더 발전해 가지고 더 이상 인간이 AI한테 바둑을 이길 수 없는 시점이 됐잖아요. 그런 말씀도 하시더라고요. 바둑의 신이랑 진비 없다. 뭐 이런 말씀을 해 주셨는데 그 정도로 이제 인간과 AI의 실력 차이는 너무나 아득해 가지고 인간은 AI를 이길 수 없는 네. 그런 시점이 되었습니다. 바둑 업계는. 근데 아마 모든 업계가 똑같겠죠. 특히 뭐 코딩 업계는 똑같이 될 날이 이제 머지 않은 거 같습니다. 근데 이게 또 명확한게 스케일링의 법칙이라고 해서 컴퓨팅 파워가 좋아지고 데이터 사이즈도 5:05 늘리고 뭐 파라비터도 늘리고 하다 보면 AI가 점점 좋아지는 법칙이 아직도 통하고 있다고 합니다. 엔트로픽의 공동 창업자 벤만 님을 조코딩 채널에 모셔 가지고 이때 스케일링의 법칙은 여전히 성립하고 있다. 내부적으로 둔화되는 증후가 전혀 보이고 있지 않다라고 합니다. 특히이 엔트로픽은 아마 개발자분들은 거의 다 쓰시는 클로드 코드를 만드신 이런 어마어마한 기업인데네 스케일링 법칙이 깨졌다고 하는 거는 클래식 미디어 띵이다. 그냥 미디어에서 클릭 얻으려고 하는 조회수 파리용이다라는 얘기까지 하셨어요. 그 정도로 이제 스케링 법칙 AI가 계속 발전할 거라는 건 너무나 명확하죠. 그러다 보니까 이제 코딩이 너무 쉬워졌어요. 네. 이제는 바이브 코딩의 시대가 됐습니다. 바이브 코딩이라 생성형 AI 인공지능으로 코딩을 시켜 가지고 엄밀한 논리 설계를 바탕으로 하지 않고 직관과 느낌에 의존한다는 의미 즉 느낌대로 코딩하는 시대가 됐습니다. 그래서 이런 바이브 코딩 전용 툴도 있습니다. 이런 서비스들이 그냥 딸깍하면은 AI가 원하는 대로 내 웹사이트 앱 이런 걸 만들어 주는 서비스인데 요런 것들이 어마어마하게 많이 탄생을 하게 됐습니다. 그 정도로 모든 개발자들이 다 그냥 딸깍딸깍으로 코딩을 하고 있습니다. 6:06 이제는 AI 안 쓰는 코딩은 이제 말도 안 돼요. 그래서 이런 거 기사 많이 보셨죠? 개발자 10명 중 아홉명 생성형 AI 대체 가능하다. AI가 더 코딩을 잘한다. 엄청 많이 들어보셨을 것 같습니다. 진짜 놀라운 사건으로 이런 것도 있었습니다. 이제 미국의 스탠포드 대학교에서 코딩 수업 강의인데 이제 새로운 패러다임이 왔다고 하면서 코딩을 배우는게 아니라 AI로 제품을 만드는 이런 강의를 스탠포드 대학교에서도 런칭을 했습니다. 이제 대학교에서도 AI 써 가지고 제품을 만드는 거 요런 거를 만들고 있습니다. 그래서이 정도로 이제 많이 변했다. 그리고 또 대표적인 사례 중에 스택 오버플로우라고 네이버 지식인 이런 것처럼 개발 관련해서 막히는게 있으면 이거 오류 어떻게 해결해요? 하면 막 천재들이 답변해 주고 요런 서비스였는데 뭔가 막히는게 있다 하면 스택 플로우 와 가지고 나랑 똑같은 문제 겪은 사람 있나 찾아보면서 답변을 복사해 가지고 쓰고 그래서 민 중에 이런 것도 있었습니다. 코딩을 하려고 하면 그냥 스택 오브 플로우 들어가서 컨트롤 C 컨트롤 V만 하면은 모든 코드가 완성되기 때문에 복사 붙여 넣기만 해서 코딩을 다 할 수 있다. 요런 걸로도 되게 유명했었는데 이제는 AI 때문에 복사 붙여 넣기 마저 필요가 없어졌습니다. 이제는 찾아서 복사 붙여 넣기 하는게 너무 큰 일이에요. 이제는 7:07 스테오플로우 망했습니다. 채치 런칭하고 빠르게 하락하는 모습을 보여주고 있죠. 그래서 예전 미매 이런게 있었거든요. 옛날 프로그래머들은 뭐 아폴로 미션 코드를 엄청나게 효율적으로 코딩을 해 가지고 50k바로 만들었다 막 이런 옛날에 대단한 프로그래머들에 대한 칭찬과 함께 요즘 프로그래머들은 헬로월드 이런 거 만드는데도 스택 오버 플로우에서 검색이나 하고 말이야. 어, 너무 비율적으로 했다. 그런 미이 있었거든요. 예전에. 이제는 스택오버 플로우에서 헬로월드가 어떻게 하는지 찾는 거. 이런게 오히려 대단한 프로그래머고 요즘 개발자들은 그냥 이거 켜 놓고 아, 이거 만들어 줘, 딸깍. 이거 만들어 줘. 딸깍만 하면은 다 코딩이 되기 때문에 이것마저도 어마어마한 시대가 됐습니다. 그래서 진짜 이제는 코딩이 너무 쉬워졌다. 누구나 배울 수 있는 쉬운 코딩 채널. 이게 조코딩 채널의 슬로건이었거든요. 근데 이제 그 시대가 왔습니다. 그래서 의지만 있으면 모든 걸 만들 수 있는 그런 시대가 됐습니다. 그래서 오늘날 개발자요 정도만 하면 되니까 같이 오늘 수업 들으시면서 어떤 걸 만들어야 되는지 용기를 가지시면서 같이 진행해 보면 좋을 것 같습니다. 코딩은 너무나 쉬워졌고요. 같이 있는 제품을 만들어야 되는 그런 시대가 됐습니다. 고객이 좋아하고 고객이 8:09 가치를 느끼고 고객이 돈을 낼 만한 그런 제품을 만들어야 사실 의미가 있잖아요. 가치 있는 제품을 만드는 일이 너무나 중요해졌다. 그런 말씀을 드립니다. 그리고 이게 코딩만 쉬워진 것도 아닙니다. 디자인 이런 것도 되게 쉬워졌거든요. 스티치라고 구글에서 만든 AI 디자인 도구가 있는데 앱 화면 같은 거 있잖아요. 뭘로 만들어 줘라고 하면은 디자인도 알아서 따르락 하면서 AI가 그냥 만들어 줍니다. UIUX 디자인도 AI가 해 주는 시대이기 때문에 추워졌다고 할 수가 있겠고요. UIUX 디자인뿐만 아니죠. 요즘에 뭐 나노바나 이미지도 워낙에 잘 만들어 냅니다. 최근에 구글 엔티 그래비티라고 이제 코딩 개발 툴이랑도 결합돼 가지고 더 좋아졌거든요. 뭐 게임 만든다 하면은 게임에 필요한 요런 에셋을 이거를 직접 만들어 써야 됐습니다. 근데 이제는 데미나의 나노바나 프로가 게임에 필요한 요런 에세트들을 직접 알아서 그냥 자동으로 만들어 냅니다. 네. 그렇기 때문에 이제 모든 분야가 쉬워지고 있습니다. 그래서 IT 프로덕을 만든다라고 하면 팀이 이런 식으로 돼 있잖아요. 뭐 기획하는 팀 있고 개발하는 팀이 있고 이걸 마케팅하는 팀이 있고 수익화하는 팀도 있고 데이터 분석하는 팀도 있고이 성장시키는 팀도 있고 한데 사실 이게 모두 다 AI가 수행하면서 9:10 IT 프로덕 팀이 한 명이 모두 할 수 있는 시대가 됐습니다. 그래서 이제 모든 직업의 경계에 싹 무너집니다. 그래서 한 사람이 사실 모든 거를 할 수가 있는 그런 시대가 됩니다. 그래서 IT 어느 분야에 계시더라도 결국에는이 모든 것을 할 줄 아셔야 되지 않을까 그런 생각이 듭니다. 이런 시대가 저는 너무나 당연하게 올 거라고 생각이 들어서 조코딩 회사 차원에서도 프로덕 빌더를 채용을 했습니다. 그래서 이제는 1인 창업가를 하실 수 있는 분만 살아남을 수 있을 것 같은네 그런 시대가 됐습니다. 구글 CEO 순다 피차이와 직접 만나서 인터뷰도 했었는데 여기서 순다 피차이가 했던 말도 AI로 인해서 그 어느 때보다도 더 창의적으로 표현할 수 있는 시대가 됐다. 당신이 성취할 수 있는 목표를 더 크게 상상하세요. 이런 에이전트들이 많은 일을 대신해 줄 수 있으니까 더 큰 그림을 상상하고 A에트한테 시켜 가면서 하기만 하면 됩니다. 소수의 인원이 어느 정도까지 성과를 올릴 수 있나? 요즘 AI 네이티브로 일하고 있는 기업이 어느 정도 성과를 내고 있냐? 기업별로 이렇게 쭉 조사를 했거든요. 직원의 숫자 30명, 40명, 20명, 한 명, 네명. 뭐 이런 식으로 굉장히 소수의 인원인데 연간 수익이 어마어마하죠. 네. 요런 식으로 어마어마한 기업들이 소수의 인원으로 10:11 탄생을 하고 있습니다. 대표적인 사례만 몇 개 보자면 뭐 커서 AI AR 1450억 연간 1,450억 정도를 버는게 한 20명 정도에 달성을 했다고 합니다. 베이스 44 큰 기업이 아니고 1인 소유 기업입니다. 바이브 코딩 플랫폼인데 믹스에 8천만 달러 현금의 매각이 된 사건도 있었습니다. 하나로 치면 막 1100억이 넘죠. 엄청나죠. 1인으로도이 정도 성과를 낼 수 있는 시대가 됐고 그렇다고 베이스 44가 뭐 기술적으로 어마어마해 가지고 못 만드는 어떤게 있냐? 아닙니다. 외부 AI를 갖다가 붙여 가지고 그냥 만든 어떤 서비스일 뿐입니다. 진짜 누구나 만들 수가 있어요. 그래서 그냥 포장을 잘하시면 된다라고 소개를 드리겠습니다. 그래서 이제 요즘 시대는 사실 뭐 수익을 많이 올리건 뭐 기업 가치가 크건 이런게 뭐 회사에 뛰어난 사람이 많아서 기술이 좋아서 전문성이 높아서 퀄리티가 좋아서 이런게 전혀 아닙니다. 요즘에는 이게 비례하지 않는 시대가 됐어요. 그래서 제 생각에는 이런 요소들 있잖아요. 되게 복잡한 어떤 함수인 거 같아요. 마치 AI 모델 훈련시키다 보면 이제 글로벌 미니마라는 걸 찾아 가지고 막 이것저것 시도해 보면서 결국 이걸 찾아 나가거든요. 그래서 이런 것처럼 11:13 그냥 시장에 성공하는 어떤 서비스를 만든다. IT 프로덕을 만든다라고 하면은 일단 출시하고 고객의 니즈에 맞는이 지점을 찾는게 중요하지. 돈을 얼마나 들었느냐, 인원이 맞냐, 뭐 기술력이 뛰었느냐 아무 상관없습니다. 고객의 니즈에 맞게 계속 고쳐 나가면서 최적의 지점을 찾는 거. 요것만 반복할 수 있으면은 누구나 성공할 수 있지. 뭐가 하나가 뛰어나서 성공하는 건 아닙니다. 즉 네. 이제 시간이 없습니다. AGI가 얼마 안 남았다 이런 얘기도 있잖아요. 특이점이 오면은 사실 이런 것도 AI가 찾아 줄 거예요. 근데 그 기간이 얼마 남지 않았다라는 생각이 들어서 인간의 노력에 들어가서 좀 빛을 바랄 시점은 얼마 남지 않았다. 그래서 시간이 없습니다. 저는 이런 생각도 들었어요. 한국인이 되게 잘하지 않을까라는 생각도 들었어요. 사실 한국은 소프트웨어 파워가 되게 강하잖아요. K 컨텐츠 이런 거. 넷플릭스에서도 K 컨텐츠 하면서 오징어 게임 대박 나고 요런 것들이 이제 한국에서 되게 잘하는 영역이다 보니까 이런 IT 프로덕도 충분히 잘할 수 있지 않을까라는 생각이 들어요. 저는 큰 꿈이 있습니다. 여기에 이제 한축으로 글로벌을 장악하는 어떤 IT 프로덕이 조코딩 채널에 제가 지금 진행하는이 프로덕 빌더 부트 캠프를 통해서 나올 수 있지 않을까 생각이 듭니다. 이번 강의에서 다룰게 웹 서비스를 만드는 거 일단 할 거고 똑같이 유통 채널이 12:13 지금 다 뚫려 있잖아요. 웬만한 사이트는 이제 글로벌에서 다 들어올 수 있잖아요. 저희는 글로벌 결제를 붙일 겁니다. 글로벌 결제, 글로벌 구독이 가능한 시스템을 만들어서 붙일 거예요. 그리고 광고도 글로벌에서 다 수익을 얻을 수 있는 뭐 구글 에드센스 같은 걸 붙일 거예요. 그래서 내가이 사이트를 잘 만든다. 글로벌로 결제 구독을 받고 글로벌로 광고를 받는 그런 서비스 만들 수 있도록 이번 강의에서 쫙 준비를 했습니다. 그리고 앱을 출시하더라도 사실 구글 플레이 스토어, 애플 앱스토어 이런 거 다 글로벌 유통이 되잖아요. 게임 만들어도 뭐 스팀이나 이런데 출시하면 글로벌이 쓸 수 있으니까 충분히 진짜 이거에 한축으로 KIT 제품이 나올 수 있지 않을까? 그래서 이번 강의는 최대한 글로벌 무조건 글로벌로 만들 거고요. 확장성 무조건 고려해서 만들 겁니다. 예전에는 네트리파이 뭐 이런 걸로 디플로해서 올리면은 사람이 너무 많아지면 서버가 돈이 과금이 많이 되고 막 이런 경우가 있었는데 최대한 확장성 있게 몇 억이 들어와도 감당할 수 있는 정도의 그런 위주로 이번 커리큘럼을 다 구성을 했으니까요. 요거를 직접 만들어 보도록 하겠습니다. 그래서 어떤 걸 배울 거냐? 5주 완성으로 진행을 합니다. 기획 개발 마케팅 수익화 데이터 분석 그로스 다 다룹니다. 그 이제 다음 과정 진행을 해 보겠습니다. 이제 IT 프로덕이 실제로 어떻게 생겼는지 13:13 구조를 먼저 보고 이걸 어떻게 하나씩 구현할 건지 그리고 왜 이런 걸 사용하는지를 하나씩 좀 소개를 드리도록 하겠습니다. 일단은 그 IT 프로덕이 뭔가에 대해서도 잘 모르시는 분도 있을 수 있을 것 같아서 어떤 건지 그냥 개념적으로 소개해 드리면 이런 겁니다. 구글 이런 거 검색할 수 있는 서비스잖아요. 기본적으로 인스타그램 이것도 SNS 서비스잖아요. 사진 뭐 영상 이런 거 올리고 친구랑 소통하고 채피 이런 것도 인공지능이랑 대화할 수 있는 어떤 IT 프로덕이고 넷플릭스 이런 것도 뭐 영화 등록해 가지고 사람들이 영화 스트리밍으로 볼 수 있게 하는 서비스고 리그 오브 레전드 뭐 이런 게임도 사람들이 접속해 가지고 게임을 즐기면서 할 수 있는 이런 모든 것들이 다 IT 프로덕입니다. 그래서 이번 5주 과정을 끝낸다. 아 이게 대략 요렇게 생겼구나라는 거를 이해하실 수가 있습니다. 진짜 잘하면 요런 것들을 구조를 똑같이 클론을 할 수도 있어요. 직접 여러분이이 서비스를 만들어서 내놓는 것도 가능합니다. 근데이 모든 프로덕을 진짜 추상화 추상화 해 가지고 진짜 간단하게 소개를 드리면 어떻게 소개를 드릴 수 있냐? 이걸로 설명 가능합니다. 큰 프레임워크로 요것만 기억하시면 이제 나머지 정보를 넣기에 이제 칸이 만들어질 겁니다. 크게 IT 프로덕은 프론트 엔드 클라이언트 사이드라고도 하는데 프론트 엔드 14:15 부분과 백엔드 서버 부분으로 나눠져 있습니다. 이게 무슨 말이냐? 프론트 엔드는 프론트잖아요. 앞쪽 즉 우리가 보는 화면 단에서 돌아가는게 있고 우리가 안 보이는 뒷단에서 돌아가는게 있습니다. 엄밀히 말은 좀 다르지만 프런트엔드 부분을 이제 클라이언트라고도 부르고 백핸드를 서버라고도 부릅니다. 그래서 예를 들어서 이런 겁니다. 네이버에 로그인한다. 로그인을 한다라는 그 개념이 실제로이 IT 프로덕에서 어떻게 동작하는가? 일단 프론트엔드 클라이언트 부분에서는이 네이버 로그인 화면이 있습니다. 요게 프론트엔드입니다. 그래서 프론트엔드 개발을 한다. 요런 화면을 만드는 일을 의미합니다. 그래서 아이디 입력하고 비번 입력하고 로그인 누르면 어떻게 되냐? 프론트엔드에서 백엔드로 정보가 날아갑니다. 아이디, 패스워드가 이렇게 날아갑니다. 그러면 백엔드에서는 실제 가입된 사람인지 맞는지 봐야 되잖아요. 회원 목록이 있습니다. 회원 목록이 있어 가지고 이게 실제로 맞는지 조회를 합니다. 어, 맞군 해 가지고 이렇게 오케이 하면은 이제 로그인 성공 해 가지고 화면을 표시해 주는 요런 구조로 되어 있다라고 IT 프로덕의 가장 큰 추상적인 그림을 그려보자면 요런 구조로 되어 있습니다. 그래서 무슨 해킹 사태 이런 거 보면은 서버가 털려 가지고 뭐 해킹을 당했다라는 얘기 있잖아요. 백핸드가 이렇게 털린 15:15 겁니다. 쉽게 말해서. 그래서 요렇게 구조가 되어 있다라고 큰 그림에서 잡고 들어가시면 앞으로 배울 내용들이 어 아 요거 지금 프런트엔드 배우는구나 아 요거 백핸드에 아 여기 딥이 지금 우리가 만들고 있구나 그 개념을 이해할 수가 있습니다. 그래서 우리가 뭐 할 거냐이 프트엔드 백핸드를 만드는 걸 배울 겁니다. 결국엔 이걸 만들어 가지고 인터넷에 올려 가지고 여기서 내 프론트엔드 백엔드를 이용해 가지고 여기에 이제 결제를 추가로 붙이고 만드는 구조를 5주 동안 구현할 겁니다. 그래서 여기에다 이제 돈을 벌어야 되잖아요. 이거 만들어 가지고 그냥 돈을 안 받는다 하면 자선 사업이잖아요. 해서 뭐예요? 그래서 광고를 붙일 겁니다. 그래서 오늘 광고 붙이는 것까지 진행을 할 건데 구글 에드센스 광고를 붙이고 내 사이트에 접속했을 때 광고를 보고 내가 돈을 받아갈 수 있게 구조를 만들 거고요. 그리고 결제도 붙일 겁니다. 콜라라고 MOR이라는 사실 결제 대행해 주는 거예요. 아무튼 글로벌 결제를 받을 겁니다. 그리고 스트라이프도 붙여서 돈 받는 방법 좀 전체적인 큰 그림에서 좀 아시겠나요? 여러분 앞에 보셨던이 서비스들 다 이렇게 돼 있죠. 이거를 5주 동안 다 배운다라고 생각하시면 되겠습니다. 근데 물론 하나만 있을 수도 있습니다. DB 이런게 뭐 없어도 됩니다. 프론엔드만 왔다 갔다 할 수 있게 만들어 주고 백엔드 로직이 16:16 없어도 됩니다. 전반적으로 어떤 서비스다라고 하면은 프론핸드 백엔드로 구성이 돼 있다라고 이해를 하시면 도움이 되실 것 같아서 이렇게 소개를 드립니다. 그러면 이제 웹 개발 바로 진행해 보도록 하겠습니다. 일단 웹 개발이란 크롬 브라우저는 한 번씩 좀 써 보셨죠? 브라우저를 통해서 접근해 가지고 이용할 수 있는 이런 서비스 이거를 이제 웹 서비스라고 하고요. 이거를 개발하는 과정이 웹 개발입니다. 그래서 이걸 왜 하냐? 제가 봤을 때 가장 난이도도 낮으면서 이해하기도 좋고 인터넷에서 한 번쯤 어떤 사이트 들어가 본 거 해 보셨을 거잖아요. 그래서 익숙하면서 내가 만든 어떤 것도 구글이나 똑같이 전 세계 누구나 쓸 수 있게 만드는게 어렵지가 않습니다. 그래서 이거를 진행하려고 하고요. 그래서 아까 소개드렸듯이 웹사이트도 마찬가지로 프론트 핸드 클라이언트 부분과 백핸드 서버 부분이 있습니다. 서버 쪽은 약간은 좀 난이도가 있을 수 있어요.이 프론트엔드 화면 만드는 건 그나마 좀 직관적으로 이해하기 좋거든요. 그래서 이렇게 왔다 갔다 할 거지만 프론트엔드를 먼저 배운다라고 이해해 주시면 좋을 것 같습니다. 그래서이 프론트엔드 웹의 프론트엔드는 진짜 별거 없습니다.이 세 가지 언어를 아시면 끝납니다. HTML, CSS, 자바스크립트,요 세 개의 언어로이 웹 개발이 구성이 17:16 돼 있습니다. 아니 웹 개발 쉽다면서 무슨 언어를 세 개나 써 가지고 개발하냐라고 생각이 들 수 있는데 사실 크게 어렵지 않습니다. 심지어 문법은 이제 몰라도 됩니다. 역할만 하면 됩니다. 아, HTML이 요런 걸 하는 거고 CSS가 요런 걸 하는 거고 자바스크립트가 요런 걸 하는거다 정도만 알면은 이제 AI 회가 가면서 HTML 코드 만들어 줘 하면 만들어 주고 CSS 코드 만들어 줘 딸깍하면 만들어 주고 그 개념만 알면 되지. 이제 세부적인 문법은 이제 AI 시대 알 필요가 없다라고 소개를 드립니다. 그러면 이제 각각 언어의 역할을 알아보도록 하겠습니다. HTML은 뭐 하는 거냐? 요렇게 뼈대를 잡는 역할을 합니다. 네이버 로그인 페이지를 만든다라고 하면은 제목은 네이버 요렇게 들어가 있고 뭐 입력창 입력창은 여다 만들고 입력창 그다음 만들고 로그인 버튼을 만든다. 요렇게 구성하는 어떤 뼈대를 잡는게 HTML의 역할입니다. 뼈대는 HTML이다. 어렵지 않죠? 그다음에 이제 CSS라는 걸 좀 알아보자면 아까 HTML로 이렇게 뼈대를 잡았잖아요. 요거를 이렇게 꾸며 주는 역할을 합니다. 제목은 초록색으로 글게 글씨 폰트는 뭐고 막 이런 거 설정하는 거 있잖아요. 배경은 회색이었으면 좋겠다 하면 회색으로 하고 입력창은 흰색이고 요렇게 길이 요렇고 요런 걸하는게 CSS라고 18:18 합니다. 꾸미는 역할을 하는게 CSS다. 이해해 주시면 좋을 것 같습니다. 비율을 통해 좀 알아보자면 HTML로 이렇게 철근 뼈대를 이렇게 딱 잡는다고 하면 CSS로 이쁘게 꾸미는 역할을 한다. 그다음에 자바스크립트 이런 걸 합니다. 동작을 처리합니다. 예를 들어서 뭐 아이디 비번 입력했는데 이런 거 띄워주잖아요. 비밀 번호를 잘못 입력했습니다. 다시 입력하세요라고 비번 지우고 메시지 표시하고 클릭하면은 막 이벤트가 발생하고 막 바뀌고 이런 거 있잖아요. 그런 것들을 이제 자바스크립트가 처리합니다. 즉 동적인 처리를 할 때 씁니다. 로그인 성공하면 뭘 한다, 실패하면 뭘 한다. 그런 걸 설계하는게이 자바스크립트의 역할입니다.이 세 가지만 이해하시면 웹프론엔드 사실상 끝입니다. 좀 비유적으로 또 설명을 해 보자면 HTML은 뼈대를 딱 구성한다라고 보시면 될 거 같고 CSS로는 이렇게 꾸미는 거. 자바스크립트는 뭐 신경 움직여야 되잖아요. 실제로 신경이 자바스크립트다라고 이해하시면이 역할에 대해서 개념적으로 이해하시기 좋을 것 같습니다. 그럼 이거를 직접 만들어 봐야겠죠. 근데 제가 아까 말씀드렸다시피 회원 가입 설치가 가장 어려운 거 같아요. 회원 가입 그리고 어떤 거 설치하는 거 제일 어렵기 때문에 개발 환경은 메모장을 쓰겠습니다. 윈도우 컴퓨터 쓰시는 19:19 분들은 윈도우 메모장 있으실 거고요. 맥 쓰신다 하시면 맥 메모장이 있을 거잖아요. 나중에는 뭐 좋은 데로 갈 거긴 한데 이해하데 있어서는 메모장으로 진행해 보도록 하겠습니다. 그리고 채치피pt 쓸 겁니다. 메모장과 채치피pt이 두 가지로 개념을 먼저 이해를 해 보도록 하겠습니다. 일단은 좀 개념적인 걸 알고 시작하면 좋잖아요. HTML이 어떤 식으로 구성되 있냐? 꺾세에 연다고 하죠. 요렇게 열고 태그 이름을 쓰고 닫고 그 안에 내용을 넣고 꺾세 열고 슬래시 태그 이름하고 닫고 요런 식으로 다 구성이 돼 있습니다. 이거 어떻게 써요 하시는 분들을 위해서 키보드에 시프트 누르고 요거 누르면 이렇게 꺾세 나오고이 옆에 거 누르면 이제 닿는게 나오죠. 이렇게 세 가지 요렇게 붙어 있습니다. 그래서 요런 식으로 H1이라는 HTML 태그가 있습니다. 이게 제목을 나타낸 태그인데 요렇게 쓰는게 이제 HTML 문법입니다. 그래서 H1이 뭔 뜻이냐면 굳이 설명을 드리자면 헤더 중에 제일 큰 거라는 얘기입니다. 그래서 요렇게 생겼고요. 일단은 실습부터 하면서 진행해 보겠습니다. 윈도우 쓰시는 분들은 마우스 우클릭해 보시면 새로 만들기라는게 있습니다. 텍스트 문서를 여기서 바로 만들 수가 있습니다. 이렇게 텍스트가 생기고요. 여기서 영어로 index.html이라고 이렇게 txt를 지우고 쓰시면 20:20 됩니다. 요러면 인덱스.html이라 HTML이라는게 생겼죠. 가장 많이 물어보시는 것 중에 하나가 어 이거 확장자 안 뜨는데요. 확장자가 뭐예요라는 질문을 가장 많이 받았던 거 같거든요. 그래서 요거를 좀 소개를 드리자면 강의 사이트 들어오시면 강의 자료에 확장자 방법이 있습니다. 확장자라는게 뭐냐? 인덱스 만들려고 하니까 요렇게만 만드신 분이 있습니다. 점하고 어쩌고 붙은게 없는 분들이 계세요. 그런 분들은 윈도우 폴더 모양 그 아이콘 누르시면 요런 탐색기가 열리는데 여기에서 점점점 누른 다음에 옵션에 들어가시면 보기가 있습니다. 보기에서 알려진 파일 형식의 파일 확장면 숨기기 요거가 해제돼 있어야 됩니다. 해제하고 확인을 누르셔야 이제 요런 식으로 인덱스.txt TXT 뭐 이런 식으로 확장자가 있거든요. 요거를 마우스 우클릭하시면 이름 바꾸기를 할 수 있습니다. 이름 바꿔 가지고 이거를 이제 점tml이라고 바꿔야이 파일은 아 HTML 파일이구나라는 확장자라는게 붙게 됩니다. 그리고 맥에 쓰신다. 맥용에도 기본 메모장이 있습니다. 기본 텍스트 에디터 주의하셔야 될 때게요 노트가 아닙니다.이 복잡한 거 말고 가장 단순한 거 텍스트 에디이라는게 있습니다. 네. 요거를 눌러 가지고 여기서 포맷을 플레인 21:20 텍스트로 바꾸셔야 됩니다. 플레인 텍스트로 바꿔 가지고 파일 이름을 이제 인덱스.html HTML이라고 확장자까지 붙여 가지고 저장을 하시면 됩니다. 메모장을 켜신 다음에 여기서이 인덱스.html 있잖아요. 요거를 쓱 떨구면은 이렇게 인덱스.html 열리게 됩니다. html 코드를 여기에 쓰면 돼요. 이제 코딩 준비 끝입니다. 여기에 이제 HTML 코드를 입력하면 프론트엔드 화면이 딱 나옵니다. 키보드 시프트하고 이거 누르면 이거 열립니다. 이렇게 열렸죠. 그다음에 영어로 H1 쓴 다음에 다시 꺾세 닫아 보겠습니다. 여기까지 되셨나요? 그리고 여기에 안녕. 쓰고 다시 꺾세 열고 슬래시하고 H1 하고 닫아 보겠습니다. 자, 여기까지 HTML 코드를 직접 여러분들이 코딩을 하신 겁니다. 이제는 다 AI 시킬 겁니다. 그다음에 제일 중요한게 있습니다. 여기에 요렇게 점이 붙어 있죠? 요게 저장이 안 되어 있다라는 표시거든요. 그래서 컨트롤 S 이렇게 누르시면은 이제 저장이 되고요. 아니면은 파일에 저장 버튼이 있습니다. 이걸 누르시면 이제 저장이 됩니다. 좋습니다. 요렇게까지 하신 다음에 이제 크롬은 깔려 있으실 거예요. 아마 대부분 얘를 더블 클릭을 해 보시면 연결 프로그램드 선택이 되는데 크롬을 선택하고 항상을 22:21 눌러 보겠습니다. 크롬으로 열어 보면 놀랍게도 이렇게 인터넷 브라우저에서 접속할 수 있는 HTML 코드가 실행이 돼서 실제로 H1 안녕에 해당하는게 요렇게 표시가 됐습니다. 그다음에 이거는 안 따라하셔도 됩니다. 그냥 보시면 됩니다. 버튼 하나 만들어 볼게요. 눌러 줘. 이렇게. 네. 이렇게 버튼이라는 태그를 쓰면 얘는 HTML 문법을 쓰는 거니까 얘를 저장하면 얘를 새로 고침하면 렇게 눌러줘라는 버튼이 생깁니다. 딸깍딸깍 눌리죠. 네. 요렇게 이제 HTML이 동작한다라고 이해하실 수가 있겠습니다. 근데 이제 사람이 이렇게 코딩하는 시대 지났습니다. 요거 안 하셔도 됩니다. 개념을 설명드리기 위해서 이렇게 한 거고 여기서 GPT GPT.com으로 인터넷 브라우저를 켜서 접속을 해 보시면 되겠습니다. 네. 여기서 명령어를 입력해서 HTML 코드를 AI에게 자라고 시킬 수가 있습니다. HTML 코드로 조코딩을 소개하는 홈페이지 간단하게 진짜 이거는 사람한테 시키듯이 하면 됩니다. AI 시대의 코딩 이런 겁니다. 딸깍 누르면은 이제이 채치T가 코딩을 해 줍니다. 얘는 로그인 안에도 아마 쓸 수 있을 거예요. 네. 아주 간단하게 깔끔한 단위를 HTML 파일로 만든 소개 23:22 홈페이지입니다라고 인덱스.html로 이렇게 만들었죠. 완성이 됐으면 여기 코드 복사 버튼이 있습니다. 얘를 복사해 가지고 여기에 HTML에 전체 드래그하고 지운 다음에 컨트롤 V를 하면 HTML 코드가 들어갔습니다. 여기서도 가장 중요한 거 파일에 저장을 누르시면 저장이 됩니다. 그리고 놀랍게도 이제 새로 고침을 해 보시면 와 조코딩의 홈페이지 바로 그냥 만들어졌습니다. 이제 코딩은 이런 식으로 하는 겁니다. 어떤 개념을 이해하고 그다음에 AI 시켜 가지고 적용하면 코드가 완성이 됩니다. 자세히 보시면 다 HTML 태그가 들어가 있어요. 헤드라는 태그. 여기에서 스타일이랑 태그 좀 달라요. 여기는 CSS 문법이 들어가 있는데 요거는 그냥 간단하게 넘길게요. 그리고 뭐 부가적으로 이런 것도 있습니다. 태그 이름 H1 이런 거 말고이 사이에 클래스는 타이틀 이런 식으로 뭐 덧붙여 주는게 있어요. 이걸 뭐 속성 갑 이렇게 부르는데 이런 식으로 부가적으로 붙는 것도 있고 하나로 구성된 것도 있습니다. 부모 자식 관계도 있어요. 부모 태그가 이렇게 열리고 다치고 있는 사이에 이렇게 자식이 두 가지게 들어가면 얘를 부모 태그라 부르고 얘는 자식 태그라 부릅니다.요 정도 개념만 이해하셔도 약간 HTML를 거의 다 정복하신 겁니다. 이걸 알면 뭐 할 수 있냐? 놀랍게도 여러분들은 24:23 해커가 될 수가 있습니다. 네이버 뉴스를 한번 해킹해 보겠습니다. 네이버 웹사이트로 들어가 보겠습니다. 뉴스로 들어가서 IT 뉴스 하나 보겠습니다. 이렇게 들어갔습니다. 내용이랑 상관없이 그냥 아무거나 들어가시면 됩니다. 그다음에 마우스 우클릭하고 검사라는 버튼이 있습니다. 검사 누르면 갑자기 요렇게 코드가 나와요. 오른쪽에 보면은 런 HTML이라고 써져 있는 어떤 코드가 나옵니다. 이제 HTML 개념을 이해하셨으니까 이거가 뭔지 알겠죠? 마우스를 움직일 때마다 이게 어느 영역을 표현하고 있는이 프론트엔드 코드구나라는 걸 이해할 수가 있습니다. 그래서 요거 있거든요.요 버튼.요 버튼을 누르면 렇게 특정 영역을 이렇게 지정할 수도 있습니다. 예를 들어 뉴스의 제목을 이렇게 클릭해 볼게요. 그러면은이 스펜이라는 태그 안쪽에 미르엠 정시 출시 뭐 이런게 들어가 있죠. 요거를 지울 수가 있습니다. 놀랍게도. 그리고 조코딩 채널 구독자 뭐 70만 달성 이렇게 치고 엔터를 누르면 와 실제로 웹사이트가 바뀌어 버립니다. 그래서 기사를 조작을 해 버릴 수가 있습니다. 다 됩니다. 뭐 이미지 이런 것도이 이미지 말고 뭐 이런 거 바꿔 볼게요. 여기서 이미지를 마우스 우클릭 해 가지고 이미지 주소 복사가 있거든요.이 주소를 복사해서 여기서 25:24 이미지에 요런 주소가 들어 있습니다. 얘를 더블 클릭하고 SRC 안에 다운표 안에 얘를 붙여 놓으면은 제 사진이 들어갑니다. 와 HTML만 이해해도 이렇게 해킹이 가능합니다. 아 진짜 해킹인 줄 아시는 분들 많은데 좀 소개를 드리자면 그 지금 한 행위는 뭐냐면 네이버 뉴스 기사를 막 조작했죠. 그러면 얘는 프론트엔드 단에서만 이렇게 조작을 한 겁니다. 그니까 백엔드는 안 걸어들렸잖아요. 그래서이 구조가 어떻게 돼 있냐면 요런 식으로 돼 있습니다. 그래서 결국에 어떤 뉴스 기사를 조작한 제 컴퓨터의 인터넷 브라우저는 여기 있고이 프론트엔드 부분을 제가 조작한 거잖아요. 딴 사람들을 어떻게 접속하냐면 백핸드로 들어가서 받아오니까 사실 여기에 있는 정보가 털리지 않으면 얘는 그냥 저 혼자 프론트엔드만 바꾼 겁니다. 요거는 제 화면만 바꾼 거다. 딴 사람들은 영향이 없습니다. 딴 사람들은 그냥 똑같이 접속을 하겠죠. 그래서 프론트엔드를 바꾸면 이걸 바꿀 수 있다. 그래서요 정도로 이렇게 소개를 드릴 수 있을 것 같고요.이 CSS라는게 아까 꾸미는 거다라고 말씀드렸는데 HTML로 이렇게 사과라고 글씨를 브라우저로 표현했으면 요거를 CSS라는 문법을 통해서 H1 클래스는 컬러를 레드로 바꿔라라고 이런 코드를 입력하면 요게 동작해 26:25 가지고 이렇게 실제로 수행이 됩니다. 그래서 이런 식으로 가능합니다. 아이디라는 걸 지정해 가지고이 애플이라는 아이디를 레드로 바꾸고 그레이라는 아이디를 퍼플로 바꾸면 얘가 요렇게 반영되고 얘가 요렇게 반영되고 요런 식으로 동작을 합니다. 그냥 큰 개념만 이해하시면 돼요. 이거 문법 필요 없습니다. 그냥 CSS를 이용하면은이 요소를 요렇게 바꾸고 요거를 요렇게 바꾸고 하는게 가능합니다. 그다음에 이제 자바스크립트 들어가 볼 텐데 자바스크립트는 말 그대로 동작을 처리한다고 말씀드렸잖아요. 자바스크립트로는 뭘 할 수 있냐면 브라우저를 직접 조작을 하거나 HTML CSS를 변화시킬 수가 있습니다. 이렇게 두 가지 역할을 수행합니다. 해서 경고창을 띄워 줘 하면은 이렇게 버튼 클릭하면 경고창이 나오는 거 요런 거 만들 수가 있고요. 주소창을 구글닷컴에서 네이버닷컴으로 옮겨줘 하는 거. 그 새로 고침해 줘. 뭐 뒤로 가기 해 줘. 앞으로 가기 해 줘. 요런 거를 이제 자바스크립트가 수행할 수 있고요. HTML, CSS 이것도 변화를 시킬 수가 있습니다. 그래서 버튼을 클릭했을 때 제목이 뭘로 바뀐다. 요런게 이제 자바스크립트의 역할이다라고 이해하시면 거의 큰 그림은 다 이해하신 겁니다. 이벤트라는 개념도 이해하시기 어렵지 않습니다. 이벤트라는 걸 이용해서 브라우저나 HTML CSS 변화를 시킬 수가 있는데 이벤트가 발생하면 27:27 이렇게 해라라는 거를 어떤 조건으로 설정을 해 둘 수가 있습니다. 예를 들어 버튼을 클릭했을 때 사이트가 파란색으로 바뀐다 이런 거 있잖아요. 이런 걸 이제 이벤트라고 하는데 요런 발생하는 거를 요거를 잡아서 자바스크립트로 변화를 시키는 요런 행위들을 할 수 있는게 이제 자바스크립트라는 언어입니다. 네. 요것까지 이해하시면 이제 프론트엔드 거의 사실상 끝났다라고 보시면 될 것 같습니다. 좀 착각하시는 분들이 있어요. 자바에서 뭘 추가하면 자바스크립트인 거 아닌가? 뭐 이런 느낌으로 생각할 수가 있을 것 같은데 아예 다른 겁니다. 자바스크립트는 이제 인터넷 브라우저 요렇게 조작하는 요런 용도로 사용되는 이런 언어인데 자바는 그냥 따로 만들어진 아예 다른 언어예요. 비율를 해 보자면 햄이 있는데 햄스터가 앞글자가 햄으로 갔잖아요. 근데 햄과 햄스터는 아예 다르잖아요. 약간 그런 개념입니다. 그냥 이름이 비슷하다라고 이해하시면 좋을 것 같습니다. 그럼 여기까지 이해하시면 이제 프론엔드의 그 큰 개념은 사실상 다 이해하신 거라고 보시면 되겠습니다. 그래서 하나 새로 만들어 볼게요. 인덱스.html HTML 요거 코드 있잖아요. 요거 불러와 가지고 이젠 좀 이해되시죠? 자세히 보면은 여기에 스타일이라는 태그 안에 여기 CSS 그 꾸미는 문법이 들어가 있습니다. 칼라는 샵 2 아 색깔을 뭘로 입력한다? 28:29 백그라운드는 요런 색으로 입력하고 폰트는 이렇게 한다라는 그 느낌이 이제 이해되시나요? 이제 바이브 코딩 시대입니다. 그게 느끼면 됩니다.이 느낌이 느껴지시면은 성공하신 겁니다. 그리고 아직 자바스크립트 안 들어가 있습니다. 그럼 자바스크립트가 들어간 걸 한번 만들어 볼게요. 채치피pt 다시 들어오세요. 이제 코딩은 다 채치피pt 시킬 겁니다. 구체적으로 이번에 좀 시켜 보겠습니다. 여러분은 지식이 있으시니까 구체적으로 입력하실 수가 있습니다. 예를 들어 인덱스.html 파일 안에 버튼을 누르면 로또 번호를 추천해 주는 웹사이트 코드를 만들어 줘. 네. 이거 지금 막 제가 그냥 생각해서 만든 겁니다. 버튼을 누르면 이게 자바스크립트가 동작하겠죠. 뭘 누르면 뭐가 바뀐다 이런 거니까 누르면 실제로 만들어 줍니다. 그래서 요렇게 자인덱스.html 파일 안에 로또 번호 추첨해 주는 웹사이트 직접 만들어 줬습니다. 여기 보니까 이게 CSS 문법이다라는 거 좀 느껴지시나요? 아, 스타일이라는 거 태그 안에는 CSS 문법이 들어가는구나라고 이해하시면 좋을 것 같고요. 아래쪽에 또 보시면은 스크립트라는게 있습니다. 스크립트 안에 요런 식으로 뭔가 펑션, 약간 29:30 함수 이런 말이거든요. 동작하는 어떤 펑션하는 어떤 작업들이 들어가 있다라는 좀 느낌만 받으시면 됩니다. 그래서 아,이 코드가 눌렀을 때 뭐가 동작하거나 클릭했을 때 변화를 주거나 하는 프로그래밍 로직이 여기 들어가 있구나라고 생각하시면 되겠습니다. 그래서 이렇게 HTML, CSS, 자바스크립트를 하나의 파일 안에 다 넣을 수가 있어요. 이런 식으로 스크립트 태그 안에는 자바스크립트 문법을 넣으시면 되고 요걸 이용해서 코드 복사를 해 가지고 여기에 컨트롤 A 컨트롤 A가 전체 선택입니다. 이걸 다 지우고 싹 다 지우고 채치T가 새로 만들어 준 걸로 붙여 넣기 하고 저장을 하시면 이제 이렇게 오 갑자기 이제 로또 번호 추첨기라는 사이트가 만들어졌어요. 번호 추천 받기를 누르면 와 이렇게 번호가 나오게 됩니다. 바뀌어요. 누를 때마다 자 이제 자바스크립트를 아시니까 이해하셨죠? 이렇게 꾸미는 거 CSS, 뼈대 잡는 거 HTML, 누르면 바뀌는 거 자바스크립트. 그래서 이런 웹을 채티피티 시켜 가면서 만들 수가 있다. 조금 아쉬운게 하나만 나오잖아요. 한 다섯 개 게임이 한 번에 나왔으면 좋겠다라는 어떻게 바꾸고 싶다라는 생각이 들잖아요. 그러면 이거를 이제 코딩을 사람이 할 필요가 없습니다. AI한테 시키면 됩니다. 그 채치T 30:30 들어가서 이전에 채팅 내역 있잖아요. 채팅 내역을 열어 가지고 네. 여기에다가 우리가 대화한 내역이 이렇게 남아 있잖아요. 그러니까 이제 AI가 이해하고 있습니다. 지금 뭐 하고 있는지 이해하고 있는 상태에서 버튼을 누르면 로또 번호가 한 번에 다섯 개씩 나오도록 수정해 줘라고 좀 더 구체적으로 써 보겠습니다. 요런 식으로 이렇게 한글로 써 가지고 누르면은 다섯 게임 추천해 줘라고 시키는 대로 바꿔 줍니다. 아까 소개드렸듯이 어 뭐 해 줘, 딸깍 뭐 해 줘 딸깍 하면은 다 만들어 줍니다. 그냥 대충 어떤 구조로 되어 있고 큰 그림만 이해한 상태에서 누르면 됩니다.네 그렇기 때문에 이제 코딩이 어렵지가 않죠. 다 나왔으니까 코드 복사를 해 보겠습니다. 마찬가지로 요거 인덱스. Hmm 싹 지우고 컨트롤 V하고 고쳐 준 코드로 바꾸고 저장하고 열어 보겠습니다. 자, 그러면 오, 이제 다섯 게임으로 바뀌었어요. 추천 받기. 와, 다섯 개가 한 번에 나옵니다. 보너스 번호 포함도 오너스 번호 포함해서 한 번에 나옵니다. 원하는 대로 다 바꿀 수 있습니다. 그래서 요렇게 어렵지 않다. 프런트엔드 단에서 돌아가는 건 다 만들 수 있습니다. 요걸로. 이걸로 다 만들 수 있는데 이제는 여기서 조금 편리해지는 걸 추가할 뿐이죠. 그다음에 이제 다음 진도를 나가 보겠습니다. 다음 진도는 더 31:30 재밌습니다. 배포를 들어가 보도록 하겠습니다. 지금 우리가 만든 거 그냥 내 컴퓨터에서 돌아가요. 얘를 클릭해야지만 사이트가 열리잖아요. 그래서 실제로 여러분들 만드신 걸 주소를 보면은 요렇게 돼 있습니다. C드라이브의 조코딩에 인덱스. Hm 요런 식으로 돼 있어요. 어, 주소가 인터넷 주소가 아니네라고 생각이 들잖아요. 왜 그러냐면 얘는 내 컴퓨터 안에 있는 겁니다. 그래서 이거를 사람들이 쓰게 하려면 아, 한 세 가지 방법이 있겠네요. 내 컴퓨터를 들고 다닙니다. 사람들한테 어, 제가 만든 사이트 보세요 하고 컴퓨터를 직접 자, 제 사이트 보세요. 이렇게 나누면은 사람이 노트북을 들고 이동을 해야 되잖아요. 딴 사람이 접속하기가 어려워요. 그렇기 때문에 두 가지 방법이 있습니다. 크게. 일단 내 컴퓨터에 만들어 놨잖아요. 이거를 서버로 만들어요. 그래서 사람들이 내 컴퓨터로 접속해 가지고 가져갈 수 있게 만들 수가 있습니다. 아니면은 외부 컴퓨터를 빌려 가지고 거기다가 웹사이트를 런칭하고 그거를 다운받아 가게 할 수도 있죠. 그래서 하나씩 볼게요. 일단 내 컴퓨터를 연다고 하면은 약간 복잡합니다. 내 컴퓨터가 서버가 되는 겁니다. 얘를 서버로 만들어요. 그러면은이 IP 주소가 있거든요. 주소를 알면은 딴 사람들이 내 컴퓨터로 들어와서 이걸 볼 수가 있어요. 웹사이트를 내 서버가 이제 백엔드가 되는 거고 사람들이 요걸 받아가는 겁니다. 그래서 누구나 제 32:31 컴퓨터에 다 접속할 수가 있어요. 그러면 좀 불안하겠죠? 해킹 당할 수도 있을 것 같고. 아니면은 내 컴퓨터가 만약에 꺼졌다 내 사이트를 더 이상 못 들어가잖아요. 그러니까 컴퓨터를 항상 켜 놔야 됩니다. 그래서 아 너무 불편해요. 내 컴퓨터에서 돌리려면. 그래서 요즘에 이런 방법을 잘 안 씁니다. 요즘에 많이 하는게 클라우드라는 걸 많이 이용하죠. 아마 요런 거 한번 보신 적 있으신가요? 뭐 미국 데이터 센터를 막 짓는다 뭐 이런 얘기 많잖아요. 그래서 요런데 막 큰 데다가 이렇게 요런 시설을 짓습니다. 이렇게 전문적으로 관리하는 컴퓨터들이 있습니다. 컴퓨터 오래 틀어 놓으면 따뜻해지거든요. 그래서 얘를 냉각도 시키고 뭐 환기도 시키고 하면서 컴퓨터를 24시간 365일 내내 돌리는 이런 데이터 센터들이 있습니다. 그래서 요런 데다가 컴퓨터 하나 빌려요. 그래서 여기에 HTML 파일을 올린다. 이게 이제 가장 초보자들이 접근하기 쉬운 방법입니다. 그러면 이런 걸 운영하는 기업들이 되게 많을 거잖아요. 그래서 요런 거를 하는 기업들이 이제 클라우드 기업들이고 그래서 막 영화 같은데 보면 해커들이 여기 들어와 가지고 막 요거 해킹하고 막 하는 경우 많잖아요. 이게 다 내 컴퓨터가 아닌 다른 데다 컴퓨터 켜 놓고 그걸로 서빙하려고 쓰는 거예요. 그래서 여기서 털면 이제 진짜 서버에 있는 회원나 막 개인 정보 이런 거 싹 털어갈 수 있겠죠. 여기서 털면은. 아무튼 요렇게 서버라는 개념 이해를 33:32 하셨으면 이제는 배포하는 개념을 이해하실 수가 있습니다. 그러니까 내 컴퓨터를 항상 켜두기 어려우니까 외부 24시간 돌아가는 어떤 클라우드 서버를 빌려 가지고 여기에 HTML 파일을 싹 얹어 놓게 되면 이제이 HTML은 누구나 외부 서버로 들어와 가지고 받아가니까 뭐 내 컴퓨터는 이제 털릴 일이 없죠. 그래서 딴 사람들이 요렇게 접속해 가지고 내 웹사이트를 이용할 수가 있습니다. 그러면 요렇게 올리는 행위를 이거 배포한다라고 합니다. 그래서 대표적으로 아마 많이 들어보셨을게 AWS가 뭐 클라우드 사업한다 이런 거 많이 들어보셨죠? 아마존 웹서비스 아니면 뭐 마이크로소프트도 애저 해 가지고 클라우드 브랜드가 있고 구글 클라우드 이런 클라우드 기업들이 다 이런 거 하는 겁니다. 그 외에도 네트리파이 버셀 뭐 클라우드플레어 페이지 뭐 등등 되게 많습니다. 요런 거 운영하는 데가 다 요런 기업들이다. 이제 직접 배포를 해 보도록 하겠습니다. 클라우드 업체 중에 저희는 요거 쓸 겁니다. 클라우드 플레이어 페이지스라는 거를 쓸 겁니다. 수업 자료 들어가 보시면 여기에서 배포 쪽에 클라우드 플레이어 요거 주소 있죠? 여기에 가입하시고 클라우드 플레어 페이지스라는 곳이 있습니다. 여기가 이제 웹사이트 올리는 곳입니다. 아무튼 지금 여러분들 하셔야 될 거는 가입하기. 아, 이메일로 회원 가입하실 수가 34:32 있네요. 그래서 이메일 주소 자주 쓰시는 뭐 구글 계정이나 이런 거 Gma 있으시죠? 이메일이랑 비밀번호 입력해 가지고 회원 가입 진행하시면 되겠습니다. 네. 여러분들 회원 가입하실 시간을 좀 드리도록 하겠습니다. 이걸 왜 쓰냐? 이걸 왜 쓰는지가 가장 중요한데 다른 서비스도 많거든요. 그래서 뭘 쓰던 사이 상관은 없는데 클라우드 플레이어가 어떤게 가장 강점이냐면 제가 글로벌과 범용성, 확장성 이런 거를 고려한다고 말씀드렸잖아요. 이게 가장 좋은게 공짜 플랜인데도 프리 플랜으로도 un리미it드 밴드위을 제공합니다. 이런 데가 지금 클라우드 플레어밖에 없거든요. 아무리 전 세계 인구가 내 사이트가 너무 유명해져 가지고 우리 사이트로 다 들어간다 하더라도 클라우드 플레어가 버텨 준다면 기용은 공짜입니다. 그래서 가입하시면은 메인 페이지가 요렇게 뜰 거고요. 왼쪽 메뉴 보시면 빌드 아래에 컴퓨트 앤 AI, 워커스 앤 페이지스가 있습니다. 여기에 이제 페이지가 있기 때문에 여기에 이제 웹사이트를 올릴 수가 있습니다. 그다음에 오른쪽에 크리에이트 어플리케이션이라는 버튼이 있습니다. 그래서 요거를 누르면은 요런 식으로 화면이 뜹니다. 여기 이용하시면 안 됩니다. 여기는 워커스라는 걸 배포하는 곳이라서 사용량이 막 60억 인구가 한 번에 들어가 하면 돈이 많이 나올 수 35:32 있습니다. 공짜로 하고 싶다. 정적인 어떤 HTML만 딱 배포를 하고 싶다라고 한다면 여기 looking for플이 페이지에서 겟스타ed 버튼이 있습니다. 요거를 클릭해 주셔야 페이지가 디플로이가 됩니다. 요걸 눌러 주셔야 됩니다. 그다음에 드래앤드롭스 여기서 겟스타드를 눌러서 프로젝트 네임 입력해 주시고 뭐 프로덕트 빌더 테스트 요거는 영어로 그냥 편하신 거 입력해 주시면 되고 크리에이트 프로젝트 눌러 가지고 여기에다가 파일로 폴더를 올려야 됩니다. 그래서 얘만 들어가면 안 들어가고요. 그래서 마우스 클릭 세 폴더를 만들어 주셔서 이걸 여기에 넣습니다. 이름은 반드시 또 인덱스.html이어야 HTML이어야 돼요. 얘를 요렇게 올려야 됩니다. 요렇게 올린 다음에 이거를 디플로이 사이트 누르면은 리전 어스의 전 세계 배포가 다 되고요. 프로젝 들어가서이 비짓 눌러 보시면 페이지스라는이 경로에 이렇게 배포가 잘 된 거를 볼 수가 있습니다. 전 세계 무제한 트래픽 공짜입니다. 그래서 지금까지 여러분들 뭐 하신 거냐? 내 컴퓨터에서만 돌아가던 프론트엔드 요거를 외부 24시간 돌아가는 클라우드 플레어라는 클라우드 서비스에 얹어 가지고 전 세계 누구나 다 접속해서 내 사이트를 이용하실 수 36:34 있는데 가장 중요한 건 공짜입니다. 그래서 이런 식으로 웹 서비스를 만들면 공짜로 운영할 수가 있는 겁니다. 이런 화면 혹시 보신 적 있으신가요? 최근에 뭐 채지T라던가 뭐 웬만한 서비스는 이렇게 장애가 났었거든요. 클라우드 플레어가 이렇게 맛이 갑니다. 그러면 전 세계 인터넷이 마비가 돼요. 네. 그게 다 요런 구조 때문이다. 소개해 드릴 수 있을 것 같고요. 그래서 이런 클라우드 플레이어가 하나 무너지잖아요. 다 안 됩니다. 인터넷 세 개가 차 생각보다 취약합니다. 아무튼 여기까지 이해되셨다면 이제는 고급 개발로 갑니다. 지금까지 너무 상남자의 개발로 했습니다. 아무것도 설치 안 하고 오직 메모장과 채피pt만 이용해서 요렇게 했었죠. 물론 이걸로 모든 걸 만들 수 있습니다. 그래도 이제 좀 더 효율적으로 하면 좋잖아요. 짝가는 편의성을 추구하자. 일단 파이어베이스 스튜디오라는 것을 사용하도록 하겠습니다. 뭐 직접 내 컴퓨터에 설치해도 되긴 한데 아무래도 이제 컴퓨터마다 환경이 너무 다르고 뭐 용량도 부족하고 뭐 아무튼 뭐 문제가 되게 많이 터질 것 같아서 그냥 똑같이 클라우드 환경에서 개발을 진행할 수 있는 파이어베이스 스튜디오라는 거를 이용해 보도록 하겠습니다. 그래서 요런 통합 개발 환경을 이용할 겁니다. 그래서 아이디라고 부르는 통합 개발 환경을 이용할 건데 개발 편리하게 해주는 37:35 어떤 도구들이 모여 있다. 그래서 요거 이용하실 거고요. 그다음에 기터브 회원 가입 진행해 주시면 되겠습니다. 인터뷰는 코드 저장소의 역할입니다. 개발자들이 내 코드를 열심히 만들어 가지고 저장하고 버전 관리를 할 수 있게 해 주거든요. 좀 구체적으로 좀 소개를 해 드리자면 기터라는 거 이전에 사실 기시라는 개념이 있습니다. 깃이 뭐냐면 버전 관리의 도구입니다. 예를 들어 뭐 졸업 논문 이런 거 쓰면은 계속 수정 사항이 생기죠. 코드도 똑같습니다. 아까 뭐 다크 모드 추가한 버전 이런 거를 계속 만들다 보면 헷갈립니다. 언제 어디서 고쳤고 이게 무슨 버전이지라는 거를 관리하는 버전 관리 도구가 기시라는게 있는데 요거를 이제 클라우드에 얹어 가지고 코드 저장하는 곳이 기터브입니다. 그래서 내 컴퓨터에 있지 않고 외부에 어디 저장해 놓은다라는 개념입니다. 기터브가 네. 파이어웨이 스튜디오 가입해 주시고 그다음에 기터브 가입해 주시고 두 개를 연동해 가지고 쓰도록 하겠습니다. 이제 회원 가입을 하셨다 하시면은 이제 진행을 해 보도록 하겠습니다. 그러면 요렇게 접속이 가능합니다. 일단 파이어베이스 스튜디오 로그인을 해 보시면 여기에 뉴워크 스페이스라고 있어요. 클릭하시면 이렇게 하나의 개발 환경을 열 수가 있는데요. 네. 저희는 심플 HTML 저희는 지금 HTML만 배웠죠. HTML, CSS, 38:37 자바스크립프트 요렇게 이용할 수 있다고 하니까 요거를 선택해 주시고요. 심플 HTML 선택하면은 이렇게 워크스페이스를 만들 수가 있습니다. 그래서 하나 만들어 주도록 하겠습니다. 이건 이름 아무렇게나 정하면 됩니다. 프로덕트 빌더 위크원 정하고 크리에이트를 해 보겠습니다. 그러면은 오, 이런 아이 화면이 인터넷 브라우저 안에 들어가 있습니다. 혹시나 이제 내 컴퓨터에서 해보고 싶다. 난 클라우드 이용하고 싶지 않다. 하시는 분들은 비주얼 스튜디오 코드라고 있어요. 요게 누구나 다운받을 수 있는데 여기로 접속해 가지고 다운로드 4 윈도우 있죠? 요거를 누르거나 뭐 먹기면 이걸 설치하셔도 사실은 똑같습니다. 요렇게 설치해 가지고 여기서 작업하는 거랑 똑같은데 귀찮으니까 클라우드 개발 환경 요걸로 들어가 보도록 하겠습니다. 네. 아무튼 여기까지 들어가셨으면 세팅이 다 되신 겁니다. 사실 약간 불안하기도 하거든요. 지금 시기가 2026년 1월 10일이거든요. 아마이 강의가 편집돼서 미래에 보시는 분들 있을 거잖아요. 언제 없어질지 모르기 때문에 혹시나 없어져 계시다 하면은 기터브도 가입했잖아요. 기터브 코드 스페이스라는 것도 있습니다. 혹시나 이게 구글이 서비스를 접었다. 네. 기터브에 들어가 보시면 비슷한 서비스가 있습니다. 그래서 요거 쓰셔도 사실 상관은 없습니다. 어떻게 39:38 돼 있냐? 메뉴를 눌러 보면 폴더 구조가 나옵니다. 인덱스. HTML. 어, 요거는 이제 뭔지 알겠죠? 아까 배웠으니까. HTML 파일이 있고요. 아, 여기는 아예 자바스크립트 뭐 CSS가 따로따로 돼 있어요. 이렇게 따로따로 한 경우에는 스타일.css 파일을 이렇게 링크로 불러온다라고 돼 있는데 사실 뭐 같은 개념입니다. 여기에 직접 써도 되고. 자바스크립트도 스크립트 안에 메인. js를 불러온다라고 돼 있는데 결국 같은 개념입니다. 예. 그래서 요렇게 파일하고 편집할 수 있는 거 똑같죠. 심지어이 오른쪽에 보면 재미나이도 붙어 있습니다. 구글에서 만든 거라서 재미나이랑 연결해 가지고 바로 수정을 할 수도 있습니다. 그냥 하나 대표적으로 해 보자면 요런 것도 됩니다. 인덱스.html 파일을 로또 번호 추첨 사이트로 만들어 줘. 시켜 보면은 그럼 알아서 수정해 줘요. 어, 로더 넘버 제너레이터로 바뀌었죠? 요거를 보려면 어떻게 해야 되냐? 이것도 AI 시키면 되긴 합니다. 웹 브라우저로 열어 줘. 어, 이렇게 런 누르면 열어 줍니다. 어, 이게 터미널이라게 열렸는데 요거부터 약간 소개를 드리면 여기서 이걸 눌러서 터미널에 뉴 터미널이죠? 요걸 누르면 요런 식으로 명령어를 입력할 수 있는 창이 40:38 나옵니다. 그래서 사실 코딩은 요거 구성만 있으면 모든 걸 만들 수 있는 좀 고급 개발에 대한 어떤 준비가 다 된 거예요. 터미널 있고 코드 편집기 있고 파일 탐색기 있고 AI 있고 하면은 이제 모든 걸 할 수 있죠. 이제 오케이 프로시드 하고 Y 누르라고 하는데 Y 해가지고 엔터 누르면 서버 설치해 가지고 오 켜 줬어요. 얘를 컨트롤 클릭을 해 보시면 오 실제로 사이트가 열립니다. 얘는 애초에 지금 클라우드에서 돌아가잖아요. 그렇기 때문에 주소도 알아서 나와요. 내 로컬 주소가 아니라 그 클라우드 주소로 기본적으로 나옵니다. 그러면 요런 식으로 하면 이제 모든 서비스를 이걸로 다 만들 수가 있겠죠. 근데 여기서 좀 쓸데없는 거 지울게요. 여기 리드미.md MD 이거는 읽어 주세요. 뭐 이런 템플릿입니다. 그래서 이거 딜리트 키를 누르시거나 마우스 우클릭 딜리트 퍼넌트ly이 연구적으로 지운다 이건데 요걸 누르면은 지워집니다. 요것도 다 지울게요. 이거 다 필요 없어요. 이거 재미나이.md 얘는 이제 재미나이가 이해할 수 있는 어떤 명령어 어떤 모음인데이 설정 모음 이런 거 필요 없습니다. 이거 그냥 기본도 똑똑해요. 그러면 남은 거는 HTML, CSS, 자바스크립트밖에 없죠. 이것만 있으면 다시 되긴 합니다. 이제 그러면 아까 했던 거를 좀 더 단순화해서 할 수가 있겠죠. 41:39 그래서 요걸로 이제 작업을 할 거고요. 근데 이걸로 진행하셔도 되는데 이게 약간 불편해요. 요즘 좀 더 유행하는 방법이 있어서 그걸로 진행해 보려고 합니다. 그래서 제미나이를 일단 정지하고 요거 누르면 다칠 텐데 터미널에서도 컨트롤 C를 누르면 이렇게 종류가 되거든요. 플러스 누르면은 이렇게 새로 열리기도 하고 새로 열면은 요런 식으로 깜빡깜빡 하면서 명령어 여기다가 입력할 수 있고 요런 식으로 구성이 된게 이제 기본 터미널이 열린 겁니다. 여기에서 AI를 쓸 수도 있거든요. 여기에 이제 AI를 깔아서 진행을 해 볼 건데 강의 자료 여기로 들어와 보시면 고급 개발 쪽에 AI를 요렇게네 가지 정도 넣어 놨습니다. 실제 개발자들이 이거 다 씁니다. 약간 어려울 수 있는데 그래도 한번이 설정이 되고 나면 그다음부턴 딸각이기 때문에 한번 설정 한번 마음 크게 먹고 오늘 한번 진행해 보도록 하겠습니다. 요런 것들이 있습니다. 얘는 뭐냐면 요즘 AI 시대 되면서 복사 붙여 넣기를 굳이 해야 되나? 아니면 이거 왔다 갔다를 해야 되나 해서 최대한 어떻게 하면 편리할까를 고민 고민하다가 나온 것들이 요런 툴들이 있습니다. 오늘 기준으로는 클로드 코드가 가장 대중적으로 개발자분들이 많이 쓰시는 그런 개발 도구인 거 같고요. 근데 이거를 안 42:40 쓰시더라도 뭐 재미나이나 채치피티나 어느게 더 좋아질지 모릅니다. 지금 현시점 가장 좋은 거 쓰시면 됩니다. 저는 어떤 걸 쓸 거냐?이 이 공짜를 기준으로 전 봤습니다. 그래서 공짜 제공량 중에 지금 가장 많이 주는게 저는 재미나의 CLI가 많이 주더라고요. 그래서 요거를 이용해 보도록 하겠습니다. 혹시나 진짜 아 나는 좀 제대로 해보고 싶다. 지금 시점 기준에서는 클로드라는 곳에서 클로드 코드라는 걸 만들었는데 요거가 좀 지금 현시점 성능은 가장 좋습니다. 제미나의 CLICOM이라는 대로 들어가 보시면 이렇게 설치할 수 있는 명령어가 나옵니다. 왜 이게 있냐? 요거를 복사해 가지고 여기 터미널 있죠? 아까 터미널 여는 거 소개드렸는데 여기에다가 마우스 우클릭하면 붙여 놓기가 됩니다. 그래서 여기 설치하는 명령어가 요렇게 들어가거든요. 여기서 엔터를 누르면 설치가 됩니다. 네. 요런 식으로 깔면은 좀 편리하게 설치를 할 수도 있습니다. 설치되셨나요? 그러면 이제 제미나이 CLI를 사용할 준비가 된 겁니다. 어 실행하는 명령어가 뭐였지라고 까먹었거든요. 근데 어떻게 하면 되냐? 요런 식으로 물어보면 돼요. 실행은 명령어 뭐 입력하면 돼? 네. 이런 거 하나씩 다 물어보면 됩니다. 제미나이라고만 치면 된다고 합니다. 요거를 복사해서 43:41 입력해 보겠습니다. 입력하고 엔터 누르면 오 제미나의 CLI를 쓰시겠습니까? 얘는 파이어베이스 스튜디오에 쓰기 때문에 요런게 떴어요. 연결하시겠습니까? 연결하고요. 네. 그다음에 이제 로그인을 해야 이제 좀 사용량이 기본 무료 사용량이 꽤 있거든요. 그래서 로그인을 해 주겠습니다. 로그인 with 구글이라고 돼 있는 거에서 엔터를 누르시면 됩니다. 엔터 누르시면 네. 구글 로그인할 수 있게 뜹니다.이 링크로 들어가 보시면 이렇게 로그인 할 수가 있거든요. 제 구글 계정으로 로그인해서 로그인을 누르면 이렇게 뜨고요. 요거를 복사해 가지고 여기에 마찬가지로 마우스 우클릭하면은 이렇게 붙여 넣어집니다. 그리고 엔터를 누르면 이제 로그인이 된 겁니다. 와 그러면 이제 재미나의 CLI라는 거를 설치를 한 겁니다. 여기까지 되셨다. 이제는 끝난 겁니다. 진짜 어려운 고지를 오셨다. 혹시나 나는 오픈해야 유료 구독자다. 하시는 분들 있을 것 같아서 이걸 해 봐야겠다 하시는 분들은 수업 자료에 요거 있죠. 오픈 AI 코덱스, CLI 얘도 마찬가지입니다. 똑같이 하면 되는데 인스톨죠? 똑같습니다. 인스톨 명령어 요거 복사해 가지고 요거를 여기다가 마우스 우클릭 하고 엔터 설치가 44:42 됩니다. 이것도 마찬가지로 여기 있죠. 코덱스만 입력하면 된다고 합니다. 코덱스 엔터. 오, 네. 동굴동굴 돌아가면서 이렇게 나오죠. 사인 it잇 채치. 그럼 플러스 프로즈니스 뭐 이런 거 구독하신 분들은 요걸로 요금제 연계해 가지고 쓸 수 있거든요. 명령어가 요걸로 입력하시면 됩니다. 로그인 디바이스. 그럼 요걸로 로그인해 가지고요 엔터 코드를 넣으면 된다고 해요. 해주시면 이제 로그인이 되고요. 어, 네. 이제이 코드 입력 창에는 요거 입력해 주시면 되겠습니다. 아유, 복잡했네요. 이제는 로그인이 돼서 로그인. 이제는 코덱스라고 입력해 주시면 이게 키보드로 방향키로 왔다 갔다 할 수 있거든요. 첫 번째는 알아서 어프루브에서 알아서 진행하는 옵션이고 얘는 하나씩 승인하는 옵션인데 이거 알아서 돌아가도록 하겠습니다. 이렇게 돌아가면 마찬가지로 이제 오픈 AI 코덱스 설정도 됐습니다. 클로드 코드도 마찬가지거든요. 요걸로 들어가서 설치하시면 되고 요걸로 해 볼게요. 그럼요 명령어로네요 명령어로 진행을 하고 그다음에 클로드라고 입력하면 오 이제 45:42 클로드 코드도 설정이 됐습니다. 이거 기본 모드로 그냥 하고 로그인도 마찬가지로 비슷한 과정이죠. 클로드를 구독하셨다 하면은 요걸로 진행하시면 됩니다. 요거를 복사해 가지고 그러면 여기에 클로드 연결하기 승인 하면은 요거 복사해 가지고 여기에 붙여 놓고 엔터를 누르면 설정이 됐습니다. 네. 그래서 기본 설정으로 그냥 두려면 엔터 엔터 하면은 됐습니다. 아 이제 3 4 모두 했네요. 각자 원하시는 거 쓰고 가장 좋은 걸로 쓰면 됩니다. 재미나이 오픈 코덱스 클로드 코드 중에 아무거나 여기에 원하는 걸 입력하시면 됩니다. 여기에 입력하시면 싹 다 만들어 주거든요. 여기까지가 이제 코드 작업하는 어떤 설정은 끝났고요. 그다음에 이제 코드 버전 관리를 하는 걸 연결해야 되잖아요. 그게 이제 기터브랑 연결하면 되는데 기터브랑 연동하고 진행을 해 보겠습니다. 리터브 가입하셨다 하면은 로그인하면 요런 화면이 나오실 겁니다. 그다음에 레퍼 스토리 이미 만드신 분이 있다면 여기에 뉴 버튼이 있을 거고요. 없으신 분들은 상단에 보시면 여기 플러스 버튼이 있습니다. 그래서 크리에이트 뉴가 있거든요. 여기에서 이제 코드를 관리할 저장소를 46:43 만들어 줄 수가 있습니다. 폴더를 만든다라고 생각하시면 좋을 것 같은데요. 플러스를 눌러 가지고 뉴 레포지토리라고 있습니다. 뉴 레포지토리로 그 코드 저장소 하나를 파 주겠습니다. 레포지토리 이름은 프로덕트 빌더 렉처로 만들었고요. 이것만 정해 주시면 되고 공개하려면 이렇게 해야 됩니다. 만약 여러분들이 공개되고 싶지 않은 작업물을 만든다. 이건 딴트하 보면 안 되라고 하신다면은 여기 비셔블리티가 퍼블릭 말고 프라이빗로 하시면 됩니다. 저는 이제 모드가 볼 수 있게 퍼블릭으로 만들어 보도록 하겠습니다. 그래서 크리에이트 레퍼 스토리를 누르면 어 이제 요렇게 저장소가 생겼습니다. 여기에 코드를 올리면 되긴 하거든요. 그래서 연결해 가지고 하면 편하긴 한데 이런 식으로도 올릴 수 있습니다. 크리에이팅 어 뉴 파일 눌러 가지고 직접 파일을 만들 수도 있고요. 아니면 업로드를 해 가지고 요렇게 하면 깃 푸시가 되는 겁니다. 아 나는이 끌어다 하는 그 개념이 좋다 하시는 분들은 여기에 보면은 뭐 이런 거 인덱스.ht hht html 있잖아요. 요거를 다운로드 받을 수 있습니다. 요거를 이렇게 올려도 돼요. 이게 또 귀찮아요. 이게 개발자들 특이 그냥 터미널에서 자동으로 막 연결되는 거 이런 거 좋아하거든요. 이거 안 하고 여기서 연결 해 보겠습니다. 연결 할 텐데 AI 시키겠습니다. 요거 AI 시켜 47:44 보도록 하겠습니다. 재미나이 시켜 보겠습니다. 요거 여기에 지금 작업한 코드 모두 올려 줘. 엔터 누르면 네. 그러면 아 렇게 수행할까요? 그래서 얼로우 원스 요걸 누르면 이제 한 번 호용학기고요. 그냥 알아서 해라고 하면 두 번째 언로우디스 4 세션 하면은이 세션이 켜진 동안은 계속 그냥 알아서 자동으로 합니다. 그래서 자동화를 해 보겠습니다.요 정도는 자동으로 시켜도 되기 때문에 어 이제 기터브 사인인 이제 로그인 해야겠죠. 왜냐면 내 거에 내가 올려야 되니까 로그인 해야 되니까 얼로우 해 주겠습니다.네 요거 코드 또 비슷하죠? 이거 뜨고 로그인하고 코드 1812 1 8 1 295 2 92 25 로그인이 되는 거죠.이 차인장 안 걸어 놓으셨으면 바로 되실 겁니다. 저는 요거 보안 때문에. 네. 오케이. 이제 됐고. 어, 알아서 해줬습니다. 올려줘 하니까 코드가 성공적으로 업로드 코드 새로 고침 해 주면 아, 아주 잘 올라갔습니다. 네. 안 되는 오류 뜨셨다. 바로 얘한테 물어보면 됩니다. 여기다 다 입력하면 다 해결해 줍니다. 이제이 모든 통제권을 48:45 갖고 있기 때문에 뭐 깃까지 연결하셨으면 이제 끝났습니다. 사실상 네. 이제 모든 작업을 한 거 버전 관리까지 다 할 수 있고요. 이제부터는 어떻게 할 거냐면이 아이디에서 작업한 거 기터으로 버전 관리를 할 거고요. 그다음에이 작업한 거를 바로 디플로이랑 여기 연결해 보겠습니다. 워커스앤 페이지 들어와서 크리에이트 어플리케이션을 누르신 다음에 looking for디플로이 페이지라고 돼 있죠. 페이지스 눌러 가지고 겟스타드를 눌러서 겟 리포지토리를 연결을 이렇게 해서 프로덕 빌더 렉처 요거를 선택해 가지고 그다음에 셋업 누르고 메인 브랜치를 저희는 요거 배포할 거고 나머지 아무것도 안 놔두고 세이브 앤 디플로이를 누르면 됐습니다. 이제 배포가 됐고요. 이렇게 배포가 된요 사이트 들어가시면 인터넷에 배포된이 서비스가네 요렇게 바로 연결된 걸 볼 수가 있습니다. 즉 파이어베이 스튜디오에서 작업한 거를 깃업으로 버전 관리도 하면서 얘가 자동으로 클라우드 플레어 페이지스와 연동이 돼 가지고 자동으로 빌드는 것까지 연결을 싹 다 해 놨습니다. 그리고 여기에 배포돼서이 주소로 들어가 보시면 이렇게 지금 로또 버 생성기가 이렇게 나온 걸 볼 수가 있죠. 자, 49:45 여기까지 되셨으면 이제 원하는 거 수정해서 반영하면 됩니다. 예를 들어 지금 여기도 다크 모드, 화이트 모드 없잖아요. 다크 모드, 화이트 모드 기능 추가해서 깃 푸시로 배포까지 진행해라고 해보겠습니다. 명령이 좀 어려운데. 자, 기능을 추가해서 기 푸시로 배포까지 하는 겁니다. 기능 이걸로 코드를 수정해요. 얘가 HTMLCS 자바스크립트를 수정합니다. 재미나이가. 그리고 기스로 배포까지 진행해. 네. 조금 더 간략화해 볼게요.라고 하면은 이게 기능 수정 그리고 배포까지 한 번에 됩니다. 요걸로. 네. 그러면 오 다크 모드 화이트 모드 기능 지금 추가를 하고 있고요. 네. 얘도 얼로우 4D 세션 해 가지고 두 번째 선택해서 알아서 돌아가게 만들어 보겠습니다. 자, 놀랍게도 아까 명령어 딱 한 줄 썼잖아요. 어떤 것까지 됐냐면 다크모드, 화이트보드 전환 기능 추가했고요. 그다음에 기술을 통해서 원격 조장서에 배포하는 것까지 두 개 다 했습니다. 이제는 기터 올리고 뭐 이거 클라우드 플레이어에서 다시 배포하고 이런 거 필요가 없습니다. 바로 배포가 됐죠. 그래서 여기서 50:46 새로고치만 눌러 보시면 다크모드, 화이트 모드 와 기능이 아예 프로덕션에 한 방에 그냥 배포가 돼 버립니다. 자, 저 정리를 한번 해 볼게요. 지금 클라우드 상에서 파이어베이스 스튜디오로 개발 환경을 만드셨어요. 그렇다는 거는 여기서 코딩을 입력할 수 있게 만들어 놨는데 이제 클로드 코드 코덱스 제미나이를 연결해 놨죠. 그러니까 이제 딸깍할 준비를 해 놓은 겁니다. 이제 실제 사이트 배포도 해야 되잖아요. 그거를 기터브라는 저장소를 통해서 체계적으로 코드를 관리하는 거. 코드 저장소랑 연동을 해 놨고요. 그리고 기터브랑 클라우드 플레어 페이지스를 통해서 이제 실제로 배포하는 거, 내 사이트를 전 세계 누구나 볼 수 있게 만드는 거 이것까지 다 연동을 해 놨습니다. 여러분들 할 일은 이것뿐입니다. 뭐 해 줘, 딸깍, 뭐 해 줘, 딸깍만 이제 반복하시면 됩니다. 좀 아시는 분들 위해 설명드리면 이제 메인이라는 브랜드가 있잖아요. 여기에 이제 배포를 하면은 이게 바로 반영이 되고 대부 브랜치를 만들어서 배포를 한다라고 하면은 배포가 되긴 해요. 근데 이제 메인 사이트에 안 되고 이제 개발용 사이트에 배포가 됩니다. 근데 이런 배포도 사실 딸각으로 하면 되기 때문에 이거 뭐 굳이 알 필요 없습니다. 그냥 해 줘 하면은 얘가 알아서 이렇게 다 해 줍니다. 저희가 재미나에 연결 했잖아요. 그리고 클로 51:47 코드 이거 세 개 다 연결 했는데 코딩 도구가 뭐가 좋아질지는 발전에 따라서 그냥 제일 최신 거, 제일 좋은 거 하시면 됩니다. 그래서 이거 하나로 이제 고정해서 쓰지 않으셔도 되고 한 1년 뒤에 보면은 뭔가 없어져 있을 수도 있습니다. 갑자기 뭐 새로운게 나와 가지고 요즘 대세는 A 해가지고 새로운게 나오고 나머지 다 없어지고 요런 일도 있을 수가 있습니다. 그렇기 때문에 그냥 최신 소식은 조코딩 채널 구독하시면 가장 최신 소식 다 알려 드리니까요. 제일 좋은 거 하시면 됩니다. 이제 외부 서비스 활용 진행을 해 보겠습니다. 저희는 이제 외부 서비스를 붙여서 활용하는 방법을 네, 적용해 보도록 하겠습니다. 저희는 지금 프론트엔드 개발에 대해서 공부를 했습니다. 프론트엔드를 만들어서 그거를 실제로 세상에 공개하는 걸 배웠어요. 근데 백엔드도 만들고 싶잖아요. 뭐 AI 딸깍한번 만들어 주긴 하는데 이거는 조금 더 복잡해요. 뒤에 배우긴 하겠지만 약간 더 복잡해 가지고 어 이런 거 누가 만들어 놓은 거 그냥 붙일 수 없나라는 생각이 좀 들 수 있잖아요. 그런 걸 할 수가 있습니다. 외부 서비스를 내 서비스에 붙여 가지고 쓰는 경우가 너무 많아요. 이게 워낙 활발하다 보니까 약간 요런 일도 있어요. 자바스크립트 MPM 마비 사태가 한번 일어난 적이 있었는데 갖다 쓰는 거에서 레프트 패드라는 이런 라이브러리가 있었습니다. 얘가 뭐냐면 공백이나 52:48 특정 문자를 추가하는 기능입니다. 갖다 써야지 하고 다 레프트 패드라는 거를 굴러와서 쓰기 이런 거 되게 많이 했거든요. 하다 보니까 다 여기에 의존하고 있었어요. 레프트 패드라는 곳에. 결국에는 그 뭐 소유권 이전 뭐 이런 것 때문에 MPM에 공개했던 패키지를 전부 삭제를 해 버렸습니다. 그것 때문에 다 무너지는 일이 있었습니다. 네. 이런식이 되게 많아요. 그래서 개발자들은 직접 모든 걸 만들지 않습니다. 그러다 보니까 개발을 물론 다 배울 거예요. 그 전에 외부 서비스를 활용하는 방법도 배워 보도록 하겠습니다. 그래서 가져오는 방법도 종류도 너무 많은데 대표적으로 API 뭐 이런게 있습니다. 용어는 지금 좀 어려우니까 모르셔도 되고 그냥 이런 거를 가져다 쓸 수 있는 겁니다. 쉽게 말해서 아예 한국어로 만들어 놓은 것도 있더라고요. 가져다 쓸 수 있는 API 모음집 그래서 오픈 API라고 해서 누가 이게 백엔드 이런 걸 되게 잘 만들어 가지고 자, 여러분 쓰세요 하고 이렇게 뿌린 사람들이 있습니다. 목차도 되게 많아요. 뭐 개발 관련된 거 들어가 보면 이런 것도 있네요. 이름에서 연령을 추정하는 거. 이런 기능이 엄청 많아요. 제임스로 하면은 74세다. 약간 요런 수축하는 것도 API로 만들어 가지고 가져다 쓰세요 하고 이렇게 제공해 줍니다. 그래서 오픈된 거 위주로 해 가지고 쭉 보여 주는 사이트가 있는데 요거는 강의 53:48 자료에 다운받아 보시면 있습니다. 그래서 이런 거를 좀 진행을 해 볼 건데 그냥 간단하게 쓰면서도 유용하게 쓸 수 있는게 뭐가 있을까를 생각을 해 봤는데 폼 스프리라는게 있어 가지고 요거 좀 소개해 드리고자 합니다. 요게 어떤 거냐? 뭐 기업 페이지 같은데 보면 요렇게 재유 문의가 있어 가지고 뭐 사업자 등록번호 입력하고 이메일 입력하고 주소 입력해서 확인 누르면 제출되는 거 있잖아요. 이런 폼 같은 거 많이 운영하잖아요. 비즈니스 뭐 메일 쓰기 뭐 이런 거 되게 많이 보셨을 텐데 이런 거를 직접 구현하려면 원래는 백핸드를 만들어야 되거든요. 외부 서비스를 안 갔다 쓴다고 하면은 요런 느낌이겠죠. 사이트를 개발한 다음에 입력 폼을 여기 만들고 요거를 입력받아서 우리가 만든 백핸드 서버에 데이터를 보내서 요거를 저장을 하고 네. 요런 식으로 구현해야 되잖아요. 이거를 백엔들 누가 대신 만들어 줘 가지고 이거를 그냥 우리 거랑 연결한 거예요. 이걸 한번 해 보도록 하겠습니다. 겟스타티드 눌러 가지고 회원 가입 바로 진행을 해 보겠습니다. 로그인 해 보시면 네. 요렇게 나오게 됩니다. 그러면 우리는 폼을 받을 걸 만들어 가지고 연결 하면 되겠죠? 그래서 애드 뉴해서 뉴 폼을 만들어 볼게요. 뉴 폼을 하고 크리트 폼을 해서 어 벌써 주소가 나왔어요. 엔드 포인트라고 하는데 그 54:48 백엔드에 접근을 하려면 어떤 뭐 주소가 있어야 접근을 할 수 있잖아요. 그래서 요렇게 주소를 줍니다. 이거를 요런 식으로 남기면 된다라고 돼 있죠. 그러면 이걸 직접 연결해 볼게요. 재미나이한테 시켜 보겠습니다. 폼 스프리로 재휴 무의 받을 수 있는 간단한 폼 만들어 줘라고 하고 그 엔드 포인트가 필요하겠죠. 왜냐 어디로 보낼지 알아야 되니까. 그래서 엔드 포인트를 요렇게 입력을 해 주겠습니다. 그러면 제유받을 수 있는 간단한 폼 만들어 줘 하고 요렇게 입력하고 엔터요 정도만 시켜 보겠습니다. 어, 지금 됐고. 자, 보면은 어, 이렇게 제유 무늬가 있죠? 제유 무늬. 코드가 잘 동작하는지 확인하고 네. 그냥 배포까지 진행해라고 이렇게 시켜 보겠습니다. 알아서 다 읽고 확인하고 배포하는 것까지 다 진행이 됩니다. 볼까요? 어, 배포 됐네요. 어, 미니어오니까 방금 된 거 같아요. 누르면 오늘 저녁 뭐 먹지? 해 가지고 제유무늬가 있습니다. 자, 이렇게 제유무늬 폼을 받을 수 있는 거 누군가 우리 사이트 방문해 가지고 이렇게 입력할 수 있잖아요. 그 보내기를 누르면 어, 보내집니다. 실제로 제 이메일로 들어가 보면 네, 요렇게 폼이 제출됐습니다. 네, 이메일, 메시지 다 제출이 된 거를 55:49 볼 수가 있죠. 아무튼 그 정도로 이제 바로 만들어졌죠. 백핸드 안 만들어도 그냥 만들어집니다. 너무 쉬워요. 이게 지금 저희 광고 붙이고 뭐 사스 구독하고 이런 거 만들었는데 그것까지 안 하셔도 됩니다. 자, 이거 보겠습니다. 크몽 이게 외주 이런 거 맡기는 서비스입니다. 홈페이지 제작 정확하게 저희 기능 다 구현했어요. 반응형 디자인 딸깍하면 되죠. 그다음에 서브 페이지 이것도 딸깍하면 되는데 놀랍게도 무의학이 저희가 방금 구현한이 기능입니다. 놀랍게도 110만 원짜리 작업 지금 저희가 구현 끝냈습니다. 아무튼 이거를 여러분도 할 수가 있다. 그다음에 댓글 기능 디스커스라고 그 댓글 서비스 제공하는 곳이거든요. 그래서 여기 로그인 하시면 이렇게 나옵니다. 여기에 유 사이트 들어가서 뉴를 누릅니다. 크리e 뉴 사이트 이거는 저는 오건데이션 만들었는데 안 만들었으면 아마 가입하면서 입력할 수 있을 겁니다. 웹사이트 네임 프로덕트 빌더. 네. 이렇게 하고 아 비즈니스 랭귀지 코리안. 네. 이렇게 해서 만들겠습니다, 그다음에 렇게 뜨면은 I don't see my 플랫폼 인스톨 매뉴얼리 요거 있죠?이 아래쪽 내려보시면 요거 있습니다.요 버튼 누르면 직접 설치하겠답니다. 매뉴얼 누른 다음에 네. 그래서요 코드를 복사해 가지고 쓰면 되거든요. 여기 56:49 코드 다 제공해 주니까. 근데 이거 AI가 더 잘해요. 이거 복사해 가지고 파이어베이 스튜디오 가가지고 디스커스로 댓글 기능도 구현해서 페이지 밑에 붙여 줘 하고 그 아까 예시 코드 있잖아요. 예시 코드 붙여 놓으면은 이걸 보고 알아서 짭니다. 그래서 뭐 공식 문서 이런 거 있으면 읽을 필요도 없어요. 그냥 얘가 알아서 그 공식 문서 그대로 주면은 알아서 읽으면서 코딩해 주거든요. 네. AI가 알아서 다 해 주고 있는 중입니다. 그럼 다시 기 푸시 진행해. 디스커스 추가됐고요. 그러면 반영이 어 배포됐어요. 자, 댓글 기능 잘 추가되는지 볼까요? 트러블 슈팅 가이드가 네, 이런 오류가 있습니다. 가끔 이거 다시 한번 클로드한테 시켜 볼게요. 이거 잘 구현됐는지 확인하고 배포해. 아, 문제 찾았다고 합니다. 어, 됐습니다. 어, 돼. 돼요, 돼요. 어, 댓글 기능 들어갔어요. 안녕하세요. 어, 이렇게 댓글 달리죠. 어, 뉴 코멘트. 어, 이렇게 댓글 기능 바로 그냥 추가가 돼 버렸습니다. 다크모드 풀어서 보면은 물론 이것도 고쳐 달려면 그거에 따라 다 해 주겠죠. 네. 요렇게 잘 추가가 됐습니다. 댓글 기능을 만약에 직접 구현한다. 조금 걸립니다. 물론 이제 5주차까지 57:50 들으시면 그냥 AI 딸깍하면서 하실 수 있는데 5주차 듣기 전에는 그냥 이렇게 외부 서비스 연결하면 바로 구현할 수가 있다. 그다음에 다음 진도 나가 보자면 AI를 갖다 붙이는 그런 서비스도 있습니다. 이거 LM 이런 거 나오기도 전에 제가 2020년도에 아마 이걸 써 가지고 만들었을 겁니다. 그 정도로 꽤 오래된 구글의 서비스인데 AI 서비스를 쉽게 만들어 가지고 내 웹사이트에 붙일 수 있게 만드는 네. 그런 툴입니다. 네. 브라우저에서 돌아갈 수 있는 AI 기능을 간단하게 붙이는 어떤 교육용 서비스인데 이것도 어떤 외부 서비스를 붙일 수 있게 이게 만들어 놓은 쌌습니다. 교육용으로 제공하기 때문에 공짜로 그냥 다 제공하고 있어요. 시작하기 눌러 가지고 세 프로젝트 저는 이제 이미지 프로젝트를 했습니다. 그래서 요거 표준으로 생성을 해 보도록 하겠습니다. 이런 겁니다. AI 모델을 학습시키고 그걸 활용할 수 있게 되게 쉽게 제공해 주는 툴인데 진짜 간단하게이 그냥 뭔 느낌인지만 보여 드릴게요. 강아지 여기에는 고양이 한 장씩만 일단 해 보겠습니다. 너그 캣 안 정확한데 일단 이거 한 장만 해가지고 학습시켜 볼게요. 모델 학습 시키기 누르면은 58:53 이제 우리가 강아지는 얘고 고양이는 얘야라고 이렇게 알려줬잖아요. 그래서 이게지도 학습을 해 줍니다. 그래서 한 장이라 금방 학습이 끝났는데 실제로 다른 강아지 사진을 한번 넣어 볼게요. 학습시키지 않은 강아지 사진을. 강아지 싹 올리면은 이게 잘 안 되는게이 한 장밖에 없기 때문이에요. 이거 많이 하면 잘 되는데 얘 고양이로 판단했네. 네. 아무튼 요거 느낌 뭔지 아시겠죠? 이게 강아지 많이 하고 고양이 많이 하면은 강아지 넣으면 강아지로 나오는 거. 데이터를 세 배를 늘리니까 아주 정확해졌어요. 99% 확률로 강아지다라고 AI 모델이 판단해 주고 있죠. 그다음에 이거를 직접 내 사이트에서 활용할 수가 있습니다. 모델 내보내기를 하면 모델 다운받을 수도 있거든요. 업로드를 해 보겠습니다. 그럼 얘가 클라우드도 제공해 줘요. 그래서 요거 어 클라우드의 모델이 올라왔고요. 그럼요 주소로 있는 거죠. 얘를 복사해 가지고 강아지 고양이 구분하는 모델을 만들었어. 이거를 이용해서 동물상 테스트하는 사이트를 만들어 줘. 하고 이거 관련 코드를 제공해 주면 되겠죠? 이렇게 하고 샘플 코드를 그냥 제공을 해 줍니다. 딱 입력하면은 스철 머신 모델 활용해서 재밌는 테스트 페이지 만들어 드릴게요라고 나오죠. 어 만들고 59:53 있어요. 알아서.네 네, 만들고 있고요. 깃 커밋까지 지금 수행하고 있고요. 어, 됐습니다. 어, 완성되어 배포되었습니다. 오, 들어가서 여기 동물상 테스트가 생겼어요. 링크 눌러 보면 와, 동물상 확인해 보세요. 아, 카메라 이거 안 되는데. 카메라로 연결하지 말고 파일 받아서 그걸로 판단하도록 만들어. 네. 요렇게 하면 됩니다. 와, 이게 너무 쉬워졌죠? 이제는 뭐 인풋 만들고 뭐 사진 이런 거 필요가 없어요. 네, 완료됐고 사진 선택하게 생겼어요. 그러면 이제 와, 됐습니다. 사진 업로드해서 확인해 보세요. 강아지 싹 입력하면은 오, 강아지 입력하니까 강아지상 95.8% 일치 정확하죠?네 요런 식으로 만들어 볼 수가 있겠습니다. 네. 자, 아무튼 동물상 테스트 이런 식으로 만들어 볼 수 있겠습니다. 이렇게 간단하게 그냥 모든 서비스, 외부 서비스 갖다 쓴다 하면은 그냥 이거 가이드 있으면 가이드 붙여 놓고 이거 만들어 줘 하면 만들어 줍니다. 네, 이제 가장 중요한게 또 남았죠. 네, 수익화를 해 보겠습니다. 네, 수익화는 뭘 할 거냐? 네. 수익화는 크게 두 가지 방법이 있습니다. 광고가 있고요. 뭐 결제받는게 1:00:54 있습니다. 그중에서 이번에는 이번 1주차니까 좀 가볍게 광고 붙이는게 좀 더 쉽거든요. 그래서 광고를 붙이고 어 다음에 이제 5주 과정 완성 때는 이제 결제까지 다 붙여서 폴라로 구독하는 거 뭐 개별 결제하는 거 이런 거 싹 다 구현해 볼 예정입니다. 오늘 이번 시간에는 에드센스 광고를 붙이는 걸 구현을 해 보도록 하겠습니다. 근데 에드센스가 뭐냐? 구글의 어떤 제품군입니다. 웹사이트 같은데 만들면은 거기 블로그 같은 거 만들면 거기에 광고를 붙일 수 있는 도구입니다. 직접요 사이트 들어가 보면 콘텐츠를 만드세요. 수익 창출은 구글에게 맡기세요. 구글에서 이제 광고를 대신 붙여 주는 서비스입니다. 예를 들어 저희가 사이트 만들었잖아요. 사실 에드센스 안 붙여도 되긴 합니다. 어떻게 하냐면 그냥 별도로 여기 광고 배너를 만들어요. 자, 여기에 광고주 모집합니다라고 할 수 있겠죠? 그래서 연락을 받으면은 여기 배너 광고 이거 30만 원 월 30해 드립니다. 해서 계약할 수도 있겠죠? 이거는 좀 직거래 방식이잖아요. 아,이 배너만 만들어 놓으면 알아서 광고를 막 붙여 줬으면 좋겠다라고 생각이 들 수가 있잖아요. 그걸 해 주는 서비스가 구글 에드센스입니다. 그래서 에드센스로 배너를 붙여 놓으면 알아서 광고를 막 붙여 줍니다. 그래서 뭐 1:01:55 구조를 조금 소개해 드리면 광고주가 있으면 광고주가 1달러를 냅니다. 구글 에즈에 1달러를 주면은 구글 에즈 디스플레이 캠페인 뭐 이런 데서 15cm트를 가져갑니다. 그러면은 이제 85가 남죠. 요거를 이제 구글 에드센스가 받아 가지고 이제 광고를 배너 해 가지고 이렇게 뿌려주고 이걸 대응해 주고 17를 또 가져갑니다. 그러면 이제 68cm가 남죠. 요거를 이제 저희가 가져갑니다. 그러다 보니까 이제 구글이 아무래도 광고 매출이 어마어마하잖아요. 그게 다 여기서 나오는 겁니다. 그래서 이렇게 붙이면 얼마까지 벌 수 있냐? 하루 수익 4,477달러까지 나온 적이 있습니다. 요거 영상 보시면 직접 보실 수가 있고요. 구독자분들 중에서도 이런 분들 계셨어요. 일주일 만에 1천만 원 버신 분도 계셨습니다. 3일 만에 1천만 원 버신 분도 계십니다. 심지어 이제 AI로 더 고급 기능이나 더 고급적인 어떤 스킬들을 쓸 수 있기 때문에 이런게 훨씬 더 쉽게 가능하지 않을까 생각이 듭니다. 네. 근데 좀 미리 말씀드리자면 에디센스 이제 붙일 건데 이런 경우가 많습니다. 심사가 좀 빡세요.이 사이트가 진짜로 광고를 붙일 만한 좀 좋은 사이트가 맞나를 좀 깐깐하게 봅니다. 가치가 별로 없는 콘텐츠 혹은 뭐 콘텐츠 없음 뭐 이런 걸로 거부를 당하거든요.이 심사를 통과를 1:02:56 해야 된다. 이제 AI 시대잖아요. 컨텐츠가 가치가 없다. 이거 수정 AI가 최적화해 가지고 에드센스 통과하기 최적화된 사이트로 만들어 줘 하면 싹 다 고쳐 줘 가지고 에드센스 최적화된 어떤 사이트로 딱 만들어 줍니다. 그래서 이제는 에드센스 통과하기 어렵지 않다. 그러면 어떻게 하는지 놀랍게도 아주 친절하게 제 강의 자료에 링크 들어 있거든요. 링크 들어오시면 요런게 있습니다. 한국 애드센스 공식 블로그에서 보시면 고품질 사이트를 만들기 위한 도움말이 있습니다. 애드센스에서 인증하는 이렇게 만들면 됩니다라고 1편 2편 이렇게 나눠져서 올라가 있습니다. 이거를 이제 사람이 읽고 구현해야 될까요? 아닙니다. 이거 지금 사람이 읽을게 아니죠. 이제이 글을 사람이 읽을 필요가 없습니다. 그냥 제목만 딱 보시면 됩니다. 어 고품지 사이트 만들기 도움말. 어, 이거 AI 이렇게 하면 되겠네. 야, AI 이거 가서 읽어 하면 되죠. 아,이 주소에 좋은 말 있으니까 AI한테 이거 줘야겠다라고 생각하시면 됩니다. 이제 직접 에드센스 넣도록 하겠습니다. 강의 자료 보시면은 강의 자료의 1주차 보시면 여기 에드센스 링크 있죠? 가입 방법도 제가 링크 해 놨습니다. 계정 만드는 거 이런 거 1:03:57 가이드가 여기 나와 있거든요. 가이드 보시면서 직접 가입 진행해 주시면 되겠습니다. 그다음에 결제 정보 이게 좀 오래 걸릴 것 같아요. 결제 정보 입력이 필요하거든요. 요거 개정 만들고 계정 설정하고 결제 정보 및 사이트 검토 대기 요것까지 진행을 해 보겠습니다. 구글 에드센스 여기 접속을 하셔 가지고 가입하기 버튼 누르셔 가지고 가입을 진행하시면 되겠습니다. 혹시나 막혔다. 채치피pt한테 물어보시면서 야 이거 막혔는데 여기서 어떻게 하면은 알려 줍니다. 사이트는 요거 하시면 됩니다. 여러분들이 만드신 사이트 그 주소 있잖아요.이 클라우 플레이어 페이지스랑 연동된요 주소를 입력하시면 됩니다. 네. 그다음에 이제 제 계정으로 로그인해서 진행을 해 보겠습니다. 구글 에드센스 접속하신 다음에 사이트로 들어가 줍니다. 왼쪽 메뉴 중에 사이트 들어가 주신 다음에 이제 세 사이트를 추가를 해 주겠습니다. 세 사이트 눌러 가지고 웹사이트를 추가를 해 주시면 되는데이 웹사이트는 요겁니다. 클라우드 플레어 페이지스에 배포했던요 주소. 일단 요거는 좀 너무 허접하게 돼 있어서 거절 당할 것 같긴 한데 웹사이트에 요걸 입력하시고 저장을 누르고 그다음에 이제 사이트 소유권 확인이 필요하다. 에드센스 코드 스립펫 요런 거 입력하라고 돼 있죠. 이거를 사람이 입력하나? 아닙니다. AI 1:04:58 시켜 가지고 요거 입력해 줘. 요거 입력해 줘. 하면 되겠죠? 한번 해 보겠습니다. 네. 그래서 요거 그냥 복사해 가지고 이제 뭐 할 건지를 알려 주고 그다음에 쭉쭉 관련 코드를 넣어 줄게요.이 사이트에 구글 애드 센스를 추가할 거야. 제공하는 정보를 기반으로 광고 추가해 줘. 추가를 해 주겠습니다. 아까 그 스니 있죠? 요거. 요거를 붙여 놓고요. 네.요 코드랑 또 뭐 있었죠? 다 해 볼게요. 사실 이것도 필요할 수도 있어요. 애드, 텍스트. 요것도 혹시 모르니까 쭉쭉 붙여 놓으면 알아서 이해합니다. 대충 그냥 붙여 넣어도 이해하니까 그냥 이렇게 싹 대충 붙여 가지고 일단 요렇게 시켜 볼게요. 구글 에드센스를 사이트에 추가하겠습니다. 네. 이렇게 나오죠. 그러면 알아서 막 이런 거 다 해 가지고 넣어 주고 있네요. 요것도 만들어 줬죠. 어, 다 추가했어요. 야, 에드센스 추가 완료했고. 자, 그다음에 자, 이제 추가가 됐으니까 여기서 코드 삽입했습니다. 클릭하고 확인을 누르면 되겠죠? 어, 확인됐습니다. 요거 조금 구체적으로 보자면요 사이트 있잖아요. 저희 사이트에 이제 배포가 됐으니까 F12를 눌러 보시면 이제 HTML 코드를 볼 수가 있잖아요. 아까 뉴스 조작할 때 보셨죠? 구글 애드센스 해 1:06:00 가지고 메타태그가 추가된 거를 확인할 수가 있습니다. 이게 추가됐기 때문에 이제 인식을 한 거예요. 그 에드센스에서도 어, 이게 추가가 됐네. 아, 인식 확인됐습니다 하고 이렇게 한 거예요. 그다음에 이제 검토 요청을 해야 되는데 네, 이게 좀 심사가 빡셉니다. 그래서 지금 검토 요청을 하시기보다는 이거 수정하고 할게요. 그래서 양질의 사이트로 만든 다음에 좀 검토를 하면 좋겠죠? 이것도 딸깍하면 됩니다. 아까 요거 있죠? 고품질 사이트를 만들기 위한 도움말 요거를 붙여 놓으면 됩니다. 뭐 링크를 줄게요. 그냥 고품질 사이트를 만들기 위한 도움말 참고해서 에드센스를 무조건 통과할 수 있는 최적의 사이트로 만들어라고 시켜 보도록 하겠습니다. 그다음에 링크를 제공해 줄게요. 이거 주고 그다음에 이것도 복사해 가지고 얘를 주고 렇게 해서 시키면 알아서 읽고 알아서 만들어 줍니다. 패칭이 이제 불러오는 건데 이거 웹사이트 읽으려고 하니까 허용해 줄게. 어, 알아서 최적화해 주는 거 같죠? 지금 보니까. 오, 됐습니다. 에드센 승인을 위한 사이트 최적화가 완료됐습니다. 개인 정보 처리 방침도 만들었어요. 네. 사이트 소개 페이지도 만들어 줬고요. SEO 1:07:00 최적화. 아, 이거 다음 주에 할 건데. 아, 다음 주에 할 내용을 벌써 해 버렸습니다. AI가 좀 앞서갑니다. 네. 최적화해 줬고요. 사이트 구조도 싹 개선해 줬고요. 품질 향상도 해줬고요. 승인 체크리스트 싹 다 체크해 가지고 보완해 준 걸 볼 수가 있습니다. 사이트 새로고침해 보시면 야, 이제 소개 페이지가 생겼어요. 안녕하세요. 저녁 메뉴 추천 서비스에 오신 거 환영합니다. 개인 정보 처리 방침도 추가됐습니다. 네.이 정도면 이제 애드센스 통과할 만하지 않을까 생각이 들고요. 검토 요청 이제 하면 되겠습니다. 심사 떨어질 수도 있어요. 떨어지면 뭐 더 보완해서 더 보완하고 하면 되죠. 요거는 검토 요청을 해 보겠습니다. 동의 메시지. 아, 요거는 요즘에 구글 에센스 이런게 아무래도 구글에서 아마 정보 가져가는게 있다 보니까 요런게 있을 거예요. 유럽, 경제 지역, 영국, 스위스 사용자들은 동의를 얻어야 됩니다. 보통 외국 사이트 가면 무슨 뭐 쿠키 허용하시겠습니까? 뭐 해가 뜨는 거 있잖아요. 이렇게 팝업 뜨는 거. 그런게 다 요런 건데 이거는 뭐 일단은 나중에 알림하겠습니다. 일단 뭐 글로벌 하려면 나중에 필요하긴 할 텐데 나중에 추가하겠습니다. 네. 리뷰가 요청됐습니다. 아, 며칠 이내 일단 완료될 수가 있는데 경우에 따라 2, 4주가 소요될 수가 있다고 합니다. 아마 다음 주에 안 붙을 수도 있어요. 그래도 혹시 며칠 이내 1:08:01 완료된다고 하니까 다음 주에 보면은 좋을 것 같습니다. 네. 그래서 여기까지 하시면은 이제 광고까지 붙은 어떤 웹 서비스 다 만드실 수가 있고 여기서 통과가 된다 하면은 이제 요런데 덕지덕지 이렇게 광고가 붙을 수가 있을 겁니다. 제가 동물상이나 뭐 딴 걸로 좀 보여 드리면 광고 탭에 들어가 보시면이 광고 설정도 할 수가 있습니다. 보시면 이렇게 수정 누르면은 광고가 어떻게 표시될지 이런 식으로 애드센스에서 표시를 조작해 볼 수가 있거든요.이 데스크탑 뷰에서는 요런 식으로 요런 광고가 들어간다. 근데 자동 광고 켜 놓으면 알아서 됩니다. 요런 거 자동 광고 이런 거 알아서 들어가고요. 최적화 자동으로 다 켜 놓으면은 알아서 최적화도 해 줍니다. 그래서 이거 자동 광고 켜 두시면은 알아서 됩니다. 그래서 여러분도 승인 되시면은 여러분의 사이트에 이렇게 광고가 들어갈 수가 있겠고요. 요게 들어가면은 이제 요런 식으로 뭐 1년에 한 600만 원씩 이렇게 받을 수 있는 요런 사이트로 이제 성장할 수가 있겠습니다. 저희가 구글 애드센스를 붙이는 작업을 했습니다. 역시 그 애드 고시라는 이름의 걸맞게 좀 더 빡세진 거 같습니다. 사이트에 발견된 문제를 수정해야 된다고 해서 수정하는 거 보여 드리려고 합니다. 예. 사이트 페이지를 참고해 달라라고 하니까 1:09:01 들어가 보면음 주의 필요 아 콘텐츠가 없거나 가치가 낮은 콘텐츠를 포함만 하면 아직 준비 중인 하면 아 요렇게 돼 있죠. 그래서 요거를 보완을 해야 됩니다. 그래서 요거 보완 클로드한테 시켜 가지고 혹은 뭐 AI 딴데 애들 시켜 가지고 시키면 되겠죠. 네. 그러면 요거이어서 그냥 고치는 거 바로 진행해 보도록 하겠습니다. 요거 프로덕트 빌더 위크원 렇게 생성을 해 놨는데 요로 들어가 보도록 하겠습니다. 클라우드에서 어디든 이거 노트북에서 다른 환경으로 접속해도 똑같이 돼요. 그래서 되게 좋죠. 그러면 이제 클로드한테 시키면 되겠죠? 이제는 이런 거 인간이 보고 해결할 문제가 아닙니다. 클로드한테 뭐라고 고칠 설명해 주겠습니다. 구글 애드 센스 거절이 났어. 그래서 요런 거 이렇게 왔는데 그리고 다른 링크들도 다 넣어 줄게요. AI가 알아서 참고합니다. 보면서 위 내용을 참고하여 구글 애드 센스에 무조건 통과할 수 있도록 정말 풍부하고 진짜 완벽한 사이트로 만들어 줘. 네. 이런 식으로 그냥 아무렇게나 시키면 됩니다. 시켜 보도록 하겠습니다. 코드 쫙 파악하고 알아서 진행해 주고 있습니다. 모든 페이지를 풍부한 1:10:02 콘텐츠로 개선하겠습니다라고 합니다. 근데 얘는 사실 너무 예제 사이트 같긴 하죠. 너무 예제같이 만들어 가지고 안 된다. 그래서 요게 혹시나 이거 또 추가로 해서 안 되면은 다음 주 커리큘럼부터 좀 더 완성하고 완성하고 해 가지고 좀 제대로 만들어 보려고 하는데 이거는 좀 심사 과정을 보여 준다라는 정도로만 보시면 좋을 것 같고요. 제대로 된 서비스를 만든 다음에 거기에 붙이는 건 아마 붙는게 쉽지 않을까? 그래서 제가 꼼수 하나 알려 드리려고 합니다. 통과한 방법이 아주 심박합니다. 슬래시 블로그라는 페이지를 새로 만들었거든요. 그때는 AI가 없었어요. 그래서 블로그를 그 어디 의뢰해 가지고 글 써 주는 분이 계십니다. 의뢰해 가지고 한 열 건가 받았어요. 블로그를 이렇게 사람한테 받은 글을 블로그에 억지로 블로그 페이지를 굳이 만들어 가지고 거기에 블로그를 열 개 정도 쌓아 놨습니다. 그다음에 통과가 된 다음에 블로그를 없앴거든요. 그러니까 이렇게 잘 붙어 있어요. 그래서 개꿀팁 있다면 아무도 안 쓰는이 블로그라는 걸 만들어 가지고 아무 글이나 다 채워놔 가지고 여기 글이 풍부하다라는 거를 인증한 다음에 그다음에 통과하면 됩니다. 푸드 팁. 아, 이런 거. 어, 비슷하게 만드네요. 억제로 그냥 음식 1:11:02 푸드 팁 이런 거 영어 한글 페이지 만들고 있죠. 사실 에드센스가 블로그에 많이 붙여요. 그래서 티 스토리 블로그 이런데 많이 붙이니까 컨텐츠 통과 기준이 좀 컨텐츠의 양 이런 걸로 좀 결정이 되고 하는게 있더라고요. 어, 됐다. 개선해 줘. 하는 걸로 싹 개선이 됐습니다. 4.600 컨텐츠가 증가했다고 하고요. 대폭 개선했다. 혹시 여기서 부족하면은 뭐 이렇게 블로그를 만들어서 블로그을 15개 써 줘. 한 다음에 15개 싹 채우고 그다음에 내고 하면 되겠죠. 네. 근데 이거는 그냥 예시니까요. 그러니까 더 발전된 진짜 쓸 만한 서비스를 만들면은 붙을 확률이 더 높겠죠. 기 푸시까지 됐고요. 그러면 기터브에도 올라가 있겠네요. 어 업데이트드. 네. 바로 1분 전 이렇게 추가가 됐고 이제 요것도 사이트가 아마 어 환영합니다. 좀 멋있어졌어요. 근데 이것도 좀 허접해 보여 가지고 통과는 안 될 거 같다라는 생각도 드는데 아무튼 이렇게 보완해 주는게 통과되는지 보는 것도 좋을 것 같아요. 네. 그러면 광고 사이트 네. 요거 네. 다시 수정했다라고 체크하고 검토 요청을 해 줍니다. 또 며칠 이내에 결과가 나올테니까 또 다음 주에 혹시나 덜 돼 있다면 그러면은 굳이 다시 재심사는 안 하고 재심사는 요런 1:12:03 식으로 한다라고 보여 드렸으니까 나중에 저희가 좀 완성된 기능이 어느 정도 잘 돌아가는 좀 좋은 서비스를 만들면은 그다음에 붙이는 걸로 좀 보여 드리겠습니다. 그다음에 혹시 지금까지 배운 거 HTML, CSS, 자바스크립트를 아, 나는 좀 알고 싶은데 하신 분도 있잖아요. 그냥 물론 딸깍하면은 다 되긴 하는데 나는 알고 쓰면 좋다. 그러신 분들을 위해서 그냥 학습 도구 좀 소개해 드리면이 코드 카뎀이라고 얘도 공짜로 쓸 수가 있습니다. 유료 결제 이거 하지 마세요. 여기 코스가 보면은 HTML, CSS 이런게 있습니다. 코스들을 수 있게 돼 있는데 얘가 좋은 점이 뭐냐면 실습을 하면서 공부를 할 수가 있거든요. 미션을 깨면서 공부를 할 수가 있습니다. 그 H1 아까 봤던 거죠. 여기 안녕 하면은 런 누르면 이렇게 안녕 표시되는 거 했었죠. 그래서 요거를 좀 더 나는 좀 심층 공부를 하고 싶다 하시면은 뭐 이런 걸 통해서 같이 실습하면서 공부하시면 되겠습니다. 여기 이렇게 미션이 나오거든요. 그래서 미션을 수행하고 여기에 뭔가 입력한 다음에 런을 누르라고 돼 있죠. 그러면 미션 통과한 거예요. 그리고 이제 다음 미션으로 넘어가고 그리고 이게 영어라서 좀 불편하다. 이렇게 한국어로 번역하면은 요런 식으로 한국어로도 보실 수가 있겠습니다. 1:13:04 네. 그래서 아까 배웠던 거죠. 아까 저희가 배웠던 거 그대로 나옵니다. 구체적으로 아 난 궁금한데 그래도 알고 싶은데 하시는 분들은 이런 거 좀 공부해 보시면 좋을 것 같습니다. 일론 머스크가 한 발언이 되게 인상적여서 가져와 봤는데 지금 대학 갈 이유 모르겠다. AI가 개인 교사 될 것이라고 해 주셨는데 실제로 AI가 저도 모르거든요. 그래서 어 이거 명령어가 뭐였지? 그냥 AI한테 물어보면 알려줍니다. 그리고 HTML 뭐 이런 모르는 거 나왔다. 최치피한테 이거 뭐야? 물어봐 알려줍니다. 그래서 이제는 내가 미리 알고 있을 필요가 없어요. 그렇기 때문에 조코딩 채널이 강의처럼 큰 그림을 딱 그리고 아 이렇게 세팅하는 거 알려주고 약간 이게 핵심일 것 같아요. AIC대 핵심은 그 세팅하는 거 알려 주는 거 약간요 정도가 되지 않을까? 자, 그래서 세팅만 이것만 한번 싹 해 놓으면은 이제 여러분들의 할 일 2주차부터 5주차까지 남은 과정 할 일은 요겁니다. 오늘 과정 여러 번 복습하시면서 직접 세팅도 해 보시고 다 완벽하게 만드시면 좋을 것 같습니다. 다음 주 커리큘럼 보여주면서 좀 마치자면 나머지 주차 재밌는 거 많이 남았습니다. 유입 성장 이제 SEO 데이터 분석 바이러럴 구조 마케팅 이런 거 전반적으로 해 볼 거고요. 그다음에 AI 결제 이제 본격적으로 결제를 1:14:04 붙여야 사실 결제를 통해서 돈을 버는게 딱 직접적이잖아요. 그래서 글로벌 결제 구현할 거고요. 그다음에 반복 매출, 구독 네, 구독 서비스 이때 4주차 때 구현할 거고 5주차 때 이제 확장 운영 이런 거 하는 전략, 미국 법인 이런 것도 다 해 가지고 다뤄보도록 하겠습니다. 지금까지 시청해 주셨던 분들 너무너무 감사드립니다. 감사합니다. 바이브 코딩 1인 창업과 부트캠프 2주차 네, 진행이 되고 있고요. 그러면 2주차 이제 이번 주에 뭐 배울지 알아보도록 하겠습니다. 2주차는 좀 어떻게 보면 PM이나 PO라는 직군이 있거든요. 약간 그런 관점에 대해서 좀 더 배운다라고 보시면 될 것 같습니다.이 이 프로덕트를 성공하는 방법은 무엇인가 전반적으로 배워 보도록 하겠습니다. 그리고 구글 애널리틱스라고 구글에서 만든 데이터 분석 툴, 또 마이크로소프트에서 만든 클레리티라는 데이터 분석 툴 요렇게 두 개를 같이 붙여 볼 예정입니다. 영어가 많은데 아 이게 업계 되게 안 좋은 점이기도 한데 한교 사투리라고 하잖아요. aa라 이런 거 별말 아닌데 그냥 좀 어렵게 써 있다라고 이해해 주시면은 좀 더 이해하시는게 쉽지 않을까? 오늘 강의를 들으면 이제 좀 판교 사투리를 이해할 수 있다라고 또 이해해 주시면 좋을 것 1:15:05 같습니다. AirrR이라고 이제 데이터 분석하는 어떤 기법이나 뭐 프레임워크 이런 것들이 있는데 그런 거 중심으로 좀 배워 보고 그다음에 캐리 캐시티라고 유입도 늘리고 이탈도 줄이고 하는 것들을 배워 보도록 하겠습니다. 일단은 첫 번째 프로덕트의 성공 방법에 대해서 배워 보도록 하겠습니다. MVP와 데이터에 대해서 배워 볼 건데 지난 시간 잠깐 복습을 해 볼까요? IT 프로덕트 일단 큰 구조에 대해서 배웠고 웹 개발 직접 진행해서 어떤 프로덕트를 다 만들었죠. 그다음에 이제 광고 수익화까지 붙였습니다. 완성된 서비스라고 부를 수 있겠죠. 왜냐면 실제로 사람들이 이용하고 광고로 수익화까지 할 수 있는 프로덕트를 이미 1주차 때 다 만드신 겁니다. 앞으로 배울 내용은 좀 심화적인거나 추가적인 거지. 그래, 전 세계 누구나 내 프로덕트를 쓰면서 내가 수익을 가져갈 수 있는 구조 이미 만들었습니다. 그러다 보니까 알리기만 하면 대박 나지 않을까라고 생각이 들 수 있잖아요. 토스에서 세션이라고 토스를 만드신 이승건 대표님이 세션 하신게 있어서 거기에 나온 자료들을 좀 참고했는데 토스 하면은 굉장히 성공한 어떤 금융 앱이잖아요. 그래서 아 이거 만드신 분은 진짜 천재여서 1:16:06 내자마자 막 엄청 잘되고 성공하지 않았을까라고 생각이 드는데 뭐 당연하게도 아닙니다. 아마 모든 거의 개발자분들이 이런 생각은 한 번쯤은 해 보셨을 거예요. 아, 이거 세상을 바꿀 아이템인데 알리기만 하면 진짜 무조건 대박 날 거야. 생각이 드는 경우가 많습니다. 놀랍게도 지금 토스를 어마어마하게 성공시키신 이승건 대표님도 울라블라는 뭐 이런 서비스도 만들고 엄청 마케팅 돈도 태우고 열심히 알리시고 했는데 실패하고 실패하고 하는게 여러 아이템들이 있었습니다. 5년 동안 여덟 번 망하셨다고 합니다. 그래서 사실이 프로덕트라는게 알리기만 한다라고 해서 성공하는 것도 아니고 성공하는게 쉬운 일은 아닙니다. 그래서 프로덕트를 성공시킨다라고 했을 때 공식이 있습니다. 사실 린 스타트업이라고 요거 책 보신 분도 계실 텐데 좀 핵심을 보자면 결국에 MVP를 만들어 가지고 시장에 빠르게 내놓고 이거를 검증해라라는게 좀 핵심 내용입니다. 그래서 MVP가 뭐냐? 어떤 제품을 만들 때 자동차를 만든다고 하면 바퀴를 만들었으면은 프레임을 만들고 틀도 만들고 그래서 기능을 이것저것 붙입니다. 시장에 내놓은 다음에 팔리는지 보는데 사실 이걸 다 만드는데 시간이 굉장히 오래 1:17:07 걸리잖아요. 그러면 너무 늦습니다. 성공할지 안 할지는 진짜 아무도 알 수가 없거든요. 아무리 천재어도 다 실패합니다. 그래서이 기간을 최대한 단축시켜야 돼요. 빨리 MVP라고 미니멀이어블 프로덕트라고 최소한의 어떤 기능의 제품 가서를 검증할 수 있는 최소한의 제품을 내놓고 사람들이 이걸 좋아하나 안 좋아하나를 빨리빨리 검증을 해야 됩니다. 그래서 또 나온 예시가 자동차를 만든다는 거. 사람들이 이동 수단이라는 거를 좀 원할 것이다라는 그런 가설이 있다고 하면은 일단은 요렇게 빨리 만들 수 있는 작은 이동 수단을 만들어서 검증을 하고 그다음에 좀 발전시키고 그다음에 발전시키고 하면서 이제 이동 수단이라는 거를 만들고 검증하고 발전시켜 보고 그 과정을 빠르게 빠르게 시장에 선보이고 해야 된다라는 그런 얘기가 MVP의 개념입니다. 그래서 실제로 오 세션에서 나왔던 얘긴데 어차피 안 될 아이템이라고 해서 아이템을 막 수십게 막 이렇게 만드신 다음에 그걸 막 검증하면서 빠르게 빠르게 출시를 하셨어요. 그래서 요렇게 간편하게 사람들이 송금하고자 하는 그런 니즈가 있지 않을까? 사람들이 그걸 찾지 않을까라고 생각이 들어서 간편하고 안전한 계좌이체 서비스 간단하게 1:18:08 요렇게 만드셔 가지고 이게 실제로 먹히나 빠르게 만들어서 테스트를 했거든요. 그랬더니 이제 사람들이 엄청나게 쓰면서 지금의 유니콘 기업 토스가 됐는데네 최대한 핵심적인 기능 사람들이 이걸 진짜 원할까라는 그 핵심적인 기능을 내고 빠르게 출시하는게 핵심이다라고 소개를 드릴 수가 있겠습니다. MVP 하면 나오는 대표적인 사례 중에 하나가 드랍박스의 사례가 있습니다. 파일 공유 쉽게 할 수 있는 거. 그것도 그냥 처음 제품은 이거밖에 없었습니다. 소개하는 영상만 있고 이메일 주소를 입력하면은이 영상에 해당하는게 완성이 되면 이메일을 보내 드리겠다라는 그런 간단한 서비스만 구축하셨습니다. 이거를 보고 반응이 많이 온다 하면은 이건 성공한 서비스라고 할 수가 있겠죠. 그러면 이제 기능을 만들고 아니면 안 만들면 되니까 굉장히 효율적이고 시간을 아껴서 실제로 사람들이 원하는 걸 만들 수가 있습니다. 오늘날은 조금 다를 수 있는게 오늘날은 딸깍하면은 이것보다는 좀 잘 만들 수 있잖아요. 원하는 가설을 좀 더 정확하게 검증할 수가 있겠죠. 그러면 잘된 것과 망한 것에 좀 기준을 세워야 될 것 같은데 예를 들어 뭐 어떤 실험을 하고 이걸 1:19:08 내놨어요. 근데 이게 잘됐는지 아니면 안 됐는지 알기가 어렵잖아요. 어떻게 할 수 있냐면 데이터를 통해서 알 수 있습니다. 유저가 사이트에 들어오면 뭐 어떤 걸 클릭했는지 어떤 사이트에 얼마나 머물렀는지 이런 거가 요즘에 다 추적이 되거든요. 유저의 행동 데이터를 보면은 검증이 되게 쉽습니다. 그래서 이제 빨리빨리 만들어서 데이터를 보고 괜찮다 싶으면은 더 만들고 아니다 싶으면 빨리 딴 아이템으로 넘어가는게 빠르게 성공하는 길인 거 같습니다. 그래서 이렇게 데이터를 분석할 수 있는 툴들이 굉장히 많습니다. 요것 중에 무료이면서 확장성이 좋은 거 위주로 선택을 해 보도록 하겠습니다. 구글 아날티스나 플레어리티는 완전 무료거든요. 아예 공짜로 그냥 다 쓸 수가 있어서 우리가 만든 사이트에 구글 애널리틱스를 붙이면서네 실제로 유저가 어떻게 행동하는지 이런 걸 추적할 수 있는 그런 환경을 만들어 보도록 하겠습니다. 그리고 뭐 마이크로소프트 클레어레티 이것도 설치하는 과정을 보여 드리도록 하겠습니다. 그러면은 이제 내가 만든 서비스로 들어가 봐야겠죠? 그러면 다시 파이어베이스 스튜디오로 접속해 보도록 하겠습니다. 네. 그래서 위크원 저희가 만들어 놨던 거 여기다 붙여 보도록 하겠습니다. 일단 오늘은 좀 기본적인 거 어떻게 붙이는지 1:20:09 그리고 어떻게 분석하는지 기본적인 거 위주로 알아보도록 하겠습니다. 지난주 약간 복습을 하자면 프론트엔드 웹사이트를 저희가 만들었었죠. 광고도 붙여 봤고요. 근데 저도 아직 광고 심사 통과는 안 됐는데 이건 뭐 그냥 사이트 개선하면 할수록 통과는 될 테니까요. 이렇게 들어왔으면 이제 구글 애널리틱스를 붙여 보도록 하겠습니다. 네. 그래서 사이트 주소는 제가 강의 자료에 남겨 드렸는데 여기 2주차 구글 애널리틱스 홈페이지가 있습니다. 그래서 여기 클릭하셔서 구글 로그인 하시면은 분석 도구 여기로 들어오실 수가 있겠습니다. 측정 시작을 눌러서 들어가 줍니다. 그러면 일단 가입이 필요합니다. 가입을 진행해 보도록 하겠습니다. 개정 이름 이거는 아이디 만들 때 아무렇게나 만드시면 되고요. 영문으로 만드셔야 됩니다. 그래서 먼저 저는 조코딩 프로덕트 빌더네 이렇게 만들도록 하겠습니다. 개정 데이터 공유는 구글에서 이제 데이터를 관리할거다 이런 건데 선택 사항이라서 빼도 됩니다. 속성 만들기. 네. 요거는 이제 하나의 사이트를 의미하거든요. 그래서 한 사이트를 하나의 속성으로 관리를 하는데 이름을 지어 주도록 하겠습니다. 저는 이제 위크원이라고 지을게요. 그리고 보고 시간대는 대한민국 그럼 달러로 해서 다음으로 넘어가도록 하겠습니다. 그다음 비즈니스 세부 정보는 요거는 사실 아무거나 하셔도 되긴 합니다. 1:21:09 이제 카테고리 분류하려고 이렇게 하는 건데 저희는 뭐 엔터테인먼트 자금 이렇게 하고 비즈니스 목표는 보통 저희가 하려는 건 지금 단계에서는 요거죠. 네. 나중에는 요런 것도 할 수 있을 텐데 일단은 요렇게 두 개 하고 만들어 보도록 하겠습니다. 그리고 GDPR 요게 이제 요즘에 유럽에서 이제 데이터 관련해 가지고 요런 거 뜨는 거 있잖아요. 뭐 어그리 노 땡큐 이렇게 뜨는 거. 그걸로 이제 어그리를 해야지만 이제 데이터 분석을 할 수 있는 그 법이 있는데 그래서 요거 약관 때문에 동의해 달라는 그런 이야기입니다. 그다음에 이제 데이터 수집 단계까지 오셨으면 여기서 웹을 선택해 줍니다. 웹사이트 선택을 해 주시면네 웹사이트 주소를 입력할 수가 있는데요. 네. 여기서 지난번에 저희가 클라우드 플레이어 통해서 여기다 배포했잖아요. 각자 본인만의 주소가 있으실 텐데요 주소를 복사해 가지고 여기다 넣고요. 그리고 위크원이라고 지어 주도록 하겠습니다. 그리고 요거 기본적으로 향상제 측정 켜 주시면은 기본적으로이 많은 데이터들이 다 측정이 됩니다. 페이지 들어오고 뭐 스크롤하고 나가고 사이트 검색 동영상 호 이런 거에 다 추적이 됩니다. 이제 여러분들이이 사이트에서 무슨 행동을 하는지 다 알 수가 있습니다. 그리고 만들고 1:22:10 계속하기 누르고 이제 위크원이 만들어졌습니다. 네. 그다음에요 화살표 여기 누르면은 요렇게 측정 아이디나 뭐 이런 것들이 나옵니다. 아직 태그가 활성화돼 있지 않다라고 돼 있는데 요거는 어떻게 하냐? 태그 안내 보기를 눌러 보시면 요렇게 설치를 어떻게 하는지가 나와 있습니다. 이제 내 사이트에 이걸 설치해야 추적을 할 수가 있겠죠. 그래서 추적하는 방법은 이제 직접 설치 코딩으로 개발이 돼 있다면 이제 직접 설치를 눌러 가지고 구글 태그 요거를 이제 헤드 요소 바로 다음에 넣어 달라고 합니다. 그러면 요거를 복사해 가지고 이제 저희 파이어베이스 스튜디오 들어오셔서 여기서부터 이제 AI를 써 보도록 하겠습니다.이 원래 사람이 하려면 여기 헤드태그에다가 요렇게 구글 태그 이렇게 넣으면 되거든요. 사실 이제 모든 페이지에 다이 태그가 들어가 있으면 좋잖아요. 그래서 클로드나 제미나이나 코덱스나 AI로 들어가셔 가지고 AI에게 시켜 보도록 하겠습니다. 모든 HTML의 아래 태그 추가해 줘. 그리고 복사한 G태그 넣어 달라고 시키시면 됩니다. 네. 이렇게 하면은 알아서 다 추가를 해 주겠죠. 지금 열심히 추가를 하고 있습니다. 네. 그럼 모든 사이트에 요렇게 태그가 추가가 되겠죠. 네. 1:23:11 그러면 요렇게만 해도 사실 기본적인 어떤 웹사이트의 행동들은 다 추적이 됩니다. 그래서 요것만 해도 굉장히 강력한데 여기에 이제 추가적인 것들도 더 붙일 수가 있습니다. 그다음에 어떻게 해야 될까요? 지난주 거 약간 복습을 해 보자면 기터브랑 연동을 해 가지고 그다음에 웹사이트랑 올리는 걸 연결 해 놨죠. 기에다가 올려서 실제로 배포해 줘. 그럼 깃에서 커밋하고 배포하겠습니다라고 하죠. 그러면 기 푸시라는게 수행이 알아서 되고 있죠. 이제 완료가 됐다고 합니다. 성공적으로 배포가 됐다고 하니까 방금 전에 이게 올라와 가지고 이제 배포가 된 거를 볼 수가 있습니다. 그러면 이제 반영이 됐겠죠? 그러면 이제 마우스 클릭, 검사 누르셔 가지고 헤드를 보시면 여기에 G태그가 추가된 거를 볼 수가 있습니다. 이제부터는 내가 접속해 가지고 사이트에서 뭘 클릭하고 뭘 스크롤하고 했는지가 다 추적이 됩니다. 이제 설정을 마무리해 보겠습니다. 추가됐으니까 이제 테스트해 보면 잘 나올 겁니다. 테스트 버튼 누르면은 예, 여기서도 테스트가 되고 있죠. 어, 오케이 떴습니다. 이제 잘 들어간 거를 볼 수가 있죠. 다음 누르고 데이터 수집 대기 중입니다. 그래서 이제는 사람들이 들어올 때마다 구글 1:24:13 애널리틱스랑 연동이 돼 가지고 지금 데이터가 계속 쌓이고 있을 거거든요. 근데 물론 조금 더 세부적으로 할 수도 있어요. 예를 들어 뭐 메뉴 추천 받기 이런 거 클릭한 사람, 뭐 요걸 누른 사람 이걸 다 버튼마다 뭐 달아놓고 어디마다 달아놓고 해서 모든 걸 다 추적할 수도 있습니다. 이렇게 일단 구글 애널리틱스도 연동했고요. 그다음에 또 하나 무료 툴이 더 있습니다. 마이크로소프트의 클레리티라는 툴이 있거든요. 히트맵이라고 해서 여기를 사람들이 많이 마우스가 왔다 갔다 했다. 여기를 왔다 갔다 많이 했다. 뭐 여기를 클릭을 많이 했다. 이런 것들이 싹 다 추적이 됩니다. 그래서 클레어리티 여기도 들어가 보도록 하겠습니다. 네. 이게 좋은 점이 클레어리티랑 구글 애널리틱스랑 연동이 가능해요. 함께 붙여 가지고 실제로 이렇게 히트맵도 보면서 실제 데이터도 보면서 행동도 보면서 다 할 수가 있습니다. 미리 좀 보여 드리면 여기 세션 레코딩도 됩니다. 동영상으로 실제 볼 수가 있어요. 그래서 여러분들이 사이트에서 뭘 받는지 다 알고 있습니다. 한번 바로 연동해 보도록 하겠습니다. 시작 버튼을 눌러서 연동을 해 보겠습니다. 그러면 로그인을 하는데 저희는 이제 구글이랑 연동해 가지고요 애널스랑 연동할 거기 때문에이 애널리틱스 붙이신 구글 1:25:13 아이디 있잖아요. 요걸로 로그인을 해 보겠습니다. 그래서 네, 허용합니다. 메일은 굳이 안 받아도 되겠죠? 계속 프로젝트를 만들어 봅시다. 네. 한번 입력을 해 보겠습니다. 조코딩이고 사이트 주소 넣어 주고요. 웹사이트 업계는 적절한 거 선택하시면 되겠습니다. 그리고 프로젝트 추가하고 그래서 거의 완료됐습니다. 하고 이제 설치하는게 여기 보시면 아래쪽에 구글 애널리틱스 통합이라는게 있거든요. 요거 링크는 제가 따로 남겨 드릴게요. 요걸로 들어가시면 됩니다. 그래서 이제 통합을 해 보도록 하겠습니다. 시작을 눌러 가지고 구글 계정이랑 연동해서네 모드 선택 계속 눌러 주시면은네 연결할 사이트 저희가 위크원으로 구글 애널스에서 만들었죠. 그래서 저장을 해 주시면 연결이 됐습니다. 네, 여기에 연결이 잘 된 거를 볼 수가 있죠. 요것도 그럼 마찬가지로 태그 한번 붙여 놓도록 하겠습니다. 여기서 이제 수동으로 설치 추적 코드 받기. 요걸 복사해 가지고 파이어베이스 들어가서 MS 클레어리티도 추가해 줘. 이렇게 하고 아까 코드 복사한 거 붙여 놨거든요. 그러면 요걸로 알아서 또 추가를 해 줍니다. 이제 모든 파일에 추가 완료했고요. 커밋하고 배포까지 알아서 하고 1:26:13 있습니다. 이제 완료가 됐습니다. 히트맵과 세션 녹화 데이터까지 다 확인을 하실 수가 있겠습니다. 두 개 저희 붙인 거를 좀 소개를 드리면 구글 애널리틱스는 숫자나 지표를 좀 파악하는 용도다라고 보시면 될 거 같고요. 마이크로소프트에서 제공하는 클레어리티는 사람들이 실제로 어떻게 했는지를 움직임이나 뭐 이런 세션 데이터 이런 걸 다 녹화해 가지고 볼 수 있는 툴이다라고 보시면 되겠습니다. 그러면 세부적으로 구글 애널스 보는 방법 소개를 드리도록 하겠습니다. 이미 붙어 있는 걸 보면 좋겠죠? 그래서 제 거를 공개하도록 하겠습니다. 제가 만든 거 중에 제일 방문자 수가 많은 동물상 테스트를 보도록 하겠습니다. 좀 운영을 해 보셨다 하면은 요런 식으로 되어 있습니다. 딱 들어오시면 이런 식으로 여러 개의 속성들로 각각 사이트를 다 연결할 수가 있거든요. 한 번만 가입하신 다음에 이렇게 속성을 추가하시면 됩니다. 뭐 기본적으로 홈 화면에 요런 식으로 뜹니다. 주요 데이터들 확인할 수가 있죠. 활성자 지난 30일 동안 뭐 몇 명이 들어왔나? 저 4만 명이 왔다고 합니다. 페이 조이스 얼마고 이벤트 저희가 추적하고 있는 것들 몇 개 발생했는지 이렇게 다 추적이 되고 있고요. 그리고 국가도 알 수 있습니다. 30분 동안에 53명이 들어왔다고 하는데 어느 국가에서 1:27:15 왔는지 실시간 보기를 누르면 실시간으로 이렇게 추적도 됩니다. 방금 전까지 누가 얼마나 어느 국가에서 왔나 그리고 어디서 왔는지 구글에서 검색해서 왔는지 기터브 통해서 왔는지 블로그 통해서 왔는지 다 추적이 됩니다. 네. 그리고 보고서로 보시면 그 외에도 되게 다양한 정보들 볼 수 있습니다. 뭐 예를 들어서 뭐 사용자 속성의 인구 통계 이런 거 보면은 한국이 몇 명 뭐 러시아도 많이 왔네요. 국가뿐만 아니라 뭐 지역, 언어, 연령 다 볼 수가 있겠습니다. 그래서 이제 주요한 지표들을 좀 소개를 드릴 텐데 가장 좀 많이 나오는 용어들, 개념을 알아두시면 좋을 것들 좀 소개를 드릴 텐데 예를 들어 뭐 사용자 재방문 이런 거 있을 때 DAU, MAU, WAU 이런 개념들이 있습니다. 이게 어떤 거냐면 별 얘기 아닌데 영어로 쓰니까 괜히 어렵거든요. DA가 뭐냐면 데일리 액티브 유저입니다. 1일별로 활동하는 유저입니다. 하루 동안의 유저가 보통 얼마나 들어오냐? 네. 이게 이제 DA라고 부르고요. 그다음에 WA는 위클리 일주일에 보통 몇 명 들어오냐? M가 먼슬리 월에 보통 몇 명 들어오냐 많이 나오니까 용어 알아두시면 좋을 것 같고요. 그다음에 요런 개념이 있습니다. 1:28:16 이벤트라는 용어가 되게 많이 나와요. 웹사이트에서 어떤 이벤트가 일어났다라고 하면은 클릭을 했거나 뭐 마우스 스크롤을 했거나 떠났거나 이런 모든 어떤 웹사이트 내에서 행동들을 다 이벤트라고 부릅니다. 네. 그래서 이것들을 싹 다 추적할 수 있어요. 그중에서이 이벤트 중에서 좀 주요한 것들이 있습니다. 회원 가입을 했다, 결제를 했다. 이런 거 되게 중요하잖아요. 이런 거는 전환이라고 부릅니다. 전환율이 어떻고 막 이런 얘기를 많이 하는데 이게 그냥 주요한 이벤트입니다. 그리고 이탈 이제 사용자가 떠났다 이런 거죠. 네. 자, 아무튼 요런 주요 개념이 있다라고 이해해 주시면 좋을 것 같고요. 그리고 AARRR이라는 개념이 있습니다. 요것도 알아두시면 이제 데이터 분석에서 틀로서 사용할 수 있는데요. 저희가 웹사이트 배울 때도 프론트 엔드가 있고 백엔드가 있다라는 걸 이제 1주차 과정에서 배웠잖아요. 이제 유저의 어떤 행동을 본다. 유저가 어떤 식으로 이동하는지 본다라고 한다면이 AARrR이라는 용어도 꽤 많이 씁니다. 한글로 좀 표현하자면 요겁니다. 사람들이 이렇게 내 사이트에 들어와요.이 이 사람이 이제 다운로드라는 어떤 주요 전환이 일어날 수가 있겠죠. 그래서 알게 1:29:16 되고 다운로드하고 그게 이제 회원 가입을 하고 그리고 그 유저가 현지를 하고 또 추천을 하는 요런 흐름으로 갑니다. 그러면 보통 알게 된 사람보다 다운로드 받은 사람은 적을 거 아니에요. 근데 다운로드 받은 사람 중에도 회원 가입도 안 하고 나간 사람도 있을 것이며 회원 가입을 한 사람은 더 적겠죠. 회원 가입한 사람 중에도 현질한 사람은 더 적겠죠. 그리고 현질한 사람 중에도 아 너무 좋아 가지고 막 추천하고 다니는 사람은 더 적겠죠. 요거는 이제 서비스에 따라서 좀 다를 수 있는데 대략적으로 그냥 요렇게 생겼다라고 이해해 주시면 좋을 것 같습니다. 그래서 1천명이 알았는데 이게 다운로드가 100명이 됐다 하면은 이제 10% 정도가 이게 전환이 됐다라고 이야기를 하고요. 그리고 900명은 이탈이 된 거잖아요. 요런 거를 막 줄여 나가고 하는게 이제 그로스 해킹이라고도 하고 아니면 뭐 제품 개선이라고도 하고 하는데 쉽게 말해서 이제 제품을 더 좋은 제품을 만들려면 많은 사람들이 다음 단계로 넘어오게 만들어야 됩니다. 그래서 Aa라이라는 개념을 알게 되면 이제 좀 더이 서비스를 바라보는 어떤 틀이 생깁니다. 그러면 이제 이걸 이해했으면이 제품이 성공할 제품인가라는 거를 또 알아야 되잖아요.이 제품 되겠네. 아, 이거 시장에서 먹히네라는 말을 조금 어려운 1:30:17 말로 표현하면 프로덕트 마켓을 찾았다라고 합니다. PMF를 찾는다. 이런 말이 있거든요. 어, 좀 먹히네란 말입니다. 그래서이 시장에서 먹히는 거를 어떻게 판단할 수 있을까요? 다양한 이론이 있긴 한데 좀 주요하게 보는 이론 중에 하나가 뭐 리텐션 커브가 이렇게 평탄화해지면 PMF를 달성했다라고 합니다. 이게 무슨 말인가? 보면 리텐션이 아까 뭐였죠? 리텐션이 힙 유저이거든요. 그러니까 유저가 계속 사용하게 되는 거. 그래서 이게 어떻게 변화하는지를 보면은 이게 평탄화가 된다. 어 그러면 어 좀 친해라는 거를 알 수가 있습니다. 그럼 실전으로 보자면 구글 애널리틱스 한글 쓰시는 분들은 보고서 쪽에 유지라고 있습니다. 유지. 이렇게 유지로 들어가면 동물상 테스트 같은 어떤 테스트형 서비스는 다시 쓰는 사람이 그렇게 많지는 않잖아요. 평탄화가 되긴 했어요. 되긴 했는데 거의 0.5%에서 평탄화가 됐습니다. 그래서 이런 건 이제 일회용 서비스다라고 이해할 수가 있겠습니다. 그러면 약간 성공하는 서비스라고 하면 약간 요렇게 되는 거죠. 요렇게. 그래서 사람들이 꾸준히 쓰는 겁니다. 꾸준히 이게 요렇게 된다 그러면 어 좀 친해 이런 서비스입니다. 그래서 1:31:18 PMF를 달성했다라고 이해하시면 좋을 것 같습니다. 물론이 평탄화되는 정도가 다르거든요. 그 서비스의 어떤 특성에 따라. 그래서 그거를 좀 소개해 드리자면 토스피 세션에서 요거는 이승권 대표님이 하신 말씀인데 대충 이렇게 20%에서 평탄화가 되면 어 괜찮은 회사다. 이거는 좀 좀 사업을 할 만하다라는 회사라고 칠 수가 있을 것 같고 40%는 이제 유니콘급 토스가 뭐이 정도 됐다고 해요. 70%는 이제 세상을 바꾸는 회사다라고 합니다. 그러면 실제 사례들이 좀 궁금하잖아요. 다른 서비스들을 어떻게 됐을까? 요즘에 AI 서비스가 좀 핫하다고 하는데 AI 서비스들은 얼마에서 평탄화가 됐을까가 좀 궁금하잖아요. 직접 한번 보도록 하겠습니다. 가장 AI 시대 핫한 제품이라고 하면 채 GPT잖아요. 이게 유지율이 68%라고 합니다. 12개월 동안도 계속 평탄하게 68% 쓴다. 네. 엄청난 겁니다. 세상을 바꿨죠, 지금 채 G지PT가 그게요 정도가 됩니다. 근데 재미나이는 좀 낮아요. 재미 나이는 57%입니다. 그래도 유니코급 이상이죠. 그거 이상으로 TMF를 찾은 제품이다라고 할 수가 있겠습니다. 실패한 앱은 그러면 어느 정도까 생각이 들잖아요. 소라라는 앱 아시나요? 오픈에 만든 소라 한 때 1:32:18 엄청 반짝했다가 다시 사용하는 사람들이 그렇게 많지 않아요. 측정해 봤더니 어느 정도 나왔냐? 30일째 유지율이 8% 미만입니다라고 합니다. PMF가 조금 안 맞았네, 잘 못 쳤네라고 할 수가 있겠습니다. 다른 좀 주요한 소비자 앱들 30일 유주율이 한 30%를 넘는다라고 합니다. 여러분들이 뭘 만드셨는데 리텐션 그래프를 보니까 30%가 넘는다. 여러분은 진짜 성공하신 겁니다. 네. 그래서 이거는 앱을 잘 만든다고 해서 이게 높은게 아니고요. 계속 실험을 해 봐야 됩니다. 계속 출시하고 리텐션 보고 출시하고 리텐션 보고 하면서 지표들 계속 확인하면서 이거를 늘려 나가야 된다라고 소개를 드릴 수가 있겠습니다. 근데 수치가 딱 정해진 건 아니에요. 앱의 유형별로 다르잖아요. 예를 들어서 에듀케이션 교육 앱 같은 경우 사람들이 기본적으로 잘 안 씁니다. 30일 뒤에도 꾸준히 계속 공부한 사람이 얼마나 될까요? 30일에 2.69%밖에 안 된다고 합니다. 그래서 이것만 해도 나쁘지 않은 겁니다. 그리고 다른게 좀 높죠. 예를 들어 카지노 많이 합니다. 카지노 30일 뒤에도요 정도. 다른 거에 비해서 확실히 높죠. 네. 그래서요 정도가 나왔다 하면은 그냥 어느 정도 좀 친다라고 보시면 되겠습니다. 그래서 분야별로 다르다. 그래서 PMF를 찾았다라는 걸 요약해 1:33:20 보면 0으로 수렴하지 않고 바닥이 생긴다. 그게 뭐 5%든 10%든 크게 상관없습니다. 그럼 이렇게 요렇게 됐다 하면은 기본적으로 PMF가 어느 정도 달성이 됐다라고 이해하시면 좋을 것 같습니다. 그다음에 아하 모먼트라는 것도 좀 소개를 드리겠습니다. PMF를 달성하는 어떤 제품을 만들고 싶다라고 한다면 아하 모먼트를 만들어 줘야 되는 경우가 많습니다. 내 서비스를 이용할 때 아하 어이 서비스 너무 좋다라고 느끼는 그 포인트를 만들어 줘야 됩니다. 예를 들어 이런게 있습니다. 페이스북 같은 거 보면은 처음 가입하자마자 10일 안에 일곱 명의 친구가 생겼다 그러면은 얘가 장기 고객이 된다고 합니다. 이런 조건들이 있어요. 각 서비스마다 다 특징이 다르겠죠. 결국에 어떤 서비스마다의 아하 모먼트가 있고 그걸 찾아서 유저들한테 억지로 친구 일곱 명 억지로 만들어 주고 파일 저장을 어떻게든 하게 만들고 하면은 이제 유저가 어 이게 되네 하고 장기 고객 리텐션이 높은 고객이 되는 겁니다. 그래서 결국 요약하자면 이렇습니다. 어떤 가설을 세우고요. 어 이렇게 바꾸면은 사람들이 많이 쓰지 않을까 해서 실제로 만들고 그다음에 실험을 해 봅니다. 실제로 실험을 해 가지고 1:34:20 사람들한테 출시하고 써 보세요 한 다음에 데이터 저희 구글 애널스나 클레리티나 이런 거 붙였잖아요. 그래서 데이터를 확인해서 어 이게 먹히네 리텐션이 많이 나오네 하면은 이제 성공한 거고 아니면은 다시 새로운 가설 세워 가지고 이걸 계속 반복하면은 내 서비스가 좋아집니다. 그러다 보면 PMF도 찾고 뭐 하 모먼트도 찾고 해가지고 그걸 억지로 밀어붙이면 유니콘 기업이 되는 겁니다. 용어가 괜히 복잡하지 사실 별 얘기 아닙니다. 용어가 좀 그냥 한교사투리일 뿐이에요. 근데 사실 이전까지는 이런 가설을 세우는거나 실험을 하는거나 데이터를 확인하는거나 사람이 해야 됐거든요. 근데 요즘에는 이제 AI가 도와주는게 너무 많죠. 그래서 이런 것도 나왔더라고요. 구글 애널리틱스 MCP도 나왔습니다. AI가 구글 애널리틱스의 데이터에 직접 접근해 가지고 데이터를 가져오고 실제로 분석해 가지고 그 결과를 알려주고 하는게 이게 통합이 이런 식으로 MCP를 통해서 뚫려 있어요. 그러다 보니까 이제는 사실 이런 가설 검증 이런 것도 채피pt 이런 클로드나 이런 AI로 깔깍만 하면은이 데이터 다 조회하면서 분석해서 알아서 가설도 설정해 주고 코드도 알아서 바꿔 가면서 검증도 알아서 해 주고 1:35:21 배포도 알아서 해 주고 AB 테스트라고 두 개 막 바꿔가면서 실험하는 것도 알아서 해 주고 하니까요. 네. 그래서 요즘에는 훨씬 쉬워졌다. 네. 그래서 요런 것들을 이제 저희가 제품 만들면서 계속 반복해 보도록 하겠습니다. 내 도메인 파비콘도 넣고 하면 조금 더 있어 보이게 되겠죠. se go라는 개념을 배워보고 직접 적용을 해 보도록 하겠습니다. 순위를 올려 가지고 그 키워드를 검색했을 때 양을 늘린다. 퍼스널 컬러 1등을 하고 계신데 요걸로 1억 버셨다고 합니다. 바이러럴 구조를 어느 정도 만들어 놨기 때문에 그만이 있어도 계속 들어옵니다. 몇 클릭이 일어났는지 자세하게 다 볼 수가 있습니다. 제 동물상 사례를 좀 소개해 드리겠습니다. 동물상이 [음악] 어떻게 퍼졌나 내 서비스의 주 타겟에 맞는 시청자들한테 가야 돼요. 종합을 해 보자면 일단은 퍼널 설계를 굉장히 정교하게 잘 하시고 그 PMF를 잘 찾는 그 아이템을 만들어서 최대한 단단한이 퍼너를 만드신 다음에 그다음에 요렇게 신규 유입을 늘리고 이탈을 줄이는이 상황에서 유저를 들이붙기만 하면은 계속 이게 잘 됩니다. 예. 그래서요 개념만 좀 이해하시면은 서비스를 잘 만드셔서 이제 리텐션 어느 정도 나오는 PMF를 찾았다 인플로우로들이 붙고 1:36:21 그리고 나가는 거 줄이고 유저 피드백 받으면서 개선하고 하면은 이제 완벽해지는 겁니다 서비스가. 그러면 이제 1조 유니콘 뭐 100조 유니콘이 될 수가 있는 겁니다. 생각보다 별로 어렵지 않죠.이 원리가. 그래서 요렇게 진행하시면 된다. 네. 참고 자료 본 거 중에 어 이거 되게 유용합니다. 여기 나온 내용들 이번 강의에 많이 담았는데 토스의 세션 이승권 대표님 진행하신게 있는데 요거 보시면 아마 많이 도움되실 것 같고요. 그다음에 요거는 언더커버 사일로라고 오늘 배운 이런 내용 있잖아요. 전반적인 내용들을 약간의 예능 형태로 이렇게 만든게 있는데 한번 아 이런 식으로 토스에서 문제를 해결하는구나라는 어떤 사고 과정을요 예능이라도 한번 보시면 좀 더 재밌게 배우실 수 있지 않을까라고. 네. 이제 2주차까지 끝내신 겁니다, 여러분들. 그래서 기획하고 첫 수익내는 것까지 이제 에드센스 이용해서 했고요. 유입 성장 AirrR이라든가 캐리 캐시티라든가 이런 개념 좀 이해하시면 데이터 분석이 왜 중요한지 아실 겁니다. 마케팅 하는 방법 이런 것도 좀 소개를 드렸습니다. 이렇게까지만 해도 사실 수익을 올리실 수 있는데 3주 차부터가 진짜입니다. 왜냐면 이때부터 글로벌 결제가 들어갑니다. 글로벌 타겟으로 결제를 만드셨다. 그거는 바로 수익으로 직결이 됩니다. 어 1:37:22 4주차 가시면 이제 반복 매출도 낼 수도 있고요. 그다음에 5주 차 되면은 퍼포먼스 마케팅이나 좀 실무, 미국 법인 이런 것도 알려 드리니까요. 전반적으로 거리큘럼 한번 다 들으시면 유니콘 기업을 만드실 수가 있겠습니다. 5주 동안 쭉 잘 따라오셔서 글로벌 유니콘 되시기를 응원하겠습니다. 좋아요 안 누르신 분들 한 번씩만 부탁드리겠습니다. 멤버십 가입도 많이 해 주시면 아주 감사드리겠습니다. 고생하습니다. 3주차 이제 결제를 구현을 어떻게 하는가가이 수업의 어떻게 보면 핵심일 것 같거든요. 그래서 오늘 그거를 배우는 시간입니다. 그래서 실제로 결제할 만한 서비스를 만들어 가지고 이제 완성할 예정입니다. 참고로 이름을 바꿨습니다. AI 프로덕트 빌더라는 말을 앞에 붙이니까 아 왠지 어려워 보여. 네. 그리고 3주차부터는 바이브 코딩 1인창업과 부트캠프로 그만큼 쉬운데 임팩트가 크다라고 할 수가 있겠습니다. 지금 3주차 보고 계시고요. 이제 얼마 안 남았습니다. 자, 3주차 목차. 일단 돈될 만한 아이디어가 뭔지 알아볼 예정이고요. 그다음에 리액트를 왜 쓰는가에 대해서 알아보고 리액트로 개발을 하려고 하고 그리고 서버리스의 개념에 대해서 배우고 AI API를 연결해서 AI를 갖다 쓰는 걸 해 볼 겁니다. 그다음에 바이브 디자인으로 1:38:23 디자인하는 거 배워 볼 거고요. 그다음에 글로벌 결제 붙이는 거 그리고 이메일 전송 서비스 고도화까지 진행해 보도록 하겠습니다. 그러면 시작해 보도록 하겠습니다. 먼저 돈될 만한 아이디어 기획 단계부터 시작을 해 보겠습니다. 뭘 만들어야 되는가? 저희 목적은 진짜 비즈니스 가능성이 있는 1인 창업을 할 수 있는 아이디어로 기획을 한 다음에 돈을 버는 거잖아요. 그래서 돈될 만한 아이디어로 시작을 해 보도록 하겠습니다. 네. 일단은 1주차 강의 들으신 분들 아시겠지만 돈 되는 거를 만들어 줘라고 뭐 AI한테 시켜도 아직은 잘 못 찾는게 굉장히 복잡한 것들이 엮겨 있어요. 사람들이 뭘 좋아하고 사람들이 왜 결제를 하고 하는 그걸 다 이해하고 가도 쉽지 않은데 AI도 최적의 AI 모델을 만들려면 엄청 훈련을 시켜 가지고 가장 아래쪽에 효과적인이 지점을 찾아가는 과정입니다. 그거와 비슷한 거 같습니다. 시장에 맞는 제품을 찾는 거 이런 식으로 하면 됩니다. 가설 세우고 실험해 가지고 데이터 확인하면서 아 이게 맞다. 사람들이 좋아한다. 결제를 한다라는 걸 계속 반복하는 증명의 과정이 필요합니다. 근데 꿀팁이 있습니다. 이미 사실 증명이 된 것들이 좀 있습니다. 이런 1:39:23 공식을 좀 이용해서 어느 정도 검증을 하고 시작하는 거잖아요. 그래서 증명된 부분이 늘린다는게 무슨 말인가를 보면 이미 돈이 도는 시장이라는 건 이미 사람들이 지불 의향이 있다라는게 증명이 된 거잖아요. 실제로 사람들이 장사를 하고 누군가 구매를 하고 하는게 활발하고 그 시장 규모가 크다라고 한다면 여기에 이제 뭔가 내 프로덕트를 만들어서 차별점을 만들고 뚫고 가면 PMF 아하 모먼트만 찾으면 끝난다라고 알 수가 있겠죠. 그래서 저는 이런 생각을 했습니다. 좀 개인적인 경험을 말씀드리면 실제로 제가 이용했던 서비스입니다. 저 패션을 진짜 엄청 못 입거든요. 뒤지게 못 입습니다. 오스에 대한 개념 자체가 아예 없는 사람인데 제가 순다피차이와 단독 인터뷰를 했거든요. 구글 CEO.이 이 기회가 잡혔을 때 그냥 추레하게 입고 가면 안 되겠다라는 생각에 실제로 제가 이분한테 컨설팅을 받았습니다. 그래서 렇게 입고 간 것도 있고 토스에서 촬영하는 예능도 있었어요. 좀 제대로 된 옷을 좀 사 봐야겠다 싶어서 요런 셀팅을 실제로 받았는데 꽤 비쌉니다. 이미 돈이 되는 시장입니다. 돈이 돌고 저도 실제로 지부를 했고 그리고 이런 명언이 있습니다. 페인티 핑크 포 우먼이 먹힌다. 그래서 실제로 1:40:25 핑크 텍스라는 말이 있죠. 네. 그래서 맨 버전의 어떤 운동앱 한 달에 5,000달러 번다면 우먼 버전 비슷한 건데 400K를 번다. 수익 규모가 다릅니다. 그래서 확실히 소비를 한다라는 측면에서는 여성의 소비력이 좀 높은 거 같거든요. 여성분들이 결제하는 거에 좀 열려 있다라고 볼 수 있을 것 같은데이 두 가지 아이디어를 좀 차관을 했습니다. 실제로 당연히 있습니다. 여성 패션 메이크업 헤어 컨설팅 있죠? 기본적인 어떤 단단한 코칭 얼마냐? 온라인 13만2,000원. 온라인 이게 베이한 온라인 코스고요. 프리미엄 컨설팅을 하게 되면 50만 원 정도 하고 77만 원 880만 원까지 있습니다. 굉장히 큰 시장이다라고 알 수가 있겠습니다. 이런 명언이 생각났습니다. 제프 베조스가 한 말인데 your margin is my opportunity 이런 시장에 너무 비싼데 내 기회인 겁니다. 들어가면 됩니다. 그리고 AI로 단가 확 낮춰 가지고 시장을 파괴시킬 수가 있습니다. 디지털 트랜스포메이션이라고 하잖아요. 예전에도 컴퓨터 없었을 때랑 컴퓨터가 생기고 세상이 다 디지털 트랜스포메이션이 됐거든요. 그러면서 이제 훨씬 효율화가 되면서 엄청 비용이 낮아졌는데 AI가 도입되면서 1:41:26 마찬가지의 기회가 왔습니다. 그 시장을 싹 먹을 수 있습니다. 이런 말진이 보이는게 있다. 왜 비싸지? 어, 사람이 들어가서 비싸구나. 싹 다 먹을 수 있습니다. 그래서 오늘 만들어 볼 거 AI 퍼스널 스타일리스트를 개발해 보도록 하겠습니다. 어, 되게 간단합니다. 리액트로 프론트엔드 만들고 백핸드는 API 쓸 겁니다. 그래서 최치TI한테 너는 뭐뭐 전문가야. 미리 세팅을 쫙 해 놓은 다음에 사진과 신체 정보가 있잖아요. 요걸 넘기면은 얘가 전문가처럼 행세를 하니까 이런 컨설팅과 완벽한 옷을 입은 이런 사진 다 생성을 해 줄 수가 있겠죠. 그다음에 리액트를 왜 쓰는가를 좀 소개를 드리도록 하겠습니다. 그 전에 일단 라이브러리라는 개념과 프레임워크라는 개념이 있습니다. 괜히 용어만 보면 어려울 수 있는데 쉽게 생각해서 그냥 갖다 쓰는 거라고만 기억하셔도 돼요. 조금 더 구체적으로 설명드리면 뭐냐? 관련 도구가 모여 있다라고 이해하시면 좋을 것 같습니다. 예를 들어 기계 수리용 프레임워크라고 하면 기계를 수리하는데 필요한 렌치 뭐 몽키 스패너 뭐 등등 해 가지고 쫙 모여 있는 거 있죠. 이런 도구 모음이 라이브러리 프레임워크다. 즉 이거를 갖다 쓴다라고만 생각하시면 됩니다. 그래서 왜 갖다 쓰냐? 지금까지 HTML, 1:42:28 CSS, 자바스크래프트 배워 가지고 웹사이트 잘 만들었는데 이걸로 뭐든지 할 수 있거든요. 프론트엔드 측면에서는 이게 사실 끝입니다. 여기서 굳이 리액트라는 걸 왜 쓰냐? 왜냐면 너무 많아요.이 지저보네요. HTML 파일만 어 너무 많죠. 그리고 코드를 보면은 사실 중복된 것도 너무 많아요. 그래서 아 이거 중복도 좀 줄이고이 체계화해 가지고 싹 압축시킬 수 있는 단결한 형태로 만들 수 없을까라고 생각이 들어 가지고 고민하다가 나온게 이제 라이브러리와 프레임워크입니다. 구체적으로 좀 라이브러리에 뭐고 프레임워크가 뭔지만 좀 소개를 드리면 라이브러리는 좀 더 내가 주도권을 가진다. 즉 요런 식으로 한 줄해서 임포트라는게 이제 가져오는 거거든요. 가져오는 걸로 이렇게 한 줄 가져와 쓰는게 이제 라이브러리고 프레임워크는 이미 탁 짜여져 있어 가지고이 규칙대로 써. 규칙이 정해져 있어서 쓸 수 있는 거 요런게 프레임워크라고 합니다. 그래서 그럼 뭘 쓸 거냐? 사실 라이브러리 프레임워크가 널렸거든요. 순위가 높은 거 쓰시면 됩니다. 순위가 높은 거라고 한다면 사람들이 많이 쓰는 거, 자료가 많은 거기 때문에 예전에는 검색해서 찾거나 뭐 선배한테 물어보더라도 많이 아는 사람들이 있어야 그걸 물어보고 커뮤니티에 물어봐도 사람들이 많이 알아야 답변을 받잖아요. 요즘은 AI 1:43:30 시대가 되면서 순위가 높아야 데이터가 많이 인터넷상에 있으니까 AI도 그걸로 많이 학습했어요. 즉 AI도 더 똑똑합니다. 그렇기 때문에 일반적으로 그냥 순이 높은 거 쓰시면 그냥 데이터가 많고 AI가 잘 도와준다라고 할 수가 있겠습니다. 그래서 오늘 타입스크립트를 써 볼 예정이고요. 왜냐니까. 그리고 요런 조사도 있습니다. 스택오플로라고 개발자 질문 답변 사이트에서 웹 프레임워크 기술 1등이 뭐냐? 노드 JS가 1등이고 요거는 자바스크립트를 돌리기 위한 어떤 환경이다 보니까 이거는 워낙 많이 쓰고 그다음에 이제 리액트가 2등입니다. 그 정도로 이제 모든 분야에서 압도적인 어떤 점유율을 갖고 있다라고 볼 수가 있겠습니다. 그리고 뭐 프론트엔드 프레임워크 중에서도 압도적으로 리액트가 1등을 하고 있습니다. 네. 그렇기 때문에 리액트가 1등이니까 쓴다라고 이해해 주시면 좋을 것 같습니다. 그래서 리액트를 쓴다라고 일단 총 정리를 드립니다. 리액트 안 쓰셔도 됩니다. 사실 순수 HTML, CSS, 자바스크립트로 모든 걸 다 만들 수 있고 이걸로 파일 구조만 좀 커진다 뿐이지 다 만들 수 있는데 좀 이렇게 압축해 주니까 그래서 좀 더 구체적으로 소개해드리면 리액트는 이런 개념이 있습니다. 컴포넌트라는 개념이 있는데 용어는 아실 필요 없어요. 1:44:31 그냥 이런 컴포넌트라는게 있어서 좀 더 코드가 줄어듭니다. 이것도 배치를 하게 되면 줄여 쓸 수가 있고 이런 글도 활용을 할 수가 있겠죠. 재활용을 그래서 쓴다라고 이해해 주시면 좋을 것 같고요. 네. HTML 기억나시나요? 1주차 때 배웠는데 요거를 이제 조금 어려운 말로 봄이라는 개념이 있습니다.이 다큐먼트 오브젝트 모델이라고 대충 이거를 다큐먼트라고 부릅니다. 이렇게 부모 자식 이렇게 연결된 걸. 근데 이거를 요런 식으로 좀 풀 수도 있어요. 그래서 얘가 HTML이 제일 부모고 여기 안에 자식 있잖아요. 헤드라는 태그 자식과 바디라는 태그 자식. 형제라고 부릅니다. 얜 또 이런 컴포넌트들이 막 여러 개 이렇게 뭉쳐 있으면 데이터도 왔다 갔다를 많이 해야 될 텐데 요거 관리를 각 컴포넌트끼리 뭐 데이터를 주고받을 때 쓰는 프롭스랑 스테이트라는 개념이 있습니다. 패런트에서 자식한테 전달하는 거 프롭스라고 그러고 여기 자체에 쓰는 거 스테이트라고 그러고 하는데 요런 개념이 있다. 리액트가 요런 식으로 돌아간다라는 어떤 큰 개념이고요. 그래서 이게 되게 편리해요. 프롭스 스테이트 이런 걸로 관리하는게 좀 좋다라고 이해해 주시면 좋을 것 같습니다. 그리고 비트라는게 있습니다. 비트는 뭐냐? 이것도 그냥 골라는데 어떤 분들은 또 원리가 너무 궁금한데 되게 궁금하실 수 있으니까 그래서 그냥 부가적으로 알려 드리는 거지 이걸 이해하실 필요가 없습니다. 1:45:32 이제 그래서 아무튼 비트라는게 왜 필요한가도 조금 소개를 드리면 리액트가 아까 막 자체적으로 컴포넌트라고 해서이 묶음도 만들고 뭐 데이터 주고받고 이런 거 만든다고 하잖아요. 리액트라는 건 그냥 페이스북에서 이걸 처음 만들었어요. 어떤 자체 툴입니다. 자체적으로 만든거다 보니까이 문법을 알아먹으려면 결국 이렇게 변환해야 되거든요. 그래서 쉽게 말해서이 리액트를 요렇게 바꿔 주는 애가 비트다라고 이해하시면 좋을 것 같습니다. 그래서 결국에는 리액트를 통용되는 HTML CSS 자바스크립트로 바꿔야 됩니다. 이게 비트가 해 준다. 그리고 1주차 때 내용 자바스크립트 역할 기억나시나요? 브라우저에 대한 처리. 그리고 HTML CSS를 바꾸는 거 제목입니다. 했다가 이걸 탁 지우고 뭐 어떤 숫자가 들어가는거나 숫자가 바뀐다거나 이렇게 누르면 바뀌고 바뀌고 이렇게 많이 바뀌다 보면이 HTML 입장에서는 자바스크립트로 얘를 바꿔 바꿔 계속 바꿔 바꿔 해야 됩니다. 즉 자바스크립트 양이 많아져요. 바뀌는게 많은 앱에서는이 리액트를 쓰는게 되게 유리한게 리액트라는 걸로 개발을 하고 비트라는 걸로 압축을 하게 되면 결국엔 HTML CSS 자바스크립트가 나오는데 여기서 자바스크립트의 비중이 좀 큽니다. 바뀌는게 많은 웹에서는 1:46:34 되게 유리합니다. 자바스크립트 양이 많아 가지고 팍팍 바꿔 줍니다. 일단 요런 특징이 있다 정도로 이해해 주시면 될 거 같습니다. 대충 그냥 아, 요런 식으로 돌아가는구나라는 개념만 잡으시면 되지 아실 필요가 없습니다. 왜냐 AI 다 해주기 때문에. 그러면은 또 이런 생각이 들 수 있어요. 프레임워크 이런 거 너무 많은데 예를 들어 넥스트 JS 요거 요즘 핫하다는데 요거 왜 안 쓰세요? 혹은 이거랑 무슨 차예요? 이런 것도 궁금하실 분들 있을 거예요. 자, 이렇게 두 개 뭐가 다르냐? 그러려면은 사실 좀 이해가 필요한게 있습니다. 저희가 IT 프로덕트는 프런트엔드랑 백핸드로 나눠져 있다라고 소개드릴 수 있잖아요. 보통 이런 리액트 같은 거는 이제 프론트엔드 전용 라이브러리라고 부릅니다. 프론트엔드를 돌리기 위해서 브라우저에서 돌아가는 걸 만들기 위한 도구고요. 넥스는이 리액트를 한 번 더 덮어 가지고 여기에 어떤 서버 기능까지 추가한 겁니다. 그래서이 넥스트가 좀 더 무거워요. 그래서 리액트 기반으로 이것저것 많이 붙여 놓은 도구다라고 해서 메타 프레임워크 뭐 이런 식으로도 부릅니다. 프론트엔드 프레임워크라고 하면 정확한 원리를 좀 소개해 드리면 프론엔드 클라이언트에서이 브라우저가 있잖아요. 크롬에서 인터넷 접속한다라고 하면 그거를 그냥 CDN이라는 캐시에서 이렇게 받아오는게 끝이거든요. 그래서 1:47:35 서버에서 뭐 돌아가는 로직이 없습니다. 프론트엔드만 한 HTMLS 자바스크립트는 없는데이 CDN이 뭐냐면 저희 클라우드 플레이어 쓰잖아요. 그게 CDN 업체라고도 하는데 클라우드 플레이어가 세계 곳곳에 서버를 두고 내가 어떤 사이트를 올리면 이게 전 세계로 배포가 돼서이 백핸드 서버가 있는 곳이 전 세계에 있는 겁니다. 근데 거기에 CDN 중에 이제 캐시 영역에 제 HTML을 올려 놓은 겁니다. 그렇기 때문에 이제 그 주변에 프론트텐드에서 접근하면 제가 요걸 싹 받아올 수 있는네 요런 구조로 되어 있는게 이제 인터넷 세상인데요. 정적 웹이 이런 동식으로 정작합니다. 넥스트 JS 같은 거는 실행이 필요한 서버에서 돌아가는 동작도 필요합니다. 그래서 HML CSS 자바스크립트 비트 리액트는 저희가 클라우드 플레어 페이지스에 올렸죠. 그래서 얘는 캐시된 것만 전달하는 제품입니다. 그러니까 저장만 딱 해 놓고 사람들이 줘 하면 딱 그냥 받아오는 거. 그거는 컴퓨팅 파워가 별로 안 들거든요. 그래서 서버 연산이 필요 없어 가지고 공짜입니다. 공짜. 그래서 저희가 요걸로 만드는 겁니다. 근데 넥스트 JS나 리믹스나 뭐 이런 메타 프레임워크 좀 복잡한 것들이 있어요. 얘네는 뭘 하냐? 캐시된 것 전달하는 거. 물론 해요. 얘네도 있는데 실행이 서버에서 돌아가는 것도 1:48:36 있어요. 그러니까 백엔드도 어느 정도 이용하는 것도 있어요. 코드 실행이 서버에서 필요하니까 컴퓨팅 파워가 들잖아요. CPU가 돌아가거나 뭘 돌아가면은 이게 돈이 들어가요. 그래서 서버 연산이 필요하기 때문에 비쌉니다. 그냥 이제 다 잊어버리시고 공짜 어 돈 든다.이 정도만 이해하시면 됩니다. 네. 그래서 이제이 워커스랑 백엔드가 뭐가 다르냐를 좀 소개를 드리면 백엔드에서 돌아가는 어떤 프레임워크가 또 별도로 있습니다. 자바스크립트는 익스프레스 돌아가고 뭐 파이썬 장고 이런 돌아가고 하는 서버가 따로 있는데 요즘에는 이제 서버 리스라는 방식을 써 가지고 요걸 많이는 안 쓴다. 물론 많이 쓰기도 하지만 이제 서버리스 방식으로 하는게 좀 대세가 됐다라고 간략하게 좀 소개를 드릴 수가 있겠습니다. 그럼 직접 이제 리액트 비트 그걸 만들어 보도록 하겠습니다. 파이어베이스 스튜디오 이전처럼 들어가 주시고요. 새로운 프로젝트 만들어 보도록 하겠습니다. 그러면 여기 파이어베이스 스튜디오 접속하셔서 겟스타티드 눌러 주도록 하겠습니다. 이번에는 리액트 앱을 만들 겁니다. 뉴 워크스페이스 요거 눌러 가지고 다양한 프레임워크 왔는데 리액트 여기 있습니다. 그래서 리액트랑 비트 요걸로 선택해서 만들어 주도록 하겠습니다. 네. 리액트 프로젝트가 열리고요. 퍼스널스타일리스트. 1:49:38 점스튜디오라는 도메인을 샀습니다. 아, 근데 20 캐릭터니까 얘는 빼고 퍼널 스타일리스트로 만들어 보도록 할 텐데 여기서 중요한 거 타입스크립트를 선택해서 1등 쓰면 AI가 그래도 조금 더 잘 알 거잖아요. AI가 좀 더 잘 아는 걸로 선택하고 크리에이트를 해 보겠습니다. 그래서 이렇게 만들어 주시면 되겠습니다. 예. 그럼 알아서 이제 리액트가 다 깔려 있고요. 여기 구조가 이제 조금 폴더가 좀 체계적으로 좀 정리가 된 거 같은데라는 느낌이 있죠? 어우, 생성이 돼서 그러면 시작해 보겠습니다. 일단 요렇게 해서 이제 리액트 비트랑 같이 잘 실행이 됐습니다. 구체적으로 좀 코드를 보면 어, 좀 다르게 생겼어요. 근데 당연하게도 이해할 필요가 전혀 없습니다. 이거 뭐 세부적인 코드를 알 필요가 없어요. 조금 다르네라고 이해하시면 될 거 같습니다. 일단은 배포부터 해 볼까요? 여기서 작업하고 실제 웹사이트로 연결되는 그 흐름을 먼저 만들면 좋겠죠? 그러면 기타브 들어가서 뉴가서 레포지스토리 네임으로 퍼스널 스타일리스트 얘는 스튜디오로 제대로 만들어 보겠습니다. 이렇게 만들고 자 이제는 코드가 공개하기에는 좀 꺼려질 수도 있어요. 왜냐면 이것저것 많이 넣을 거기 때문에 그래서 퍼블릭보다 프라이빗으로 하시는 걸 추천드립니다. 혹시나 뭐를 1:50:38 보완적인 어떤 이슈가 있을 수 있으니까 프라이빗으로 하시는 걸 추천드립니다. 그래서 이렇게 만드신 다음에 크리에이트 레포스토리 눌러 주시면 됩니다. 그러면은 이제 여기 주소가 나오죠. 여기 주소에 코드를 일단 올려 보겠습니다. 아, 여기 클로드부터 깔아야겠다. 클로드나 뭐 재미나이나 이거는 이전에 보셔서 아시죠? 강의 자료에도 나와 있는데 진행해 볼게요. 네, 설치됐고요. 여기까지 되셨으면 클로드한테 시키는 것만 이제 하면 되고요. 그래서 이제 여기에 저희 레포지터리 만들었으니까이 주소에 올려야 된다. 복사 하고 들어와서 이렇게 붙여 놓고 여기에 코드 올려 줘. 그럼 알아서 푸시라는 말도 쓰죠. 어, 설정돼 있지 않습니다. 설정하고요. 연결됐습니다. 그러면 성공적으로 푸시가 됐다고 하니까 새로고침해 보시면 어, 푸시가 됐고요. 그다음에 클라우드 플레이어 연결까지 해 두겠습니다. 워커스 앤 페이지 들어가서 크리e 어플리케이션 들어가서 페이지스 돈 안내는 거 요걸 누르셔야 됩니다. 누르고 그다음에 요거 연결 누르고 스타일리스트 스튜디오 요거 눌러서 비기 딱 하면은 네, 이렇게 세팅이 되는데 여기서 차이점이 있습니다.이 아래쪽에 빌드 세팅이라고 있죠? 비트 이용해서 그 빌드에서 코드를 뭉쳐서 HTML, 1:51:38 CSS, 자바스크립트로 만든 행위를 여기서 진행합니다. 프레임워크로 리액트, 비트 요거 있죠? 요거 이용해서 만들 겁니다. 그럼 알아서 이것도 다 입력이 됩니다. 그래서 요거는 세이브 눌러 주시면 되겠습니다. 그러면 이제 디플로이가 되고 있고요. 그러면 여기서 이제 빌드도이 클라우드 플레이어의 코드를 얹어 가지고 돌아갑니다. 됐습니다. 이제 전 세계 배포가 완료됐고요. 들어가 보시면 저희 퍼스널리티 스튜디오 페이지 데브 여기에 완벽하게 지금 프로덕션으로 돌아간 걸 볼 수가 있습니다. 딸깍 사이클이 완성이 됐습니다. 그래서 이제는 기터브도 연결됐고요. 그다음에 페이지까지 연결이 됐습니다. 대신에 여기에 이제 리액트로 바뀐 것뿐이죠. 이제 요렇게 연결이 됐으면 이제 리액트에 대한 세팅은 끝났습니다. 네. 이제 리액트 개발 여기다 시키면 됩니다. 이제 그 구조를 얘한테 입력해 주면 되겠죠? 뭘 만들고 싶은지. 네, 입력을 해 주겠습니다. 어, 일단은 프런트엔드 화면부터 만들어 볼게요. 그래서 얘는 명령을 입력하기 나름입니다. 한 번에 싹 다 만들 수 있는데 저희는 이제 배우는 거니까 배우는 거니까 하나씩 해 볼게요. 화면부터 만들고 싶은데 퍼스널 스타일리스트 서비스를 만들 거야. 본인, 사진과 1:52:40 키, 몸무게를 입력하는 화면 만들어 줘. 누르면 알아서 다 만들어집니다. 입력 화면을 만들었습니다. 네, 이렇게 됩니다라고 했는데 오, 나만의 스타일을 찾아보세요. 네, 이렇게 힘 몸무게 분석 시작이라는 화면이 만들어졌습니다. 네, 그러면 이제 핵심 기능을 구현할 겁니다. 기본적인 입력은 끝났고요. 얘를 받아줄게 필요하죠. 자, 이제 서버리스 들어가겠습니다. 자, 원리 간단해요. 프론트 만들었죠? 사진 신체 정보 넘길 겁니다. 어디다 넘길 거냐? 오픈해야 API 쓸 거고요. 그래서 요렇게 넘겨 가지고 AI가 딱 분석하고 컨설팅 내용과 생성된 사진 주면 끝인데 지금 이게 끝났습니다. 요것만 해서 연결하면 됩니다. 서버리스라는 개념에 대해서 알아보도록 하겠습니다. 이전에 잠깐 소개를 드리고 넘어갔는데 백엔드 서버 프레임워크가 따로 있다고 했어요. 뭐 리액트 이런 건 딱 프론트 엔드에서만 돌아가는 어떤 프레임워크라고 한다면이 백엔드를 원래는 컴퓨터 한 데를 다 빌렸어요. 익스프레스 장고 뭐 이런 거 설치해 가지고 여기서 막 백핸드를 돌리고 프런트엔드 프레임워크는 따로 있고 그래서 요렇게 요렇게 소통하는 구조로 보통 만들었습니다. 생각해 보니까이 백핸드가 좀 아까워요. 어떤 1:53:41 서비스들은 프런트엔드 위주로 이렇게 돌아가다가 가끔 한 번씩 API 찍 호출하고 띡 받고 요런 식으로 하는데 백엔드가 24시간 하루 쟁일 계속 켜놔 있어야 되고 이거 돈도 비싸거든요. 이게 좀 아까운 거예요. 그냥 종량제로 쓸 수 없을까라고 해서 탄생한게 종량제 백엔드 서버리스라는 개념입니다. 즉 서버는 없다. 근데 사실이 있어요. 사실이 있는데 간략하게 종량제로만 쓰겠다라는 거죠. 그래서 뭐 대표적으로 AW 남다, 클라우드런, 엣지 펑션, 워커스가 종량제 백엔됩니다. 서버적인 어떤 처리를 할 때 필요한 거를 잠깐 빌려쓴다. 요청할 때 켰다가 꺼지고라고 하는게 이제 종량제입니다. 그 서버를 한대 통째로 안 빌려 된다는 거죠. 그러면 이제 저희는 뭘 쓸 거냐? 저희가 이제 클라우드 플레어 페이지스라는 화면단 즉 프론트엔드만 딱 캐싱했다가 주는 그거 쓰고 있잖아요. 거기에 워커를 이렇게 살짝 붙일 겁니다. 딱이 워커랑 통신을 하는 거를 만들어서 백엔드를 동양제로 쓸 건데요. 이게 이제 클라우드 플레이어에서 제공을 합니다. 아예 이거 자주 쓰니까 클라우드 플레이어 페이지스에 쓰는 펑션스라고 해서 클라우드 플레어 페이지 펑션이라는 이름으로이 제품이 나와 있습니다. 그럼 얘의 역할은 뭐냐? 1:54:42 이걸 왜 쓰냐라고 좀 근본적으로 생각해 보면 사실 모든 처리를 여기서 싹 다 처리할 수도 있긴 하거든요. 왜냐면 얘도 컴퓨터잖아요. 내 가스는 내 컴퓨터가 프론트엔드잖아요. 클라이언트고. 그럼 내 컴퓨터에서 모든 처리를 다 돌려도 되는데 프론트엔데 넘어가면 안 되는게 있습니다. 사용자한테 넘기면 안 되는 것들이 있어요. 예를 들어 API 키 같은게 있거든요. 여기 키가 있습니다. 그래서이 보안 정보는 딴 사람들의 프런트엔드에 넘기면 안 됩니다.이 보안 키는 사실 넘어가면은 해킹하고 털고 할 수가 있잖아요. 그래서 이런 키 같은 거를 숨길 수 있는 어떤 백엔드적인 역할하는게 꼭 필요하긴 합니다. 그렇기 때문에이 백엔드 워커를 쓴다라고 이해하시면 좋을 것 같고 이거의 이름이 클라우드 플레어 페이지스 펑션스라고 부른다라고 간단하게 이해해 주시면 좋을 것 같습니다. 그래서 뭐 이렇게 만드는 스택이 좀 표준화가 돼 가지고 잼 스택이라고 부릅니다. 전반적으로 이래서 탄생했다. 그래서 저희도 이렇게 개발하려고 하고요. 그래서 잼스택으로 개발한다라고 하시면 좋을 것 같고 아까 설명드렸듯이 접속하는 거 무제한 공짜로 쓸 수 있습니다. 대신에 워커 비용만 딱 내면 되죠. 필요한 딱 요청만. 그리고 뭐 이런 것도 다행히 좋고요. 그래서 요렇게 개발한다라고 소개를 드립니다. 네. 1:55:43 그래서 이제 서버리스까지 개념을 이해하셨죠? 그러면 이제 서버리스에 붙일 API에 대해서 배워 보도록 하겠습니다. 백엔드를 살짝 종량제로 조그만 거 빌려 가지고 함수 단위로 호출한다라는 개념을 이해하셨죠? 그러면은 그걸로 뭐 할 거냐? 저희가 열쇠를 보관할 수 있기 때문에 AI API를 쓸 겁니다. 그래서이 개념에 대해서 배워 보도록 하겠습니다. 이런 유머 핫 AI 스타트업 있잖아요. 와 AI 쩐다. AI로 엄청난 거 만들었다 하는 스타트업들을 다시 싹까 보면은 그냥 채피pt 래퍼가 들어가 있습니다. 즉 여기 API가 들어가 있는게 끝이고 AI 기능을 보통 자체적으로 잘 안 돌립니다. 그러면 일단은 API 뭔지 모르시는 분도 있을 것 같아서 그래서 이게 뭔지 알아보고 배워 보도록 하겠습니다. 자 API도 마찬가지입니다. 그냥 큰 개념에서 이해할 때는 갖다 쓰는 거라고 이해하시면 됩니다. 그래서 갖다 쓰는게 사실 끝인데 조금 더 그냥 구체적으로 알아보자면 API가 어플리케이션 프로그래밍 인터페이스의 약자입니다.이 말이 어렵잖아요. 근데 하나씩 좀 풀어 보면 어플리케이션 프로그래밍은 좀 알 거 같잖아요. 내 앱 어플리케이션 프로그래밍 뭐 하니까 들어보셨죠? 근데 인터페이스가 뭔가 이거 좀 어려워요. 인터페이스가 1:56:43 뭐냐? 서로 다른 두 개의 시스템 장치 사이에 정보 신호를 주고받는 경우의 접점이나 경계면 와, 이것도 어려워요. 그래서 UI 생각하시면 좋을 것 같아요. 유저 인터페이스 들어보셨나요? 유저와 앱이 상호 작용하는 어떤 UI라는 거를 누르고 당기고 밀고 하는게 UI잖아요. 그럼 API는 뭐냐? 앱과 프로그래밍 언어로 상호 작용할 때 규칙입니다. 예시로 보겠습니다. 예를 들어 요런 백엔드가 있고 요런 프론트 엔드가 있습니다. 그러면 API라는 규칙을 통해서 요청을 주고 응답을 받고 하는 요런 규칙입니다. 규칙. 개념적으로 이해해 보면 아 그럼 이런 규칙이 있으면이 API라는 거를 잘 정의를 해 놓으면 다른 프론트엔드 클라이언트들에서 API로 뚫어 놓은게 있다면 요청해 가지고 어떤 데이터를 받아가고 하는 걸 할 수 있게 뚫어 놓은게 API라고 이해하시면 될 것 같습니다. 그리고 규칙이 어떤 식으로 돼 있냐? 구체적으로 좀 보자면 이런 식으로 돼 있습니다. 뭐 주소 어디에 요청하는지 알아야 요청을 보낼 거잖아요. 그래서 어디에 요청하고 그리고 방식은 뭐고 보낼 것 여기에 요청할 때 뭐 내 키 몸목에 사진 이걸 보낸다. 그러니까 뭘 보내는지가 정의가 돼 있고요. API에 그다음에 1:57:45 응답도 딱 정의가 돼 있습니다. 제이슨이란 형식으로 오는데 제이슨이 뭐냐 요런 거. 제이슨 객체가 이런 거 있잖아요. 자료 구조거든요. 그러니까 자료의 어떤 형태인데 이름은 홍길동이다. 그리고 나이는 25이다. 이런 거 있잖아요. 이렇게 제이슨 객체가 어떤 키와 밸류로 구성된 명찰과 실제 값으로 구성된 데이터들이 이렇게 모여 있는 겁니다. 그래서 이름은 홍길동, 나이는 25 이렇게 돼 있잖아요. 이렇게 키와 밸류 쌍이 이렇게 묶인 자료의 형태가 제이슨이라는 자료 형태라고 부릅니다. 결국에는 API가 응답을 준다라고 하면 이런 제이슨이라 형태로 줍니다. 보통 그 개념만 이해하시고 대충 요청을 뭔가 날렸더니 응답이 요런 식으로 온다라고 이해하시면 좋을 것 같습니다. 핵심은 이겁니다. 이것만 딱 기억하세요. 갖다 쓴다. 그래서 오픈 AI 같은 초재들이 만든 AI 있잖아요. 우리는 API랑 연결 해 놨으니까 우리 프로그램에 가져다 쓸 수가 있어요. 이렇게 쓰게 되면 모델은 오픈 AI가 보유한 상태로 내 프로그램만 이렇게 갖다가 쓸 수가 있습니다. 요런 형태로 쓰는게 이제 API라고 부릅니다. 그러면 직접 이제 실습을 해 보겠습니다. 여기에 AI를 붙여서 실제로이 사진도 받고 1:58:46 키도 받고 몸무게도 받아 가지고 그걸로 연산을 해 가지고 결과를 주면 끝이죠. 뭘 할지 이해했으니까. 이제 하나씩 필요한 명령어들을 수행하겠습니다. 클라우드 플레이어 페이지스 펑션스 백핸드 살짝 빌리는 거를 사용해서 오픈 AI의 API를 통해 스타일 컨설팅 보고서를 받고 싶어. 코드 써 줘. 요렇게. 그래서 그냥 얘를 딸깍 누르면은 아 좋습니다. 이제 다 짜졌습니다. 생성된 파일 구조 조금 소개해 드리면 자 여기 폴더 보면 펑션스라는 거 안에 API라는 폴더가 있고요. 여기에.ts라는이 파일이 들어갔습니다. 그래서 여기 쭉 내려가면은 API 어 아까 배웠죠? API 어op 오픈i.com 그러니까 오픈에 AI의 어떤 서버에 뭔가 쏘는 거 같죠? 이렇게 보내는 주소가 여기 있어요. 오, 프롬트도 짜졌어요. 당신은 퍼스널 전문 스타일리스트입니다. 요거대로 설정해 주면 이게 뭐랑 똑같냐면 채치피pt에 이렇게 입력하고 여기에다가 아래쪽에 내 키 190, 내 몸무게 90, 사진 이렇게 이거랑 똑같은 겁니다. 지금 뭐 하는 짓이냐면 API를 1:59:47 쓴다는 개념 이거를 지금 프로그램한테 시키는 거예요. 여기 UI에서 하면 귀찮으니까 이걸 프로그램이 코드로서 자동으로 돌아가게 만든 겁니다.이 짓을 하면 어떻게 되냐? 안녕하세요. 전문 퍼스널 스타일리스트의 관점에서 분석해 드리겠습니다. 키나 비율이나 몸무게 이런 거에 따라서 잘 추천해 주는 걸 볼 수가 있죠. 이거를 이제 여기서 안 하고 내 사이트에서 하게 만들겠다 이거죠. 그러면 어떻게 해야 되냐? 오픈 AI API 홈페이지가 있습니다. 로그인. 로그인 해 줍니다. 이렇게 나이 체크해 가지고 요거 하시는 거 있고요. 이거 일단이 나이랑 이런 거 입력하고 계속을 누릅니다. 자, 이렇게 뜨시면은 여기에 뭐 오나이제이션 네임 이거 개인적으로 쓰시는 분들은 그냥 퍼스널 쓰셔도 되고 아니면 조직 이름 쓰셔도 되고요. 퍼널 할게요. 이런 거. 이것도 사실입니다. 그냥 아무거나 하셔도 돼요. 팀 이거는 팀에 쓰는 거니까 생략해도 되고요. 퍼스트 API 콜. API 콜을 할 건데 그 API에 대한 열쇠를 만들어라. 프로젝트도 좀 관리하면 좋으니까 뭐 스타일리스트네 스타일리스트라는 프로젝트로 해 볼게요. 그리고 얘는 테스트 키 시작을 합니다. 어 키가 나왔는데 이거 주의하셔야 될 점이 노출되면 안 됩니다. 그래서 저처럼 이렇게 누군가 보여 주고 있다. 이게 싹 털립니다. 2:00:48 이거 카드 만약 등록해 놓으셨으면 여기 돈 싹 다 빠져나가니까 요거 주의하셔야 됩니다. 얘는 이제 백엔드에 숨겨 놔야 되는 꽁꽁 숨겨 놔야 되는 코드입니다. 얘는 메모장 어디 저장해 놓으세요. 그리고 이런 식으로 쓰면 된다라고 이렇게 가이드가 나와 있죠. 그래서 CURL이라는 방식, 또 뭐 노드라는 방식, 파이썬이라는 방식 다 쓸 수 있다라고 이렇게 가이드도 있고. 네. 넘어가서 일단 돈이 필요합니다. 아까 설명드렸다시피 AI를 갖다 쓰는 거잖아요. 그 오픈 AI가 자선 사업이 아니잖아요. 오픈 AI에서 AI를 끌어 쓰면은 여기서의 GPU가 돌아갑니다. 그래서이 GPU가 돌아가는 비용을 우리가 쓸 때마다 종량제로 내야 됩니다. 그래서 5 크레딧 있는데 충전을 해 놓으셔야 쓸 수가 있습니다. 네. 그래서 카드 등록도 해 주시고요. 네. 요거 카드 등록 후에 쓰시면 되겠습니다. 그래서 지금까지 사실 도메인 제외하고는 다 공짜였는데 여기서 이제 처음 돈이 발생하겠네요. 그리고 이미 쓰시던 분들이 있다 하면은 여기서 프로젝트 새로 만들어서 하는 것도 좀 보여 드릴게요. 위크 테스트 들어가서 크리에이트 프로젝트를 누르면 프로젝트를 만들 수가 있습니다. 저는 위크 3를 만들게요. 여기서 대시보드를 들어가시면 이제 API 관리하고 뭐 키 생성하고 하는게 2:01:48 있습니다. 그래서 매니에 API 키스 들어가면 여기서 키를 만들 수가 있어요.이 프로젝트에 대해서. 그러면 키를 하나 만들어 주도록 하겠습니다. 아까 테스트 1 만들어 보겠습니다. 네. 그래서 신규 가입은 아까처럼 하시면 되고 기존 회어은 저처럼 이렇게 진행하시면 되겠습니다. 네. 이제 준비가 끝났습니다. 이제 키를 등록하고 쓰시면 되는데 일단 API 키를 관리를 여기서 해야 되는데 그거랑 추가로 얘는 보면은 아무래도 이제 AI가 학습한지가 좀 됐다 보니까 이게 옛날 코드로 돼 있는 경우가 있어요. 그래서 최신 코드를 써야지 동작할 때가 있거든요. 그럴 때는 어떻게 해야 되냐면 대시보드에서 챗으로 들어갑니다. 그래서 여기서 미리 연습하고 최신 코드를 받을 수가 있거든요. 그래서 크리 눌러서 한번 새로 만들어 볼게요. 그러면 여기서 막 세팅해 가지고 실험을 할 수가 있습니다. 그 실험한 코드가 잘 동작한다 하면은 그대로 가져가면 되거든요. 자, 그럼 여기서 그 실험을 해 볼게요. 어, 여기에 디벨로퍼 메시지가 이제 AI의 어떤 역할을 부여할 거 혹은 AI에 미리 설정해 놓을 거 이렇게 입력을 하고 여기가 유저가 쓰는 메시지거든요. 이렇게 하고 누르면 메시지가 갖고 어, 이렇게 알아서 막 GPT 5.2가 돌아가죠. 그러면서 요런 2:02:49 식으로 분석을 해 주는 걸 볼 수가 있습니다. 돈이 얼마나 나가냐 궁금하잖아요. 일단 GPT 지금 기준으로 5.2가 최신 모델입니다. 5.2 기준으로 100만 토큰을 입력하는데 1.75달러, 출력하는데 14달러가 됩니다. 근데 이거는 100만 토큰이니까 이게 어느 정도 분량이냐면 한번 계산을 해 볼게요.이 프롬트의 길이만큼 돈이 나가거든요. 이걸 눌러 가지고 여기에 넣어 주고요. 그리고 얘도 그거잖아요. 입력하는 거. 그래서 입력한 토큰을 다 때려 넣으면 네. 지금 이렇게 하면은 109 토큰을 썼습니다. 얘가 인풋 토큰이고요. 아웃풋은 달라지겠죠. 왜냐면 AI 답변에 따라 달라지니까. 대량만 보면은 북하면 아, 답변이 기니까 돈을 많이 먹죠. 177 토큰을 먹어요. 총 얼마가 되냐? 0.02달러가 든다고 합니다. 네. 그러면 요즘 환율 치면은 한번 연산하는데 29원 정도가 듭니다. 즉 리포트 하나 발간을 한다. 29원씩 들어갑니다. 네. 그래서 이걸로 이제 원가 계산을 해 볼 수가 있겠죠. 그렇게 어려운 작업이 아니라면 좀 약한 모델 뭐 미니 모델 같은 경량 모델을 쓰는게 비용이 쌉니다. 아무튼 내 이런 최신 API 비용 요런 식으로 계산하실 수 2:03:51 있다라고 소개를 드립니다. 그래서 요렇게 만든 어떤 프롬트가 있다. 그러면은 여기 점점점 있죠? 점점점을 누르시면 코드가 있습니다. 코드를 눌러 보시면 어떤 코드로 요청을 해야 되는지 최신 코드로 나오게 됩니다. 그래서 좀 달라졌어요. 실제로 V1하고 리스폰시스라고 돼 있는 코드로 나오는데 클로드가 짜준 코드는 챗 컴플리션이라는 걸 쓰거든요. 옛날 방식입니다. 이게 아니라 이제 최신 방식을 쓰려면 여기에 나온 이걸 써야 된다라고 복사해 가지고 알려 주면 됩니다. 그래서 여기에 붙여 주시고 이거 참고해서 최신 코드로 업데이트 해 딱 하면은이 워커 함수를 고쳐 주겠죠. 네. 이렇게 업데이트 해 주시면 되고요. 프리뷰 환경도 만들어 줘. 네. 왜냐면 여기서 테스트해 보고 실제로 올려야 되잖아요. 그래서 여기서 테스트할 때 쓸 거 하나 만들어 볼게요. 그리고 뭐 설치해야 되는 것도 있습니다. 랭글러라는 걸 설치해야 이게 클라우드 플레이어 워커 돌릴 때 혹은 클라우드 플레이어 관련 어떤 제품들 돌릴 때 랭글러라는 걸 설치해 씁. 그래서 요거 설치하는 것도 보여주고 있습니다. 어, 됐다. 점d. 여기에 API 키를 2:04:53 입력하세요. 카드 등록 돼 있으신 그 키를 넣어 주시면 됩니다. 그다음에 테스트 어떻게 하냐? 로컬 실행해. 네. 그래서 알아서 명령어 실행을 해 주죠. 오, 됐다. 이제 실행됐고 이게 동작하는지 한번 테스트해 볼게요. 나만의 스타일을 찾아보세요. 사진을. 아, 아, 이거 드래그앤 드로 안 돼 있다. 또 시킬게요. 사진 올릴 때 드래그 앤 드롭도록 만들어. 그래서 드래그 앤 드롭을 추가했습니다. 아, 되네요. 되네요. 이렇게 요렇게 되죠. 이렇게 요렇게 올려 놓고. 오케이. 자, 그러면 이제 요렇게 입력을 받을 수 있게 됐습니다. 이제 여기서 분석 시작을 누르면 이제 API 연결이 돼야 되죠. 될지 모르겠습니다. 일단 에러날 수도 있는데 한번 시도를 해 보면 과연 어, 됐어요. 됐어요. 어, 성공. 이제 기능적으로도 완성입니다. 그래서 이런 거, 이런 거 잘 나오죠? 네. 이렇게 일단 기능적으로 완성이 어느 정도 됐습니다. 자, 여기까지 하면은 이제 어떤 것까지 한 거냐? 오픈해야 API 이용해 가지고 쫙 요청하고 응답을 받아와서 보여 주는 것까지 했죠. 근데 하나 더 하면 좋을 것 같은게 이미지 API도 써 가지고 나와 잘 어울리는 어떤 패션, 나와 잘 어울리는 화장, 헤어스타일 이런 2:05:53 걸 해 주면 좋겠죠. 이미지 API를 그럼 써 보도록 하겠습니다. 얘도 이미지 API도 마찬가지로 오픈 AI에서 제공을 합니다. 그럼 대시보드에서 이미지로 한번 실험 해 볼게요. GPT 이미지 1.5가 더 싸니까 좀 싼 걸로 해 볼게요. 1.5로 하고 제 사진을 넣은 다음에 너는 최고의 헤어 스타일 리스트야. 첨부한 사진과 어울리는 헤어스타일로 바꿔 줘라고 하면 바꿔 주겠죠. 어, 얼굴이 좀 바뀐 거 같긴 한데. 네. 아무튼 요렇게 이게 최고로 어울리는 스타일이라고 합니다. 근데 이것만 하면 좀 아쉽잖아요. 그래서 이런 방법이 있습니다. 예를 들어 너는 최고의 헤어 스타일리스트야. 3 * 3 그리드로 하면은 이미지 하나당 비용은 똑같은데 총 아홉 개의 이미지를 하나 가격으로 똑같은 가격에 아홉 장을 뽑아 볼 수가 있습니다. 단, 첨부한 사람의 얼굴은 절대 바꾸지 말고 기존 얼굴 그대로 유지하고 헤어 스타일만 바꿔. 예, 요런 거, 요런 거 해 줘야죠. 그래서 여기서도 마찬가지로이 오픈 AI 대시보드에서 실험을 해 보고 아, 여기서 코드를 이제 뺏겨 가면 됩니다. 이렇게 어울리는 헤어스타일. 어, 이런 식으로 다양한 것을 찾아볼 수가 있겠죠. 그러면 요거에 대한 2:06:55 코드 코드가 여기 있습니다. 코드를 뽑아 보면 요렇게 코드가 나옵니다. 여기서 저희는 CURRL요 방식으로 할 거거든요. 요것도 싹 복사해 가지고 바이오베이 스튜디오 또 클로드한테 코드 복사한 거 싹 붙이고이 코드 참고해서 결과 리포트에 헤어 스타일도 만들어 첨부하도록 해죠. 예.요 정도 시켜 보겠습니다. 예. 그러면 알아서 개발을 해 주고 있고요. 그리고 이제 테스트해 보겠습니다. 스타일 분석 시작. 오 나왔습니다. 오 스타일 분석 결과 최형 분석 퍼스널 컬러 넘어가고 사진. 어 굉장히 잘생기셨네요. 갑자기 얼굴이 좀 바뀌었어요. 아홉 가지를 뽑아 볼 수가 있겠습니다. 아무튼 이제 완성입니다. 아 이거 하면 기능적으로 끝이에요. 추가로 그냥 잠깐 소개 드리면 요즘에 이런 식으로 붙이는게 저희 GPT뿐만 아니라 뭐 오픈 AI뿐만 아니라 구글 클라우드 이런 데서 나노바나나 이런 거 붙여도 되고요. 아니면 레플리케이라는 곳에서는 이렇게 다양한 온 디바이스로 풀린 오픈 소스 모델이나 이런 것도 붙일 수 있게 API를 제공해 주는게 있습니다. 애플리케이트도 들어가 보시면 이런 거 오픈 소스제 Z 이미지 이런 거 그 오픈 소스로 풀린 거 이런 것도 API로 쓸 수 있게 돼 있습니다. 그래서 이렇게 기능적인 거 완성 2:07:56 끝냈습니다. 그래서 이제 글로벌하게 또 결제를 받을 수 있는 글로벌 결제를 붙여 보도록 하겠습니다. 크게 일단 돈 버는 방법에서 이거 1주차 때도 소개드렸었는데 저희가 이전에 광고 에드센스 붙이는 거 구현했었죠. 나머지 결제 파트를 저희가 진행을 해 보겠습니다. 네. 결제를 뭘 붙여야 되냐라고 했을 때 글로벌 AI 프로덕트 이런 거에 표준적인 결제가 있습니다. 스트라이프라는 회사 아마 들어보신 분들 많으실 겁니다. 스트라이프라는 회사가 결제 인프라 표준입니다. 그래서 스트라이프를 붙이면 진짜 글로벌 표준에 맞춘 겁니다. 그래서 가장 좋은 어떤 결제 수단인데 글로벌 표준에 맞추기가 쉽지 않습니다. 이런 안타까운 이유 때문에 한국에는 스트라이프가 못 들어왔습니다. 2026년 1월 24일 기준으로 못 씁니다. 쓰는 방법도 있긴 해요. 그래서 5주차 때 그거 알려 드릴게요. 미국 법인을 세우지 않는 이상 스트라이을 쓰는 방법은 없습니다. 막혔습니다. 그래서 뭘 해야 되냐? MOR이라는 서비스를 써야 됩니다. 이게 뭐냐면 merchant트 오브리코드라는 거의 약자입니다. 말이 어렵지? 고객에게 실제로 물건을 판 판매자로 법적으로 기록되는 주체가 머트 오브 리코드입니다. 얘네는 뭐 하는데이 2:08:58 글로벌 결제가 가능하냐? 폴라라는 회사가 결국에 스트라이프를 붙이고 있어요. 그래서 폴라가 우리 서비스 대신해서 고객들의 돈을 받아 줘요. 즉 사람들은 조코딩이란 회사에서 사는게 아니라 폴라라는 것을 끼고 구매를 합니다. 즉 판매 주체가 폴라가 되는 거예요. 나눠줄 때 스트라이도 당연히 수술로 떼가고요. 콜라도 자기네 수술을 먹고요. 남은 거를 넘겨 줍니다. 법인 대행의 느낌이죠. 그래서 요런 구조로 되어 있다라고 소개를 드릴 수가 있을 것 같고요. 그러다 보니까 이런 차이가 있습니다. 스트라입을 쓴다. 수수료가요 정도 나옵니다. 결제당이 정도 발생을 하게 되고요. 근데 폴라 같은 걸 쓰면은 4% 그리고 40 그래서 조금 더 비싸죠. 또 수술가 붙는게 있어요. 뭐 이렇게 보내는거나 이런 거 추가 요금이 있긴 하거든요. 그래서 종합적으로 최종 떼는 거는 이따가 보여 드릴게요. 아무튼 이렇게 수술을 떼다. 그래서 해외를 뚫을 때 요거 하면은 그래도 다 대신 뚫어 준다. 그래서 수수료 좀 내고 이런 걸 써야 되는데 이런 업체들이 되게 많거든요. 폴라 이번에 쓸 거 얘네가 좀 가성비 있게 나왔습니다. 왜냐 얘네 좀 신생 업체예요. 좀 수수료가 가성비 있게 나왔어요. 나머지 뭐 레몬 스퀴지 패들 이런 데는 상대적으로 조금 더 비싸더라고요. 그래서 요걸 쓰려고 합니다. 실제로 저도 출금을 한번 해 봤습니다. 2:09:59 동물상 테스트 결제를 받았거든요. 47.66달러 이렇게 받았는데 수수료 떼고 44.85달러가 85달러가 남았고요. 그래서 요거 위드드로 하면은 10달러 이상이면 출금 가능하거든요. 결국에 스트라이 통해서 들어오긴 합니다. 이게 스트라이 페이지인데 12월 8일 날 결제를 딱 하면은 다음 날에 이제 결제가 완료되고 그리고 은행에 실제로 찍혀 가지고 들어오는 거는 11일입니다. 그래서 시간이 조금 걸려요. 한 5일 정도 넉넉하게 잡아 두시고 출금하시면 좋을 것 같습니다. 뭐 수수료도 수수료인데 또 단점이 있어요. 장사를 얘네가 대신해 주는 거잖아요. 그러니까 법적인 책임 싹 다 폴라한테 갑니다.이 폴라가 규정을 빡빡하게 해 놨어요. acceptable use 해 가지고 아 이런 것만 되고 너네 요거 안 돼 안 돼 안 돼 하는게 수두룩 빽빽하게 안 됩니다. 이걸 들어가서 보면은 금지된 사업이 요런 것들이 있어요. 이런 것도 안 돼요. 성인 서비스 이런 것도 안 돼요. 품질이 낮아도 안 됩니다. 그래서 생각보다 꽤 빡세거든요. 벼락 부자되는 뭐 이런 거 안 됩니다. 안 되는게 굉장히 많아서 여러분의 아이디어가 있다. 이거 규제 준수하는 거 맞아라고 물어보는 것도 필요합니다. 요즘에 바이브 디자인 시대입니다. 사이트야 딸깍. 멋진데요? 야, PC 화면까지 2:10:59 놀랍게도 1트만에 된 거거든요. 이게이 정도입니다. 이제 7결째 돼요. 진짜 돈을 받을 수 있는 이런 서비스를 완성하신 겁니다. 벌써 31.92달러가 일어났습니다. 감사드리고요. 리포트가 이메일로 존송됐습니다. 깔끔하게 이메일로. 네, 그러면 시청해 주셔서 감사드리고요. 좋아요 안 누르신 분들 한 번씩만 꼭 부탁드리고 다음 주에도 뵙도록 하겠습니다. 감사합니다. 코딩 1인 창업가 부트캠프 4주차 과정 진행해 보도록 하겠습니다. 그리고 강의 자료 제가 올려 놨으니까요. 4주차 강의 자료 받아 주시면 좋을 것 같고요. 4주차 목차 소개해 드릴 수 있도록 하겠습니다. 데이터베이스의 개념 그리고 스토리지 개념에 대해서 배워 보고요. 그다음에 회원 가입 로그인 기능을 구현을 해 볼 겁니다. 그냥 회원 가입 기능뿐만 아니라 이제 SNS랑 연동해서 뭐 구글 로그인, 카카오 로그인 이런 거 그리고 마이페이지 이런 기본적인 기능 만들 거고 구독형 서비스를 구현하려고 합니다. 그래서 구독 그리고 결제를 유도하는 어떤 좀 심리적인 트릭 같은 것도 배워 보려고 하고요. 그리고 무료 체험을 걸어 보려고 합니다. 무료 체험이 있으면 아무래도 공짜로 이용해 보세요 하고 카드 걸어 놓으면은 나중에 며칠 뒤에 자동 결제된 경험 한 번쯤은 있으셨을 겁니다. 그리고 CCLTV라는 또 2:12:01 새로운 판교 사투리를 배워 보도록 하겠습니다. 그다음에 구독 관리하는 거 뭐 크롬잡이라고 이제 정기적으로 어떤 작업을 수행하는 것도 만들어 보도록 하겠습니다. 네. 그다음에 서비스 고도화 빠르게 한번 진행해서 이번 주에는 서비스 고도화 해 볼 수 있도록 하겠습니다. 터널 분석. 그다음에 페이지 속도 최적화 뭐 이런 것도 추가로 해 보도록 하겠습니다. 끝까지 시청해 주시면 감사드리겠습니다. 그러면은 이제 이번 주에 구현할 기능을 먼저 소개해 드리도록 하겠습니다. 일단은 지난주 좀 복습을 해 보자면 지난주 3주차까지 어떤 걸 구현했나? 글로벌 서비스로 사진이랑 요거 올려 가지고 스타트하면은 3.99달러를 딱 결제를 하고 그다음에 결과를 받아보는 요런 형태였죠. 즉 뭐 로그인, 회원 가입 이런 거 전혀 없이 바로 내 정보 그리고 그냥 결제만 딱 날리면은 이제 성공을 했다 하면은 결과 딱 여기까지 구현을 해 봤습니다. 그러다 보니까 뭔가 저장할 필요가 없어요. 한번 딱 날려서 오픈해 AI가 그걸 받아 가지고 한 번에 싹 처리하면 끝입니다. 그래서 뭔가 데이터베이스라는 개념 자체가 필요가 없었습니다. 그런데 오늘 구현할 건 뭐냐? 이게 계속 결제하면은 귀찮잖아요. 고객도 그게 진입 장벽이 2:13:01 되니까 이게 전환이 잘 안 나옵니다. 반복 매출이 날 수가 없고 리텐션이 안 나옵니다. 그래서 기본적인 정보는 딱 한 번만 등록을 해 놓으면 데이터베이스에 내 정보 그리고 사진 저장을 해 놓고요. 구독을 등록을 해 놓니다. 알아서 매달 반복 결제되면서 매일매일 오늘의 날씨에 맞는 스타일 리포트 보내주는 그런 형태의 구독 서비스로 전환해 보도록 하겠습니다. 그러려면 이제 내 정보를 저장을 어딘가에 해 놔야 되잖아요. 이게 매번 입력하는 그 수고를 들기 위해서 어딘가에 저장을 해야 됩니다. 그때 필요한 데이터베이스라는 개념에 대해서 배워 보도록 하겠습니다. 뭐 아까 잠깐 소개해 드리긴 했지만 저희가 프론트엔드에서 뭔가를 입력해요. 키나 몸무게나 사진이나 이런 거 입력하잖아요. 이거를 입력해 가지고 보냅니다. 근데 이전엔 그냥 휘발돼서 없어졌는데 백엔드에서는 데이터베이스라는 곳에 싹 저장하는 것까지 하면 내 정보가 이렇게 보존이 될 수가 있겠죠. 그래서 이렇게 데이터베이스란 그냥 이렇게 정보를 저장하는 공간입니다. 그래서 조금 더 빈 설명으로 풀어 보자면 뭐 여러 사람 혹은 프로그램들이 데이터를 쉽게 공유하기 위해서 체계적으로 관리되는 2:14:03 데이터의 집합이라고 합니다. 대충 데이터를 저장하는 곳이다라고 이해하셔도 좋을 것 같습니다. 그래서 이게 데이터베이스라고 하고요. 조금만 더 소개를 드리면 DBMS라는 개념이 있습니다. 그러니까 데이터베이스는 어떤 데이터의 집합이라는 그냥 데이터일 뿐이고요. 이거를 관리를 해야 되잖아요. 뭐 여러 사람이 접근 못 하게 맞고 뭐 체계적으로 관리하려면 데이터베이스 매니저먼트 시스템이라는게 있습니다. 여러 회사에서 여러 제품들로 DB를 어떻게 하면은 좀 체계적으로 철저하게 관리할 수 있을까 해서 방법론도 되게 많고 회사도 되게 많은데 크게 보자면 두 가지로 나눠질 수가 있겠습니다. SQLDB라는 데이터베이스와 노 SQL DB라는게 있습니다. 자, SQL은 데이터베이스가 딱 표 형태로 정리되어 있다라고 보시면 좋을 것 같고요. 엑셀 같은 거다라고 쉽게 이해하실 수가 있겠습니다. 그리고 노 SQLTB는 뭐 얘는 뭐 그래프 형태로 된 거, 얘는 베이스 문서로 된 거, 얘는 뭐 키 밸류라고 딱 그 간단하게만 된 거 막 이렇게 있는데 크게 요런 종류가 있고 뭐 이거를 엄청나게 깊게 아실 필요는 없는데 그냥 요런 다양한 것들이 있다라고 이해하시면 좋을 것 같습니다. 네. 그러면 이제 SQLDB가 엑셀 같다고 2:15:04 말씀드렸는데 그 예시를 잠깐 보자면 1인 창업자 오주 완성에서 출책 여러분 열심히 하고 계시잖아요. 네. 요런 식으로 표 형태로 돼 있습니다. 약간 엑셀 표같죠. 그래서 이걸 조금 열어 보면 이런 거 보이시나요? 네임, 노트, 크리에이티드 열마다의 어떤 이름이 있고요. 그 열에 해당하는 노트 그리고 언제 크리에이트 됐는지 날짜 이런 식으로 딱 체계적으로 표 형태로 정리돼 있잖아요. 요렇게 생긴게 이제 SQL 데이터베이스 관계 데이터베이스라고 하는데 그런 형태로 생긴게 요런 식으로 생긴 겁니다. 엑셀 많이 써 보셨다면 이런 형태로 된 거 있잖아요. 아이디라는게 있고 뭐 네임이 있고 나이가 있고 이메일이 있다. 컬럼을 딱 정해 놓으면은 이제 계속 한 줄씩 추가되는 거죠. 그래서 1번하고 이렇게 정보 추가되고 2번 3번 추가되고 이렇게 정리하면 좋은 점이 예를 들어서 세 번째로 가입한 유적이 3번의 성별이 뭐지라고 하면 아 매일 남자입니다 하고 원하는 값을 체계적으로 찾을 수가 있잖아요. 요런 개념이 이제 관계형 데이터베이스 SQLDB의 형태입니다. 개념적으로만 이렇게 생겼다라고 이해하시면 되고 이거를 막 엄청 철저하게 아실 필요는 없는 상황인 거 같습니다. 지금은 좀만 딥하게 들어가 보자면 여기가 2:16:04 아이디가 있고 네임이 있고 에이지가 있는데 약간 규칙성이 있습니다. 아이디는 인트라고 해서 이게 숫자잖아요. 숫자. 그래서 어 아이디는 숫자고 네임은 글자. 에이지는 숫자만 들어가네. 해서 이걸 딱 고정해 놓을 수가 있습니다. 예를 들어 20살 이상을 뽑고 싶어. 코딩을 했는데 AG에 갑자기 많음 이렇게 들어가 있으면 그래서 이거를 막습니다. 그래서 아 A는 숫자형이니까 많음 이런 글자는 못 들어와 하고 딱 막으면은 데이터가 깔끔하게 이렇게 AG는 숫자만 싹 들어가 있죠. 요런 식으로 관리하는 것이 이제 관계형 DB. 그래서 DBMS가 하는 일이 요겁니다. 데이터 형식도 관리하고 누가 접근 못 하게 막고 권한 관리도 하고 하는 역할이 이제 DBMS의 역할입니다. 그리고 뭐 노 SQL DB는 좀 더 다양한 형태로 있어요. 예를 들어 레디스라는 거 많이 쓰는데 얘는 뭐냐면 오직 히 밸류밖에 없습니다. 그러면 좋은 점이 폴이라고 딱 조회하면 전화번호 바로 이렇게 얻어낼 수가 있습니다. 요청하자마자 원하는 값을 바로바로 얻을 수 있어 가지고 자주 조회하는 것들은 이렇게 레디스라는 다른 노 SQL DB로 빼 가지고 저장을 하게 됩니다. 아니면 뭐 몽고 D디라고 해서 이렇게 딱 표 2:17:06 형태로 안 하고 제이슨이라고 문서 형태로 제이슨 형태로 저장되는게 이제 몽고 DV라는 또 노 SQLTV 결국에 어떤 그 데이터를 어떤 식으로 저장하고 어떤 식으로 관리할 것인가의 문젠데 그래서 결국에 좀 요약을 해 보자면 데이터베이스란 그냥 데이터의 집합이고 이거를 관리하기 위해서 다양한 어떤 형태나 규칙이나 이런게 적용된 여러 회사의 제품들이 있다라고 이해해 주시면 좋을 것 같습니다. DV의 개념에 대해서 간단하게 소개를 드렸고요. 그래서 원래는 어떤 식으로 했냐면 이렇게 내 컴퓨터 있잖아요. 내 서버 컴퓨터에 뭐 예를 들어 포스 SQL이라는 그 SQLDB를 설치해 가지고 그냥 내 서버에서 DB를 이용을 했습니다. 근데 요즘에는 이렇게보다 더 쉬운 방법이 있습니다. 이런 래퍼들이 있습니다. 그러니까 DB를 관리하기 쉽게 잘 사스로 만들어 놓은 거 없나라고 해 가지고 만들어진게 이런 서비스들이 있습니다. 엄청 많은 제품이 있거든요. 그래서 얘네는 다 만들어 놨기 때문에 그냥 연결해 가지고 쓰면은 알아서 DB 막 최적화 터지고 줄어들고 막 하는 것도 알아서 다 관리해 주는 이런 서비스들이 있습니다. 이걸 쓰면 좋은 점이 사람이 갑자기 막 60억 명이 왔어요. DB가 감당을 못 하잖아요. 클라우드 서비스는 좋은 점이 뭐냐? 알아서 늘려 줍니다. 알아서 컴퓨터를 2:18:07 붙여 가지고 또 설치해 가지고 붙여 주고 하면은 엄청나게 많은 인구가 오더라도 요걸 알아서 늘려 주니까 그래서 사람들이 요런 클라우드 DB를 많이 씁니다. 좀 관리하기가 편하다라고 할 수가 있겠고요. 그래서 오늘 슈퍼베이스라는 서비스를 이용해서 데이터베이스를 이용해 보려고 하고요. 그리고 좋은 점 이번 강의에 사용되는 거의 어떤 주대 서비스 선정의 기준은 공짜로 얼마나 쓸 수 있는가? 빵원으로 un리미티드 API 리퀘스트도 가능하고요. 유저수로 제약을 둡니다. 5만 명의 먼슬리 액티브 유저 월간 활성자가 5만 명 이하 때는 공짜입니다. 그리고 뭐 이런 거 데이터 왔다 갔다 할 때 들어가는 것도 오기가 뭐가 쭉쭉 있는데 아무튼 요렇게 공짜로 제공해 주는 것도 꽤 있다. 그리고 한 단계만 올려도 나쁘지 않게 또 제공을 해 주기 때문에 이런 클라우드 T이 요즘 많이 사용이 되는 편입니다. 아 근데 약간 단점은 있어요. 프리 프로젝트 일주일 동안 안 쓰면은 바로 멈춥니다. 그래서 홈페이지 다시 들어가서 다시 켜 줘야 돼요. 데 두 개의 프로젝트까지 이렇게 만들 수 있습니다. 네. 그다음에이 데이터베이스는 이걸 쓸 건데 스토리지라는 또 그런 개념도 있습니다. 스토리지는 뭔가? 사실 이미 여러분들 다 쓰고 계신 겁니다. 2:19:08 구글 드라이브, 구글 포토, 네이버 앤박스 뭐 드라이브 이런 거 있잖아요. 그런 거는 그냥 파일 올려 놓잖아요. 사진도 올려 놓고 뭐 파일도 올려놓고 좀 개발자들이 쓰기 좋은 형태의 이런 드라이브가 있습니다. 그걸 스토리지라고 보통 부르는데 클라우드 플레어에도 R2라는 이런 스토리지 제품이 있고요. 아마존에 S3네 이런게 그냥 구글 드라이브의 개발자 버전. 이게 뭐 하는 거냐면 사진 같은 경우에는 DB에다가 사진을 저장한다. 여기에 들어가는게 용량이 너무 커집니다. 여기에 넣기가 살짝 무겁습니다. 사진 같은 경우에. 그래서 사진이나 영상 이런 거는 이렇게 스토리지 같은데 올려 가지고 여기서 당겨오는게 좀 정석입니다. 그래서 어디 있는지 여기 주소만 저장을 해 놓고 이미지 주소만 DB에 저장을 해 놓는 편입니다. 클라우드 플레어 R2라는 제품을 쓸 거고요. 클라우드 플레이어 R2를 쓰면은 뭐가 좋냐? 놀랍게도 송신료 없는 글로벌 개체 스토리지입니다. 원래는 아무리 드라이브라고 하더라도 데이터가 막 나가고 들어오고 하는게 엄청 활발하면은 돈이 많이 나갈 수가 있잖아요. 근데 통신료가 없는 글로벌 개체 스토리지가 클라우드 플레이어 R2입니다. 저렴한 거 쓰려고 2:20:09 하고요. 무료 사용량도 꽤 됩니다. 10GB 먼슬리 공짜로 이용할 수가 있습니다. 저희는 이제 사진 다룰 거기 때문에 그래서 생각보다 무료로 꽤 사용할 수 있을 것 같고요. 조금만 더 구체적으로 내 서버에서 밖으로 나가는 데이터 트래픽을 R2 같은 경우에 저장을 해 놓은 건 저장을 해 놓는데 당연히 쓸 때가 많잖아요. 여기도 쓰고 갔다가도 쓰고 그 나가는 비용을 무료로 제공을 해 주고요. 그래서 클라우드 플레어 R2는 E그래스 비용이 없는 오브젝트 스토리지라고 합니다. 다른 거 아마 많이 쓰시는 분들은 AWS S3 이런 거 많이 쓰실 텐데 이글레스 비용이 꽤 비쌉니다. 심지어 슈퍼베이스에서도 스토리지가 또 있습니다. 여기 걸 써도 됩니다. 여기 거 써도 되는데 저희는 제일 싼 거 쓸 거기 때문에 클라우 플레이어 R2를 사용해 보도록 하겠습니다. 혹시 가입 안 하신 분들은 각 서비스들 가입해 주시면 되겠습니다. 일단은 슈퍼베이스 가입하고 시작해 보도록 하겠습니다. 수퍼베이스닷컴으로 접속을 하셔 가지고 회원 가입을 해 줍니다. 가입하셨으면 렇게 처음에 뜨실 겁니다. 처음에 create a new 오가니ation이라고 하는데 그냥 요거는 뭐 개인으로 쓰시면은 사실 크게 상관이 없고요. 타입 퍼스널 이렇게 하시면 되고 프리플랜 크리에이트 오가니제이션을 눌러 2:21:10 줍니다. 그러면 이제 조직 만들어 줬고요. 그다음에 이제 프로젝트를 만들어야겠죠. 아무튼 이거는 그냥 프로젝트와 관련된 이름으로 정하시면 돼요. 아, 그리고 이제 데이터베이스니까 패스워드가 필요합니다. 잘 설정해 주셔야 됩니다. 네. 근데 요거 잘 어딘가에 기록을 해 놓으셔야 돼요. 이거 유출되면 큰일납니다. 이제 DB하면서 좀 주의를 하셔야 될게 보안에 대해서 좀 신경을 쓰셔야 되거든요. 회원 가입을 아마 조금 있으면 다 받으실 텐데 이때 만약에 회원가 털린다. 여러분이 그 뉴스의 주인공이 되실 수가 있습니다. 그렇기 때문에 요런 거는 잘 어디 숨겨 놓으셔야 돼요. 그래서 어려운 비번으로 해 주시면 되겠습니다. 아무튼 요렇게 하고 리즌 이거는 크게 상관없는데 저희 아시아 픽으로 하면은이 아시아에서 이용하기가 빠르고 뭐 미국 중심으로 하고 싶다 하시는 분들은 요런 걸로 선택하셔도 되겠습니다. 근데 저희는 글로벌 서비스입니다. 글로벌 서비스는 그냥 요걸로 아무튼 요렇게 해서 크리에이트 뉴 프로젝트를 하면은 이제 새로운 프로젝트가 열리게 됩니다. 그러면 요걸로 이용을 해 보도록 하겠습니다. 이제 회원 가입은 다 되신 거고요. 근데 여기에 제품 중에 어스라는 것도 제공해요. 요게 뭐냐면 회원 가입 이런 기능을 여기서도 제품 형태로 제공을 합니다. 그래서 회원 가입 기능도 이렇게 붙이기 좋게 잘 만들어 2:22:11 놨습니다. 요거 이용해 가지고 회원 가입 기능 구현해 보도록 하겠습니다. 그리고 제품들이 되게 많거든요. 뭐 스토리지 아까 뭐 딴 거 쓰셔도 되는데 이것도 있고 리얼 타임 엣지 펑션 이런 거 제품들이 되게 많습니다. 그래서 이런 거 쓰셔도 되는데 회사들이 좀 겹쳐요. 클라우드 플레이어에서도 이런 거 제공하잖아요. 그래서 그냥 더 싼 거 쓰시면 됩니다. 구글 로그인 요게 생겼습니다. 인간의 취약점을 이용하면은 결국 레비뉴가 많이 일어나게 해야 되잖아요.이 전환률을 높이려고 합니다. 돈을 낼 수밖에 없게 인간을 공략을 해 보도록 하겠습니다. 구독 들어갔습니다. 구독이 잘 됐고요. 서스크립션 들어가 보시면 트라이얼링이라고 돼 있죠. 요런 식으로 확인을 해 볼 수가 있겠습니다. 매일 아침 6시마다 이걸 받아볼 수가 있겠죠. G태그라는 걸 이용해서 이벤트를 추적을 할 수가 있는데요. 그 이벤트가 얼마나 잘 넘어가는지 퍼센트를 추적을 할 수가 있겠습니다. 정리를 해 보자면 오늘 한 거 뭐냐? 종합적으로 사스 만들어 가지고 반복 매출 구독을 통한 반복 매출 구현을 해 봤고요. 그러기 위해서 이제 데이터베이스 회원 가입 로그인 뭐 소셜 로그인 이런 것도 했죠. 구독 서비스 붙였고 뭐 프리 트라이어 이런 것도 추가하고 인간의 심리를 이용해 가지고 구매 유도하는 2:23:12 거 요런 것까지도 배워 봤습니다. 그래서 4주차 과정 이렇게 끝냈고요. 그리고 5주차 다음 주 마지막입니다. 퍼포먼스 마케팅 앱 개발도 알아보려고 합니다. 그다음에 실무 운영 퍼널 분석 저희가 맡겨 놓은 거 있죠? 퍼널 개선하는 것도 잠깐 보려고 하고요. 그리고 미국 법인 스트라이브 붙이려면 필수입니다.이 3주차 때 나왔는데 미국 법인과 스트라이프에 대해서 제 경험담이랑 쭉 풀어 가지고 소개해드릴 예정이고요. 그리고 이렇게 만든 서비스 결국에 어떻게 하면 좋겠냐? 엑시을 하는 그런 전략들 사례들 알아볼 수 있도록 하겠습니다. 그래서 이렇게 1주차부터 5주차까지 바이브 코딩 1인창업 부트캠프 진행 중이니까요. 꼭 완강하셔 가지고 직접 액시까지 네. 가실 수 있으면 좋겠습니다. 네. 파이팅입니다. 그러면 다음 주에 또 뵙도록 하겠습니다. 감사합니다. 바이브 코딩 1인 창업가 부트캠프 5주차 마지막 주차 진행해 보도록 하겠습니다. 실무 운영 다룬다고 했었는데 어떤 거냐? 저희가 2주차 때 기억나시겠지만 뭐 퍼널 분석하고 개선해야 된다 뭐 이런 얘기를 드렸는데 사실 얘기만 들으면 안 와닿잖아요. 이제 저희 프로덕트도 있고 자주차 마지막에 저희 애널리틱스 2:24:13 다 붙여 놨으니까 실제 퍼널 분석을 실제 제품으로 저희 걸로 해 볼 거고요. 그리고 개선한 그 과정. 네. 그래서 요걸로 이제 그로스를 만드는 과정을 다 보여 드리려고 하고요. 그다음에 퍼포먼스 마케팅. 아, 마케팅이 어렵다라고 하신 분들 계셨는데 퍼포먼스 마케팅은 그래도 확실하게 돈을 태운만큼 들어오니까 그 퍼포먼스 마케팅 소개를 드릴 예정이고요. 그리고 이제 이때까지는 웹사이트 위주로 달아봤는데 앱 개발 앱 개발도 궁금하신 분들 있을 거잖아요. 근데 놀랍게도 앱 개발이 어렵지 않습니다. 그래서 아, 이렇게 똑같다라는 거를 직접 간단하게 앱도 구현하고 저희 만든 서비스를 앱으로도 빠르게 구현해 보면서 아, 앱 개발 요런 식으로 하면 되는구나를 직접 만들어 보실 수 있게 다룰 예정이고요. 그리고 말씀드린 미국 법인과 스트라이프 붙이는 것도 소개를 드리도록 하겠습니다. 네. 그다음에 엑시 전략. 이게 핵심이죠. 결과적으로 사업을 왜 하냐라는 좀 근본적인 질문을 해 보자면 결국에는 돈을 벌기 위함이 가장 크잖아요. 그렇기 때문에 엑시 전략에 대해서도 구체적으로 웬만할 수 있는 모든 경우의 수를 다 소개드리도록 하겠습니다. 네. 그러면 퍼널 분석 2:25:14 및 개선을 이제 내 서비스에 적용하는 거 보여 드리도록 하겠습니다. 저희가 이제 2주차 과정에서 요걸 소개해 드렸었습니다. 가서를 설정하고 실험을 해 가지고 데이터를 확인하면서 요거를 계속 변경하면서 이걸 발전시키는 것이 프로덕트를 성공시키는 그런 길이다. 그래서 이걸로 PMF를 찾고 아하 모먼트도 만들어 가지고 그걸로 때려 박으면 유니콘 기업이 된다라고 소개를 드렸었습니다. 근데 너무 뜬그름 같잖아요. 그럴 수 있지라고 하는데 구체적으로 어떻게 하냐 저희가 직접 만든 걸로 보여 드리도록 하겠습니다. 네. 그래서 이제 직접 보겠습니다. 요거는 이제 벌 스타일스 직접 지난주에 붙여 놓은 거죠. 붙인지 딱 일주일 됐거든요. 일주일 동안에 활성자 100명이 들어왔고요. 이벤트 100건. 듀요 이벤트 두 개 구매가 발생했습니다. 구매 두 건이 발생했습니다. 네. 그래서 요거를 이렇게만 보면 커너리 어떻게 되는 건가 잘 모르겠잖아요. 여기 왼쪽 메뉴에 탐색을 들어가시면 되겠습니다. 새 탐색. 요거 빈 거 생성하신 다음에 여기서 만들어 주도록 하겠습니다. 네. 여기에서 기법을 경로 탐색 분석을 눌러 줍니다. 이제 경로가 추적이 되거든요. 유저가 아 세션 스타트부터 어떻게 갔다 뭐 이런 2:26:15 경로가 나오는데 이거를 저희가 퍼너를 달아줬잖아요. 이벤트를 다 붙여 줬거든요. 그래 가지고 이벤트를 바꿔 주도록 하겠습니다. 어디부터 시작할까요? 랜딩 페이지 들어간 거부터 한번 시작을 해 볼게요. 보통 이제 랜딩 페이지 들어가서 이렇게 접근을 하니까 거기부터 시작되는 퍼너를 보도록 하겠습니다. 네. 랜딩 페이지 뷰가 71건의 이벤트가 발생했다고 합니다. 그다음에 사람들이 가장 많이 스크롤을 했대요. 그래서 어떤 서비스인지 살펴보기도 하고 그랬겠죠. 이렇게 들어와서 사람들이 스크롤 이벤트를 했다고 합니다. 그리고 이제 겟스타티드 요거 시작을 누르는 거 그래서 클릭 겟스타티드로 들어가서 다음 이벤트 뷰인풋 보는 거죠. 이건 당연히 연결되겠죠? 그리고이 다음에 아, 근데 업로드 포터 간게 하나밖에 없습니다. 여기로 가야 되죠. 저희 퍼널상 요렇게 가야 되죠. 업로드 포터로. 네. 업로드 포터로 가서 비기 체크아웃 누르고 결제까지 가는 거. 야, 요렇게가 이제 찐 퍼널이죠. 종합적으로 좀 깔데기 모양으로 생각을 해 보자면 자, 71명이 우리 사이트 들어왔고요. 그중에서 12명이 전환이 된 거죠. 이렇게 그리고 이렇게 그리고 여기서 안타깝게도 다시 랜딩으로 돌아가시는 분도 계시고 저희가 원하는 거는 업로드 포토죠. 2:27:17 사진을 올리고 직접 이용을 해 보려는 그 고객들이 요렇게 전환이 된 거를 볼 수가 있습니다. 상당히 비율이 적죠? 요거를 좀 개선을 해야겠다는 생각이 드는데 이거 사람이 이거 일일이 보고 있는 시대가 지났습니다. 이제는 AI 시키면 되죠. 딸깍딸깍 하면 되는데 저희 클레어리티도 붙였잖아요. 네. 요거가 어떻게 돼 있는지 한번 보도록 하겠습니다. 히트 맵을 좀 보자면 네. 요런 식으로 누른 거 이렇게 개수랑 이런 거 다 파악하실 수가 있고요. 그리고 레코딩도 보실 수가 있습니다. 어떻게이 사용자가 행동을 했는지 다 녹화가 떠져 있습니다. 자, 로그인을 눌렀어요. 어, 그리고 로그인은 안 하고 뒤로 뒤로 갔어요. 어. 아, 이렇게 정보는 다 모자이크 처리되고요. 네. 이렇게 로딩되고 네. 한번 살펴보기도 하고 열심히 행동해서 무려 5분 36초간 이렇게 머무르셨습니다. 그래서 실제로 내 고객이 내 사이트에서 어떻게 행동하는지를 하나하나 다 볼 수가 있는데 이것마저도 여기 이미 AI가 들어왔어요. 네. 세션 인사이트 여기 들어가 보시면 사용자는 유튜브에서 사이트에 도착하여 유튜브에서 유입이 되셨대요. 어디에서 내 사이트로 유입됐는지 볼 수가 있고요. 그리고 2:28:17 로그인 버튼을 클릭했지만 이후 페이지 새로 고침과 뭐가 발생했다. 즉 로그인을 진행 안 하신 거예요. 이탈하신 겁니다. 로그인을 안 하시고. 그래서 시작하기 버튼을 눌렀는데도 데드 클릭이 나왔다고 합니다. 이런 거 고쳐야 되죠. 네. 장시간 페이지 열어둔 채 활동 없이 세션이 종료되는 요런 인사이트를 다 얻으실 수가 있습니다. 요게 세션 녹화 그리고 어떻게 행동했는지 퍼널이 싹 다 남아 있습니다. 요거를 이제 분석은 AI 맡기면 됩니다. 그래서 자료를 넘기면 요런 식으로 전체 퍼널 요약하고 채치T가 이렇게 답변을 줬죠. 그래서요 퍼널이 깔때기가 요렇게 되죠. 깔때기 요렇게 되고 지금 이탈이 어디서 발생하는지 이렇게 각각 볼 수가 있습니다. 여기서 문제점 다 AI가 싹 다 파악을 해 줍니다. 인사이트 1. CTA는 문제가 없음. 랜딩 페이지에서 게스타티드가 어 잘됐다고 합니다.이 정도면 눌러보고 싶다는 설득은 됐다 정도의 수준. 그래서 뭐 랜딩 더 개선하면 좋겠죠. 얘를 올리면 일단 퍼널상 더 다음 단계로 들어오는 거니까.게 스타티드 들어와서 폼은 100%. 저희 이거 이탈이 없었죠. 그러니까 뭐 로딩이 느리거나 막 뭐 답답하거나 이러면은 사실 나갈 수도 있는데 이것까지는 빠르게 잘 된 거예요. 그다음에 문제가 뭐냐? 저희 2:29:18 사진 업로드를 거의 안 해요. 딱 들어왔는데 아, 사진 업로드까지는 좀 꺼려진다. 업로드 포터가 8%밖에 안 된다. 심리적 저항이 있거나 UX가 불편하거나 왜 사진을 올려야 되는지 혹은이 사진이 유출되지 않을까 이런 보안 있잖아요. 그런 부분에서 좀 문제가 될 수가 있다라고 AI가 싹 다 분석을 해 줬습니다. 그리고 인사이트 또 하나 일단은 사진을 업로드까지 했다 하면은 일단 결제는 일단 100% 통계적으로 보기는 좀 더 많은 데이터를 넣어 줘야겠지만 이런 것도네 확인할 수가 있겠습니다. 그래서 요렇게 넣어 주시면 되고 그래서 지금 당장 해야 할 액션까지도 알려 줍니다. 이걸 어떻게 개선해야 되는지까지도 알려 줘요. 사진 업로드에서 이탈이 많이 발생하니까 이거 퍼널 이탈 안 되게 해야죠. 그러면 왜 필요한지 설명을 강화해야 됩니다. 그래서이 사진은 AI가 채형 비율 분석하는데만 사용됩니다. 이런 거 추가해 주면 좋을 것 같고요. 그다음에 사진 올릴수록 정확도가 두 배 이상 높아진 뭐 이런 거 붙여 가지고 좀 더 사진 업로드를 유도할 수 있는 이탈을 막을 수 있는 걸 넣으면 좋다라고 좀 조언을 주고 있고요. 뭐 예시 이미지 이런 거 추가해 가지고 실제로 좀 불안을 제거한 UX나 뭐 사진 없이도 2:30:19 체험하는 것도 괜찮겠다. 왜냐면 사진 올리는게 좀 이탈이 늘어나니까 그러면 사진 없는 거 하고 그거에 만족하면 더 사진 넣을 수 있게 뭔가를 더 추가한다거나 하는 그런 전략도 있겠다라고 제안도 준 거를 볼 수가 있죠. 그래서 요런 것도 제안을 해 주고 있습니다. 그리고 모바일 뭐 이런 것도 점검하라고 하고 이벤트 세분화도 좀 제안을 두고 있습니다. 저희가 퍼너를 싹 설계를 하긴 했는데 업로드 포토 전에 뭐 클릭, 퍼미션 얼로우 석세스 이런 거에 다 이벤트를 붙여 가지고 그러면은 어디서 이탈했는지 볼 수가 있겠죠. 예를 들어 사진을 눌렀는데 권한을 허용하시겠습니까? 뭐 이런 것 때문에 이탈했다라고 하면은 클릭까지는 많이 될 텐데 퍼미션에서 이탈이 많이 되거나 할 수가 있겠죠. 그 원인을 찾고 그거에 맞춤 해결책을 넣어 줄수록 더 개선을 빠르게 할 수가 있겠죠. 그러면은 이것만 연동을 잘해 놓으면 데이터 분석, 개선이 사이클 있잖아요.이 사이클 자체를 AI가 계속 순환 반복하도록 시킬 수도 있습니다. 이런 방향 중에 어떤게 실제로 좀 잘 먹힐까는 인간이 좀 더 고민하면은 좀 더 내 제품 맞춤형으로 더 발전을 시킬 수가 있겠습니다. 여기까지 해서 이제 실무적으로 내 2:31:21 제품을 완성했다가 끝이 아니라 사실 모든 제품은 다 이거에 반복을 하면서 결국에 유니콘 기업도 되고 나스닥 IPO도 가는게 요거를 반복하는 일입니다. 그래서 요거 반복하는 어떤 실무적인 지식들 그리고 실제적으로 볼 수 있는 것들을 좀 알려 드렸습니다. 퍼포먼스 마케팅이니까 이런게 싹 추적이 돼요. 이런 식으로 소재를 바꿔 가면서 테스트를 해 봤습니다. 얼마를 지출했고 노출이 얼마나 됐고 링크 클릭하는 데까지 얼마가 들었고 그리고 링크 클릭 얼마나 나왔고 하는 걸 다 추적할 수 있으니까 저렴하면서 좀 클릭이 많이 나온 거를 선택해 가지고 선택해 가지고 추여 가지고 할 수가 있겠죠. 마찬가지로 이렇게 퍼널 추적을 해 [음악] 볼 수가 있겠습니다. 요즘의대 시대다 보니까 알아서 해 줍니다. 네. 그다음에 앱 개발로 진행을 해 보도록 하겠습니다. 지금까지 저희가 웹사이트 위주로 만들었잖아요. 웹서비스에서 뭐 결제 구독 이런 거 붙여 가지고 수익화하고 글로벌 이런 거 배워 봤는데 사실 앱도 크게 다르지 않거든요. 앱 개발을 배워봄으로써 어떤 걸 좀 얻어갈 수 있냐면 웹 개발을 한번 싹 배워 놓으면 앱 개발이나 뭐 게임 개발이나 뭐 유틸리티 만드는 거 뭐 자동화 프로그램 만드는 거 다 똑같습니다. 결국에 여기서 크게 2:32:22 벗어나지 않아요. 1주차에 배웠던 IT 프로덕이 크게 보면 이렇게 생겼습니다라고 했는데 이거를 이제 다 경험해 보셨잖아요. 4주차 동안. 그게 어떤 프로덕트든 다 구조가 거의 비슷합니다. 그래서이 구조를 이해했다 그러면은 나머지가 쉬워집니다. 앱 개발도 그냥 하면 됩니다. 일단은 앱을 만든다라고 하면 방법이 여러 가지가 있습니다. 네이티브 앱이 있고요. 크로스 플랫폼 앱이 있습니다. 일단 근본을 좀 보자면 앱을 만든다라고 하면 네이티브 앱이라는게 일단 근본입니다. 왜냐면 안드로이드라는 운영 체제를 누군가 만드시고 iOS 운영 체제가 있잖아요. 거기 위에서 돌아가려면 설계에 맞게 만들어야 됩니다. 그러다 보면은 이제 처음에 운영 치제를 만들 때 자, 이런 걸로 프로그램을 만드세요라고 이렇게 가이드가 있겠죠. 그게 이제 네이티브한 방식으로 만드는 겁니다. 그래서 네이티브 앱을 근본적으로 만든다 하면은이 방식대로 만들어야 되는게 일단 근간이고요. 이거의 장점이 뭐냐? 성능이 가장 뛰어나죠. 왜냐면 OS에 딱 맞춤형으로 이렇게 만드세요라고 하는 가이드대로 만든 거잖아요. 그러니까 OS의 모든 기능을 다 이용할 수 있습니다. OS에서 제공하는 기능들을 가장 많이 이용할 수 있는게 네이티브한 개발 방식입니다. 대신에 2:33:23 단점이 있죠. 아무래도 안드로이드 따로 만들고 요즘에 앱스토어 나눠져 있잖아요. 뭐 나눠져 있으니까 아, 이게 필요한 지식이 많아요. 아무래도 두 개를 만들어야 된다라는 그 부담이 있죠. 그리고 그다음으로 한 방에 만들어 주는 거 없냐라고 했을 때 만들 수 있는게 크로스 플랫폼 앱입니다. 리액트 네이티브라고 저희 리액트 배웠잖아요. 거기에 네이티브 붙은 어떤 앱 개발용 프레임워크가 있습니다. 뭐 X4라고 타입스크립트 뭐 자바스크립트 이런 걸로 개발할 수 있게 만든 이런 프레임워크가 있고요. 또 구글에서 플러터라는 걸 만들었는데 이건 다트라는 언어를 이용해서 앱 개발을 크로스 플랫폼으로 안드로이드 iOS를 동시에 만들 수 있는 요런 프레임워크나 언어들이 있습니다. 그래서 크로스 플랫폼은 뭐가 좋냐? 당연히 하나의 언어, 하나의 프레임워크로 둘 다 만들 수가 있고요. 빠르게 양쪽 개발이 가능한데 단점 아무래도 네이티브 대비 기능이 제한됩니다. 이게 무슨 말이냐면 예를 들어 iOS 듀얼에 막 새로운 기능이 나왔어요. 내가 앱을 만든 사람인데 그 기능을 바로 적용하려면 사실 크로스 플랫폼은 이게 요걸 거쳐서 결국에 이렇게 변환하거든요. 최신 기능을 적용을 못 해요. 이게 업데이트 될 때까지 기다려야 됩니다. 대신에 효율은 너무 좋죠. 웬만한 2:34:24 기능은 사실 뭐 최신 기능을 얼마나 쓰겠어요? 그냥 기본적인 뭐 알람, 카메라 뭐 스마트폰에 있는 기능들을 웬만한 거는 다 쓸 수 있게 다 적용을 해 놨어요. 그렇기 때문에 크게 다르지 않은네 준하는 기능을 금방 구현하기엔 나쁘지 않아서 오히려 좋다. 그래서 요걸로 만드는 걸 일단은 추천드립니다. 웬만한 그냥 기본적인 앱을 만든다고 하면. 근데이 두 방법만 있냐? 아닙니다. 또 딴 방법도 있습니다. 더 쉬운 거 저희가 웹사이트 만들었잖아요. 이런게 있습니다. 하이브리드 앱이라는게 있습니다. 뭐냐면 그냥 앱 껍데기가 있고요. 안에서 웹 뷰라는게 있거든요. 그래서 그냥 웹사이트 HTML CS 자바스크립 저희가 만든 거 요거를 그냥 띄워 줄 수도 있어요. 그냥 웹사이트입니다. 안에 대신에 껍데기를 이제 앱으로 한번 감싼 거죠. 그래서 그거를 뭐 하이브리드 앱 뭐 웹 뭐 이렇게도 부르는데 이거의 장점 웹사이트를 이미 만들어 놨다. 바로 넣으면 돼요. 그냥 아무것도 처리 안 하고 그냥 바로 넣으면 돼서 제일 쉽죠. 대신에 네이티브지 낮은 성능. 이건 어쩔 수 없죠. 왜냐면 웹사이트가 안에 써야 되니까 그 웹사이트를 불러오는 데까지도 시간이 걸리죠. 그리고 네이티브한 기능을 좀 못 써요. 추가도 있는데 업데이트가 좋아요. 이게 왜 좋냐면 앱 껍데기만 있고 안에 웹사이트잖아요. 원래는 앱 네이티브한 걸 바꾼 다음에 제출하면 2:35:26 심사를 받아야 돼요. 그러다 보니까 이런 거 깐깐한 거 통과 안 해도 웹사이트만 바꾸면 그냥 바뀌어 버립니다. 그래서 넣는게 빠른 개발 업데이트 이런 면에서는 장점이 있습니다. 그리고 또 다른 것도 하나 더 있습니다. PWA라는게 있는데 얘는 껍데기조차 없어요. 굳이 나누자면 얘는 앱은 아니에요. 그냥 웹사이트인데 껍데기조차 없어요. 그냥 앱 아이콘으로 이렇게 표시가 가능한 어떤 웹사이트인데 스마트폰에서의 어떤 사용성이 좋은 웹사이트도 있습니다. 네. 그래서 앱을 만드는 거 좀 전반적으로 봤을 때 이렇게 크게네 가지 정도 방법이 있다고 볼 수가 있겠습니다. 그래서 어떤 걸 할 거냐? 그냥 웹을 감싼 거면 약간 갑어치가 없다라고 느낄 수가 있잖아요. 네. 그래서 앱스토어에 이런 정책이 있습니다. 앱은 단순히 웹사이트를 재포장한 것이 아니라 차별화된 기능, 콘텐츠, 사용자 인터페이스를 제공해야 합니다라고 해서 그냥 단순하게 감싸면은 보통 통과가 안 되는 경우가 많습니다. 단순히 웹뷰로 감싸 가지고 출시하면 거절 당합니다. 그래서 저희가 실습해 볼 거는이 X4입니다. X4는 뭐냐? 아까 설명드린 크로스 플랫폼 앱을 만드는 도구입니다. 그래서 이걸 이용해서 저희 원래 웹 개발할 때 썼던 타입스크립트 뭐 자바스크립트 2:36:26 이런 언어를 이용해서 이렇게 네이티브 앱으로 바꿔 가지고 한 번에 두 개를 만들 수 있는네 그런 프레임워크인데네 이걸 이용해서 한번 개발을 진행해 보도록 하겠습니다. 일단은데브 여기에 회원 가입을 진행해 주시면 되겠습니다. 리액트 네이티브랑 그러면 얘를 한 번 더 감쌌다라고 했는데 한 번 더 감싸게 어떤 의미인가를 좀 소개를 드리면 리액트 네이티브는 좀 더 이게 복잡해요. 뭐 SDK 그레이드 뭐 이런 거 속이 세팅해야 되고 로컬 의존이 높고요. 즉 내 컴퓨터에서 돌아가는게 되게 많고 또 빌드도 로컬에서 진행하는데이 X4는 장점이 뭐냐면 EAS라고 이렇게 클라우드에서 내가 만든 코드를 빌드해 주는 도구가 연결이 돼 있습니다. 그래 가지고 웬만한게 막 클라우드에서 돌아가고 그래서 내 컴퓨터가 좀 안 좋거나 내 컴퓨터에 뭘 설치를 덜 해도 클라우드에서 돌아가는게 있어요. 안드로이드 스튜디오 X코드 이런 것도 리액트 네이티브로 직접 개발하려면 있어야 되는데 X4는 없어도 돼요. 에뮬레이터 직접 돌려 볼 때도 세팅 이런 거 해 가지고 막 에뮬레이터 폰 연결하고 막 이런 거 안 해도 그냥 앱이 있어요. X4라는 앱을 통해서 그냥 실행해 볼 수도 있고 당연히 편리한만큼 단점은 있겠죠. 약간 자유도가 달라요. 그러니까 리액트 2:37:28 네이티브가 지원하는 것 중에 일부를 X4가 지원 안 할 수가 있어요. 그래서 좀 더 패신 기능, 뭐 좋은 기능 이런 거를 못 쓰는게 일부 있을 수 있는데 근데 사실 웬만한 건 X4에 있어 가지고 웬만한 건 괜찮긴 한 거 같습니다. 난이도도 낮아서 뭔가 처음으로 내가 앱을 좀 시작해야겠다 하시는 분들은 X4가 괜찮은 선택이 될 수가 있습니다. 네. 그래서 요걸로 이용해 보려고 하고요. 네. 그리고 구글 플레이 스토어에 X4고 그리고 앱스토어에 또 X4고 앱이 있는데 요거 다운 받아 주시면 이용해 보실 수 있으니까요. 요거 다운 받아 주시면 되겠습니다. 그래서 두 가지 엑스포고 다운받고 이거 엑스포 웹사이트에 가입하고 요거 진행해 주시면 되겠습니다. 그리고이 앱에서도 로그인 해 두시면 연동이 되거든요. 그래서 로그인까지 해 주시면 좋을 것 같습니다. 자, 실습을 해 볼 텐데 이번에 이제 아예 새롭게 X4 프로젝트를 새로 파 주도록 하겠습니다. 여기에 뉴 워크스페이스 요거 눌러 가지고 모바일 쪽에 가서 저희는 리액트 네이티브 X4 네. 요걸 이용해 보도록 하겠습니다. 저희는 위크 5 앱 뭐 이런 걸로 만들어 보겠습니다. 아, 그리고 여기서 이제 선택하는게 있거든요. how would you like to open the 앱? 앱 이제 만들면 어떻게 열래? 했을 때 디벨롭트 빌드가 있고 X4 고가 2:38:30 있어요. 일단 저희는 X4 고로 할 텐데 요거 고로 선택을 해 주시고요. 설명을 좀 드리면 X4고와 디벨로먼트 빌드 요게 뭐가 다르냐? X4고는 X4 앱이 있잖아요. 앱스토어에서 받은 거. 그걸로 그냥 자바스크립트 코드만 바꿔 가지고 그 앱에서 테스트를 하는 겁니다. 별도의 앱이 나오는게 아니라 그냥 다운받은 X4 앱 안에서 테스트를 해 볼 수가 있는 거죠. 디벨로먼트 빌드는 이제 좀 더 여러 가지 기능을 넣고 싶을 때 더 네이티브한 기능 많이 쓰기 위해서는 디벨로먼트 빌드 선택하셔 가지고 별도의 앱이 나오도록 만드는게 그 디벨로먼트 빌드 설정입니다. 그래서 저희는 일단 간단하게 실습해 볼 거기 때문에 기본적으로 X4로 앱을 확인하면서 진행해 보도록 하겠습니다. 그러면은 어 이렇게 안드로이드 에뮬레이터도 있어요. 그래서 실제로 이렇게 하면은 앱 같은 것도 이렇게 열어 볼 수가 있거든요. 여기서 빌드해 가지고 여기서 돌려 볼 수도 있어요. 근데 저희는 요거 안 쓰고 그냥 X4 고로 돌아가는 거 보여 드릴게요. 그래서 요거 스마트폰 안에서 직접 돌려 볼게요. 저희 X4고 앱 다운 받으셨잖아요. 그거 켜 주시면 됩니다. 네, X4고를 켜 주시면 네, 요렇게 뜨실 겁니다. 여기 로그인을 한번 해 주셔야 돼요. 그래서 로그인을 해 주셔서 여기 2:39:32 클라우드에서 빌드해 가지고 요길로 바로 볼 수가 있거든요. 별도로 이렇게 연결하거나 뭐 안 해도 바로 볼 수 있으니까 이렇게 보시면 좋을 것 같습니다. 그리고 또 추가로 하나 설정해야 될게 강의 자료 그 5주차 여기 네, 앱 쪽에 요거를 입력해 놨어요. 로그인하는 명령어입니다. 왜냐면 저희 개발 환경이 클라우드잖아요. 그래서 내 컴퓨터가 아니고 클라우드기 때문에 요거 로그인해서 연결을 해야 됩니다. 여기 MPX 로그인 번호 입력해 가지고 로그인을 해 주시면 되겠습니다. 플러스 누르셔 가지고 여기에 요렇게 사용자 B번 입력하고 그리고 엔터 치시면 돼요. 그럼 여기에 이제 로그인이 됩니다. 로그인 됐고요. 그다음에 뭐 해야 될까요? AI 시키면 됩니다. 연동까지는 이제 사람이 어느 정도 해 놨다 하면은 나머지는 AI 시키면 되는데 직접 하려면 요거 입력하시면 되거든요. 엑스포 스타트 터널 이것까지만 직접 해 볼까요? 이거까지만 직접하고 나머지는 AI 맡길게요. 이렇게 요거 요거 입력하시면 됩니다. 아, 지금 이미 돌아가고 있구나. Y 누르면 되거든요. 요거 그럼 지금 두 개가 돌아가는 거긴 한데 두 개 돌리고 있습니다. 네. 이제 돌아갔거든요. 이게 돌아가서 실제로 이렇게 떴으면은 여기에 안 보이던게 보이실 겁니다. 2:40:33 지금 앱 뜬 거 보이세요? 요거 요게 새로 빌드된 앱이거든요. 그래서 여기로 들어가 보면 실제로 이렇게 빌드가 되고 있어요. 그래서 이렇게 연동해 가지고 앱을 요렇게 테스트를 해 볼 수가 있습니다. 아, 버전이 안 맞아요. 아, AI 써야겠네요. 경고 메시지를 보면 자바스크립트 버전이 0.83인데 네이티브 버전이 8일이다. 안 맞다. 이렇게 뜨죠. 예, 그래서 요거를 그러면 오픈해야 최근에 모델 새로 나왔거든요. 코덱스 CLI 설치하는 거 알려 드리도록 하겠습니다. 요거 복사하셔 가지고 그냥 넣으면 됩니다. 네. 요거 연결해 가지고 자, 런 코덱스만 돌리면 됩니다. 로그인 하고 오겠습니다. 네. 로그인 됨. 아, 좋습니다. 네. 요거 1주 차트 나왔죠? 이제 로그인이 연결이 됐고요. 그다음에 이제 코덱스 입력하시면은 네. 이렇게 어프루브 해 주고 아 이제 코덱스가 켜졌습니다. 요거 아마 모델이 요즘에 업데이트해 가지고 지금 커런트가 5.2코덱스가 선택이 돼 있거든요. 슬래시 모델 한 다음에 5.3코덱스 요거 한번 써 볼게요. 요거 엑스트라 하이로 해 가지고 시켜 보도록 하겠습니다. 그러면 여기에 이제 시킬 건데 저희가 지금 에러가 났잖아요. 네. 요거 이렇게 스샷 찍었거든요. 요거 오르난 걸 찍어서 여기에 넣으면 되겠죠? 2:41:33 오류 고쳐서 제실행. 네. 이렇게 하면 되죠. 알아서 열심히 작업을 하고 있습니다. 알아서 원인 파악했죠. 버전 미스매치라서 알아서 하겠습니다. 웹할 때랑 똑같죠? 네. 똑같이 하면 됩니다. 그냥. 네. 다시 올라왔고 대기 상태입니다. 오케이. 오, 됐다. 버전 정렬 다시 됐으니까 자, 다시 실행해 보겠습니다. 터널을 뚫어야 되는데. 왜 클라우드 환경이니까 이번에 코덱스 시켜 볼게요. 이걸로 터널을 열어야 해. 오, 됐고. 이제 떴습니다. 이제 다시 고쳐 준게 떴고요. 떴죠? 그래서 요거 들어가면 아, 또 오류가 나긴 했거든요. 네. 요거는 에러 메시지를 복사해 줄게요. 네. 그냥 거 에러 메시지 딱 붙여 놓으면 되죠. 다시 해 주고 있어요. 아, 오케이. 어, 네. 올라갔고. 어, 됐다. 됐다. 떴고요. 지금 불러오고 있죠? 잤습니다. 됐습니다. 됐습니다. 아까 봤던 그 샘플 앱 그대로 잘 떴죠? 야, 이제 세팅 끝났습니다. 요거 되면 사실 끝입니다. 이제 기능 개발이야. 사실 하던 거대로 웹사이트 만들듯이 여기에 그냥 원하는 거 입력하고 딸깍딸깍 하면 다 해 주거든요. 좀 원리를 좀 소개를 드리면 똑같습니다. 이거 2:42:35 1주차 때 소개해 드렸잖아요. 얘도 똑같아요. 앱이 클라이언트입니다. 프론트엔드라고는 보통 웹에서 많이 부르고 클라이언트라고 부르거든요. 서버랑 통신하는 어떤 클라이언트가 요렇게 앱인 상태고요. 저희 백엔드 만든 거 딴 거 저희 만들 똑같이 만들어서 뭐 스파베이스니 뭐니 이런 거 연결해 가지고 쓸 수가 있습니다. 그래서 앱이 그냥 클라이언트일 뿐입니다. 그러면 좀 생각해 볼게 저희 웹사이트 만들 때 어떻게 만들었나 생각해 보면 AI API를 붙였다라고 하면 웹사이트가 있으면 키를 숨겨야 되기 때문에이 워커스 붙인 그 클라우드 플레이어 페이지스 펑션스라는 거를 썼잖아요. 요렇게 백핸드 키 같은 거 워커스에 등록돼서 얘가 API 호출해 가지고 프런트엔드랑 통신해 가지고 구도를 이렇게 만들었잖아요. 요것도 똑같습니다. 프런트엔드 즉 클라이언트 부분이 요렇게네 스마트폰 앱이 들어가는 거고요. 여기에다가 백핸드를 연결해 가지고 이렇게 통신하게 만들면 됩니다. 요거까지 한번 그냥 간단한 샘플 한번 보여 드릴게요. 그러면은 이제요 만들었어요. 워커 써 보도록 할게요. 페이지스는 이제 공개된 프론트엔드 화면만이고 워커스가 이제 돌아가는 백엔드까지 수행할 수 있는 기능이죠. 네. 그러면 워커스를 하나 만들어서 워커를 붙여 볼게요. 2:43:36 크리에이트 어플리케이션 해서 이번에는 워커로 가서 그냥 헬로월드 프로젝트 할게요. 헬로 월드 누르면 이렇게 주소가 나오고이 주소에 뭐 위크 5 앱으로 만들어 볼게요. 디플로이 하면은 이제 백엔드 서버 코드가 그냥 띵 생깁니다. 여기에 코드를 누르면이 백엔드 서버 코드가 그냥 있습니다. 이렇게 워커스. 라는 파일 안에요 코드가 들어가 있습니다. 그래서 여기는 리스폰스 헬로 월드라고 돼 있는데 실제로이 주소 있잖아요. 워커 주소 들어가 보시면 그냥 백엔드 코드가 동작해서 지금은 헬로 월드를 출력해 주는 거 이렇게게 들어가 있어서 헬로우월드가 출력이 됩니다. 네. 요거를 이제 뭔가 AI를 써 가지고 AI 응답이 날라오도록 만들면 되겠죠? 그러면 어 AI가 얘를 작업하면 좋으니까 여기에 work스라고 폴더를 만들고네 기본적으로 여기에 workers스. 라는 파일을 만들어 줄게요. 요거는 이제 AI가 읽기 좋도록 해서 월커스 JS 저희 기본 그냥 헬로월드가 돼 있는게 요렇게 돼 있잖아요. 그래서 요거를 복사해 가지고 그냥 여기 넣어 주겠습니다. 그래서 얘가 백엔드 역할을 하는 거죠. 그래서 앱이랑이 백엔드랑 연결해 가지고 AI 돌리는 2:44:37 거 만들어 주면 되겠죠. 그래서 요거는 뭐 저희 했던 프로젝트 그냥이어서 해 볼게요. 오픈 AI API로 들어가서 여기로 들어가서 이렇게 대시보드에 들어가면 미리 써 볼 수가 있었죠. 대시보드에서 테스트하고 그거 코드를 넘기면 됩니다. 채 들어가서 크레이을 누른 다음에 그 모델은 아무거나 하셔도 되는데 가성비 있는 걸로네 미니 정도네 미니 정도에서 좀 싼 걸로 해 볼게요. 일단 테스트니까 그다음에 디벨로퍼 메시지 이거 너는 최고의 스타일 리스트야. 키, 몸무게, 샘플로 요런 식으로 돌아가는구나 보여 드리기 위해서 사진보다는 얼굴형 입력을 받으면 퍼스널 컬러와 패션 추천 해줘. 그러니까 샘플로요 정도만 하고 그래서 유저가 뭐 키가 180, 80, 얼굴형, 계란형. 네. 요렇게 전송해 가지고 날리면은 얘가 이걸 받았으니까 이렇게 추천해 주는 거. 저희 구현했던 거죠. 이거 구현했던 거를 그대로 똑같이 만들었습니다. 그다음에 이제 앱에 연결할 백엔드를 만드는 거예요. 이게 잘 되는 거 확인했으니 여기 점점점 눌러 가지고 코드 코드로 들어가 줍니다. 그러면 요렇게 예시 코드가 나옵니다. 리스폰시스로 요렇게 날리면 된다라고 가이드가 나오죠. 그러면 요거를 2:45:38 그대로 복사해 가지고 이걸 기반으로 포덱스한테 시키면 되겠죠? 저희 워커스를 구현할 거니까 요거 하나 끌어놔 주고 이게 백엔드 역할인데 오픈 AI API를 활용해서 키 몸무게 얼굴형 입력하면 그걸 기반으로 퍼스널 컬러 패션 추천해 주는 AI 기능의 앱 구현해 줘라고 하고 모델 GPT 5 미니 이런 거 써야 되는 거를 알려 주려면 받은 최신 코드 있죠? 돌아간 최신 코드로 복사해 가지고 요거를 여기에 붙여 넣어 줍니다. 네. 그러면은 이제 어떤 걸 바꿔야 되는지 알고 앱도 파악하고 있고 딸깍 누르면은 네. 알아서 이렇게 작업을 해 줍니다.음 그러면 이제 백핸드 API 뭐 이거랑 프론트엔드 입력 폼 로직을 함께 구현하겠습니다라고 나오죠. 엔드 포인트는 알려 줘야 될 것 같긴 하네요. 저희가 엔드 포인트가 요거죠. 위크 5앱 요걸로 만들었죠. 요거를 알려 주겠습니다. 엔드 포인트 주소는 이거야. 네. 추가로 알려 주도록 하겠습니다. 웹사이트 만드는 거랑 지금 과정이 아예 똑같은 거 느껴지시나요? 거의 비슷합니다. 뭐 앱 만드는거나 앱 만드는 거나. 음. 2:46:39 앱 다 구현해 주고 있고요. API 키. 아, 이제 이거 등록해야 되죠. 그러면 백엔드에 요거 환경 변수 등록하는 거 똑같습니다. 요거죠. 요거에 이제 코드가이 코드가 아니라 이제 바뀐 코드 넣어야 되고요. 요거. 네. 바뀐 거 넣고 디플로이 해 주면 이제 헬로 월드가 아니라 요걸로 바뀌었고요. 이제 세팅에 베리어블 앤 시크릿 여기 시크릿 키 넣어 줘야 되죠. 그래서 여기 애드 하고 시크릿 누르고 여기 오픈해야 API 키 요거 있죠? 요거는 이제 웹할 때 했었죠. 여기에 키를 붙여 놓고 디플로이를 해 주시면 되겠습니다. API 키. 네. 여기로 들어가서 새로 만들어 주셔도 되고 아니면 이전 거 쓰셔도 됩니다. 새로 만들어 주는 거는 위크 5 앱 해서 만들어 주고 이걸 넣어 주겠습니다. 만들어서 여기에 넣어 주면 되죠. 네. 그러면은 이제 오픈에 API 키 백엔드에 잘 들어갔고요. 요거 코드도 잘 들어갔으니까 요거 실행해 주면 되겠죠. 여기서 이거 제가 세팅하다가 뭐 안 되는 경우가 있어서 보니까 가끔 뭐 리전 문제로 좀 안 되는 경우가 있더라고요.이 런타임 보면은이 플레이스먼트가 있는데 이유는 정확하게 모르겠어요. 얘가 가끔 오류가 날 때가 있는데이 런타임에 이게 아예 리전을 정해 줄 수가 있습니다. 2:47:40 그래서 리전을 정해 가지고 예를 들어 AWS 정한 다음에이 AWS 미국은 안전하거든요. 그래서 미국 US 이스트 US 웨스트 뭐 이런 걸로 요런 거 하시면은 미국에서 돌아가거든요. 그래서 요렇게 지정하고 디플로이를 해 주시면 아마 문제가 없이 돌아갈 수가 있을 겁니다. 네. 요렇게 오픈 AI 키 넣어 줬고 코드 넣어줬고 이제 됐죠? 이제 실행하면 됩니다. 오케이. 그러면 워커의 배포 완료야. 포앱에서 테스트할 수 있게 터널 열어 줘 하면은 네. 또 세팅을 해 주겠죠. 그래서 요거 한번 테스트해 볼게요. 예. 들어가고 있습니다. 똑같이 이렇게 되고 있고요. 어 좋습니다. UI가 살짝 깨지긴 했는데 요렇게 잘 나왔습니다. AI 퍼스널 컬러 패션 추천. 서비스 잘 나왔고요. 그래서 입력을 한번 해 주겠습니다. 180에 계란형 뭐 해 가지고 이렇게 누르면 되죠. 이런 거 UI 고치는 거 이런 거는 뭐 시키면 되죠. 똑같이 웹이랑 똑같습니다. 이렇게 시키면 됩니다. 그래서 요거 추천 바퀴를 누르면 네, 지금 로딩 돌아가고 있고요. 어, 떴어요. 떴어요. 추천 결과 하면서 쭉 제시해 보시고 있는데 이게 색깔이 이거는 디자인이 구리긴 하네요. 이렇게 2:48:40 나와요. 이게 잘 안 보이는데 추천 결과 해 가지고 AI 답변이 잘 나왔습니다. 네. 아무튼 요거는 이제 디자인 개선이니까 저희 바이브 디자인 웹에서도 했잖아요. 그거 앱에서 떡같이 하시면 됩니다. 요거는 결과가 잘 나왔다. 네. 아무튼 요런 식으로 연결하면 되겠죠. 저희 프론트 핸드 백핸드 연결하는 거를 한번 워커를 통해서 해 봤고요. 그래서 이렇게 통신하도록 만들었습니다. 네. 그래서 거의 웹사이트 만드는 거랑 완전 똑같은 느낌이 좀 들죠. 가끔 이제 네이티브 기능 뭐 앱에서 뭐 권한 허용하거나 뭐 이런게 추가로 좀 있긴 한데 그것도 AI 시키면 알아서 해 주니까요. 그리고 또 생각해야 될게 저희가 지금 구현한 기능이 사실 웹로 이렇게 추천받는 거 뚫어놨잖아요. 근데 굉장히 취약한 상태입니다. 저희 웹할 때도 그랬는데 요거 백핸드 URL 그냥 열려 있어요. 앱을 딴 사람이 만들어도 바로 요청을 날려 버릴 수가 있어요. 그래서 이거를 뭐 로그인 기능을 걸어 놔 가지고 그걸 통과해야지만 쓸 수 있게 뚫어 놓은다거나 그걸로 한번 막아 놔야 됩니다. 이거는 아니면 결제로 막아 놓으면 되죠. 그래서 또 레비뉴 캐시이라는게 있습니다. 이게 안드로이드 iOS 둘 다 만드시는 분들이 쓰면은 괜찮은 통합 빌딩 솔루션이 있는데 이걸 왜 쓰냐? 안드로이드, iOS 이거를 각각인 2:49:42 결제 이런 걸 구현을 다 하기 귀찮잖아요. 그래서 얘가 이제 통합해 주는 애입니다. 그래서 안드로이드, iOS 이런 구독 통합해 주고 저희 웹사이트도 구독 기능 있으면 웹사이트의 회원과 앱에서 가입한 회원과 이런 걸 연동을 잘 해 줘야 되잖아요. 그런 거를 담당해 준 애가 레비뉴 캐이라는 애를 쓰면은 통합 관리를 할 수가 있습니다. 스트라이브이랑 연결해 가지고 레비뉴켓 하면은 거의 표준적으로 앱에서의 구독 그리고 웹사이트의 구독 같은 걸 통합 관리를 해 볼 수도 있겠습니다. 그래서 웹사이트도 운영하고 앱도 운영하시는 분들은 요런 거 쓰면 좋겠죠. 나머지 앱 기능은 사실 가이브 코딩 똑같기 때문에 웹사이트 구현을 잘하셨으면 나머지 구현도 아마 잘하실 수가 있겠고요. 약간 걸리는 거 이제 출시가 좀 빡빡하긴 한데 출시도 사실 X4가 이제 EAS라는 서비스를 제공하는데 요걸로 이제 뭔가 빌드하고 배포하고 하는 거를 조금 더 편하게 해 주는게 있습니다. 그래서 요걸로 X4 이용하면 좀 더 배포를 쉽게 할 수 있다. 그리고 뭐 콘솔 이런 것도 아까 설명드렸듯이 25달러 애플은 99달러 내시면은 요렇게 만들 수 있는데 요런 거 콘솔 로그인하신 다음에 앱 출시하려면 앱 이름 뭐 이런 거 해 가지고 등록할 거 되게 많죠. 뭐 선원 다 이런 거 AI한테 2:50:43 도움을 받아가면서 할 수 있습니다. 등록할 때이 캡처를 해요. 캡처한 다음에 AI한테 퍼스널 스타일리스트 앱 출시하려는데 어떻게서 이런 거 이렇게 해 가면서 하면 됩니다. 아 이거 뭐 쓰면 돼 알려주고 있죠. 스크린샷 찍어 가면서 쭉 진행하시면 다시 앱 출시나 이런 것도 AI 가이드를 받아서 할 수가 있겠습니다. 게다가 X4에 EAS 쓰면은 조금 더 편하게 할 수도 있으니까요. 요것도 물어보면 되죠. 요거 참고하셔서 요거 문서도 AI 넘겨 가면서 진행해 보시면 되겠습니다. 상세하게 다루기에는 사실 거의 웹 개발 분량이 또 나올 것 같아서 요거는요 정도로 그냥 소개를 드리고 어떻게 하는지 알려 드리는 방향에서 앱을 마무리하고요. 또 추가로 요거는 이제 제가 토스랑 같이 진행했던 광고 프로젝트가 있었는데 저희 앱인 토스라는 것도 있습니다. 국내 앱을 출시할 때는 요것도 괜찮은 옵션이 될 수 있는데 이게 뭐냐면 앱스토어 출시가 너무 번거롭잖아요. 아예 토스 앱 있잖아요. 토스 앱 안에 앱을 출시하는 기능이 있습니다. 미니 앱이라고 하죠. 좀 더 쉬워요. 출시할 때 별도로 개발자 등록부터 뭐 이런 거 안 해도테니까 한 1.5시간 안에 기획 디자인 개발 수익화 마케팅을 다 해서 에빈토스에 출시하는 것도 제가 강의를 다 만들어 2:51:44 놨으니까요. 요거 참고하시면은 내 앱을 웹로 만들어 출시하는 것도 확인하실 수가 있겠습니다. 미국 법인 진행해 보도록 하겠습니다. 일단 미국 법인을 만드는 거 물론 뭐 여러 방법이 있죠. 그냥 미국의 어떤 회계 뭐 이런 거 전문하시는 분이나 통해 가지고 미국 법인 설립하는 거를 사람을 통해서 진행할 수도 있는데 전문가를 통해서 요즘에 스트라이프에서도 미국 법인 설립을 도와주는 서비스가 있습니다. 스트라이프 아틀라스라는 서비스를 제공하고 있는데 뱅크 펀드레이즈 이런 것도 그냥 할 수가 있다라는 걸로 내세우는 서비스입니다.이 스트라이프를 이용하기 위해서 미국의 법인을 세우고 표준적인 법인을 세우고 그걸 기반으로 스트라이을 되게 쉽게 이용할 수 있게 뚫어주는네 그런 서비스입니다. 그래서 스트라이 연결하는 거 요걸로 하시면 좋다. 근데 애초에 좀 의문 있잖아요. 왜 미국 법인을 세워야 되는가? 첫 번째로 가장 큰 이유는 스트라이브입니다. 네. 스트라이 이제 글로벌 결제 표준이잖아요. 글로벌 향 어떤 서비스를 만드데 있어서 스트라이 붙이는 거에 강점이 꽤 있습니다. 글로벌 빅테크들이 스트라이브를 엄청 쓰고 있거든요. 뭐 오픈하 넷플릭스 뭐 샤피파이 노션 슬랙 이런 거 2:52:44 글로벌에서 다 쓰는 유명한 서비스들이잖아요. 다 스트라이브로 결제를 붙이고 있습니다. 그래서 글로벌 프로덕트를 만든다면 스트라이브를 꼭 뚫어 놓으시면 좋을 것 같고요. 심지어 이런 것도 됩니다. 저희 한국은 스트라이브로 사업은 못 하는데 사우스 코리아는 별도로 돼 있어요. 사우스 코리아 같은 경우에도 결제를 받을 수 있다. 심지어 카카오 페이도 받을 수가 있고 네이버 페이, 페이코, 삼성 페이 같은 어떤 국가의 특수적인 페이 있잖아요. 한국의 되게 특수적인 페이들도 받을 수 있게 스트라이 연동이 잘 돼 있습니다. 요거를 이용하시면 좀 글로벌하게 결제를 편하게 받을 수가 있다라고 소개를 드릴 수가 있겠습니다. 그러다 보니까 이제 글로벌한 어떤 프로덕을 만든다 표준적으로 웬만하면은 스트라이브를 쓰고 있습니다. 그리고 일단 가장 강점 수수료죠. 저희 폴라가 어떻게 보면 스트라이프 레퍼예요. 그러다 보니까 더 가져갈 수밖에 없습니다. 근데 스트라이프을 쓰게 되면 2.9% 30 괜찮죠? 대신에 뭐 세금 처리나 이런 거는 법인을 세우면 그 법인으로 처리해야 된다는 조금 더 불편한 점은 있지만 일단은 요런 강점이 있다. 네. 그래서 MOR 쓰시는 분들에 비해서 요런 거 굉장히 자유롭습니다. 폴라는 이거 소프트웨어 사스 그리고 디지털 프로덕 프리미엄 콘텐츠 엑세스 2:53:46 이거밖에 없어요. 그리고 이거 외에 스트라이브를 붙인다 외에는 장점이 뭐 있냐라고 하면 생각보다 장점이 많습니다. 일단은 미국 법인이잖아요. 자본주의 끝판왕 미국이니까 거기에 어떤 투자 시장이라든가 규모가 다릅니다. 그런데 여기에서 또 가장 표준이 되는게 델라웨어 C 코퍼레이션이라는 걸로 세워 주거든요. 스트라이브를 통해서 법인을 세우면. 네. 근데 이게 글로벌 투자 및 인수의 디폴트 옵션입니다. 그래서 스트라이도 얻어 가는데 이런 글로벌 투자 인수까지도 챙길 수가 있다. 미국 VC, 글로벌 VC가 투자하기에도 너무 좋은 환경이 되고요. 그리고 M&나 이런 것도 굉장히 잘 되어 있는 편입니다. 그래서 뭐 스톡 옵션, 지분, 인세티브 이런 거 설계도 되게 잘 돼 있고요. 글로벌 결제 파트너십 이런 것도 잘 돼 있고 그레스 스트라이브이 바로 연결되죠. 그리고 IP와 매각 구조 이런 것도 굉장히 잘 돼 있는 편입니다. 그래서 가장 유명한 사례 쿠팡이 미국 상장을 했잖아요. 쿠팡은 어떻게 했을까? 찾아보면 쿠팡의 최상위 모기업이 미국 델라웨어 C 코퍼레이션입니다. 네. 그래서 저희는 지금 쿠팡이랑 같은 구조로 만드는 겁니다. 네. 그래서 이렇게 뉴욕 증시 상장까지 이렇게 진행을 할 수가 2:54:46 있겠죠. 이렇게 원래는 한국 회사였다가 결국에 미국 최상위 모기업으로 델라웨어 시 코포레이션 설립하고 그걸 기반으로 이제 회사가 뉴욕 증시 상장도 한 겁니다. 결국에 뭐 나스닥 상장 이런 거 하려면은 델라웨어 시코이 굉장히 유리합니다. 예시 또 한국의 대표적인게 스마일 패밀리라는 기업 샌드버드 많이 들어보셨을 겁니다. 샌드버드가 유니콘 기업이거든요. 채팅 이런 거 만들어 주는 사스 서비스 운영하시는 샌드버드. 한국계 스타트업 최초의 B2B 유니콘 기업인데 여기도 미국 법인으로 전환을 하셨습니다. 델라웨어 플립 법인을 이제 미국으로 옮기는 건데 이거를 뒤늦게 진행하셨어요. 결론부터 말하자면 실제 법인 전화는 약 3개월 가량 소요됐다. 야 저희는 한 달도 안 걸리거든요. 근데 기존 회사를 만약에 델라웨어 법인으로 바꾼다. 3개월가량 소요되고 한국 법무 법인 약 1천만 원. 미국 법문법인 2천 몇백만 원 해서 뭐 한 3천 이상이 들어갑니다. 플립 나중에 하려면 이돈 내고 해야 돼요. 지금 그냥 시작부터 스트라이 아틀라스로 바로 델라와여 버 그냥 챙겨 버립니다. 그러다 보니까 이게 훨씬 유리하다. 아예 애초부터 글로벌 생각이 있다라고 하면 훨씬 유리합니다. 그래서 종합적으로 좀 2:55:47 정리해 보자면 물론 스트라이크 때문에 하는게 제일 커요. 제일 큰데 투자 뭐 인수 IPO 이런 거가 되는 글로벌 표준 레일에 올라타는 겁니다. 그래서 글로벌 확장이 뒤에서 배울 엑시 기대값도 굉장히 강하다. 그리고 이런 것도 좀 궁금하실 수 있어요. C 코퍼레이션이 있고 LLC라는게 있던데 이게 뭐가 다른가? 주로이 두 개 중에 고민을 많이 하세요.이 C 코퍼레이션이 일단 기본이에요. 이게 기본값입니다. 그래서 요렇게 법인 자체가 독립적인 거고 LC는 뭐냐면 한국에서 보면 약간 개인 사업자 같은 느낌. 내수 소규모 사업자 용이어서 이걸로 할 수도 있긴 한데 이게 좀 더 단순하거든요. 세무나 이런 건. 근데 결국에 미국을 생각해서 미국 글로벌 시장에서 투자도 받고 엑시도 하고 할 생각이 있다면은이 1번이 낫습니다. 차이를 보자면 요렇고요. 얘는 한국에서 보면 LC가 개인 사업자, 시코빅 법인 사업자라고 좀 그냥 큰 그림에서 이해하시면 좋을 것 같습니다. 그리고 세금 좀 구체적으로 소개해 드리면 미국 연방 정부가 있고 주가 있습니다. 연방은 모두가 똑같아요. 미국에 있는 모든 주들이 다 공통적으로 먹는 거. US 페럴에서는 모든 시코 공통쪽으로 법인세 21% 고정이 있습니다. 수익을 예를 들어 100만 원을 2:56:47 벌었다. 세무 정산 처리하면서 세금으로 21만 원을 가져갑니다. 회사 법인에 남는 돈이 79만 원을 법인에 남길 수가 있는 겁니다. 네. 그러면 이제 이것까지는 미국 전역이 동일하다라고 알 수가 있겠고 그럼 주별로 뭐가 차이가 있냐? 일단 델라웨어 놀랍게도 실질 법인세가 거의 없다고 하고 대신에 이런게 있거든요. 프랜차이즈 텍스랑 애뉴얼 리포트 이런게 있는데요 정도가 들어갑니다. 225에서 400달러 연간요 정도가 추가로 들어간다라고 볼 수가 있겠고요. 그러면 비용 총 정리를 해 드리겠습니다. 일단 초기 1회성 비용 트라이프 아틀라스 자체 이걸 이용하는 비용료가 500달러입니다. 그래서 500달러에 처음에 결제를 해야지만 처음에 법인 설립을 할 수가 있어요. 그러면 이거 포함입니다. 법인 설립하는 거 주정부에 내야 되는 비용이나 이런 거 포함이고 첫 1년 reg지스터드 에이전트라는 그것도 비용도 포함이에요. 이게 연마다 내야 되는 건데 1년 차에는 이걸로 다 해결이 가능하고요. 그다음에 매년 반복 비용 2년 차부터는 100달러씩은 내야 됩니다. 이거 그래서 요게 이제 스트라이프 아틀라스에 들어간 비용입니다. 자 그러면 이제 당연히 기장해야 되죠. 한국에서 사업하시는 분들 다 세무사 쓰고 뭐 하시잖아요. 미국도 2:57:48 똑같습니다. 세무 회계도 스트라이프 아틀라스에서 제공해 주는게 있거든요. 연결해 준 업체들. 우리 이거 연결 좀 해 주세요 해가지고 연결된 좀 저렴한 온라인 세무회계가 있어요. 온라인 세무회계 이런 거 연결된 거 쓰면은요 정도 듭니다. 1년 차 때요 정도. 네. 그래서 전반적으로 종합을 해 봤을 때 1년 차 때는요 정도 300만 원 언저리 뭐이 정도 들어가고요. 2년 차 이후에 매년 1년에 한 한 300만 원이 정도 언저리 200만 원요 정도가 매년 들어가는 비용이라고 볼 수가 있겠습니다. 약간 비교를 해 보자면 그냥 온라인으로 하는게 나을까? 아니면은 한국에서도 그런 때가 있거든요. 도와주시는 데가. 그런 업체를 통해서 알아보니까요 정도 조금 더 당연히 비쌉니다. 왜냐면 요런 거 기장료 이런 거 있으니까. 그래서 1년 차 한 500 정도 들어가고 2년 차 이후에 매년 한 500 정도. 이거는 업체에 맡겼을 때 좀 더 비쌉니다. 왜냐면 온라인보다 당연히 비쌀 수밖에 없죠. 사람이 들어가니까. 네. 그래서 1년에 한 뭐 대략 500만 원 정도가 들어간다라고 보시면 되는데 여기 추가적으로 있습니다. 주소, 전화번호, 은행 이게 필요합니다. 물론 이게 뭐 미국에 지인이 있어 가지고 뭐 하면은 이거는 뺄 수 있는데 보통 없잖아요. 그래 가지고 미국 법인 주소지 등록해야 되고요. 2:58:49 비즈니스 번호 이것저 전화번호 쓸 일이 많더라고요. 머큐리 은행은 은행을 돈내고 쓰는게 아니죠. 머큐리라고 온라인 은행이 있어요. 저희 카카오뱅크 뭐 이런 것처럼 온라인 머큐리라는 은행 통해서 하면은 일단 공짜로 이용할 수 있고 대략 한요 정도가 더 들어갑니다. 저는 가장 좋았던게 서류를 엄청 떼야 되잖아요. 그게 싹 온라인으로 돼 있어 가지고 저희 아틀라스 도큐먼트 있잖아요. 요거 들어가면 필요한 서류가 다 있습니다. 그냥 원래 같으면 막 사람한테 아 이거 법인 뭐 등기부 등본 떼 주세요. 뭐 이런 거 요청하고 막 하고 하잖아요. 근데 미국은 역시 서류 바로 다운받아집니다. 내야 될 거 이런 거 있거든요. 그런 거 그냥 다운로드 누르면 바로 서류 PDF로 받아주고 제출 하면 됩니다. 그냥 그리고 이런 거 템플릿도 있어요. 계약서 세일즈 템플릿 고용 계약서 임플로이 오퍼레터 표준이 다 제공해 줘요. 야 그래 스트라이브 아틀라스 괜찮다.네 그리고 아무래도 아틀라스가 이제 미국 범위 설립이니까 연계된게 되게 많잖아요. 뭐 아까 주소지 뭐 은행 뭐 되게 많은데 이런 거에 혜택을 주는 것들이 있습니다. AWS도 아마이 스트라이크 통에 창업하시는 분들은 AWS 크레딧 많이 쓰실 거잖아요. 구글 워스페이스 이런 것도 이런 거 할인을 해 2:59:49 줍니다. 그래 가지고 이런 것도 받아가는 좀 쏠쏠한 재미도 있고요. 네. 직접 보여 드리면 요런 거. 어, 혜택이 많아요. 이런 거. 뭐 약간 뭐 메인은 아니지만 그래도 이런 거. 뭐 위워크 이런 거 원패스워드 이런 거 이거 유용할 것 같아요. 이거 프로덕트 디벨로먼트 레플릿 이거 바이브 코딩툴 저도 광고 한번 했었는데 요런 것도 많이 주고 포스톡이라고 저희 구글 애널스 같은 그 데이터 분석 툴도 크레딧 주고 AWS 뭐 MS 스타터 뭐 클럭 이거 이거 로그인할 때 이거 붙이는 거거든요. 사스 이런 것도 주고 50% 할인해 주고 뭐 아무튼 혜택이 많죠. 네. 그리고 펀드 레이징도 막 이런게 잘 돼 있어요. 뭐 그럼 제 경험다 저도 이제 법을 설립했거든요. 얼마 전에 했습니다. 1월 1일 날 새벽 4시 즉 델라웨어 기준으로 딱 1월 1일 됐을 때 500달러 바로 결제해 가지고 스트라이브 아틀라스 결제를 했습니다. 그래서 법인 설립 들어갔고요. 놀랍게도 법인 설립이 완전히 안 끝나도 8일부터였나? 아 일주일 뒤부터 결제를 스트라이브를 미리 붙일 수가 있어요. 그래 스트라이브 내 서비스랑 미리 붙여 놔 가지고 개발 다 끝내 놓을 수가 있고 그게 끝이 아니라 이거를 이제 다 설립하는데 얼마나 걸렸냐? 27일 총 26일 안에 법인 설립 완전하게 3:00:52 끝나는 겁니다. 아무튼 요런 과정들이 있다라고 소개를 드릴 수가 있겠습니다. 미국 법인 주소 어떻게 등록하냐? 스테이블이라고 회사 주소지 해 주는게 있습니다. 아마 스트라이 통하면은 스트라이 아틀라스랑 막 연동되고 해 가지고 연결이 될 텐데 여기서 어떤게 되냐면 우편 같은 거 법인 주소지로 오잖아요. 인박스 보면은 메일룸이 있어서 여기에 이렇게 메일이 있습니다. 그래서 요거 열어 보면은 이렇게 스캔을 해 가지고 올려 줘요. 알려주면은 스캔본으로 볼 수가 있어요. 그래서 요걸로 우리 회사 주소로 요걸 쓸 수가 있습니다. 그리고 요거는 그냥 레퍼럴 코드 있길래 이게 혜택이 더 크다면 그래서 이거 하면 100달러씩 나눠 가질 수 있습니다. 하고 20% 할인도 준다고 하니까 입력하시면은 100달러씩 감사하게 나눠 가지면 좋을 것 같습니다. 네. 전화번호 또 미국 전화번호도 필요하잖아요. Q라고 해서 저도 이거 쓰고 있는데이 Q 쓰시면은 전화를 받아 줍니다. 놀랍게도 AI가 대신 받아 줘요. 그래서 여기에 들어가 보면 전화 내역이 이렇게 뜨거든요. 문자랑 인증 코드 이런 거 받을 때 있잖아요. 그때 다 받을 수 있습니다. 이렇게 전화 오면은 소나라는 AI가 여기 안에 있어서 그래서 AI 응대도 할 수 있고 녹음도 여기 딸 수 있어서 AI 서머리로 통화 내용까지 볼 수가 있어요. 괜찮죠? 그다음에 이제 은행 당연히 법인이니까 은행이 필요하죠. 3:01:52 저는 머큐리를 쓰고 있습니다. 요것도 250달러 나눠 가지시려면 요거로 가입하시면 좋을 것 같고요. 얘 장점은 뭐냐? 스트라이 아틀라스랑 연동이 되게 잘 돼 있고요. 또 이런 것도 돼요. 지금 실물 카드가 있거든요. 클라우드 서비스 사스 구동료 같은 거를이 머큐리 카드 같은 거 발급받아 가지고 쓸 수가 있겠습니다. 그럼 비용 처리할 때 이런 거를 결제를 하면은 그걸로 비용 처리를 할 수 있습니다. 그래서 이익의 21%를 떼가니까 이익을 줄이면 되겠죠. 이거 사스 구동료나 이런 걸로 크레딧이나 이런 거 써 가지고. 네. 그러면 요렇게 해서 이제 은행까지 소개를 드렸고요. 네. 그래서 요약해 보자면 결국에 스트라이 아틀라스 쓰시면 알아서 싹 해결해 줍니다. 대신에 돈은 내야 된다. 그러면은 이제 또 가장 중요한 엑시 전략 바로 들어가 보도록 하겠습니다. 5주 완성 과정 여러분들 들으셨잖아요. 왜 하시나요? 다양한 이유는 있겠지만 보통은 이제 어떤 글로벌 수익형을 만든다라고 하면 비즈니스를 만드는 거. 돈을 벌어야겠죠. 그리고 큰 꿈을 가지신 분들은 아무래도 엑시에 대해서 생각을 해 볼 수밖에 없습니다. 어떻게 내가 만든 서비스로 엑시을 실제로 할 수가 있을까? 내 제품으로 할 수 있는 엑시 전략 소개해 드리도록 하겠습니다. 일단 크게 보면 세 가지가 있을 것 같아요. 일단은 그냥 3:02:52 현금 흐름을 유지한다. 결제 구독 이런 거 붙여 놨잖아요. 그러면 그걸로 그냥 꾸준히 현금을 받을 수도 있습니다. 그리고 매각을 하거나 내 거 팔 수도 있고요. IPO라고 상장을 할 수가 있겠습니다. 자,이 세 개를 하나씩 살펴볼게요. 자, 일단은 현금 흐름을 유지한다. 그러면 뭐 한국 기준으로 어떤 서비스를 만들었는데 지속적 반복적으로 수익이 난다. 그러면 사업자 등록은 세법상으로 하셔야 됩니다. 크게 두 개죠. 개인 사업자로 돈을 받는 거, 법인 사업자로 돈을 받는 거 이렇게 두 가지로 나눌 수 있는데 개인 사업자는 바로 내 돈이죠. 근데 법인 사업자는 법인의 돈이 쌓이거든요. 현금 흐름이 서비스로 나오면 그걸 급여나 혹은 배당으로 돈을 가져가는 거. 네. 요런게 있겠습니다. 그래서 좀 더 구체적으로 보자면 일단 개인 사업자, 법인 사업자 뭐가 다른가? 가장 큰 차이가 뭐냐 하면은 세율이 다릅니다. 종합소득세를 낸다. 즉 개인 사업으로 그냥 돈을 다 당긴다라고 하면은 종합소득세가 꽤 나옵니다. 돈이 많아질수록 꽤 나옵니다. 예를 들어 10억을 벌었어요. 그냥 대략 계산해 보면 5억 5천 이렇게 남는 겁니다. 그래서 가져간 돈이 요거밖에 안 돼요. 대신에 얘는 내 돈이죠. 근데 법인은 구간이 완전 달라요. 10억을 번다. 여기 구간입니다. 10억은 그러면 19%밖에 안 돼요. 엄청 3:03:53 차이가 많이 나죠. 그러면 세금을 정확한 차이는 아니지만 아무튼 2.6억이나 차이 나는 거예요. 대충 엄청나죠. 법인세랑 개인이내는 세율이랑 이렇게 다릅니다. 근데 사실 법인의 최대 단점이 있습니다. 우리가 법인을 운영하면서 어떤 서비스 운영하잖아요.이 앱을 운영해서 돈을 받으면 법인 돈입니다. 개인이 가져가려면 급여 배당을 받아야 되거든요. 그래서 요렇게 가져가면은이 돈은 또 세금을 또 내요. 법인에서도 법인세가 또 나가고. 그래서 대신에 방법 있죠. 법인 번돈을 싹 가져갈 필요는 없잖아요. 조금씩 가져가면 되죠. 세율 구간 낮은만큼만 가져가면 되잖아요. 그래서 그런 걸로 좀 당겨 가면은 좀 세금을 아낄 수 있다. 아무튼 요게 이제 저희 엑시 전략 중 1번으로 꾸준히 돈을 가져간다라고 하면 이런 방법이죠. 그래서 제일 대표적인 유명한 사례 레벨스 아이오라고 1인 개발자 되게 유명하신 분이잖아요. 계속 돈이 쌓이겠죠. 돈이 쌓이면 결국에 이렇게 당겨 가시는 요런 구조가 되어 있습니다. 아, 이거 돈 별로 못 벌지 않나요라고 생각할 수 있는데 1인 개발로 처음에 알람 앱을 만드신 알람이 신재명 대표님 계십니다. 연매출 337억대 25년 매출 460억 영업 이익 200억 200억이 법인에 쌓이는 겁니다. 글로벌 서비스 만들면 이렇게 됩니다. 아무튼 이렇게 하시는 분이 이제 1번의 방법입니다. 그리고 또 김재호 3:04:55 님 이분도 소개팅 앱 만드셔 가지고 이렇게 건물주는 요즘엔 안 하신다고 하는데 건물 파셔 가지고 네. 아무튼 요런 생활도 이제 1인 개발자로 생활하는 그런 것도 할 수가 있겠습니다. 그래서 이게 그냥 여러분들이 서비스를 만들고 운영하면 자동으로 되는 방법이라고 할 수가 있겠습니다. 그다음에 매각이 있습니다. 매각은 뭘 매각하냐? 크게 보면 요렇게 나눌 수가 있겠습니다. 회사를 통제로 파는 거 아니면 회사 일부만 파는 거 혹은 팀이나 사람을 파는 거 그리고 사업 자산 뭐 이런 거 자산을 파는 거네 요런 것들이 있겠습니다. 케이스별로 좀 보도록 하겠습니다. 일단 가장 유명한 거 저희 1주차 때 나왔던 거 6개월 만에 베이스 44라는 바이브 코딩 플랫폼 이게 8천만 달러의 익스라는 회사가 산 거죠. 서비스 자체를 산 겁니다. 사게 되면 보통은 이제 사람까지 같이 사거든요. 거기에 있는 팀 아니면 대표 해 가지고 사드려 가지고 믹스에서 근무을 막 몇 년간 해야 됩니다. 그래서 뭐 락업이 3년이다, 뭐 5년이다 하면은 그 3년에서 5년은 익스라는 회사에서 일을 해야 돼요. 아무튼 요렇게 1,00억을 한 방에 그냥 벌고 대신 락업으로 여기 익스 근무하는 조건이 있어요. 자, 이런 앱 들어보셨나요? 스타일 셰어라고 앱 만들어 가지고 얼마에 팔렸냐? 무신사가 샀습니다. 3:05:56 3,억 원에 인수를 했습니다. 네. 요렇게 한 방에 그냥 넘길 수가 있겠습니다. 특정 고객을 잘 모아 가지고 리턴스 잘 나온 서비스를 만들었다 이러면 그냥 3,억에 그냥 팔 수가 있는 겁니다. 또 유명한 거 아자르라는 앱이 있습니다. 네. 요렇게 영상 채팅으로 친구 찾기, 영상 메신저 이런 앱으로 출시를 하셨는데 이거 얼마지 아시나요? 미국에 샀습니다. 이번에 미국에서 데이팅 틴더의 모기업 매치 그룹에서 17억 2,500만 달러 한화 약 2조원에 사갔습니다. 이렇게 잘 만든 서비스가 있고 유저가 잘 쓰고 잘 만들어 놓으면 이런데 사갑니다. 여러분도 열심히 만드시면 이런 거 만드셔 가지고 이제 2조에 파는 겁니다. 그냥 또 유명한 사례 있죠. 배달의 민족. 처음에 전단직 모아 가지고 앱에다가 뿌려주는 걸로 시작한 서비스입니다. 딜리버리 히오라는 독일 회사에서 40억 달러. 4조 7,500억 원에 샀습니다. 그러면은 아 이거 보고 아 이런 좀 엄청난 걸 만들어야 되나라는 좀 고민이 드시잖아요. 아닙니다. 작게 엑시할 수도 있어요. 어콰이어닷컴이라고 예전에 뭐 마이크로 어콰이어 이렇게 서비스 하셨는데 셀러 바이어가 와 가지고 내 서비스 등록하고 팔거나 사거나 할 수가 있는 겁니다. 보다가 어이 서비스 괜찮은데 하면은 3:06:57 여러분들이 사셔도 돼요. 어 이거 글로벌 시장에서 내가 키울 수 있겠다 하면은 사면 됩니다.네 그렇게 팔 수가 있습니다. 큰 회사에서 연락이 오지 않아도 여러분들이 그냥 매물을 여기 등록해 가지고 셀러로 그냥 리스팅을 해 가지고 아 우리 서비스 이렇고요. 잘 영업만 잘하면은 괜찮게 팔 수가 있습니다. 아무튼 요렇게 파는 방법 내 회사를 통제로 그냥 팔아 버리는 거에 대해서 좀 소개를 드렸는데 그런 것도 있습니다. 구주 매각이라고 있어요. 회사를 안 팔아도 돼요. 회사가 주식이 있거든요. 그래서 이게 지분이 있습니다. 내가 일정 부분 지분을 들고 있으면 이거를 팔 수가 있는 거예요. 그래서 오픈 AI 비상장 상태잖아요. 오픈 AI가 뭐 지금 주식 시장에 나스닥 이런데 주식 시장에 오픈 AI 없잖아요. 근데도 구주 매각을 할 수가 있습니다. IPO도 안 하고 뭐 나스닥 상장에서 누구나 증권사에서 거래할 수 있는게 아니라 직원이나 초기 멤버 지분이 있는데 구주 매각이라는 걸 통해서 팔아서 현금화를 하면 됩니다. 누가 사 주냐? 소프트 뱅크 뭐 손정희 회장님 숫자했다 이런 얘기 들었잖아요. 그럴 때 기존 주주가 가진 주식을 사 주는 경우가 있습니다. IPO 안 하고도 그냥 직원들 돈 벌게 해 주려고 비상장 유지하면서 선택적으로 일부를 팔 수가 있습니다. 이렇게 오픈할 말고도 많죠. 토스도 상장사가 아니잖아요. 3:07:58 이런 걸 했다고 합니다. 그래서 창업 멤버들이나 초기 투자자들이나 이런 사람들이 구주 매각할 수가 있습니다. 보유 주식 일부를 매각하여 현금화 했다고 합니다. 그래서 이거 언제 파냐 조금 더 구체적으로 설명드리면 요런게 있거든요. 스타트업 투자 라운드 뭐 이런 개념이 있습니다. 처음에 시작하면은 1억 5억 뭐 이런 받아 가지고 시작해 가지고 처음에는 당연히 돈을 막 까먹다가 PMF 40% 50% 딱 리텐션 나왔다. 점점 돈을 벌기 시작합니다. 네. 그래서 다음 라운드 투자가 뭐 시리즈 A라고 해서 막 회사들 막 들어와 가지고 돈 우리 법인에 넣고 얘네도 들어와 가지고 법인에 넣고 하는이 타이밍이 있어요.이 다음 라운드 투자를 받을 때 내 지분을 넘기고 현금을 가져올 수 있습니다. 그래서 초기 멤버지만 이제 회사 난 손 떼고 싶다. 다음 라운드 투자 받으면서 지분 다 넘기고 떠날 수도 있는 거죠. 뭐 투자 유치 이거 관련해서는 아 요거 체크 잘 되겠습니다. 투자를 받아 가지고 좀 더 빨리 키우고 돈을 좀 태워 가면서 규모를 키우고 싶다 하면은 이런 것도 전략일 수 있겠죠. 네. 그리고 또 다른 사례 인간을 팔 수도 있습니다. 팀 사람이 똑똑해 가지고 사람을 팔 수도 있거든요. 제품은 버리고 사람만 취한 에콰이어 뭐 이렇게 부르는데 파스라는 회사가 페이스북에 팔릴 때 회사 전체를 인수를 했거든요. 와 그러면 3:09:00 페이스북에서이 파스라는 걸 운영하나라고 생각할 수 있는데 버렸어요. 그냥 버리고 핵심 엔지니어들만 흡수를 한 거예요. 사람이 똑똑하네. 사람을 좀 데려오고 싶은데 하는 회사에서는 그냥 처분을 합니다. 엔지니어들만 쏙 빼아 가지고 데려갈 수도 있어요. 요런 전략도 있다. 그래서 꼭 서비스가 잘 될 필요는 없습니다. 사례 되게 많아요. 밸루가 이런 것도 페이스북에 사가 가지고 회사 전체 인수했는데 페이스북 메신저 팁 합류하고 메신저를 만들 수 있는 팀이 필요했던 거지.이 회사 밸루가 이런 거 필요가 없었습니다. 네. 그리고 캐릭터 AI. 그래서 회사를 통제로 판 건 아닌데 캐릭터 AI는 핵심 창업자와 인재가 빅테크로 이동한 어떤 사람 중심의 애도 있을 수가 있습니다. 심지어 얘는 사람만 팔리고 회사는 그대로 유지될 수도 있습니다. 예. 아무튼 요런 사례도 있다. 이런 사례도 있습니다. 어 이거 회사 사람들 싹싹싹싹 빼가면은 결국에 이거 독점 이런 이슈가 있지 않나 해서 엔비디아에서 최근에 그록이라는 칩 스타트업 인수한 거 아세요? 라이센스 계약 맺으면서 기술자 인력이 엔비디아 합류를 했거든요. 약간 애매해요. 이게 그록 회사를 산 것도 아니고 라이센스 계약을 하면서 인재만 쏙 빼가고 그렇다고이 회사를 인수한 것 아니서 독점 이런 것도 아니고 해서 애매하게 3:10:01 이렇게 하는 이런 케이스들이 있습니다. 그래서 이렇게 하는 케이스도 있다. 즉 다양한 케이스가 있어요. 결국에는 뭐 인간이 눈에 띄거나 제품이 눈에 띄거나 뭐가 눈에 띄면 일단 이런 식으로 엑시할 기회는 너무 많습니다. 네. 요런 사례들 쭉 소개드리면서 전반적으로 매각에서 요런 사례들 한번 쭉 소개를 드렸습니다. 매각이 끝이 아니라 또 세 번째 전략. 나는이 회사가 너무 좋다. IPO까지 가셔도 됩니다. IPO가 뭐냐? 회사 소유권 일부를 공개 시장에 넘기는 겁니다. 우리 회사 주식 중에 일부를 상장사로 올라가면은 이제 증권사입 켜 가지고 사고파고 할 수가 있는 거예요. 그래서 공개 시장에 넘기는 일이 IPO고요. 네. 그래서 IPO까지 가면은 이제 내 회사를 일정 부분 지분도 소유하면서 현금이 필요할 때 조금씩 팔면서 현금화하면서 생활을 할 수가 있겠습니다. 그래서 IPO의 본질은 회사가 시장에 내놔 가지고 시장에서 이제 거래가 활발하게 될 수 있도록 만드는게 IPO입니다. 브랜드 실뢰도나 창업자 지분 이런 거 유지하면서 대신에 안 좋은 점 준비 기간이 매우 깁니다. 공개 시장이다 보니까 이런 공시 규제 뭐 감사 이런 거 있고요. 이런 압박은 있지만 그래도 가장 큰 어떤 과실을 먹을 수 있으면서도 회사도 유지하면서 이런 걸 3:11:02 할 수 있는 거죠. 네. 아무튼 요렇게 해서 회사를 잘 키운다 하면은 요렇게 IPO도 할 수 있다. 그래서 놀랍게도 이번에 진행된 해커톤 프라이머와 오픈의 아이가 함께하는 해커톤이잖아요. 건독윤 대표님이 계십니다. 한국의 1세대 벤처 창업신데 본인이 창업한 회사 이니시스 이니텍을 창업하셔 가지고 IPO 코스닥 상장 및 메가까지 성공을 시키셨습니다. 그래서 그분이 직접 심사를 보십니다. 그래서 꼭 참여해 보시면 좋을 것 같습니다. 한국 시장만 있냐? 나스닥 갈 수 있습니다. 네이버 웹툰 상장해 가지고 실제로 나스닥 시장에서 거래가 되죠. 여러분들도 서비스 잘 만드셔서 요렇게 나스닥 상장까지 가실 수가 있겠습니다. 요즘 정부에서도 많이 밀어 주고 있어요. 이런 것도 해 주니까 사실 받으면 나쁘지 않지 않을까? 그리고 뭐 이런 거 대출도 받을 수 있습니다. 이런 것도 해 볼 수 있는 도전이긴 한데 예. 그래서 이런 것도 있다라고 소개를 드리고요. 결국에는 이건 거 같아요. 이걸 해 나가는 거를 반복하는데 그걸 계속하면서 고객을 모으고 회사를 키우고 서비스를 좋게 만들고 하는 거를 계속 반복하시는 겁니다. 결국에는 나스닥에 가실 수도 있겠습니다. 그래서 제 영상 지금 보시고 딱 불타오르는 분들 계시죠? 나스닥 상장까지가 보시면 테슬라를 3:12:03 드립니다. 이벤트 나스닥 IPO에 성공해 보세요. SNS 글 하나 올려 주시고 조코딩 언급 및 퇴금만 해 주시면 됩니다. 조코딩 강의를 들었더니 나스닥 IPO를 성공했습니다. 이런 거 하나 올려 주시면 최신 테슬라 새로 나온 거 사드리겠습니다. 네. 아무튼 요렇게 해서 이제 5주차 모든 과정을 마치셨습니다. 아 축하드립니다. 네. 지금까지 강의 뭘 진행했나 요약을 한번 하면서 마무리를 해 보겠습니다. 바이브 코딩 1인창업 부트캠프. 저희 처음에는 AIR 프로덕 빌더였는데 너무 이름이 어려워 보여서 좀 더 쉽게 바이브 코딩 1인창업 부트 캠프를 진행을 했습니다. 네. 이거를 하시게 되면 개발 기획 다 배웠죠. 저희 3주차 때 돈이 된 아이디어 배웠고 개발 다 바이브 코딩 배웠고 마케팅 저희 퍼널 분석 퍼포먼스 다 배웠죠. 수익화 폴라 스트라이프 해 가지고 결제 구독 뭐 아니면 구글 에드센스 이런 거 다 배웠고 데이터 분석 퍼널 개선하는 거 그리고 그로스 이걸로 계속 반복하면서 성장하는게 그로스입니다. 그것도 다 배웠고 그래서 AI 시대 1인 창업과 프로덕트 빌더가 5주 완성 과정으로 되신 겁니다. 1주차 때 기획부터 첫 수익 처음 세팅 키보드 뭐 누를지부터 제가 키보드 띄워 드리면서 했죠. 그거부터 시작해서 웹발 기초 배포 뭐 3:13:05 광고 수익화 에디센스 다 배우고 그다음에 유입 성장해 가지고 이런 거 데이터 분석 SU GO AI 결제 붙여서 글로벌 결제로 글로벌 수익형 서비스 그리고 반복 매출 구독 같은 거 그리고 데이터베이스 회원가 이거 다 구현하고 이제 오늘 실제로 계속 개선하는 거 저희 실비 이용해서 보여 드렸고요. 퍼포먼스 마케팅 다 보여 드렸고 앱 개발 미국 법인 설립하는 거 그리고 최종적으로 엑시 전략에 대해서 소개를 드렸습니다. 그래서 요렇게 5주 동안 다 따라오신 분들은이 시대에 가장 필요한 인재가 되실 수가 있는 겁니다. 이렇게 5주차 완성 모두 수강해 주셔서 감사드리고요. 너무 고생 많으셨고요. 그래서 이것으로 이제 바이브 코딩 1인 창업 부트 캠프 마치도록 하겠습니다. 해커톤 많은 참여 부탁드리고요. 멤버십도 가입 한번 해 주시고 복습 한번 해 주시면 좋을 것 같습니다. 좋아요 안 누르신 분들네 좋아요 한 번씩만 부탁드리고 시청해 주셔서 감사합니다. 디지털 [음악] 디지털 너 나의 사랑은 디지털